// Top sections: Nav, Hero+Showcase, Marquee, FeatureRow

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

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

  const links = [
    { href: "#work", label: "Work" },
    { href: "#services", label: "Services" },
    { href: "#packages", label: "Packages" },
    { href: "#pricing", label: "Pricing" },
    { href: "#faq", label: "FAQ" },
  ];

  return (
    <div className="nav-wrap">
      <nav className="nav">
        <a className="nav__brand" href="#top" onClick={() => setOpen(false)}>Barrage</a>
        <div className="nav__links">
          {links.map((l) => (
            <a key={l.href} href={l.href}>{l.label}</a>
          ))}
        </div>
        <a className="nav__cta" href="#contact" onClick={() => setOpen(false)}>Start a project</a>
        <button
          className="nav__burger"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          aria-controls="mobile-menu"
          onClick={() => setOpen((v) => !v)}
          data-open={open}
        >
          <span /><span /><span />
        </button>
      </nav>

      <div
        id="mobile-menu"
        className="mobile-menu"
        data-open={open}
        role="dialog"
        aria-modal="true"
        aria-label="Navigation menu"
        hidden={!open}
      >
        <div className="mobile-menu__panel">
          {links.map((l) => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)}>
              {l.label}
              <Icon.arrow />
            </a>
          ))}
          <a className="mobile-menu__cta" href="#contact" onClick={() => setOpen(false)}>
            Start a project <Icon.arrow />
          </a>
        </div>
      </div>
      <div
        className="mobile-menu__backdrop"
        data-open={open}
        onClick={() => setOpen(false)}
        aria-hidden="true"
      />
    </div>
  );
}

function Hero({ tweaks }) {
  const [activeShowcase, setActiveShowcase] = React.useState(0);
  const showcase = SHOWCASES[activeShowcase];
  const ShowcaseBody = showcase.component;

  // auto-rotate showcase
  React.useEffect(() => {
    if (!tweaks.autoRotate) return;
    const t = setInterval(() => {
      setActiveShowcase((i) => (i + 1) % SHOWCASES.length);
    }, 5000);
    return () => clearInterval(t);
  }, [tweaks.autoRotate]);

  return (
    <header className="hero shell" id="top">
      <div className="hero__bloom" />
      <h1 className="display">
        {tweaks.headlineVariant === "relentless" && (
          <>Websites that work <em>as hard</em> as you do.</>
        )}
        {tweaks.headlineVariant === "neighbors" && (
          <>Bring more <em>neighbors</em> through your door.</>
        )}
        {tweaks.headlineVariant === "barrage" && (
          <>Brand & web design, delivered <em>relentlessly</em> by Barrage.</>
        )}
      </h1>
      <p className="hero__lede">
        We build fast, beautiful websites for the businesses that keep your block running —
        the dentists, salons, PT clinics, and shops your neighbors actually visit.
      </p>
      <div className="hero__cta">
        <a className="btn btn--primary btn--lg" href="#contact">Book a free strategy call <Icon.arrow /></a>
        <a className="btn btn--ghost btn--lg" href="#work">See the work</a>
      </div>
      <div className="hero__meta">
        <div className="hero__avatars">
          <span style={{background:"linear-gradient(135deg,#C66A3D,#9C4F2D)"}}/>
          <span style={{background:"linear-gradient(135deg,#4A6B58,#2C3A33)"}}/>
          <span style={{background:"linear-gradient(135deg,#6B2737,#B85A6E)"}}/>
          <span style={{background:"linear-gradient(135deg,#1F1A15,#5C4E3D)"}}/>
        </div>
        <span>140+ local businesses launched · est. 2021</span>
      </div>

      {/* Showcase browser */}
      <div className="showcase" id="work">
        <div className="browser">
          <div className="browser__bar">
            <div className="browser__dots"><span/><span/><span/></div>
            <div className="browser__url">
              <Icon.spark style={{color:"var(--accent)"}}/>
              <span>{showcase.url}</span>
            </div>
            <div style={{display:"flex",gap:6}}>
              {SHOWCASES.map((s, i) => (
                <button
                  key={s.id}
                  onClick={() => setActiveShowcase(i)}
                  aria-label={`Show ${s.id}`}
                  style={{
                    width: i === activeShowcase ? 22 : 8,
                    height: 8,
                    borderRadius: 999,
                    border: "1px solid var(--line-2)",
                    background: i === activeShowcase ? "var(--ink)" : "transparent",
                    transition: "all .2s",
                    padding: 0, cursor: "pointer"
                  }}
                />
              ))}
            </div>
          </div>
          <div className="browser__body">
            <ShowcaseBody />
          </div>
        </div>
      </div>
    </header>
  );
}

function Marquee() {
  const items = ["Dentists", "Salons", "Smoke shops", "PT clinics", "Vets", "Barbers", "Yoga studios", "Pediatrics"];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        <span>
          {[...items, ...items].map((t, i) => (
            <React.Fragment key={i}>
              <em style={{fontStyle:"italic"}}>{t}</em>
              <span className="star" />
            </React.Fragment>
          ))}
        </span>
        <span>
          {[...items, ...items].map((t, i) => (
            <React.Fragment key={i + "b"}>
              <em style={{fontStyle:"italic"}}>{t}</em>
              <span className="star" />
            </React.Fragment>
          ))}
        </span>
      </div>
    </div>
  );
}

function FeatureRow() {
  return (
    <section className="shell">
      <div className="feature-row">
        {window.BARRAGE.features.map((f, i) => (
          <div className="feature-row__cell" key={f.key}>
            <span className="icon">
              {f.key === "found" && <Icon.search />}
              {f.key === "book" && <Icon.cal />}
              {f.key === "look" && <Icon.bolt />}
            </span>
            <h4>{f.title}</h4>
            <p>{f.desc}</p>
            <div className="kicker" style={{marginTop:8}}>{f.stat}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Marquee, FeatureRow });