// MENTIONS LÉGALES · ACADEMY · Page minimum identification éditeur,
// hébergeur, direction de publication, juridiction. Aucune donnée
// personnelle publiée (pas d'adresse, pas de numéro d'enregistrement).

function LegalMentions() {
  const tr = useTr();
  const { isMobile } = useViewport();
  const { setPage } = usePage();

  return (
    <section style={{
      position: 'relative',
      paddingTop: isMobile ? 100 : 140,
      paddingBottom: isMobile ? 80 : 140,
      background: TOK.ivory,
      minHeight: '70vh',
    }}>
      <Container narrow>
        <Reveal>
          <Kicker style={{ marginBottom: 22 }}>{tr({ fr: 'Mentions légales', en: 'Legal notice' })}</Kicker>
          <h1 style={{
            margin: 0, fontFamily: TOK.sans, fontWeight: 500,
            fontSize: isMobile ? 'clamp(32px, 9vw, 44px)' : 'clamp(40px, 5vw, 64px)',
            lineHeight: 1.04, letterSpacing: '-0.025em', color: TOK.ink,
            textWrap: 'balance',
          }}>
            {tr({ fr: 'Mentions légales.', en: 'Legal notice.' })}
          </h1>
        </Reveal>

        <Reveal delay={2}>
          <div style={{ marginTop: isMobile ? 36 : 56, display: 'flex', flexDirection: 'column', gap: isMobile ? 32 : 40 }}>

            <LegalBlock label={tr({ fr: 'Éditeur du site', en: 'Site publisher' })}>
              {tr({
                fr: '228 ACADEMY, division de GROUPE 228. Site édité depuis le Québec (Canada).',
                en: '228 ACADEMY, a division of GROUPE 228. Site published from Quebec (Canada).',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Contact', en: 'Contact' })}>
              <a href="mailto:info@228films.com" style={{
                color: TOK.ink, borderBottom: `1px solid ${TOK.bronze}`, paddingBottom: 2,
              }}>info@228films.com</a>
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Hébergement', en: 'Hosting' })}>
              {tr({
                fr: 'Cloudflare Pages. Données chiffrées en transit et au repos.',
                en: 'Cloudflare Pages. Data encrypted in transit and at rest.',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Propriété intellectuelle', en: 'Intellectual property' })}>
              {tr({
                fr: "L'ensemble des contenus du site (textes, identité graphique, code, illustrations, kits opérationnels téléchargés) est protégé. Toute reproduction sans autorisation écrite préalable est interdite.",
                en: 'All site content (texts, visual identity, code, illustrations, downloaded operational kits) is protected. Any reproduction without prior written authorisation is prohibited.',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Droit applicable', en: 'Applicable law' })}>
              {tr({
                fr: 'Droit du Québec (Canada). Tout litige relatif à ce site relève de la compétence des tribunaux du district de Montréal.',
                en: 'Laws of Quebec (Canada). Any dispute relating to this site falls under the jurisdiction of the courts of the Montreal district.',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Confidentialité', en: 'Privacy' })}>
              {tr({
                fr: 'La collecte et le traitement des données personnelles sont décrits dans notre',
                en: 'The collection and processing of personal data are described in our',
              })}
              {' '}
              <button onClick={() => setPage('privacy')} style={{
                all: 'unset', cursor: 'pointer', color: TOK.ink,
                borderBottom: `1px solid ${TOK.bronze}`, paddingBottom: 2,
              }}>{tr({ fr: 'politique de confidentialité', en: 'privacy policy' })}</button>.
            </LegalBlock>

          </div>
        </Reveal>

        <Reveal delay={3}>
          <div style={{
            marginTop: isMobile ? 48 : 72, paddingTop: 28,
            borderTop: `1px solid ${TOK.ink10}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            flexWrap: 'wrap', gap: 16,
            fontFamily: TOK.mono, fontSize: 10, letterSpacing: '.18em',
            color: TOK.inkMed, textTransform: 'uppercase',
          }}>
            <span>{tr({ fr: 'Dernière mise à jour · Mai 2026', en: 'Last updated · May 2026' })}</span>
            <button onClick={() => setPage('home')} style={{
              all: 'unset', cursor: 'pointer', color: TOK.bronze,
            }}>{tr({ fr: '← Retour à l\'accueil', en: '← Back to home' })}</button>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

Object.assign(window, { LegalMentions });