/* pages-other.jsx — Skills + Projects + Contact */
const { useState: useStateO, useEffect: useEffectO, useRef: useRefO } = React;

/* ============================================
   SKILLS
   ============================================ */
const SKILLS_DATA = [
  {
    cat: 'skills.cat.lang',
    version: 'v2026.5',
    items: [
      { name: 'TypeScript', v: 92, s: 'expert' },
      { name: 'JavaScript', v: 95, s: 'expert' },
      { name: 'Python', v: 86, s: 'expert' },
      { name: 'Bash / Shell', v: 78, s: 'installed' },
      { name: 'SQL', v: 80, s: 'installed' },
      { name: 'Go', v: 55, s: 'learning' },
      { name: 'Rust', v: 40, s: 'learning' },
    ],
  },
  {
    cat: 'skills.cat.front',
    version: 'v2026.5',
    items: [
      { name: 'React', v: 92, s: 'expert' },
      { name: 'Next.js', v: 84, s: 'installed' },
      { name: 'HTML5 / CSS3', v: 90, s: 'expert' },
      { name: 'Tailwind CSS', v: 86, s: 'installed' },
      { name: 'Vite / Webpack', v: 78, s: 'installed' },
      { name: 'Svelte', v: 50, s: 'learning' },
    ],
  },
  {
    cat: 'skills.cat.back',
    version: 'v2026.5',
    items: [
      { name: 'Node.js / Express', v: 88, s: 'expert' },
      { name: 'FastAPI / Django', v: 80, s: 'installed' },
      { name: 'REST APIs', v: 90, s: 'expert' },
      { name: 'GraphQL', v: 72, s: 'installed' },
      { name: 'WebSockets', v: 68, s: 'installed' },
    ],
  },
  {
    cat: 'skills.cat.data',
    version: 'v2026.5',
    items: [
      { name: 'PostgreSQL', v: 84, s: 'installed' },
      { name: 'MongoDB / Redis', v: 76, s: 'installed' },
      { name: 'Docker', v: 82, s: 'installed' },
      { name: 'AWS / GCP', v: 70, s: 'installed' },
      { name: 'CI/CD (GH Actions)', v: 78, s: 'installed' },
      { name: 'Kubernetes', v: 50, s: 'learning' },
    ],
  },
  {
    cat: 'skills.cat.tools',
    version: 'v2026.5',
    items: [
      { name: 'Git / GitHub', v: 94, s: 'expert' },
      { name: 'Linux / Unix', v: 84, s: 'installed' },
      { name: 'VS Code', v: 92, s: 'expert' },
      { name: 'vim (basic)', v: 60, s: 'installed' },
      { name: 'Figma', v: 72, s: 'installed' },
      { name: 'Jest / Vitest', v: 80, s: 'installed' },
    ],
  },
];

function SkillsPage() {
  const { t } = window.useI18n();
  const barsRef = useRefO(null);

  // Animate bars after mount (and re-animate on lang change since component remounts).
  useEffectO(() => {
    const bars = barsRef.current?.querySelectorAll('.pkg-bar > i');
    if (!bars) return;
    bars.forEach((el, i) => {
      const target = +el.dataset.target;
      setTimeout(() => { el.style.width = target + '%'; }, 40 + i * 30);
    });
  }, []);

  const total = SKILLS_DATA.reduce((n, c) => n + c.items.length, 0);
  const statusLabel = { expert: 'skills.legend.expert', installed: 'skills.legend.installed', learning: 'skills.legend.learning' };

  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">~/skills</span>
        <span className="prompt-dollar">$</span>
        <span className="prompt-cmd">pkg</span>
        <span className="prompt-arg">list-installed</span>
        <span className="prompt-flag">--grouped</span>
      </div>

      <h1>{t('skills.title')}</h1>
      <p className="muted" style={{ marginTop: 8, maxWidth: '62ch' }}>{t('skills.intro')}</p>

      <div className="term-summary">
        <span><span className="num">{total}</span> packages installed</span>
        <span className="dim">|</span>
        <span><span className="num">3</span> learning</span>
        <span className="dim">|</span>
        <span><span className="num">May 2026</span> last update</span>
      </div>

      <div className="legend">
        <span><span className="dot" style={{ background: 'var(--neon)', boxShadow: '0 0 6px var(--neon-glow)' }}></span>{t('skills.legend.expert')}</span>
        <span><span className="dot" style={{ background: 'var(--success)', boxShadow: '0 0 6px rgba(74,222,128,.4)' }}></span>{t('skills.legend.installed')}</span>
        <span><span className="dot" style={{ background: 'var(--warn)', boxShadow: '0 0 6px rgba(255,180,84,.4)' }}></span>{t('skills.legend.learning')}</span>
      </div>

      <div ref={barsRef}>
        {SKILLS_DATA.map(cat => (
          <div className="pkg-cat" key={cat.cat}>
            <div className="pkg-cat-head">
              <span className="name">{t(cat.cat)}</span>
              <span className="meta">{cat.items.length} packages · {cat.version}</span>
            </div>
            <div className="pkg-cat-body">
              {cat.items.map(it => (
                <div className="pkg-row" key={it.name}>
                  <span className="pkg-name">{it.name}</span>
                  <span className="pkg-bar"><i data-target={it.v}></i></span>
                  <span className="pkg-pct">{it.v}%</span>
                  <span className={`pkg-status ${it.s}`}>{t(statusLabel[it.s])}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

    </div>
  );
}

/* ============================================
   PROJECTS
   ============================================ */
const PROJECTS_DATA = [
  { id: 'p1', glyph: '{ }', title: 'project-alpha', status: 'live', cat: 'web',
    desc: { es: 'Aplicación web full-stack con foco en performance y DX. Stack moderno y arquitectura modular.', en: 'Full-stack web app focused on performance and DX. Modern stack and modular architecture.' },
    tags: ['React', 'Node.js', 'PostgreSQL', 'TypeScript'],
    repo: 'https://github.com/DavidFB-creator', demo: null },
  { id: 'p2', glyph: '</>', title: 'cli-toolkit', status: 'live', cat: 'cli',
    desc: { es: 'Herramienta de línea de comandos para automatizar tareas repetitivas del día a día.', en: 'Command-line tool to automate the daily repetitive busywork.' },
    tags: ['Python', 'Click', 'Bash'],
    repo: 'https://github.com/DavidFB-creator', demo: null },
  { id: 'p3', glyph: '◆◇', title: 'design-system', status: 'wip', cat: 'web',
    desc: { es: 'Sistema de diseño y biblioteca de componentes para acelerar el desarrollo de productos internos.', en: 'Design system and component library to speed up internal product work.' },
    tags: ['Storybook', 'Tailwind', 'TS'],
    repo: 'https://github.com/DavidFB-creator', demo: null },
  { id: 'p4', glyph: '∑', title: 'data-pipeline', status: 'live', cat: 'data',
    desc: { es: 'Pipeline ETL para ingesta y normalización de datos de fuentes heterogéneas, con dashboards en tiempo real.', en: 'ETL pipeline for ingesting and normalizing heterogeneous data, plus real-time dashboards.' },
    tags: ['Python', 'PostgreSQL', 'Docker', 'Grafana'],
    repo: 'https://github.com/DavidFB-creator', demo: null },
  { id: 'p5', glyph: '◉', title: 'api-gateway', status: 'archive', cat: 'web',
    desc: { es: 'API gateway con autenticación, rate-limiting y caching para microservicios internos.', en: 'API gateway with auth, rate-limiting and caching for internal microservices.' },
    tags: ['Node.js', 'Redis', 'JWT'],
    repo: 'https://github.com/DavidFB-creator', demo: null },
  { id: 'p6', glyph: '~/$', title: 'this-portfolio', status: 'live', cat: 'web',
    desc: { es: "Justo lo que estás viendo. Multi-page, bilingüe, con un puñado de easter eggs. Escribe 'matrix' abajo.", en: "Exactly what you're looking at. Multi-page, bilingual, with a handful of easter eggs. Type 'matrix' below." },
    tags: ['React', 'CSS', 'Vanilla JS'],
    repo: 'https://github.com/DavidFB-creator', demo: null },
];

const PROJ_CATS = [
  { id: 'all', label: { es: 'todos', en: 'all' } },
  { id: 'web', label: { es: 'web', en: 'web' } },
  { id: 'cli', label: { es: 'cli', en: 'cli' } },
  { id: 'data', label: { es: 'data', en: 'data' } },
];

function ProjectsPage() {
  const { t, lang } = window.useI18n();
  const [active, setActive] = useStateO('all');
  const list = PROJECTS_DATA.filter(p => active === 'all' || p.cat === active);

  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">~/projects</span>
        <span className="prompt-dollar">$</span>
        <span className="prompt-cmd">ls</span>
        <span className="prompt-flag">--featured</span>
      </div>

      <h1>{t('proj.title')}</h1>
      <p className="muted" style={{ marginTop: 8, maxWidth: '62ch' }}>{t('proj.intro')}</p>

      <div className="filter-bar">
        {PROJ_CATS.map(c => {
          const n = c.id === 'all' ? PROJECTS_DATA.length : PROJECTS_DATA.filter(p => p.cat === c.id).length;
          return (
            <button
              key={c.id}
              className={`chip ${c.id === active ? 'active' : ''}`}
              onClick={() => setActive(c.id)}
            >
              {c.label[lang]}<span className="n">{n}</span>
            </button>
          );
        })}
      </div>

      <div className="proj-grid">
        {list.length === 0 ? (
          <div className="proj-empty">{t('proj.empty')}</div>
        ) : list.map(p => (
          <article className="proj" key={p.id}>
            <div className="proj-thumb">
              <span className="glyph">{p.glyph}</span>
              <span className="placeholder-label">// preview placeholder</span>
            </div>
            <div className="proj-body">
              <div className="proj-head">
                <span className="proj-title">{p.title}</span>
                <span className={`proj-status ${p.status}`}>{p.status}</span>
              </div>
              <div className="proj-desc">{p.desc[lang]}</div>
              <div className="proj-tags">{p.tags.map(tg => <span key={tg} className="proj-tag">{tg}</span>)}</div>
            </div>
            <div className="proj-links">
              <a href={p.repo} target="_blank" rel="noopener noreferrer"><span className="arr">↗</span>{t('proj.view')}</a>
              {p.demo && <><span className="sep">·</span><a href={p.demo} target="_blank" rel="noopener noreferrer"><span className="arr">↗</span>{t('proj.demo')}</a></>}
            </div>
          </article>
        ))}
      </div>

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

    </div>
  );
}

/* ============================================
   CONTACT
   ============================================ */
function ContactPage() {
  const { t } = window.useI18n();
  const toasts = window.useToasts();
  const [form, setForm] = useStateO({ name: '', email: '', subject: '', message: '' });
  const [status, setStatus] = useStateO({ kind: '', text: '' });
  const [sending, setSending] = useStateO(false);

  function onChange(e) {
    setForm(f => ({ ...f, [e.target.name]: e.target.value }));
  }
  function onSubmit(e) {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim() || !form.message.trim()) {
      setStatus({ kind: 'err', text: t('contact.error') });
      return;
    }
    setStatus({ kind: 'ok', text: '...transmitting' });
    setSending(true);
    setTimeout(() => {
      setStatus({ kind: 'ok', text: '✓ ' + t('contact.sent') });
      setSending(false);
      setForm({ name: '', email: '', subject: '', message: '' });
      toasts.push(`<span class="success">✓</span> ${t('contact.sent')}`, 'success', 6000);
    }, 900);
  }

  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">~</span>
        <span className="prompt-dollar">$</span>
        <span className="prompt-cmd">ssh</span>
        <span className="prompt-arg">contact@david</span>
      </div>

      <h1>{t('contact.title')}</h1>
      <p className="muted" style={{ marginTop: 8, maxWidth: '62ch' }}>{t('contact.intro')}</p>

      <div className="contact-grid">
        <div className="ssh-window">
          <div className="ssh-head">
            <div className="left"><span className="dot"></span><span>ssh · contact@david.dev · port 22</span></div>
            <span>1 client connected</span>
          </div>
          <div className="ssh-body">
            <div className="ssh-banner">
              <span className="neon">welcome to david.dev</span>{'\n'}
              <span className="key">authenticated as</span> visitor{'\n'}
              <span className="muted">// envía un mensaje y te responderé en menos de 24h</span>
            </div>

            <form onSubmit={onSubmit} noValidate>
              <div className="field">
                <label className="field-label">{t('contact.name')}</label>
                <input className="field-input" name="name" required placeholder="visitor@earth" value={form.name} onChange={onChange} />
              </div>
              <div className="field">
                <label className="field-label">{t('contact.email')}</label>
                <input className="field-input" type="email" name="email" required placeholder="you@somewhere.dev" value={form.email} onChange={onChange} />
              </div>
              <div className="field">
                <label className="field-label">{t('contact.subject')}</label>
                <input className="field-input" name="subject" placeholder="quiero hablar de..." value={form.subject} onChange={onChange} />
              </div>
              <div className="field">
                <label className="field-label">{t('contact.message')}</label>
                <textarea className="field-textarea" name="message" required placeholder="hola David, te escribo porque..." value={form.message} onChange={onChange}></textarea>
              </div>
              <div className="send-row">
                <button type="submit" className="btn" disabled={sending}>{t('contact.send')}</button>
                <span className={`send-status ${status.kind}`}>{status.text}</span>
              </div>
            </form>
          </div>
        </div>

        <div>
          <div className="channels">
            <div className="ch-head">{t('contact.channels')}</div>
            <div className="ch-body">
              <a className="ch" href="https://github.com/DavidFB-creator" target="_blank" rel="noopener noreferrer">
                <span className="ch-icon">{'{ }'}</span>
                <span className="ch-meta">
                  <span className="k">{t('contact.github')}</span>
                  <span className="v">github.com/DavidFB-creator</span>
                </span>
                <span className="arr">↗</span>
              </a>
              <a className="ch" href="https://www.linkedin.com/in/david-fontanet-bujald%C3%B3n/" target="_blank" rel="noopener noreferrer">
                <span className="ch-icon">in</span>
                <span className="ch-meta">
                  <span className="k">{t('contact.linkedin')}</span>
                  <span className="v">linkedin.com/in/david-fontanet-bujaldón</span>
                </span>
                <span className="arr">↗</span>
              </a>
              <a className="ch" href="mailto:davidfb@fonta.net">
                <span className="ch-icon">@</span>
                <span className="ch-meta">
                  <span className="k">{t('contact.email_direct')}</span>
                  <span className="v">davidfb@fonta.net</span>
                </span>
                <span className="arr">↗</span>
              </a>
            </div>
          </div>

<pre className="ascii-sat" aria-hidden="true">{`       .  *  .       *
   .          .           *
       *      .--.      .
     .       /( o)\\        *
    *        \\\\.\\/.       .
        .     |  |  .
      .     __|__|__   *
            |________|      .
         .       *       .`}</pre>

          <p className="muted" style={{ marginTop: 18, fontSize: 'var(--fs-xs)', textAlign: 'center' }}>
            <span className="dim">// </span>respuesta típica &lt; 24h
          </p>
        </div>
      </div>

    </div>
  );
}

Object.assign(window, { SkillsPage, ProjectsPage, ContactPage });