// Final CTA + footer

function CTA() {
  return (
    <Section pad={100} id="cta" label="07 CTA">
      <BentoCard variant="dark" style={{ padding: 0, position: 'relative', overflow: 'hidden' }}>
        {/* Ambient cyan radial */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse at 50% 0%, var(--accent-soft), transparent 70%)',
          pointerEvents: 'none'
        }} />
        <div style={{
          position: 'absolute', bottom: -100, right: -100,
          width: 400, height: 400, borderRadius: 999,
          background: 'radial-gradient(circle, var(--accent-soft), transparent 70%)',
          filter: 'blur(60px)', pointerEvents: 'none'
        }} />

        <div style={{ position: 'relative', padding: '88px 56px', textAlign: 'center' }}>
          <Pill tone="cyan"><Icon name="sparkle" size={11} /> &nbsp;Private beta · 40 firms</Pill>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(48px, 6vw, 80px)',
            fontWeight: 500,
            lineHeight: 1.0,
            letterSpacing: 0,
            margin: '20px 0 18px',
            maxWidth: 880,
            marginInline: 'auto'
          }}>
            Stop running an inbox.<br />
            <span style={{
              background: 'linear-gradient(180deg, var(--accent), var(--accent-deep))',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent'
            }}>Start running careers.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: 'rgba(255,255,255,0.6)', maxWidth: 540, margin: '0 auto' }}>Onboard your agency in an afternoon. The agent learns your voice and processes in a week. You stay in the seat that matters.

          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32 }}>
            <button style={{
              padding: '14px 28px', borderRadius: 999,
              background: '#fff', color: '#000', border: 'none',
              fontSize: 14.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit'
            }}>Get early access</button>
            <button style={{
              padding: '14px 28px', borderRadius: 999,
              background: 'transparent', color: '#fff',
              border: '1px solid rgba(255,255,255,0.18)',
              fontSize: 14.5, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit'
            }}>Talk to founding team</button>
          </div>

          <div style={{
            marginTop: 32, display: 'flex', justifyContent: 'center', gap: 24,
            fontSize: 12, color: 'rgba(255,255,255,0.45)'
          }}>
            <span>✓ 14-day pilot</span>
            <span>✓ Bring your own roster</span>
            <span>✓ EU AI servers</span>
          </div>
        </div>
      </BentoCard>
    </Section>);

}

function Footer() {
  return (
    <footer style={{
      borderTop: '1px solid rgba(255,255,255,0.06)',
      padding: '48px 24px 32px',
      maxWidth: 1280, margin: '0 auto'
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(260px, 1fr) repeat(2, minmax(130px, 180px))', gap: 32, marginBottom: 32 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <div style={{
              width: 26, height: 26,
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
              <BrandMark size={26} />
            </div>
            <span style={{ fontSize: 15, fontWeight: 600 }}>rellay</span>
          </div>
          <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.45)', maxWidth: 280, margin: 0, lineHeight: 1.55 }}>The operating system for modern artist agencies. Built in Paris.

          </p>
        </div>
        <FooterCol title="Explore" items={[
          { label: 'Product', href: '#bento' },
          { label: 'Workflow', href: '#streams' },
          { label: 'ROI calculator', href: '#calculator' },
          { label: 'Proof', href: '#testimonials' },
        ]} />
        <FooterCol title="Start" items={[
          { label: 'Get early access', href: '#cta' },
          { label: 'Talk to founding team', href: '#cta' },
        ]} />
      </div>
      <div style={{
        paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.04)',
        display: 'flex', justifyContent: 'space-between',
        fontSize: 12, color: 'rgba(255,255,255,0.4)',
        fontFamily: 'JetBrains Mono, monospace'
      }}>
        <span>© 2026 rellay Inc.</span>
        <span>v.0.42 · all systems normal</span>
      </div>
    </footer>);

}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontWeight: 600, color: '#fff', marginBottom: 14, letterSpacing: '0.02em' }}>{title}</div>
      {items.map((it) =>
      <a key={it.label} href={it.href} style={{ display: 'block', fontSize: 13, color: 'rgba(255,255,255,0.5)', marginBottom: 10, cursor: 'pointer', textDecoration: 'none' }}>{it.label}</a>
      )}
    </div>);

}

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