// ============== landing page ==============

function Landing({ go }) {
  const { STATS, PARTNERS, HOW_STEPS, useRoles } = window.W3J;
  const { roles: ROLES } = useRoles();
  const featured = ROLES.slice(0, 6);

  // Ticker is driven by real roles — no fake data
  const tickerItems = ROLES.slice(0, 12).map((r) => ({
    title: r.title,
    chain: r.chain || r.cat || "—",
    comp: `$${r.min}–${r.max}k`,
  }));

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero-grid" />
        <div className="shell" style={{ position: "relative", zIndex: 1 }}>
          <div className="hero-meta">
            <Eyebrow>Web3 Job Opps & Events · est. 2022</Eyebrow>
            <span className="chip">100+ placements</span>
            <span className="chip chip--accent">23 day median TTH</span>
          </div>
          <HeroDisplay />
          <div className="hero-bottom">
            <p className="lede">
              The recruiting layer the Web3 industry uses
              when a search has to close, the candidate has to be real, and the offer
              has to land. Operators sourcing operators, in private.
            </p>
            <div>
              <div className="hero-cta-row">
                <Btn kind="primary" onClick={() => go("companies")}>Start hiring</Btn>
                <Btn kind="ghost" onClick={() => go("jobs")}>Browse open roles</Btn>
              </div>
              {tickerItems.length > 0 && (
                <div className="mono" style={{ marginTop: 24, fontSize: 11, color: "var(--fg-faint)", letterSpacing: "0.08em" }}>
                  ↓ LIVE FROM THE NETWORK
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <Ticker items={tickerItems} />

      {/* STATS */}
      <section className="section section--tight">
        <div className="shell">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36, gap: 24, flexWrap: "wrap" }}>
            <div>
              <Eyebrow>Index 01 · Track Record</Eyebrow>
              <h2 className="h-section" style={{ marginTop: 18 }}>Numbers that <em>compound.</em></h2>
            </div>
          </div>
          <StatRow stats={STATS} />
        </div>
      </section>

      {/* PARTNER LEDGER */}
      <section className="section section--tight">
        <div className="shell">
          <div style={{ marginBottom: 36 }}>
            <Eyebrow>Index 02 · Active Network</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 18 }}>Selected placements,<br/><em>names redacted.</em></h2>
            <p className="lede" style={{ marginTop: 18 }}>
              Our clients prefer privacy. Categories shown, names available under NDA.
            </p>
          </div>
          <div className="ledger">
            <div className="ledger-side">
              ACTIVE PARTNERS<br/>
              <span style={{ color: "var(--fg)" }}>62</span> in 2026<br/>
              <span style={{ color: "var(--fg)" }}>$840M</span> TVL represented
            </div>
            <div className="ledger-grid">
              {PARTNERS.map((p, i) => (
                <div className="ledger-cell" key={i}>
                  <div className="ledger-tag">{p.tag}</div>
                  <div className="ledger-name">{p.name}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="section">
        <div className="shell">
          <div style={{ marginBottom: 48, maxWidth: 760 }}>
            <Eyebrow>Index 03 · The Process</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 18 }}>From <em>brief</em> to bench<br/>in twenty-three days.</h2>
          </div>
          <div className="how-row">
            {HOW_STEPS.map((s) => (
              <div className="how-step" key={s.num}>
                <div className="num">{s.num}</div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
                <div className="timestamp">{s.time}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SPLIT VALUE PROP */}
      <section className="section section--tight">
        <div className="shell">
          <div style={{ marginBottom: 36 }}>
            <Eyebrow>Index 04 · Two sides, one room</Eyebrow>
          </div>
          <div className="split">
            <div>
              <span className="chip chip--accent">FOR COMPANIES</span>
              <h3>Hire the people<br/><em>everyone else</em> is trying to hire.</h3>
              <ul>
                <li><span className="tick">→</span><span>Success-based search at competitive rates.</span></li>
                <li><span className="tick">→</span><span>Senior+ candidates only. Median time-to-shortlist: 9 days.</span></li>
                <li><span className="tick">→</span><span>Offer construction support: token grants, vesting, cliff.</span></li>
                <li><span className="tick">→</span><span>90-day replacement guarantee. We have skin in the game.</span></li>
              </ul>
              <div className="split-cta">
                <Btn kind="primary" onClick={() => go("companies")}>Start a search</Btn>
              </div>
            </div>
            <div>
              <span className="chip">FOR CANDIDATES</span>
              <h3>Roles you'll <em>never</em> see posted publicly.</h3>
              <ul>
                <li><span className="tick">→</span><span>Access to off-market roles at top L1s, L2s, DeFi blue-chips.</span></li>
                <li><span className="tick">→</span><span>Comp negotiation by people who've signed the same paper.</span></li>
                <li><span className="tick">→</span><span>Honest read on the company before you take the call.</span></li>
                <li><span className="tick">→</span><span>Career advisory whether you place this round or not.</span></li>
              </ul>
              <div className="split-cta">
                <Btn kind="ghost" onClick={() => go("candidates")}>Submit your profile</Btn>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED ROLES — hidden if no roles open */}
      {featured.length > 0 && (
        <section className="section section--tight">
          <div className="shell">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32, gap: 24, flexWrap: "wrap" }}>
              <div>
                <Eyebrow>Index 05 · Open This Week</Eyebrow>
                <h2 className="h-section" style={{ marginTop: 18 }}>Featured <em>roles.</em></h2>
              </div>
              <Btn kind="ghost" onClick={() => go("jobs")}>View all {ROLES.length} role{ROLES.length === 1 ? "" : "s"}</Btn>
            </div>
            <div className="role-list">
              {featured.map((r) => (
                <div className="role-card" key={r.id} onClick={() => go("jobs", { id: r.id })}>
                  <span className="rid">{r.id}</span>
                  <div>
                    <div className="rtitle">{r.title}</div>
                    <div className="rcompany">{r.company} · {r.remote}</div>
                  </div>
                  <div className="rmeta">
                    {r.chain && <span className="chip">{r.chain}</span>}
                    {r.stack.slice(0, 2).map((s) => <span className="chip" key={s}>{s}</span>)}
                  </div>
                  <div className="rcomp"><span className="ccy">$</span>{r.min}–{r.max}k</div>
                  <div className="rarrow"><Icon.Arrow size={12} /></div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* CLOSING CTA */}
      <section className="bigcta">
        <div className="hero-grid" style={{ opacity: 0.4 }} />
        <div className="shell" style={{ position: "relative" }}>
          <Eyebrow>Index 06 · Your Move</Eyebrow>
          <h2 style={{ marginTop: 24 }}>The right<br/>person <em>exists.</em><br/>We know them.</h2>
          <div className="bigcta-row">
            <Btn kind="primary" onClick={() => go("companies")}>Start hiring</Btn>
            <Btn kind="ghost" onClick={() => go("jobs")}>Browse roles</Btn>
            <Btn kind="ghost" arrow={false} onClick={() => window.location.href = "mailto:hello@web3joe.com"}>hello@web3joe.com</Btn>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Landing = Landing;