/* nav-hero.jsx — Nav, mobile drawer, Hero (3 treatments), stats strip */

const NAV_LINKS = [
  { label: "Services", href: "#services", n: "01" },
  { label: "Process", href: "#process", n: "02" },
  { label: "Contact", href: "#contact", n: "03" },
];

function Logo({ size = 20 }) {
  return (
    <span className="nav-logo" style={{ fontSize: size }}>
      <img className="logo-img" src="logo.png" alt="Auren" style={{ height: size * 2.1 }} />
    </span>
  );
}

function Nav({ onStart }) {
  const [solid, setSolid] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);

  return (
    <React.Fragment>
      <nav className={"nav" + (solid ? " solid" : "")}>
        <a href="#top" aria-label="Auren home"><Logo size={30} /></a>
        <div className="nav-links">
          {NAV_LINKS.map((l) => (
            <a key={l.href} href={l.href}>{l.label}</a>
          ))}
        </div>
        <div className="nav-right">
          <button className="btn btn-primary btn-sm" onClick={onStart}>
            Start a project <ArrowUR size={15} cls="ar" />
          </button>
          <button className={"nav-burger" + (open ? " open" : "")} aria-label="Menu" onClick={() => setOpen((o) => !o)}>
            <span></span>
          </button>
        </div>
      </nav>
      <div className={"drawer" + (open ? " open" : "")}>
        {NAV_LINKS.map((l) => (
          <a key={l.href} href={l.href} onClick={() => setOpen(false)}>
            <span className="n">{l.n}</span>{l.label}
          </a>
        ))}
        <a href="#contact" onClick={() => setOpen(false)}>
          <span className="n">→</span>Start a project
        </a>
      </div>
    </React.Fragment>
  );
}

/* ---- stats strip ---- */
function HeroStats() {
  const [r1, v1] = useCountUp(5.0, { decimals: 1 });
  const [r2, v2] = useCountUp(7.5, { decimals: 1 });
  const [r3, v3] = useCountUp(100);
  return (
    <div className="stats reveal">
      <div className="stat" ref={r1}>
        <div className="v">{v1}<small>★ Google</small></div>
        <div className="l">21 reviews · 5.0 rating</div>
      </div>
      <div className="stat">
        <div className="v">3–5<small>days</small></div>
        <div className="l">Delivery time</div>
      </div>
      <div className="stat" ref={r3}>
        <div className="v">{v3}<small>/ 100</small></div>
        <div className="l">Average PageSpeed score</div>
      </div>
    </div>
  );
}

function Hero({ treatment = "A", onStart }) {
  const headline = treatment === "C"
    ? "We build *digital products* for *ambitious* brands."
    : "We build *digital* *products* for *ambitious* brands.";

  const lede = "Websites, branding, software and mobile apps — engineering, design and strategy from one single team.";

  return (
    <header className={"hero t" + treatment} id="top" data-screen-label="Hero">
      <div className="hero-bg">
        <image-slot id="auren-hero-bg" shape="rect" fit="cover" placeholder="Drop hero background image"></image-slot>
      </div>
      <div className="hero-grid"></div>
      <div className="hero-aura" aria-hidden="true">
        <span className="aura a1"></span>
        <span className="aura a2"></span>
      </div>
      <svg className="hero-noise" xmlns="http://www.w3.org/2000/svg">
        <filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" /></filter>
        <rect width="100%" height="100%" filter="url(#n)" />
      </svg>

      <div className="wrap hero-inner">
        <div className={treatment === "B" ? "hero-main" : ""}>
          <Eyebrow n="01">Digital Design Studio</Eyebrow>
          <h1>
            {treatment === "C"
              ? <React.Fragment>We build <em>digital products</em> for <span style={{ whiteSpace: "nowrap" }}><em>ambitious</em> brands.</span></React.Fragment>
              : <Emphi text={headline} />}
          </h1>
          {treatment !== "B" && (
            <div className="hero-sub">
              <p>{lede}</p>
              <div className="hero-actions">
                <button className="btn btn-primary" onClick={onStart}>Start a project <ArrowUR cls="ar" /></button>
                <a className="btn btn-ghost" href="https://aurelia-estates-zeta.vercel.app/#home" target="_blank" rel="noopener noreferrer">Selected work</a>
              </div>
            </div>
          )}
        </div>

        {treatment === "B" && (
          <div className="hero-side">
            <p style={{ color: "var(--ink-soft)", fontSize: 17 }}>{lede}</p>
            <div className="hero-card">
              <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-mute)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 14 }}>Now booking · Q3 / Q4</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div><div style={{ fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em" }}>30+</div><div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-mute)" }}>CLIENTS</div></div>
                <div><div style={{ fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em" }}>7.5M+</div><div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-mute)" }}>USERS REACHED</div></div>
              </div>
              <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
                <button className="btn btn-primary btn-sm" onClick={onStart} style={{ flex: 1, justifyContent: "center" }}>Start a project <ArrowUR size={14} cls="ar" /></button>
                <a className="btn btn-ghost btn-sm" href="https://aurelia-estates-zeta.vercel.app/#home" target="_blank" rel="noopener noreferrer">Work</a>
              </div>
            </div>
          </div>
        )}

        <HeroStats />
      </div>

      <div className="hero-scroll">Scroll <span className="ln"></span></div>
    </header>
  );
}

Object.assign(window, { Nav, Hero, Logo, NAV_LINKS });