// KaleosGrid — real Kaleos Porter campaign mosaic: 3×3 square images (native 1:1) + full-height 9:16 video tile.
const kaleosTiles = [
  'product-hero', 'woman-milan', 'closeup-woman',
  'man-paris', 'woman-nice', 'product-cafe',
  'man-amalfi', 'woman-venice', 'couple-rooftop',
];

function KaleosGrid() {
  const vidRef = React.useRef(null);
  const audRef = React.useRef(null);
  const [hasVideo, setHasVideo] = React.useState(true);
  const [sound, setSound] = React.useState(false);
  const toggleSound = () => {
    const a = audRef.current, v = vidRef.current;
    if (!a) return;
    if (sound) { a.pause(); setSound(false); }
    else {
      if (v) { v.currentTime = 0; v.play(); }
      a.currentTime = 0; a.volume = 0.85; a.loop = true;
      a.play().then(() => setSound(true)).catch(() => {});
    }
  };
  return (
    <figure className="gsn-tile" style={{ margin: 0, background: 'var(--abyss)', cursor: 'default' }}>
      <div style={{ aspectRatio: '25 / 16', overflow: 'hidden', display: 'flex', gap: 4, padding: 4, boxSizing: 'border-box' }}>
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(3, 1fr)', gap: 4, minWidth: 0 }}>
          {kaleosTiles.map(n => (
            <div key={n} style={{ overflow: 'hidden' }}>
              <img src={'assets/kaleos/' + n + '.jpg'} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
          ))}
        </div>
        <div onClick={toggleSound} title={sound ? 'Ton aus' : 'Mit Ton abspielen'} style={{ overflow: 'hidden', position: 'relative', background: '#101d2a', cursor: 'pointer', height: '100%', aspectRatio: '9 / 16', flex: 'none' }}>
          <audio ref={audRef} src="assets/kaleos/soundtrack.mp3" preload="none"></audio>
          {hasVideo ? (
            <video
              ref={vidRef}
              src="assets/kaleos/onface-motion.mp4"
              poster="assets/kaleos/closeup-woman.jpg"
              muted loop autoPlay playsInline
              onError={() => setHasVideo(false)}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transform: 'scale(1.25)', transformOrigin: '18% 40%' }}
            ></video>
          ) : (
            <img src="assets/kaleos/closeup-woman.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', opacity: .55 }} />
          )}
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
            {!sound && <div style={{ width: 0, height: 0, borderLeft: '22px solid rgba(238,242,246,.9)', borderTop: '13px solid transparent', borderBottom: '13px solid transparent', filter: 'drop-shadow(0 2px 8px rgba(0,0,0,.5))' }}></div>}
          </div>
          <div style={{ position: 'absolute', right: 8, bottom: 6, fontSize: '.6rem', letterSpacing: '.14em', color: 'rgba(238,242,246,.85)', textShadow: '0 1px 4px rgba(0,0,0,.6)', pointerEvents: 'none' }}>{sound ? 'TON AN · KLICK = AUS' : 'KLICK FÜR TON'}</div>
        </div>
      </div>
      <figcaption style={{ color: 'var(--on-dark-2)', fontSize: 'var(--fs-caption)', padding: '10px 14px' }}>1 → 13 Bilder + Film, produktionsfertig — Kampagne «Kaleos Porter», real</figcaption>
    </figure>
  );
}

Object.assign(window, { KaleosGrid });