// scenes-landscape.jsx — Al Rawdatain brand intro scenes, 1920×1080 landscape.
// Same narrative, same 6 scenes, same timings, recomposed for horizontal screens.

const W = 1920;
const H = 1080;

// ─── Shared atoms (same as portrait, retuned sizes) ─────────────────────────
function CornerHUD_L({ time, duration, sceneName, sceneIdx, total }) {
  const mono = 'JetBrains Mono, ui-monospace, monospace';
  const ink = 'var(--ink)';
  const dim = 'var(--dim)';
  const fmt = (t) => {
    const s = Math.floor(t % 60);
    const ms = Math.floor((t * 100) % 100);
    return `00:${String(s).padStart(2, '0')}.${String(ms).padStart(2, '0')}`;
  };
  return (
    <>
      <div style={{
        position: 'absolute', top: 36, left: 48,
        fontFamily: mono, fontSize: 16, color: dim, letterSpacing: '0.08em',
        display: 'flex', gap: 14, alignItems: 'center',
      }}>
        <span style={{ width: 8, height: 8, borderRadius: 4, background: 'var(--accent)' }}/>
        <span>REC</span>
        <span style={{ color: ink, fontVariantNumeric: 'tabular-nums' }}>{fmt(time)}</span>
        <span style={{ color: dim }}>/ {fmt(duration)}</span>
      </div>
      <div style={{
        position: 'absolute', top: 36, right: 48,
        fontFamily: mono, fontSize: 15, color: dim, letterSpacing: '0.1em',
        textTransform: 'uppercase',
        display: 'flex', gap: 10, alignItems: 'center',
      }}>
        <span style={{ color: ink }}>{String(sceneIdx).padStart(2,'0')}</span>
        <span>/</span>
        <span>{String(total).padStart(2,'0')}</span>
        <span style={{ marginLeft: 8 }}>{sceneName}</span>
      </div>
      <div style={{
        position: 'absolute', bottom: 36, left: 48,
        fontFamily: mono, fontSize: 14, color: dim, letterSpacing: '0.14em',
        textTransform: 'uppercase',
      }}>
        AL RAWDATAIN  ·  الروضتين  ·  EST. 1981
      </div>
      <div style={{
        position: 'absolute', bottom: 36, right: 48,
        fontFamily: mono, fontSize: 14, color: dim, letterSpacing: '0.08em',
        textAlign: 'right',
      }}>
        29.8°N  48.1°E
        <span style={{ color: 'var(--accent)', marginLeft: 12 }}>N. KUWAIT · AL‑RAUDHATAIN FIELD</span>
      </div>
    </>
  );
}

function CounterL({ from = 0, to, progress, suffix = '', decimals = 0, style = {} }) {
  const v = from + (to - from) * Easing.easeOutQuart(clamp(progress, 0, 1));
  const display = decimals > 0 ? v.toFixed(decimals) : Math.floor(v).toLocaleString();
  return (
    <span style={{ fontVariantNumeric: 'tabular-nums', ...style }}>
      {display}{suffix}
    </span>
  );
}

function TickerL({ progress, style = {} }) {
  return (
    <div style={{ position: 'relative', height: 2, background: 'var(--line)', ...style }}>
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0,
        width: `${clamp(progress, 0, 1) * 100}%`,
        background: 'var(--accent)',
      }}/>
    </div>
  );
}

// ─── Kuwait map (reused logic, size-agnostic) ──────────────────────────────
const SRC_W_L = 1134.2744;
const SRC_H_L = 979.20728;
const KW_MIN_X_L = 30;
const KW_MIN_Y_L = 20;
const KW_W_L = 1000;
const KW_H_L = 920;
const RAUDHATAIN_SRC_X_L = 620;
const RAUDHATAIN_SRC_Y_L = 187;
const RAUD_FRAC_X_L = (RAUDHATAIN_SRC_X_L - KW_MIN_X_L) / KW_W_L;
const RAUD_FRAC_Y_L = (RAUDHATAIN_SRC_Y_L - KW_MIN_Y_L) / KW_H_L;

function KuwaitMapL({ revealProgress }) {
  const imgWidthPct = (SRC_W_L / KW_W_L) * 100;
  const imgHeightPct = (SRC_H_L / KW_H_L) * 100;
  const leftPct = -(KW_MIN_X_L / KW_W_L) * 100;
  const topPct = -(KW_MIN_Y_L / KW_H_L) * 100;
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'hidden',
      opacity: revealProgress,
      background: 'var(--bg-alt)',
      border: '1px solid var(--line)',
    }}>
      <img src="assets/kuwait.svg" alt="Kuwait" style={{
        position: 'absolute',
        width: `${imgWidthPct}%`, height: `${imgHeightPct}%`,
        left: `${leftPct}%`, top: `${topPct}%`,
        filter: 'saturate(0.4) contrast(1.1)',
        opacity: 0.85,
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        background: `color-mix(in oklch, var(--accent) 8%, transparent)`,
        mixBlendMode: 'color', pointerEvents: 'none', opacity: 0.6,
      }}/>
      <div style={{
        position: 'absolute', top: 24, left: 24,
        fontFamily: 'JetBrains Mono, monospace', fontSize: 14,
        color: 'var(--ink)', letterSpacing: '0.22em', fontWeight: 600,
        opacity: revealProgress * 0.75, textShadow: '0 0 8px var(--bg)',
      }}>IRAQ</div>
      <div style={{
        position: 'absolute', bottom: 24, left: 24,
        fontFamily: 'JetBrains Mono, monospace', fontSize: 14,
        color: 'var(--ink)', letterSpacing: '0.22em', fontWeight: 600,
        opacity: revealProgress * 0.75, textShadow: '0 0 8px var(--bg)',
      }}>SAUDI ARABIA</div>
      <div style={{
        position: 'absolute', top: '55%', right: 16,
        transform: 'translateY(-50%) rotate(90deg)', transformOrigin: 'center',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
        color: 'var(--ink)', letterSpacing: '0.3em', fontWeight: 600,
        opacity: revealProgress * 0.7, textShadow: '0 0 8px var(--bg)',
        whiteSpace: 'nowrap',
      }}>ARABIAN GULF</div>
      <div style={{
        position: 'absolute', left: '45%', top: '55%',
        transform: 'translate(-50%, -50%)',
        fontFamily: 'Bricolage Grotesque, Georgia, serif', fontSize: 36,
        fontWeight: 500, color: 'var(--ink)', letterSpacing: '0.24em',
        opacity: revealProgress * 0.55, pointerEvents: 'none',
        textShadow: '0 0 12px var(--bg)',
      }}>KUWAIT</div>
    </div>
  );
}

// ─── SCENE 01 — Origin (0 – 5s) ─────────────────────────────────────────────
// Layout: left column (text + coords + depth), right column (Kuwait map)
function Scene01L() {
  const { localTime } = useSprite();
  const latProg = clamp((localTime - 0.2) / 0.9, 0, 1);
  const longProg = clamp((localTime - 0.6) / 0.9, 0, 1);
  const mapFillProg = clamp((localTime - 0.6) / 1.2, 0, 1);
  const depthProg = clamp((localTime - 1.4) / 1.2, 0, 1);
  const pinProg = clamp((localTime - 1.8) / 0.8, 0, 1);

  const ink = 'var(--ink)';
  const accent = 'var(--accent)';
  const display = 'var(--display-font)';
  const mono = 'JetBrains Mono, monospace';
  const arabic = 'var(--arabic-font)';

  // Map block on the right, large & centered vertically
  const MAP_W = 820;
  const MAP_H = 820;
  const mapLeft = W - MAP_W - 120;
  const mapTop = (H - MAP_H) / 2;

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--bg)' }}>
      {/* Grid overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          linear-gradient(var(--grid) 1px, transparent 1px),
          linear-gradient(90deg, var(--grid) 1px, transparent 1px)`,
        backgroundSize: '60px 60px',
        opacity: 0.35,
      }}/>

      {/* LEFT COLUMN */}
      <div style={{ position: 'absolute', left: 120, top: 140, width: 820 }}>
        {/* Coord row: LAT + LONG side-by-side */}
        <div style={{ display: 'flex', gap: 80 }}>
          <div style={{ fontFamily: mono, color: ink }}>
            <div style={{ fontSize: 15, color: 'var(--dim)', letterSpacing: '0.18em', marginBottom: 6 }}>LAT</div>
            <div style={{ fontSize: 54, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
              <CounterL from={0} to={29.82} progress={latProg} decimals={2} suffix="° N"/>
            </div>
          </div>
          <div style={{ fontFamily: mono, color: ink }}>
            <div style={{ fontSize: 15, color: 'var(--dim)', letterSpacing: '0.18em', marginBottom: 6 }}>LONG</div>
            <div style={{ fontSize: 54, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
              <CounterL from={0} to={48.14} progress={longProg} decimals={2} suffix="° E"/>
            </div>
          </div>
        </div>

        {/* Depth meter */}
        <div style={{
          marginTop: 52,
          opacity: clamp((localTime - 1.3) / 0.5, 0, 1),
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            fontFamily: mono, fontSize: 14, color: 'var(--dim)', letterSpacing: '0.18em',
            marginBottom: 10,
          }}>
            <span>AQUIFER DEPTH</span>
            <span style={{ color: ink, fontSize: 20, fontVariantNumeric: 'tabular-nums' }}>
              <CounterL from={0} to={450} progress={depthProg} suffix=" M"/>
            </span>
          </div>
          <TickerL progress={depthProg}/>
        </div>

        {/* Bilingual headline */}
        <div style={{
          marginTop: 100,
          opacity: clamp((localTime - 2.6) / 0.6, 0, 1),
          transform: `translateY(${(1 - clamp((localTime - 2.6) / 0.6, 0, 1)) * 16}px)`,
        }}>
          <div style={{
            fontFamily: mono, fontSize: 15, letterSpacing: '0.22em',
            color: accent, marginBottom: 24, textTransform: 'uppercase',
          }}>
            —— the source
          </div>
          <div style={{
            fontFamily: display, fontSize: 92, fontWeight: 500,
            color: ink, lineHeight: 0.98, letterSpacing: '-0.03em',
          }}>
            From the depths<br/>
            of Kuwait's desert.
          </div>
          <div style={{
            fontFamily: arabic, fontSize: 34, color: 'var(--dim)',
            marginTop: 40, direction: 'rtl', textAlign: 'left',
            lineHeight: 1,
          }}>
            من أعماق صحراء الكويت
          </div>
        </div>
      </div>

      {/* RIGHT COLUMN: Kuwait map */}
      <div style={{
        position: 'absolute', left: mapLeft, top: mapTop,
        width: MAP_W, height: MAP_H,
      }}>
        <KuwaitMapL revealProgress={mapFillProg}/>

        {/* Ripples */}
        {[...Array(4)].map((_, i) => {
          const delay = i * 0.25;
          const p = clamp((localTime - 1.8 - delay) / 2.5, 0, 1);
          const size = 50 + p * 360;
          const op = (1 - p) * 0.55;
          return (
            <div key={i} style={{
              position: 'absolute',
              left: `${RAUD_FRAC_X_L * 100}%`, top: `${RAUD_FRAC_Y_L * 100}%`,
              transform: 'translate(-50%, -50%)',
              width: size, height: size,
              border: `1.5px solid ${accent}`,
              borderRadius: '50%', opacity: op,
            }}/>
          );
        })}

        {/* Pin */}
        <div style={{
          position: 'absolute',
          left: `${RAUD_FRAC_X_L * 100}%`, top: `${RAUD_FRAC_Y_L * 100}%`,
          transform: `translate(-50%, -50%) scale(${Easing.easeOutBack(pinProg)})`,
          width: 22, height: 22,
          background: accent, borderRadius: '50%',
          boxShadow: `0 0 0 5px var(--bg), 0 0 0 6px ${accent}`,
          opacity: pinProg,
        }}/>

        {/* Callout */}
        <div style={{
          position: 'absolute',
          left: `${RAUD_FRAC_X_L * 100}%`, top: `${RAUD_FRAC_Y_L * 100}%`,
          width: 160, height: 1, background: accent,
          transformOrigin: 'left',
          transform: `rotate(-42deg) scaleX(${clamp((localTime - 2.2) / 0.5, 0, 1)})`,
          opacity: clamp((localTime - 2.2) / 0.3, 0, 1),
        }}/>
        <div style={{
          position: 'absolute',
          left: `calc(${RAUD_FRAC_X_L * 100}% + 120px)`,
          top: `calc(${RAUD_FRAC_Y_L * 100}% - 140px)`,
          fontFamily: mono, fontSize: 16,
          color: accent, letterSpacing: '0.14em', textTransform: 'uppercase',
          opacity: clamp((localTime - 2.5) / 0.4, 0, 1),
          whiteSpace: 'nowrap',
        }}>
          AL-RAUDHATAIN<br/>
          <span style={{ color: 'var(--dim)', fontSize: 12 }}>AQUIFER · N. KUWAIT</span>
        </div>
      </div>
    </div>
  );
}

// ─── SCENE 02 — Heritage timeline (5 – 11s) ─────────────────────────────────
// Layout: left column headline, right column horizontal timeline with 5 milestones
function Scene02L() {
  const { localTime } = useSprite();
  const ink = 'var(--ink)';
  const accent = 'var(--accent)';
  const display = 'var(--display-font)';
  const mono = 'JetBrains Mono, monospace';
  const arabic = 'var(--arabic-font)';

  const milestones = [
    { year: 1981, t: 0.4, label: 'Incorporated\nin Sharq, Kuwait.' },
    { year: 1986, t: 1.3, label: 'First bottling plant\nopens at source.' },
    { year: 2004, t: 2.2, label: 'International\ncertifications.' },
    { year: 2024, t: 3.1, label: 'Rawdatain app\nlaunches.' },
    { year: 2026, t: 4.0, label: 'Leading bottler\nin Kuwait.' },
  ];
  const lineProg = clamp(localTime / 4.2, 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--bg)' }}>
      {/* LEFT headline block */}
      <div style={{
        position: 'absolute', left: 120, top: 260, width: 620,
        opacity: clamp(localTime / 0.4, 0, 1),
      }}>
        <div style={{
          fontFamily: mono, fontSize: 15, letterSpacing: '0.22em',
          color: accent, marginBottom: 22, textTransform: 'uppercase',
        }}>
          —— 45 years of heritage
        </div>
        <div style={{
          fontFamily: display, fontSize: 104, fontWeight: 500,
          color: ink, lineHeight: 0.95, letterSpacing: '-0.03em',
        }}>
          A history<br/>
          poured<br/>
          <span style={{ color: accent, fontStyle: 'italic' }}>daily.</span>
        </div>
        <div style={{
          fontFamily: arabic, fontSize: 32, color: 'var(--dim)',
          marginTop: 52, direction: 'rtl', textAlign: 'left',
        }}>
          تاريخ يُسكب يوميًا
        </div>
      </div>

      {/* RIGHT vertical timeline */}
      <div style={{
        position: 'absolute', left: 860, top: 160, bottom: 140, right: 160,
      }}>
        {/* Track */}
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: 2,
          background: 'var(--line)',
        }}/>
        <div style={{
          position: 'absolute', left: 0, top: 0, width: 2,
          height: `${lineProg * 100}%`,
          background: accent,
        }}/>

        {/* Milestones */}
        {milestones.map((m, i) => {
          const appear = clamp((localTime - m.t) / 0.5, 0, 1);
          const yBase = 20 + i * 150;
          return (
            <div key={m.year} style={{
              position: 'absolute', left: 0, top: yBase,
              opacity: appear, transform: `translateX(${(1 - appear) * 20}px)`,
              display: 'flex', alignItems: 'baseline', gap: 40,
            }}>
              <div style={{
                position: 'absolute', left: -10, top: 18,
                width: 22, height: 22,
                background: 'var(--bg)',
                border: `2px solid ${accent}`, borderRadius: '50%',
              }}>
                <div style={{
                  position: 'absolute', inset: 4,
                  background: accent, borderRadius: '50%',
                  transform: `scale(${appear})`,
                }}/>
              </div>
              <div style={{
                marginLeft: 50,
                fontFamily: mono, fontSize: 60, fontWeight: 400,
                color: ink, lineHeight: 1, fontVariantNumeric: 'tabular-nums',
                letterSpacing: '-0.02em', width: 200,
              }}>
                {m.year}
              </div>
              <div style={{
                fontFamily: display, fontSize: 28, color: 'var(--dim)',
                whiteSpace: 'pre-line', lineHeight: 1.2, flex: 1,
              }}>
                {m.label}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── SCENE 03 — Stats (11 – 17s) ────────────────────────────────────────────
// Layout: headline top-left, horizontal row of 4 stats across bottom
function Scene03L() {
  const { localTime } = useSprite();
  const ink = 'var(--ink)';
  const accent = 'var(--accent)';
  const display = 'var(--display-font)';
  const mono = 'JetBrains Mono, monospace';
  const arabic = 'var(--arabic-font)';

  const stats = [
    { t: 0.3, value: 45, suffix: '+', label: 'Years bottling', ar: 'سنة من التعبئة' },
    { t: 0.9, value: 100, suffix: '%', label: 'Recyclable PET', ar: 'قابل لإعادة التدوير' },
    { t: 1.5, value: 1, suffix: 'st', label: 'In Kuwait', ar: 'الأولى في الكويت' },
    { t: 2.1, value: 24, suffix: '/7', label: 'Daily bottling', ar: 'يوميًا' },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--bg-alt)' }}>
      {/* Header */}
      <div style={{
        position: 'absolute', left: 120, top: 160,
        opacity: clamp(localTime / 0.4, 0, 1),
      }}>
        <div style={{
          fontFamily: mono, fontSize: 15, letterSpacing: '0.22em',
          color: accent, marginBottom: 20, textTransform: 'uppercase',
        }}>
          —— by the numbers
        </div>
        <div style={{
          fontFamily: display, fontSize: 88, fontWeight: 500,
          color: ink, lineHeight: 1.0, letterSpacing: '-0.03em',
        }}>
          Light. Balanced.<br/>
          <span style={{ color: accent, fontStyle: 'italic' }}>Pure.</span>
        </div>
        <div style={{
          fontFamily: arabic, fontSize: 30, color: 'var(--dim)',
          marginTop: 40, direction: 'rtl', textAlign: 'left',
        }}>
          خفيفة. متوازنة. نقية.
        </div>
      </div>

      {/* Stats row */}
      <div style={{
        position: 'absolute', left: 120, right: 120, bottom: 140,
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        borderTop: '1px solid var(--line)',
      }}>
        {stats.map((s, i) => {
          const prog = clamp((localTime - s.t) / 1.0, 0, 1);
          const appear = clamp((localTime - s.t) / 0.4, 0, 1);
          return (
            <div key={i} style={{
              padding: '40px 28px 32px',
              borderRight: i < 3 ? '1px solid var(--line)' : 'none',
              opacity: appear,
              transform: `translateY(${(1 - appear) * 14}px)`,
            }}>
              <div style={{
                fontFamily: display, fontSize: 156, fontWeight: 400,
                color: ink, lineHeight: 0.9, letterSpacing: '-0.05em',
              }}>
                <CounterL from={0} to={s.value} progress={prog}/>
                <span style={{ color: accent, fontSize: 96 }}>{s.suffix}</span>
              </div>
              <div style={{
                fontFamily: mono, fontSize: 16, color: 'var(--dim)',
                marginTop: 18, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>
                {s.label}
              </div>
              <div style={{
                fontFamily: arabic, fontSize: 22, color: 'var(--dim)',
                marginTop: 6, direction: 'rtl', textAlign: 'left',
              }}>
                {s.ar}
              </div>
            </div>
          );
        })}
      </div>

      {/* Ticker */}
      <div style={{
        position: 'absolute', left: 120, right: 120, bottom: 84,
        opacity: clamp((localTime - 2.6) / 0.6, 0, 1),
        fontFamily: mono, fontSize: 13, color: 'var(--dim)',
        letterSpacing: '0.2em', textTransform: 'uppercase',
        display: 'flex', justifyContent: 'space-between',
        whiteSpace: 'nowrap', flexWrap: 'nowrap',
      }}>
        <span>NSF · KQM · FDA · IAS · CPG</span>
        <span style={{ color: accent }}>↗ LIVE</span>
      </div>
    </div>
  );
}

// ─── SCENE 04 — Product range (17 – 24s) ────────────────────────────────────
// Layout: hero image centered-right, meta block left, giant watermark numeral behind
function Scene04L() {
  const { localTime } = useSprite();
  const ink = 'var(--ink)';
  const accent = 'var(--accent)';
  const display = 'var(--display-font)';
  const mono = 'JetBrains Mono, monospace';
  const arabic = 'var(--arabic-font)';

  const SEG = 1.3;
  const products = [
    { code: '01', name: 'Rawdatain 330 mL', ar: 'روضتين ٣٣٠ مل',
      size: '330 mL PET · 20-pack', hero: 'uploads/rawdatain-330ml.png', tone: '#1B3A6B' },
    { code: '02', name: 'Glass Bottle', ar: 'زجاجة زجاجية',
      size: '240 mL glass · 24-pack', hero: 'uploads/52996.png', tone: '#2A5588' },
    { code: '03', name: 'Bared', ar: 'بارد',
      size: 'Sparkling citrus soda', hero: 'uploads/54475.png', tone: '#2F7A4F' },
    { code: '04', name: 'Bloom', ar: 'بلوم',
      size: 'Sparkling fruit juice', hero: 'uploads/54457.png', tone: '#B86A4A' },
    { code: '05', name: 'Flavored Water', ar: 'مياه بنكهات',
      size: 'Light & refreshing', hero: 'uploads/53000.png', tone: '#A89334' },
  ];
  const idx = Math.max(0, Math.min(products.length - 1, Math.floor((localTime - 0.2) / SEG)));

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--bg-alt)' }}>
      {/* Header */}
      <div style={{
        position: 'absolute', left: 120, top: 140,
        opacity: clamp(localTime / 0.4, 0, 1),
      }}>
        <div style={{
          fontFamily: mono, fontSize: 15, letterSpacing: '0.22em',
          color: accent, marginBottom: 20, textTransform: 'uppercase',
        }}>
          —— the range
        </div>
        <div style={{
          fontFamily: display, fontSize: 78, fontWeight: 500,
          color: ink, lineHeight: 0.95, letterSpacing: '-0.03em',
        }}>
          One source.<br/>
          Many expressions.
        </div>
        <div style={{
          fontFamily: arabic, fontSize: 26, color: 'var(--dim)',
          marginTop: 20, direction: 'rtl', textAlign: 'left',
        }}>
          منبع واحد. تعبيرات عديدة.
        </div>
      </div>

      {/* Hero stage — right half */}
      <div style={{
        position: 'absolute', left: 960, right: 0, top: 0, bottom: 0,
        overflow: 'hidden',
      }}>
        {products.map((p, i) => {
          const segStart = 0.2 + i * SEG;
          const inProg = clamp((localTime - segStart) / 0.4, 0, 1);
          const outProg = clamp((localTime - segStart - SEG + 0.25) / 0.25, 0, 1);
          const visible = inProg * (1 - outProg);
          if (visible <= 0) return null;
          return (
            <div key={p.code} style={{ position: 'absolute', inset: 0, opacity: visible }}>
              {/* Giant watermark numeral behind */}
              <div style={{
                position: 'absolute', right: -60, top: -100,
                fontFamily: display, fontSize: 640, lineHeight: 0.8,
                color: p.tone, opacity: 0.12, fontWeight: 600,
                letterSpacing: '-0.05em', pointerEvents: 'none', whiteSpace: 'nowrap',
              }}>
                {p.code}
              </div>
              <img src={p.hero} alt={p.name} style={{
                position: 'absolute',
                left: '50%', top: '50%',
                width: '76%', height: '86%',
                transform: `translate(-50%, calc(-50% + ${(1 - inProg) * 28 + outProg * -18}px)) scale(${0.94 + inProg * 0.06})`,
                objectFit: 'contain',
                filter: 'drop-shadow(0 24px 48px rgba(0,0,0,0.32))',
              }}/>
            </div>
          );
        })}
      </div>

      {/* Segment progress chips */}
      <div style={{
        position: 'absolute', left: 120, top: 560, width: 760,
        display: 'grid',
        gridTemplateColumns: `repeat(${products.length}, 1fr)`,
        gap: 8,
      }}>
        {products.map((p, i) => {
          const segStart = 0.2 + i * SEG;
          const fillProg = clamp((localTime - segStart) / SEG, 0, 1);
          const passed = i < idx;
          const active = i === idx;
          return (
            <div key={i} style={{
              position: 'relative', height: 3, background: 'var(--line)',
            }}>
              <div style={{
                position: 'absolute', left: 0, top: 0, bottom: 0,
                width: passed ? '100%' : `${fillProg * 100}%`,
                background: active || passed ? accent : 'transparent',
              }}/>
            </div>
          );
        })}
      </div>

      {/* Product meta — bottom-left, fixed panel */}
      <div style={{
        position: 'absolute', left: 120, right: 860,
        top: 680, bottom: 120,
        borderTop: '1px solid var(--line)',
      }}>
        {products.map((p, i) => {
          const segStart = 0.2 + i * SEG;
          const inProg = clamp((localTime - segStart) / 0.35, 0, 1);
          const outProg = clamp((localTime - segStart - SEG + 0.2) / 0.2, 0, 1);
          const visible = inProg * (1 - outProg);
          if (visible <= 0) return null;
          return (
            <div key={p.code} style={{
              position: 'absolute', left: 0, right: 0, top: 28,
              opacity: visible,
              transform: `translateY(${(1 - inProg) * 16}px)`,
            }}>
              <div style={{
                fontFamily: mono, fontSize: 14, color: accent,
                letterSpacing: '0.2em', marginBottom: 14,
              }}>
                {p.code} / {String(products.length).padStart(2, '0')}
              </div>
              <div style={{
                fontFamily: display, fontSize: 56, color: ink,
                lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 500,
              }}>
                {p.name}
              </div>
              <div style={{
                fontFamily: arabic, fontSize: 22, color: 'var(--dim)',
                direction: 'rtl', textAlign: 'left', marginTop: 10,
              }}>
                {p.ar}
              </div>
              <div style={{
                fontFamily: mono, fontSize: 14, color: 'var(--dim)',
                letterSpacing: '0.14em', textTransform: 'uppercase',
                marginTop: 18, whiteSpace: 'nowrap',
              }}>
                {p.size}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── SCENE 05 — Certifications (24 – 29s) ───────────────────────────────────
// Layout: left headline, right stacked cert list (5 items)
function Scene05L() {
  const { localTime } = useSprite();
  const ink = 'var(--ink)';
  const accent = 'var(--accent)';
  const display = 'var(--display-font)';
  const mono = 'JetBrains Mono, monospace';
  const arabic = 'var(--arabic-font)';

  const certs = [
    { t: 0.4, name: 'NSF',  full: 'National Sanitation Foundation' },
    { t: 0.7, name: 'FDA',  full: 'U.S. Food & Drug Administration' },
    { t: 1.0, name: 'KQM',  full: 'Kuwait Quality Mark' },
    { t: 1.3, name: 'CPG',  full: 'Current Good Manufacturing Practices' },
    { t: 1.6, name: 'IAS',  full: 'International Accreditation Service' },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--bg)' }}>
      {/* LEFT headline */}
      <div style={{
        position: 'absolute', left: 120, top: 280, width: 660,
        opacity: clamp(localTime / 0.4, 0, 1),
      }}>
        <div style={{
          fontFamily: mono, fontSize: 15, letterSpacing: '0.22em',
          color: accent, marginBottom: 22, textTransform: 'uppercase',
        }}>
          —— verified
        </div>
        <div style={{
          fontFamily: display, fontSize: 98, fontWeight: 500,
          color: ink, lineHeight: 0.95, letterSpacing: '-0.03em',
        }}>
          Purity,<br/>
          <span style={{ color: accent, fontStyle: 'italic' }}>audited</span><br/>
          at every step.
        </div>
        <div style={{
          fontFamily: arabic, fontSize: 32, color: 'var(--dim)',
          marginTop: 38, direction: 'rtl', textAlign: 'left',
        }}>
          نقاء مُدقق في كل خطوة
        </div>
      </div>

      {/* RIGHT cert list */}
      <div style={{
        position: 'absolute', left: 960, right: 160, top: 140,
      }}>
        {certs.map((c, i) => {
          const appear = clamp((localTime - c.t) / 0.4, 0, 1);
          return (
            <div key={c.name} style={{
              display: 'flex', alignItems: 'center', gap: 28,
              padding: '24px 0',
              borderBottom: '1px solid var(--line)',
              opacity: appear,
            }}>
              <div style={{
                width: 38, height: 38,
                border: `2px solid ${accent}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transform: `scale(${Easing.easeOutBack(appear)})`,
                flexShrink: 0,
              }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <path d="M4 12l5 5L20 6" stroke="currentColor" strokeWidth="2.5"
                        strokeLinecap="round" strokeLinejoin="round"
                        style={{
                          color: accent, strokeDasharray: 30,
                          strokeDashoffset: 30 * (1 - appear),
                        }}/>
                </svg>
              </div>
              <div style={{
                fontFamily: mono, fontSize: 44, color: ink,
                letterSpacing: '0.02em', width: 130,
              }}>
                {c.name}
              </div>
              <div style={{
                flex: 1,
                fontFamily: display, fontSize: 22, color: 'var(--dim)',
                fontWeight: 400, lineHeight: 1.2,
              }}>
                {c.full}
              </div>
              <div style={{
                fontFamily: mono, fontSize: 13, color: accent,
                letterSpacing: '0.18em',
              }}>
                ✓ ACTIVE
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── SCENE 06 — Signoff (29 – 35s) ──────────────────────────────────────────
function Scene06L() {
  const { localTime } = useSprite();
  const display = 'var(--display-font)';
  const mono = 'JetBrains Mono, monospace';
  const arabic = 'var(--arabic-font)';

  const wordmarkProg = clamp(localTime / 1.2, 0, 1);
  const tagProg = clamp((localTime - 1.4) / 0.6, 0, 1);
  const ctaProg = clamp((localTime - 2.4) / 0.5, 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--signoff-bg, var(--ink))' }}>
      {/* Radial glow */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)',
        width: 1600, height: 1200,
        background: `radial-gradient(circle, color-mix(in oklch, var(--accent) 25%, transparent) 0%, transparent 60%)`,
        opacity: clamp(localTime / 1, 0, 1) * 0.85,
      }}/>

      {/* Logo */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 260,
        display: 'flex', justifyContent: 'center',
        opacity: wordmarkProg,
        transform: `translateY(${(1 - wordmarkProg) * 24}px) scale(${0.95 + wordmarkProg * 0.05})`,
      }}>
        <img src="uploads/rawlogo.png" alt="Al Rawdatain" style={{
          width: 620, height: 'auto',
          filter: 'var(--logo-filter, brightness(0) invert(1))',
        }}/>
      </div>

      {/* Tagline */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 660,
        textAlign: 'center',
        opacity: tagProg,
        transform: `translateY(${(1 - tagProg) * 12}px)`,
      }}>
        <div style={{
          fontFamily: display, fontSize: 44, color: '#f0efe9',
          fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.01em',
        }}>
          Heritage, bottled daily.
        </div>
        <div style={{
          fontFamily: arabic, fontSize: 28, color: 'rgba(240,239,233,0.65)',
          marginTop: 12, direction: 'rtl',
        }}>
          تراث يُعبأ يوميًا
        </div>
      </div>

      {/* CTA band */}
      <div style={{
        position: 'absolute', left: 120, right: 120, bottom: 160,
        opacity: ctaProg,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: mono, fontSize: 18, color: 'rgba(240,239,233,0.75)',
        letterSpacing: '0.18em', textTransform: 'uppercase',
        borderTop: '1px solid rgba(240,239,233,0.18)',
        borderBottom: '1px solid rgba(240,239,233,0.18)',
        padding: '20px 0',
      }}>
        <span>alrawdatain.com</span>
        <span style={{ color: 'rgba(240,239,233,0.55)' }}>Sharq · Kuwait · Since 1981</span>
        <span>+965 1881234</span>
      </div>
    </div>
  );
}

// ─── Root composition for landscape ─────────────────────────────────────────
const SCENES_L = [
  { name: 'ORIGIN',         start: 0,  end: 5,  Component: Scene01L },
  { name: 'HERITAGE',       start: 5,  end: 11, Component: Scene02L },
  { name: 'STATS',          start: 11, end: 17, Component: Scene03L },
  { name: 'PRODUCTS',       start: 17, end: 24, Component: Scene04L },
  { name: 'CERTIFICATIONS', start: 24, end: 29, Component: Scene05L },
  { name: 'SIGNOFF',        start: 29, end: 35, Component: Scene06L },
];
const TOTAL_L = SCENES_L[SCENES_L.length - 1].end;

function CompositionL() {
  const { time } = useTimeline();
  const activeIdx = SCENES_L.findIndex(s => time >= s.start && time < s.end);
  const idx = activeIdx === -1 ? SCENES_L.length - 1 : activeIdx;
  const active = SCENES_L[idx];
  return (
    <>
      {SCENES_L.map((s) => (
        <Sprite key={s.name} start={s.start} end={s.end}>
          <s.Component/>
        </Sprite>
      ))}
      <CornerHUD_L
        time={time}
        duration={TOTAL_L}
        sceneName={active.name}
        sceneIdx={idx + 1}
        total={SCENES_L.length}
      />
    </>
  );
}

Object.assign(window, { CompositionL, TOTAL_L });