// SiteFooter - shared across all pages
const SiteFooter = ({ basePath = '' }) => {
  const bp = basePath || '';
  const px = (h) => /^(https?:|mailto:|tel:|#)/.test(h) ? h : bp + h;
  const cols = [
  {
    title: 'Product',
    links: [
    { l: 'The Arena', h: '/en/larene' },
    { l: 'The Community', h: '/en/communaute' },
    { l: 'The Wallet', h: '/en/portefeuille' },
    { l: 'Security', h: '/en/securite' },
    { l: 'Prediction Mode', h: '/en/mode-prediction' }]

  },
  {
    title: 'Company',
    links: [
    { l: 'About', h: '/en/a-propos' },
    { l: 'Careers', h: '/en/carriere' },
    { l: 'Blog', h: '/en/blog' },
    { l: 'Press', h: '/en/presse' }]

  },
  {
    title: 'Help',
    links: [
    { l: 'FAQ', h: '/en/faq' },
    { l: 'Help Center', h: '/en/centre-aide' },
    { l: 'Contact us', h: '/en/contact' },
    { l: 'System Status', h: '/en/statut' }]

  },
  {
    title: 'Legal',
    links: [
    { l: 'Terms of Service', h: '/en/legal/cgu' },
    { l: 'Privacy Policy', h: '/en/legal/confidentialite' },
    { l: 'Cookies', h: '/en/legal/cookies' },
    { l: 'Legal Notice', h: '/en/legal/mentions' },
    { l: 'Responsible Gaming', h: '/en/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 - overrides the inline styles (desktop ≥1025px unchanged) */}
      <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)'
            }} />
            PRIVATE BETA · OPENING SOON
          </span>
          <span className="sft-cta-title" style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 22, letterSpacing: '-0.02em', color: 'var(--fg-on-dark)'
          }}>
            The app isn't here yet.
            <span className="accent" style={{
              fontWeight: 400, fontStyle: 'italic',
              color: 'var(--signature)', marginLeft: 8
            }}>Reserve your spot.</span>
          </span>
        </div>
        <a href="/en/beta-privee" className="btn btn-primary sft-cta-btn" style={{ height: 44, padding: '0 22px', fontSize: 14 }}>
          Join the private beta
        </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="/en" 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' }}>The social arena</span> for P2P betting.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 280 }}>
            <FootSelect label="Language" value="EN" alt="FR" />
            <FootSelect label="Currency" 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 · Made in Douala, played everywhere</span>
        <span>Betting is for adults only. Play responsibly.</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;