/* global React, Reveal */
const { useState: useStateR } = React;

function Realisations({ onNav }) {
  const [filter, setFilter] = useStateR("Tous");
  const cats = ["Tous", "Restauration", "Santé", "Artisanat", "Commerce", "Services"];

  const works = [
    {
      name: ["Boulangerie", "Marius"], cat: "Artisanat",
      year: "2026", loc: "Lyon · Croix-Rousse",
      vis: "lime", size: "lg",
      caption: "vis_01 / oversize-type",
      visual: <span style={{ fontSize: "clamp(80px, 14vw, 200px)" }}>Pain<em style={{ color: "oklch(0.2 0.03 125)" }}>.</em></span>,
    },
    {
      name: ["Cabinet", "Mercier"], cat: "Santé",
      year: "2026", loc: "Bordeaux",
      vis: "grid", size: "sm",
      caption: "vis_02 / clean-clinical",
      visual: <span style={{ fontSize: "clamp(48px, 6vw, 88px)", color: "var(--fg)" }}>+ santé</span>,
    },
    {
      name: ["L'Atelier", "des Halles"], cat: "Restauration",
      year: "2025", loc: "Nantes",
      vis: "stripe", size: "sm",
      caption: "vis_03 / awning",
      visual: <span style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--fg)" }}>~ Bistrot</span>,
    },
    {
      name: ["Studio", "Aria"], cat: "Services",
      year: "2025", loc: "Paris · 11ᵉ",
      vis: "paper", size: "md",
      caption: "vis_04 / editorial-flip",
      visual: <span style={{ fontSize: "clamp(70px, 9vw, 130px)" }}>Aria<em>.</em></span>,
    },
    {
      name: ["Fleurs", "Jade"], cat: "Commerce",
      year: "2025", loc: "Lille",
      vis: "dot", size: "md",
      caption: "vis_05 / botanical-grid",
      visual: <span style={{ fontSize: "clamp(60px, 8vw, 110px)" }}><em style={{ color: "var(--accent)" }}>Jade</em></span>,
    },
    {
      name: ["Garage", "Pommier"], cat: "Artisanat",
      year: "2025", loc: "Toulouse",
      vis: "stripe", size: "lg",
      caption: "vis_06 / industrial",
      visual: <span style={{ fontSize: "clamp(60px, 9vw, 140px)" }}>Méca<em style={{ color: "var(--accent)" }}>~</em></span>,
    },
    {
      name: ["Crêperie", "Penn-ar-Bed"], cat: "Restauration",
      year: "2025", loc: "Quimper",
      vis: "grid", size: "sm",
      caption: "vis_07 / breton",
      visual: <span style={{ fontSize: "clamp(36px, 5vw, 64px)" }}>Crêperie</span>,
    },
    {
      name: ["Notaire", "Vidal"], cat: "Services",
      year: "2024", loc: "Marseille",
      vis: "paper", size: "sm",
      caption: "vis_08 / serif-classique",
      visual: <span style={{ fontSize: "clamp(40px, 5vw, 64px)" }}>Étude</span>,
    },
    {
      name: ["Cave", "Léontine"], cat: "Commerce",
      year: "2024", loc: "Reims",
      vis: "dot", size: "sm",
      caption: "vis_09 / sommellerie",
      visual: <span style={{ fontSize: "clamp(40px, 6vw, 80px)" }}><em>Léontine</em></span>,
    },
  ];

  const filtered = filter === "Tous" ? works : works.filter(w => w.cat === filter);

  return (
    <div className="vw-page">
      <header className="vw-page-head">
        <Reveal>
          <div className="vw-eyebrow" style={{ marginBottom: 24 }}>/ Réalisations</div>
          <h1 className="vw-page-head__title">
            Sélection<br/>
            <em>2024 —</em> <span className="accent">2026.</span>
          </h1>
        </Reveal>
        <Reveal>
          <p className="vw-page-head__lede">
            Quelques projets récents pour des PME et commerces locaux. Chacun pensé pour son contexte, son public, sa zone — pas de template, pas de copier-coller.
          </p>
        </Reveal>
      </header>

      <div className="vw-works-demo-note">
        Projets de démonstration — visuels et noms fictifs
      </div>

      <div className="vw-works-filter">
        {cats.map(c => (
          <button key={c} className={filter === c ? "is-active" : ""} onClick={() => setFilter(c)}>
            {c} {filter === c && <span style={{ marginLeft: 6 }}>· {filtered.length}</span>}
          </button>
        ))}
      </div>

      <div className="vw-works">
        {filtered.map((w, i) => (
          <a key={w.name[0] + i} href="#" onClick={(e) => e.preventDefault()} className={`vw-work vw-work--${w.size}`}>
            <div className="vw-work__visual">
              <div className={`vw-vis vw-vis--${w.vis}`}>
                {w.visual}
                <span className="vw-vis__index">/ {String(i + 1).padStart(2, "0")}</span>
                <span className="vw-vis__caption">{w.caption}</span>
              </div>
            </div>
            <div className="vw-work__meta">
              <div className="vw-work__row">
                <span>{w.cat}</span>
                <span>{w.year} · {w.loc}</span>
              </div>
              <div className="vw-work__name">{w.name[0]} <em>{w.name[1]}</em></div>
              <div className="vw-work__tag">→ Voir l'étude de cas</div>
            </div>
          </a>
        ))}
      </div>

      <section className="vw-final-cta">
        <div className="vw-final-cta__bg" aria-hidden="true">w</div>
        <div className="vw-final-cta__inner">
          <Reveal>
            <div className="vw-final-cta__sub">/ Le prochain pourrait être le vôtre</div>
            <h2 className="vw-final-cta__title">Votre projet <em>mérite</em> <span className="accent">la même attention.</span></h2>
          </Reveal>
          <Reveal>
            <a href="#contact" onClick={(e)=>{e.preventDefault(); onNav("contact");}} className="vw-final-cta__btn">
              <span>En parler →</span>
            </a>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

window.Realisations = Realisations;