/* Top bar, hero, reusable section header */
function CrtTopBar() {
  const t = window.TWEAKS;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', borderBottom: `1px solid rgba(255,179,71,0.25)`,
      padding: '10px 28px', fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase',
      background: 'rgba(0,0,0,0.4)', position: 'sticky', top: 0, zIndex: 50, backdropFilter: 'blur(4px)',
    }}>
      <Amber>{t.terminalPrompt}</Amber>
      <Cream style={{ marginLeft: 8 }}>deathbeforedecaf.gg</Cream>
      <span style={{ marginLeft: 40, display: 'flex', gap: 24 }}>
        <a href="#trailer"><Dim>[F0] TRAILER</Dim></a>
        <a href="#mechanic"><Dim>[F1] MECHANIC</Dim></a>
        <a href="#floors"><Dim>[F2] FLOORS</Dim></a>
        <a href="#cast"><Dim>[F3] CAST</Dim></a>
        <a href="#log"><Dim>[F4] LOG</Dim></a>
        <a href="#press"><Dim>[F5] PRESS</Dim></a>
        <a href="/updates"><Dim>[F6] UPDATES</Dim></a>
      </span>
      <span style={{ marginLeft: 'auto', display: 'flex', gap: 20, alignItems: 'center' }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 8, height: 8, background: t.accentCyan, boxShadow: `0 0 8px ${t.accentCyan}`, display: 'inline-block' }} />
          <Cyan>ONLINE</Cyan>
        </span>
      </span>
    </div>
  );
}

function CrtCorners() {
  const s = { position: 'absolute', width: 18, height: 18, borderColor: window.TWEAKS.amber, borderStyle: 'solid', zIndex: 3 };
  return (
    <>
      <span style={{ ...s, top: 10, left: 10, borderWidth: '2px 0 0 2px' }} />
      <span style={{ ...s, top: 10, right: 10, borderWidth: '2px 2px 0 0' }} />
      <span style={{ ...s, bottom: 10, left: 10, borderWidth: '0 0 2px 2px' }} />
      <span style={{ ...s, bottom: 10, right: 10, borderWidth: '0 2px 2px 0' }} />
    </>
  );
}

function CrtTitle() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  return (
    <h1 className="crt-title" style={{
      fontFamily: '"Oswald","Impact",sans-serif', fontWeight: 700,
      fontSize: (bp.isMobile ? 72 : bp.isTablet ? 96 : 120) * t.fontScale, lineHeight: 0.88, letterSpacing: '-0.02em',
      textTransform: 'uppercase', color: t.amber, margin: '0 0 22px',
      textShadow: `0 0 30px rgba(255,179,71,0.45), 0 0 70px rgba(255,179,71,0.22), 2px 0 0 ${t.accentMagenta}, -2px 0 0 ${t.accentCyan}`,
    }}>
      DEATH<br/>BEFORE<br/>DECAF
    </h1>
  );
}

function CrtHero() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  const isStack = t.heroLayout === 'stacked' || bp.isTablet;
  const isCentered = t.heroLayout === 'centered';

  const copy = {
    sardonic: { tag: '> coffee makes you stronger. until it doesn\'t._', lede: "Auto-combat roguelite. You manage a caffeine meter — too little and you slow to a crawl, too much and your heart resigns. Three floors of coffee-corrupted enemies stand between you and the exit." },
    terse: { tag: '> one more cup._', lede: "Auto-combat roguelite. Coffee is your weapon. Your metabolism is the enemy. Three floors. One exit. Don't overdose." },
    dramatic: { tag: '> manage caffeine. fight auto-battles. don\'t die of it._', lede: "A roguelite where combat runs itself and caffeine management is the skill. Drink too little: slow and weak. Drink too much: six seconds of power, then cardiac arrest. Stack upgrades, clear three floors, survive the crash." },
  }[t.copyTone] || { tag: '> coffee makes you stronger. until it doesn\'t._', lede: "Auto-combat roguelite. You manage a caffeine meter — too little and you slow to a crawl, too much and your heart resigns." };

  return (
    <section style={{
      display: 'grid',
      gridTemplateColumns: isStack || isCentered ? '1fr' : '1.05fr 0.95fr',
      minHeight: 780,
      borderBottom: `1px solid rgba(255,179,71,0.2)`,
      position: 'relative',
      background: isCentered ? `linear-gradient(rgba(11,6,3,0.75), rgba(11,6,3,0.95)), url(assets/mira-hero.png) center/cover` : 'transparent',
    }}>
      <div style={{
        padding: `${bp.isTablet ? 32 : 56}px ${bp.isMobile ? 20 : 56}px ${bp.isTablet ? 32 : 48}px`,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        textAlign: isCentered ? 'center' : 'left',
        alignItems: isCentered ? 'center' : 'stretch',
        maxWidth: isCentered ? 900 : 'none',
        margin: isCentered ? '0 auto' : 0,
      }}>
        <div style={{ marginBottom: 18, display: 'flex', gap: 14, alignItems: 'center', justifyContent: isCentered ? 'center' : 'flex-start', flexWrap: 'wrap' }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 10px',
            border: `1px solid ${t.accentMagenta}`, color: t.accentMagenta,
            fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            <span style={{ width: 6, height: 6, background: t.accentMagenta, boxShadow: `0 0 8px ${t.accentMagenta}` }} />
            v1.0 · OUT NOW
          </span>
          <Dim style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>OUT OF EARLY ACCESS</Dim>
        </div>

        <CrtTitle />

        <div style={{ maxWidth: 520, marginBottom: 28 }}>
          <div style={{ color: t.amber, fontSize: 17, marginBottom: 14, fontStyle: 'italic' }}>
            {copy.tag}<span className="cursor-blink" style={{ display: 'inline-block', width: 10, height: 16, background: t.amber, marginLeft: 4, verticalAlign: 'middle' }} />
          </div>
          <div style={{ color: t.cream, fontSize: 15, lineHeight: 1.6 }}>{copy.lede}</div>
        </div>

        <div style={{ display: 'flex', gap: 16, marginBottom: 22, flexWrap: 'wrap', justifyContent: isCentered ? 'center' : 'flex-start' }}>
          <CrtButton variant="primary" href="https://store.steampowered.com/app/4673590/Death_Before_Decaf/">▸ BUY ON STEAM</CrtButton>
          <CrtButton variant="ghost" href="https://discord.gg/7MHE5ubMc">▸ JOIN DISCORD</CrtButton>
        </div>

        <Dim style={{ fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          WIN / MAC / LINUX · v1.0 · 7 floors · 4 baristas · EN/DE/PT-BR/KO/JP
        </Dim>

        <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 6, maxWidth: 520 }}>
          <div style={{ fontSize: 10, color: '#6e5a44', letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 4 }}>&gt; WHAT'S IN v1.0</div>
          {[
            { color: t.accentCyan,   v: 'v0.6–v0.8', text: '3 new floors, 3 new bosses — Cold Storage, The Undergrinds, The Bloom Works' },
            { color: '#c9b896',       v: 'v0.9', text: 'Linux + macOS · controller rumble · Steam Workshop mods' },
            { color: t.accentMagenta, v: 'v1.0', text: '4 baristas · DE/PT-BR/KO/JP localization · 15 achievements' },
          ].map((b) => (
            <div key={b.v} style={{ display: 'flex', gap: 10, fontSize: 12, color: '#c9b896', alignItems: 'baseline' }}>
              <span style={{ color: b.color, fontFamily: '"JetBrains Mono",monospace', fontSize: 10, letterSpacing: '0.08em', flexShrink: 0 }}>{b.v}</span>
              <span style={{ color: '#6e5a44', flexShrink: 0 }}>◆</span>
              <span>{b.text}</span>
            </div>
          ))}
          <a href="/updates" style={{ textDecoration: 'none', marginTop: 4 }}>
            <span style={{ fontSize: 11, color: t.accentCyan, letterSpacing: '0.12em' }}>&gt; FULL PATCH NOTES →</span>
          </a>
        </div>

      </div>

      {!isStack && !isCentered && (
        <div style={{ position: 'relative', borderLeft: `1px solid rgba(255,179,71,0.2)`,
          background: `radial-gradient(ellipse at 60% 40%, rgba(255,179,71,0.12), transparent 60%), ${t.bg}`, overflow: 'hidden' }}>
          <CrtCorners />
          <CrtMiraFrame />
        </div>
      )}
      {isStack && (
        <div style={{ position: 'relative', padding: `0 ${bp.isMobile ? 0 : 56}px ${bp.isMobile ? 20 : 56}px`, minHeight: bp.isMobile ? 340 : 600 }}>
          <CrtMiraFrame />
        </div>
      )}
    </section>
  );
}

function CrtMiraFrame() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  const isPixel = t.miraFrame === 'pixel';
  const isPoster = t.miraFrame === 'poster';
  const isWindow = t.miraFrame === 'window';
  return (
    <div style={{
      position: 'absolute', inset: bp.isMobile ? 12 : 24,
      border: isPoster ? 'none' : `1px solid rgba(255,179,71,${isWindow ? 0.4 : 0.25})`,
      padding: isPoster ? 0 : 12,
      display: 'flex', flexDirection: 'column',
      background: isWindow ? 'rgba(0,0,0,0.6)' : 'transparent',
    }}>
      {!isPoster && (
        <div style={{ fontSize: 10, letterSpacing: '0.18em', color: t.amber, marginBottom: 8,
          display: 'flex', justifyContent: 'space-between' }}>
          <span>MIRA_VOLTA · PLAYABLE IN EA</span>
          <span style={{ color: t.accentCyan }}>● LIVE</span>
        </div>
      )}
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
        {/* trailer: pending v0.2 */}
        <img src="assets/mira-hero.png" alt="Mira Volta — Death Before Decaf"
          style={{ width: '100%', maxWidth: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 15%',
            filter: isPoster ? 'contrast(1.1) saturate(1.05)' : 'contrast(1.05) saturate(0.95)',
            imageRendering: isPixel ? 'pixelated' : 'auto' }} />
        {isPixel && (
          <div style={{ position: 'absolute', inset: 0,
            backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px)',
            mixBlendMode: 'multiply' }} />
        )}
        <div style={{ position: 'absolute', inset: 0, boxShadow: 'inset 0 0 80px rgba(0,0,0,0.6)' }} />
        <div style={{ position: 'absolute', left: 14, bottom: 14, fontSize: 11, color: t.cream }}>
          <div style={{ color: t.amber, letterSpacing: '0.12em' }}>MIRA VOLTA</div>
          <div style={{ color: '#a88250' }}>burns clean, crashes hard</div>
        </div>
        <div style={{ position: 'absolute', right: 14, bottom: 14, fontSize: 11, color: t.accentMagenta, textAlign: 'right', fontFamily: '"Oswald",sans-serif', letterSpacing: '0.08em' }}>
          <div style={{ fontSize: 9, color: '#a88250', letterSpacing: '0.2em', marginBottom: 2 }}>BPM</div>
          <div className="pulse-red" style={{ fontSize: 22, lineHeight: 1, color: t.accentMagenta }}>142</div>
        </div>
      </div>
    </div>
  );
}

function CrtButton({ children, variant, href }) {
  const t = window.TWEAKS;
  const box = t.buttonStyle === 'boxshadow';
  const line = t.buttonStyle === 'line';

  const styleP = {
    fontFamily: 'inherit', fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase',
    padding: '16px 24px',
    background: line ? 'transparent' : t.amber,
    color: line ? t.amber : t.bg,
    border: `1px solid ${t.amber}`,
    boxShadow: box ? `4px 4px 0 ${t.accentMagenta}, 0 0 24px rgba(255,179,71,0.4)` : 'none',
    cursor: 'pointer', fontWeight: 700,
    textDecoration: 'none', display: 'inline-block',
  };
  const styleG = {
    fontFamily: 'inherit', fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase',
    padding: '16px 24px', background: 'transparent', color: t.accentCyan,
    border: `1px solid ${t.accentCyan}`,
    boxShadow: box ? `4px 4px 0 rgba(91,232,212,0.25)` : 'none',
    cursor: 'pointer', fontWeight: 700,
    textDecoration: 'none', display: 'inline-block',
  };
  const style = variant === 'primary' ? styleP : styleG;

  if (href) {
    return <a href={href} target="_blank" rel="noopener noreferrer" style={style}>{children}</a>;
  }
  return <button style={style}>{children}</button>;
}

function CrtSection({ tag, title, children, bg, id }) {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();
  return (
    <section id={id} style={{ padding: `72px ${bp.isMobile ? 20 : 56}px`, borderBottom: `1px solid rgba(255,179,71,0.18)`, background: bg || 'transparent' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 28 }}>
        <Dim style={{ fontSize: 12, letterSpacing: '0.2em' }}>&gt; {tag}</Dim>
        <div style={{ flex: 1, height: 1, background: 'rgba(255,179,71,0.2)' }} />
        <Dim style={{ fontSize: 12, letterSpacing: '0.2em' }}>2026</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)',
      }}>{title}</h2>
      {children}
    </section>
  );
}

Object.assign(window, { CrtTopBar, CrtHero, CrtSection, CrtButton });