function Portfolio() {
  const projects = [
    {
      url: "https://www.ar-shipping.com/",
      name: "AR Shipping",
      tag: "Logistique & Transport",
      desc: "Plateforme de transport international avec tracking en temps réel, dashboard client et gestion des expéditions vers l'Afrique de l'Ouest.",
    },
    {
      url: "https://spiaspac.com/",
      name: "Spiaspac",
      tag: "Élevage & E-commerce",
      desc: "Site vitrine et boutique en ligne pour une société d'élevage agro-sylvio-pastorale — formations, produits certifiés et vente directe.",
    },
    {
      url: "https://www.opuscrew.de/",
      name: "Opus Crew",
      tag: "Plateforme RH",
      desc: "Plateforme de mise en relation pour professionnels du beauty, retail et événementiel en Allemagne — profil, candidature et matching en ligne.",
    },
    {
      url: "https://discover-studio.de/",
      name: "Discover Studio",
      tag: "Agence créative",
      desc: "Site institutionnel de notre agence digitale basée en Allemagne — services, réalisations et prise de contact simplifiée.",
    },
    {
      url: "https://localflow.studio/",
      name: "LocalFlow Studio",
      tag: "SaaS B2B",
      desc: "Outil SaaS de prospection locale : scraping Google Maps ciblé, extraction de contacts qualifiés et génération de leads pour les entreprises.",
    },
    {
      url: "https://ar-prod.de/",
      name: "AR Productions",
      tag: "Restaurant & Événementiel",
      desc: "Site vitrine pour un restaurant / espace événementiel — menu, réservation en ligne et présentation de l'ambiance.",
    },
  ];

  return (
    <section id="projets" className="portfolio-section" data-screen-label="Portfolio">
      <div className="container">
        <div className="reveal" style={{ textAlign: "center", marginBottom: 56 }}>
          <div className="section-eyebrow">RÉALISATIONS</div>
          <h2 className="section-title">Des projets livrés,<br />des clients satisfaits</h2>
          <p className="section-sub">
            Quelques exemples concrets de sites et plateformes que nous avons conçus et déployés.
          </p>
        </div>
        <div className="portfolio-grid">
          {projects.map((p, i) => (
            <a
              key={i}
              href={p.url}
              target="_blank"
              rel="noopener noreferrer"
              className="portfolio-card reveal"
              style={{ transitionDelay: `${i * 0.08}s` }}
            >
              <div className="portfolio-preview">
                <img
                  src={`https://s0.wp.com/mshots/v1/${encodeURIComponent(p.url)}?w=1200&h=750`}
                  alt={p.name}
                  loading="lazy"
                  style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top", display: "block" }}
                />
                <div className="portfolio-overlay">
                  <span className="portfolio-visit">Voir le site ↗</span>
                </div>
              </div>
              <div className="portfolio-info">
                <span className="portfolio-tag">{p.tag}</span>
                <span className="portfolio-name">{p.name}</span>
                <p className="portfolio-desc">{p.desc}</p>
              </div>
            </a>
          ))}
        </div>
        <div className="reveal" style={{ textAlign: "center", marginTop: 48 }}>
          <button
            className="btn btn-outline"
            onClick={() => window.dispatchEvent(new CustomEvent("openContactModal"))}
            style={{ display: "inline-flex", alignItems: "center", gap: 10 }}
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="17" height="17"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
            Demander plus de références
          </button>
        </div>
      </div>
    </section>
  );
}

window.Portfolio = Portfolio;