/* global React */
const CASES = [
  { id: "baumaniere", img: "assets/photo-beaumaniere-1.jpg", cat: "Hôtellerie · 3★", title: "Baumanière", loc: "Les Baux-de-Provence", year: "2025" },
  { id: "phebus", img: "assets/photo-phebus-1.jpg", cat: "Restauration · 1★", title: "Le Phébus & Spa", loc: "Joucas · 84", year: "2024" },
  { id: "sevin", img: "assets/photo-sevin.jpg", cat: "Restauration · 1★", title: "Guilhem Sevin", loc: "Avignon · 84", year: "2024" },
  { id: "phebus2", img: "assets/photo-phebus-3.jpg", cat: "Hôtellerie", title: "Domaine des Tilleuls", loc: "Vaucluse", year: "2024" },
  { id: "santacruz", img: "assets/photo-santacruz.jpg", cat: "Événementiel", title: "Santa Cruz · Univalle", loc: "Colombie", year: "2024" },
  { id: "aerial", img: "assets/photo-aerial-DJI.jpg", cat: "Aérien · DJI", title: "Repérage drone", loc: "Lubéron", year: "2024" },
];

function CaseStudyGrid({ onOpen }) {
  return (
    <section className="fn-section fn-section--alt" id="realisations">
      <div className="fn-section-head fn-section-head--row">
        <div>
          <span className="eyebrow">Réalisations</span>
          <h2 className="display-m">Sélection<br/>de maisons.</h2>
        </div>
        <p className="lead" style={{maxWidth: 380}}>
          Une partie des établissements que nous avons accompagnés. Plus de 40 références
          en gastronomie, hôtellerie et artisanat premium.
        </p>
      </div>
      <div className="fn-cases-grid">
        {CASES.map((c, i) => (
          <article key={c.id} className={"fn-case" + (i === 0 ? " fn-case--lg" : "")} onClick={() => onOpen && onOpen(c)}>
            <div className="fn-case-img" style={{backgroundImage: `url(${c.img})`}}/>
            <div className="fn-case-meta">
              <span className="caption">{c.cat} · {c.year}</span>
              <h3>{c.title}</h3>
              <span className="caption" style={{color: "var(--fg-3)"}}>{c.loc}</span>
            </div>
            <img src="assets/arrow-fennec.png" alt="" className="fn-case-arrow"/>
          </article>
        ))}
      </div>
    </section>
  );
}

window.CaseStudyGrid = CaseStudyGrid;
window.CASES = CASES;