/* KayaCore — page-level views assembled from sections. */

function HomePage({ verticals, selected, onPick }) {
  const vertical = verticals.find(v => v.id === selected) || null;
  return (
    <React.Fragment>
      <Hero vertical={null} verticals={verticals} onPick={onPick} />
      <Proof />
      <Differentiators />
      <ProblemSection />
      <VerticalSwitcher verticals={verticals} selected={selected || verticals[0].id} onPick={onPick} />
      <HowItWorks />
      <ManagedSection />
      <Security />
      <Testimonial />
      <CTA />
    </React.Fragment>
  );
}

/* ---- Full per-vertical landing page ---- */
function VerticalPage({ vertical, verticals }) {
  const { navigate } = useRouter();
  const v = vertical;
  const others = verticals.filter(x => x.id !== v.id);

  return (
    <React.Fragment>
      {/* hero reuses the shared Hero with the vertical's copy + console */}
      <Hero vertical={v} verticals={verticals} />

      {/* open loops we close for this vertical */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--bg-deep)', borderTop: '1px solid var(--border-soft)', borderBottom: '1px solid var(--border-soft)' }}>
        <Bloom at="85% 110%" size="520px 300px" color="var(--glow-violet-soft)" />
        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '80px 28px' }}>
          <div style={{ maxWidth: 720 }}>
            <Eyebrow>The open loops we close</Eyebrow>
            <h2 className="kc-h1" style={{ marginTop: 14 }}>Where the hours go in <span dangerouslySetInnerHTML={{ __html: v.name.toLowerCase() }} />.</h2>
            <p className="kc-lead" style={{ marginTop: 14, maxWidth: '60ch' }}>Your agent takes these off the team and runs them to done — with a human in the loop wherever it matters.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginTop: 36 }} className="kc-2grid">
            {v.loops.map((loop, i) => (
              <div key={i} className="kc-up" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 18px', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 14, transitionDelay: (i % 2 * 80) + 'ms' }}>
                <span style={{ width: 28, height: 28, borderRadius: 999, flex: 'none', background: 'var(--accent-tint)', border: '1px solid var(--accent-border)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)' }}>
                  <KcIcon name="check" size={15} />
                </span>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 15.5, color: 'var(--fg)' }} dangerouslySetInnerHTML={{ __html: loop }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* what it ships — use cases, larger */}
      <section style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '80px 28px' }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow dangerouslySetInnerHTML={{ __html: v.eyebrow }} />
          <h2 className="kc-h1" style={{ marginTop: 14 }}>What your agent ships on day one.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 40 }} className="kc-3grid">
          {v.cases.map((c, i) => (
            <div key={i} className="kc-up" style={{ padding: 26, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 18, transitionDelay: (i * 80) + 'ms' }}>
              <IconChip name={c.icon} size={46} />
              <h3 style={{ margin: '20px 0 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--fg)' }} dangerouslySetInnerHTML={{ __html: c.title }} />
              <p className="kc-small" style={{ marginTop: 8, color: 'var(--fg-subtle)', lineHeight: 1.55 }} dangerouslySetInnerHTML={{ __html: c.desc }} />
            </div>
          ))}
        </div>
      </section>

      {/* tools / integrations */}
      <section 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: '64px 28px', display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 40, alignItems: 'center' }} className="kc-toolsgrid">
          <div>
            <Eyebrow>Works in your stack</Eyebrow>
            <h2 className="kc-h2" style={{ marginTop: 12 }}>Lives where your team already works.</h2>
            <p className="kc-body" style={{ marginTop: 12 }}>No rip-and-replace. Your agent plugs into the tools you run on today.</p>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
            {v.tools.map((t, i) => (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '12px 18px', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 12, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 15, color: 'var(--fg)' }}>
                <KcIcon name="plug" size={16} style={{ color: 'var(--accent)' }} />{t}
              </span>
            ))}
            <span style={{ display: 'inline-flex', alignItems: 'center', padding: '12px 18px', fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-subtle)' }}>+ your custom tools</span>
          </div>
        </div>
      </section>

      {/* managed reassurance + stat + CTA */}
      <section style={{ position: 'relative', overflow: 'hidden', maxWidth: 1200, margin: '0 auto', padding: '80px 28px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }} className="kc-managedgrid">
          <div>
            <Eyebrow>Fully managed</Eyebrow>
            <h2 className="kc-h2" style={{ marginTop: 12 }}>You get the outcome. We keep it working.</h2>
            <p className="kc-body" style={{ marginTop: 12 }}>Your <span dangerouslySetInnerHTML={{ __html: v.name.toLowerCase() }} /> agent is monitored, fixed and improved by your KayaCore pod — so it keeps earning its seat, month after month.</p>
            <div style={{ display: 'flex', gap: 14, marginTop: 26, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" icon="arrowRight" onClick={() => navigate('/contact')}>Book a demo</Button>
              <Button variant="secondary" size="lg" onClick={() => navigate('/pricing')}>See pricing</Button>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div style={{ textAlign: 'center', padding: '44px 36px', background: 'linear-gradient(180deg, var(--surface) 0%, var(--bg-deep) 140%)', border: '1px solid var(--accent-border)', borderRadius: 24, boxShadow: '0 18px 50px -22px var(--glow-violet)' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 72, lineHeight: 1, color: 'var(--accent)', letterSpacing: '-0.03em' }}><CountUp key={v.id} value={v.stat.value} /></div>
              <div className="kc-mono" style={{ fontSize: 13, color: 'var(--fg-subtle)', marginTop: 12, maxWidth: 200 }} dangerouslySetInnerHTML={{ __html: v.stat.label }} />
            </div>
          </div>
        </div>
      </section>

      {/* explore other verticals */}
      <section style={{ borderTop: '1px solid var(--border-soft)', background: 'var(--bg-deep)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '56px 28px' }}>
          <div className="kc-mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-faint)', marginBottom: 20 }}>Other industries we serve</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }} className="kc-vgrid">
            {others.map(x => (
              <button key={x.id} onClick={() => navigate('/v/' + x.id)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, padding: '18px 12px', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 14, cursor: 'pointer', transition: 'border-color var(--dur) var(--ease-out)' }}
                onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent-border)'}
                onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
                <IconChip name={x.icon} size={38} />
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--fg-muted)', textAlign: 'center' }} dangerouslySetInnerHTML={{ __html: x.name }} />
              </button>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

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