/* pages-home.jsx — Home / hero page */
const { useEffect: useEffectH, useMemo: useMemoH } = React;

function HomePage() {
  const { t } = window.useI18n();
  const visitorN = window.useVisitorN();
  const Link = window.Link;

  return (
    <div className="content-inner hero">

      <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">~</span>
        <span className="prompt-dollar">$</span>
        <span className="prompt-cmd">./welcome.sh</span>
        <span className="prompt-flag">--user</span>
        <span className="prompt-arg">visitor</span>
      </div>

      <div className="comment">{t('hero.greet')}</div>

<div className="ascii-name" aria-hidden="true">{`██████╗   █████╗  ██╗   ██╗ ██╗ ██████╗     ███████╗ ██████╗ 
██╔══██╗ ██╔══██╗ ██║   ██║ ██║ ██╔══██╗    ██╔════╝ ██╔══██╗
██║  ██║ ███████║ ██║   ██║ ██║ ██║  ██║    █████╗   ██████╔╝
██║  ██║ ██╔══██║ ╚██╗ ██╔╝ ██║ ██║  ██║    ██╔══╝   ██╔══██╗
██████╔╝ ██║  ██║  ╚████╔╝  ██║ ██████╔╝    ██║      ██████╔╝
╚═════╝  ╚═╝  ╚═╝   ╚═══╝   ╚═╝ ╚═════╝     ╚═╝      ╚═════╝ `}</div>

      <div className="role-row">
        <span className="role">{t('hero.role')}</span>
        <span className="badge neon">v1.0</span>
        <span className="badge">
          <span className="led" style={{ width: 5, height: 5 }}></span>
          <span>{t('side.available')}</span>
        </span>
      </div>

      <p className="tagline">{t('hero.tagline')}</p>

      <div className="hero-grid">
        <div>
          <div className="stat-list">
            <div className="row"><div className="key">{t('hero.role_label')}</div><div className="val">David Fontanet Bujaldón · <span className="muted">software engineer (generalista)</span></div></div>
            <div className="row"><div className="key">{t('hero.location_label')}</div><div className="val">Tarragona, ES <span className="muted">· remoto / híbrido</span></div></div>
            <div className="row"><div className="key">{t('hero.stack_label')}</div><div className="val">TypeScript · Python · Node · React · PostgreSQL <span className="muted">· +más</span></div></div>
            <div className="row"><div className="key">{t('hero.lang_label')}</div><div className="val">Català · Español · English</div></div>
            <div className="row"><div className="key">{t('hero.status_label')}</div><div className="val"><span className="success">●</span> online — <span className="muted">last seen now</span></div></div>
          </div>

          <div className="social-row">
            <a href="https://github.com/DavidFB-creator" target="_blank" rel="noopener noreferrer"><span className="dot"></span>github</a>
            <a href="https://www.linkedin.com/in/david-fontanet-bujald%C3%B3n/" target="_blank" rel="noopener noreferrer"><span className="dot"></span>linkedin</a>
            <a href="mailto:davidfb@fonta.net"><span className="dot"></span>email</a>
          </div>
        </div>

        <div>
          <div className="help-card">
            <div className="help-card-head">
              <span>./hints.txt</span>
              <span className="dim">read-only</span>
            </div>
            <div className="help-card-body">
              <div className="line"><span className="bullet">›</span><span>{t('hero.help.nav')}</span></div>
              <div className="line"><span className="bullet">›</span><span>{t('hero.help.cursor')}</span></div>
              <div className="line"><span className="bullet">›</span><span>{t('hero.help.secret')}</span></div>
              <div className="line" style={{ marginTop: 14, flexWrap: 'wrap' }}>
                <span className="key">shortcuts:</span> <span className="kbd">Ctrl</span><span>+</span><span className="kbd">K</span><span className="muted">focus cmd</span>
              </div>
              <div className="line" style={{ flexWrap: 'wrap' }}>
                <span className="key">             </span><span className="kbd">↑</span><span className="kbd">↓</span><span className="muted">history</span><span className="kbd">Tab</span><span className="muted">complete</span>
              </div>
<div className="ascii-mini">{`    .---.
   /     \\
   \\.@-@./
   /\`\\_/\`\\
  //  _  \\\\
 | \\     )|_
/\`\\_\`>  <_/ \\
\\__/'---'\\__/`}</div>
            </div>
          </div>
        </div>
      </div>

      <div className="cta-block">
        <div className="cta-title">{t('hero.cta.title')}</div>
        <div className="cta-grid">
          <Link to="about" className="cta">
            <span className="cta-key">[1]</span>
            <span className="cta-cmd">cd about</span>
            <span className="cta-desc">{t('hero.cta.about')}</span>
          </Link>
          <Link to="projects" className="cta">
            <span className="cta-key">[2]</span>
            <span className="cta-cmd">ls projects/</span>
            <span className="cta-desc">{t('hero.cta.projects')}</span>
          </Link>
          <Link to="experience" className="cta">
            <span className="cta-key">[3]</span>
            <span className="cta-cmd">git log --experience</span>
            <span className="cta-desc">historial profesional</span>
          </Link>
          <Link to="contact" className="cta">
            <span className="cta-key">[4]</span>
            <span className="cta-cmd">ssh contact@david</span>
            <span className="cta-desc">{t('hero.cta.contact')}</span>
          </Link>
        </div>

        <div className="visitor">
          <span className="muted">// session_id:</span><span className="n">#{visitorN ? String(visitorN).padStart(4, '0') : '----'}</span>
          <span className="dim">·</span>
          <span className="muted">{t('status.tip')}</span>
        </div>
      </div>

    </div>
  );
}

window.HomePage = HomePage;