// SiteFooter - partagé entre toutes les pages
const SiteFooter = ({ basePath = '' }) => {
  const bp = basePath || '';
  const px = (h) => /^(https?:|mailto:|tel:|#)/.test(h) ? h : bp + h;
  const cols = [
  {
    title: 'Produit',
    links: [
    { l: "L'Arène", h: '/larene' },
    { l: 'La Communauté', h: '/communaute' },
    { l: 'Le Portefeuille', h: '/portefeuille' },
    { l: 'Sécurité', h: '/securite' },
    { l: 'Mode Prédiction', h: '/mode-prediction' }]

  },
  {
    title: 'Entreprise',
    links: [
    { l: 'À propos', h: '/a-propos' },
    { l: 'Carrière', h: '/carriere' },
    { l: 'Blog', h: '/blog' },
    { l: 'Presse', h: '/presse' }]

  },
  {
    title: 'Aide',
    links: [
    { l: 'FAQ', h: '/faq' },
    { l: "Centre d'aide", h: '/centre-aide' },
    { l: 'Nous contacter', h: '/contact' },
    { l: 'Statut système', h: '/statut' }]

  },
  {
    title: 'Légal',
    links: [
    { l: 'CGU', h: '/legal/cgu' },
    { l: 'Confidentialité', h: '/legal/confidentialite' },
    { l: 'Cookies', h: '/legal/cookies' },
    { l: 'Mentions légales', h: '/legal/mentions' },
    { l: 'Jeu responsable', h: '/legal/jeu-responsable' }]

  }];

  return (
    <footer className="sft-root" style={{
      background: '#050506',
      color: 'var(--fg-on-dark)',
      padding: '96px 32px 40px',
      borderTop: '1px solid var(--hairline-on-dark)'
    }}>
      {/* Responsive - surcharge les styles inline (desktop ≥1025px inchangé) */}
      <style>{`
        @media (max-width: 1024px) {
          .sft-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
          .sft-brand { grid-column: 1 / -1 !important; }
        }
        @media (max-width: 900px) {
          .sft-root { padding: 72px 24px 36px !important; }
          .sft-cta { padding: 24px !important; margin-bottom: 56px !important; }
          .sft-bottom { margin-top: 64px !important; }
        }
        @media (max-width: 480px) {
          .sft-root { padding: 56px 16px 32px !important; }
          .sft-cta { padding: 20px 16px !important; margin-bottom: 40px !important; }
          .sft-cta .ktk-eyebrow { font-size: 10px; }
          .sft-cta-title { font-size: 19px !important; }
          .sft-cta-btn { width: 100%; justify-content: center; }
          .sft-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .sft-bottom { margin-top: 48px !important; }
        }
      `}</style>
      <div className="ktk-container sft-cta" style={{
        background: 'var(--charbon-doux)',
        border: '1px solid var(--hairline-on-dark)',
        borderRadius: 20,
        padding: '28px 36px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24, flexWrap: 'wrap',
        marginBottom: 80
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <span className="ktk-eyebrow" style={{
            color: 'var(--signature)', display: 'inline-flex', alignItems: 'center', gap: 8
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 9999, background: 'var(--signature)'
            }} />
            BÊTA PRIVÉE · OUVERTURE PROCHAINE
          </span>
          <span className="sft-cta-title" style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 22, letterSpacing: '-0.02em', color: 'var(--fg-on-dark)'
          }}>
            L'app n'est pas encore là.
            <span className="accent" style={{
              fontWeight: 400, fontStyle: 'italic',
              color: 'var(--signature)', marginLeft: 8
            }}>Réserve ta place.</span>
          </span>
        </div>
        <a href="/beta-privee" className="btn btn-primary sft-cta-btn" style={{ height: 44, padding: '0 22px', fontSize: 14 }}>
          Rejoindre la bêta privée
        </a>
      </div>
      <div className="ktk-container sft-grid" style={{
        display: 'grid', gridTemplateColumns: '2.2fr 1fr 1fr 1fr 1fr',
        gap: 48
      }}>
        <div className="sft-brand">
          <a href="/" style={{ textDecoration: 'none', color: 'inherit', display: 'inline-block', padding: '3px 0' }}>
            <span className="wordmark" style={{ fontSize: 34, color: 'var(--fg-on-dark)' }}>
              <span className="k-initial">K</span>tkarena
            </span>
          </a>
          <p style={{
            margin: '20px 0 32px', maxWidth: 320,
            fontSize: 16, lineHeight: 1.5,
            color: 'var(--fg-on-dark-muted)'
          }}>
            <span className="accent" style={{ fontStyle: 'italic' }}>L'arène sociale</span> des paris P2P.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 280 }}>
            <FootSelect label="Langue" value="FR" alt="EN" />
            <FootSelect label="Devise" value="FCFA" alt="NGN · XOF" />
          </div>
        </div>

        {cols.map((col) =>
        <div key={col.title}>
            <div className="ktk-eyebrow" style={{
            color: 'var(--fg-on-dark-muted)', marginBottom: 20, textAlign: "left", fontWeight: "600", fontSize: "12px"
          }}>{col.title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              {col.links.map((l) =>
            <a key={l.l} href={l.h} style={{
              color: 'var(--fg-on-dark)', textDecoration: 'none',
              fontSize: 14, fontWeight: 400, padding: '6px 0'
            }}>{l.l}</a>
            )}
            </div>
          </div>
        )}
      </div>

      <div className="ktk-container sft-bottom" style={{
        marginTop: 96, paddingTop: 32,
        borderTop: '1px solid var(--hairline-on-dark)',
        display: 'flex', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 16,
        fontSize: 12, color: 'var(--fg-on-dark-faint)'
      }}>
        <span>© 2026 Ktkarena · Fait à Douala, joué partout</span>
        <span>Jeu réservé aux personnes majeures. À pratiquer avec modération.</span>
      </div>
    </footer>);

};

const FootSelect = ({ label, value, alt }) =>
<div style={{
  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  padding: '10px 14px',
  border: '1px solid var(--hairline-on-dark)',
  borderRadius: 8,
  fontSize: 13
}}>
    <div>
      <span style={{ color: 'var(--fg-on-dark-muted)' }}>{label} · </span>
      <span style={{ color: 'var(--fg-on-dark)', fontWeight: 500 }}>{value}</span>
    </div>
    <span className="mono" style={{ fontSize: 11, color: 'var(--fg-on-dark-faint)' }}>{alt}</span>
  </div>;


window.SiteFooter = SiteFooter;