// --- Sections: Stats, About, Schedule, Games, VODs, Chat, Socials ---

function StatsRow() {
  return (
    <div className="stats">
      {GRANDPA.stats.map((s, i) => (
        <div className="cell" key={i}>
          <div className="num">{s.num}</div>
          <div className="lbl">{s.lbl}</div>
        </div>
      ))}
    </div>
  );
}

function About() {
  // Pension progress bar (blocks)
  const totalBlocks = 20;
  // Real age 38 -> retirement 65, 27 years left
  const pct = Math.max(0, Math.min(1, (GRANDPA.realAge - 20) / (65 - 20)));
  const filled = Math.max(0, Math.min(totalBlocks, Math.round(pct * totalBlocks)));
  const bar = '█'.repeat(filled) + '░'.repeat(totalBlocks - filled);
  return (
    <>
      <SectionHeader id="about" kicker="cat /etc/grandpa.conf" title="ΠΟΙΟΣ ΕΙΝΑΙ Ο ΠΑΠΠΟΥΣ" />
      <div className="about-grid">
        <div className="id-card">
          <h3 className="amber" style={{marginBottom:14}}>◉ ID CARD</h3>
          <div className="row"><span className="k">όνομα</span><span className="v">{GRANDPA.name}</span></div>
          <div className="row"><span className="k">πραγματ. ηλικία</span><span className="v">{GRANDPA.realAge}</span></div>
          <div className="row"><span className="k">ηλικία ψυχής</span><span className="v">{GRANDPA.personaAge}+</span></div>
          <div className="row"><span className="k">status</span><span className="v">στο κάτεργο</span></div>
          <div className="row"><span className="k">διάθεση</span><span className="v">ήρεμη γκρίνια</span></div>
          <div className="row"><span className="k">θεραπεία</span><span className="v">streaming</span></div>
          <div className="row"><span className="k">καύσιμο</span><span className="v">ελληνικός καφές</span></div>

          <div style={{marginTop:18}}>
            <div className="mono-sm" style={{marginBottom:4}}>πρόοδος προς σύνταξη:</div>
            <div className="pension-bar">[{bar}]</div>
            <div className="mono-sm">μένουν <span className="amber" style={{textShadow:'0 0 4px var(--amber)'}}>{GRANDPA.years_until_retirement} χρόνια</span></div>
          </div>
        </div>

        <div>
          <p style={{fontSize:26, lineHeight:1.5}}>
            Είμαι ο παππούς. Στα χαρτιά <span className="bright">38</span>, αλλά στην ψυχή έχω
            πατήσει τα <span className="amber">70</span>.
          </p>
          <p style={{fontSize:22}}>
            Μέχρι στιγμής το <span className="amber">κάτεργο</span> δεν επιτρέπει τα προγραμματισμένα streams,
            αλλά μια στο τόσο θα γίνεται <span className="bright">«η φασούλα»</span> — έτσι, για την ψυχοθεραπεία.
          </p>
          <div className="note" style={{marginTop:16}}>
            MISSION: <span className="amber">ψυχοθεραπεία μέσω streaming · αντίστροφη μέτρηση για σύνταξη</span>
          </div>

          <h3 style={{marginTop:26}}>◉ RULES OF THE ΚΑΦΕΝΕΙΟ</h3>
          <ul className="mono" style={{paddingLeft:20, textShadow:'none', lineHeight:1.9}}>
            <li><span className="amber">01.</span> Σεβασμός στον παππού και στο chat.</li>
            <li><span className="amber">02.</span> Όχι spoilers — ο παππούς ξεχνάει εύκολα.</li>
            <li><span className="amber">03.</span> Ελληνικά ή Αγγλικά — όλα καλά.</li>
            <li><span className="amber">04.</span> Χωρίς πολιτικά. Το κάτεργο αρκεί.</li>
          </ul>
        </div>
      </div>
    </>
  );
}

function Schedule() {
  return (
    <>
      <SectionHeader id="schedule" kicker="crontab -l  # irregular" title="ΠΟΤΕ ΓΙΝΕΤΑΙ Η ΦΑΣΟΥΛΑ" />
      <div className="note" style={{marginBottom:14}}>
        Το κάτεργο δεν επιτρέπει προγραμματισμένα streams. Μια στο τόσο όμως, <span className="amber">γίνεται η φασούλα</span> — follow στο Twitch + join στο Discord για να δεις ειδοποίηση.
      </div>
      <div className="pixel-box" style={{padding:0}}>
        <div style={{display:'grid', gridTemplateColumns:'80px 110px 1fr', fontFamily:'var(--font-mono)', fontSize:14, textShadow:'none'}}>
          {GRANDPA.schedule.map((row, i) => (
            <React.Fragment key={i}>
              <div style={{padding:'12px 14px', borderBottom: i===6 ? 'none' : '1px dashed var(--ink-faint)', color:'var(--amber)', textShadow:'0 0 4px var(--amber)'}}>{row.day}</div>
              <div style={{padding:'12px 14px', borderBottom: i===6 ? 'none' : '1px dashed var(--ink-faint)', color:'var(--ink-bright)'}}>{row.time}</div>
              <div style={{padding:'12px 14px', borderBottom: i===6 ? 'none' : '1px dashed var(--ink-faint)', color:'var(--ink-dim)'}}>{row.note}</div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </>
  );
}

function Games() {
  return (
    <>
      <SectionHeader id="games" kicker="ls ~/games/" title="ΠΑΙΧΝΙΔΙΑ ΠΟΥ ΠΑΙΖΩ" />
      <div className="grid grid-3">
        {GAMES.map((g, i) => (
          <div className="game-card" key={i}>
            <div className="thumb">[ {g.title.toUpperCase()} ]</div>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <div style={{fontSize:22, color:'var(--ink-bright)'}}>{g.title}</div>
              <Stars n={g.stars} />
            </div>
            <div className="mono-sm" style={{marginTop:4}}>
              <span className="amber">{g.hrs}h</span> <span className="dim">streamed</span>
            </div>
            <div className="mono" style={{color:'var(--ink)', textShadow:'none', marginTop:8}}>› {g.tag}</div>
          </div>
        ))}
      </div>
    </>
  );
}

function Vods() {
  return (
    <>
      <SectionHeader id="vods" kicker="cat ~/vods/recent" title="ΠΡΟΣΦΑΤΑ VODS" />
      <div className="grid grid-2">
        {VODS.map((v, i) => (
          <div className="vod" key={i}>
            <div className="thumb">
              <div className="play"></div>
              <div className="dur">{v.dur}</div>
            </div>
            <div className="meta">
              <div className="ttl">{v.title}</div>
              <div className="sub"><span className="amber">{v.views}</span> views · {v.when}</div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function ChatReplay() {
  const [msgs, setMsgs] = useState(() => CHAT_MSGS.slice(0, 6));
  useEffect(() => {
    let i = 6;
    const id = setInterval(() => {
      setMsgs(prev => {
        const next = CHAT_MSGS[i % CHAT_MSGS.length];
        const arr = [...prev, { ...next, _id: Math.random() }];
        if (arr.length > 10) arr.shift();
        return arr;
      });
      i++;
    }, 1800);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="chat">
      <div className="chat-head">
        <span>#chat · greekgrandpa</span>
        <span><span className="red" style={{textShadow:'none'}}>●</span> REPLAY</span>
      </div>
      <div className="chat-body">
        {msgs.map((m, i) => (
          <div className="msg" key={m._id ?? i}>
            <span className="user" style={{color: m.c}}>{m.u}:</span>
            <span style={{color:'var(--ink-bright)'}}>{m.t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Projects() {
  const projects = [
    {
      title: 'PAPPOUDOBOT',
      sub: 'Twitch chat bot · κουμάντο στο chat',
      desc: 'Ο μικρός βοηθός του παππού: commands, alerts και δουλίτσες για το stream.',
      href: 'http://pappoudobot.greekgrandpa.gr/',
      tag: 'BOT',
      art: (
        <div className="proj-art">
          <div className="bot-head">
            <div className="bot-eye"></div>
            <div className="bot-eye"></div>
          </div>
          <div className="bot-mouth">▮▮▮▮▮</div>
          <div className="bot-ant"></div>
        </div>
      ),
    },
    {
      title: 'JACKBOX-STYLE GAME',
      sub: 'Παιχνίδι για το stream · παίζεις με τον παππού',
      desc: 'Σύνδεσε το κινητό σου, μπες στο lobby και παίξε ζωντανά μαζί με το chat.',
      href: 'https://jackbox.greekgrandpa.gr/',
      tag: 'GAME',
      art: (
        <div className="proj-art">
          <div className="ctrl-d-pad">
            <span></span><span></span><span></span><span></span>
          </div>
          <div className="ctrl-btns">
            <span className="b-a">A</span>
            <span className="b-b">B</span>
          </div>
        </div>
      ),
    },
  ];
  return (
    <>
      <SectionHeader id="projects" kicker="ls ~/projects/" title="ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ STREAM" />
      <div className="grid grid-2">
        {projects.map((p, i) => (
          <a className="proj-card" key={i} href={p.href} target="_blank" rel="noreferrer">
            <div className="proj-tag">{p.tag}</div>
            <div className="proj-body">
              {p.art}
              <div className="proj-text">
                <div className="proj-title">{p.title}</div>
                <div className="proj-sub">{p.sub}</div>
                <div className="proj-desc">{p.desc}</div>
                <div className="proj-link">OPEN <span className="arr">▸</span></div>
              </div>
            </div>
          </a>
        ))}
      </div>
    </>
  );
}

function Socials() {
  return (
    <>
      <SectionHeader id="socials" kicker="find / -name social" title="ΠΟΥ ΘΑ ΜΕ ΒΡΕΙΣ" />
      <div className="grid grid-3">
        {SOCIALS.map((s, i) => (
          <a className="social-card" key={i} href={s.href}>
            <div className="ico">{s.ico}</div>
            <div>
              <div className="bright" style={{fontSize:14, textShadow:'none'}}>{s.label}</div>
              <div className="dim" style={{fontSize:11}}>{s.handle}</div>
            </div>
          </a>
        ))}
      </div>
    </>
  );
}

Object.assign(window, { StatsRow, About, Schedule, Games, Projects, Vods, ChatReplay, Socials });