import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Documentation — CV-Maker",
  description: "Guide de prise en main de CV-Maker et syntaxe Markdown supportée.",
};

export default function DocumentationPage() {
  return (
    <main className="mx-auto w-full max-w-3xl flex-1 px-6 py-10">
      <Link
        href="/"
        className="text-sm font-medium text-muted underline-offset-2 hover:text-accent hover:underline"
      >
        ← Retour à l&apos;éditeur
      </Link>

      <h1 className="mt-4 text-2xl font-bold text-ink">Documentation</h1>

      <section className="mt-6">
        <h2 className="text-xl font-semibold text-ink">Prise en main</h2>
        <ol className="mt-3 list-decimal space-y-2 pl-5 text-sm leading-relaxed text-ink">
          <li>
            <strong>Onglets 1 à 5</strong> — sélectionnez une zone de saisie (accroche,
            état civil + contacts, formations, soft skills, centres d&apos;intérêt).
            Un seul onglet est actif à la fois ; chaque zone conserve son texte.
          </li>
          <li>
            <strong>Saisie Markdown</strong> — le texte est écrit en Markdown dans le
            panneau gauche et rendu en HTML en temps réel dans la feuille A4 à droite.
          </li>
          <li>
            <strong>Expériences professionnelles</strong> — bouton « Ajouter » pour créer
            une expérience (titre + contenu). La liste est numérotée ; chaque entrée peut
            être modifiée ou supprimée. L&apos;ordre de saisie détermine l&apos;affichage : la
            première expérience ajoutée apparaît en haut de la section « Expériences
            professionnelles » de la feuille, les suivantes en dessous.
          </li>
          <li>
            <strong>Sauvegarde automatique</strong> — chaque frappe est enregistrée dans le
            navigateur (localStorage, clé <code>cv-maker:v1</code>). Rechargez la page :
            vos données sont restaurées. Aucune donnée n&apos;est envoyée sur Internet.
          </li>
          <li>
            <strong>Impression / PDF</strong> — le bouton « Imprimer / PDF » ouvre
            l&apos;aperçu d&apos;impression du navigateur. Enregistrez en PDF : seule la
            feuille A4 est exportée, sans les panneaux d&apos;édition.
          </li>
          <li>
            <strong>Export / import JSON</strong> — le bouton « Exporter JSON »
            télécharge votre CV au format JSON (fichier <code>cv-maker.json</code>).
            Sur un autre appareil, « Importer JSON » charge ce fichier et remplace
            le contenu actuel (après confirmation). C&apos;est le moyen de partager ou
            de sauvegarder un CV entre plusieurs navigateurs.
          </li>
          <li>
            <strong>Réinitialiser</strong> — le bouton « Réinitialiser » (après
            confirmation) vide toutes les zones et la liste des expériences.
          </li>
        </ol>
      </section>

      <section className="mt-8">
        <h2 className="text-xl font-semibold text-ink">Syntaxe Markdown supportée</h2>
        <p className="mt-2 text-sm leading-relaxed text-muted">
          Les 5 zones et le contenu des expériences sont rendus en Markdown (GFM).
        </p>
        <div className="mt-4 overflow-x-auto rounded-md border border-border bg-white">
          <table className="w-full text-sm text-ink">
            <thead>
              <tr className="border-b border-border bg-paper text-left">
                <th className="px-3 py-2 font-semibold">Élément</th>
                <th className="px-3 py-2 font-semibold">Syntaxe</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {[
                ["Titre niveau 3", "### Développeur Full-Stack"],
                ["Gras", "**Jean Dupont**"],
                ["Italique", "*Contact*"],
                ["Liste à puces", "- Compétence 1\n- Compétence 2"],
                ["Liste numérotée", "1. Diplôme 1\n2. Diplôme 2"],
                ["Lien", "[GitHub](https://github.com/user)"],
                ["Lien brut", "<https://example.com>"],
                ["Code en ligne", "`npm run dev`"],
                ["Bloc de code", "```\nconst x = 42;\n```"],
                ["Citation", "> Citation d'accroche"],
                ["Séparateur", "---"],
              ].map(([label, syntax]) => (
                <tr key={label}>
                  <td className="px-3 py-2 font-medium">{label}</td>
                  <td className="px-3 py-2 font-mono text-xs whitespace-pre">
                    {syntax}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section className="mt-8 rounded-md border border-border bg-white p-4">
        <h2 className="text-sm font-semibold text-ink">Conseil : structurer son CV</h2>
        <p className="mt-2 text-sm leading-relaxed text-ink">
          Utilisez l&apos;onglet 1 pour le nom et le poste visé, l&apos;onglet 2 pour vos
          coordonnées (e-mail, téléphone, site web, GitHub), l&apos;onglet 3 pour vos
          formations, l&apos;onglet 4 pour vos soft skills et l&apos;onglet 5 pour vos
          centres d&apos;intérêt. Complétez avec vos expériences professionnelles, de la plus
          récente à la plus ancienne.
        </p>
      </section>
    </main>
  );
}