/* Gameplay loop, mechanic zones, floors */

function CrtTrailer() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  const src = t.trailerSrc || null;
  const poster = '/assets/thumb_B_mira-composite.png';

  // Detect YouTube src (full URL or youtu.be/youtube.com shorthand)
  const isYT = src && (src.includes('youtube.com') || src.includes('youtu.be'));
  // Normalise YouTube watch URL → embed URL
  const ytEmbed = isYT ? src.replace('watch?v=', 'embed/').replace('youtu.be/', 'www.youtube.com/embed/') : null;

  return (
    <section id="trailer" style={{
      padding: `72px ${bp.isMobile ? 20 : 56}px`,
      borderBottom: `1px solid rgba(255,179,71,0.18)`,
      background: 'rgba(0,0,0,0.3)',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 28 }}>
        <Dim style={{ fontSize: 12, letterSpacing: '0.2em' }}>&gt; S00 :: FOOTAGE</Dim>
        <div style={{ flex: 1, height: 1, background: 'rgba(255,179,71,0.2)' }} />
        <Dim style={{ fontSize: 12, letterSpacing: '0.2em' }}>v0.5</Dim>
      </div>
      <h2 style={{
        fontFamily: '"Oswald","Impact",sans-serif', fontWeight: 700,
        fontSize: 48 * t.fontScale, letterSpacing: '0.02em', textTransform: 'uppercase',
        color: t.amber, margin: '0 0 28px', lineHeight: 1,
        textShadow: '0 0 20px rgba(255,179,71,0.3)',
      }}>DEATH BEFORE DECAF — TRAILER</h2>
      <div style={{
        position: 'relative', width: '100%', maxWidth: 900, margin: '0 auto',
        aspectRatio: '16 / 9',
        background: '#000',
        border: `1px solid rgba(255,179,71,0.25)`,
        overflow: 'hidden',
      }}>
        {isYT ? (
          <iframe
            src={ytEmbed + '?rel=0&modestbranding=1'}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            title="Death Before Decaf trailer"
          />
        ) : src ? (
          <video
            controls
            playsInline
            preload="metadata"
            poster={poster}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block', objectFit: 'cover' }}
          >
            <source src={src} type="video/mp4" />
          </video>
        ) : (
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: `url(${poster})`,
            backgroundSize: 'cover', backgroundPosition: 'center',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'flex-end',
            padding: '0 0 24px',
          }}>
            <div style={{
              background: 'rgba(11,6,3,0.72)', padding: '10px 20px',
              fontFamily: '"JetBrains Mono",monospace', fontSize: 13,
              color: 'rgba(243,230,204,0.85)', letterSpacing: '0.1em',
            }}>TRAILER LOADING — CHECK BACK SOON</div>
          </div>
        )}
      </div>
    </section>
  );
}

function CrtLoop() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  const steps = [
    { n: '01', title: 'ENTER SHIFT', body: 'Pick your barista. The building has seven floors — you start at the bottom, and the exit is not negotiable.' },
    { n: '02', title: 'DRINK + FIGHT', body: 'Combat runs itself. You manage the caffeine meter: too low and you slow down, too high and you become a medical incident.' },
    { n: '03', title: 'STACK BUILDS', body: 'Between rooms, choose one upgrade from three. They compound through the run — most combinations are a poor decision that felt correct at the time.' },
    { n: '04', title: 'CRASH or CLEAR', body: 'Clear all three floors to win the run. Die before that. Either way, Grind Points carry over — permanent currency you spend before the next shift.' },
  ];
  return (
    <CrtSection id="loop" tag="S01 :: GAMEPLAY_LOOP" title="DRINK · FIGHT · COMPOUND · EXPIRE">
      <div style={{ display: 'grid', gridTemplateColumns: bp.isMobile ? '1fr' : bp.isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 16 }}>
        {steps.map((s, i) => (
          <div key={s.n} style={{ border: `1px solid rgba(255,179,71,0.25)`, padding: 20, background: 'rgba(255,179,71,0.02)', position: 'relative' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
              <span style={{ color: t.accentMagenta, fontSize: 12, letterSpacing: '0.15em' }}>{s.n}</span>
              <span style={{ color: t.accentCyan, fontSize: 12 }}>{i === 3 ? '↺' : '→'}</span>
            </div>
            <div style={{ fontFamily: '"Oswald",sans-serif', color: t.amber, fontSize: 18, letterSpacing: '0.05em', marginBottom: 8 }}>{s.title}</div>
            <div style={{ fontSize: 13, color: '#c9b896', lineHeight: 1.55 }}>{s.body}</div>
          </div>
        ))}
      </div>
    </CrtSection>
  );
}

function CrtMechanic() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  const zones = [
    { l: 'CRASH', p: '0-20%', d: 'Slow. Weak. Classic Monday morning.', c: '#3a5f7d', lc: '#6fa8cc', span: '1fr' },
    { l: 'DRAG', p: '21-49%', d: 'Functional but losing. Drink something.', c: '#6b5b4f', lc: '#d4c4b0', span: '1fr' },
    { l: 'OPTIMAL', p: '50-80%', d: 'Peak performance. This is where you live.', c: '#3daf6e', lc: '#55d088', span: '2fr' },
    { l: 'JITTER', p: '81-99%', d: "Strong but unsteady. Your aim doesn't exist anyway.", c: t.amber, lc: t.amber, span: '1fr' },
    { l: 'OVERDOSE', p: '100%', d: 'Six seconds of godhood. Then the crash. Worth it? Probably not.', c: '#ff3d2e', lc: '#ff3d2e', span: '0.5fr' },
  ];
  return (
    <CrtSection id="mechanic" tag="S02 :: MECHANIC" title="YOUR BODY IS THE GAME." bg="rgba(255,179,71,0.02)">
      <div style={{ display: 'grid', gridTemplateColumns: bp.isTablet ? '1fr' : '1fr 1fr', gap: 48, alignItems: 'start' }}>
        <div>
          <p style={{ fontSize: 15, marginBottom: 14 }}>Most roguelites give you a health bar. We gave you a caffeine meter — and it wants to kill you just as much as the enemies do.</p>
          <p style={{ fontSize: 15, marginBottom: 14 }}>Drink too little: slow, weak, losing. Drink too much: hands shake, vision blurs, three seconds before cardiac incident. The entire game lives in the space between.</p>
          <p style={{ fontSize: 13, color: '#a88250', fontStyle: 'italic', marginTop: 20 }}>Coffee items drop constantly. Every drink tempts you closer to the edge. Every edge move is a calculated risk.</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {zones.map((z) => (
            <div key={z.l} style={{ display: 'grid', gridTemplateColumns: '110px 70px 1fr', gap: 14, alignItems: 'center', padding: '12px 16px', borderLeft: `3px solid ${z.c}`, background: 'rgba(255,255,255,0.02)' }}>
              <span style={{ fontFamily: '"Oswald",sans-serif', fontWeight: 700, letterSpacing: '0.08em', color: z.lc, fontSize: 13 }}>{z.l}</span>
              <span style={{ fontFamily: '"Oswald",sans-serif', color: '#a88250', fontSize: 12 }}>{z.p}</span>
              <span style={{ fontSize: 13 }}>{z.d}</span>
            </div>
          ))}
          <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: zones.map(z => z.span).join(' '), gap: 2, height: 24 }}>
            {zones.map((z) => (
              <div key={z.l} style={{
                background: `repeating-linear-gradient(90deg, ${z.c} 0 6px, rgba(0,0,0,0.25) 6px 7px)`,
                fontSize: 9, letterSpacing: '0.15em', color: '#0b0603', fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{z.l}</div>
            ))}
          </div>
          <div style={{ marginTop: 16, position: 'relative', border: `1px solid rgba(255,179,71,0.25)`, overflow: 'hidden' }}>
            <img src="assets/mira-victory-hero.png" alt="Mira Volta — peak performance" style={{ width: '100%', display: 'block', objectFit: 'cover', maxHeight: 240, objectPosition: '50% 20%', filter: 'contrast(1.05) saturate(0.9)' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 3px)', pointerEvents: 'none' }} />
            <div style={{ position: 'absolute', bottom: 8, left: 10, fontSize: 10, color: t.amber, letterSpacing: '0.15em' }}>● OPTIMAL · MIRA VOLTA · BPM 142</div>
          </div>
        </div>
      </div>
    </CrtSection>
  );
}

function CrtFloors() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  const floors = [
    { src: 'assets/floor-1-decaf-specter.png', tag: 'FLR_01', title: 'THE EXTRACTION LEVEL', body: "Where the city's caffeine supply used to be made. Now it makes Decaf Specters. Beige walls. The grinding sound never stops.", enemies: 'Latte Grunts · Drip Drones · Decaf Specters · The Shot' },
    { src: 'assets/floor-2-foam-golem.png', tag: 'FLR_02', title: 'THE BREAK ROOM', body: 'The espresso machine became a god. The walls are wet. The temperature is "slightly too warm." Something grows in the coffee residue.', enemies: 'Foam Golems · Cold Brew Crawlers · Decaf Specters · Macchiato Mages' },
    { src: 'assets/director-defeated-hero.png', tag: 'FLR_03', title: 'THE EXECUTIVE SUITE', body: 'Nobody has responded to internal communications in three weeks. The Director is waiting. Three phases. Zero mercy.', enemies: 'Macchiato Mage · The Director (boss, 3 phases)' },
  ];
  return (
    <CrtSection id="floors" tag="S03 :: FLOORS" title="THREE FLOORS. ONE VERY BAD DAY.">
      <div style={{ display: 'grid', gridTemplateColumns: bp.isNarrow ? '1fr' : 'repeat(3, 1fr)', gap: 20 }}>
        {floors.map((f, i) => (
          <article key={f.tag} style={{ border: `1px solid rgba(255,179,71,0.3)`, padding: 10, background: t.bg }}>
            <div style={{ position: 'relative', aspectRatio: '1 / 1', overflow: 'hidden', marginBottom: 12 }}>
              <img src={f.src} alt={f.title} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.9) contrast(1.05)' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 3px)' }} />
              <div style={{ position: 'absolute', top: 8, left: 8, fontSize: 10, color: t.accentCyan, letterSpacing: '0.2em' }}>● LIVE {f.tag}</div>
              <div style={{ position: 'absolute', top: 8, right: 8, fontSize: 10, color: ['#6fa8cc', t.amber, t.accentMagenta][i], letterSpacing: '0.15em' }}>DANGER {['◼', '◼◼', '◼◼◼'][i]}</div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: '#a88250', letterSpacing: '0.15em', marginBottom: 6 }}>
              <span>{f.tag}</span>
              <span style={{ color: t.accentMagenta }}>★ ~16 MIN RUN</span>
            </div>
            <h3 style={{ fontFamily: '"Oswald",sans-serif', color: t.amber, fontSize: 18, letterSpacing: '0.03em', margin: '0 0 8px' }}>{f.title}</h3>
            <p style={{ fontSize: 13, color: '#c9b896', margin: '0 0 10px' }}>{f.body}</p>
            <div style={{ borderTop: '1px dashed rgba(255,179,71,0.2)', paddingTop: 8, fontSize: 11, color: '#a88250', letterSpacing: '0.08em' }}>
              <Dim>ENEMIES:</Dim> {f.enemies}
            </div>
          </article>
        ))}
      </div>
    </CrtSection>
  );
}

Object.assign(window, { CrtTrailer, CrtLoop, CrtMechanic, CrtFloors });