// ProjectsExpedition — alternate "découvre les projets" view
// Each project is an "étape d'expédition" — a topographic map vignette + guidebook entry,
// alternating left/right, with usage IA rating, cordée, durée, and a CTA "Explorer l'étape".
// Règle du dénivelé : 100 M = 1 techno/outil appris sur le projet.


// {
//     id: "axione", n: "ÉTAPE 02", coord: "48.86°N · 2.35°E",
//     title: "Motion Axione", subtitle: "Animation 2D · janv. 2025",
//     img: "assets/paysage.jpg",
//     video: "assets/AXIONE.mp4",
//     url: "https://drive.google.com/file/d/193h2szD7_nkJZOqT32-fgdfNaVgyjC06/view?usp=sharing",
//     ia: 0, cordée: "SOLO", durée: "4 SEM.", alt: "+200 M",
//     biome: "MOTION",
//     desc: "Pour varier de mon rôle de développeur, j'ai eu l'occasion de réaliser une animation en motion design pour l'entreprise Axione lors de mon passage à l'agence Zebra. Ce projet m'a permis de découvrir et d'approfondir l'utilisation d'Adobe After Effects et Illustrator, des outils que je maîtrisais moins.",
//     tags: ["After Effects","Illustrator"],
//   },

// {
//     id: "autisme", n: "ÉTAPE 05", coord: "47.59°N · 1.33°E",
//     title: "Sensibilisation Autisme", subtitle: "Front-end accessible · juin 2025",
//     img: "assets/proj-autisme.gif",
//     ia: 1, cordée: "4 EQUIPIERS", durée: "5 SEM.", alt: "+100 M",
//     biome: "UNIVERSITE",
//     desc: "Sentier balisé pour tous. Site informatif et accessible : navigation clavier, contraste AA, lecture confortable, illustrations animées. Le terrain doit pouvoir être parcouru par chacun.",
//     tags: ["A11y","HTML","CSS"],
//   },


const EXPEDITION = [
  {
    id: "villas", n: "ÉTAPE 01", coord: "47.59°N · 1.33°E",
    title: "ECOLOGIA", subtitle: "Site d'un projet de cours· janviers. 2025",
    img: "assets/saeEco.png",
    url:"https://ecologia.vincent-morin.fr/",
    ia: 2, cordée: "4 EQUIPIERS", durée: "6 SEM.", alt: "+600 M",
    biome: "UNIVERSITE",
    desc: "Projet universitaire réalisé en équipe : développement d'un CMS complet pour la gestion d'un blog sur l'écologie. Conception de l'API, de la base de données, du back-end en Symfony/PHP et du front-end en React et Tailwind CSS, avec l'intégration d'une expérience 3D interactive grâce à Three.js. Ce projet m'a permis d'intervenir sur l'ensemble du cycle de développement d'une application web full-stack.",
    tags: ["REACT","SYMFONY","THREE.JS","GSAP","TYPESCRIPT","TAILWIND"],
  },
  {
    id: "arvalis", n: "ÉTAPE 02", coord: "48.33°N · 2.38°E",
    title: "Commandes Semences ARVALIS", subtitle: "Application web · 2025–2026",
    img: "assets/arvalis.jpg",
    url: "https://www.arvalis.fr/",
    ia: 2, cordée: "ENTREPRISE", durée: "12 MOIS", alt: "+800 M",
    biome: "ENTREPRISE",
    desc: "Dans le cadre de mon alternance chez ARVALIS – Institut du végétal, j'ai développé une application de gestion des commandes de semences. De la modélisation des données jusqu'à l'interface, j'ai conçu l'application de bout en bout : gestion des commandes, système d'autorisations, et intégration au SI interne.",
    tags: ["C#",".NET","Blazor Server","EF Core","SQL Server"],
  },
  {
    id: "zebra", n: "ÉTAPE 03", coord: "45.76°N · 4.83°E",
    title: "Villas-daumesnil", subtitle: "Design + dev · avril 2025",
    img: "assets/proj-villas-daumesnil.jpg",
    url: "https://ikoryproperties.com/properties/villas-daumesnil-2/",
    ia: 2, cordée: "AGENCE", durée: "8 SEM.", alt: "+100 M",
    biome: "AGENCE",
    desc: "Lors de mon passage à l'agence Zebra, j'ai développé une landing page pour un promoteur immobilier parisien. J'ai construit un thème WordPress sur mesure, entièrement de zéro, en HTML, SCSS, PHP et JavaScript, puis je l'ai connecté au plugin ACF pour que le client puisse modifier lui-même ses contenus directement depuis WordPress. Un projet mené au sein d'une équipe.",
    tags: ["WordPress","ACF","PHP","SCSS","JavaScript"],
  },
  {
    id: "midjourney", n: "ÉTAPE 04", coord: "44.83°N · 0.58°W",
    title: "Kiwigen.ai", subtitle: "Direction artistique · mars 2025",
    img: "assets/proj-midjourney.png",
    url: "https://www.instagram.com/kiwigen.ia/?hl=fr",
    ia: 5, cordée: "SOLO", durée: "2 ANS", alt: "+100 M",
    biome: "PERSO",
    desc: "Passionné par IA, j'ai créé il y a deux ans, en parallèle de mes cours, un compte Instagram (@kiwigen.ia) pour partager mes créations générées par IA. J'y transforme mes idées en images et en vidéos, je donne vie à mes pensées. Un vrai terrain de jeu où je me suis beaucoup amusé et énormément appris, sur comment manier ces outils graphiques.",
    tags: ["Midjourney","Photoshop"],
  },
  {
    id: "claude-gsap", n: "ÉTAPE 05", coord: "48.86°N · 2.35°E",
    title: "IA × DESIGN", subtitle: "Page web animée · juillet 2026",
    img: "assets/proj-claude-gsap.png",
    url: "https://guide-animation.vincent-morin.fr/",
    ia: 5, cordée: "SOLO + IA", durée: "1 SOIRÉE", alt: "+400 M",
    biome: "PERSO",
    desc: "Un site que je nourris régulièrement, où j'explique les derniers outils et frameworks pour créer des designs et des animations front-end avec l'IA. Un nouveau projet qui me pousse à faire beaucoup de veille sur l'actualité du développement et les dernières sorties, pour proposer des tutos et de la doc à mes proches devs.",
    tags: ["GSAP","ScrollTrigger","SplitText","Claude Code"],
  },
  {
    id: "carnet", n: "ÉTAPE 06", coord: "47.59°N · 1.33°E",
    title: "Ce carnet de voyage", subtitle: "Design + dev · avril 2026",
    img: "assets/nature1.jpg",
    ia: 4, cordée: "SOLO", durée: "12 SEM.", alt: "+300 M",
    biome: "PERSO",
    desc: "J'ai créé ce portfolio pour rassembler mon parcours et mes projets, mais surtout pour me présenter à ma façon : j'ai pris beaucoup de plaisir à concevoir cette page, pour vous montrer mon style et mes goûts. Côté technique, un portfolio React, une identité « carnet de voyage » et des animations au scroll signées GSAP. La carte que vous tenez actuellement entre les mains.",
    tags: ["React","SCSS","GSAP"],
  },
];

// little topo-rings vignette behind each photo
function TopoRings({ seed }) {
  const rings = [];
  const n = 6;
  const cx = 50 + (seed % 3) * 6;
  const cy = 50 + (seed % 5) * 4;
  for (let i = 0; i < n; i++) {
    const r = 12 + i * 9;
    rings.push(<circle key={i} cx={cx} cy={cy} r={r} />);
  }
  return (
    <svg className="vme-topo" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
      {rings}
    </svg>
  );
}

function AiUsage({ level }) {
  return (
    <div className="vme-diff" title={`Usage IA ${level}/5`}>
      <span className="vme-diff-label">USAGE IA</span>
      <span className="vme-diff-pips">
        {[1,2,3,4,5].map(i => (
          <span key={i} className={i <= level ? "on" : ""} />
        ))}
      </span>
    </div>
  );
}

function ExpeditionCard({ e, i, onOpen }) {
  const side = i % 2 === 0 ? "left" : "right";

  // Ouverture de la fiche — partagée entre la photo et le bouton "Explorer"
  const open = () => onOpen({
    id: e.id, title: e.title, img: e.img, video: e.video,
    date: e.subtitle.split(' · ')[1] || '',
    stamp: e.n, role: e.subtitle, desc: e.desc, tags: e.tags, url: e.url || '#',
  });

  return (
    <article className={`vme-card vme-${side}`} data-idx={i}>
      {/* Connector dot anchored to the central trail */}
      <span className="vme-dot" aria-hidden="true"></span>
      <span className="vme-dot-line" aria-hidden="true"></span>

      <div className="vme-photo">
        <TopoRings seed={i} />
        <div
          className="vme-photo-frame is-clickable"
          role="button"
          tabIndex={0}
          aria-label={`Explorer l'étape : ${e.title}`}
          onClick={open}
          onKeyDown={(ev) => {
            if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); open(); }
          }}
        >
          {e.video
            ? <video src={e.video} poster={e.img} autoPlay loop muted playsInline />
            : <img src={e.img} alt={e.title} />}
          <span className="vme-biome">{e.biome}</span>
          <span className="vme-coord">{e.coord}</span>
        </div>
      </div>

      <div className="vme-body">
        <header className="vme-head">
          <span className="vme-step">{e.n}</span>
          <span className="vme-divider" aria-hidden="true"></span>
          <span className="vme-sub">{e.subtitle}</span>
        </header>

        <h3 className="vme-title">{e.title}</h3>

        <div className="vme-stats">
          <div><dt>CORDÉE</dt><dd>{e.cordée}</dd></div>
          <div><dt>DURÉE</dt><dd>{e.durée}</dd></div>
          <div><dt>DÉNIVELÉ</dt><dd>{e.alt}</dd></div>
          <AiUsage level={e.ia} />
        </div>

        <p className="vme-desc">{e.desc}</p>

        <div className="vme-foot">
          <ul className="vme-tags">
            {e.tags.map(t => <li key={t}>{t}</li>)}
          </ul>
          <button className="vme-cta" onClick={open}>
            EXPLORER L'ÉTAPE <span aria-hidden="true">→</span>
          </button>
        </div>
      </div>
    </article>
  );
}

function ProjectsExpedition({ onOpen }) {
  return (
    <section className="vm-projects-exp" id="projets" data-screen-label="04 Projets">
      <div className="vm-section-head">
        <div className="vm-section-km"><span className="vm-section-num">03</span>KM 03 · ÉTAPE 3 / 04</div>
        <div className="vm-section-meta">
          <span>EXPÉDITION 2024 — 2026</span>
          <span>6 ÉTAPES BALISÉES</span>
          <span>BOUCLE COMPLÈTE</span>
        </div>
      </div>

      <h2 className="vm-section-title">Decouvre <em>mes aventures.</em></h2>

      <div className="vme-intro">
        <p>
          Trois ans de projets menés en entreprise, en cours
          et en autonomie.<br></br>Chaque fiche présente le projet, la technique et le contexte.<br></br>
          <strong>Ouvrez une étape</strong> pour découvrir le projet en détail.
        </p>
        <div className="vme-legend">
          <div><span className="vme-leg-dot vme-leg-start"></span>DÉPART</div>
          <div><span className="vme-leg-dot vme-leg-step"></span>ÉTAPE</div>
          <div><span className="vme-leg-dot vme-leg-summit"></span>SOMMET</div>
        </div>
      </div>

      <div className="vme-route">
        {/* central dashed trail spine */}
        <div className="vme-spine" aria-hidden="true">
          <svg viewBox="0 0 12 1000" preserveAspectRatio="none">
            <path d="M 6 0 Q 0 250 6 500 T 6 1000" />
          </svg>
        </div>

        {EXPEDITION.map((e, i) => (
          <ExpeditionCard key={e.id} e={e} i={i} onOpen={onOpen} />
        ))}

        {/* "Sommet atteint" badge at the bottom of the trail */}
        <div className="vme-summit" aria-hidden="true">
          <div className="vme-summit-stamp">ON EST PAS ENCORE AU SOMMET !</div>
          <div className="vme-summit-coord">  Cliquez pour découvrir les autres projets </div>
        </div>
      </div>
    </section>
  );
}

function ProjectModal({ project, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  // Pas d'animation JS sur le contenu : la carte a déjà son entrée en CSS
  // (vm-pop). Un gsap.from + autoAlpha laissait le dernier élément — le
  // bouton "VOIR LE PROJET" — bloqué à visibility:hidden si le tween ne
  // se terminait pas. On garantit ici que tout le contenu reste visible.
  return (
    <div className="vm-modal" onClick={onClose}>
      <div className="vm-modal-card" onClick={e => e.stopPropagation()}>
        <button className="vm-modal-close" onClick={onClose} aria-label="Fermer">×</button>
        <div className="vm-modal-img">
          {project.video
            ? <video src={project.video} poster={project.img} autoPlay loop muted playsInline />
            : <img src={project.img} alt={project.title} />}
        </div>
        <div className="vm-modal-body">
          <h3>{project.title}</h3>
          <div className="vm-modal-meta">{project.role}</div>
          <p>{project.desc}</p>
          <div className="vm-modal-tags">
            {project.tags.map(t => <span key={t}>{t}</span>)}
          </div>
          <a className="vm-modal-cta" href={project.url} target="_blank" rel="noopener noreferrer">VOIR LE PROJET <span>→</span></a>
        </div>
      </div>
    </div>
  );
}

window.ProjectsExpedition = ProjectsExpedition;
window.ProjectModal = ProjectModal;
window.EXPEDITION = EXPEDITION;