/* Services section
 * Sticky-left intro + 6 expandable service cards on pale stone.
 * Cards reveal a deliverables list when clicked.
 */

const SERVICES = [
  {
    title: "Concept Development — From Scratch",
    blurb: "A new brand, a new room, a new product. We build the concept from a blank page — idea, story, menu architecture, and the operating model behind it.",
    bullets: [
      "Brand strategy, naming and positioning",
      "Menu architecture and signature line",
      "Operating model and unit economics",
      "Feasibility study and roll-out roadmap",
    ],
  },
  {
    title: "Pre-Opening & Launch",
    blurb: "On-site leadership from kitchen build to opening night. Equipment, suppliers, HACCP, soft launch — and the first ninety days of service.",
    bullets: [
      "Kitchen layout and equipment specification",
      "Supplier sourcing and ingredient calibration",
      "HACCP, SOPs and food-safety documentation",
      "Soft launch, opening week and Day-90 review",
    ],
  },
  {
    title: "Branding & Visual Identity",
    blurb: "Identity systems built for hospitality — a wordmark that survives signage, a palette that survives photography, a tone of voice that survives the menu.",
    bullets: [
      "Wordmark, monogram and signage system",
      "Type, colour and photographic direction",
      "Menu design, print and digital touchpoints",
      "Brand book and franchise-ready guidelines",
    ],
  },
  {
    title: "Packaging & Product Design",
    blurb: "Retail and to-go packaging that protects the product on the journey home and looks like it was meant to be photographed.",
    bullets: [
      "Boxes, sleeves, ribbons and inserts",
      "Structural design and cold-chain testing",
      "Label compliance and shelf-life optimisation",
      "Retail and HoReCa private-label lines",
    ],
  },
  {
    title: "Staff Recruitment & Training",
    blurb: "We find the head pastry chef, build the brigade around them, and run hands-on masterclasses until the standard sticks.",
    bullets: [
      "Head chef and brigade recruitment",
      "Pastry, bread and chocolate masterclasses",
      "Plating and finishing language",
      "Train-the-trainer protocols and SOPs",
    ],
  },
  {
    title: "Franchise Development",
    blurb: "Turning a single kitchen into a system that can be replicated — in another city, in another country, without losing what made it work.",
    bullets: [
      "Franchise model and unit playbook",
      "Central kitchen and supply-chain design",
      "Brand standards and franchisee training",
      "Audit cadence and quality control",
    ],
  },
];

function ServiceCard({ index, item, open, onToggle, reduced }){
  const num = String(index+1).padStart(2,"0");
  return (
    <div
      className={"ml-svc" + (open ? " is-open":"")}
      style={{"--i": index, "--d": reduced ? "0ms" : `${index*80}ms`}}
      onClick={onToggle}
      role="button"
      aria-expanded={open}
      tabIndex={0}
      onKeyDown={(e)=>{ if(e.key==="Enter"||e.key===" "){ e.preventDefault(); onToggle(); }}}
    >
      <div className="ml-svc-head">
        <span className="ml-svc-num">{num}</span>
        <div className="ml-svc-body">
          <h3 className="ml-svc-title">{item.title}</h3>
          <p className="ml-svc-blurb">{item.blurb}</p>
          <div className="ml-svc-detail" aria-hidden={!open}>
            <div className="ml-svc-detail-inner">
              <ul>
                {item.bullets.map((b,i)=>(<li key={i}><span className="ml-svc-bullet">—</span>{b}</li>))}
              </ul>
            </div>
          </div>
        </div>
        <span className="ml-svc-arrow" aria-hidden="true">
          {open
            ? <svg width="16" height="16" viewBox="0 0 16 16"><path d="M3 8h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>
            : <svg width="16" height="16" viewBox="0 0 16 16"><path d="M1 8h12M10 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" fill="none"/></svg>}
        </span>
      </div>
    </div>
  );
}

function Services(){
  const [open, setOpen] = React.useState(0);   // first card open by default
  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-services" id="services" data-reduced={reduced?"true":"false"}>
      <div className="ml-services-inner">
        <aside className="ml-services-aside">
          <div className="ml-services-sticky">
            <p className="ml-next-eyebrow">Discipline-led</p>
            <h2 className="ml-services-h">End-to-end <em>bakery</em> studio.</h2>
            <p className="ml-services-sub">Concept, kitchen, brand, packaging, people, and franchise — handled end-to-end by one studio.</p>
            <div className="ml-services-meta">
              <div className="ml-stat">
                <span className="ml-stat-num">01</span>
                <div className="ml-stat-body">
                  <span className="ml-stat-val">50+</span>
                  <span className="ml-stat-label">Bakery and pastry openings delivered</span>
                </div>
              </div>
              <div className="ml-stat">
                <span className="ml-stat-num">02</span>
                <div className="ml-stat-body">
                  <span className="ml-stat-val">20 years</span>
                  <span className="ml-stat-label">Of executive pastry and kitchen leadership</span>
                </div>
              </div>
              <div className="ml-stat">
                <span className="ml-stat-num">03</span>
                <div className="ml-stat-body">
                  <span className="ml-stat-val">8 markets</span>
                  <span className="ml-stat-label">UAE · KSA · Qatar · Oman · Lebanon · UK · France · Italy</span>
                </div>
              </div>
            </div>
          </div>
        </aside>

        <div className="ml-services-list">
          {SERVICES.map((s,i)=>(
            <ServiceCard
              key={i}
              index={i}
              item={s}
              open={open===i}
              onToggle={()=> setOpen(open===i ? -1 : i)}
              reduced={reduced}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;