// --- Hero variants ---

function GrandpaSprite({ onSlash }) {
  const [slashing, setSlashing] = useState(false);
  const handle = () => {
    if (slashing) return;
    setSlashing(true);
    if (onSlash) onSlash();
    setTimeout(() => setSlashing(false), 380);
  };
  return (
    <div className={"grandpa-frame" + (slashing ? " slashing" : "")}>
      <img src={window.__resources ? window.__resources.grandpa : "assets/grandpa.png"} alt="GreekGrandpa with sword" onClick={handle} />
      <div style={{position:'absolute', bottom:8, left:8, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--ink-dim)', textShadow:'none'}}>
        [click sword]
      </div>
      <div style={{position:'absolute', top:8, right:8, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--amber)', textShadow:'0 0 4px var(--amber)'}}>
        HP 74/100
      </div>
    </div>
  );
}

/* ---- HERO A — terminal boot sequence ---- */
function HeroBoot({ live, onPlayGame }) {
  const lines = [
    '> BOOTING GREEKGRANDPA_OS v3.8.38',
    '> checking bones................ [CREAK OK]',
    '> loading caffeine.............. [FULL]',
    '> mounting /dev/pension......... [27y left]',
    '> initializing sword............ [+3 vs boss]',
    '> streaming daemon.............. ' + (live ? '[ONLINE — φασούλα!]' : '[κάτεργο ACTIVE]'),
    '> welcome to the γηροκομείο.',
    '',
  ];
  const [shown, setShown] = useState(0);
  useEffect(() => {
    if (shown >= lines.length) return;
    const t = setTimeout(() => setShown(s => s + 1), 240);
    return () => clearTimeout(t);
  }, [shown]);

  return (
    <div className="hero hero-boot pixel-box">
      <div className="grid grid-2" style={{alignItems:'center'}}>
        <div>
          <div className="boot-log">
            {lines.slice(0, shown).map((l, i) => (
              <div key={i} style={{color: l.includes('OK') || l.includes('FULL') || l.includes('ONLINE') ? 'var(--ink-bright)' : 'var(--ink)'}}>{l}</div>
            ))}
            {shown >= lines.length && (
              <div>
                <span className="amber">greekgrandpa@crt</span>
                <span>:</span>
                <span className="bright">~$</span>
                <span> stream </span>
                <span className="cursor blink"></span>
              </div>
            )}
          </div>

          {shown >= lines.length && (
            <>
              <h1 className="hero-title" style={{marginTop:22}}>
                <span className="sm">[NOW LOADING]</span>
                GREEK<br/>GRANDPA
              </h1>
              <p className="hero-sub">
                38 χρονών, ψυχή 70+. Το κάτεργο δεν αφήνει σταθερό stream —
                αλλά μια στο τόσο, γίνεται η φασούλα για ψυχοθεραπεία.
              </p>
              <div className="cta-row">
                <a className="btn" href="#vods">[F1] WATCH</a>
                <button className="btn amber" onClick={onPlayGame}>[F2] MINI-GAME</button>
                <a className="btn" href="#about">[F3] WHO?</a>
              </div>
            </>
          )}
        </div>

        <GrandpaSprite onSlash={() => {}} />
      </div>
    </div>
  );
}

/* ---- HERO B — arcade cabinet ---- */
function HeroArcade({ live, onPlayGame }) {
  return (
    <div className="hero hero-arcade">
      <div className="cabinet">
        <div className="marquee">★ GREEKGRANDPA ★ — INSERT COIN ★</div>
        <div className="screen">
          <div style={{textAlign:'center'}}>
            <div className="pixel-label amber" style={{marginBottom:10}}>⟁ HIGH SCORE ⟁</div>
            <div className="hero-title" style={{fontSize:36, margin:'4px 0'}}>GREEK<br/>GRANDPA</div>
            <div className="mono bright" style={{marginTop:14}}>LEVEL 70 — AGE {GRANDPA.realAge}</div>
            <div className="pixel-label blink" style={{marginTop:20, color:'var(--amber)'}}>▶ PRESS START ◀</div>
          </div>
        </div>
        <div className="controls">
          <div className="coin" title="insert coin"></div>
          <div className="joystick"></div>
          <div className="cabinet-btn"></div>
          <div className="cabinet-btn"></div>
          <div className="cabinet-btn"></div>
        </div>
      </div>

      <div>
        <h1 className="hero-title">
          <span className="sm">CHANNEL // PLAYER-1</span>
          Ο ΠΑΠΠΟΥΣ<br/>ΠΑΙΖΕΙ.
        </h1>
        <p className="hero-sub">
          Casual streamer, γκρινιάρης χαρακτήρας, καρδιά gamer.
          Το κάτεργο με κρατάει απασχολημένο, αλλά όταν μπορέσω —
          <span className="amber"> γίνεται η φασούλα</span> για ψυχοθεραπεία.
        </p>
        <div style={{margin:'18px 0'}}>
          <LivePill live={live} />
        </div>
        <div className="cta-row">
          <a className="btn" href="#vods">WATCH VODS</a>
          <button className="btn amber" onClick={onPlayGame}>PLAY MINI-GAME</button>
          <a className="btn" href="#socials">FOLLOW</a>
        </div>
        <div className="mono-sm" style={{marginTop:22}}>
          <span className="dim">tip ›</span> πάτα <span className="kbd">↑ ↑ ↓ ↓ ← → ← → B A</span> για έκπληξη
        </div>
      </div>
    </div>
  );
}

/* ---- HERO C — living room TV ---- */
function HeroLivingroom({ live, onPlayGame }) {
  return (
    <div className="hero hero-livingroom">
      <div>
        <div className="tv-frame">
          <GrandpaSprite />
        </div>
        <div className="tv-stand"></div>
        <div className="mono-sm dim" style={{textAlign:'center', marginTop:10}}>
          ─── καφενείο // σαλόνι παππού ───
        </div>
      </div>

      <div>
        <div className="pixel-label amber" style={{marginBottom:12}}>◉ REC // CH 04</div>
        <h1 className="hero-title">
          <span className="sm">POWERED BY COFFEE</span>
          ΣΤΟ<br/>ΚΑΦΕΝΕΙΟ<br/>ΤΟΥ ΠΑΠΠΟΥ.
        </h1>
        <p className="hero-sub">
          Ρίξε μια καρέκλα, πιάσε έναν καφέ. Ο παππούς δεν έχει σταθερό πρόγραμμα
          (το κάτεργο δεν αφήνει), αλλά μια στο τόσο κάθεται και <span className="amber">γίνεται η φασούλα</span> — για την ψυχοθεραπεία.
        </p>
        <div style={{display:'flex', gap:14, margin:'16px 0'}}>
          <LivePill live={live} />
          <span className="mono" style={{alignSelf:'center', color:'var(--ink-dim)', textShadow:'none'}}>
            SIG: ████████░░  82%
          </span>
        </div>
        <div className="cta-row">
          <a className="btn" href="#about">ΠΟΙΟΣ ΕΙΝΑΙ;</a>
          <a className="btn amber" href="#games">ΤΙ ΠΑΙΖΕΙ;</a>
          <button className="btn red" onClick={onPlayGame}>MINI-GAME</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HeroBoot, HeroArcade, HeroLivingroom, GrandpaSprite });