// 228 FILMS · Page Mandats récurrents (Entreprises)
// Section rendue sur /#mandats : kicker + h2 + lead + registre 3 forfaits.

function MandatsRegistre() {
  const tr = useTr();
  const { isMobile } = useViewport();
  const { setPage } = usePage();
  const entries = [
    {
      n: 'F·1', cadence: { fr: 'TRIMESTRIEL', en: 'QUARTERLY' },
      name: { fr: 'Cadence claire',   en: 'Clear pace' },
      contenu: {
        fr: 'Une journée de tournage par trimestre, un livrable par mois, signature drone légère.',
        en: 'One shoot day per quarter, one deliverable per month, light drone signature.',
      },
      etat: { fr: 'sur dossier', en: 'on application' },
    },
    {
      n: 'F·2', cadence: { fr: 'TRIMESTRIEL', en: 'QUARTERLY' },
      name: { fr: 'Cadence soutenue', en: 'Sustained pace' },
      contenu: {
        fr: 'Deux journées par trimestre, deux livrables par mois, signature drone FPV intégrée.',
        en: 'Two shoot days per quarter, two deliverables per month, FPV drone signature integrated.',
      },
      etat: { fr: 'sur dossier', en: 'on application' },
    },
    {
      n: 'F·3', cadence: { fr: 'TRIMESTRIEL', en: 'QUARTERLY' },
      name: { fr: 'Cadence signature', en: 'Signature pace' },
      contenu: {
        fr: 'Trois journées par trimestre, livrables hebdomadaires, drone FPV + tournage en hauteur, suivi éditorial trimestriel.',
        en: 'Three shoot days per quarter, weekly deliverables, FPV drone + elevated filming, quarterly editorial review.',
      },
      etat: { fr: 'sur dossier', en: 'on application' },
    },
  ];

  return (
    <section id="mandats" style={{
      position: 'relative',
      paddingTop: isMobile ? 100 : 140, paddingBottom: isMobile ? 80 : 140,
      background: TOK.ivory,
    }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr', gap: isMobile ? 32 : 60, alignItems: 'end', marginBottom: isMobile ? 40 : 64 }}>
          <Reveal>
            <Kicker style={{ marginBottom: 22 }}>{tr({ fr: 'Mandats récurrents', en: 'Recurring engagements' })}</Kicker>
            <h2 style={h2Style}>
              {tr({
                fr: 'Nous filmons votre entreprise,\nchaque trimestre,\npour vous donner\nune image qui tient.',
                en: 'We film your company,\nevery quarter,\nto give you\nan image that holds.',
              }).split('\n').map((line, i) => <div key={i}>{line}</div>)}
            </h2>
          </Reveal>
          <Reveal delay={2} style={isMobile ? {} : { alignSelf: 'end' }}>
            <p style={leadStyle}>
              {tr({
                fr: 'Nous filmons vos lieux, vos équipes et vos produits à intervalle régulier, pour vous donner une cadence d\'images tenue sur l\'année. Trois formules pour entreprises et marques établies.',
                en: 'We film your places, your teams and your products on a steady cadence, so you get a year-long pace of images. Three formulas for companies and established brands.',
              })}
            </p>
          </Reveal>
        </div>

        <Reveal delay={1}>
          {isMobile ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {entries.map((e, i) => <MandatCard key={i} entry={e} />)}
              <div style={{
                marginTop: 8, padding: '14px 4px',
                fontFamily: TOK.mono, fontSize: 10, letterSpacing: '.16em',
                color: TOK.ink55, textTransform: 'uppercase',
                display: 'flex', flexDirection: 'column', gap: 6,
              }}>
                <span>{tr({ fr: 'REGISTRE V1 · 3 FORMULES', en: 'REGISTRY V1 · 3 FORMULAS' })}</span>
                <span>{tr({ fr: 'TENU PAR 228 FILMS', en: 'KEPT BY 228 FILMS' })}</span>
              </div>
            </div>
          ) : (
            <div style={{
              background: TOK.paper, border: `1px solid ${TOK.ink10}`,
            }}>
              <div style={{
                display: 'grid', gridTemplateColumns: '16px 130px 1.4fr 2.2fr 1.2fr',
                padding: '16px 28px', borderBottom: `1px solid ${TOK.ink10}`,
                fontFamily: TOK.mono, fontSize: 10, letterSpacing: '.18em',
                color: TOK.bronze, textTransform: 'uppercase',
                alignItems: 'center', gap: 18,
              }}>
                <span aria-hidden="true" />
                <span>{tr({ fr: 'CADENCE', en: 'PACE' })}</span>
                <span>{tr({ fr: 'FORMULE', en: 'FORMULA' })}</span>
                <span>{tr({ fr: 'CONTENU', en: 'CONTENT' })}</span>
                <span style={{ textAlign: 'right' }}>{tr({ fr: 'TARIF', en: 'PRICE' })}</span>
              </div>

              {entries.map((e, i) => (
                <MandatRow key={i} entry={e} last={i === entries.length - 1} />
              ))}

              <div style={{
                padding: '14px 28px',
                background: TOK.ivory,
                fontFamily: TOK.mono, fontSize: 10, letterSpacing: '.16em',
                color: TOK.ink55, textTransform: 'uppercase',
                display: 'flex', justifyContent: 'space-between',
              }}>
                <span>{tr({ fr: 'REGISTRE V1 · 3 FORMULES', en: 'REGISTRY V1 · 3 FORMULAS' })}</span>
                <span>{tr({ fr: 'TENU PAR 228 FILMS', en: 'KEPT BY 228 FILMS' })}</span>
              </div>
            </div>
          )}
        </Reveal>

        {/* CTA bas — pousser vers Contact */}
        <Reveal delay={3}>
          <div style={{
            marginTop: isMobile ? 64 : 100,
            paddingTop: isMobile ? 40 : 60,
            borderTop: `1px solid ${TOK.ink10}`,
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr',
            gap: isMobile ? 28 : 60,
            alignItems: isMobile ? 'start' : 'end',
          }}>
            <div>
              <Kicker style={{ marginBottom: 18 }}>{tr({ fr: 'Point d\'entrée', en: 'Entry point' })}</Kicker>
              <h3 style={{
                margin: 0, fontFamily: TOK.sans, fontWeight: 500,
                fontSize: isMobile ? 'clamp(26px, 7vw, 32px)' : 'clamp(32px, 3.4vw, 48px)',
                lineHeight: 1.1, letterSpacing: '-0.025em', color: TOK.ink,
                textWrap: 'balance',
              }}>
                {tr({
                  fr: 'Toute collaboration avec 228 FILMS commence par un cadrage en cinq questions.',
                  en: 'Every engagement with 228 FILMS begins with a briefing in five questions.',
                })}
              </h3>
            </div>
            <div style={{ alignSelf: isMobile ? 'start' : 'end' }}>
              <CTA kind="primary" onClick={() => setPage('contact')}>
                {tr({ fr: 'Demander une soumission', en: 'Request a quote' })}
              </CTA>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

function MandatCard({ entry }) {
  const tr = useTr();
  return (
    <div style={{
      background: TOK.paper, border: `1px solid ${TOK.ink10}`,
      padding: '20px 22px',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span aria-hidden="true" style={{
          width: 5, height: 5, borderRadius: 999,
          background: TOK.bronze, display: 'inline-block',
        }} />
        <span style={{
          fontFamily: TOK.mono, fontSize: 10, letterSpacing: '.18em',
          color: TOK.ink55, textTransform: 'uppercase',
        }}>{tr(entry.cadence)}</span>
      </div>
      <div style={{
        fontFamily: TOK.sans, fontSize: 19, fontWeight: 500,
        color: TOK.ink, letterSpacing: '-0.012em',
      }}>{tr(entry.name)}</div>
      <div style={{
        fontFamily: TOK.sans, fontSize: 14, lineHeight: 1.55,
        color: TOK.ink70, textWrap: 'pretty',
      }}>{tr(entry.contenu)}</div>
      <div style={{
        marginTop: 4, paddingTop: 10, borderTop: `1px solid ${TOK.ink10}`,
        fontFamily: TOK.sans, fontSize: 12.5, color: TOK.inkMed,
      }}>{tr(entry.etat)}</div>
    </div>
  );
}

function MandatRow({ entry, last }) {
  const tr = useTr();
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid', gridTemplateColumns: '16px 130px 1.4fr 2.2fr 1.2fr',
        padding: '22px 28px',
        borderBottom: last ? 'none' : `1px solid ${TOK.ink10}`,
        alignItems: 'center', gap: 18,
        background: hover ? TOK.cardHov : 'transparent',
        transition: 'background .2s',
      }}>
      <span aria-hidden="true" style={{
        width: 5, height: 5, borderRadius: 999,
        background: TOK.bronze, display: 'inline-block',
      }} />
      <span style={{
        fontFamily: TOK.mono, fontSize: 10, letterSpacing: '.18em',
        color: TOK.ink55, textTransform: 'uppercase',
      }}>{tr(entry.cadence)}</span>
      <span style={{
        fontFamily: TOK.sans, fontSize: 17, fontWeight: 500,
        color: TOK.ink, letterSpacing: '-0.012em',
      }}>{tr(entry.name)}</span>
      <span style={{
        fontFamily: TOK.sans, fontSize: 13.5, lineHeight: 1.55,
        color: TOK.ink70, textWrap: 'pretty',
      }}>{tr(entry.contenu)}</span>
      <span style={{
        fontFamily: TOK.sans, fontSize: 12.5, color: TOK.inkMed,
        textAlign: 'right',
      }}>{tr(entry.etat)}</span>
    </div>
  );
}

Object.assign(window, { MandatsRegistre });