// Page: Landing (EN)
function HomePage({ go, t }) {
  const { WORKFLOWS } = window.HRI_DATA;
  const heroVariant = t.heroVariant || 'door';

  return (
    <>
      {heroVariant === 'door' && <HeroDoor go={go} />}
      {heroVariant === 'tagline' && <HeroTagline go={go} />}
      {heroVariant === 'search' && <HeroSearch go={go} />}

      {/* How it works */}
      <section className="section">
        <div className="container">
          <Kicker num="01">How it works</Kicker>
          <h2 className="h2" style={{ marginTop: 14, maxWidth: 720 }}>
            Two sides. <span className="display-serif" style={{ color: 'var(--ink-3)' }}>One directory.</span> Zero fees in between.
          </h2>
          <div className="grid grid-3" style={{ marginTop: 48, gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 'var(--radius)' }}>
            {[
              { n: '01', t: 'Operators list their workflows', b: 'Free profile. Show what you build, the tools you know, the industries you\'ve worked in. Reviews stack up over time.' },
              { n: '02', t: 'Companies post problems', b: 'Plain English. The outcome you want — not the tool. We organize everything around the workflow.' },
              { n: '03', t: 'You connect, then leave', b: 'Reach out on-platform. Sign the contract, send the money, run the project — all between you two. Reviews bring you back.' },
            ].map(s => (
              <div key={s.n} style={{ background: 'var(--bg)', padding: 32 }}>
                <div className="step-num">STEP {s.n}</div>
                <h3 className="h3" style={{ marginTop: 16, marginBottom: 12 }}>{s.t}</h3>
                <p style={{ color: 'var(--ink-2)', margin: 0 }}>{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Featured workflows */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 32, gap: 24, flexWrap: 'wrap' }}>
            <div>
              <Kicker num="02">Featured workflows</Kicker>
              <h2 className="h2" style={{ marginTop: 14, maxWidth: 600 }}>
                The outcomes people actually buy.
              </h2>
            </div>
            <a className="link-arrow" onClick={() => go('browse')}>Browse all {WORKFLOWS.length}+ workflows <Icon.arrow /></a>
          </div>
          <div className="grid grid-3" style={{ gap: 12 }}>
            {WORKFLOWS.slice(0, 6).map(w => (
              <WorkflowCard key={w.slug} w={w} go={go} />
            ))}
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <section className="section-tight">
        <div className="container">
          <div className="grid grid-4" style={{ gap: 32 }}>
            {[
              ['$0', 'Platform fees, ever'],
              ['100%', 'Of the deal stays between you'],
              ['Reviews', 'Are the only thing we own'],
              ['EN · DE', 'Markets at launch'],
            ].map(([n, l], i) => (
              <div key={i}>
                <div style={{ fontSize: 40, fontFamily: 'var(--font-serif)', fontStyle: 'italic', lineHeight: 1, color: 'var(--accent-2)' }}>{n}</div>
                <div className="kicker" style={{ marginTop: 10 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Big CTA */}
      <section className="section">
        <div className="container">
          <div style={{ border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: '64px 48px', position: 'relative', overflow: 'hidden' }}>
            <div className="dot-grid" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 48, alignItems: 'center' }}>
              <div>
                <Kicker>Ready when you are</Kicker>
                <h2 className="h2" style={{ marginTop: 16, maxWidth: 640 }}>
                  List in 6 minutes. Or post your first problem and start hearing from real humans.
                </h2>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <button className="btn btn-primary btn-lg" onClick={() => go('waitlist', 'operator')}>I'm an operator <Icon.arrow /></button>
                <button className="btn btn-lg" onClick={() => go('waitlist', 'company')}>I need AI for my business <Icon.arrow /></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function HeroDoor({ go }) {
  return (
    <section style={{ padding: '64px 0 80px', position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div className="hero-eyebrow">
          <span className="status-dot live pulse" />
          <span>Free directory · launching in EN &amp; DE</span>
        </div>
        <h1 className="display" style={{ marginTop: 28, maxWidth: 1100 }}>
          Human-managed AI agents <br /><span className="display-serif scribble">for small businesses.</span>
        </h1>
        <p style={{ fontSize: 20, color: 'var(--ink-2)', maxWidth: 680, marginTop: 32, lineHeight: 1.5 }}>
          A two-sided directory. Operators showcase the AI workflows they actually deliver. Small businesses describe the problem they need solved. You meet here. You deal off-platform. <span className="hi-mark">We never take a cut.</span>
        </p>

        <div className="door" style={{ marginTop: 56 }}>
          <div className="door-card" onClick={() => go('waitlist', 'operator')}>
            <div className="kicker door-kicker">For operators</div>
            <h3 className="h3" style={{ marginTop: 14, marginBottom: 10, fontSize: 26 }}>Get found by SMBs that need your skills.</h3>
            <p className="door-body" style={{ color: 'var(--ink-2)', marginTop: 0, marginBottom: 0, flex: 1 }}>Free profile. Real reviews. You own the deal end-to-end.</p>
            <span className="door-cta">
              Create operator profile
              <span className="door-cta-arrow"><Icon.arrow /></span>
            </span>
          </div>
          <div className="door-card door-primary" onClick={() => go('waitlist', 'company')}>
            <div className="kicker door-kicker">For companies</div>
            <h3 className="h3" style={{ marginTop: 14, marginBottom: 10, fontSize: 26, color: 'inherit' }}>Find a human who'll set up AI for your business.</h3>
            <p className="door-body" style={{ marginTop: 0, marginBottom: 0, flex: 1 }}>Describe the problem in plain English. Hear from real operators in days.</p>
            <span className="door-cta">
              Post your problem
              <span className="door-cta-arrow"><Icon.arrow /></span>
            </span>
          </div>
        </div>

        {/* Live ticker of operators */}
        <div style={{ marginTop: 64, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
          <span className="kicker">On the directory now</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: -8 }}>
            {window.HRI_DATA.OPERATORS.slice(0, 5).map((o, i) => (
              <div key={o.id} style={{ marginLeft: i === 0 ? 0 : -10 }}>
                <Avatar initials={o.initials} size={36} />
              </div>
            ))}
          </div>
          <span style={{ color: 'var(--ink-2)', fontSize: 14 }}>
            <strong style={{ color: 'var(--ink)' }}>{window.HRI_DATA.OPERATORS.length} operators</strong> across 6 countries · {window.HRI_DATA.PROBLEMS.length} open problems · {window.HRI_DATA.WORKFLOWS.length} workflows
          </span>
        </div>
      </div>
    </section>
  );
}

function HeroTagline({ go }) {
  return (
    <section style={{ padding: '100px 0' }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <div className="hero-eyebrow"><span className="status-dot live pulse" /> Free directory</div>
        <h1 className="display" style={{ marginTop: 32, marginInline: 'auto', maxWidth: 1100 }}>
          Human-managed AI agents <br/><span className="display-serif" style={{ color: 'var(--accent-2)' }}>for small businesses.</span>
        </h1>
        <p style={{ fontSize: 19, color: 'var(--ink-2)', maxWidth: 620, margin: '24px auto 40px', lineHeight: 1.5 }}>
          Connect with the humans who'll set up the AI. No fees. No brokering. Just a directory.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary btn-lg" onClick={() => go('waitlist', 'operator')}>I'm an operator <Icon.arrow /></button>
          <button className="btn btn-lg" onClick={() => go('waitlist', 'company')}>I need AI for my business</button>
        </div>
      </div>
    </section>
  );
}

function HeroSearch({ go }) {
  const { WORKFLOWS } = window.HRI_DATA;
  const [q, setQ] = useState('');
  return (
    <section style={{ padding: '100px 0' }}>
      <div className="container">
        <div className="hero-eyebrow"><span className="status-dot live pulse" /> 47 operators · 89 open problems</div>
        <h1 className="display" style={{ marginTop: 28, maxWidth: 1100 }}>
          Search the directory. <span className="display-serif" style={{ color: 'var(--ink-3)' }}>Find a human.</span>
        </h1>
        <div style={{ marginTop: 40, display: 'flex', gap: 8, maxWidth: 760 }}>
          <div style={{ flex: 1, position: 'relative' }}>
            <Icon.search style={{ position: 'absolute', left: 16, top: 18, color: 'var(--ink-3)' }} />
            <input
              className="input"
              placeholder="Try: ai receptionist, missed-call text-back, n8n…"
              value={q}
              onChange={e => setQ(e.target.value)}
              style={{ padding: '16px 16px 16px 42px', fontSize: 16 }}
            />
          </div>
          <button className="btn btn-primary btn-lg" onClick={() => go('browse')}>Search</button>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 20 }}>
          <span className="kicker" style={{ marginRight: 6 }}>Popular:</span>
          {WORKFLOWS.slice(0, 4).map(w => (
            <span key={w.slug} className="tag" style={{ cursor: 'pointer' }} onClick={() => go('workflow', w.slug)}>{w.name}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkflowCard({ w, go }) {
  return (
    <div className="card" style={{ padding: 22, cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 14 }} onClick={() => go('workflow', w.slug)}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>/{w.slug}</span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{w.operatorCount} ops</span>
      </div>
      <h3 className="h3">{w.name}</h3>
      <p style={{ color: 'var(--ink-2)', margin: 0, fontSize: 14, flex: 1 }}>{w.short}</p>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {w.tools.slice(0, 3).map(t => <Tag key={t} mono>{t}</Tag>)}
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, WorkflowCard });