/* Portfolio — selected work
 * Editorial alternating image/text layout. Image cells are <image-slot> drop zones
 * so the user can fill them with real project photography. Each project carries
 * a number, name, type · city · year line, blurb, role and signature dish.
 */

const PROJECTS = [
{
  id: "prj-01",
  name: "Neeb, OM",
  type: "Patisserie Boutique",
  city: "Muscat", year: "2022",
  blurb: "A contemporary patisserie boutique in Muscat pairing refined pastry craft with a modern café experience. Luxury hospitality codes, artisanal technique, and considered design come together in a space built equally around taste and atmosphere.",
  role: "Concept · Menu · Pre-Opening",
  signature: "Mille-feuille"
},
{
  id: "prj-02",
  name: "Punta D'Oro, KSA",
  type: "Boutique Pastry Program",
  city: "Riyadh", year: "2026",
  blurb: "A ground-up patisserie concept developed for the Saudi market, positioned at the intersection of luxury hospitality and artisanal pastry.",
  role: "R&D · Standards · Training · Pre-Opening",
  signature: "Pistachio croissant, double-baked"
},
{
  id: "prj-03",
  name: "Kempinski, OM",
  type: "5★ Hotel",
  city: "Muscat", year: "2022",
  blurb: "A pastry and viennoiserie programme developed for Kempinski Hotel Muscat, designed to meet the standards of a five-star resort setting. The brief spanned breakfast service, afternoon tea, and signature desserts — each built around refined technique, seasonal ingredient work, and a presentation language consistent with the property's luxury positioning.",
  role: "Bakery R&D · Kitchen Setup",
  signature: "Za'atar sourdough miche"
},
{
  id: "prj-04",
  name: "July7",
  type: "Pop-up Pâtisserie Residency",
  city: "Muscat", year: "2021",
  blurb: "A pastry and dessert consultancy for July7 in Muscat, developing a menu built around the crêpe as a contemporary dessert format. The work covered recipe development, batter and filling systems, and presentation standards — translating a casual category into something more considered without losing its everyday appeal.",
  role: "Residency · Menu · Service",
  signature: "Rose-litchi tartelette"
}];


function ProjectCard({ project, index, reduced }) {
  const reversed = index % 2 === 1;
  const num = String(index + 1).padStart(2, "0");
  return (
    <article
      className={"ml-prj" + (reversed ? " is-reversed" : "")}
      style={{ "--d": reduced ? "0ms" : `${index * 120}ms`, fontFamily: "\"Instrument Serif\"" }}>
      
      <div className="ml-prj-image">
        {/* Production image — lazy <picture> with mobile/desktop srcset, AVIF→WebP→JPG.
                Falls back to image-slot's drag-and-drop placeholder if assets are missing. */}
        <picture className="ml-prj-pic">
          <img
            src={(window.__resources && window.__resources[project.id]) || `assets/projects/${project.id}.webp`}
            loading="lazy"
            decoding="async"
            alt={`${project.name} — ${project.type}, ${project.city}, ${project.year}`}
            onError={(e) => {e.currentTarget.parentElement.style.display = "none";}} />
          
        </picture>
        <image-slot
          id={project.id}
          shape="rect"
          fit="cover"
          style={{ width: "100%", height: "100%", position: "absolute", inset: 0, zIndex: 0 }}
          placeholder="Drop project photograph">
        </image-slot>
        <span className="ml-prj-image-tag">No. {num}</span>
      </div>

      <div className="ml-prj-copy">
        <div className="ml-prj-meta-top">
          <span className="ml-prj-num">{num}</span>
          <span className="ml-prj-rule"></span>
          <span className="ml-prj-type">{project.type}</span>
        </div>

        <h3 className="ml-prj-name" style={{ fontFamily: "\"Instrument Serif\"" }}>{project.name}</h3>

        <p className="ml-prj-place">
          <span>{project.city}</span><span className="dot">·</span><span>{project.year}</span>
        </p>

        <p className="ml-prj-blurb" style={{ fontFamily: "\"Instrument Serif\"" }}>{project.blurb}</p>

        <dl className="ml-prj-spec">
          <div>
            <dt>Role</dt>
            <dd>{project.role}</dd>
          </div>
          <div>
            <dt>Signature</dt>
            <dd>{project.signature}</dd>
          </div>
        </dl>
      </div>
    </article>);

}

function Portfolio() {
  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-portfolio" id="portfolio" data-reduced={reduced ? "true" : "false"}>
      <div className="ml-portfolio-inner">
        <header className="ml-portfolio-head">
          <p className="ml-brands-eyebrow">Portfolio · Selected Work</p>
          <h2 className="ml-portfolio-h">Four recent kitchens. Four very different rooms.</h2>
          <p className="ml-portfolio-sub">A short index of work shipped in the last twenty-four months — boutique patisserie, hotel pastry programs, bakery openings, and a residency or two.</p>
        </header>

        <div className="ml-portfolio-list">
          {PROJECTS.map((p, i) =>
          <ProjectCard key={p.id} project={p} index={i} reduced={reduced} />
          )}
        </div>

        <footer className="ml-portfolio-foot">
          <span className="ml-portfolio-foot-rule"></span>
          <span className="ml-portfolio-foot-label">
            Engagements available from Q3 — by introduction or written brief
          </span>
        </footer>
      </div>
    </section>);

}

window.Portfolio = Portfolio;