/* KayaCore — vertical switcher + supporting sections */

function VerticalSwitcher({ verticals, selected, onPick }) {
  const { navigate } = useRouter();
  const v = verticals.find(x => x.id === selected) || verticals[0];
  return (
    <section id="verticals" style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '40px 28px 96px' }}>
      <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 40px' }}>
        <Eyebrow>Built for your industry</Eyebrow>
        <h2 className="kc-h1" style={{ marginTop: 14 }}>Not a generic chatbot. An agent that knows your work.</h2>
        <p className="kc-lead" style={{ marginTop: 14, marginInline: 'auto' }}>Pick your industry to see what KayaCore ships on day one.</p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12, marginBottom: 36 }} className="kc-vgrid">
        {verticals.map(x => {
          const on = x.id === v.id;
          return (
            <button key={x.id} onClick={() => onPick(x.id)} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 11, padding: '20px 12px',
              background: on ? 'var(--accent-tint)' : 'var(--surface)',
              border: `1px solid ${on ? 'var(--accent-border)' : 'var(--border)'}`,
              borderRadius: 16, cursor: 'pointer', transition: 'all var(--dur) var(--ease-out)',
              boxShadow: on ? '0 10px 36px -16px var(--glow-violet)' : 'none',
            }}
              onMouseEnter={e => { if (!on) e.currentTarget.style.borderColor = 'var(--border-strong)'; }}
              onMouseLeave={e => { if (!on) e.currentTarget.style.borderColor = 'var(--border)'; }}>
              <IconChip name={x.icon} active={on} size={44} />
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, fontWeight: 600, color: on ? 'var(--fg)' : 'var(--fg-muted)', textAlign: 'center' }} dangerouslySetInnerHTML={{ __html: x.name }} />
            </button>
          );
        })}
      </div>

      {/* Landing block for the selected vertical */}
      <div key={v.id} className="kc-swap" style={{
        background: 'linear-gradient(180deg, var(--surface) 0%, var(--bg) 140%)',
        border: '1px solid var(--border)', borderRadius: 24, padding: 'clamp(24px, 4vw, 44px)',
        position: 'relative', overflow: 'hidden',
      }}>
        <Bloom at="92% -20%" size="420px 280px" color="var(--glow-violet-soft)" />
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 44, alignItems: 'center' }} className="kc-landinggrid">
          <div>
            <Eyebrow dangerouslySetInnerHTML={{ __html: v.eyebrow }} />
            <h3 className="kc-h2" style={{ marginTop: 12 }} dangerouslySetInnerHTML={{ __html: v.headline }} />
            <p className="kc-body" style={{ marginTop: 14, fontSize: 17 }} dangerouslySetInnerHTML={{ __html: v.sub }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 24, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 34, color: 'var(--accent)', letterSpacing: '-0.02em' }} dangerouslySetInnerHTML={{ __html: v.stat.value }} />
                <span className="kc-mono" style={{ fontSize: 12, color: 'var(--fg-subtle)', maxWidth: 130, lineHeight: 1.3 }} dangerouslySetInnerHTML={{ __html: v.stat.label }} />
              </div>
              <Button variant="primary" icon="arrowRight" style={{ marginLeft: 'auto' }} onClick={() => navigate('/v/' + v.id)}>See the <span dangerouslySetInnerHTML={{ __html: v.name }} /> build</Button>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {v.cases.map((c, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: 16, background: 'var(--bg)', border: '1px solid var(--border-soft)', borderRadius: 14 }}>
                <IconChip name={c.icon} size={38} />
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15.5, color: 'var(--fg)' }} dangerouslySetInnerHTML={{ __html: c.title }} />
                  <div className="kc-small" style={{ marginTop: 4, color: 'var(--fg-subtle)', lineHeight: 1.5 }} dangerouslySetInnerHTML={{ __html: c.desc }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', icon: 'users', t: 'We learn your playbook', d: 'A short discovery: your tools, your templates, the exact jobs you want handled. No rip-and-replace.' },
    { n: '02', icon: 'sparkles', t: 'We build your agent', d: 'A custom agent, trained on your process and wired into your stack \u2014 your first one live in under 48 hours.' },
    { n: '03', icon: 'lineChart', t: 'It works — and keeps working', d: 'The agent runs the busywork with humans in the loop, and we manage it from there: monitored, fixed and improved as you grow.' },
  ];
  return (
    <section id="how" style={{ background: 'var(--bg-deep)', borderTop: '1px solid var(--border-soft)', borderBottom: '1px solid var(--border-soft)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '88px 28px' }}>
        <div style={{ maxWidth: 620 }}>
          <Eyebrow>How it works</Eyebrow>
          <h2 className="kc-h1" style={{ marginTop: 14 }}>From kickoff to live in under 48 hours.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 44 }} className="kc-3grid">
          {steps.map((s, i) => (
            <div key={i} className="kc-up" style={{ position: 'relative', padding: 26, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 18, transitionDelay: (i * 80) + 'ms' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <IconChip name={s.icon} size={42} />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-faint)', letterSpacing: '0.1em' }}>{s.n}</span>
              </div>
              <h3 className="kc-h4" style={{ marginTop: 20, fontSize: 19, fontFamily: 'var(--font-display)', fontWeight: 600 }}>{s.t}</h3>
              <p className="kc-small" style={{ marginTop: 8, color: 'var(--fg-subtle)', lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Security() {
  const items = [
    { icon: 'lock', t: 'Private by default', d: 'Your data is processed in your tenant and never trains shared models.' },
    { icon: 'shield', t: 'SOC 2 Type II', d: 'Audited controls, encryption in transit and at rest, SSO and RBAC.' },
    { icon: 'fileText', t: 'Full audit log', d: 'Every agent action is recorded and reviewable \u2014 nothing happens in the dark.' },
    { icon: 'users', t: 'Human in the loop', d: 'You decide what runs autonomously and what waits for a person to approve.' },
  ];
  return (
    <section id="security" style={{ position: 'relative', overflow: 'hidden' }}>
      <Bloom at="50% 120%" size="700px 320px" color="var(--glow-violet-soft)" />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '88px 28px' }}>
        <div style={{ textAlign: 'center', maxWidth: 660, margin: '0 auto 44px' }}>
          <Eyebrow>Built for regulated work</Eyebrow>
          <h2 className="kc-h1" style={{ marginTop: 14 }}>Serious industries need serious guardrails.</h2>
          <p className="kc-lead" style={{ marginTop: 14, marginInline: 'auto' }}>Security and control aren’t add-ons here — they’re how every KayaCore agent is built.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="kc-4grid">
          {items.map((s, i) => (
            <div key={i} className="kc-up" style={{ padding: 24, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 16, transitionDelay: (i * 70) + 'ms' }}>
              <IconChip name={s.icon} size={42} />
              <h3 className="kc-h4" style={{ marginTop: 18, fontSize: 16.5 }}>{s.t}</h3>
              <p className="kc-small" style={{ marginTop: 7, color: 'var(--fg-subtle)', lineHeight: 1.5 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VerticalSwitcher, HowItWorks, Security });