// Pages: For Operators, For Companies
function ForOperatorsPage({ go }) {
  return (
    <>
      <section style={{ padding: '80px 0' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="hero-eyebrow"><span className="status-dot live pulse" /> For operators · free forever</div>
              <h1 className="display" style={{ marginTop: 24, fontSize: 'clamp(36px, 5vw, 60px)' }}>
                Get found by SMBs <span className="display-serif" style={{ color: 'var(--accent-2)' }}>that need your skills.</span>
              </h1>
              <p style={{ fontSize: 18, color: 'var(--ink-2)', marginTop: 20, maxWidth: 540 }}>
                List the workflows you build. The tools you know. The industries you've shipped in. We send small businesses your way — you decide who you work with, and how.
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 32, flexWrap: 'wrap' }}>
                <button className="btn btn-primary btn-lg" onClick={() => go('signup')}>Create operator profile <Icon.arrow /></button>
                <button className="btn btn-lg" onClick={() => go('operator')}>See an example profile</button>
              </div>
            </div>
            <SampleOperatorPeek go={go} />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Kicker num="01">How it works</Kicker>
          <h2 className="h2" style={{ marginTop: 14, maxWidth: 720 }}>Three steps. About six minutes.</h2>
          <div style={{ marginTop: 40, borderTop: '1px solid var(--line)' }}>
            {[
              ['Build your profile', 'Bio, headshot, the workflows you deliver, the tools you specialize in, 3–5 portfolio descriptions. Multi-select what fits.'],
              ['Get matched to open problems', 'Companies post what they need. We surface yours when their workflow + region + tools line up. You also show up in browse + SEO pages.'],
              ['Reach out, deal directly', 'You own the conversation, the contract, the money, the relationship. We never see any of it. Just leave a review when you\'re done.'],
            ].map(([title, body], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 2fr', gap: 32, padding: '28px 0', borderBottom: '1px solid var(--line)', alignItems: 'baseline' }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', color: 'var(--accent)' }}>STEP 0{i + 1}</span>
                <h3 className="h3">{title}</h3>
                <p style={{ color: 'var(--ink-2)', margin: 0 }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Kicker num="02">Why list here</Kicker>
          <div className="grid grid-3" style={{ marginTop: 32, gap: 12 }}>
            {[
              ['Free forever', 'No listing fee, no commission, no upsells. The directory exists to bring people together — that\'s the whole product.'],
              ['Your reviews, your reputation', 'Reviews follow your profile. You build a track record that survives any platform change. Reviews are the one thing we own — they protect both sides.'],
              ['You own the deal end-to-end', 'No escrow. No contracts we touch. No "platform terms" between you and the client. Just a directory that helps people find you.'],
              ['Workflow-first discovery', 'SMBs search for outcomes ("AI receptionist"), not tools. So you get matched to people who already know what they want.'],
              ['SEO that compounds', 'Every workflow gets its own SEO page listing the operators who deliver it. Show up for hundreds of long-tail queries you\'d never rank for alone.'],
              ['DACH from day one', 'EN and DE markets at launch. If you speak German, you\'re already in a smaller pool with more demand.'],
            ].map(([t, b], i) => (
              <div key={i} className="card" style={{ padding: 24 }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--accent)' }}>
                  <Icon.check />
                  <span className="kicker" style={{ color: 'var(--accent)' }}>Benefit</span>
                </div>
                <h3 style={{ fontSize: 18, marginTop: 12, marginBottom: 8, fontWeight: 500 }}>{t}</h3>
                <p style={{ color: 'var(--ink-2)', margin: 0, fontSize: 14 }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FAQ
        title="Operator FAQ"
        items={[
          ['Is it really free?', 'Yes. No listing fee, no per-message fee, no take rate on deals. The directory is the product. Long-term we may add optional paid promotion or analytics — never gating the core listing.'],
          ['How do I get reviews?', 'After a connection happens on-platform, both parties can leave a review once the work has wrapped. Reviews are tied to a verified workflow delivery — not a star out of nothing.'],
          ['Can I be hidden / private?', 'Profiles are public by default. You can pause your profile any time without deleting it.'],
          ['What if a client and I have a dispute?', 'We aren\'t party to the deal, so we don\'t mediate. But we will moderate reviews if either party reports a clearly false or abusive one.'],
          ['Do you take a cut of the contract?', 'No. We never see your contract or your money. Off-platform deals only.'],
        ]}
      />

      <BigCTA go={go} title="Six minutes from now you could be listed." cta="Create operator profile" target="signup" />
    </>
  );
}

function SampleOperatorPeek({ go }) {
  const op = window.HRI_DATA.OPERATORS[0];
  return (
    <div className="card" style={{ padding: 24, position: 'relative' }}>
      <div className="kicker" style={{ position: 'absolute', top: -10, left: 20, background: 'var(--bg)', padding: '0 8px', color: 'var(--ink-3)' }}>EXAMPLE PROFILE</div>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
        <Avatar initials={op.initials} size={52} />
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 500, fontSize: 17 }}>{op.name}</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em', marginTop: 4 }}>{op.region.toUpperCase()} · {op.languages.join('·')}</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, color: 'var(--accent-2)', fontSize: 13 }}>
          <Icon.star /> {op.rating}
        </div>
      </div>
      <p style={{ color: 'var(--ink-2)', fontSize: 13, marginTop: 14 }}>{op.bio}</p>
      <div className="kicker" style={{ marginTop: 16 }}>Workflows</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
        {op.workflows.map(slug => {
          const w = window.HRI_DATA.WORKFLOWS.find(x => x.slug === slug);
          return <Tag key={slug} accent>{w?.name}</Tag>;
        })}
      </div>
      <div className="kicker" style={{ marginTop: 16 }}>Tools</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
        {op.tools.map(t => <Tag key={t} mono>{t}</Tag>)}
      </div>
      <button className="btn btn-sm" style={{ marginTop: 18, width: '100%' }} onClick={() => go('operator', op.id)}>View full profile <Icon.arrow /></button>
    </div>
  );
}

function ForCompaniesPage({ go }) {
  return (
    <>
      <section style={{ padding: '80px 0' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="hero-eyebrow"><span className="status-dot live pulse" /> For companies · free to post</div>
              <h1 className="display" style={{ marginTop: 24, fontSize: 'clamp(36px, 5vw, 60px)' }}>
                Find a human <span className="display-serif" style={{ color: 'var(--accent-2)' }}>who'll set up AI</span> for your business.
              </h1>
              <p style={{ fontSize: 18, color: 'var(--ink-2)', marginTop: 20, maxWidth: 540 }}>
                Describe the problem you want solved. The tools you already pay for. We connect you to operators who've shipped that exact workflow before — no agency middlemen, no upsells, no platform fee.
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 32, flexWrap: 'wrap' }}>
                <button className="btn btn-primary btn-lg" onClick={() => go('signup')}>Post your problem (free) <Icon.arrow /></button>
                <button className="btn btn-lg" onClick={() => go('browse')}>Browse operators first</button>
              </div>
            </div>
            <SampleProblemPeek go={go} />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Kicker num="01">How it works</Kicker>
          <h2 className="h2" style={{ marginTop: 14, maxWidth: 720 }}>You describe the outcome. We bring the humans.</h2>
          <div style={{ marginTop: 40 }}>
            {[
              ['Describe the problem in plain English', 'No need to know the tools. Tell us "I keep missing calls during peak hours" — we route the rest.'],
              ['Operators who match reach out', 'Usually within 24–48 hours. You get to compare bids, regions, and reviews — not just price.'],
              ['You hire (or don\'t)', 'You sign with whoever you want. Or no one. Off-platform contract, off-platform payment.'],
            ].map(([title, body], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 2fr', gap: 32, padding: '28px 0', borderBottom: '1px solid var(--line)', alignItems: 'baseline' }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', color: 'var(--accent)' }}>STEP 0{i + 1}</span>
                <h3 className="h3">{title}</h3>
                <p style={{ color: 'var(--ink-2)', margin: 0 }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Kicker num="02">Example workflows people post</Kicker>
          <div className="grid grid-3" style={{ marginTop: 32, gap: 12 }}>
            {window.HRI_DATA.WORKFLOWS.slice(0, 6).map(w => (
              <WorkflowCard key={w.slug} w={w} go={go} />
            ))}
          </div>
        </div>
      </section>

      <FAQ
        title="Company FAQ"
        items={[
          ['What does this cost?', 'Posting is free. The platform takes nothing from you or the operator. You agree on a price with them directly, off-platform.'],
          ['How do I know they\'re any good?', 'Every operator profile shows verified workflow deliveries and reviews from past clients. You\'ll see who\'s done this exact thing before.'],
          ['What if I don\'t know what I need?', 'That\'s fine. Describe the bottleneck in plain English ("phones ring nonstop, we miss calls"). Operators will translate that into a workflow.'],
          ['Can I post anonymously?', 'Yes. Use your business category instead of your business name (e.g. "a 4-chair salon in Brooklyn"). You only reveal your identity when you start a conversation.'],
          ['What about my data?', 'Your problem post is public. Anything you discuss in a thread with an operator is private. We never share data with anyone.'],
        ]}
      />

      <BigCTA go={go} title="Post your first problem in under 5 minutes." cta="Post your problem (free)" target="signup" />
    </>
  );
}

function SampleProblemPeek({ go }) {
  const p = window.HRI_DATA.PROBLEMS[0];
  return (
    <div className="card" style={{ padding: 24, position: 'relative' }}>
      <div className="kicker" style={{ position: 'absolute', top: -10, left: 20, background: 'var(--bg)', padding: '0 8px', color: 'var(--ink-3)' }}>EXAMPLE POST</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontWeight: 500, fontSize: 17 }}>{p.business}</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em', marginTop: 4 }}>{p.industry.toUpperCase()} · {p.region.toUpperCase()}</div>
        </div>
        <span className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{p.posted}</span>
      </div>
      <p style={{ color: 'var(--ink-2)', fontSize: 13, marginTop: 14 }}>{p.body}</p>
      <div className="kicker" style={{ marginTop: 16 }}>Workflows wanted</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
        {p.workflows.map(slug => {
          const w = window.HRI_DATA.WORKFLOWS.find(x => x.slug === slug);
          return <Tag key={slug} accent>{w?.name}</Tag>;
        })}
      </div>
      <div className="kicker" style={{ marginTop: 16 }}>Already using</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
        {p.saas.map(s => <Tag key={s} mono>{s}</Tag>)}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 18, fontSize: 12, color: 'var(--ink-3)' }}>
        <span>Budget · {p.budget}</span>
        <span>{p.contacted} operators reached out</span>
      </div>
    </div>
  );
}

function FAQ({ title, items }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="section">
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }}>
        <div>
          <Kicker num="03">FAQ</Kicker>
          <h2 className="h2" style={{ marginTop: 14 }}>{title}</h2>
        </div>
        <div>
          {items.map(([q, a], i) => (
            <div key={i} style={{ borderTop: i === 0 ? '1px solid var(--line)' : 0, borderBottom: '1px solid var(--line)' }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{ width: '100%', padding: '20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'none', border: 0, textAlign: 'left' }}
              >
                <span style={{ fontSize: 17, fontWeight: 500 }}>{q}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--ink-3)' }}>{open === i ? '−' : '+'}</span>
              </button>
              {open === i && (
                <p className="fade-in" style={{ color: 'var(--ink-2)', paddingBottom: 20, margin: 0, maxWidth: 640 }}>{a}</p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BigCTA({ go, title, cta, target }) {
  return (
    <section className="section">
      <div className="container">
        <div style={{ border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: '56px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
          <h2 className="h2" style={{ maxWidth: 640 }}>{title}</h2>
          <button className="btn btn-primary btn-lg" onClick={() => go(target)}>{cta} <Icon.arrow /></button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ForOperatorsPage, ForCompaniesPage, FAQ, BigCTA });