/* iPixelP — slides 11-18 (renumbered from 13-20 after removing case 04) */

// ============ 11 CLIENT LOGOS (was 13) ============
function Slide13_Clients({ lang }) {
  const t = lang === 'en' ? {
    label: 'CLIENTS',
    eyebrow: 'THEY TRUST US',
    title: 'THE WORK SPEAKS\nFOR ITSELF.',
    next: "Next on the list. Could be you.",
  } : {
    label: 'CLIENTS',
    eyebrow: 'ILS NOUS FONT CONFIANCE',
    title: 'LE TRAVAIL\nPARLE DE LUI-MÊME.',
    next: "Le prochain, c'est vous.",
  };

  const cats = [
    [lang==='en'?'MEDIA & BROADCAST':'MÉDIAS & BROADCAST', [
      ['Al Mamlaka', 'assets/clients/al-mamlaka.jpg'],
      ['Al Ghad TV', 'assets/clients/al-ghad-tv.png'],
      ['Al Watania', 'assets/clients/al-watania.png'],
      ['Russia Today', 'assets/clients/russia-today.png'],
      ['Sky News', 'assets/clients/sky-news.jpg'],
      ['TRT Arabic', 'assets/clients/trt-arabic.jpg'],
      ['Sahel TV', 'assets/clients/sahel-tv.jpg'],
      ['Channel 4', 'assets/clients/channel-4.jpg'],
    ]],
    ['INSTITUTIONS', [
      ['UNOPS', 'assets/clients/unops.png'],
      ['Institut Français', 'assets/clients/institut-francais.png'],
      ['US Embassy', 'assets/clients/us-embassy.png'],
      ['Islamic Relief', 'assets/clients/islamic-relief.png'],
      ['Coop Italia', 'assets/clients/coop-italia.jpg'],
    ]],
    ['CORPORATES', [
      ['Netflix', 'assets/clients/netflix.png'],
      ['Silatech', 'assets/clients/silatech.png'],
      ['Communiqué Financier', 'assets/clients/communique-financier.png'],
    ]],
  ];

  return (
    <Slide index={11} total={TOTAL_SLIDES} label={t.label} light dataLabel="11 Clients">
      <div className="frame">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 50 }}>
          <div>
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <h1 className="display md" style={{ marginTop: 26, color: 'var(--ipp-black)', whiteSpace: 'pre-line' }}>{t.title}</h1>
          </div>
          <div style={{ fontFamily: 'var(--ipp-display)', fontSize: 32, color: 'var(--ipp-red)' }}>{t.next}</div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {cats.map(([cat, items], i) => (
            <div key={i}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 24, marginBottom: 14 }}>
                <span style={{ fontFamily: 'var(--ipp-mono)', fontSize: 12, letterSpacing: '0.28em', color: 'var(--ipp-red)' }}>
                  {String(i+1).padStart(2,'0')} · {cat}
                </span>
                <div style={{ flex: 1, height: 1, background: 'rgba(0,0,0,0.15)' }}/>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.max(items.length, 5)}, 1fr)`, gap: 10 }}>
                {items.map(([name, src]) => (
                  <div key={name} className="logo-tile" style={{ height: 110, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 14 }}>
                    <img src={src} alt={name} style={{ maxHeight: 64, maxWidth: '100%', objectFit: 'contain' }}/>
                    <span className="sub" style={{ marginTop: 8 }}>{name}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </Slide>
  );
}

// ============ 12 STUDIOS (was 14) ============
function Slide14_Studios({ lang }) {
  const t = lang === 'en' ? {
    label: 'STUDIOS', eyebrow: 'OUR INFRASTRUCTURE',
    title: ['STUDIOS WE OWN.', 'NOT STUDIOS WE BOOK.'],
    sub: 'Our Tunis HQ houses a TV stage, a green screen, post-production suites and a recording booth, all available for client rental and co-production.',
    rooms: [
      ['STUDIO TV', 'Stage 180 m². 4-cam control room, infinity backdrop, LED lighting.', '180 M²', 'assets/studio/studio3.webp'],
      ['GREEN SCREEN', '120 m² cyc, calibrated chromakey, motion-control.', '120 M²', 'assets/studio/studio4.webp'],
      ['POST-PRODUCTION', 'DaVinci color suite, 5.1 mix, subtitling.', '6 SUITES', 'assets/studio/studio5.webp'],
      ['RECORDING STUDIO', 'Isolated booth, acoustic treatment, voice-over & podcast.', 'BOOTH', 'assets/studio/studio6.webp'],
    ],
  } : {
    label: 'STUDIOS', eyebrow: 'NOTRE INFRASTRUCTURE',
    title: ['DES STUDIOS QUE NOUS POSSÉDONS.', 'PAS DES STUDIOS QUE NOUS LOUONS.'],
    sub: 'Notre siège tunisien abrite plateau TV, fond vert, suites de post-production et cabine d\'enregistrement, disponibles à la location client et en co-production.',
    rooms: [
      ['STUDIO TV', 'Plateau 180 m². Régie 4 caméras, fond infinity, éclairage LED.', '180 M²', 'assets/studio/studio3.webp'],
      ['FOND VERT', 'Cyclo 120 m², chromakey calibré, motion-control.', '120 M²', 'assets/studio/studio4.webp'],
      ['POST-PRODUCTION', 'Suite étalonnage DaVinci, mixage 5.1, sous-titrage.', '6 SUITES', 'assets/studio/studio5.webp'],
      ['STUDIO SON', 'Cabine isolée, traitement acoustique, voix-off & podcast.', 'BOOTH', 'assets/studio/studio6.webp'],
    ],
  };

  return (
    <Slide index={12} total={TOTAL_SLIDES} label={t.label} dataLabel="12 Studios">
      <div className="frame">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 50 }}>
          <div>
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <h1 className="display md" style={{ marginTop: 28 }}>
              {t.title.map((l,i) => <div key={i} style={{ color: i === 1 ? 'var(--ipp-red)' : 'inherit' }}>{l}</div>)}
            </h1>
          </div>
          <div className="body-sm" style={{ maxWidth: 380, color: 'var(--ipp-mute-2)' }}>{t.sub}</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gridTemplateRows: 'repeat(2, 320px)', gap: 18 }}>
          {t.rooms.map(([name, desc, scale, src], i) => (
            <div key={i} style={{ position: 'relative', overflow: 'hidden' }}>
              <img src={src} alt={name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}/>
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.85) 100%)' }}/>
              <div style={{ position: 'absolute', top: 16, right: 16, fontFamily: 'var(--ipp-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--ipp-red)' }}>{scale}</div>
              <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24 }}>
                <div className="display sm" style={{ fontSize: 36 }}>{name}</div>
                <div style={{ marginTop: 8, fontFamily: 'var(--ipp-mono)', fontSize: 12, letterSpacing: '0.18em', color: 'var(--ipp-warm)' }}>{desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Slide>
  );
}

// ============ 13 CINEMA (was 15) ============
function Slide15_Cinema({ lang }) {
  const t = lang === 'en' ? {
    label: 'CINEMA', eyebrow: 'CINEMA DEPARTMENT',
    title: ['MOST AGENCIES CALL THIS', 'A SUBCONTRACTOR.', 'WE CALL IT', 'A DEPARTMENT.'],
    body: 'Few Tunisian agencies own a complete cinema operation. Ours covers executive production, set construction, location scouting, and a costume archive of [8 000+] pieces.',
    caps: [
      ['EXECUTIVE PRODUCTION', 'Permits, fixing, crew, accounting.'],
      ['SET CONSTRUCTION', 'Workshop in Tunis, period and contemporary.'],
      ['LOCATION SCOUTING', 'Coastline, desert, medina, urban. Under 3h drive.'],
      ['COSTUMES', '[8 000+]-piece wardrobe across eras.'],
    ],
  } : {
    label: 'CINÉMA', eyebrow: 'DÉPARTEMENT CINÉMA',
    title: ['LA PLUPART DES AGENCES APPELLENT ÇA', 'UN SOUS-TRAITANT.', "NOUS APPELONS ÇA", 'UN DÉPARTEMENT.'],
    body: 'Peu d\'agences tunisiennes possèdent une opération cinéma complète. La nôtre couvre la production exécutive, la construction de décors, le repérage, et un fonds costumes de [8 000+] pièces.',
    caps: [
      ['PRODUCTION EXÉCUTIVE', 'Autorisations, fixing, équipe, comptabilité.'],
      ['CONSTRUCTION DE DÉCORS', 'Atelier à Tunis, époque et contemporain.'],
      ['REPÉRAGE', 'Côte, désert, médina, urbain. Moins de 3h de route.'],
      ['COSTUMES', 'Vestiaire de [8 000+] pièces, toutes époques.'],
    ],
  };
  return (
    <Slide index={13} total={TOTAL_SLIDES} label={t.label} dataLabel="13 Cinema">
      <div className="frame" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <h1 className="display sm" style={{ fontSize: 76, lineHeight: 1.0 }}>
            {t.title.map((l, i) => <div key={i} style={{ color: i === 1 || i === 3 ? 'var(--ipp-red)' : 'inherit' }}>{l}</div>)}
          </h1>
          <p className="body text-pretty" style={{ maxWidth: 640 }}>{t.body}</p>

          <div style={{ marginTop: 'auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
            {t.caps.map(([head, body], i) => (
              <div key={i} style={{ borderTop: '1px solid var(--ipp-rule-strong)', paddingTop: 14 }}>
                <div className="eyebrow-mute" style={{ color: 'var(--ipp-red)', marginBottom: 8 }}>{String(i+1).padStart(2,'0')}</div>
                <div style={{ fontFamily: 'var(--ipp-display)', fontSize: 22, textTransform: 'uppercase' }}>{head}</div>
                <div style={{ marginTop: 6, fontSize: 14, color: 'var(--ipp-mute-2)' }}>{body}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '2fr 1fr', gap: 12 }}>
          <div style={{ gridColumn: '1 / span 2', position: 'relative', overflow:'hidden' }}>
            <img src="assets/services/tv-production.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          </div>
          <div style={{ position: 'relative', overflow:'hidden' }}>
            <img src="assets/services/equipment-1.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          </div>
          <div style={{ position: 'relative', overflow:'hidden' }}>
            <img src="assets/services/equipment-2.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          </div>
        </div>
      </div>
    </Slide>
  );
}

// ============ 14 MAP (was 16) ============
function Slide16_Map({ lang }) {
  const t = lang === 'en' ? {
    label: 'NETWORK', eyebrow: 'INTERNATIONAL PRESENCE',
    title: ['10 COUNTRIES.', 'ONE STANDARD.'],
    body: 'Shoot in Doha, edit in Tunis, broadcast across the Maghreb. Our network gives you local crews in ten countries, with a single point of contact in Tunis.',
  } : {
    label: 'RÉSEAU', eyebrow: 'PRÉSENCE INTERNATIONALE',
    title: ['10 PAYS.', 'UN SEUL STANDARD.'],
    body: 'Tournage à Doha, montage à Tunis, diffusion au Maghreb. Notre réseau vous donne accès à des équipes locales dans dix pays, avec un seul interlocuteur à Tunis.',
  };
  const countries = ['Tunisie', 'Algérie', 'Maroc', 'Libye', 'Égypte', 'Mauritanie', 'Palestine', 'Koweït', 'Qatar', 'Turquie'];
  return (
    <Slide index={14} total={TOTAL_SLIDES} label={t.label} dataLabel="14 Network">
      <div className="frame" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 60 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <h1 className="display md">
            {t.title.map((l,i) => <div key={i} style={{ color: i === 0 ? 'var(--ipp-red)' : 'inherit' }}>{l}</div>)}
          </h1>
          <p className="body text-pretty" style={{ maxWidth: 540 }}>{t.body}</p>
          <div style={{ marginTop: 'auto', display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {countries.map((c, i) => (
              <span key={c} className="country-chip" style={i === 0 ? { borderColor: 'var(--ipp-red)', color: 'var(--ipp-red)' } : {}}>
                {c}{i === 0 ? <span style={{ fontSize: 10, opacity: 0.7, marginLeft: 6 }}>HQ</span> : null}
              </span>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'relative', width: '100%', aspectRatio: '5/3', overflow: 'hidden' }}>
            <img src="assets/map-mena.png" alt="Network map" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          </div>
          <div style={{ position: 'absolute', bottom: -28, left: 0, fontFamily: 'var(--ipp-mono)', fontSize: 11, letterSpacing: '0.22em', color: 'var(--ipp-mute-2)', textTransform: 'uppercase' }}>
            HQ TUNIS · 9 PARTNER CITIES
          </div>
        </div>
      </div>
    </Slide>
  );
}

// ============ 15 TEAM (was 17) — 6 members in 3x2 grid ============
function Slide17_Team({ lang }) {
  const t = lang === 'en' ? {
    label: 'TEAM', eyebrow: 'THE FACES BEHIND THE WORK',
    title: 'YOU\'LL SEE THE\nSAME FACES FROM\nPITCH TO DELIVERY.',
  } : {
    label: 'ÉQUIPE', eyebrow: 'LES VISAGES DERRIÈRE LES PROJETS',
    title: 'VOUS VERREZ\nLES MÊMES VISAGES\nDU BRIEF À LA LIVRAISON.',
  };
  const members = [
    ['Karim Darraji', 'DIRECTEUR GÉNÉRAL', 'assets/team/karim-darraji.jpg'],
    ['Khalif Darraji', 'DIRECTION', 'assets/team/khalif-darraji.jpg'],
    ['Souhila Guendouz', 'COMM. & MARKETING', 'assets/team/souhila-guendouz.jpg'],
    ['Ahmed Jouini', 'PRODUCTION', 'assets/team/ahmed-jouini.jpg'],
    ['Marwen Chrigui', 'CRÉATIF', 'assets/team/marwen-chrigui.jpg'],
    ['Youssef Ayari', 'POST-PRODUCTION', 'assets/team/youssef-ayari.jpg'],
  ];

  return (
    <Slide index={15} total={TOTAL_SLIDES} label={t.label} dataLabel="15 Team">
      <div className="frame" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 50 }}>
        <div>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <h1 className="display sm" style={{ marginTop: 28, fontSize: 56, lineHeight: 1.05, whiteSpace: 'pre-line' }}>{t.title}</h1>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(2, 1fr)', gap: 18 }}>
          {members.map(([name, role, src], i) => (
            <div key={name} style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
              <div style={{ flex: 1, position: 'relative', overflow: 'hidden', minHeight: 0 }}>
                <img src={src} alt={name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}/>
                <div style={{ position: 'absolute', top: 10, right: 10, fontFamily: 'var(--ipp-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'rgba(255,255,255,0.7)' }}>{String(i+1).padStart(2,'0')}</div>
              </div>
              <div style={{ paddingTop: 12, flexShrink: 0 }}>
                <div style={{ fontFamily: 'var(--ipp-display)', fontSize: 22, textTransform: 'uppercase' }}>{name}</div>
                <div style={{ marginTop: 4, fontFamily: 'var(--ipp-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--ipp-red)' }}>{role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Slide>
  );
}

// ============ 16 TESTIMONIALS (was 18) ============
function Slide18_Testimonials({ lang }) {
  const t = lang === 'en' ? {
    label: 'WORDS', eyebrow: 'WHAT CLIENTS SAY',
    title: ['QUOTES FROM', 'PEOPLE WHO', 'PAID THE INVOICE.'],
    quotes: [
      ['The iPixelP team shot our advertising spot with a rare level of professionalism. State-of-the-art equipment, respect for deadlines, impeccable 4K output.', 'VERIFIED CLIENT', 'GOOGLE REVIEWS'],
      ['iPixelP produced spectacular work across every aspect of the production: time management, image quality, overall professionalism. I recommend them without hesitation.', 'VERIFIED CLIENT', 'GOOGLE REVIEWS'],
      ['A serious, creative and available team. They understood our brief and delivered exactly what we expected, ahead of schedule.', 'VERIFIED CLIENT', 'GOOGLE REVIEWS'],
    ],
  } : {
    label: 'PAROLES', eyebrow: 'CE QUE DISENT NOS CLIENTS',
    title: ['DES PHRASES DE', 'GENS QUI ONT', 'PAYÉ LA FACTURE.'],
    quotes: [
      ['L\'équipe iPixelP a filmé notre spot publicitaire avec un niveau de professionnalisme rare. Matériel de pointe, respect des délais, résultat en 4K impeccable.', 'CLIENT VÉRIFIÉ', 'GOOGLE REVIEWS'],
      ['iPixelP ont réalisé un travail spectaculaire sur tous les aspects de la production : gestion du temps, image, professionnalisme général. Je les recommande sans hésitation.', 'CLIENT VÉRIFIÉ', 'GOOGLE REVIEWS'],
      ['Une équipe sérieuse, créative et disponible. Ils ont su comprendre notre brief et livrer exactement ce qu\'on attendait, en avance sur le planning.', 'CLIENT VÉRIFIÉ', 'GOOGLE REVIEWS'],
    ],
  };
  return (
    <Slide index={16} total={TOTAL_SLIDES} label={t.label} light dataLabel="16 Testimonials">
      <div className="frame">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 70 }}>
          <div>
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <h1 className="display md" style={{ marginTop: 28, color: 'var(--ipp-black)' }}>
              {t.title.map((l, i) => <div key={i} style={{ color: i === 1 ? 'var(--ipp-red)' : 'var(--ipp-black)' }}>{l}</div>)}
            </h1>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 36 }}>
          {t.quotes.map(([q, name, org], i) => (
            <div key={i} style={{ borderTop: '2px solid var(--ipp-red)', paddingTop: 28 }}>
              <div style={{ fontFamily: 'var(--ipp-display)', fontSize: 64, color: 'var(--ipp-red)', lineHeight: 0.6, marginBottom: 18 }}>"</div>
              <p style={{ fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#222', textWrap: 'pretty' }}>{q}</p>
              <div style={{ marginTop: 22, paddingTop: 16, borderTop: '1px solid rgba(0,0,0,0.15)', display: 'flex', alignItems:'center', gap: 10 }}>
                <span style={{ color: '#E31E24', fontSize: 14, letterSpacing: 2 }}>★★★★★</span>
                <span style={{ fontFamily: 'var(--ipp-mono)', fontSize: 10, letterSpacing: '0.22em', color: '#666' }}>{name} · {org}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Slide>
  );
}

// ============ 17 WHY US (was 19) ============
function Slide19_Why({ lang }) {
  const t = lang === 'en' ? {
    label: 'WHY US', eyebrow: 'WHY WORK WITH US',
    title: ['FIVE REASONS.', 'NO FILLER.'],
    items: [
      ['01', 'OWNED STUDIOS', 'Three rooms in Tunis. No subcontracting on the critical path.'],
      ['02', 'NETWORK OF 10', 'Local crews and fixers in ten countries.'],
      ['03', 'CINEMA DEPT', 'Set construction, costume archive, executive production.'],
      ['04', 'INTL. CLIENTS', 'Netflix, UNOPS, embassies. The work meets their bar.'],
      ['05', 'ONE TEAM', 'Strategy through delivery. One point of contact.'],
    ],
  } : {
    label: 'POURQUOI NOUS', eyebrow: 'POURQUOI TRAVAILLER AVEC NOUS',
    title: ['CINQ RAISONS.', 'PAS DE BLA-BLA.'],
    items: [
      ['01', 'STUDIOS EN PROPRE', 'Trois plateaux à Tunis. Pas de sous-traitance sur le chemin critique.'],
      ['02', 'RÉSEAU DE 10 PAYS', 'Équipes locales et fixeurs dans dix pays.'],
      ['03', 'DÉPARTEMENT CINÉMA', 'Décors, fonds costumes, production exécutive.'],
      ['04', 'CLIENTS INTERNATIONAUX', 'Netflix, UNOPS, ambassades. Le travail tient leur exigence.'],
      ['05', 'UNE SEULE ÉQUIPE', 'De la stratégie à la livraison. Un interlocuteur unique.'],
    ],
  };
  return (
    <Slide index={17} total={TOTAL_SLIDES} label={t.label} dataLabel="17 Why">
      <div className="frame">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 60 }}>
          <div>
            <Eyebrow>{t.eyebrow}</Eyebrow>
            <h1 className="display lg" style={{ marginTop: 28, fontSize: 124 }}>
              {t.title.map((l,i) => <div key={i} style={{ color: i === 1 ? 'var(--ipp-red)' : 'inherit' }}>{l}</div>)}
            </h1>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0 }}>
          {t.items.map(([num, head, body], i) => (
            <div key={i} style={{ padding: '40px 28px', borderRight: i < 4 ? '1px solid var(--ipp-rule)' : 'none', minHeight: 280, display: 'flex', flexDirection: 'column', gap: 24 }}>
              <div style={{ fontFamily: 'var(--ipp-mono)', fontSize: 13, letterSpacing: '0.2em', color: 'var(--ipp-red)' }}>{num}</div>
              <div className="display sm" style={{ fontSize: 30, lineHeight: 1.05 }}>{head}</div>
              <div className="body-sm" style={{ color: 'var(--ipp-mute-2)' }}>{body}</div>
            </div>
          ))}
        </div>
      </div>
    </Slide>
  );
}

// ============ 18 CONTACT (was 20) — real social URLs ============
const SOCIAL_ICONS = {
  Instagram: <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.9" fill="currentColor"/></svg>,
  Facebook: <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M13 22v-8h2.7l.4-3.1H13V8.9c0-.9.3-1.5 1.6-1.5H16V4.6c-.3 0-1.2-.1-2.3-.1-2.3 0-3.8 1.4-3.8 3.9v2.5H7.2V14h2.6v8H13z"/></svg>,
  LinkedIn: <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.13 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.55v14H.22V8zM7.5 8h4.36v1.92h.06c.61-1.16 2.1-2.38 4.32-2.38 4.62 0 5.48 3.04 5.48 6.99V22h-4.55v-6.18c0-1.47-.03-3.36-2.05-3.36-2.05 0-2.36 1.6-2.36 3.25V22H7.5V8z"/></svg>,
  YouTube: <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M23.5 6.2c-.3-1-1.1-1.9-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6c-1 .3-1.9 1.1-2.1 2.1C0 8.1 0 12 0 12s0 3.9.5 5.8c.3 1 1.1 1.9 2.1 2.1 1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6c1-.3 1.9-1.1 2.1-2.1.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z"/></svg>,
  Vimeo: <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M23.97 6.4c-.1 2.4-1.7 5.6-4.9 9.7-3.3 4.3-6.1 6.4-8.4 6.4-1.4 0-2.6-1.3-3.6-4-.6-2.4-1.2-4.8-1.9-7.2-.7-2.7-1.4-4-2.2-4-.2 0-.8.4-1.9 1.1l-1.1-1.5c1.2-1 2.4-2.1 3.5-3.1 1.5-1.4 2.7-2.1 3.5-2.1 1.8-.2 2.9 1.1 3.3 3.7.5 2.9.8 4.7 1 5.4.6 2.5 1.2 3.7 1.9 3.7.5 0 1.4-.9 2.5-2.6 1.1-1.7 1.7-3 1.8-4 .1-1.2-.4-1.8-1.5-1.8-.5 0-1.1.1-1.6.3 1-3.4 3.1-5.1 6-5 2.2.1 3.2 1.5 3.1 4z"/></svg>,
};
function Slide20_Contact({ lang }) {
  const t = lang === 'en' ? {
    label: 'CONTACT',
    cta: ['LET\'S TALK ABOUT', 'YOUR NEXT', 'PROJECT.'],
    sub: 'Send us a brief, a treatment, or just a question. We answer within 24 hours.',
    contact: [['EMAIL', 'contact-pixel@ipixelp.com'], ['PHONE', '+(216) 24 860 210'], ['WEB', 'www.ipixelp.com'], ['ADDRESS', 'Tunis · Tunisia']],
  } : {
    label: 'CONTACT',
    cta: ['PARLONS DE', 'VOTRE PROCHAIN', 'PROJET.'],
    sub: 'Envoyez-nous un brief, un traitement, ou juste une question. Réponse sous 24 heures.',
    contact: [['EMAIL', 'contact-pixel@ipixelp.com'], ['TÉLÉPHONE', '+(216) 24 860 210'], ['WEB', 'www.ipixelp.com'], ['ADRESSE', 'Tunis · Tunisie']],
  };

  const socials = [
    ['Instagram', '@international_pixel_production', 'https://www.instagram.com/international_pixel_production'],
    ['Facebook', '/internationalpixelp', 'https://www.facebook.com/internationalpixelp'],
    ['LinkedIn', 'International Pixel Production', 'https://www.linkedin.com/company/international-pixel-production/'],
    ['YouTube', '@Internationalpixelp', 'https://www.youtube.com/@Internationalpixelp'],
    ['Vimeo', '/internationalpixelp', 'https://vimeo.com/internationalpixelp'],
  ];

  return (
    <Slide index={18} total={TOTAL_SLIDES} label={t.label} dataLabel="18 Contact" footL=" " footR="IPP © 2026 · DESIGN & CODE · WEBCRAFTDEV.COM" footMarkSrc="assets/logo-light.png" footMarkStyle={{ height: 32, width: 'auto' }}>
      <div style={{ position:'absolute', inset:0 }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 80% 20%, rgba(227,30,36,0.18) 0%, rgba(227,30,36,0) 50%)' }}/>
      </div>
      <div className="frame" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 70 }}>
        <div style={{ display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
          <div>
            <Eyebrow>{lang === 'en' ? 'NEXT STEP' : 'PROCHAINE ÉTAPE'}</Eyebrow>
            <h1 className="display lg" style={{ marginTop: 32, fontSize: 132, lineHeight: 1.02 }}>
              {t.cta.map((l,i) => <div key={i} style={{ color: i === 1 ? 'var(--ipp-red)' : 'inherit' }}>{l}</div>)}
            </h1>
            <p className="body-lg" style={{ marginTop: 32, maxWidth: 620, color: 'var(--ipp-warm)' }}>{t.sub}</p>
          </div>
          <a href="mailto:contact-pixel@ipixelp.com" className="cta-row" style={{ textDecoration: 'none' }}>
            <div className="arrow"><svg width="20" height="20" viewBox="0 0 20 20"><path d="M2 10 H17 M11 4 L17 10 L11 16" stroke="white" strokeWidth="1.5" fill="none"/></svg></div>
            <span>{lang === 'en' ? 'SEND A BRIEF' : 'ENVOYER UN BRIEF'}</span>
          </a>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap: 30, justifyContent: 'space-between' }}>
          <div style={{ display:'grid', gridTemplateColumns: '1fr', gap: 16 }}>
            {t.contact.map(([k,v]) => (
              <div key={k} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 20, alignItems: 'baseline', borderTop: '1px solid var(--ipp-rule)', paddingTop: 14 }}>
                <span style={{ fontFamily:'var(--ipp-mono)', fontSize: 12, letterSpacing: '0.22em', color: 'var(--ipp-red)' }}>{k}</span>
                <span style={{ fontFamily: 'var(--ipp-display)', fontSize: 26, textTransform: 'uppercase' }}>{v}</span>
              </div>
            ))}
          </div>

          <div>
            <div style={{ fontFamily: 'var(--ipp-mono)', fontSize: 11, letterSpacing: '0.22em', color: 'var(--ipp-mute-2)', marginBottom: 14 }}>
              {lang === 'en' ? 'FOLLOW US' : 'SUIVEZ-NOUS'}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
              {socials.map(([name, handle, url]) => (
                <a key={name} href={url} target="_blank" rel="noopener" style={{
                  display: 'flex', flexDirection: 'column', gap: 12,
                  padding: '18px 14px', border: '1px solid var(--ipp-rule)',
                  textDecoration: 'none', color: 'var(--ipp-white)',
                  transition: 'all 0.2s', minHeight: 130, justifyContent: 'space-between',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--ipp-red)'; e.currentTarget.style.background = 'rgba(227,30,36,0.06)'; e.currentTarget.querySelector('[data-icon]').style.color = 'var(--ipp-red)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = ''; e.currentTarget.style.background = ''; e.currentTarget.querySelector('[data-icon]').style.color = ''; }}
                >
                  <span data-icon style={{ color: 'var(--ipp-warm)', transition: 'color 0.2s' }}>{SOCIAL_ICONS[name]}</span>
                  <div>
                    <div style={{ fontFamily: 'var(--ipp-display)', fontSize: 16, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{name}</div>
                    <div style={{ fontFamily: 'var(--ipp-mono)', fontSize: 9.5, letterSpacing: '0.05em', color: 'var(--ipp-mute-2)', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{handle}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Slide>
  );
}

Object.assign(window, {
  Slide13_Clients, Slide14_Studios, Slide15_Cinema, Slide16_Map,
  Slide17_Team, Slide18_Testimonials, Slide19_Why, Slide20_Contact,
});