/* Brands & Testimonials section
 * Dark navy break, monochrome logo grid (image-slot drop zones for real logos),
 * auto-rotating testimonial strip, ghost CTA.
 */

const CLIENTS = [
  { id:"client-01", name:"Jumeirah Carlton Tower", loc:"London",      yr:"2023–Present" },
  { id:"client-02", name:"Kempinski",             loc:"Muscat",      yr:"2023" },
  { id:"client-03", name:"L’Oscar London",        loc:"London",      yr:"2021–2023" },
  { id:"client-04", name:"Le Royal Hotel\u2009\u00b7 LHW", loc:"Beirut",  yr:"2014–2021" },
  { id:"client-05", name:"Four Seasons",           loc:"Beirut",      yr:"2012–2014" },
  { id:"client-06", name:"L’Ulivo · Capri",        loc:"2-Michelin★", yr:"2026" },
  { id:"client-07", name:"Christie’s",            loc:"London",      yr:"2025" },
  { id:"client-08", name:"Highgrove Gardens",      loc:"Royal Afternoon Tea", yr:"" },
];

const ACCOLADES = [
  { label:"Walpole Power List",              year:"2026" },
  { label:"Top 5 Afternoon Teas in the UK",  year:"2025" },
  { label:"Coupe du Monde de la Pâtisserie", year:"2016" },
  { label:"Best Private Art Auction Event · Christie’s", year:"2025" },
];

const QUOTES = [
  {
    text: "Walpole Power List 2026 — recognised among British luxury’s leading culinary voices.",
    name: "Walpole", role: "British Luxury Leadership", org: "London",
  },
  {
    text: "Top 5 Afternoon Teas in the United Kingdom — a programme built around heritage, technique, and a sense of occasion.",
    name: "Afternoon Tea Awards", role: "Recognition 2025", org: "UK",
  },
  {
    text: "Creator of the Highgrove Gardens Royal Afternoon Tea, inspired by the heritage of King Charles III.",
    name: "Highgrove Gardens", role: "Royal Afternoon Tea collaboration", org: "United Kingdom",
  },
];

function Brands(){
  const [idx, setIdx] = React.useState(0);
  const [reduced, setReduced] = React.useState(false);
  const [paused, setPaused] = 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);
  },[]);

  React.useEffect(()=>{
    if(reduced || paused) return;
    const t = setInterval(()=> setIdx(i => (i+1) % QUOTES.length), 6000);
    return ()=> clearInterval(t);
  },[reduced, paused]);

  return (
    <section className="ml-brands" id="work" data-reduced={reduced?"true":"false"}>
      <div className="ml-brands-noise" aria-hidden="true"></div>

      <div className="ml-brands-inner">
        <header className="ml-brands-head">
          <p className="ml-brands-eyebrow">Partners &amp; Recognition</p>
          <h2 className="ml-brands-h">A career shaped inside the kitchens of <em>five-star hospitality</em>.</h2>
          <p className="ml-brands-sub">From Beirut to London, Muscat to Lyon — the properties, ateliers, and houses where the studio has built menus, brigades, and signatures.</p>
        </header>

        <div className="ml-logo-grid">
          {CLIENTS.map((c,i)=>(
            <div
              key={c.id}
              className="ml-logo-cell"
              style={{"--i": i, "--row": Math.floor(i/4), "--d": reduced?"0ms":`${Math.floor(i/4)*120 + (i%4)*40}ms`}}
            >
              <div className="ml-logo-slot">
                {/* Production logo — lazy <img> sourced from /assets/logos/{id}.svg.
                    If missing, the image-slot drop-zone + editorial placeholder remain visible. */}
                <img
                  className="ml-logo-img"
                  src={`assets/logos/${c.id}.svg`}
                  alt=""
                  loading="lazy"
                  decoding="async"
                  style={{visibility:"hidden"}}
                  onLoad={(e)=>{ e.currentTarget.style.visibility="visible"; }}
                  onError={(e)=>{ e.currentTarget.style.display="none"; }}
                />
                <image-slot
                  id={c.id}
                  shape="rect"
                  fit="contain"
                  style={{width:"100%", height:"100%", background:"transparent"}}
                  placeholder="Drop client wordmark"
                ></image-slot>
                <div className="ml-logo-placeholder" aria-hidden="true">
                  <span className="ml-logo-mark ml-logo-wordmark">{c.name}</span>
                  <span className="ml-logo-rule"></span>
                </div>
              </div>
              <div className="ml-logo-meta">
                <span>{c.loc}</span>{c.yr ? <React.Fragment><span className="dot">·</span><span>{c.yr}</span></React.Fragment> : null}
              </div>
            </div>
          ))}
        </div>

        <div className="ml-accolades" aria-label="Recognition and awards">
          {ACCOLADES.map((a,i)=>(
            <div key={i} className="ml-accolade" style={{"--i": i}}>
              <span className="ml-accolade-yr">{a.year}</span>
              <span className="ml-accolade-label">{a.label}</span>
            </div>
          ))}
        </div>

        <div className="ml-quotes"
          onMouseEnter={()=> setPaused(true)}
          onMouseLeave={()=> setPaused(false)}>
          <div className="ml-quotes-track">
            {QUOTES.map((q,i)=>(
              <blockquote key={i} className={"ml-quote" + (i===idx ? " is-active":"")} aria-hidden={i!==idx}>
                <p className="ml-quote-text">&ldquo;{q.text}&rdquo;</p>
                <footer className="ml-quote-attr">
                  <span>{q.name}</span>
                  <span className="sep">·</span>
                  <span>{q.role}</span>
                  <span className="sep">·</span>
                  <span>{q.org}</span>
                </footer>
              </blockquote>
            ))}
          </div>
          <div className="ml-quotes-nav" role="tablist">
            {QUOTES.map((_,i)=>(
              <button
                key={i}
                className={"ml-quote-dot" + (i===idx?" is-active":"")}
                onClick={()=> setIdx(i)}
                aria-label={`Show testimonial ${i+1}`}
                aria-selected={i===idx}
              >
                <span className="ml-quote-dot-n">{String(i+1).padStart(2,"0")}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="ml-brands-cta">
          <a href="#portfolio" className="ml-cta ml-cta--ghost-onnavy">
            <span className="ml-cta-label">See Selected Projects</span>
            <span className="ml-cta-arrow"><svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="square"/></svg></span>
          </a>
          <span className="ml-brands-flourish" aria-hidden="true"></span>
        </div>
      </div>
    </section>
  );
}

window.Brands = Brands;