/* Docs hub — grid of project documentation cards */

const DOCS_PROJECTS = [
  {
    slug: 'swiftllm',
    title: 'SwiftLLM',
    image: '/assets/SwiftLLM.png',
    tags: ['Rust', 'Backend', 'AI', 'DevOps', 'Axum', 'Tokio'],
    github: 'https://github.com/Elyeden0/swiftllm',
    type: 'personal',
    comingSoon: false,
  },
  {
    slug: 'raybox',
    title: 'Raybox',
    image: '/assets/Raybox1.png',
    tags: ['Next.js', 'React', 'Three.js', 'TypeScript', 'Fullstack', '3D'],
    type: 'personal',
    comingSoon: false,
  },
  {
    slug: 'inputmuxd',
    title: 'inputmuxd',
    image: '/assets/SteamController.webp',
    tags: ['Rust', 'Tokio', 'hidapi', 'uinput', 'ViGEm', 'Systems'],
    type: 'personal',
    comingSoon: false,
  },
];

function Docs() {
  const t = window.t;
  const title = t('docs.sectionTitle');

  return (
    <section className="section" id="docs">
      <div className="container">

        <div className="section-label reveal">
          <span>{t('docs.label')}</span>
          <span className="bar" />
          <span>{t('docs.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('docs.lede')}</p>

        <div className="docs-grid">
          {DOCS_PROJECTS.map((p, i) => (
            <article className={`doc-card reveal delay-${i % 3}`} key={p.slug}>
              <div className="doc-card-visual">
                <img src={p.image} alt={p.title} loading="lazy" />
              </div>

              <div className="doc-card-body">
                <div className="doc-card-header">
                  <h3 className="doc-card-title">{p.title}</h3>
                  <span className={`doc-card-tag doc-card-tag-${p.type}`}>
                    {t(`docs.types.${p.type}`)}
                  </span>
                </div>

                <p className="doc-card-desc">{t(`docs.projects.${p.slug}`)}</p>

                <div className="doc-card-tags">
                  {p.tags.map(tag => <span key={tag}>{tag}</span>)}
                </div>

                <div className="doc-card-actions">
                  {p.comingSoon ? (
                    <span className="doc-pill doc-pill-soon">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                        <circle cx="7" cy="7" r="5.5" />
                        <path d="M7 4v3l2 1.5" />
                      </svg>
                      <span>{t('docs.comingSoon')}</span>
                    </span>
                  ) : (
                    <a href={`#/${p.slug}`} className="doc-pill doc-pill-view">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M2 3h4l1 1h5v7H2z" />
                      </svg>
                      <span>{t('docs.viewDocs')}</span>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 9L9 3M9 3H4M9 3V8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </a>
                  )}

                  {p.github && (
                    <a href={p.github} target="_blank" rel="noopener noreferrer" className="doc-pill doc-pill-github">
                      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
                      </svg>
                      <span>GitHub</span>
                    </a>
                  )}
                </div>
              </div>
            </article>
          ))}
        </div>

        <p className="docs-footnote reveal delay-2">{t('docs.moreSoon')}</p>

      </div>
    </section>
  );
}

window.Docs = Docs;