// Footer.jsx: the dark closing CTA band and the site footer.
// Needs Shared.jsx and assets/site.css.

// "Keep your agent. Give it your context." The homepage passes a subtitle;
// About uses the tighter `compact` variant with no subtitle.
const CTABand = ({ subtitle, compact = false, location = 'cta_band' }) => (
  <section className="sk-section" data-section={location} style={{
    position: 'relative', overflow: 'hidden', background: '#0a1220', color: '#e6eef9', textAlign: 'center',
    ...(compact ? { paddingTop: 88, paddingBottom: 88 } : {}),
  }}>
    {!compact && (
      <GridOverlay color="rgba(125,211,252,0.05)"
        mask="radial-gradient(ellipse 60% 80% at 50% 50%, #000 10%, transparent 75%)" />
    )}
    <div style={{ position: 'relative', maxWidth: compact ? 720 : 760, margin: '0 auto' }}>
      <h2 style={{
        fontSize: compact ? 'clamp(32px, 4.4vw, 52px)' : 'clamp(36px, 5vw, 60px)',
        fontWeight: 700, letterSpacing: '-0.03em', lineHeight: compact ? 1.08 : 1.05,
        margin: `0 0 ${subtitle ? 20 : 28}px`, textWrap: 'balance',
      }}>Keep your agent. <GradientText>Give it your context.</GradientText></h2>
      {subtitle && (
        <p style={{ fontSize: 18, lineHeight: 1.6, color: '#8ea3c0', margin: '0 auto 36px', maxWidth: 520 }}>{subtitle}</p>
      )}
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href={SK_LINKS.signup} onClick={skTrack('signup', location)} className="sk-btn sk-btn-primary">Sign up free</a>
        <a href={SK_LINKS.demo} onClick={skTrack('demo', location)} className="sk-btn sk-btn-secondary-dark">Book a demo</a>
      </div>
    </div>
  </section>
);

const FOOTER_LINKS = [
  { label: 'Docs', href: SK_LINKS.docs, external: true },
  { label: 'GitHub', href: SK_LINKS.github, external: true },
  { label: 'Cloud', href: '/cloud' },
  { label: 'About', href: '/about' },
  { label: 'Blog', href: '/blog' },
  { label: 'Privacy', href: '/privacy' },
  { label: 'Terms', href: '/terms' },
];

const Footer = () => (
  <footer className="sk-footer" style={{
    padding: 32, background: '#060b14', color: '#8ea3c0',
    display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 16,
    fontFamily: 'Inter, sans-serif', fontSize: 13,
    borderTop: '1px solid rgba(125,211,252,0.06)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <img src="/assets/skardi-mark-tight.png" alt="" style={{ height: 18, width: 'auto' }} />
      <span style={{ fontWeight: 600, color: '#e6eef9' }}>Skardi</span>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>© 2026 SkardiLabs, Inc.</span>
    </div>
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 20px', fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>
      {FOOTER_LINKS.map((l) => (
        <a key={l.label} href={l.href} className="sk-footer-link"
          {...(l.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>{l.label}</a>
      ))}
      {/* Withdrawing consent has to be reachable from every page, not only the
          policy, so this clears the stored choice and the banner asks again. */}
      <button type="button" className="sk-footer-link" onClick={() => window.skardiResetConsent?.()}>Cookie settings</button>
      <a href={SK_LINKS.email} className="sk-footer-link" onClick={skTrack('email', 'footer')}>info@skardi.ai</a>
    </div>
  </footer>
);

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