/* Projects grid — personal projects link to docs, others are view-only */

const PROJ_IMG = {
  bloom:     '/assets/Bloomskills.png',
  swiftllm:  '/assets/SwiftLLM.png',
  gaia:      '/assets/GaIa.png',
  raybox:    '/assets/Raybox.png',
  inputmuxd: '/assets/SteamController.webp',
  studio:    '/assets/Freelance.jpg',
};

function ProjViz({ kind, alt }) {
  const src = PROJ_IMG[kind];
  if (!src) return null;
  return <img className="proj-visual-img" src={src} alt={alt || ''} loading="lazy" />;
}

const Arrow = () => (
  <div className="proj-arrow" aria-hidden>
    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
  </div>
);

/**
 * Wraps project body. When `href` is provided, renders as <a>. Otherwise
 * renders as <div> with "static" class (no hover lift, no arrow).
 */
function ProjShell({ href, className, children }) {
  if (href) {
    return <a className={className} href={href}>{children}</a>;
  }
  return <div className={`${className} proj-static`}>{children}</div>;
}

function Projects() {
  const t = window.t;
  const title = t('projects.sectionTitle');
  return (
    <section className="section" id="projects">
      <div className="container">

        <div className="section-label reveal">
          <span className="num">05</span>
          <span>{t('projects.label')}</span>
          <span className="bar" />
          <span>{t('projects.tagline')}</span>
        </div>

        <h2 className="section-title reveal">
          {title.before}<em>{title.em}</em>{title.after}
        </h2>
        <p className="section-lede reveal delay-1">{t('projects.lede')}</p>

        <div className="projects-grid">

          {/* 01 — BloomSkills (professional, not clickable) */}
          <ProjShell className="proj wide reveal">
            <div className="proj-visual">
              <ProjViz kind="bloom" alt={t('projects.bloom.titleBefore')} />
            </div>
            <div className="proj-body">
              <div className="proj-header">
                <span className="proj-num">/01</span>
                <span className="proj-tag">{t('projects.tags.professionalFeatured')}</span>
              </div>
              <h3 className="proj-title">
                {t('projects.bloom.titleBefore')} <em>{t('projects.bloom.titleEm')}</em>
              </h3>
              <p className="proj-desc">{t('projects.bloom.desc')}</p>
              <div className="proj-stack">
                <span>Vue 3</span><span>AdonisJS</span><span>PostgreSQL</span>
                <span>Langchain</span><span>OpenAI</span><span>Docker</span>
              </div>
            </div>
          </ProjShell>

          {/* 02 — SwiftLLM (personal, links to /swiftllm) */}
          <ProjShell className="proj reveal delay-1" href="#/swiftllm">
            <div className="proj-header">
              <span className="proj-num">/02</span>
              <span className="proj-tag">{t('projects.tags.personal')}</span>
            </div>
            <div className="proj-visual">
              <ProjViz kind="swiftllm" alt={t('projects.swiftllm.title')} />
            </div>
            <h3 className="proj-title">{t('projects.swiftllm.title')}</h3>
            <p className="proj-desc">{t('projects.swiftllm.desc')}</p>
            <div className="proj-stack">
              <span>Rust</span><span>Axum</span><span>Tokio</span><span>Redis</span>
            </div>
            <Arrow />
          </ProjShell>

          {/* 03 — GaIa (professional, not clickable) */}
          <ProjShell className="proj reveal delay-2">
            <div className="proj-header">
              <span className="proj-num">/03</span>
              <span className="proj-tag">{t('projects.tags.professional')}</span>
            </div>
            <div className="proj-visual">
              <ProjViz kind="gaia" alt={t('projects.gaia.title')} />
            </div>
            <h3 className="proj-title">{t('projects.gaia.title')}</h3>
            <p className="proj-desc">{t('projects.gaia.desc')}</p>
            <div className="proj-stack">
              <span>Python</span><span>Langchain</span><span>FastAPI</span><span>Pinecone</span>
            </div>
          </ProjShell>

          {/* 04 — Raybox (personal WIP, links to /raybox "upcoming") */}
          <ProjShell className="proj reveal delay-1" href="#/raybox">
            <div className="proj-header">
              <span className="proj-num">/04</span>
              <span className="proj-tag">{t('projects.tags.personalWip')}</span>
            </div>
            <div className="proj-visual">
              <ProjViz kind="raybox" alt={t('projects.raybox.title')} />
            </div>
            <h3 className="proj-title">{t('projects.raybox.title')}</h3>
            <p className="proj-desc">{t('projects.raybox.desc')}</p>
            <div className="proj-stack">
              <span>Next.js</span><span>Three.js</span><span>GLSL</span>
            </div>
            <Arrow />
          </ProjShell>

          {/* 05 — inputmuxd (personal WIP, links to /inputmuxd "in development") */}
          <ProjShell className="proj reveal delay-2" href="#/inputmuxd">
            <div className="proj-header">
              <span className="proj-num">/05</span>
              <span className="proj-tag">{t('projects.tags.personalWip')}</span>
            </div>
            <div className="proj-visual">
              <ProjViz kind="inputmuxd" alt={t('projects.inputmuxd.title')} />
            </div>
            <h3 className="proj-title">{t('projects.inputmuxd.title')}</h3>
            <p className="proj-desc">{t('projects.inputmuxd.desc')}</p>
            <div className="proj-stack">
              <span>Rust</span><span>hidapi</span><span>uinput</span><span>ViGEm</span>
            </div>
            <Arrow />
          </ProjShell>

          {/* 06 — Studio / Client work (not clickable) */}
          <ProjShell className="proj reveal delay-1">
            <div className="proj-header">
              <span className="proj-num">/06</span>
              <span className="proj-tag">{t('projects.tags.studio')}</span>
            </div>
            <div className="proj-visual">
              <ProjViz kind="studio" alt={t('projects.studio.title')} />
            </div>
            <h3 className="proj-title">{t('projects.studio.title')}</h3>
            <p className="proj-desc">{t('projects.studio.desc')}</p>
            <div className="proj-stack">
              <span>Next.js</span><span>Node</span><span>Vue</span><span>Stripe</span>
            </div>
          </ProjShell>

        </div>
      </div>
    </section>
  );
}

window.Projects = Projects;