/* KayaCore — social proof, CTA band, footer */

function Proof() {
  const names = ['Atlas & Reed LLP', 'Northwind Insurance', 'Meridian Mfg.', 'Brightline Agency', 'Coastal Wholesale', 'Keystone Realty'];
  return (
    <section style={{ borderTop: '1px solid var(--border-soft)', borderBottom: '1px solid var(--border-soft)', background: 'var(--bg-deep)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 28px' }}>
        <div className="kc-mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-faint)', textAlign: 'center', marginBottom: 22 }}>
          Teams across six industries run on KayaCore
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px 40px', justifyContent: 'center', alignItems: 'center' }}>
          {names.map((n, i) => (
            <span key={i} style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--fg-faint)', letterSpacing: '-0.01em', opacity: 0.85 }} dangerouslySetInnerHTML={{ __html: n }} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonial() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <Bloom at="20% -30%" size="520px 300px" color="var(--glow-violet-soft)" />
      <div style={{ position: 'relative', maxWidth: 920, margin: '0 auto', padding: '96px 28px', textAlign: 'center' }}>
        <KcIcon name="star" size={22} style={{ color: 'var(--accent)' }} />
        <blockquote style={{ margin: '22px 0 0', fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(24px, 3vw, 34px)', lineHeight: 1.28, letterSpacing: '-0.02em', color: 'var(--fg)', textWrap: 'balance' }}>
          “Our producers stopped re-keying submissions overnight. The agent does the typing, they do the selling — and everything is logged so compliance is happy too.”
        </blockquote>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginTop: 30 }}>
          <span style={{ width: 44, height: 44, borderRadius: 999, background: 'linear-gradient(135deg, var(--violet-500), var(--violet-700))', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 600, color: '#fff', fontSize: 16 }}>DM</span>
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14.5, color: 'var(--fg)' }}>Dana Mercer</div>
            <div className="kc-small" style={{ color: 'var(--fg-subtle)' }}>COO, Northwind Insurance</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA() {
  const { navigate } = useRouter();
  return (
    <section style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px 96px' }}>
      <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 28, border: '1px solid var(--accent-border)', background: 'linear-gradient(135deg, #16121f 0%, #1b1430 60%, #120f1c 100%)', padding: 'clamp(40px, 6vw, 72px)', textAlign: 'center' }}>
        <Bloom at="50% -10%" size="640px 360px" color="var(--glow-violet)" />
        <NodeGrid fade="50% 0%" opacity={0.06} />
        <div style={{ position: 'relative' }}>
          <Eyebrow style={{ color: 'var(--violet-300)' }}>Get started</Eyebrow>
          <h2 className="kc-h1" style={{ marginTop: 16, marginInline: 'auto', maxWidth: 18 + 'ch' }}>Put an AI employee to work this week.</h2>
          <p className="kc-lead" style={{ marginTop: 16, marginInline: 'auto', color: 'var(--slate-200)' }}>Tell us the job. We’ll show you a working agent on your own workflow — and have your first one live in under 48 hours.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 30, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" icon="arrowRight" onClick={() => navigate('/contact')}>Book a demo</Button>
            <Button variant="secondary" size="lg" onClick={() => navigate('/contact')}>Talk to us</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ verticals }) {
  const { navigate, goSection } = useRouter();
  const col = (title, items) => (
    <div>
      <div className="kc-mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-faint)', marginBottom: 14 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <a key={i} onClick={it.on} href="#" onClickCapture={e => e.preventDefault()} style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-muted)', textDecoration: 'none', cursor: 'pointer' }}
            dangerouslySetInnerHTML={{ __html: it.label }} />
        ))}
      </div>
    </div>
  );
  return (
    <footer style={{ borderTop: '1px solid var(--border-soft)', background: 'var(--bg-deep)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '56px 28px 36px', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 36 }} className="kc-footgrid">
        <div>
          <KcLogo height={28} />
          <p className="kc-small" style={{ marginTop: 16, maxWidth: '30ch', color: 'var(--fg-subtle)' }}>Custom AI agents for the industries that run on detail.</p>
        </div>
        {col('Verticals', verticals.map(v => ({ label: v.name, on: () => navigate('/v/' + v.id) })))}
        {col('Company', [{ label: 'How it works', on: () => goSection('how') }, { label: 'Security', on: () => goSection('security') }, { label: 'Pricing', on: () => navigate('/pricing') }, { label: 'Book a demo', on: () => navigate('/contact') }])}
        {col('Legal', [{ label: 'Privacy', on: () => navigate('/contact') }, { label: 'Terms', on: () => navigate('/contact') }, { label: 'SOC 2 report', on: () => navigate('/contact') }, { label: 'Contact', on: () => navigate('/contact') }])}
      </div>
      <div style={{ borderTop: '1px solid var(--border-soft)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '20px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <span className="kc-small" style={{ color: 'var(--fg-faint)' }}>© 2026 KayaCore Agents, Inc.</span>
          <span className="kc-mono" style={{ fontSize: 11, color: 'var(--fg-faint)', letterSpacing: '0.04em' }}>SOC 2 Type II · Private deployment · Audit logs</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Proof, Testimonial, CTA, Footer });