/* P.E.S.T — Nav + 3 Hero variants */
const { useState, useEffect, useRef } = React;

const EMBLEM = "assets/pest-emblem.png";

function Wordmark({ className }) {
  return (
    <h1 className={"wordmark " + (className || "")}>
      <span className="glitch grad-text" data-text="P.E.S.T">P.E.S.T</span>
    </h1>
  );
}

function Acronym({ className }) {
  const words = ["Play", "Earn", "Strive", "Together"];
  return (
    <div className={"acronym " + (className || "")}>
      {words.map((w, i) => (
        <React.Fragment key={w}>
          {i > 0 && <i className="sep">/</i>}
          <span><b className="grad-text">{w[0]}</b>{w.slice(1)}</span>
        </React.Fragment>
      ))}
    </div>
  );
}

function SocialLink({ kind, href, primary, label }) {
  const meta = window.SOCIAL_META[kind];
  const I = meta.icon;
  const url = href && href !== "#" ? href : (window.PEST_LINKS && window.PEST_LINKS[kind]) || "#";
  return (
    <a className={"btn" + (primary ? " btn-primary" : "")} href={url} target="_blank" rel="noreferrer">
      <I /> {label || meta.label}
    </a>
  );
}

function Motto({ big }) {
  return (
    <div className={"motto" + (big ? " big" : "")}>
      <span className="glitch grad-text" data-text="WE ARE THE PLAGUE">WE ARE THE PLAGUE</span>
    </div>
  );
}

/* Action button used for Launch App + Shop.
   - href = null  -> shows a "Coming soon" tooltip (no navigation)
   - href = "..." -> becomes a live link. THIS is the only edit needed to go live later. */
function SoonAction({ label, icon: I, primary, block, href }) {
  const [show, setShow] = useState(false);
  const live = !!href;
  const cls = "btn nav-launch" + (primary ? " btn-primary" : " nav-secondary");
  const inner = (<React.Fragment>{I ? <I /> : null} {label}</React.Fragment>);
  return (
    <div
      className={"soon-wrap" + (block ? " block" : "")}
      onMouseEnter={() => !live && setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      {live ? (
        <a className={cls} href={href} target="_blank" rel="noreferrer">{inner}</a>
      ) : (
        <button className={cls} onClick={() => setShow((s) => !s)} aria-label={label + " — coming soon"}>{inner}</button>
      )}
      {!live && <span className={"soon-tip" + (show ? " on" : "")}>Coming soon</span>}
    </div>
  );
}

const NAV_LINKS = [
  ["#manifesto", "Manifesto"],
  ["#structure", "Structure"],
  ["#members", "Core Members"],
  ["#partners", "Partners"],
];

// === GO-LIVE: paste a URL into `href` when each product launches. No other change needed. ===
const NAV_ACTIONS = [
  { key: "shop", label: "Shop", icon: window.Icon.shop, primary: false, href: null },
  { key: "launch", label: "Launch App", icon: window.Icon.launch, primary: true, href: "https://app.pestdao.xyz" },
];

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menu, setMenu] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();
    window.addEventListener("scroll", on);
    return () => window.removeEventListener("scroll", on);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menu ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menu]);

  return (
    <React.Fragment>
    <nav className={"nav" + (scrolled || menu ? " scrolled" : "")}>
      <a className="nav-brand" href="#top" onClick={() => setMenu(false)}>
        <img src={EMBLEM} alt="P.E.S.T" />
        <span className="wm grad-text">P.E.S.T</span>
      </a>

      <div className="nav-links">
        {NAV_LINKS.map(([href, label]) => (
          <a key={href} href={href}>{label}</a>
        ))}
      </div>

      <div className="nav-cta">
        <div className="nav-socials">
          <a className="icon-btn" href={window.PEST_LINKS.discord} target="_blank" rel="noreferrer" aria-label="Discord"><window.Icon.discord /></a>
          <a className="icon-btn" href={window.PEST_LINKS.x} target="_blank" rel="noreferrer" aria-label="X"><window.Icon.x /></a>
          <a className="icon-btn" href={window.PEST_LINKS.telegram} target="_blank" rel="noreferrer" aria-label="Telegram"><window.Icon.telegram /></a>
        </div>
        {NAV_ACTIONS.map((a) => (
          <SoonAction key={a.key} label={a.label} icon={a.icon} primary={a.primary} href={a.href} />
        ))}
        <button className="nav-burger" onClick={() => setMenu((m) => !m)} aria-label="Menu">
          {menu ? <window.Icon.close /> : <window.Icon.menu />}
        </button>
      </div>
    </nav>

      {menu && (
        <div className="nav-mobile">
          {NAV_LINKS.map(([href, label]) => (
            <a key={href} href={href} onClick={() => setMenu(false)}>{label}</a>
          ))}
          <div className="nav-mobile-actions">
            {NAV_ACTIONS.map((a) => (
              <SoonAction key={a.key} label={a.label} icon={a.icon} primary={a.primary} href={a.href} block />
            ))}
          </div>
          <div className="nav-mobile-socials">
            <a className="icon-btn" href={window.PEST_LINKS.discord} target="_blank" rel="noreferrer" aria-label="Discord"><window.Icon.discord /></a>
            <a className="icon-btn" href={window.PEST_LINKS.x} target="_blank" rel="noreferrer" aria-label="X"><window.Icon.x /></a>
            <a className="icon-btn" href={window.PEST_LINKS.telegram} target="_blank" rel="noreferrer" aria-label="Telegram"><window.Icon.telegram /></a>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

const META_ROW = (
  <div className="hero-meta">
    <span><b>30</b> Core Members</span>
    <span className="dot">/</span>
    <span><b>∞</b> Members</span>
    <span className="dot">/</span>
    <span>Global · <b>DE-rooted</b></span>
    <span className="dot">/</span>
    <span>pestdao.xyz</span>
  </div>
);

/* ---- Variant A: centered monument ---- */
function HeroA() {
  return (
    <section className="hero heroA" id="top">
      <div className="wrap">
        <div className="hero-inner">
          <div className="eyebrow">A web3 hivemind</div>
          <img className="emblem aberr floaty" src={EMBLEM} alt="P.E.S.T emblem" />
          <Wordmark />
          <Motto big />
          <Acronym />
          <p className="tagline">
            One mind, many nodes. A tight-knit collective sharing web3 knowledge —
            signal over noise, trust over hype.
          </p>
          <div className="hero-socials">
            <SocialLink kind="discord" href="#" primary label="Join Discord" />
            <SocialLink kind="x" href="#" label="Follow on X" />
          </div>
          {META_ROW}
        </div>
      </div>
    </section>
  );
}

/* ---- Variant B: editorial split (banner-like) ---- */
function HeroB() {
  return (
    <section className="hero heroB" id="top">
      <div className="wrap">
        <div className="hero-inner">
          <div className="hero-text">
            <div className="eyebrow">A web3 hivemind</div>
            <Wordmark />
            <Motto big />
            <Acronym />
            <p className="tagline">
              A tight-knit collective from across the globe — rooted in Germany,
              operating everywhere. We pool what we know and move as one organism
              through the web3 space.
            </p>
            <div className="hero-socials">
              <SocialLink kind="discord" href="#" primary label="Join Discord" />
              <SocialLink kind="x" href="#" label="Follow on X" />
            </div>
            {META_ROW}
          </div>
          <div className="visual">
            <img className="emblem aberr floaty" src={EMBLEM} alt="P.E.S.T emblem" />
            <span className="tag">// SIGNAL_FEED · ENCRYPTED</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Variant C: terminal / hivemind ---- */
function HeroC() {
  const lines = [
    "establishing secure channel…",
    "30 core nodes online · hive synchronized",
    "knowledge pool: web3 · defi · alpha · onchain",
    "access: members welcome · core: earned by vote",
  ];
  const [shown, setShown] = useState(0);
  useEffect(() => {
    if (shown >= lines.length) return;
    const t = setTimeout(() => setShown((s) => s + 1), 650);
    return () => clearTimeout(t);
  }, [shown]);
  return (
    <section className="hero heroC" id="top">
      <div className="wrap">
        <div className="hero-inner">
          <div className="emblem-col">
            <img className="emblem aberr floaty" src={EMBLEM} alt="P.E.S.T emblem" />
          </div>
          <div className="term">
            <div className="term-bar">
              <span className="dots"><i></i><i></i><i></i></span>
              <span>pest@hive ~ // node_session</span>
            </div>
            <div className="term-body">
              <div className="eyebrow">A web3 hivemind</div>
              <Wordmark />
              <Motto />
              <Acronym className="term-acr" />
              <div className="term-lines">
                {lines.slice(0, shown).map((l, i) => (
                  <div className="term-line" key={i}>
                    <span className="pmt">›</span> {l}
                  </div>
                ))}
                {shown < lines.length && <span className="cursor"></span>}
              </div>
              <div className="hero-socials" style={{ marginTop: 24 }}>
                <SocialLink kind="discord" href="#" primary label="Join Discord" />
                <SocialLink kind="x" href="#" label="Follow on X" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant }) {
  if (variant === "split") return <HeroB />;
  if (variant === "terminal") return <HeroC />;
  return <HeroA />;
}

Object.assign(window, { Nav, Hero, SocialLink, Wordmark, EMBLEM });