/* GEЯE — Navigation */
function Nav() {
  const links = [
    ["About", "#about"],
    ["Mission", "#mission"],
    ["Building", "#building"],
    ["Roadmap", "#roadmap"],
    ["Principles", "#principles"],
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="wrap">
          <Brand />
          <div className="nav-links">
            {links.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
          </div>
          <div className="nav-cta">
            <Button variant="primary" href="#contact" iconRight="arrow-right">Get in touch</Button>
          </div>
        </div>
      </div>
    </nav>
  );
}

/* GEЯE — Hero */
function Hero() {
  return (
    <header className="hero">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <Reveal as="div" style={{ transitionDelay: "0ms" }}><Label>Web3 technology ecosystem</Label></Reveal>
          <Reveal as="h1" className="" style={{ font: "var(--text-hero)", letterSpacing: "var(--tracking-tight)", margin: 0, transitionDelay: "60ms" }}>
            Turning ideas into real, <span className="grad">scalable</span> Web3 solutions.
          </Reveal>
          <Reveal style={{ transitionDelay: "120ms" }}>
            <p className="sub">GEЯE Solutions builds the infrastructure, tools and community that move Web3 from concept to production. No hype — just long-term building.</p>
          </Reveal>
          <Reveal style={{ transitionDelay: "180ms" }}>
            <div className="hero-actions">
              <Button variant="primary" href="#building" iconRight="arrow-right">Explore the ecosystem</Button>
              <Button variant="secondary" href="#roadmap">Read the roadmap</Button>
            </div>
          </Reveal>
          <Reveal style={{ transitionDelay: "240ms" }}>
            <div className="hero-chips">
              <span className="chip"><Icon name="layers" /> Infrastructure</span>
              <span className="chip"><Icon name="terminal" /> Developer tooling</span>
              <span className="chip"><Icon name="users" /> Community</span>
            </div>
          </Reveal>
        </div>
        <Reveal className="hero-coin" style={{ transitionDelay: "120ms" }}>
          <span className="glow"></span>
          <img src="../../assets/gere-coin.png" alt="GEЯE Solutions medallion" />
        </Reveal>
      </div>
    </header>
  );
}

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