// Main app — ties everything together, includes global CSS

const { useState: useAppS, useEffect: useAppE } = React;

// --- Global styles injected into the page ---
const injectStyles = () => {
  if (document.getElementById("fb-styles")) return;
  const style = document.createElement("style");
  style.id = "fb-styles";
  style.textContent = `
  /* ---------- Buttons ---------- */
  .btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px; background: var(--flame); color: #000;
    font-size: 14px; letter-spacing: 0.01em; font-weight: 500;
    transition: transform 0.2s ease, background 0.2s ease;
    cursor: pointer; border: none;
  }
  .btn-primary:hover { transform: translateY(-2px); background: #ff6238; }
  .btn-primary span { transition: transform 0.2s ease; display: inline-block; }
  .btn-primary:hover span { transform: translateX(4px); }

  .btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px; background: transparent; color: var(--ink);
    font-size: 14px; letter-spacing: 0.01em; font-weight: 500;
    border: 1px solid var(--line); transition: border-color 0.2s;
  }
  .btn-ghost:hover { border-color: var(--ink); }

  /* ---------- Nav ---------- */
  .navlink { transition: color 0.2s; }
  .navlink:hover { color: var(--ink); }
  .fb-nav-cta { transition: background 0.2s; }
  .fb-nav-cta:hover { background: var(--flame); }

  /* ---------- Marquee animation ---------- */
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ---------- Inputs ---------- */
  input:focus, select:focus, textarea:focus {
    border-bottom-color: var(--flame) !important;
  }
  input::placeholder { color: var(--ink-faint); }
  select option { background: #0a0a0a; color: var(--ink); }

  /* ---------- Service row hover expand ---------- */
  .service-row:hover { padding: 52px 0 !important; }

  /* ---------- Scroll fade in ---------- */
  .fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .fade-up.seen { opacity: 1; transform: translateY(0); }

  /* ==================== RESPONSIVE ==================== */
  @media (max-width: 900px) {
    body { font-size: 16px; }

    /* results strip */
    .results-strip { grid-template-columns: repeat(2, 1fr) !important; }
    .results-strip > div:nth-child(5) { grid-column: span 2; }

    /* story (featured cases) */
    .story-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .story-grid .story-copy { order: 2 !important; }
    .story-grid .story-photo { order: 1 !important; }
    .story-metrics { grid-template-columns: 1fr 1fr !important; }

    /* wins grid */
    .wins-grid { grid-template-columns: 1fr !important; }
    .wins-grid > div { min-height: auto !important; }

    /* screenshot wall */
    .shot-grid { grid-template-columns: 1fr 1fr !important; }

    /* testimonial wall */
    .testwall-grid { grid-template-columns: 1fr !important; }

    /* review bar */
    .reviewbar { flex-direction: column; align-items: flex-start !important; }

    /* nav */
    .fb-nav { padding: 16px 20px !important; }
    .fb-nav-links, .fb-nav-cta { display: none !important; }
    .fb-menu-btn { display: flex !important; }

    /* hero editorial */
    .hero-ed { padding: 100px 20px 40px !important; min-height: auto !important; }
    .hero-ed-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .hero-ed-right p, .hero-ed-right > div { margin-left: 0 !important; max-width: 100% !important; }
    .hero-photostrip { grid-template-columns: 1fr 1fr !important;
      height: auto !important; margin-top: 40px !important; }
    .hero-photostrip > div:first-child { grid-column: span 2; aspect-ratio: 16/9 !important; height: auto !important; }
    .hero-photostrip > div { aspect-ratio: 4/3 !important; height: auto !important; min-height: 160px; }

    /* hero split */
    .hero-split { grid-template-columns: 1fr !important; }
    .hero-split > div:first-child { padding: 60px 20px !important; border-right: none !important;
      border-bottom: 1px solid var(--line) !important; }
    .hero-split > div:last-child { min-height: 320px; }
    .hero-split > div:last-child > div { min-height: 320px !important; }

    /* sections general */
    section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 80px !important; padding-bottom: 80px !important; }

    /* stats */
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

    /* services */
    .services-header { grid-template-columns: 1fr !important; gap: 20px !important; }
    .service-row-grid { grid-template-columns: 40px 1fr 36px !important; gap: 16px !important; }
    .service-row-grid > .mono { font-size: 11px !important; }
    .service-row-grid > div:nth-child(3) { display: none !important; }
    .service-row-grid > div:last-child { justify-self: end; }
    .service-reveal { padding-left: 56px !important; }
    .service-reveal-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .service-row h3 { font-size: 22px !important; }
    .service-row:hover { padding: 36px 0 !important; } /* no bigger on mobile */

    /* process */
    .process-grid { grid-template-columns: 1fr !important; }
    .process-grid > div { min-height: auto !important; padding: 28px 20px !important; }

    /* case studies */
    .case-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .case-metrics { grid-template-columns: 1fr 1fr !important; }

    /* backstage stages */
    .stage-row { grid-template-columns: 1fr !important; gap: 28px !important; }
    .stage-meta { position: static !important; }

    /* niche bar */
    .niche-bar { grid-template-columns: 1fr !important; gap: 16px !important; }
    .niche-bar > div { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--line); padding-top: 12px; }

    /* mechanism */
    .mech-grid { grid-template-columns: 1fr !important; }
    .mech-arrow { display: none !important; }

    /* criteria */
    .criteria-grid { grid-template-columns: 1fr !important; }

    /* objections */
    .obj-grid { grid-template-columns: 1fr !important; }
    .obj-grid > div { grid-template-columns: 1fr !important; min-height: auto !important; padding: 24px !important; }
    .obj-grid > div > div:last-child { border-left: none !important; border-top: 1px solid var(--line); padding-left: 0 !important; padding-top: 16px !important; flex-direction: row !important; gap: 16px !important; align-items: baseline !important; }

    /* before/after */
    .ba-grid { grid-template-columns: 1fr !important; }

    /* story metrics */
    .story-metrics { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

    /* testimonials */
    .testimonial-grid { grid-template-columns: 1fr !important; }
    .testimonial-grid figure { min-height: auto !important; padding: 28px !important; }

    /* founder */
    .founder-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

    /* faq */
    .faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

    /* contact */
    .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

    /* footer */
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
    .footer-grid > div:first-child { grid-column: span 2; }

    /* hide-sm helper */
    .hide-sm { display: none !important; }
  }

  @media (max-width: 520px) {
    .stats-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .results-strip { grid-template-columns: 1fr !important; }
    .results-strip > div:nth-child(5) { grid-column: span 1; }
    .shot-grid { grid-template-columns: 1fr !important; }
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-grid > div:first-child { grid-column: span 1; }
    .calc-grid { grid-template-columns: 1fr !important; }
  }

  @media (max-width: 700px) {
    .calc-grid { grid-template-columns: 1fr !important; }
  }
  `;
  document.head.appendChild(style);
};

const App = () => {
  const [, forceRender] = useAppS(0);
  useAppE(() => {
    injectStyles();
    const on = () => forceRender(x => x + 1);
    window.addEventListener("fb:rerender", on);
    return () => window.removeEventListener("fb:rerender", on);
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee>No more paying for bad leads</Marquee>
      {/* <WhoWeAre /> */}
      <Marquee speed={50}>No more paying for bad leads · Booked appointments only · One operator per market · Replacement guarantee · </Marquee>
      <Stats />
      <Backstage />
      <Mechanism />
      <Criteria />
      <Process />
      <SocialProof />
      <Calculator />
      <Objections />
      <Founder />
      <FAQ />
      <Contact />
      <Footer />
      <TweaksPanel />
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);