// Pages: Operator profile (public), Workflow detail, Sign up/in
function OperatorProfilePage({ go, opId }) {
  const op = window.HRI_DATA.OPERATORS.find(o => o.id === opId) || window.HRI_DATA.OPERATORS[0];
  const [contactOpen, setContactOpen] = useState(false);

  return (
    <>
      <section style={{ padding: '40px 0 32px' }}>
        <div className="container">
          <button className="btn btn-ghost btn-sm" onClick={() => go('browse')} style={{ marginBottom: 24, fontSize: 12, color: 'var(--ink-3)' }}>
            ← Back to directory
          </button>

          <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 32, alignItems: 'flex-start' }}>
            <Avatar initials={op.initials} size={96} />
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <h1 className="h2" style={{ fontSize: 36 }}>{op.name}</h1>
                <span className="tag tag-accent" style={{ marginTop: 4 }}>
                  <StatusDot status={op.status} /> {op.status === 'live' ? 'Available' : 'Away'}
                </span>
              </div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.05em', marginTop: 8 }}>
                <Icon.pin /> {op.region.toUpperCase()} &nbsp;·&nbsp; {op.languages.join(' · ')} &nbsp;·&nbsp; <Icon.clock /> {op.response.toUpperCase()}
              </div>
              <p style={{ color: 'var(--ink-2)', fontSize: 17, marginTop: 18, maxWidth: 700, lineHeight: 1.5 }}>{op.bio}</p>
              <div style={{ display: 'flex', gap: 24, marginTop: 24, alignItems: 'center' }}>
                <div>
                  <div className="kicker">Rating</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 4, color: 'var(--accent-2)', marginTop: 4, fontSize: 18 }}>
                    <Icon.star /> {op.rating}
                  </div>
                </div>
                <div style={{ width: 1, height: 32, background: 'var(--line)' }} />
                <div>
                  <div className="kicker">Delivered</div>
                  <div style={{ marginTop: 4, fontSize: 18 }}>{op.delivered} workflows</div>
                </div>
                <div style={{ width: 1, height: 32, background: 'var(--line)' }} />
                <div>
                  <div className="kicker">Rate</div>
                  <div style={{ marginTop: 4, fontSize: 18, color: 'var(--accent-2)' }}>{op.rate}</div>
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 200 }}>
              <button className="btn btn-primary btn-lg" onClick={() => setContactOpen(true)}>Contact operator <Icon.arrow /></button>
              <button className="btn btn-sm">Save profile</button>
              <button className="btn btn-ghost btn-sm" style={{ color: 'var(--ink-3)' }}>Share link</button>
            </div>
          </div>
        </div>
      </section>

      <section style={{ borderTop: '1px solid var(--line)', padding: '40px 0' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 48 }}>
            <div>
              <div style={{ marginBottom: 32 }}>
                <Kicker num="01">Workflows delivered</Kicker>
                <div style={{ marginTop: 16, display: 'grid', gap: 12 }}>
                  {op.workflows.map(slug => {
                    const w = window.HRI_DATA.WORKFLOWS.find(x => x.slug === slug);
                    return (
                      <div key={slug} className="card" style={{ padding: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer' }} onClick={() => go('workflow', slug)}>
                        <div>
                          <h3 style={{ fontSize: 16, fontWeight: 500 }}>{w?.name}</h3>
                          <p style={{ fontSize: 13, color: 'var(--ink-2)', margin: '4px 0 0' }}>{w?.short}</p>
                        </div>
                        <Icon.arrow style={{ color: 'var(--ink-3)' }} />
                      </div>
                    );
                  })}
                </div>
              </div>

              <div style={{ marginBottom: 32 }}>
                <Kicker num="02">Portfolio</Kicker>
                <div style={{ marginTop: 16, display: 'grid', gap: 12 }}>
                  {op.portfolio.map((p, i) => (
                    <div key={i} className="card" style={{ padding: 20 }}>
                      <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.06em' }}>CASE / 0{i + 1}</div>
                      <h3 style={{ fontSize: 17, fontWeight: 500, marginTop: 8 }}>{p.title}</h3>
                      <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: '10px 0 0' }}>{p.body}</p>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <Kicker num="03">Reviews</Kicker>
                <div style={{ marginTop: 16, padding: 32, border: '1px dashed var(--line)', borderRadius: 'var(--radius)', textAlign: 'center', color: 'var(--ink-3)' }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.06em' }}>REVIEWS LAUNCH SOON</div>
                  <p style={{ fontSize: 14, margin: '8px 0 0' }}>{op.delivered} verified deliveries · public reviews go live with v1</p>
                </div>
              </div>
            </div>

            <aside style={{ position: 'sticky', top: 80, alignSelf: 'flex-start', display: 'grid', gap: 24 }}>
              <div>
                <div className="kicker" style={{ marginBottom: 12 }}>Specializes in</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {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>
              <div>
                <div className="kicker" style={{ marginBottom: 12 }}>Tools</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {op.tools.map(t => <Tag key={t} mono>{t}</Tag>)}
                </div>
              </div>
              <div>
                <div className="kicker" style={{ marginBottom: 12 }}>Industries</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {op.industries.map(i => <Tag key={i}>{i}</Tag>)}
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {contactOpen && <ContactModal op={op} onClose={() => setContactOpen(false)} />}
    </>
  );
}

function ContactModal({ op, onClose }) {
  const [sent, setSent] = useState(false);
  const [msg, setMsg] = useState('');
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 100, padding: 24 }}>
      <div onClick={e => e.stopPropagation()} className="fade-in" style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: 32, maxWidth: 520, width: '100%' }}>
        {!sent ? (
          <>
            <div className="kicker">Contact · no fees · off-platform deals</div>
            <h2 style={{ fontSize: 22, fontWeight: 500, marginTop: 8 }}>Message {op.name}</h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 14, marginTop: 8 }}>Tell {op.name.split(' ')[0]} what you're trying to fix. They typically reply {op.response.toLowerCase().replace('usually ', '')}.</p>
            <textarea
              className="textarea"
              rows={6}
              placeholder="We're a 4-chair salon. Phones ring nonstop on Saturdays and we miss ~30% of calls. We use Square for booking…"
              value={msg}
              onChange={e => setMsg(e.target.value)}
              style={{ marginTop: 16, fontFamily: 'var(--font-sans)', resize: 'vertical' }}
            />
            <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
              <button className="btn" onClick={onClose}>Cancel</button>
              <button className="btn btn-primary" onClick={() => setSent(true)} disabled={msg.length < 10}>Send message</button>
            </div>
          </>
        ) : (
          <>
            <div className="kicker" style={{ color: 'var(--accent)' }}>Sent</div>
            <h2 style={{ fontSize: 22, fontWeight: 500, marginTop: 8 }}>Your message is on its way.</h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 14, marginTop: 8 }}>{op.name} will see it in their inbox. We'll email you when they reply. From there, you two handle everything directly — we don't sit in the middle.</p>
            <button className="btn btn-primary" onClick={onClose} style={{ marginTop: 20 }}>Close</button>
          </>
        )}
      </div>
    </div>
  );
}

function WorkflowDetailPage({ go, slug }) {
  const w = window.HRI_DATA.WORKFLOWS.find(x => x.slug === slug) || window.HRI_DATA.WORKFLOWS[0];
  const operators = window.HRI_DATA.OPERATORS.filter(o => o.workflows.includes(w.slug));
  const requests = window.HRI_DATA.PROBLEMS.filter(p => p.workflows.includes(w.slug));

  return (
    <>
      <section style={{ padding: '40px 0 56px' }}>
        <div className="container">
          <button className="btn btn-ghost btn-sm" onClick={() => go('browse')} style={{ marginBottom: 16, fontSize: 12, color: 'var(--ink-3)' }}>← All workflows</button>
          <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>WORKFLOW / {w.slug.toUpperCase()}</div>
          <h1 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', marginTop: 12, maxWidth: 900 }}>{w.name}</h1>
          <p style={{ fontSize: 19, color: 'var(--ink-2)', marginTop: 18, maxWidth: 720 }}>{w.short}</p>

          <div className="grid grid-3" style={{ marginTop: 40, gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 'var(--radius)' }}>
            <Stat label="Replaces" value={w.replaces} bg />
            <Stat label="Saves you" value={w.saves} bg accent />
            <Stat label="Operators delivering" value={`${w.operatorCount} on the directory`} bg />
          </div>
        </div>
      </section>

      <section style={{ borderTop: '1px solid var(--line)', padding: '56px 0' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
            <div>
              <Kicker num="01">Common tools</Kicker>
              <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 8 }}>Operators usually build this with one of these. The right pick depends on your existing stack.</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
                {w.tools.map(t => <Tag key={t} mono>{t}</Tag>)}
              </div>
            </div>
            <div>
              <Kicker num="02">Industries asking for this</Kicker>
              <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 8 }}>Not exclusive — but these post most often.</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
                {w.industries.map(i => <Tag key={i}>{i}</Tag>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ borderTop: '1px solid var(--line)', padding: '56px 0' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <Kicker num="03">Operators who deliver "{w.name}"</Kicker>
              <h2 className="h2" style={{ marginTop: 12 }}>{operators.length} humans, ready</h2>
            </div>
            <button className="btn" onClick={() => go('browse')}>See all <Icon.arrow /></button>
          </div>
          <div style={{ display: 'grid', gap: 12 }}>
            {operators.length > 0 ? operators.map(o => <OperatorCard key={o.id} o={o} go={go} density="medium" />) : (
              <div style={{ padding: 32, border: '1px dashed var(--line)', borderRadius: 'var(--radius)', textAlign: 'center', color: 'var(--ink-3)' }}>
                No operators listed yet — be the first.
              </div>
            )}
          </div>
        </div>
      </section>

      <section style={{ borderTop: '1px solid var(--line)', padding: '56px 0' }}>
        <div className="container">
          <Kicker num="04">Companies asking for this</Kicker>
          <h2 className="h2" style={{ marginTop: 12, marginBottom: 24 }}>{requests.length} open problems</h2>
          <div style={{ display: 'grid', gap: 12 }}>
            {requests.length > 0 ? requests.map(p => <ProblemCard key={p.id} p={p} go={go} density="medium" />) : (
              <div style={{ padding: 32, border: '1px dashed var(--line)', borderRadius: 'var(--radius)', textAlign: 'center', color: 'var(--ink-3)' }}>
                No open problems for this workflow right now.
              </div>
            )}
          </div>
        </div>
      </section>

      <BigCTA go={go} title={`Need "${w.name}" set up at your business?`} cta="Post your problem (free)" target="signup" />
    </>
  );
}

function Stat({ label, value, bg, accent }) {
  return (
    <div style={{ background: 'var(--bg)', padding: 24 }}>
      <div className="kicker">{label}</div>
      <div style={{ marginTop: 10, fontSize: 18, color: accent ? 'var(--accent-2)' : 'var(--ink)' }}>{value}</div>
    </div>
  );
}

function SignUpPage({ go }) {
  const [role, setRole] = useState('operator');
  return (
    <section style={{ padding: '60px 0', minHeight: 'calc(100vh - 60px)' }}>
      <div style={{ maxWidth: 480, margin: '0 auto', padding: '0 24px' }}>
        <Kicker>Sign up · free</Kicker>
        <h1 className="h2" style={{ marginTop: 8, fontSize: 32 }}>Create your account</h1>
        <p style={{ color: 'var(--ink-2)', marginTop: 8 }}>Pick a side. You can always switch later.</p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 28 }}>
          {[['operator', 'Operator', 'I set up AI for businesses'], ['company', 'Company', 'I need AI for my business']].map(([id, label, sub]) => (
            <button
              key={id} onClick={() => setRole(id)}
              style={{
                padding: 18, textAlign: 'left',
                border: '1px solid', borderColor: role === id ? 'var(--accent)' : 'var(--line)',
                background: role === id ? 'color-mix(in oklab, var(--accent) 8%, transparent)' : 'var(--bg-1)',
                borderRadius: 'var(--radius)', cursor: 'pointer',
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontWeight: 500, fontSize: 15 }}>{label}</span>
                {role === id && <Icon.check style={{ color: 'var(--accent)' }} />}
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>{sub}</div>
            </button>
          ))}
        </div>

        <div style={{ display: 'grid', gap: 14, marginTop: 24 }}>
          <div>
            <label className="kicker" style={{ display: 'block', marginBottom: 6 }}>Email</label>
            <input className="input" placeholder="you@business.com" />
          </div>
          <div>
            <label className="kicker" style={{ display: 'block', marginBottom: 6 }}>Password</label>
            <input className="input" type="password" placeholder="••••••••" />
          </div>
          <div>
            <label className="kicker" style={{ display: 'block', marginBottom: 6 }}>Language</label>
            <select className="select"><option>English</option><option>Deutsch</option></select>
          </div>
          <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, color: 'var(--ink-2)', marginTop: 4 }}>
            <input type="checkbox" defaultChecked style={{ marginTop: 2 }} />
            <span>I agree to the <a className="link-arrow" style={{ display: 'inline' }}>Terms</a> and <a className="link-arrow" style={{ display: 'inline' }}>Privacy Policy</a>. We don't take fees and we don't sell your data.</span>
          </label>
          <button className="btn btn-primary btn-lg" onClick={() => go(role === 'operator' ? 'operator' : 'browse')} style={{ marginTop: 8 }}>
            Create {role} account <Icon.arrow />
          </button>
          <div style={{ textAlign: 'center', fontSize: 13, color: 'var(--ink-3)', marginTop: 8 }}>
            Already have an account? <a className="link-arrow" onClick={() => go('signin')} style={{ display: 'inline' }}>Sign in</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function SignInPage({ go }) {
  return (
    <section style={{ padding: '80px 0', minHeight: 'calc(100vh - 60px)' }}>
      <div style={{ maxWidth: 400, margin: '0 auto', padding: '0 24px' }}>
        <Kicker>Sign in</Kicker>
        <h1 className="h2" style={{ marginTop: 8, fontSize: 32 }}>Welcome back</h1>
        <div style={{ display: 'grid', gap: 14, marginTop: 28 }}>
          <div>
            <label className="kicker" style={{ display: 'block', marginBottom: 6 }}>Email</label>
            <input className="input" placeholder="you@business.com" />
          </div>
          <div>
            <label className="kicker" style={{ display: 'block', marginBottom: 6 }}>Password</label>
            <input className="input" type="password" placeholder="••••••••" />
          </div>
          <button className="btn btn-primary btn-lg" onClick={() => go('home')}>Sign in <Icon.arrow /></button>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>
            <a className="link-arrow" style={{ display: 'inline' }}>Forgot password?</a>
            <a className="link-arrow" onClick={() => go('signup')} style={{ display: 'inline' }}>Sign up</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { OperatorProfilePage, WorkflowDetailPage, SignUpPage, SignInPage });