/* global React, IMG, T, t, Logo, Nav, Img, Marquee, Footer */

// =============================================================
// THREE LEGS — final version with embedded Live Mats Lab snapshot
// Single source of all display strings: see WORDING below.
// =============================================================

const WORDING = {
  // --- HERO ---
  hero_eyebrow:        { fr: "▲ LA PROPOSITION COMPLÈTE DE GRAPPLING & JJB", en: "▲ THE FIRST FULL GRAPPLING & BJJ PROPOSITION " },
  hero_title_line1:    { fr: "UNE APP.",   en: "ONE APP." },
  hero_title_line2:    { fr: "UNE SALLE.",  en: "ONE SPACE." },
  hero_title_line3a:   { fr: "UNE ",       en: "ONE " },
  hero_title_line3b:   { fr: "COMMUNAUTÉ.",     en: "COMMUNITY." },
  hero_subtitle:       { fr: "MATS assemble trois piliers pour les grapplers.", en: "MATS brings together three pillars for grapplers." },

  // --- THREE LEGS COLUMNS ---
  leg1_num: { fr: "01", en: "01" },
  leg1_sub: { fr: "Le hub logiciel",  en: "The software hub" },
  leg1_title: { fr: "L'APP",          en: "THE APP" },
  leg1_body: { fr: "Matchmaking par niveau, poids et style. Accès QR 7/7. Système Kudos entre membres. Sessions créées par les membres.", en: "Matchmaking by level, weight, and style. QR access 24/7. Kudos system between members. Member-hosted sessions." },
  leg1_feat1_n: { fr: "QR 24/7",        en: "QR 24/7" },
  leg1_feat1_l: { fr: "Ouverture porte", en: "Door unlock" },
  leg1_feat2_n: { fr: "Matchmaking",    en: "Matchmaking" },
  leg1_feat2_l: { fr: "Ceinture + poids", en: "By belt + weight" },
  leg1_feat3_n: { fr: "Kudos",          en: "Kudos" },
  leg1_feat3_l: { fr: "Notes post-roll", en: "Post-roll ratings" },
  leg1_feat4_n: { fr: "Sessions",       en: "Sessions" },
  leg1_feat4_l: { fr: "Créées par les membres (Presque 300 membres à Paris déjà !)", en: "Hosted by members (Almost 300 members in Paris already!)" },

  leg2_num: { fr: "02", en: "02" },
  leg2_sub: { fr: "L'espace physique", en: "The physical space" },
  leg2_title: { fr: "LA SALLE",        en: "THE SPACE" },
  leg2_body: { fr: "Paris 3e, 35m² de tatamis premium, 7/7 de 7h du matin à 21h le soir déjà ouvert au membres ! Prochainement : L14 salle 100m² de tatamis courant été 2026. Toujours propre. Toujours ouvert. ", en: "Paris 3rd, 35m² of premium tatami, 7/7 from 7am to 9pm, already open to members in Paris. Next room : L14 100sqm of mats, on metro line 14, summer 2026 opening. Always clean. Always open." },
  leg2_feat1_n: { fr: "24/7",           en: "24/7" },
  leg2_feat1_l: { fr: "Toujours ouvert", en: "Always open" },
  leg2_feat2_n: { fr: "100m²",          en: "100m²" },
  leg2_feat2_l: { fr: "Tatamis",        en: "Tatami" },
  leg2_feat3_n: { fr: "Douches",        en: "Showers" },
  leg2_feat3_l: { fr: "& casiers",      en: "& lockers" },
  leg2_feat4_n: { fr: "Paris 3 + 18",   en: "Paris 3 + 18" },
  leg2_feat4_l: { fr: "2 adresses",     en: "2 locations" },

  leg3_num: { fr: "03", en: "03" },
  leg3_sub: { fr: "La communauté",     en: "The community" },
  leg3_title: { fr: "LA COMMUNAUTÉ",        en: "THE COMMUNITY" },
  leg3_body: { fr: ">200 membres actifs. Coachs invités. Séminaires. Événements. Un réseau, pas une file d'attente.", en: ">200 active members. Guest coaches. Seminars. Events. A network, not a waiting list." },
  leg3_feat1_n: { fr: "312",            en: "312" },
  leg3_feat1_l: { fr: "Membres",        en: "Members" },
  leg3_feat2_n: { fr: "12",             en: "12" },
  leg3_feat2_l: { fr: "Coachs",         en: "Coaches" },
  leg3_feat3_n: { fr: "Mensuels",       en: "Monthly" },
  leg3_feat3_l: { fr: "Séminaires",     en: "Seminars" },
  leg3_feat4_n: { fr: "Zéro ego",       en: "No ego" },
  leg3_feat4_l: { fr: "Sur le tapis",   en: "On the mat" },

  // --- EQUATION ---
  equation_line:   { fr: "APP × SALLE × COMMUNAUTÉ = MATS",  en: "APP × SPACE × COMMUNITY = MATS" },
  equation_caption:{ fr: "RETIRE UN PILIER, TOUT TOMBE.", en: "REMOVE ONE LEG. IT ALL FALLS." },

  // --- LIVE MAT SNAPSHOT (embedded from direction 02) ---
  live_section_num:   { fr: "04", en: "04" },
  live_section_title: { fr: "QUI ROULE MAINTENANT ?", en: "WHO'S ON THE MAT RIGHT NOW?" },
  live_section_sub:   { fr: "Snapshot du Mats Lab", en: "Mats Lab Snapshot" },
  live_widget_label:  { fr: "EN DIRECT · MATS LAB", en: "LIVE · MATS LAB" },
  live_widget_intro:  { fr: "Sessions d'aujourd'hui — rejoins depuis l'app", en: "Today's sessions — join from the app" },
  live_now:           { fr: "MAINTENANT", en: "NOW" },
  live_host:          { fr: "Hôte", en: "Host" },
  live_joined:        { fr: "INSCRITS", en: "JOINED" },
  live_create:        { fr: "+ Créer une session", en: "+ Create a session" },
  live_stat1_n:       { fr: "7",   en: "7" },
  live_stat1_l:       { fr: "sur le tapis",        en: "on the mat" },
  live_stat2_n:       { fr: "14",  en: "14" },
  live_stat2_l:       { fr: "sessions aujourd'hui", en: "sessions today" },
  live_stat3_n:       { fr: ">200", en: ">200" },
  live_stat3_l:       { fr: "membres actifs",      en: "active members" },

  // Session list — 4 rows
  sess1_time: { fr: "18:00", en: "18:00" },
  sess1_title:{ fr: "Open mat · tous niveaux", en: "Open mat · all levels" },
  sess1_host: { fr: "Elias B.", en: "Elias B." },
  sess1_cap:  { fr: "6/10", en: "6/10" },

  sess2_time: { fr: "19:30", en: "19:30" },
  sess2_title:{ fr: "Leglocks · groupe d’étude", en: "Leglocks · study group" },
  sess2_host: { fr: "Louan V.", en: "Louan V." },
  sess2_cap:  { fr: "4/6", en: "4/6" },

  sess3_time: { fr: "21:00", en: "21:00" },
  sess3_title:{ fr: "Hard rounds · violette+", en: "Hard rounds · purple+" },
  sess3_host: { fr: "Pierre P.", en: "Pierre P." },
  sess3_cap:  { fr: "2/8", en: "2/8" },

  sess4_time: { fr: "07:00", en: "07:00" },
  sess4_title:{ fr: "Drill matinal · gi", en: "Early drill · gi" },
  sess4_host: { fr: "Tom P.", en: "Tom P." },
  sess4_cap:  { fr: "3/6", en: "3/6" },

  // --- PRICING ---
  pricing_num:   { fr: "05", en: "05" },
  pricing_title:    { fr: "TARIFS", en: "PRICING" },
  pricing_subtitle: { fr: "Pendant la phase Mats Lab, l'adhésion et les sessions sont offertes. On construit la communauté et la culture en premier!", en: "During the Mats Lab phase, membership and sessions are on the house. We're building the community and culture first!" },

  // Box 1 — Annual membership
  plan1_name:    { fr: "Adhésion annuelle", en: "Annual Membership" },
  plan1_sub:     { fr: "Frais d'inscription · accès QR · onboarding", en: "Setup · QR access · onboarding" },
  plan1_price:   { fr: "€0", en: "€0" },
  plan1_strike:  { fr: "€100", en: "€100" },
  plan1_note:    { fr: "Offert · phase membres fondateurs de Paris / IDF", en: "Free · founding phase for members in Paris / IDF" },
  plan1_body:    { fr: "Accès complet à l'app, ouverture des portes par QR, profil membre vérifié, droit de créer des sessions.", en: "Full app access, QR door unlock, verified member profile, right to host sessions." },
  plan1_cta:     { fr: "Activer mon compte", en: "Activate my account" },

  // Box 2 — Session price
  plan2_name:    { fr: "Prix par session", en: "Per-session" },
  plan2_sub:     { fr: "Open mat, drill, sparring", en: "Open mat, drill, sparring" },
  plan2_price:   { fr: "€0", en: "€0" },
  plan2_strike:  { fr: "€4,00", en: "€4.00" },
  plan2_note:    { fr: "Membres · gratuit pour l'instant", en: "Members · free for now" },
  plan2_body:    { fr: "Tu réserves dans l'app, tu rentres avec ton QR, tu rolles. Pas de prélèvement mensuel : tu paies à la session.", en: "Book in the app, scan your QR, roll. No monthly direct debit — you pay per session." },
  plan2_cta:     { fr: "Voir les sessions", en: "See live sessions" },

  // Box 3 — Starter pack
  plan3_name:    { fr: "BJJ Starter Pack", en: "BJJ Starter Pack" },
  plan3_sub:     { fr: "4h de masterclass exécutive", en: "4h executive masterclass" },
  plan3_price:   { fr: "€150", en: "€150" },
  plan3_strike:  { fr: "", en: "" },
  plan3_note:    { fr: "★ Pour bien démarrer", en: "★ Built to get you started" },
  plan3_body:    { fr: "Quatre heures de masterclass avec un coach Mats : fondamentaux gi/no-gi, sécurité, premiers drills, premier sparring encadré.", en: "Four hours of masterclass with a Mats coach: gi/no-gi fundamentals, safety, first drills, first supervised spar." },
  plan3_cta:     { fr: "Réserver le pack", en: "Book the pack" },
};

const w = (key, lang) => WORDING[key]?.[lang] ?? WORDING[key]?.en ?? key;

function LiveMatSnapshot({ lang }) {
  const now = new Date();
  const sessions = [
    ['sess1', true],
    ['sess2', true],
    ['sess3', false],
    ['sess4', false],
  ];
  return (
    <section className="wrap" style={{ padding: '60px 32px 80px' }}>
      <div className="sec-head">
        <div className="l">
          <span className="num">{w('live_section_num', lang)}</span>
          <h2>{w('live_section_title', lang)}</h2>
        </div>
        <span className="mono" style={{ color: 'var(--ink-3)' }}>{w('live_section_sub', lang)}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'start' }}>
        <div>
          <Img src={IMG.matWide} ratio="4/3" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, marginTop: 24, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
            {['live_stat1', 'live_stat2', 'live_stat3'].map((k, i) => (
              <div key={k}>
                <div className="display" style={{ fontSize: 48, color: i === 0 ? 'var(--mat)' : 'var(--ink)' }}>{w(`${k}_n`, lang)}</div>
                <div className="mono" style={{ color: 'var(--ink-3)', marginTop: 4 }}>{w(`${k}_l`, lang)}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: 24, borderRadius: 4 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--mat)', display: 'inline-block', animation: 'pulse 1.4s ease-in-out infinite' }}></span>
              <span className="mono">{w('live_widget_label', lang)}</span>
            </div>
            <span className="mono" style={{ opacity: 0.5 }}>{now.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}</span>
          </div>
          <div style={{ fontSize: 13, opacity: 0.6, marginBottom: 16 }}>{w('live_widget_intro', lang)}</div>
          {sessions.map(([key, live], i) => (
            <div key={key} style={{ display: 'grid', gridTemplateColumns: '70px 1fr auto', gap: 12, padding: '16px 0', borderTop: '1px solid rgba(255,255,255,0.1)', alignItems: 'center' }}>
              <div>
                <div className="display" style={{ fontSize: 22, color: live ? 'var(--mat)' : 'var(--paper)' }}>{w(`${key}_time`, lang)}</div>
                {live && <div className="mono" style={{ fontSize: 9, color: 'var(--mat)' }}>● {w('live_now', lang)}</div>}
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>{w(`${key}_title`, lang)}</div>
                <div style={{ fontSize: 12, opacity: 0.5 }}>{w('live_host', lang)}: {w(`${key}_host`, lang)}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontWeight: 700, fontSize: 15 }}>{w(`${key}_cap`, lang)}</div>
                <div className="mono" style={{ opacity: 0.5 }}>{w('live_joined', lang)}</div>
              </div>
            </div>
          ))}
          <div style={{ padding: 14, background: 'var(--mat)', borderRadius: 3, textAlign: 'center', fontWeight: 700, fontSize: 14, marginTop: 16 }}>
            {w('live_create', lang)}
          </div>
        </div>
      </div>
    </section>
  );
}

function SiteThreeLegs({ lang, setLang }) {
  const legs = [
    { k: 'leg1', color: '#2B6CB0', img: IMG.hands },
    { k: 'leg2', color: '#D94B1E', img: IMG.matWide },
    { k: 'leg3', color: '#1a1715', img: IMG.crew },
  ];
  return (
    <div className="site" data-theme="light">
      <Nav lang={lang} setLang={setLang} />

      {/* HERO */}
      <section className="wrap" style={{ padding: '60px 32px 40px' }}>
        <div className="mono" style={{ color: 'var(--mat)', marginBottom: 16 }}>{w('hero_eyebrow', lang)}</div>
        <h1 className="display" style={{ fontSize: 128, margin: '0 0 24px', lineHeight: 0.88 }}>
          {w('hero_title_line1', lang)}<br/>{w('hero_title_line2', lang)}<br/>
          {w('hero_title_line3a', lang)}<span style={{ color: 'var(--mat)' }}>{w('hero_title_line3b', lang)}</span>
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: 720 }}>{w('hero_subtitle', lang)}</p>
      </section>

      {/* 3 COLUMNS */}
      <section className="wrap" style={{ padding: '0 32px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1.5px solid var(--line)', borderBottom: '1.5px solid var(--line)' }}>
          {legs.map((c, i) => (
            <div key={c.k} style={{ padding: 28, borderRight: i < 2 ? '1px solid var(--line)' : 0, background: i === 1 ? 'var(--paper-2)' : 'var(--paper)', position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span className="display" style={{ fontSize: 80, color: c.color }}>{w(`${c.k}_num`, lang)}</span>
                <span className="mono" style={{ color: 'var(--ink-3)' }}>{w(`${c.k}_sub`, lang)}</span>
              </div>
              <h3 className="display" style={{ fontSize: 40, margin: '16px 0 8px' }}>{w(`${c.k}_title`, lang)}</h3>
              <Img src={c.img} ratio="4/3" style={{ marginTop: 16 }} />
              <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 16 }}>{w(`${c.k}_body`, lang)}</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                {[1,2,3,4].map(j => (
                  <div key={j}>
                    <div style={{ fontWeight: 700, fontSize: 16 }}>{w(`${c.k}_feat${j}_n`, lang)}</div>
                    <div className="mono" style={{ color: 'var(--ink-3)' }}>{w(`${c.k}_feat${j}_l`, lang)}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Equation */}
        <div style={{ textAlign: 'center', padding: '48px 0 24px', borderBottom: '1px solid var(--line)' }}>
          <div className="display" style={{ fontSize: 64, letterSpacing: '-0.02em' }}>{w('equation_line', lang)}</div>
          <div className="mono" style={{ color: 'var(--ink-3)', marginTop: 12 }}>{w('equation_caption', lang)}</div>
        </div>
      </section>

      {/* LIVE MAT SNAPSHOT — replaces old 'pourquoi pas ailleurs' section */}
      <LiveMatSnapshot lang={lang} />

      {/* PRICING */}
      <section id="pricing" style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '80px 32px' }}>
        <div className="wrap">
          <div className="sec-head" style={{ borderBottomColor: 'rgba(255,255,255,0.15)' }}>
            <div className="l"><span className="num" style={{ color: 'rgba(255,255,255,0.3)' }}>{w('pricing_num', lang)}</span><h2 style={{ color: 'var(--paper)' }}>{w('pricing_title', lang)}</h2></div>
          </div>
          <p style={{ maxWidth: 640, fontSize: 16, lineHeight: 1.5, opacity: 0.7, marginTop: -8, marginBottom: 32 }}>{w('pricing_subtitle', lang)}</p>
          <div className="grid-3" style={{ marginTop: 8 }}>
            {[1,2,3].map(i => {
              const hl = i === 3;
              const strike = w(`plan${i}_strike`, lang);
              const isStarter = i === 3;
              const href = isStarter ? 'how-it-works.html#starter-pack' : 'how-it-works.html#download';
              return (
                <a key={i} href={href} style={{ display: 'block', textDecoration: 'none', color: 'inherit', padding: 28, border: `1.5px solid ${hl?'var(--mat)':'rgba(255,255,255,0.2)'}`, background: hl?'rgba(217,75,30,0.08)':'transparent', transition: 'background 0.2s, transform 0.2s' }}
                   onMouseEnter={e=>{e.currentTarget.style.background = hl?'rgba(217,75,30,0.14)':'rgba(255,255,255,0.04)'}}
                   onMouseLeave={e=>{e.currentTarget.style.background = hl?'rgba(217,75,30,0.08)':'transparent'}}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                    <div className="mono" style={{ opacity: 0.6, fontSize: 11 }}>{w(`plan${i}_sub`, lang)}</div>
                    <div className="mono" style={{ color: hl ? 'var(--mat)' : 'rgba(255,255,255,0.5)', fontSize: 11, textAlign: 'right', whiteSpace: 'nowrap' }}>{w(`plan${i}_note`, lang)}</div>
                  </div>
                  <h3 className="display" style={{ fontSize: 32, margin: '12px 0 8px', lineHeight: 1.05 }}>{w(`plan${i}_name`, lang)}</h3>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginTop: 4 }}>
                    <div className="display" style={{ fontSize: 64, color: hl?'var(--mat)':'var(--paper)', lineHeight: 1 }}>{w(`plan${i}_price`, lang)}</div>
                    {strike && <div className="display" style={{ fontSize: 28, opacity: 0.4, textDecoration: 'line-through', textDecorationColor: 'var(--mat)' }}>{strike}</div>}
                  </div>
                  <p style={{ fontSize: 13, lineHeight: 1.5, opacity: 0.7, marginTop: 16, minHeight: 60 }}>{w(`plan${i}_body`, lang)}</p>
                  <span className="btn btn-mat" style={{ marginTop: 12, width: '100%', justifyContent: 'center', display: 'inline-flex' }}>{w(`plan${i}_cta`, lang)} →</span>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      <Footer lang={lang} />
    </div>
  );
}

Object.assign(window, { SiteThreeLegs, WORDING });