// Work — projects section with featured + index list + detail modal.

const PROJECTS = [
  {
    id: 'checkeasy',
    name: 'CheckEasy',
    tagName: <><span>Check</span><span className="dim">Easy<span className="dot">.</span></span></>,
    industry: 'Conciergerie · Immobilier',
    year: '2026',
    featured: true,
    image: '/assets/projects/checkeasy-dashboard.webp',
    short: "SaaS de gestion de logements pour conciergeries Airbnb. Parcours ménage, signalements analysés par IA Vision, tableau de bord temps réel, communication voyageur automatisée sur WhatsApp. Migration complète depuis Bubble.",
    challenge: "L'app initiale tournait sur Bubble. Limitée à 200 logements, pas d'app mobile, signalements traités à la main. L'objectif : multiplier par dix sans recruter.",
    work: [
      "Migration complète Bubble → React + Supabase (3 mois)",
      "Parcours ménage : check-list dynamique, photos signalements, signature client",
      "Analyse IA des signalements terrain (détection casse, propreté, urgence)",
      "Tableau de bord temps réel pour managers + alertes WhatsApp",
      "Backoffice automatisations Stripe, agenda, contrats",
    ],
    stack: ['React', 'Supabase', 'GPT-4 Vision', 'Stripe', 'WhatsApp API'],
    outcome: ['2 400+ logements gérés', '12 villes', '47 conciergeries clientes', 'Marseille → Lisbonne → Barcelone'],
  },
  {
    id: 'rafa',
    name: 'Rafa',
    industry: 'RH · Recrutement terrain',
    year: '2025',
    short: "SaaS de recrutement terrain propulsé par l'IA. Campagnes social media automatisées, scoring candidats, relances SMS intelligentes, gestion des no-shows. L'agent IA qualifie et séquence — le recruteur ne gère que les entretiens.",
    challenge: "Les recruteurs terrain passaient 70 % du temps à qualifier et relancer des candidats qui ne venaient pas. Le taux de no-show dépassait 40 %.",
    work: [
      "Campagnes Meta Ads automatisées avec ciblage géographique",
      "Scoring candidats IA (profil, réactivité, localisation)",
      "Séquences SMS de relance intelligentes pré-entretien",
      "Dashboard recruteur avec pipeline visuel temps réel",
    ],
    stack: ['React', 'Node.js', 'Agents IA', 'SMS API', 'Meta Ads API'],
    outcome: ['No-show ÷ 3', '200+ recrutements par mois', 'Coût par candidat qualifié ÷ 2'],
  },
  {
    id: 'coldreach',
    name: 'ColdReach',
    industry: 'Ventes · Prospection B2B',
    year: '2025',
    short: "Plateforme de prospection commerciale multicanal. Séquences email et LinkedIn automatisées, personnalisation par prospect, suivi des deals en temps réel. L'agent IA rédige, adapte et envoie — le commercial ne gère que les rendez-vous.",
    challenge: "800 emails copiés-collés par semaine, 1,2 % de taux de réponse. Les commerciaux passaient 60 % de leur temps à qualifier au lieu de vendre.",
    work: [
      "Séquences outbound personnalisées par prospect (zéro template générique)",
      "Intégration LinkedIn + email avec tests A/B automatiques",
      "Scoring d'engagement et alertes rendez-vous en temps réel",
      "Dashboard pipeline avec prévisions IA",
    ],
    stack: ['Next.js', 'PostgreSQL', 'API LinkedIn', 'Agents IA', 'Email API'],
    outcome: ['Taux de réponse × 4', 'Pipeline qualifié auto-alimenté', 'Temps commercial ÷ 2'],
  },
  {
    id: 'novalt',
    name: 'Novalt',
    industry: 'Finance · Fusions-acquisitions',
    year: '2025',
    short: "Site vitrine premium et outils digitaux pour cabinet de conseil en M&A. Présentation des transactions, qualification des prospects, data room sécurisée. Agent IA de pré-scoring des dossiers entrants.",
    challenge: "Le cabinet utilisait PDF et emails pour traiter les dossiers d'acquisition. Pas de qualification automatique, pas de data room sécurisée.",
    work: [
      "Site vitrine premium avec présentation des transactions",
      "Qualification prospects automatisée via formulaire intelligent",
      "Data room sécurisée avec gestion des accès par dossier",
      "Agent IA de pré-scoring et synthèse financière",
    ],
    stack: ['Next.js', 'Tailwind', 'Supabase', 'Agents IA'],
    outcome: ['Qualification prospects × 3', 'Temps de traitement dossiers ÷ 2', 'Data room opérationnelle en 48h'],
  },
];

const ProjectModal = ({ project, onClose }) => {
  React.useEffect(() => {
    if (!project) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [project, onClose]);

  if (!project) return null;
  return (
    <div className="proj-modal" onClick={onClose}>
      <article className="proj-modal__inner" onClick={(e) => e.stopPropagation()}>
        <button className="proj-modal__close" onClick={onClose} aria-label="Fermer">×</button>
        <header className="proj-modal__head">
          <span className="proj-modal__meta">{project.year} · {project.industry}</span>
          <h3 className="proj-modal__name">{project.name}.</h3>
          <p className="proj-modal__short">{project.short}</p>
        </header>
        {project.image && (
          <div className="proj-modal__image">
            <img src={project.image} alt={`${project.name} — aperçu`} loading="lazy" />
          </div>
        )}
        <div className="proj-modal__body">
          <div className="proj-modal__block">
            <span className="proj-modal__block-lbl">[ Le problème ]</span>
            <p>{project.challenge}</p>
          </div>
          <div className="proj-modal__block">
            <span className="proj-modal__block-lbl">[ Ce qu'on a fait ]</span>
            <ul>{project.work.map((w, i) => <li key={i}><span>/</span>{w}</li>)}</ul>
          </div>
          <div className="proj-modal__block">
            <span className="proj-modal__block-lbl">[ Stack ]</span>
            <div className="proj-modal__stack">{project.stack.map(t => <span key={t}>{t}</span>)}</div>
          </div>
          <div className="proj-modal__block">
            <span className="proj-modal__block-lbl">[ Résultat ]</span>
            <ul>{project.outcome.map((o, i) => <li key={i}><span>✓</span>{o}</li>)}</ul>
          </div>
        </div>
      </article>
    </div>
  );
};

const Work = () => {
  const [openId, setOpenId] = React.useState(null);
  const [hoverId, setHoverId] = React.useState(null);
  const open = (id) => setOpenId(id);
  const close = () => setOpenId(null);
  const current = PROJECTS.find(p => p.id === openId);
  const featured = PROJECTS.find(p => p.featured);
  const others = PROJECTS.filter(p => !p.featured);

  return (
    <section className="work" data-screen-label="05 Work">
      <div className="work__head">
        <div className="work__head-left">
          <span className="b-marker"><span className="b-marker__br">[</span> 06 / Réalisations <span className="b-marker__br">]</span></span>
          <h2 className="work__title">
            Chaque projet apprend un <em>métier.</em>
          </h2>
        </div>
      </div>

      {/* ===== FEATURED ===== */}
      <article className="work__featured" onClick={() => open(featured.id)}>
        <div className="work__featured-side">
          <span className="work__featured-side-num">01</span>
          <span className="work__featured-side-lbl">PROJET PHARE</span>
          <span className="work__featured-side-yr">{featured.year}</span>
        </div>

        <div className="work__featured-poster">
          <div className="work__featured-poster-tag">
            <span className="work__featured-poster-dot"></span>
            LIVE · CHECKEASY.APP
          </div>
          <h3 className="work__featured-poster-name">{featured.tagName}</h3>
          {featured.image && (
            <div className="work__featured-poster-img">
              <img src={featured.image} alt="CheckEasy — tableau de bord" loading="lazy" />
            </div>
          )}
          <p className="work__featured-poster-desc">{featured.short}</p>
          <div className="work__featured-poster-rule"></div>
          <div className="work__featured-poster-stats">
            <div><b>2.4k</b><small>logements gérés</small></div>
            <div><b>12</b><small>villes</small></div>
            <div><b>47</b><small>clientes</small></div>
            <div><b>3×</b><small>scalabilité</small></div>
          </div>
          <div className="work__featured-poster-foot">
            <span>MARSEILLE → LISBONNE → BARCELONE</span>
            <span className="work__featured-poster-cta">Voir l'étude de cas →</span>
          </div>
        </div>
      </article>

      {/* ===== INDEX LIST ===== */}
      <div className="work__index">
        {others.map((p, i) => (
          <article
            key={p.id}
            className={`work__row ${hoverId === p.id ? 'is-hover' : ''}`}
            onClick={() => open(p.id)}
            onMouseEnter={() => setHoverId(p.id)}
            onMouseLeave={() => setHoverId(null)}
          >
            <span className="work__row-num">0{i + 2}</span>
            <span className="work__row-industry">{p.industry}</span>
            <span className="work__row-name">{p.name}</span>
            <span className="work__row-stack">
              {p.stack.slice(0, 3).map(t => <span key={t}>{t}</span>)}
            </span>
            <span className="work__row-cta" aria-hidden="true">→</span>
            <p className="work__row-desc">{p.short}</p>
          </article>
        ))}
      </div>

      <ProjectModal project={current} onClose={close} />
    </section>
  );
};

window.Work = Work;