// ============ ABOUT + NOW + GH ACTIVITY ============
function About() {
  const { t } = window.useLang();
  const ref = window.useReveal();
  const [events, setEvents] = React.useState(null);
  const [err, setErr] = React.useState(false);

  React.useEffect(() => {
    let alive = true;
    fetch('https://api.github.com/users/AngeloVPerrotta/events/public')
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(data => {
        if (!alive) return;
        const pushes = (data || []).filter(e => e.type === 'PushEvent').slice(0, 4).map(e => ({
          repo: e.repo?.name || '',
          msg: e.payload?.commits?.[0]?.message?.split('\n')[0] || 'push',
          when: relTime(e.created_at)
        }));
        if (pushes.length === 0) throw new Error('no events');
        setEvents(pushes);
      })
      .catch(() => { if (alive) setErr(true); });
    return () => { alive = false; };
  }, []);

  const display = events || (err ? window.GH_MOCK : null);

  return (
    <section id="about" ref={ref}>
      <div className="container">
        <div className="fade-up">
          <span className="kicker">{t.about.kicker}</span>
          <h2 className="section-title">{t.about.h2}</h2>
        </div>
        <div className="about-grid" style={{marginTop: 40}}>
          <div className="about-bio fade-up d1">
            {t.about.paragraphs.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <div className="now-card glass-strong fade-up d2">
            <h3><span className="dot" /> {t.about.nowTitle}</h3>
            <ul className="now-list">
              {t.about.now.map((it, i) => (
                <li key={i}><span className="ico">{it.icon}</span><span>{it.label}</span></li>
              ))}
            </ul>
            <div className="gh-card">
              <h4>{t.about.ghTitle}</h4>
              {display ? display.map((e, i) => (
                <div key={i} className="gh-row">
                  <div>
                    <span className="repo">{e.repo}</span>
                    <span className="msg">› {e.msg}</span>
                  </div>
                  <span className="when">{e.when}</span>
                </div>
              )) : err ? (
                <div className="gh-row"><span className="msg">› GitHub took a coffee break</span></div>
              ) : (
                Array.from({length:3}).map((_,i)=>(
                  <div key={i} className="gh-row" style={{opacity:.4}}>
                    <div><span className="repo">···</span><span className="msg">› loading...</span></div>
                    <span className="when">···</span>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function relTime(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  const diff = (Date.now() - d.getTime()) / 1000;
  if (diff < 60) return 'hace segundos';
  if (diff < 3600) return `hace ${Math.floor(diff/60)} min`;
  if (diff < 86400) return `hace ${Math.floor(diff/3600)} h`;
  return `hace ${Math.floor(diff/86400)} d`;
}

window.About = About;