/* global React */
// Shared primitives, i18n, and imagery sources

// Unsplash images — filtered for grappling / dojo / locker / combat sports
// Tasteful labeled placeholders — editorial monospace labels on textured swatches.
// Swap these out for real Mats Lab photography when the shoot is done.
const IMG = {
  heroMat:    'placeholder:hero / open mat · 19:30',
  matWide:    'placeholder:wide / main tatami · 200m²',
  sparring:   'placeholder:sparring / hard rounds',
  drill:      'placeholder:drill / positional',
  lockerRoom: 'placeholder:locker room / showers',
  portrait1:  'placeholder:portrait / Hugo · brown',
  portrait2:  'placeholder:portrait / Laurent · black',
  crew:       'placeholder:crew / open mat',
  darkMat:    'placeholder:mat / low light',
  gi:         'placeholder:gi / kimono detail',
  hands:      'placeholder:hands / grip fight',
};

// Dictionary for FR / EN toggle
const T = {
  nav: { manifesto: { fr:'Mats Manifesto', en:'Mats Manifesto' }, app: { fr:'L\'app', en:'The app' }, location: { fr:'Une salle', en:'The space' }, community: { fr:'Communauté', en:'Community' }, pricing: { fr:'Tarifs', en:'Pricing' }, journal: { fr:'Journal', en:'Journal' } },
  footer: {
    tagline: { fr:'La salle des grapplers exigeants. Ouvert 7/7 via l\'app.', en:'The gym for serious grapplers. Open 7/7 through the app.' },
    app_store: { fr:'App Store', en:'App Store' },
    google_play: { fr:'Google Play', en:'Google Play' },
    visit_header: { fr:'Une salle', en:'Visit' },
    address_1: { fr:'12 rue de Montmorency', en:'12 rue de Montmorency' },
    address_2: { fr:'75003 Paris', en:'75003 Paris' },
    address_3: { fr:'L14 Paris Nord ou Sud (Eté 2026)', en:'L14 Paris North or South (Summer 2026)' },
    contact_header: { fr:'Contact', en:'Contact' },
    contact_email: { fr:'info@matsformembers.com', en:'info@matsformembers.com' },
    contact_phone: { fr:'06 70 34 30 36', en:'06 70 34 30 36' },
    contact_instagram: { fr:'@matsformembers', en:'@matsformembers' },
    legal_header: { fr:'Légal', en:'Legal' },
    legal_terms: { fr:'Conditions', en:'Terms' },
    legal_privacy: { fr:'Confidentialité', en:'Privacy' },
    legal_refund: { fr:'Remboursement', en:'Refunds' },
    copyright: { fr:'© 2026 MATS FOR MEMBERS', en:'© 2026 MATS FOR MEMBERS' },
    bottom_tagline: { fr:'Built for grapplers, by grapplers', en:'Built for grapplers, by grapplers' },
  },
  cta: { download: { fr:'Télécharger l\'app', en:'Get the app' }, trial: { fr:'Séance d\'essai', en:'Book a trial' }, visit: { fr:'Visiter Mats Lab', en:'Visit Mats Lab' }, join: { fr:'Rejoindre', en:'Join' } },
  live: { on_mat: { fr:'sur le tapis', en:'on the mat' }, now: { fr:'MAINTENANT', en:'NOW' }, today: { fr:'sessions aujourd\'hui', en:'sessions today' }, members: { fr:'membres actifs', en:'active members' }, live: { fr:'EN DIRECT', en:'LIVE' } },
};

const t = (path, lang) => {
  const parts = path.split('.');
  let cur = T;
  for (const p of parts) cur = cur?.[p];
  return cur?.[lang] ?? cur?.en ?? '';
};

// ----- Shared components -----
function Logo({ size = 22 }) {
  // MATS wordmark + 2:1 horizontal "mat" tile as the period (same color as wordmark)
  // The tile uses currentColor so it inherits color from parent (e.g. white in dark nav).
  const tileH = Math.round(size * 0.22);
  const tileW = tileH * 2;
  return (
    <span className="logo" style={{ fontSize: size, display: 'inline-flex', alignItems: 'baseline', gap: Math.round(size * 0.08) }}>
      <span>MATS</span>
      <span aria-hidden="true" style={{
        display: 'inline-block',
        width: tileW,
        height: tileH,
        background: 'currentColor',
        flexShrink: 0,
      }}/>
    </span>
  );
}

function Nav({ lang, setLang, links, dark = false }) {
  const defaultLinks = ['manifesto', 'app', 'location', 'community', 'pricing', 'journal'];
  const ls = links || defaultLinks;
  return (
    <nav className="nav" style={dark ? { background: 'var(--ink)', color: 'var(--paper)', borderBottomColor: 'rgba(255,255,255,0.1)' } : null}>
      <div className="nav-inner">
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <Logo />
          <span className="mono" style={{ opacity: 0.5 }}>· Paris</span>
        </div>
        <div className="nav-links">
          {ls.map(k => <a key={k} href={`#${k}`}>{t(`nav.${k}`, lang)}</a>)}
        </div>
        <div className="nav-right">
          <div className="lang">
            <button className={lang==='fr'?'on':''} onClick={()=>setLang('fr')}>FR</button>
            <button className={lang==='en'?'on':''} onClick={()=>setLang('en')}>EN</button>
          </div>
          <a className="btn btn-mat" href="#download">{t('cta.download', lang)} →</a>
        </div>
      </div>
    </nav>
  );
}

function Img({ src, alt, h, ratio, style }) {
  const isPlaceholder = typeof src === 'string' && src.startsWith('placeholder:');
  const label = isPlaceholder ? src.slice('placeholder:'.length) : '';
  // Deterministic hue per label for subtle variation
  let hash = 0; for (let i = 0; i < label.length; i++) hash = (hash * 31 + label.charCodeAt(i)) | 0;
  const hue = Math.abs(hash) % 40 + 15; // warm browns/reds
  return (
    <div className="img" style={{ aspectRatio: ratio, height: h, ...style }}>
      {isPlaceholder ? (
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(135deg, oklch(0.28 0.02 ${hue}) 0%, oklch(0.18 0.03 ${hue}) 100%)`,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 16,
          color: 'rgba(255,255,255,0.85)'
        }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em', opacity: 0.55, textTransform: 'uppercase' }}>▢ placeholder</div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', opacity: 0.9 }}>{label}</div>
          <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.06 }} viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs><pattern id={`p${Math.abs(hash)}`} width="4" height="4" patternUnits="userSpaceOnUse"><path d="M0 0 L4 4 M4 0 L0 4" stroke="white" strokeWidth="0.3"/></pattern></defs>
            <rect width="100" height="100" fill={`url(#p${Math.abs(hash)})`}/>
          </svg>
        </div>
      ) : (
        <img src={src} alt={alt||''} onError={(e)=>{e.target.style.display='none';}}/>
      )}
    </div>
  );
}

function Marquee({ items }) {
  const dup = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {dup.map((it, i) => <span key={i}>{it}</span>)}
      </div>
    </div>
  );
}

function Footer({ lang }) {
  return (
    <footer className="footer">
      <div className="cols">
        <div>
          <Logo size={32} />
          <p style={{ maxWidth: 320, fontSize: 14, lineHeight: 1.5, opacity: 0.7, marginTop: 12 }}>
            {t('footer.tagline', lang)}
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
            <a className="btn btn-mat">{t('footer.app_store', lang)}</a>
            <a className="btn" style={{ background: 'transparent', color: 'var(--paper)', borderColor: 'var(--paper)' }}>{t('footer.google_play', lang)}</a>
          </div>
        </div>
        <div>
          <h4>{t('footer.visit_header', lang)}</h4>
          <ul><li>{t('footer.address_1', lang)}</li><li>{t('footer.address_2', lang)}</li><li style={{opacity:0.5}}>{t('footer.address_3', lang)}</li></ul>
        </div>
        <div>
          <h4>{t('footer.contact_header', lang)}</h4>
          <ul><li>{t('footer.contact_email', lang)}</li><li>{t('footer.contact_phone', lang)}</li><li>{t('footer.contact_instagram', lang)}</li></ul>
        </div>
        <div>
          <h4>{t('footer.legal_header', lang)}</h4>
          <ul style={{opacity:0.7}}><li>{t('footer.legal_terms', lang)}</li><li>{t('footer.legal_privacy', lang)}</li><li>{t('footer.legal_refund', lang)}</li></ul>
        </div>
      </div>
      <div className="bottom">
        <span>{t('footer.copyright', lang)}</span>
        <span>{t('footer.bottom_tagline', lang)}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { IMG, T, t, Logo, Nav, Img, Marquee, Footer });