/* Cast, dev log, press kit, CTA, footer */
function CrtRoster() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  const cast = [
    { name: 'MIRA VOLTA', tag: 'burns clean, crashes hard', img: 'assets/mira-victory-hero.png', bpm: 142, color: t.amber, status: 'PLAYABLE', locked: false },
    { name: 'THE REPLACEMENT', tag: 'certified to Guild standard — exceeding spec', img: null, bpm: 98, color: t.accentCyan, status: 'PLAYABLE · 1.0', locked: false },
    { name: 'THE ROASTED', tag: "the Zone isn't a state. it's a sacrament.", img: null, bpm: 171, color: t.accentMagenta, status: 'PLAYABLE · 1.0', locked: false },
    { name: 'BEAN-7', tag: 'deployment authority: expired. still on patrol.', img: null, bpm: 64, color: '#c9b896', status: 'LOCKED · 1.1', locked: true },
  ];
  return (
    <CrtSection id="cast" tag="S04 :: CAST" title="FOUR BARISTAS. THREE PLAYABLE AT LAUNCH.">
      <div style={{ display: 'grid', gridTemplateColumns: bp.isMobile ? '1fr' : bp.isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 16 }}>
        {cast.map((c) => (
          <div key={c.name} style={{ border: `1px solid rgba(255,179,71,${c.locked ? 0.18 : 0.3})`, background: t.bg, opacity: c.locked ? 0.78 : 1 }}>
            <div style={{ aspectRatio: '1 / 1.1', background: c.img ? `url(${c.img}) center/cover` : 'repeating-linear-gradient(45deg, #1a0f08 0 8px, #120a05 8px 16px)', position: 'relative', borderBottom: `1px solid rgba(255,179,71,0.3)`, filter: c.locked ? 'grayscale(0.4)' : 'none', overflow: 'hidden' }}>
              {!c.img && (
                <React.Fragment>
                  <div style={{ position: 'absolute', bottom: '18%', left: '50%', transform: 'translateX(-50%)', width: '58%', height: '68%', background: `radial-gradient(ellipse at 50% 35%, ${c.color}33 0%, ${c.color}0c 45%, transparent 72%)`, filter: 'blur(4px)', pointerEvents: 'none' }} />
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '0 14px', fontFamily: '"JetBrains Mono", monospace' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 5, fontSize: 10, color: 'rgba(169,130,80,0.55)', letterSpacing: '0.15em', lineHeight: 1 }}>
                      <div>{'▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒'}</div>
                      <div>{'█████████  ▓▓▓▓▓'}</div>
                      <div>{'░░░░░  ███████'}</div>
                    </div>
                    <div style={{ border: `1px solid ${c.color}`, padding: '5px 10px', fontSize: 10, color: c.color, letterSpacing: '0.22em', textShadow: `1px 0 0 ${t.accentMagenta}, -1px 0 0 ${t.accentCyan}` }}>
                      [ CLASSIFIED · 1.0 ]
                    </div>
                    <div style={{ fontSize: 9, color: '#6e5a44', letterSpacing: '0.12em', fontStyle: 'italic' }}>
                      &gt; identity scrambled_
                    </div>
                  </div>
                </React.Fragment>
              )}
              <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0 1px, transparent 1px 3px)', pointerEvents: 'none' }} />
              <div style={{ position: 'absolute', top: 8, left: 10, fontSize: 10, color: c.locked ? '#a88250' : c.color, letterSpacing: '0.2em' }}>{c.locked ? '○' : '●'} {c.status}</div>
              <div style={{ position: 'absolute', bottom: 10, left: 10, right: 10, fontSize: 10, color: t.cream, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                <span style={{ fontSize: 9, color: '#a88250', letterSpacing: '0.18em' }}>BPM</span>
                <span style={{ fontFamily: '"Oswald",sans-serif', fontSize: 18, lineHeight: 1, color: c.bpm > 150 ? t.accentMagenta : c.color }}>{c.bpm}</span>
              </div>
            </div>
            <div style={{ padding: '12px 14px 16px' }}>
              <div style={{ fontFamily: '"Oswald",sans-serif', color: c.color, fontSize: 15, letterSpacing: '0.06em', marginBottom: 4 }}>{c.name}</div>
              <div style={{ fontSize: 12, color: '#a88250', fontStyle: 'italic' }}>{c.tag}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 20, fontSize: 12, color: '#a88250', letterSpacing: '0.08em' }}>
        <Dim>&gt;</Dim> v1.0 ships with <Cream>Mira Volta</Cream>, <Cream>The Replacement</Cream>, and <Cream>The Roasted</Cream>. BEAN-7's deployment authority is still expired.
      </div>
    </CrtSection>
  );
}

function CrtDevLog() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  if (!t.showDevLog) return null;
  const full = [
    { d: '04.21.26 09:14', tag: 'BAL', c: t.accentMagenta, msg: 'Jitter zone damage bonus reduced from +40% to +32%. Still the correct pick. Still a bad idea.' },
    { d: '04.19.26 14:02', tag: 'DEV', c: t.amber, msg: "The Director phase 3 rebalanced. It now throws the espresso. Previously it only implied it would." },
    { d: '04.17.26 09:40', tag: 'BUG', c: t.accentMagenta, msg: 'Fixed: Decaf Specters were phasing through walls but not haunting anyone. Corrected. They haunt now.' },
    { d: '04.15.26 22:11', tag: 'DEV', c: t.amber, msg: 'New upgrade: COLD BREW CONVICTION. +25% crit, -40% reaction time. Do not pick it. Everyone picks it.' },
    { d: '04.12.26 11:08', tag: 'SYS', c: t.accentCyan, msg: 'Steam store page submitted. Algorithm, notice us. Our wishlists are your wishlists.' },
    { d: '04.08.26 18:24', tag: 'LORE', c: '#c9b896', msg: 'Paperclips delivered 14 new death voice lines. The quiet one is our favorite.' },
    { d: '04.03.26 07:55', tag: 'BAL', c: t.accentMagenta, msg: 'Overdose duration 6.0s → 6.5s. Crash recovery unchanged. You still get what you deserve.' },
    { d: '03.28.26 23:12', tag: 'DEV', c: t.amber, msg: 'BEAN-7 voice lines recorded. They are all beeps. We love him. He is locked until 1.0 anyway.' },
  ];
  const log = t.logDensity === 'sparse' ? full.slice(0, 4) : t.logDensity === 'dense' ? full : full.slice(0, 6);
  return (
    <CrtSection id="log" tag="S05 :: DEVLOG" title="/var/log/overdose.log" bg="rgba(255,179,71,0.02)">
      <div style={{ border: `1px solid rgba(255,179,71,0.3)`, background: '#050302', padding: 20, fontSize: 13, lineHeight: 1.85 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: '#6e5a44', letterSpacing: '0.15em', marginBottom: 12, borderBottom: '1px dashed rgba(255,179,71,0.2)', paddingBottom: 8 }}>
          <span>$ tail -f /var/log/overdose.log</span>
          <span>● STREAMING</span>
        </div>
        {log.map((l, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '150px 60px 1fr', gap: 12, animation: `boot-line 0.4s ease-out ${i * 0.04}s both` }}>
            <Dim>{l.d}</Dim>
            <span style={{ color: l.c, letterSpacing: '0.1em' }}>[{l.tag}]</span>
            <span style={{ color: t.cream }}>{l.msg}</span>
          </div>
        ))}
        <div style={{ marginTop: 8, color: t.amber }}>$ <span className="cursor-blink" style={{ background: t.amber, color: t.bg, padding: '0 4px' }}>_</span></div>
      </div>
      <div style={{ marginTop: 16 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 12 }}>
          <Dim style={{ fontSize: 11, letterSpacing: '0.2em' }}>&gt; BEFORE / AFTER · v0.1.1 VISUAL UPDATE</Dim>
          <div style={{ flex: 1, height: 1, background: 'rgba(255,179,71,0.18)' }} />
          <Dim style={{ fontSize: 11, letterSpacing: '0.2em', color: t.accentCyan }}>hover to reveal</Dim>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: bp.isNarrow ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 10 }}>
          {[
            { slug: 'macchiato-mage',   label: 'MACCHIATO MAGE'   },
            { slug: 'espresso-pistol',  label: 'ESPRESSO PISTOL'  },
            { slug: 'mira-volta',       label: 'MIRA VOLTA'       },
            { slug: 'obstacle-desk',    label: 'OFFICE DESK'      },
          ].map((c) => (
            <div key={c.slug} className="ba-tile" style={{
              position: 'relative', aspectRatio: '1 / 1', overflow: 'hidden',
              border: `1px solid rgba(255,179,71,0.3)`, background: '#0b0603',
            }}>
              <img src={`assets/comparison/${c.slug}-old.png`} alt={`${c.label} pre-v0.1.1`}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.85) contrast(0.95)' }} />
              <img src={`assets/comparison/${c.slug}-new.png`} alt={`${c.label} v0.1.1`}
                className="ba-after"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
                  clipPath: 'polygon(100% 0, 100% 100%, 0 100%)' /* bottom-right triangle = AFTER */ }} />
              {/* Diagonal seam — top-right to bottom-left, matches clip-path edge */}
              <div style={{ position: 'absolute', bottom: 0, left: 0, width: '141%', height: 2, background: 'rgba(255,179,71,0.8)',
                transformOrigin: '0 100%', transform: 'rotate(-45deg)', pointerEvents: 'none', zIndex: 3,
                boxShadow: '0 0 10px rgba(255,179,71,0.6)' }} />
              {/* Labels */}
              <div style={{ position: 'absolute', top: 8, left: 10, fontSize: 9, color: '#b87a2e',
                letterSpacing: '0.2em', zIndex: 4, fontFamily: '"JetBrains Mono",monospace' }}>BEFORE</div>
              <div style={{ position: 'absolute', bottom: 8, right: 10, fontSize: 9, color: t.amber,
                letterSpacing: '0.2em', zIndex: 4, fontFamily: '"JetBrains Mono",monospace',
                textShadow: '0 0 8px rgba(255,179,71,0.5)' }}>v0.1.1 ✓</div>
              {/* Caption strip */}
              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0,
                padding: '6px 10px', fontSize: 10, color: t.cream, letterSpacing: '0.15em',
                background: 'linear-gradient(transparent, rgba(0,0,0,0.85))', zIndex: 5, textAlign: 'center' }}>{c.label}</div>
              {/* Scanline */}
              <div style={{ position: 'absolute', inset: 0,
                background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px)',
                pointerEvents: 'none', zIndex: 6 }} />
            </div>
          ))}
        </div>
        <style>{`
          .ba-tile .ba-after { transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
          .ba-tile:hover .ba-after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
        `}</style>
      </div>
      {t.marqueeTicker && (
        <div style={{ marginTop: 24, overflow: 'hidden', border: `1px solid rgba(255,179,71,0.25)`, background: 'rgba(0,0,0,0.4)', padding: '10px 0', fontFamily: '"Oswald",sans-serif', letterSpacing: '0.18em', textTransform: 'uppercase', fontSize: 12 }}>
          <div className="marquee-track" style={{ display: 'inline-flex', gap: 36, whiteSpace: 'nowrap', paddingLeft: 36 }}>
            {[...Array(2)].map((_, k) => (
              <React.Fragment key={k}>
                <span style={{ color: t.amber }}>★ v1.0 · OUT OF EARLY ACCESS</span><span style={{ color: t.dim }}>•</span>
                <span>MANAGE CAFFEINE · DON'T OVERDOSE</span><span style={{ color: t.dim }}>•</span>
                <span>7 FLOORS · 4 BARISTAS · 30-AFFIX LOOT POOL</span><span style={{ color: t.dim }}>•</span>
                <span style={{ color: t.accentMagenta }}>ENDLESS MODE + DAILY CHALLENGES</span><span style={{ color: t.dim }}>•</span>
                <span style={{ color: '#c9b896' }}>FACTION GEAR · LEGENDARIES · SKILL TREE</span><span style={{ color: t.dim }}>•</span>
                <span style={{ color: t.accentCyan }}>EN · DE · PT-BR · KO · JP · 5 LOCALES</span><span style={{ color: t.dim }}>•</span>
                <span style={{ color: t.accentMagenta }}>WIN / MAC / LINUX · GODOT 4 · WORKSHOP MODS</span><span style={{ color: t.dim }}>•</span>
                <span>7 AGENTS · 1 HUMAN</span><span style={{ color: t.dim }}>•</span>
                <span style={{ color: t.amber }}>BUY NOW ON STEAM</span><span style={{ color: t.dim }}>•</span>
                <span style={{ color: t.accentCyan }}>PATCH NOTES ▸ /updates</span><span style={{ color: t.dim }}>•</span>
              </React.Fragment>
            ))}
          </div>
        </div>
      )}
    </CrtSection>
  );
}

function CrtPressKit() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  if (!t.showPressKit) return null;
  return (
    <CrtSection id="press" tag="S06 :: PRESS" title="PRESS KIT · cat /presskit.txt">
      <div style={{ display: 'grid', gridTemplateColumns: bp.isTablet ? '1fr' : '1.2fr 1fr', gap: 32 }}>
        <div style={{ border: `1px solid rgba(255,179,71,0.3)`, padding: 24, fontSize: 13, lineHeight: 1.85, background: 'rgba(0,0,0,0.4)' }}>
          <div style={{ color: '#6e5a44', borderBottom: '1px dashed rgba(255,179,71,0.2)', paddingBottom: 8, marginBottom: 12 }}>─── fact_sheet.txt ───</div>
          <div style={{ display: 'grid', gridTemplateColumns: '130px 1fr', gap: '6px 20px' }}>
            <Dim>TITLE:</Dim><Cream>Death Before Decaf</Cream>
            <Dim>STUDIO:</Dim><Cream>Overdose Interactive</Cream>
            <Dim>GENRE:</Dim><Cream>Auto-combat Roguelite · Resource Management</Cream>
            <Dim>PLATFORM:</Dim><Cream>PC · Windows / macOS / Linux</Cream>
            <Dim>ENGINE:</Dim><Cream>Godot 4 · GDScript</Cream>
            <Dim>RELEASE:</Dim><Amber>v1.0 · Out of Early Access</Amber>
            <Dim>PRICE:</Dim><Cream>Available on Steam</Cream>
            <Dim>TEAM:</Dim><Cream>7 AI agents · 1 human in the loop</Cream>
            <Dim>CONTACT:</Dim><span style={{ color: t.accentCyan }}>press@deathbeforedecaf.gg</span>
            <Dim>EMBARGO:</Dim><span style={{ color: t.accentMagenta }}>None. Stream it. Break it. Post it.</span>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <a href="/press" style={{ textDecoration: 'none' }}>
            <div style={{ border: `1px solid ${t.amber}`, padding: '14px 18px', fontSize: 13, color: t.amber, letterSpacing: '0.06em', background: 'rgba(255,179,71,0.06)' }}>▸ FULL PRESS KIT → /press</div>
          </a>
          {[
            { icon: '◼', label: 'discord.gg/deathbeforedecaf', href: 'https://discord.gg/deathbeforedecaf' },
            { icon: '◼', label: 'x.com / @DrinkB4Decaf', href: 'https://x.com/DrinkB4Decaf' },
            { icon: '◼', label: 'tiktok.com / @DrinkB4Decaf', href: 'https://tiktok.com/@DrinkB4Decaf' },
            { icon: '◼', label: 'key_requests → press@deathbeforedecaf.gg', href: 'mailto:press@deathbeforedecaf.gg', cyan: true },
          ].map((l, i) => (
            <a key={i} href={l.href} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
              <div style={{ border: `1px solid rgba(255,179,71,0.3)`, padding: '13px 18px', fontSize: 13, color: l.cyan ? t.accentCyan : '#c9b896', letterSpacing: '0.05em', background: 'rgba(255,179,71,0.03)', cursor: 'pointer' }}>{l.icon} {l.label}</div>
            </a>
          ))}
        </div>
      </div>
    </CrtSection>
  );
}

function CrtCta() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  return (
    <section style={{ padding: `90px ${bp.isMobile ? 20 : 56}px`, textAlign: 'center', borderBottom: `1px solid rgba(255,179,71,0.2)`, background: 'radial-gradient(ellipse at center, rgba(255,179,71,0.12), transparent 70%)' }}>
      <Dim style={{ fontSize: 12, letterSpacing: '0.25em' }}>&gt;&gt; v1.0 · OUT OF EARLY ACCESS · ON STEAM NOW</Dim>
      <div style={{ fontFamily: '"Oswald",sans-serif', fontSize: 52, fontWeight: 700, color: t.amber, letterSpacing: '0.02em', margin: '14px 0 10px', textShadow: `0 0 40px rgba(255,179,71,0.4)` }}>DEATH BEFORE DECAF</div>
      <Cream style={{ fontSize: 15, display: 'block', marginBottom: 8 }}>Auto-combat roguelite. 7 floors. 4 baristas. Skill tree, faction gear, endless mode. Don't overdose.</Cream>
      <Dim style={{ fontSize: 13, display: 'block', marginBottom: 6 }}>Full release. Available now on Steam.</Dim>
      <Dim style={{ fontSize: 11, display: 'block', marginBottom: 28, letterSpacing: '0.1em' }}>EN · DE · PT-BR · KO · JP · WIN · MAC · LINUX</Dim>
      <CrtButton variant="primary" href="https://store.steampowered.com/app/4673590/Death_Before_Decaf/">▸ BUY ON STEAM</CrtButton>
    </section>
  );
}

function CrtFooter() {
  const bp = window.useBreakpoint();
  return (
    <footer style={{ padding: `40px ${bp.isMobile ? 20 : 56}px 32px`, fontSize: 12, color: '#6e5a44' }}>
      <div style={{ display: 'grid', gridTemplateColumns: bp.isNarrow ? '1fr' : '2fr 1fr 1fr', gap: 48, marginBottom: 32 }}>
        <div>
          <div style={{ color: window.TWEAKS.amber, letterSpacing: '0.15em', marginBottom: 6 }}>OVERDOSE INTERACTIVE</div>
          <Dim>seven agents · one human · one game. the first commercial title from a structured team of AI specialists. built in parallel. shipped on steam.</Dim>
        </div>
        <div>
          <Dim style={{ letterSpacing: '0.15em', marginBottom: 6, display: 'block' }}>LINKS</Dim>
          {[
            { l: 'Steam', href: 'https://store.steampowered.com/app/4673590/Death_Before_Decaf/' },
            { l: 'Discord', href: 'https://discord.gg/deathbeforedecaf' },
            { l: 'X / @DrinkB4Decaf', href: 'https://x.com/DrinkB4Decaf' },
            { l: 'TikTok / @DrinkB4Decaf', href: 'https://tiktok.com/@DrinkB4Decaf' },
            { l: 'Press', href: '/press' },
          ].map((x) => <div key={x.l} style={{ color: '#c9b896' }}>&gt; <a href={x.href} style={{ color: '#c9b896', textDecoration: 'none' }}>{x.l}</a></div>)}
        </div>
        <div>
          <Dim style={{ letterSpacing: '0.15em', marginBottom: 6, display: 'block' }}>CONTACT</Dim>
          <div style={{ color: '#c9b896' }}>press@deathbeforedecaf.gg</div>
          <div style={{ color: '#c9b896' }}>discord.gg/deathbeforedecaf</div>
        </div>
      </div>
      <div style={{ borderTop: '1px dashed rgba(255,179,71,0.2)', paddingTop: 14, display: 'flex', justifyContent: 'space-between' }}>
        <span>© 2026 Overdose Interactive. caffeine-related incidents are your problem.</span>
        <span>build 0.5.0-ea</span>
      </div>
    </footer>
  );
}

function CrtCodex() {
  const t = window.TWEAKS;
  return (
    <CrtSection id="codex" tag="S07 :: COFFEESHOP_CODEX" title="COFFEESHOP CODEX · READ THE LORE">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center', border: `1px solid rgba(255,179,71,0.3)`, padding: '28px 32px', background: 'rgba(0,0,0,0.4)' }}>
        <div>
          <div style={{ fontFamily: '"Oswald",sans-serif', color: t.cream, fontSize: 18, letterSpacing: '0.04em', marginBottom: 10 }}>
            Every enemy has a lore entry. Every upgrade has a reason. Every crash leaves a note.
          </div>
          <div style={{ fontSize: 13, color: '#a88250', letterSpacing: '0.06em' }}>
            The Coffeeshop Codex documents the Zone — its factions, its physics, its casualties.
          </div>
        </div>
        <a href="https://lore.deathbeforedecaf.gg" target="_blank" rel="noopener" style={{ textDecoration: 'none', flexShrink: 0 }}>
          <div style={{
            border: `1px solid ${t.amber}`,
            padding: '14px 24px',
            fontFamily: '"Oswald",sans-serif',
            fontSize: 14,
            color: t.amber,
            letterSpacing: '0.14em',
            background: 'rgba(255,179,71,0.06)',
            whiteSpace: 'nowrap',
            cursor: 'pointer',
          }}>
            ENTER CODEX →
          </div>
        </a>
      </div>
    </CrtSection>
  );
}

Object.assign(window, { CrtRoster, CrtDevLog, CrtPressKit, CrtCodex, CrtCta, CrtFooter });