/* pages-info.jsx — About + Education + Experience */

function AboutPage() {
  const { t } = window.useI18n();
  return (
    <div className="content-inner">

      <div className="prompt-line">
        <span className="prompt-user">david</span>
        <span className="prompt-sep">@</span>
        <span className="prompt-host">fontanet</span>
        <span className="prompt-sep">:</span>
        <span className="prompt-path">~/about</span>
        <span className="prompt-dollar">$</span>
        <span className="prompt-cmd">cat</span>
        <span className="prompt-arg">about.md</span>
      </div>

      <h1>{t('about.title')}</h1>

      <div className="about-grid" style={{ marginTop: 28 }}>
        <div className="about-body">
          <p dangerouslySetInnerHTML={{ __html: t('about.intro') }}></p>
          <p dangerouslySetInnerHTML={{ __html: t('about.body1') }}></p>
          <p dangerouslySetInnerHTML={{ __html: t('about.body2') }}></p>
          <p dangerouslySetInnerHTML={{ __html: t('about.body3') }}></p>
        </div>

        <div className="neofetch" aria-label="neofetch">
<div className="ascii">{`         ___
        /   \\
       |  o  |
       |  |  |
       |  o  |
        \\___/
       __|_|__
      |       |
      |  []   |
      |       |
       \\_____/
       /     \\
      |_______|`}</div>
          <div className="info">
            <div className="nfhead">david@portfolio</div>
            <div className="nfsep">———————————————</div>
            <div className="row"><span className="k">{t('about.neofetch.os')}</span><span className="v">PortfolioOS 1.0 x86_64</span></div>
            <div className="row"><span className="k">{t('about.neofetch.host')}</span><span className="v">DavidFB MacBook (M-series)</span></div>
            <div className="row"><span className="k">{t('about.neofetch.kernel')}</span><span className="v">david-5.18.2-curiosity</span></div>
            <div className="row"><span className="k">{t('about.neofetch.uptime')}</span><span className="v">28 years, learning daily</span></div>
            <div className="row"><span className="k">{t('about.neofetch.shell')}</span><span className="v">zsh + oh-my-zsh</span></div>
            <div className="row"><span className="k">{t('about.neofetch.editor')}</span><span className="v">VS Code · vim (for emergencies)</span></div>
            <div className="row"><span className="k">{t('about.neofetch.terminal')}</span><span className="v">iTerm2 + tmux</span></div>
            <div className="row"><span className="k">{t('about.neofetch.cpu')}</span><span className="v">caffeine @ 3.4 GHz</span></div>
            <div className="row"><span className="k">{t('about.neofetch.gpu')}</span><span className="v">imagination ×2</span></div>
            <div className="row"><span className="k">{t('about.neofetch.ram')}</span><span className="v">8 / 16 GB ··· (chrome open)</span></div>
            <div className="row"><span className="k">{t('about.neofetch.lang')}</span><span className="v">ca · es · en</span></div>
            <div className="colors">
              {['#1a2230', '#ff6e6e', '#4ade80', '#ffb454', '#00d4ff', '#c792ea', '#4ec5ff', '#e6edf7'].map(c =>
                <span key={c} style={{ background: c }}></span>
              )}
            </div>
          </div>
        </div>
      </div>

      <h2>{t('about.values.title')}</h2>
      <div className="values-grid">
        <div className="value">
          <div className="num">01</div>
          <div className="vt">{t('about.value1.title')}</div>
          <div className="vb">{t('about.value1.body')}</div>
        </div>
        <div className="value">
          <div className="num">02</div>
          <div className="vt">{t('about.value2.title')}</div>
          <div className="vb">{t('about.value2.body')}</div>
        </div>
        <div className="value">
          <div className="num">03</div>
          <div className="vt">{t('about.value3.title')}</div>
          <div className="vb">{t('about.value3.body')}</div>
        </div>
      </div>

      <div className="quote">
        "make it work, make it right, make it fast — in that order."
        <span className="who">— Kent Beck</span>
      </div>

    </div>
  );
}

function EducationPage() {
  const { t } = window.useI18n();
  return (
    <div className="content-inner">

      <div className="prompt-line">
        <span className="prompt-user">david</span>
        <span className="prompt-sep">@</span>
        <span className="prompt-host">fontanet</span>
        <span className="prompt-sep">:</span>
        <span className="prompt-path">~/education</span>
        <span className="prompt-dollar">$</span>
        <span className="prompt-cmd">ls</span>
        <span className="prompt-flag">-la</span>
        <span className="prompt-arg">--sort=date</span>
      </div>

      <h1>{t('edu.title')}</h1>
      <p className="muted" style={{ marginTop: 8 }}>{t('edu.intro')}</p>

      <div className="ls-output">
        total 4<br />
        <span className="perm">drwxr-xr-x</span> <span className="own">david</span> <span className="sz">4096</span> <span className="dt">May 18 2026</span> <span className="fn-dir">./</span><br />
        <span className="perm">drwxr-xr-x</span> <span className="own">david</span> <span className="sz">4096</span> <span className="dt">Jan 01 2018</span> <span className="fn-dir">university/</span><br />
        <span className="perm">drwxr-xr-x</span> <span className="own">david</span> <span className="sz">4096</span> <span className="dt">Sep 01 2014</span> <span className="fn-dir">bachillerato/</span><br />
        <span className="perm">-rw-r--r--</span> <span className="own">david</span> <span className="sz">8.2K</span> <span className="dt">— ongoing</span> <span className="fn-md">certifications.md</span>
      </div>

      <div className="edu-tree">

        <div className="edu-node">
          <div className="ehead">
            <span className="etitle">{t('edu.degree.title')}</span>
            <span className="ewhere">{t('edu.degree.where')}</span>
            <span className="eyears">{t('edu.degree.years')}</span>
          </div>
          <p className="ebody">{t('edu.degree.desc')}</p>
          <div className="ebadges">
            <span className="badge">algoritmos</span>
            <span className="badge">sistemas</span>
            <span className="badge">redes</span>
            <span className="badge">software design</span>
            <span className="badge">bbdd</span>
          </div>
        </div>

        <div className="edu-node">
          <div className="ehead">
            <span className="etitle">{t('edu.bach.title')}</span>
            <span className="ewhere">{t('edu.bach.where')}</span>
            <span className="eyears">{t('edu.bach.years')}</span>
          </div>
          <p className="ebody">{t('edu.bach.desc')}</p>
          <div className="ebadges">
            <span className="badge">matemáticas</span>
            <span className="badge">física</span>
            <span className="badge">tecnología</span>
            <span className="badge">programación</span>
          </div>
        </div>

      </div>

      <h2>{t('edu.cert.title')}</h2>
      <p className="muted">{t('edu.cert.intro')}</p>

      <div className="cert-block">
        <div className="h">
          <span>certifications.md</span>
          <span className="dim">2.4K · markdown</span>
        </div>
        <div className="body">
          <ul>
            <li>{t('edu.cert.1')}</li>
            <li>{t('edu.cert.2')}</li>
            <li>{t('edu.cert.3')}</li>
            <li>{t('edu.cert.4')}</li>
          </ul>
        </div>
      </div>

      <p className="note">{t('edu.note')}</p>

    </div>
  );
}

function ExperiencePage() {
  const { t } = window.useI18n();
  return (
    <div className="content-inner">

      <div className="prompt-line">
        <span className="prompt-user">david</span>
        <span className="prompt-sep">@</span>
        <span className="prompt-host">fontanet</span>
        <span className="prompt-sep">:</span>
        <span className="prompt-path">~/career</span>
        <span className="prompt-dollar">$</span>
        <span className="prompt-cmd">git log</span>
        <span className="prompt-flag">--oneline</span>
        <span className="prompt-flag">--decorate</span>
        <span className="prompt-arg">--all</span>
      </div>

      <h1>{t('exp.title')}</h1>
      <p className="muted" style={{ marginTop: 8 }}>{t('exp.intro')}</p>

      <div className="gitstats">
        <span className="stat">branch: <span className="v">main</span></span>
        <span className="dim">|</span>
        <span className="stat">commits: <span className="v">3</span></span>
        <span className="dim">|</span>
        <span className="stat add">+ <span className="v">a lot of lines shipped</span></span>
        <span className="dim">|</span>
        <span className="stat del">- <span className="v">many bugs squashed</span></span>
      </div>

      <div className="gitgraph">

        <div className="commit head">
          <div className="rail"><span className="dot"></span></div>
          <div className="commit-card">
            <div className="commit-meta">
              <span className="commit-hash">a8f3c21</span>
              <span className="commit-tag head">HEAD -&gt; main</span>
              <span className="commit-tag">current</span>
              <span className="commit-author">David Fontanet</span>
              <span className="commit-date">May 18, 2026</span>
            </div>
            <div className="commit-title">{t('exp.job1.title')}</div>
            <div className="commit-dates">{t('exp.job1.dates')}</div>
            <div className="commit-body">{t('exp.job1.body')}</div>
          </div>
        </div>

        <div className="commit">
          <div className="rail"><span className="dot"></span></div>
          <div className="commit-card">
            <div className="commit-meta">
              <span className="commit-hash">7d1e09b</span>
              <span className="commit-tag">v2</span>
              <span className="commit-author">David Fontanet</span>
              <span className="commit-date">20XX</span>
            </div>
            <div className="commit-title">{t('exp.job2.title')}</div>
            <div className="commit-dates">{t('exp.job2.dates')}</div>
            <div className="commit-body">{t('exp.job2.body')}</div>
          </div>
        </div>

        <div className="commit">
          <div className="rail"><span className="dot"></span></div>
          <div className="commit-card">
            <div className="commit-meta">
              <span className="commit-hash">3b29f04</span>
              <span className="commit-tag">v1</span>
              <span className="commit-author">David Fontanet</span>
              <span className="commit-date">20XX</span>
            </div>
            <div className="commit-title">{t('exp.job3.title')}</div>
            <div className="commit-dates">{t('exp.job3.dates')}</div>
            <div className="commit-body">{t('exp.job3.body')}</div>
          </div>
        </div>

        <div className="commit">
          <div className="rail"><span className="dot" style={{ borderStyle: 'dashed', opacity: 0.6 }}></span></div>
          <div className="commit-card" style={{ borderStyle: 'dashed', opacity: 0.7 }}>
            <div className="commit-meta">
              <span className="commit-hash">0000000</span>
              <span className="commit-tag">initial</span>
              <span className="commit-author">David Fontanet</span>
              <span className="commit-date">~ 2014</span>
            </div>
            <div className="commit-title">initial commit · primer "Hello, world!"</div>
            <div className="commit-body">+ descubre la línea de comandos
+ rompe muchas cosas, aprende más</div>
          </div>
        </div>

      </div>

    </div>
  );
}

Object.assign(window, { AboutPage, EducationPage, ExperiencePage });