// screen-briefing.jsx
// Opening menu / mission briefing screen for SYLLABUS://OVERRIDE.

const { useState, useEffect } = React;

function BriefingScreen({ onLaunch, onResources }) {
  const [bootStep, setBootStep] = useState(0);
  const bootLines = [
    '> ESTABLISHING UPLINK …',
    '> HANDSHAKE [OK]',
    '> ROUTING THROUGH NODE/INFO-I-399',
    '> SECURITY CLEARANCE: TIER-3',
    '> MISSION PACKET DECRYPTED.',
  ];

  useEffect(() => {
    if (bootStep < bootLines.length) {
      const t = setTimeout(() => setBootStep(bootStep + 1), 380);
      return () => clearTimeout(t);
    }
  }, [bootStep]);

  return (
    <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 0, minHeight: 0 }}>
      {/* LEFT — Title + brief */}
      <div style={{ padding: '48px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative' }}>
        <div className="scan-line" style={{ animationDelay: '2s' }} />

        <div>
          <div className="chip chip-magenta" style={{ marginBottom: 24 }}>
            ◆ CLASSIFIED // SQUAD MISSION
          </div>

          <h1 className="t-display glow-cyan" style={{ fontSize: 72, lineHeight: .95, letterSpacing: '0.02em', marginBottom: 4 }}>
            SYLLABUS<span style={{ color: 'var(--neon-magenta)', textShadow: '0 0 12px rgba(255,45,149,.6)' }}>://</span>
          </h1>
          <h1 className="t-display glow-magenta flicker" style={{ fontSize: 96, lineHeight: .9, color: 'var(--neon-magenta)', letterSpacing: '0.04em' }}>
            OVERRIDE
          </h1>

          <div style={{ marginTop: 32, maxWidth: 540, color: 'var(--ink-80)', fontSize: 14, lineHeight: 1.7 }}>
            The Academy mainframe at <b style={{ color: 'var(--neon-cyan)' }}>NODE/INFO-I-399</b> is broadcasting in clear.
            Every policy, every deadline, every consequence — encoded in the public datastream.
            You and your squad have <b style={{ color: 'var(--neon-yellow)' }}>15 minutes</b> to extract intel
            before the firewall locks. Sync up. Decode. Override.
          </div>
        </div>

        {/* Boot terminal */}
        <div style={{ background: 'rgba(0,0,0,.4)', border: '1px solid rgba(0,234,255,.2)', padding: '16px 20px', fontFamily: 'JetBrains Mono, monospace', fontSize: 12, lineHeight: 1.9, color: 'var(--neon-lime)', minHeight: 144, marginTop: 32 }}>
          {bootLines.slice(0, bootStep).map((line, i) => (
            <div key={i} style={{ opacity: .85 }}>{line}</div>
          ))}
          {bootStep >= bootLines.length && (
            <div style={{ marginTop: 8, color: 'var(--neon-cyan)' }}>
              {'>'} READY FOR SQUAD ASSEMBLY<span style={{ animation: 'pulse 1s infinite' }}>_</span>
            </div>
          )}
        </div>
      </div>

      {/* RIGHT — Briefing panels */}
      <div style={{ padding: '48px 56px 48px 0', display: 'flex', flexDirection: 'column', gap: 16, overflow: 'auto' }}>
        <div className="panel" style={{ padding: '20px 24px' }}>
          <div className="chip" style={{ marginBottom: 12 }}>◇ OBJECTIVE</div>
          <div style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--ink-80)' }}>
            Run three encrypted protocols. Each tests your squad's mastery of the syllabus.
            Score above <b style={{ color: 'var(--neon-cyan)' }}>1500 XP</b> to unlock the term.
          </div>
        </div>

        <div className="panel panel-magenta" style={{ padding: '20px 24px' }}>
          <div className="chip chip-magenta" style={{ marginBottom: 12 }}>◇ PROTOCOLS</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 13 }}>
            <ProtocolRow num="01" name="DATASTREAM DECODE" desc="Triage truth-packets vs corruption. Sync = combo." color="var(--neon-cyan)" />
            <ProtocolRow num="02" name="DEADLINE HEIST" desc="Slot calendar nodes into their week before lockout." color="var(--neon-magenta)" />
            <ProtocolRow num="03" name="POLICY FIREWALL" desc="Choose the policy-correct action under fire." color="var(--neon-yellow)" />
          </div>
        </div>

        <div className="panel" style={{ padding: '20px 24px' }}>
          <div className="chip chip-yellow" style={{ marginBottom: 12 }}>◇ NEURAL OVERCLOCK</div>
          <div style={{ fontSize: 12, lineHeight: 1.6, color: 'var(--ink-80)' }}>
            When 3+ teammates submit the same answer within <b style={{ color: 'var(--neon-yellow)' }}>800ms</b>,
            the squad enters <b style={{ color: 'var(--neon-yellow)' }}>SYNC STATE</b> — combo multiplier triples.
            Talk to your team. Lone wolves lose.
          </div>
        </div>

        <button className="btn btn-primary" onClick={onLaunch} style={{ marginTop: 'auto', alignSelf: 'flex-start' }}>
          ► BEGIN BRIEFING
        </button>
        {onResources && (
          <button onClick={onResources} className="t-mono"
            style={{
              marginTop: 12, alignSelf: 'flex-start', background: 'transparent',
              border: '1px solid rgba(255,45,149,.4)', color: 'var(--neon-magenta)',
              padding: '8px 14px', fontSize: 11, letterSpacing: '0.16em',
              cursor: 'pointer', textTransform: 'uppercase',
            }}>
            ◢ NEED HELP? ACCESS SUPPORT_NET
          </button>
        )}
      </div>
    </div>
  );
}

function ProtocolRow({ num, name, desc, color }) {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
      <div style={{ fontFamily: 'Orbitron', fontWeight: 800, fontSize: 28, color, lineHeight: 1, minWidth: 44 }}>{num}</div>
      <div style={{ flex: 1 }}>
        <div className="t-display" style={{ fontSize: 13, color: 'var(--ink-100)', letterSpacing: '0.08em', marginBottom: 4 }}>{name}</div>
        <div style={{ fontSize: 11, color: 'var(--ink-60)', lineHeight: 1.5 }}>{desc}</div>
      </div>
    </div>
  );
}

window.BriefingScreen = BriefingScreen;