// sections-5-8.jsx — Comparison, Pricing, FAQ, Footer
const { useState: us5 } = React;

// ─── SECTION 6: Comparison ───────────────────────────────────────
function Comparison() {
  const aiLogos = {
    openai: { name: 'OpenAI', icon: '/icons/lobehub/openai.svg' },
    claude: { name: 'Claude', icon: '/icons/lobehub/claude.svg' },
    gemini: { name: 'Gemini', icon: '/icons/lobehub/gemini.svg' },
    mistral: { name: 'Mistral', icon: '/icons/lobehub/mistral.svg' },
    deepseek: { name: 'DeepSeek', icon: '/icons/lobehub/deepseek.svg' },
    perplexity: { name: 'Perplexity', icon: '/icons/lobehub/perplexity.svg' },
    grok: { name: 'Grok', icon: '/icons/lobehub/grok.svg' },
    qwen: { name: 'Qwen', icon: '/icons/lobehub/qwen-color.svg' },
    kimi: { name: 'Kimi', icon: '/icons/lobehub/kimi.svg' },
    meta: { name: 'Meta AI', icon: '/icons/lobehub/metaai-color.svg' },
    flux: { name: 'Flux', icon: '/icons/lobehub/flux.svg' },
    stability: { name: 'Stable Diffusion', icon: '/icons/lobehub/stability-color.svg' },
    recraft: { name: 'Recraft', icon: '/icons/lobehub/recraft.svg' },
    kling: { name: 'Kling', icon: '/icons/lobehub/kling-color.svg' },
    sora: { name: 'Sora', icon: '/icons/lobehub/sora-color.svg' },
    dalle: { name: 'DALL·E', icon: '/icons/lobehub/dalle-color.svg' },
    midjourney: { name: 'Midjourney', icon: '/icons/lobehub/midjourney.svg' },
    ideogram: { name: 'Ideogram', icon: '/icons/lobehub/ideogram.svg' },
    elevenlabs: { name: 'ElevenLabs', icon: '/icons/lobehub/elevenlabs.svg' },
    veo: { name: 'Veo', label: 'VE' },
    udio: { name: 'Udio', icon: '/icons/lobehub/udio-color.svg' },
  };
  const toolHeaders = [
    { name: 'ChatGPT', icon: '/icons/lobehub/openai.svg' },
    { name: 'Claude', icon: '/icons/lobehub/claude.svg' },
    { name: 'Gemini', icon: '/icons/lobehub/gemini.svg' },
    { name: 'Chatflix', isChatflix: true },
  ];
  const rows = [
    {
      key: 'models',
      feature: 'Nombre de modèles',
      cells: ['Famille GPT uniquement', 'Claude uniquement', 'Famille Gemini uniquement', {
        value: '20+ modèles, sélection automatique',
        logos: [aiLogos.openai, aiLogos.claude, aiLogos.gemini, aiLogos.mistral, aiLogos.deepseek, aiLogos.grok, aiLogos.qwen, aiLogos.kimi, aiLogos.perplexity, aiLogos.meta],
      }],
    },
    {
      key: 'routing',
      feature: 'Routing automatique',
      keyBadge: '★ Différence clé',
      cells: ['Non — tu choisis', 'Non', 'Non', {
        value: '★ Auto',
        isAutoPill: true,
        logos: [aiLogos.openai, aiLogos.claude, aiLogos.gemini, aiLogos.mistral, aiLogos.deepseek, aiLogos.perplexity],
      }],
    },
    {
      key: 'memory',
      feature: 'Mémoire personnalisée',
      cells: ['Limitée, pas persistante', 'Limitée', 'Limitée', {
        value: 'Profonde · métier, style, préférences',
        logos: [aiLogos.openai, aiLogos.claude, aiLogos.gemini, aiLogos.mistral, aiLogos.qwen],
      }],
    },
    {
      key: 'multimodal',
      feature: 'Image · Vidéo · Voix unifiés',
      cells: ['Partiel · apps séparées', 'Partiel', 'Partiel', {
        value: 'Natif · tout en un',
        logos: [aiLogos.openai, aiLogos.claude, aiLogos.gemini, aiLogos.flux, aiLogos.stability, aiLogos.recraft, aiLogos.kling, aiLogos.veo, aiLogos.sora, aiLogos.elevenlabs],
      }],
    },
    {
      key: 'video',
      feature: 'Génération vidéo',
      cells: ['App séparée', '—', 'Veo séparé', {
        value: 'Kling · Veo · Sora',
        logos: [aiLogos.kling, aiLogos.veo, aiLogos.sora, aiLogos.dalle, aiLogos.midjourney, aiLogos.ideogram, aiLogos.flux],
      }],
    },
    {
      key: 'cost',
      feature: 'Coût cumulé',
      cells: ['20€+ / mois', '20€+ / mois', '22€+ / mois', {
        value: 'Un seul prix · dès 10€',
        logos: [aiLogos.openai, aiLogos.claude, aiLogos.gemini, aiLogos.mistral, aiLogos.perplexity, aiLogos.flux, aiLogos.kling, aiLogos.udio],
      }],
    },
  ];

  return (
    <section id="section-comparatif" className="section">
      <Reveal as="div" className="container-narrow" style={{ textAlign: 'center', marginBottom: 56 }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>05 · Comparatif</div>
        <h2 className="h2"><span className="brand-grad-text">Pourquoi pas</span> juste ChatGPT ?</h2>
        <p className="lede" style={{ margin: '24px auto 0', maxWidth: 640 }}>
          ChatGPT excelle pour une famille de modèles. Chatflix excelle pour tout le reste.
        </p>
      </Reveal>

      <Reveal as="div" className="container comparison-reveal" style={{ maxWidth: 1280 }}>
        <div className="glass comparison-table-shell" style={{ padding: 12 }}>
          <div className="comparison-scroll">
            <table className="comparison-table" aria-label="Comparaison ChatGPT, autres outils et Chatflix">
              <thead>
                <tr>
                  <th />
                  {toolHeaders.map((tool) => (
                    <th key={tool.name} className={tool.isChatflix ? 'comparison-chatflix-head' : ''}>
                      <span className="comparison-tool-head">
                        <span className="comparison-tool-logo">
                          {tool.isChatflix ? (
                            <CMark size={24} />
                          ) : (
                            <img src={tool.icon} alt="" />
                          )}
                        </span>
                        <span className="comparison-tool-name">{tool.name}</span>
                      </span>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rows.map((row, ri) => (
                  <tr
                    key={row.key}
                    className={
                      'comparison-row' +
                      (ri === rows.length - 1 ? ' comparison-row--last' : '')
                    }
                    style={{ ['--comparison-row-idx']: ri }}
                  >
                    <th>
                      <span>{row.feature}</span>
                      {row.keyBadge && <span className="comparison-key-badge">{row.keyBadge}</span>}
                    </th>
                    {row.cells.map((cell, ci) => {
                      const isChatflix = ci === 3;
                      const cellObj = typeof cell === 'object' ? cell : { value: cell };
                      const isEmpty = cellObj.value === '—';
                      return (
                        <td key={row.key + '-' + ci} className={isChatflix ? 'comparison-cell--chatflix' : ''}>
                          <div className={isChatflix ? 'comparison-cell-content comparison-cell-content--chatflix' : 'comparison-cell-content'}>
                            {cellObj.isAutoPill ? (
                              <span className="comparison-auto-pill">{cellObj.value}</span>
                            ) : isEmpty ? (
                              <span className="comparison-cell-empty">✕</span>
                            ) : (
                              <span>{cellObj.value}</span>
                            )}
                            {isChatflix && cellObj.logos && (
                              <span className="comparison-ai-logos" aria-hidden="true">
                                {cellObj.logos.map((logo) => (
                                  <span key={logo.name} className="comparison-ai-logo" title={logo.name}>
                                    {logo.icon ? <img src={logo.icon} alt="" /> : <span>{logo.label}</span>}
                                  </span>
                                ))}
                              </span>
                            )}
                          </div>
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ─── SECTION 7: Pricing ──────────────────────────────────────────
function Pricing() {
  const includedProviders = [
    { name: 'GPT', icon: '/icons/lobehub/openai.svg' },
    { name: 'Claude', icon: '/icons/lobehub/claude.svg' },
    { name: 'Gemini', icon: '/icons/lobehub/gemini.svg' },
    { name: 'DeepSeek', icon: '/icons/lobehub/deepseek.svg' },
    { name: 'Mistral', icon: '/icons/lobehub/mistral.svg' },
    { name: 'Grok', icon: '/icons/lobehub/grok.svg' },
    { name: 'Qwen', icon: '/icons/lobehub/qwen-color.svg' },
    { name: 'Kimi', icon: '/icons/lobehub/kimi.svg' },
    { name: 'Perplexity', icon: '/icons/lobehub/perplexity.svg' },
    { name: 'Meta AI', icon: '/icons/lobehub/metaai-color.svg' },
    { name: 'Flux', icon: '/icons/lobehub/flux.svg' },
    { name: 'Stable Diffusion', icon: '/icons/lobehub/stability-color.svg' },
    { name: 'Recraft', icon: '/icons/lobehub/recraft.svg' },
    { name: 'Kling', icon: '/icons/lobehub/kling-color.svg' },
    { name: 'Minimax', icon: '/icons/lobehub/minimax-color.svg' },
    { name: 'Seedance', label: 'SE' },
    { name: 'ElevenLabs', icon: '/icons/lobehub/elevenlabs.svg' },
  ];
  const proProviders = [
    ...includedProviders,
    { name: 'Veo', label: 'VE' },
    { name: 'Sora', icon: '/icons/lobehub/sora-color.svg' },
    { name: 'Udio', icon: '/icons/lobehub/udio-color.svg' },
  ];
  const ultraProviders = [
    ...proProviders,
    { name: 'DALL·E', icon: '/icons/lobehub/dalle-color.svg' },
    { name: 'Imagen', label: 'IM' },
    { name: 'Midjourney', icon: '/icons/lobehub/midjourney.svg' },
    { name: 'Ideogram', icon: '/icons/lobehub/ideogram.svg' },
  ];

  const plans = [
    {
      name: 'Free', price: '0€', sub: '',
      features: ['30 messages / jour', '3 modèles standards', 'Pas de mémoire'],
      cta: 'Bientôt disponible', cta_kind: 'glass',
      valueNote: 'Parfait pour tester',
    },
    {
      name: 'Lite', price: '10€', sub: '',
      features: ['150 messages / jour', '10+ modèles standards', 'Mémoire 30j', 'Image haute qualité'],
      cta: 'Bientôt disponible', cta_kind: 'glass',
      valueNote: 'Pour aller plus loin',
    },
    {
      name: 'Pro', price: '19€', sub: '', recommended: true,
      features: ['Messages illimités', 'Modèle puissant (Opus)', 'Mémoire persistante activée', 'Image · Vidéo · Voix · Code', '20+ modèles premium', 'Routing automatique', 'Contexte long', 'Générations vidéo'],
      cta: 'Bientôt disponible', cta_kind: 'primary',
      valueNote: 'Pour ton usage quotidien',
    },
    {
      name: 'Ultra', price: '49€', sub: '',
      features: ['Tout de Pro', 'Modèles premium prioritaires', 'File prioritaire sur Opus, GPT-5.4, Gemini Pro', '200 générations vidéo / mois', 'Support prioritaire', 'Accès anticipé', 'DALL·E · Imagen · Midjourney', 'Kling · Veo · Sora', 'Udio pour la musique', 'Exports avancés'],
      cta: 'Bientôt disponible', cta_kind: 'glass',
      valueNote: 'Pour les power users',
    },
  ];

  return (
    <section id="section-tarifs" className="section">
      <Reveal as="div" className="container-narrow" style={{ textAlign: 'center', marginBottom: 64 }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>06 · Tarifs</div>
        <h2 className="h2">Un prix. <span className="brand-grad-text">Tous les modèles.</span></h2>
        <p className="lede" style={{ margin: '24px auto 0' }}>
          9 abonnements. 143€/mois. Ou Chatflix, à partir de 19€.
        </p>
      </Reveal>

      <Reveal as="div" stagger className="container pricing-cards-reveal" style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 18,
        alignItems: 'stretch', maxWidth: 1280, margin: '0 auto',
      }}>
        {plans.map((p, i) => (
          <div key={p.name} className={'glass pricing-plan-card lift ' + (p.recommended ? 'pricing-plan-card--recommended' : '')} style={{
            padding: 28,
            position: 'relative',
            zIndex: 1,
          }}>
            {p.recommended && (
              <div className="pricing-popular-badge">Le plus populaire</div>
            )}
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-3)', letterSpacing: '-0.005em' }}>{p.name}</div>
            <div className="pricing-price-row" style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}>
              <span style={{ fontSize: 46, fontWeight: 700, letterSpacing: '-0.04em', color: 'var(--ink)', lineHeight: 1 }}>{p.price}</span>
              <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>/ mois HT</span>
            </div>
            <div className="pricing-card-value-note">{p.valueNote}</div>
            {(p.name === 'Free' || p.name === 'Lite' || p.name === 'Pro' || p.name === 'Ultra') && (
              <div className={'pricing-card-logo-row pricing-card-logo-row--compact ' + ((p.name === 'Pro' || p.name === 'Ultra') ? 'pricing-card-logo-row--all' : '')}>
                {(p.name === 'Free'
                  ? includedProviders.slice(0, 3)
                  : p.name === 'Lite'
                    ? [
                      ...includedProviders.slice(0, 6),
                      ...includedProviders.filter(provider => ['Perplexity', 'Flux', 'Stable Diffusion'].includes(provider.name)),
                    ]
                    : p.name === 'Pro'
                      ? proProviders
                      : ultraProviders
                ).map((provider, providerIndex) => (
                  <span
                    className="pricing-provider-mark"
                    key={provider.name}
                    title={provider.name}
                    style={{ '--provider-idx': providerIndex }}
                  >
                    {provider.icon ? <img src={provider.icon} alt="" /> : provider.label}
                  </span>
                ))}
              </div>
            )}
            <ul className="pricing-feature-list" style={{ listStyle: 'none', marginTop: 24, marginBottom: 28, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {p.features.map((f, featureIndex) => (
                <li
                  key={f}
                  className="pricing-feature-item"
                  style={{
                    '--feature-idx': featureIndex,
                    display: 'flex',
                    gap: 10,
                    fontSize: 14,
                    color: 'var(--ink-2)',
                    alignItems: 'flex-start',
                  }}
                >
                  <svg className={p.recommended ? 'pricing-check pricing-check--recommended' : 'pricing-check'} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={p.recommended ? 'url(#pricing-check-grad)' : '#0A0A0F'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 3 }}>
                    {p.recommended && (
                      <defs>
                        <linearGradient id="pricing-check-grad" x1="4" y1="6" x2="20" y2="18" gradientUnits="userSpaceOnUse">
                          <stop stopColor="#FF8A4C" />
                          <stop offset="0.35" stopColor="#FF4D8D" />
                          <stop offset="0.68" stopColor="#C44CFF" />
                          <stop offset="1" stopColor="#4C7DFF" />
                        </linearGradient>
                      </defs>
                    )}
                    <path d="M20 6L9 17l-5-5"/>
                  </svg>
                  {f}
                </li>
              ))}
            </ul>
            <button className={'btn pricing-btn ' + (p.recommended ? 'pricing-btn--recommended ' : '') + (p.cta_kind === 'primary' ? 'btn-primary' : 'btn-glass')} style={{ width: '100%' }}>
              {p.cta}
            </button>
          </div>
        ))}
      </Reveal>

      <div style={{
        textAlign: 'center', marginTop: 40,
        fontSize: 13, color: 'var(--ink-3)',
      }}>
        Annulable en un clic · Tes données exportables à tout moment · Conforme RGPD
      </div>
    </section>
  );
}

// ─── SECTION 8: FAQ + Final CTA + Footer ─────────────────────────
function FAQ() {
  const items = [
    {
      q: 'Comment Chatflix choisit-il le bon modèle ?',
      a: 'Un classifieur léger analyse ton message — type de tâche, longueur du contexte, besoin de fraîcheur, complexité du raisonnement — et route vers le modèle le mieux adapté. Tu peux toujours forcer un modèle spécifique en un clic.',
    },
    {
      q: 'Mes données sont-elles utilisées pour entraîner des IA ?',
      a: 'Non. Tes conversations ne quittent jamais notre périmètre pour aller entraîner des modèles tiers. Les requêtes sont envoyées aux providers en mode no-training quand l\'option existe.',
    },
    {
      q: 'Puis-je toujours choisir le modèle manuellement ?',
      a: 'Oui. Le routing auto est un défaut, pas une prison. Un menu te laisse fixer le modèle pour la conversation en cours, ou définir des défauts par type de tâche.',
    },
    {
      q: 'Que se passe-t-il si je supprime mon compte ?',
      a: 'Tout est supprimé sous 30 jours : conversations, mémoire, embeddings. Tu peux exporter l\'intégralité de tes données en JSON avant de partir, en un clic.',
    },
    {
      q: 'Pourquoi 19€ alors que les concurrents tournent autour de 20€ ?',
      a: 'Parce qu\'un seul abonnement remplace 3 ou 4 abonnements séparés. Tu n\'as plus besoin de payer chaque provider de modèle séparément — c\'est le cœur du deal.',
    },
    {
      q: 'Vous êtes hébergés où ?',
      a: 'Données utilisateur en UE (Paris). Les inférences passent par les API des providers, mais aucune conversation n\'est stockée chez eux : seul le strict nécessaire transite, le reste vit chez nous.',
    },
  ];
  const [open, setOpen] = us5(0);

  return (
    <section id="section-faq" className="section">
      <Reveal as="div" className="container-narrow" style={{ textAlign: 'center', marginBottom: 56 }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>07 · Questions</div>
        <h2 className="h2"><span className="brand-grad-text">Les vraies questions,</span> les vraies réponses.</h2>
      </Reveal>

      <Reveal as="div" stagger className="container-narrow faq-list-reveal" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map((it, i) => (
          <div key={i} className={'glass faq-accordion-card ' + (open === i ? 'faq-accordion-card--open' : '')} style={{ padding: 0, overflow: 'hidden' }}>
            <button className="faq-accordion-button" onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: '100%', padding: '20px 24px',
              background: 'transparent', border: 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              cursor: 'default', color: 'var(--ink)',
              fontSize: 16, fontWeight: 500, letterSpacing: '-0.01em',
              fontFamily: 'inherit', textAlign: 'left',
            }}>
              {it.q}
              <span className="faq-accordion-toggle" style={{
                width: 28, height: 28, borderRadius: 99, flexShrink: 0,
                background: 'rgba(10,10,15,0.04)', display: 'inline-flex',
                alignItems: 'center', justifyContent: 'center',
                transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                transition: 'transform 410ms cubic-bezier(.34,1.56,.64,1)',
              }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                  <path d="M12 5v14M5 12h14"/>
                </svg>
              </span>
            </button>
            <div style={{
              display: 'grid',
              gridTemplateRows: open === i ? '1fr' : '0fr',
              transition: 'grid-template-rows 460ms cubic-bezier(.22,1,.36,1)',
            }}>
              <div style={{ overflow: 'hidden' }}>
                <div className="faq-accordion-answer" style={{
                  padding: '0 24px 22px',
                  fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.55,
                  maxWidth: 720,
                }}>{it.a}</div>
              </div>
            </div>
          </div>
        ))}
      </Reveal>
    </section>
  );
}

function FinalCTA() {
  return (
    <section id="section-essai" style={{ padding: '120px 32px 80px' }}>
      <Reveal as="div" className="container-narrow final-cta-card" style={{
        textAlign: 'center',
        padding: '80px 32px',
        borderRadius: 32,
        background: 'linear-gradient(135deg, rgba(255,138,76,0.08) 0%, rgba(255,77,141,0.08) 33%, rgba(196,76,255,0.08) 66%, rgba(76,125,255,0.1) 100%)',
        border: '1px solid rgba(255,255,255,0.7)',
        backdropFilter: 'blur(24px)',
        WebkitBackdropFilter: 'blur(24px)',
      }}>
        <h2 className="h2" style={{ maxWidth: 760, margin: '0 auto 32px' }}>
          Le bon modèle. Au bon moment. <span className="brand-grad-text">Sans y penser.</span>
        </h2>
        <button type="button" className="btn btn-hero-primary btn-final-cta">
          <span className="btn-hero-primary__label">Essayer Chatflix gratuitement</span>
          <svg className="btn-hero-primary__icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden="true">
            <path d="M5 12h14M13 5l7 7-7 7" />
          </svg>
        </button>
        <div style={{ marginTop: 16, fontSize: 13, color: 'var(--ink-3)' }}>
          Sans carte bancaire · 30 messages gratuits chaque jour
        </div>
      </Reveal>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      padding: '60px 32px 40px',
      borderTop: '1px solid rgba(10,10,15,0.05)',
      background: 'rgba(255,255,255,0.4)',
      backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
    }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '1.4fr repeat(3, 1fr)', gap: 40,
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <CMark size={36} />
            <span style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em' }}>Chatflix</span>
          </div>
          <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 16, maxWidth: 320, lineHeight: 1.55 }}>
            20+ modèles d'IA. Une seule interface. Le bon modèle, automatiquement.
          </p>
          <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
            {['LinkedIn', 'X', 'GitHub'].map(s => (
              <button key={s} style={{
                ...smallBtnLg,
              }}>{s[0]}</button>
            ))}
          </div>
        </div>
        {[
          { title: 'Produit', links: ['Fonctionnalités', 'Modèles', 'Tarifs', 'Changelog'] },
          { title: 'Entreprise', links: ['À propos', 'Blog', 'Carrières', 'Contact'] },
          { title: 'Légal', links: ['Confidentialité', 'CGU', 'RGPD', 'Mentions légales'] },
        ].map(col => (
          <div key={col.title}>
            <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.005em', marginBottom: 14 }}>{col.title}</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.links.map(l => (
                <li key={l} style={{ fontSize: 14, color: 'var(--ink-2)' }}>{l}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="container" style={{
        marginTop: 48, paddingTop: 24,
        borderTop: '1px solid rgba(10,10,15,0.05)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 12, color: 'var(--ink-3)', flexWrap: 'wrap', gap: 12,
      }}>
        <span>© 2026 Chatflix · Hébergé en France</span>
        <span style={{ fontFamily: 'var(--font-mono)' }}>v1.4.0 · status: all systems operational</span>
      </div>
    </footer>
  );
}

const smallBtnLg = {
  width: 36, height: 36, borderRadius: 999,
  background: 'rgba(255,255,255,0.7)',
  border: '1px solid rgba(10,10,15,0.06)',
  color: 'var(--ink-2)',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  fontSize: 13, fontWeight: 600,
};

Object.assign(window, { Comparison, Pricing, FAQ, FinalCTA, Footer });