/* Creations — product gallery.
 * Editorial masonry of drag-and-drop image slots so the user drops in their own
 * pastry photography (persists across reloads). Each tile carries a caption and
 * a small category tag. Sits on the navy surface between Portfolio and Partners.
 */

const CREATIONS = [
  { id:"cr-01", name:"Vanilla & Candied Citrus Baba", tag:"Savarin",      span:"tall", src:"assets/creations/cr-01.jpg" },
  { id:"cr-02", name:"Pain au Chocolat",             tag:"Viennoiserie", span:"wide", src:"assets/creations/cr-02.png" },
  { id:"cr-03", name:"Pistachio Macaron",            tag:"Macaron",      span:"reg",  src:"assets/creations/cr-03.png" },
  { id:"cr-04", name:"Rose Macaron",                 tag:"Macaron",      span:"reg",  src:"assets/creations/cr-04.jpg" },
  { id:"cr-05", name:"Paris-Brest",                  tag:"Choux",        span:"wide", src:"assets/creations/cr-05.png" },
  { id:"cr-06", name:"Chocolate Carnation",          tag:"Showpiece",    span:"tall", src:"assets/creations/cr-06.jpg" },
  { id:"cr-07", name:"Strawberry Cream Tart",        tag:"Patisserie",   span:"reg",  src:"assets/creations/cr-07.jpg" },
  { id:"cr-08", name:"Chocolate & Raspberry",        tag:"Plated",       span:"reg",  src:"assets/creations/cr-08.jpg" },
];

function Creations(){
  const [reduced, setReduced] = React.useState(false);
  React.useEffect(()=>{
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const set = ()=> setReduced(mq.matches);
    set(); mq.addEventListener?.("change", set);
    return ()=> mq.removeEventListener?.("change", set);
  },[]);

  return (
    <section className="ml-creations" id="creations" data-reduced={reduced?"true":"false"} aria-label="Product gallery">
      <div className="ml-creations-inner">
        <header className="ml-creations-head">
          <p className="ml-brands-eyebrow">The Work · Our Creations</p>
          <h2 className="ml-creations-h">A taste of what comes out of the <em>kitchen</em>.</h2>
          <p className="ml-creations-sub">Signatures developed across hotels, boutiques, and openings — pastry, viennoiserie, plated desserts, and showpieces.</p>
        </header>

        <div className="ml-creations-grid">
          {CREATIONS.map((c,i)=>(
            <figure
              key={c.id}
              className={"ml-cr-tile ml-cr-tile--" + c.span}
              style={{"--d": reduced ? "0ms" : `${i*70}ms`}}
            >
              <div className="ml-cr-media">
                <image-slot
                  id={c.id}
                  shape="rect"
                  fit={c.fit || "cover"}
                  {...(c.src || (window.__resources && window.__resources[c.id]) ? { src: (window.__resources && window.__resources[c.id]) || c.src } : {})}
                  style={{width:"100%", height:"100%"}}
                  placeholder="Drop product photo"
                ></image-slot>
                <span className="ml-cr-tag">{c.tag}</span>
              </div>
              <figcaption className="ml-cr-cap">{c.name}</figcaption>
            </figure>
          ))}
        </div>

        <footer className="ml-creations-foot">
          <span className="ml-creations-foot-rule"></span>
          <span className="ml-creations-foot-label">More on request · Full portfolio available under NDA</span>
        </footer>
      </div>
    </section>
  );
}

window.Creations = Creations;