/* iPixelP — case studies (3 cases, real videos) */

const CASES_FR = [
  {
    num: '01/03', kind: 'STUDIO TV · PRODUCTION PLATEAU',
    title: 'NOTRE STUDIO\nFOND VERT.',
    client: 'IPIXELP STUDIOS', sector: 'INFRASTRUCTURE', year: '2025',
    video: 'assets/videos/studio-green-screen.mp4',
    poster: 'assets/videos/thumbnails/studio-green-screen.jpg',
    challenge: 'Démontrer la capacité de notre plateau fond vert : profondeur de cyclo, calibration chromakey, infrastructure lumière LED, et flexibilité d\'utilisation pour publicité, plateau TV ou compositing cinéma.',
    solution: 'Tournage exploratoire dans notre propre studio : 4 caméras synchronisées, fond infinity vert calibré, traitement temps réel, intégrations VFX. Le plateau est disponible à la location avec ou sans équipe iPixelP.',
    metrics: [
      ['120 M²', 'CYCLO INFINITY', true],
      ['4K', 'CAPTURE TEMPS RÉEL'],
      ['LED', 'ÉCLAIRAGE CALIBRÉ'],
      ['LOC.', 'OU CLÉ EN MAIN'],
    ],
    quote: '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.',
    quoteAttr: 'CLIENT VÉRIFIÉ · GOOGLE REVIEWS ★★★★★',
    bts: ['assets/gallery/bts-1.jpg', 'assets/gallery/bts-2.jpg', 'assets/gallery/bts-3.jpg'],
  },
  {
    num: '02/03', kind: 'PUBLICITÉ · SPOT TV',
    title: 'UN SPOT TV\nPOUR LE MARCHÉ ALGÉRIEN.',
    client: '[ANNONCEUR]', sector: 'GRANDE CONSOMMATION', year: '2024',
    video: 'assets/videos/spot-tv-dz.mp4',
    poster: 'assets/videos/thumbnails/spot-tv-dz.jpg',
    challenge: 'Spot TV destiné au marché algérien, à produire à Tunis avec adaptation linguistique et casting local. Délai serré : conception, tournage et livraison broadcast en moins de [4] semaines.',
    solution: 'Direction artistique sur mesure, casting tuniso-algérien, tournage [2] jours en plateau et extérieur, post-production complète : étalonnage, mixage, sous-titrage en arabe. Livraison aux formats des chaînes diffuseuses.',
    metrics: [
      ['4 SEM.', 'BRIEF À LIVRAISON', true],
      ['2 JOURS', 'TOURNAGE'],
      ['HD/4K', 'MASTER BROADCAST'],
      ['DZ + TN', 'DIFFUSION'],
    ],
    quote: '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.',
    quoteAttr: 'CLIENT VÉRIFIÉ · GOOGLE REVIEWS ★★★★★',
    bts: ['assets/services/equipment-1.jpg', 'assets/services/equipment-2.jpg', 'assets/services/tv-production.jpg'],
  },
  {
    num: '03/03', kind: 'CORPORATE · FILM INSTITUTIONNEL',
    title: 'UN FILM CORPORATE\nPOUR LA FTA.',
    client: 'FTA', sector: 'INSTITUTIONNEL', year: '2024',
    video: 'assets/videos/fta.mp4',
    poster: 'assets/videos/thumbnails/fta.jpg',
    challenge: 'Film institutionnel pour la Fédération Tunisienne d\'Athlétisme : raconter une organisation sportive nationale, ses athlètes et ses ambitions, sans tomber dans le clip publicitaire générique.',
    solution: 'Approche documentaire : interviews dirigeants et athlètes, captation d\'entraînements et compétitions, montage rythmé, traitement chromatique cinématographique. Livré en deux versions (longue et courte) pour usages digitaux et événementiels.',
    metrics: [
      ['2 VERS.', 'LONGUE / COURTE', true],
      ['MULTI', 'LIEUX DE TOURNAGE'],
      ['DOC.', 'APPROCHE NARRATIVE'],
      ['FR/AR', 'BILINGUE'],
    ],
    quote: '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.',
    quoteAttr: 'CLIENT VÉRIFIÉ · GOOGLE REVIEWS ★★★★★',
    bts: ['assets/gallery/bts-7.jpg', 'assets/gallery/bts-8.jpg', 'assets/gallery/bts-9.jpg'],
  },
];

const CASES_EN = [
  {
    ...CASES_FR[0],
    kind: 'TV STUDIO · STAGE PRODUCTION',
    title: 'OUR GREEN SCREEN\nSTAGE.',
    client: 'IPIXELP STUDIOS', sector: 'INFRASTRUCTURE',
    challenge: 'Demonstrate the capacity of our green screen stage: cyc depth, chromakey calibration, LED lighting infrastructure, and flexibility for advertising, TV stage or cinema compositing use.',
    solution: 'Exploratory shoot in our own studio: 4 synced cameras, calibrated green infinity backdrop, real-time chromakey processing, VFX integration. The stage is available for rental with or without an iPixelP crew.',
    metrics: [
      ['120 M²', 'INFINITY CYC', true],
      ['4K', 'REAL-TIME CAPTURE'],
      ['LED', 'CALIBRATED LIGHTING'],
      ['RENT.', 'OR TURNKEY'],
    ],
    quote: 'The iPixelP team shot our advertising spot with a rare level of professionalism. State-of-the-art equipment, respect for deadlines, impeccable 4K output.',
    quoteAttr: 'VERIFIED CLIENT · GOOGLE REVIEWS ★★★★★',
  },
  {
    ...CASES_FR[1],
    kind: 'ADVERTISING · TV SPOT',
    title: 'A TV SPOT\nFOR THE ALGERIAN MARKET.',
    sector: 'CONSUMER GOODS',
    challenge: 'TV spot targeted at the Algerian market, to be produced in Tunis with language adaptation and local casting. Tight deadline: concept, shoot and broadcast delivery in under [4] weeks.',
    solution: 'Bespoke art direction, Tunisian–Algerian cast, [2] days of stage and exterior shooting, full post: color, mix, Arabic subtitling. Delivered in broadcaster-spec formats.',
    metrics: [
      ['4 WK.', 'BRIEF TO DELIVERY', true],
      ['2 DAYS', 'SHOOT'],
      ['HD/4K', 'BROADCAST MASTER'],
      ['DZ + TN', 'DISTRIBUTION'],
    ],
    quote: 'iPixelP produced spectacular work across every aspect of the production: time management, image quality, overall professionalism. I recommend them without hesitation.',
    quoteAttr: 'VERIFIED CLIENT · GOOGLE REVIEWS ★★★★★',
  },
  {
    ...CASES_FR[2],
    kind: 'CORPORATE · INSTITUTIONAL FILM',
    title: 'A CORPORATE FILM\nFOR FTA.',
    sector: 'INSTITUTIONAL',
    challenge: 'Institutional film for the Tunisian Athletics Federation: tell the story of a national sports body, its athletes and its ambitions, without falling into generic ad-clip territory.',
    solution: 'Documentary approach: interviews with leadership and athletes, capture of training and competition, rhythmic edit, cinematic color grade. Delivered in two versions (long and short) for digital and event use.',
    metrics: [
      ['2 VER.', 'LONG / SHORT', true],
      ['MULTI', 'LOCATIONS'],
      ['DOC.', 'NARRATIVE APPROACH'],
      ['FR/AR', 'BILINGUAL'],
    ],
    quote: 'A serious, creative and available team. They understood our brief and delivered exactly what we expected, ahead of schedule.',
    quoteAttr: 'VERIFIED CLIENT · GOOGLE REVIEWS ★★★★★',
  },
];

function VideoFrame({ src, poster, onClick, label, corner }) {
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', cursor: 'pointer' }} onClick={() => onClick && onClick(src, poster)}>
      {/* Always-rendered poster as both an eager <img> AND a CSS background — the
          video covers it on screen; in print, video is hidden and the still
          shows through. The dual approach is for headless Chrome reliability. */}
      {poster && (
        <div
          aria-hidden="true"
          style={{
            position: 'absolute', inset: 0, zIndex: 0,
            backgroundImage: `url(${poster})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        >
          <img
            src={poster}
            alt=""
            loading="eager"
            decoding="sync"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
          />
        </div>
      )}
      <video
        src={src}
        poster={poster}
        autoPlay
        muted
        loop
        playsInline
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 1 }}
      />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.05) 35%, rgba(10,10,10,0.95) 100%)', zIndex: 2 }}/>
      <div className="play-overlay" style={{ zIndex: 3 }}>
        <div className="play-btn" />
      </div>
      {corner && <div className="ph-corner" style={{ position:'absolute', top:24, right:24, fontFamily:'var(--ipp-mono)', fontSize:11, letterSpacing:'0.2em', color:'rgba(255,255,255,0.6)', textTransform:'uppercase', zIndex: 5 }}>{corner}</div>}
      {label && <div className="ph-label" style={{ position:'absolute', bottom:24, left:24, fontFamily:'var(--ipp-mono)', fontSize:11, letterSpacing:'0.2em', color:'rgba(255,255,255,0.85)', background:'rgba(0,0,0,0.6)', padding:'8px 12px', textTransform:'uppercase', zIndex: 5 }}>{label}</div>}
    </div>
  );
}

function CaseHero({ index, total, label, lang, data, dataLabel, onPlay }) {
  const t = lang === 'en' ? { tag: 'CASE STUDY', client: 'CLIENT', sector: 'SECTOR' } :
                            { tag: 'ÉTUDE DE CAS', client: 'CLIENT', sector: 'SECTEUR' };
  return (
    <Slide index={index} total={total} label={label} dataLabel={dataLabel}>
      <VideoFrame
        src={data.video}
        poster={data.poster}
        onClick={() => onPlay(data.video, data.poster)}
      />
      <div style={{ position: 'absolute', top: 60, left: 60, display: 'flex', gap: 32, alignItems: 'center', zIndex: 4 }}>
        <Eyebrow>{`${t.tag} · ${data.num}`}</Eyebrow>
      </div>

      <div style={{ position: 'absolute', left: 60, right: 60, bottom: 140, zIndex: 4 }}>
        <div className="eyebrow-mute" style={{ marginBottom: 16, color: 'rgba(255,255,255,0.7)' }}>
          {data.kind}
        </div>
        <div className="display lg" style={{ maxWidth: 1500, whiteSpace: 'pre-line', textShadow: '0 2px 24px rgba(0,0,0,0.6)' }}>
          {data.title}
        </div>
        <div style={{ display: 'flex', gap: 80, marginTop: 40, fontFamily: 'var(--ipp-mono)', fontSize: 13, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--ipp-mute-2)' }}>
          <div><div style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>{t.client}</div><div style={{ color: 'var(--ipp-white)' }}>{data.client}</div></div>
          <div><div style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>{t.sector}</div><div style={{ color: 'var(--ipp-white)' }}>{data.sector}</div></div>
          <div><div style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>{lang==='en'?'YEAR':'ANNÉE'}</div><div style={{ color: 'var(--ipp-white)' }}>{data.year}</div></div>
        </div>
      </div>
    </Slide>
  );
}

function CaseDetail({ index, total, label, lang, data, dataLabel }) {
  const t = lang === 'en' ? {
    challenge: 'THE CHALLENGE', solution: 'OUR SOLUTION', results: 'RESULTS', quote: 'CLIENT NOTE',
  } : {
    challenge: 'LE DÉFI', solution: 'NOTRE SOLUTION', results: 'LES RÉSULTATS', quote: 'RETOUR CLIENT',
  };
  return (
    <Slide index={index} total={total} label={label} dataLabel={dataLabel}>
      <div className="frame" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
          <div>
            <div className="eyebrow-mute" style={{ marginBottom: 12 }}>{data.kind}</div>
            <div className="display sm" style={{ fontSize: 56, lineHeight: 1.02, whiteSpace: 'pre-line' }}>{data.title}</div>
          </div>

          <div className="hairline" />

          <div>
            <Eyebrow>{t.challenge}</Eyebrow>
            <p className="body" style={{ marginTop: 18, maxWidth: 640 }}>{data.challenge}</p>
          </div>

          <div>
            <Eyebrow>{t.solution}</Eyebrow>
            <p className="body" style={{ marginTop: 18, maxWidth: 640 }}>{data.solution}</p>
          </div>

          <div style={{ marginTop: 'auto', borderLeft: '3px solid var(--ipp-red)', paddingLeft: 24 }}>
            <div className="eyebrow-mute" style={{ color: 'var(--ipp-mute-2)', marginBottom: 14 }}>{t.quote}</div>
            <div style={{ fontFamily: 'var(--ipp-body)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: 'var(--ipp-warm)', maxWidth: 620 }}>
              "{data.quote}"
            </div>
            <div style={{ marginTop: 14, fontFamily: 'var(--ipp-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ipp-mute-2)' }}>
              — {data.quoteAttr}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 30 }}>
          <Eyebrow>{t.results}</Eyebrow>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 8 }}>
            {data.metrics.map(([num, lbl, accent], i) => (
              <div key={i} className="metric" style={{ borderTop: '1px solid var(--ipp-rule-strong)', paddingTop: 20, overflow: 'hidden' }}>
                <div className={`num ${accent ? 'red' : ''}`} style={{ fontSize: 72, lineHeight: 1, whiteSpace: 'nowrap' }}>{num}</div>
                <div className="label" style={{ borderTop: 'none', paddingTop: 0, marginTop: 10 }}>{lbl}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginTop: 'auto' }}>
            {data.bts.map((b, i) => (
              <div key={i} style={{ aspectRatio: '4/5', overflow: 'hidden', position: 'relative' }}>
                <img src={b} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt=""/>
                <div style={{ position: 'absolute', bottom: 8, left: 8, fontFamily: 'var(--ipp-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.85)', background: 'rgba(0,0,0,0.6)', padding: '4px 8px' }}>
                  BTS · {String(i+1).padStart(2,'0')}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Slide>
  );
}

function CaseStudyPair({ pairIndex, total, lang, onPlay }) {
  const cases = lang === 'en' ? CASES_EN : CASES_FR;
  const c = cases[pairIndex];
  const heroIdx = 5 + pairIndex * 2;
  const detailIdx = 6 + pairIndex * 2;
  const labelHero = lang === 'en' ? `CASE ${pairIndex+1}` : `CAS ${pairIndex+1}`;
  return (
    <>
      <CaseHero index={heroIdx} total={total} label={labelHero} lang={lang} data={c} onPlay={onPlay}
        dataLabel={`${String(heroIdx).padStart(2,'0')} Case ${pairIndex+1} Hero`}/>
      <CaseDetail index={detailIdx} total={total} label={labelHero} lang={lang} data={c}
        dataLabel={`${String(detailIdx).padStart(2,'0')} Case ${pairIndex+1} Detail`}/>
    </>
  );
}

Object.assign(window, { CaseStudyPair, CASES_FR, CASES_EN });