/* Top-level app */

function Nav() {
  const [open, setOpen] = React.useState(false);

  // Close menu on resize back to desktop
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 960 && open) setOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [open]);

  // Close on link click / esc
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const linkClick = () => setOpen(false);

  return (
    <nav className={"nav" + (open ? " is-open" : "")} data-screen-label="Nav">
      <div className="container nav-inner">
        <a className="brand" href="#" onClick={linkClick}>
          <img className="brand-mark" src={window.__withToken ? window.__withToken("/marketing/assets/string-ai-icon.png") : "/marketing/assets/string-ai-icon.png"} alt="String AI" />
          <span className="brand-name">String <span className="product">Unblocker</span></span>
        </a>
        <div className="nav-links">
          <a href="#benchmark" onClick={linkClick}>Benchmark</a>
          <a href="#pricing" onClick={linkClick}>Pricing</a>
          <a href="https://unblocker.usestring.ai/docs">Docs</a>
        </div>
        <div className="nav-cta">
          <a className="btn ghost nav-signin" href="https://portal.usestring.ai/unblocker">Sign in</a>
          <a className="btn primary nav-key" href="https://portal.usestring.ai/unblocker">Try now for free <span className="arr">→</span></a>
          <button
            className="nav-burger"
            type="button"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}
          >
            <span /><span /><span />
          </button>
        </div>
      </div>
      {/* Mobile drawer */}
      <div className="nav-drawer" aria-hidden={!open}>
        <a href="#benchmark" onClick={linkClick}>Benchmark</a>
        <a href="#pricing" onClick={linkClick}>Pricing</a>
        <a href="https://unblocker.usestring.ai/docs" onClick={linkClick}>Docs</a>
        <div className="nav-drawer-divider" />
        <a href="https://portal.usestring.ai/unblocker" onClick={linkClick}>Sign in</a>
        <a className="btn primary lg" href="https://portal.usestring.ai/unblocker" onClick={linkClick} style={{ marginTop: 8, justifyContent: "center" }}>Try now for free <span className="arr">→</span></a>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="container" data-screen-label="Footer">
      <div className="footer footer-inner">
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <img src={window.__withToken ? window.__withToken("/marketing/assets/string-ai-icon.png") : "/marketing/assets/string-ai-icon.png"} alt="" style={{ width: 22, height: 22 }} />
          <span style={{ fontSize: 13, color: "var(--text-dim)" }}>String AI · Unblocker</span>
        </div>
        <div className="copy">© 2026 String AI · all rights reserved</div>
        <div className="links">
          <a href="https://unblocker.usestring.ai/docs">Docs</a>
          <a href="#pricing">Pricing</a>
          <a href="#">Status</a>
          <a href="#">Terms</a>
        </div>
      </div>
    </footer>
  );
}

/* Headline variants for the hero tweak */
const HEADLINES = {
  Bypass: {
    eyebrow: "Q2 2026 benchmark · 97.1% success",
    h1: <>Stop getting blocked.<br />Web data from <span className="grad-text">any page.</span></>,
    lead: "String Unblocker bypasses Cloudflare, DataDome, Akamai & Kasada with one HTTP call. Pay only when we return content — no captchas, no false charges, no headless browser to babysit."
  },
  Speed: {
    eyebrow: "1.2s median · 97.1% success",
    h1: <>Web data at <span className="grad-text">agent speed.</span><br />Human reliability.</>,
    lead: "Sub-second median latency on the hardest sites in the wild. Drop in our endpoint and ship — no captcha-solving queue, no proxy pool to manage, no headless browser farm."
  },
  Benchmark: {
    eyebrow: "Independently measured · Q2 2026",
    h1: <>97% beats 73% beats <span className="grad-text">36%.</span></>,
    lead: "We benchmarked ourselves against the field on 42 of the hardest websites — guarded by DataDome, Akamai, Cloudflare & Kasada. Then we won every category."
  }
};

function App() {
  const [t] = useTweaks(window.SITE_TWEAK_DEFAULTS || {});
  const headline = HEADLINES[t.headline] || HEADLINES.Bypass;

  return (
    <>
      <Nav />
      <ConfigurableHero headline={headline} showDiagram={t.showDiagram !== false} />
      <ComparisonSection />
      <BenchmarkSections />
      <FeaturesSection />
      <PricingSection />
      <CTASection />
      <Footer />
      <SiteTweaksPanel />
    </>
  );
}

/* Hero override that respects tweaks */
function ConfigurableHero({ headline, showDiagram }) {
  return (
    <section className="hero" data-screen-label="Hero">
      <div className="bg-glow" />
      <div className="bg-dots" />
      <div className="container">
        <div className="hero-grid" style={!showDiagram ? { gridTemplateColumns: "1fr", maxWidth: 820, margin: "0 auto", textAlign: "center" } : {}}>
          <div className="hero-copy">
            <div className="eyebrow" style={!showDiagram ? { margin: "0 auto" } : {}}>
              <span className="dot"></span>{headline.eyebrow}
            </div>
            <h1>{headline.h1}</h1>
            <p className="lead lg" style={!showDiagram ? { margin: "22px auto 0" } : {}}>{headline.lead}</p>
            <div className="hero-actions" style={!showDiagram ? { justifyContent: "center" } : {}}>
              <a className="btn primary lg" href="https://portal.usestring.ai/unblocker">
                Try now for free <span className="arr">→</span>
              </a>
              <a className="btn lg" href="#benchmark">
                See the benchmark
              </a>
            </div>
            <div className="hero-trust" style={!showDiagram ? { justifyContent: "center" } : {}}>
              <span className="chip success"><span className="dot"></span>Pay per success</span>
              <span className="chip"><span className="dot"></span>Universal HTTP</span>
              <span className="chip"><span className="dot"></span>Native AI inference</span>
            </div>
          </div>
          {showDiagram && <BypassDiagram />}
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .hero-terminal { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

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