// Trainin Center — Pages légales (/mentions-legales + /cgv-cgu)
// Réutilise tc-system + NavBar/Footer (tc-sections).
// Mise en page sobre et professionnelle. Contenus à compléter / valider
// par le responsable légal (placeholders explicites entre crochets).

const isMobLg = (d) => d === 'mobile';

// ── Rendu d'un paragraphe : les [placeholders] sont mis en évidence ──
function LgText({ children }) {
  if (typeof children !== 'string') return children;
  const parts = children.split(/(\[[^\]]+\])/g);
  return (
    <>
      {parts.map((p, i) =>
        /^\[[^\]]+\]$/.test(p) ? (
          <span key={i} style={{
            fontFamily: fontMono, fontSize: '0.84em', color: TC.sageDeep,
            background: TC.sageMist, border: `1px solid ${TC.sageHair}`,
            borderRadius: 6, padding: '1px 7px', letterSpacing: -0.2,
            whiteSpace: 'nowrap',
          }}>{p}</span>
        ) : (
          <React.Fragment key={i}>{p}</React.Fragment>
        )
      )}
    </>
  );
}

// ── Une section légale (titre + corps) ──────────────────────
function LgBlock({ index, title, body, device }) {
  const m = isMobLg(device);
  return (
    <div style={{
      background: TC.white, borderRadius: 20, border: `1px solid ${TC.hair}`,
      padding: m ? '24px 22px' : '32px 36px',
      boxShadow: '0 1px 2px rgba(0,0,0,0.02)',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 14 }}>
        <span style={{ fontFamily: fontMono, fontSize: 12, color: TC.sage, letterSpacing: 0.5, flexShrink: 0 }}>
          {String(index).padStart(2, '0')}
        </span>
        <h2 style={{
          fontFamily: fontSans, fontSize: m ? 19 : 22, fontWeight: 600,
          color: TC.ink, letterSpacing: -0.4, lineHeight: 1.25, margin: 0,
        }}>{title}</h2>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingLeft: m ? 0 : 32 }}>
        {body.map((para, i) => (
          <p key={i} style={{
            fontFamily: fontSans, fontSize: m ? 14.5 : 15.5, lineHeight: 1.65,
            color: TC.ink2, margin: 0, letterSpacing: -0.05,
          }}><LgText>{para}</LgText></p>
        ))}
      </div>
    </div>
  );
}

// ── Note discrète (avertissement à valider) ─────────────────
function LgNote({ children, device }) {
  const m = isMobLg(device);
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: 12,
      background: TC.sageMist, border: `1px solid ${TC.sageHair}`, borderRadius: 16,
      padding: m ? '16px 18px' : '18px 22px', maxWidth: 820, margin: '0 auto',
    }}>
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ flexShrink: 0, marginTop: 1 }}>
        <circle cx="9" cy="9" r="7.4" stroke={TC.sageDeep} strokeWidth="1.4"/>
        <path d="M9 5.4v4.2M9 12.2v.02" stroke={TC.sageDeep} strokeWidth="1.6" strokeLinecap="round"/>
      </svg>
      <span style={{ fontFamily: fontSans, fontSize: m ? 13 : 13.5, lineHeight: 1.55, color: TC.sageInk, letterSpacing: -0.02 }}>
        {children}
      </span>
    </div>
  );
}

// ── Hero légal (sobre) ──────────────────────────────────────
function LgHero({ device, eyebrow, title, sub }) {
  const m = isMobLg(device);
  return (
    <section style={{ background: TC.off, position: 'relative', overflow: 'hidden' }} data-screen-label={`${eyebrow} · hero`}>
      <div style={{
        position: 'absolute', top: m ? -150 : -260, left: '50%', transform: 'translateX(-50%)',
        width: m ? 480 : 820, height: m ? 480 : 820, borderRadius: '50%',
        background: `radial-gradient(circle, ${TC.sageSoft} 0%, ${TC.off} 62%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', padding: m ? '44px 22px 36px' : '80px 80px 56px', maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: m ? 18 : 22 }}>
          <Eyebrow variant="sage" size={m ? 'sm' : 'md'}>{eyebrow}</Eyebrow>
        </div>
        <h1 style={{
          fontFamily: fontSans, fontSize: m ? 34 : 52, fontWeight: 500,
          letterSpacing: m ? -1.2 : -1.8, lineHeight: 1.08,
          margin: '0 0 18px', color: TC.ink, textWrap: 'balance',
        }}>{title}</h1>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 15.5 : 17.5, lineHeight: 1.6,
          color: TC.ink2, margin: '0 auto', maxWidth: 600, letterSpacing: -0.08,
        }}>{sub}</p>
      </div>
    </section>
  );
}

// ── Coquille légale (hero + sections + note) ────────────────
function LgShell({ device, eyebrow, title, sub, sections, note }) {
  const m = isMobLg(device);
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <LgHero device={device} eyebrow={eyebrow} title={title} sub={sub} />
      <Section tone="off" padY={m ? [8, 56] : [16, 96]} padX={m ? 22 : 80}>
        <div style={{ maxWidth: 820, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: m ? 14 : 18 }}>
          {sections.map((s, i) => (
            <LgBlock key={i} index={i + 1} title={s.t} body={s.b} device={device} />
          ))}
        </div>
        {note && (
          <div style={{ marginTop: m ? 24 : 32 }}>
            <LgNote device={device}>{note}</LgNote>
          </div>
        )}
      </Section>
      <Footer device={device} />
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// MENTIONS LÉGALES
// ════════════════════════════════════════════════════════════
const ML_SECTIONS = [
  { t: 'Éditeur du site', b: [
    'Le présent site Internet https://www.trainin-center.com est édité et exploité par TEED — Trainin Center, 231 Rue Saint-Honoré, 75001 Paris, France, société enregistrée au registre du commerce et des sociétés sous le numéro 915 242 416 R.C.S. Paris.',
    'Vous pouvez nous joindre par courrier électronique à l\u2019adresse contact@trainin-center.com.',
  ] },
  { t: 'Responsable de la publication', b: [
    'Le directeur de la publication du site est Maxime Leroy.',
  ] },
  { t: 'Hébergement', b: [
    'Le site est hébergé par OVH Groupe SAS (OVH SAS).',
    'Adresse : 2 rue Kellermann, BP 80157, 59053 Roubaix Cedex 1, France.',
  ] },
  { t: 'Propriété intellectuelle', b: [
    'L\u2019ensemble des contenus présents sur le site (textes, visuels, logos, supports pédagogiques) est protégé par le droit de la propriété intellectuelle et reste la propriété de Trainin Center ou de ses partenaires.',
    'Toute reproduction, représentation ou diffusion, totale ou partielle, sans autorisation préalable écrite est interdite.',
  ] },
  { t: 'Données personnelles', b: [
    'Les informations recueillies via les formulaires du site sont utilisées uniquement dans le cadre des demandes des visiteurs (information, inscription, accompagnement).',
    'Conformément à la réglementation applicable, vous disposez d\u2019un droit d\u2019accès, de rectification et de suppression de vos données en écrivant à contact@trainin-center.com.',
  ] },
  { t: 'Cookies', b: [
    'Le site peut utiliser des cookies destinés à améliorer l\u2019expérience de navigation et à mesurer l\u2019audience.',
    'Vous pouvez configurer votre navigateur pour accepter ou refuser les cookies.',
  ] },
  { t: 'Contact', b: [
    'Pour toute question relative au site ou aux présentes mentions légales, vous pouvez nous écrire à contact@trainin-center.com.',
  ] },
];

function MentionsLegalesPage({ device }) {
  return (
    <LgShell
      device={device}
      eyebrow="Mentions légales"
      title="Mentions légales"
      sub="Cette page présente les informations légales relatives au site Trainin Center."
      sections={ML_SECTIONS}
    />
  );
}

Object.assign(window, { MentionsLegalesPage });