/* GEЯE — About, Mission, What we're building, Roadmap, Principles */

function About() {
  return (
    <section className="section" id="about">
      <div className="wrap about-grid">
        <Reveal>
          <div className="section-head">
            <Label>About GEЯE</Label>
            <h2 className="h2">A Web3 ecosystem built by people who ship.</h2>
          </div>
        </Reveal>
        <Reveal className="about-body" style={{ transitionDelay: "80ms" }}>
          <p>We're a technology ecosystem focused on turning ideas into real, scalable solutions. Where much of Web3 chases attention, we focus on the unglamorous work: durable infrastructure, tools that builders actually use, and a community that compounds over time.</p>
          <p>Everything we make is judged by one question — does it help someone build? If the answer is no, we don't ship it.</p>
          <div className="about-stats">
            <div className="stat"><div className="k">Long-term</div><div className="v">Build horizon</div></div>
            <div className="stat"><div className="k">Utility-first</div><div className="v">Design principle</div></div>
            <div className="stat"><div className="k">Open</div><div className="v">Ecosystem stance</div></div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Mission() {
  return (
    <section className="section mission" id="mission">
      <div className="wrap">
        <Reveal><Label center>Our mission</Label></Reveal>
        <Reveal style={{ transitionDelay: "80ms" }}>
          <p className="mission-statement">
            To give builders the foundation they need to ship — turning bold ideas into
            <span className="grad"> real, scalable Web3 solutions</span> that last beyond the cycle.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function WhatWeBuild() {
  const items = [
    ["layers", "Infrastructure", "Reliable, scalable foundations engineered to hold up as usage and the ecosystem grow.", "Foundation"],
    ["terminal", "Developer tooling", "Builder-grade SDKs, APIs and tooling that get teams from idea to shipped faster.", "Tooling"],
    ["users", "Community", "A network of builders, partners and contributors growing the ecosystem together.", "People"],
    ["boxes", "Applications", "Real products on top of our stack that demonstrate utility, not speculation.", "Products"],
    ["shield-check", "Security", "Audited, defensive engineering — because infrastructure has to be trustworthy.", "Trust"],
    ["git-branch", "Open standards", "Interoperable, documented and open by default so the ecosystem can build on us.", "Open"],
  ];
  return (
    <section className="section" id="building">
      <Reveal>
        <div className="wrap">
          <div className="section-head">
            <Label>What we're building</Label>
            <h2 className="h2">The pieces of a real ecosystem.</h2>
            <p className="lead">Not a single product — a connected set of tools, infrastructure and community designed to compound.</p>
          </div>
        </div>
      </Reveal>
      <div className="wrap">
        <div className="build-grid">
          {items.map(([ic, t, d, tag], i) => (
            <Reveal key={t} className="fcard" style={{ transitionDelay: `${(i % 3) * 70}ms` }}>
              <div className="ic"><Icon name={ic} /></div>
              <h3>{t}</h3>
              <p>{d}</p>
              <span className="tag">{tag}</span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Roadmap() {
  const phases = [
    ["Phase 01", "Foundation", "shipped", ["Core infrastructure", "Brand & ecosystem identity", "Builder community launch"]],
    ["Phase 02", "Tooling", "active", ["Developer SDKs & APIs", "Documentation portal", "Partner onboarding"]],
    ["Phase 03", "Ecosystem", "planned", ["First-party applications", "Open standards release", "Grants for builders"]],
    ["Phase 04", "Scale", "planned", ["Cross-chain interoperability", "Governance & contribution", "Global builder network"]],
  ];
  return (
    <section className="section" id="roadmap">
      <Reveal>
        <div className="wrap">
          <div className="section-head">
            <Label>Roadmap</Label>
            <h2 className="h2">Progress measured in shipped work.</h2>
            <p className="lead">A path defined by execution, not promises. Each phase builds on the last.</p>
          </div>
        </div>
      </Reveal>
      <div className="wrap">
        <div className="roadmap-track">
          {phases.map(([num, title, status, items], i) => (
            <Reveal key={num} className={`phase${status === "active" || status === "shipped" ? " active" : ""}`} style={{ transitionDelay: `${i * 70}ms` }}>
              <span className="pnum">{num}</span>
              <h3>{title}</h3>
              <span className="pstatus"><span className="dot"></span>{status}</span>
              <ul>
                {items.map((it) => <li key={it}><Icon name="check" />{it}</li>)}
              </ul>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Principles() {
  const principles = [
    ["01", "Utility over speculation", "We build things people use. If it doesn't create real utility, it doesn't belong in the ecosystem."],
    ["02", "Ship, don't promise", "We'd rather show working software than talk about a future that never arrives."],
    ["03", "Build for the long term", "We optimize for durability and compounding value, not short-term attention."],
    ["04", "Open and community-first", "Open standards, transparent work, and a community that grows alongside us."],
  ];
  return (
    <section className="section" id="principles">
      <Reveal>
        <div className="wrap">
          <div className="section-head">
            <Label>Our principles</Label>
            <h2 className="h2">How we decide what to build.</h2>
          </div>
        </div>
      </Reveal>
      <div className="wrap">
        <div className="principles-grid">
          {principles.map(([n, t, d], i) => (
            <Reveal key={n} className="principle" style={{ transitionDelay: `${(i % 2) * 70}ms` }}>
              <span className="pn">{n}</span>
              <h3>{t}</h3>
              <p>{d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, Mission, WhatWeBuild, Roadmap, Principles });