// ============== stub pages (lighter) ==============

function PageHero({ index, title, lede }) {
  return (
    <section className="page-hero">
      <div className="shell">
        <Eyebrow>{index}</Eyebrow>
        <h1 dangerouslySetInnerHTML={{ __html: title }} />
        {lede && <p className="lede" style={{ marginTop: 28, maxWidth: 720 }}>{lede}</p>}
      </div>
    </section>
  );
}

function StubGrid({ items }) {
  return (
    <section>
      <div className="shell">
        <div className="stub-grid">
          {items.map((it, i) => (
            <div className="stub-cell" key={i}>
              <div className="num">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="h3">{it.t}</h3>
              <p className="body">{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Companies({ go }) {
  return (
    <main>
      <PageHero
        index="For companies · 02"
        title="Hire the people <em>everyone</em><br/>else is trying to hire."
        lede="Success-based search built for protocols, infrastructure teams, trading firms, and DAOs. Competitive rates. Replacement-guaranteed. Senior+ only."
      />
      <section className="section--tight">
        <div className="shell">
          <StatRow stats={window.W3J.STATS} />
        </div>
      </section>
      <section className="section section--tight">
        <div className="shell">
          <Eyebrow>The pipeline</Eyebrow>
          <h2 className="h-section" style={{ marginTop: 18, marginBottom: 36 }}>Five stages, <em>one</em> guarantee.</h2>
          <div className="how-row">
            {window.W3J.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>
      <StubGrid items={[
        { t: "Protocol & Infrastructure", d: "L1s, L2s, ZK rollups, restaking, modular DA. Engineering, research, BD, founding teams." },
        { t: "DeFi", d: "DEX, perps, lending, stablecoins, derivatives. Solidity, Rust, quant, growth, ops." },
        { t: "Trading & Quant", d: "Prop firms, market makers, MEV searchers. Quant research, low-latency engineering, trading infra." },
        { t: "DAOs & Governance", d: "Foundations, governance platforms, treasury managers. Ops, legal-adjacent, community leadership." },
      ]} />
      <section className="bigcta">
        <div className="hero-grid" style={{ opacity: 0.4 }} />
        <div className="shell" style={{ position: "relative" }}>
          <Eyebrow>Start a search</Eyebrow>
          <h2 style={{ marginTop: 24 }}>Tell us<br/>who you <em>need.</em></h2>
          <div className="bigcta-row">
            <Btn kind="primary" href="https://forms.gle/web3joe-client-onboarding" target="_blank">Start the brief</Btn>
            <Btn kind="ghost" arrow={false} href="mailto:hello@web3joe.com">hello@web3joe.com</Btn>
          </div>
        </div>
      </section>
    </main>
  );
}

function Candidates({ go }) {
  return (
    <main>
      <PageHero
        index="For candidates · 03"
        title="Roles you'll <em>never</em><br/>see posted publicly."
        lede="The best Web3 jobs aren't on job boards. They move through warm networks. We are the warm network."
      />
      <StubGrid items={[
        { t: "Off-market access", d: "Founders share mandates with us before they go public. By the time a role hits LinkedIn, it's usually closed." },
        { t: "Comp negotiation", d: "We've signed our own term sheets. We know which clauses to push on — base, cliff, acceleration, double-trigger." },
        { t: "Honest company reads", d: "Burn, governance dynamics, founder caliber, real product traction. We tell you before you take the call." },
        { t: "Career advisory", d: "Whether you place this round or not. We play the long game with people we believe in." },
      ]} />
      <section className="bigcta">
        <div className="hero-grid" style={{ opacity: 0.4 }} />
        <div className="shell" style={{ position: "relative" }}>
          <Eyebrow>Submit your profile</Eyebrow>
          <h2 style={{ marginTop: 24 }}>Build a private<br/><em>candidate</em> file.</h2>
          <div className="bigcta-row">
            <Btn kind="primary" href="https://forms.gle/web3joe-candidate-profile" target="_blank">Submit profile</Btn>
            <Btn kind="ghost" onClick={() => go("jobs")}>Browse open roles</Btn>
          </div>
        </div>
      </section>
    </main>
  );
}

function About({ go }) {
  return (
    <main>
      <PageHero
        index="About · 04"
        title="Founded and run<br/>by <em>operators.</em>"
        lede="Web3JOE was founded in 2022 by executives from leading Web3 protocols who got tired of losing senior hires to recruiters who didn't know what 'restaking' meant."
      />
      <StubGrid items={[
        { t: "We've shipped", d: "Our team has built and shipped on Solana, Ethereum, multiple L2s, ZK systems, and trading infrastructure. We speak the language because we lived it." },
        { t: "Quiet by design", d: "We don't post placement announcements. We don't tag founders on X. Most of our work happens in private group chats and back-channel intros." },
        { t: "Long-time horizons", d: "We turn down more retainers than we accept. We'd rather work with twenty companies for ten years than two hundred for six months." },
        { t: "Skin in the game", d: "We take partial comp in tokens from clients we believe in. Their success is our success." },
      ]} />
    </main>
  );
}

function Events({ go }) {
  const events = [
    { d: "MAY 14", t: "Solana Engineering Dinner", l: "NYC · Invite only", n: "16 ENGINEERS" },
    { d: "JUN 06", t: "DeFi Founders Roundtable", l: "Lisbon · Token Summit", n: "24 FOUNDERS" },
    { d: "JUL 19", t: "ZK Research Salon", l: "Berlin · Web3 Berlin", n: "32 RESEARCHERS" },
    { d: "SEP 12", t: "MEV Off-the-Record", l: "Singapore · TOKEN2049", n: "18 OPERATORS" },
  ];
  return (
    <main>
      <PageHero
        index="Events · 05"
        title="Small rooms.<br/><em>Real</em> conversations."
        lede="Web3JOE curates and hosts intimate gatherings — engineering dinners, founder roundtables, research salons. Application-only. No press. No badges."
      />
      <section>
        <div className="shell">
          <div className="role-list">
            {events.map((e, i) => (
              <div className="role-card" key={i}>
                <span className="rid">{e.d}</span>
                <div>
                  <div className="rtitle">{e.t}</div>
                  <div className="rcompany">{e.l}</div>
                </div>
                <div className="rmeta"><span className="chip chip--accent">{e.n}</span></div>
                <div className="rcomp"><span className="ccy">·</span></div>
                <div className="rarrow"><Icon.Arrow size={12} /></div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="bigcta">
        <div className="hero-grid" style={{ opacity: 0.3 }} />
        <div className="shell" style={{ position: "relative" }}>
          <h2 style={{ marginTop: 24 }}>Host with <em>us.</em></h2>
          <div className="bigcta-row">
            <Btn kind="primary" onClick={() => go("contact")}>Propose an event</Btn>
          </div>
        </div>
      </section>
    </main>
  );
}

function Blog({ go }) {
  const posts = [
    { cat: "MARKET INTEL", t: "Q1 2026 Web3 comp benchmarks", read: "8 MIN" },
    { cat: "HIRING PLAYBOOK", t: "Token grants without lawyers", read: "12 MIN" },
    { cat: "CAREER GUIDE", t: "Reading a protocol's runway", read: "6 MIN" },
    { cat: "ECOSYSTEM", t: "Where Solana hires its top-1%", read: "9 MIN" },
    { cat: "MARKET INTEL", t: "What founders pay in 2026", read: "11 MIN" },
    { cat: "HIRING PLAYBOOK", t: "The 23-day search calendar", read: "7 MIN" },
  ];
  return (
    <main>
      <PageHero
        index="Insights · 06"
        title="Field notes from<br/>the <em>recruiting</em> floor."
        lede="Salary benchmarks, hiring playbooks, ecosystem deep dives. Written by the people doing the searches."
      />
      <section>
        <div className="shell">
          <div className="role-list">
            {posts.map((p, i) => (
              <div className="role-card" key={i}>
                <span className="rid">{String(i+1).padStart(2, "0")}</span>
                <div>
                  <div className="rtitle">{p.t}</div>
                  <div className="rcompany">{p.cat}</div>
                </div>
                <div className="rmeta"><span className="chip">{p.read}</span></div>
                <div className="rcomp"><span className="ccy">·</span></div>
                <div className="rarrow"><Icon.ArrowUR size={12} /></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function Contact({ go }) {
  return (
    <main>
      <PageHero
        index="Contact · 07"
        title="Let's <em>talk.</em>"
        lede="Pick a path. We respond inside 24 hours, weekends included."
      />
      <section>
        <div className="shell">
          <div className="path-grid">
            <a className="path-cell" onClick={(e) => { e.preventDefault(); go("companies"); }}>
              <div className="top">PATH A</div>
              <h3>I'm <em>hiring.</em></h3>
              <div className="arrow-cta">START A SEARCH →</div>
            </a>
            <a className="path-cell" onClick={(e) => { e.preventDefault(); go("candidates"); }}>
              <div className="top">PATH B</div>
              <h3>I'm <em>looking</em><br/>for a role.</h3>
              <div className="arrow-cta">SUBMIT PROFILE →</div>
            </a>
            <a className="path-cell" href="mailto:hello@web3joe.com">
              <div className="top">PATH C</div>
              <h3>Partnership<br/>or <em>other.</em></h3>
              <div className="arrow-cta">SAY HELLO →</div>
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Companies = Companies;
window.Candidates = Candidates;
window.About = About;
window.Events = Events;
window.Blog = Blog;
window.Contact = Contact;