/* global React */
const SERVICES = [
  {
    n: "01",
    title: "Création de contenu",
    desc: "Photo, vidéo, motion, son. Nous venons sur le terrain pour traduire votre savoir-faire en images.",
    items: ["Reportage cuisine", "Portraits chef", "Reels & TikTok", "Drone DJI", "Plats / produit"],
  },
  {
    n: "02",
    title: "Réseaux sociaux",
    desc: "Stratégie éditoriale, déclinaisons, publication, reporting — pour durer, pas pour faire un coup.",
    items: ["Calendrier éditorial", "Community management", "Reporting mensuel"],
  },
  {
    n: "03",
    title: "Graphisme",
    desc: "Identité visuelle, supports print & web, templates pour vos réseaux. Une cohérence sur toute la maison.",
    items: ["Identité visuelle", "Print & menu", "Web & landing", "Templates RS"],
  },
  {
    n: "04",
    title: "Formation",
    desc: "Bases des réseaux sociaux et productivité Notion. Pour vos équipes, en présentiel ou à distance.",
    items: ["Bases RS", "Notion · 2e cerveau", "Workshops cuisine"],
  },
  {
    n: "05",
    title: "Distribution & promo",
    desc: "Diffusion stratégique des contenus produits. Notoriété, conversion, réservation — les outcomes qui comptent.",
    items: ["Plan de diffusion", "Paid Meta / TikTok", "Reporting"],
  },
];

function ServicesGrid() {
  return (
    <section className="fn-section" id="services">
      <div className="fn-section-head">
        <span className="eyebrow">Services</span>
        <h2 className="display-m">Cinq métiers,<br/>une seule maison.</h2>
      </div>
      <div className="fn-services-grid">
        {SERVICES.map((s) => (
          <article key={s.n} className="fn-service">
            <div className="fn-service-num">{s.n}</div>
            <h3>{s.title}</h3>
            <p>{s.desc}</p>
            <ul className="fn-service-items">
              {s.items.map((it) => (
                <li key={it}><span className="fn-bullet">—</span> {it}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </section>
  );
}

window.ServicesGrid = ServicesGrid;