/* ============================================================
   BLOCKS — section heads, accordions, ingredients, faq, taste, compare
   ============================================================ */
function SectionHead({ eyebrow, title, sub, center, dark, children }){
  return (
    <div className={"sec-head"+(center?" center":"")} style={center?{marginInline:"auto"}:undefined}>
      {eyebrow && <div className={"eyebrow"+(dark?" on-dark":"")+(center?" no-rule":"")} style={center?{justifyContent:"center"}:undefined}>{eyebrow}</div>}
      {title && <h2 className="h-xl reveal" style={{marginTop:14}}>{title}</h2>}
      {sub && <p className="lede reveal d1" style={{marginTop:16,maxWidth:"56ch",marginInline:center?"auto":undefined}}>{sub}</p>}
      {children}
    </div>
  );
}

function AccItem({ q, a, open, onToggle }){
  const ref = useRef(null);
  return (
    <div className={"acc"+(open?" open":"")}>
      <button className="acc-head" onClick={onToggle} aria-expanded={open}>
        <span>{q}</span><span className="acc-ic" aria-hidden="true"></span>
      </button>
      <div className="acc-body" style={{maxHeight: open ? (ref.current?ref.current.scrollHeight+"px":"600px") : "0px"}}>
        <div className="acc-body-in" ref={ref}>{a}</div>
      </div>
    </div>
  );
}

function Accordion({ items, single=true, defaultOpen=-1 }){
  const [open,setOpen] = useState(defaultOpen);
  const [multi,setMulti] = useState({});
  if(single){
    return <div>{items.map((it,i)=>(
      <AccItem key={i} q={it.q} a={it.a} open={open===i} onToggle={()=>setOpen(open===i?-1:i)}/>
    ))}</div>;
  }
  return <div>{items.map((it,i)=>(
    <AccItem key={i} q={it.q} a={it.a} open={!!multi[i]} onToggle={()=>setMulti(m=>({...m,[i]:!m[i]}))}/>
  ))}</div>;
}

/* ---- Ingredients / allergens / storage / certs / shipping tabs ---- */
const INGR_TABS = [
  { id:"ingredients", label:"Ingredients", body:(
    <div>
      <p style={{marginBottom:14}}>Made simply, from a short list:</p>
      <div className="ingr-chips">{PRODUCT.ingredients.map(x=>(<span className="chip" key={x}>{x}</span>))}</div>
    </div>) },
  { id:"allergens", label:"Allergens", body:(
    <div>
      <p><b>Allergen information:</b> to be confirmed against the final product label.</p>
      <p className="ph-note" style={{marginTop:12}}>[ Merchant to add the confirmed allergen &amp; cross-contamination statement here. We never publish allergen claims that haven't been verified. ]</p>
    </div>) },
  { id:"storage", label:"Storage", body:(
    <div>
      <p>{PRODUCT.storage}</p>
      <p className="ph-note" style={{marginTop:12}}>[ Unopened shelf life: merchant to confirm. ]</p>
    </div>) },
  { id:"certs", label:"Certifications", body:(
    <div>
      <p style={{marginBottom:12}}>We show only verified certifications. Confirm and toggle each before launch:</p>
      <ul className="cert-list">
        {["Vegan Society","Gluten-free","Nut-free","Halal","Kosher","BRCGS / SALSA / HACCP"].map(c=>(
          <li key={c}><span className="cert-q">?</span>{c} <span className="ph-note">[ confirm ]</span></li>
        ))}
      </ul>
    </div>) },
  { id:"shipping", label:"Shipping", body:(
    <div>
      <p>Free standard UK delivery on selected orders, typically <b>2–4 business days</b>. Order by 2pm on weekdays for same-day dispatch. Tracked. International shipping coming soon.</p>
    </div>) },
];

function IngredientsPanel(){
  const [tab,setTab] = useState("ingredients");
  const cur = INGR_TABS.find(t=>t.id===tab);
  return (
    <div className="ingr-panel">
      <div className="ingr-tabs" role="tablist">
        {INGR_TABS.map(t=>(
          <button key={t.id} role="tab" aria-selected={tab===t.id} className={"ingr-tab"+(tab===t.id?" on":"")} onClick={()=>setTab(t.id)}>{t.label}</button>
        ))}
      </div>
      <div className="ingr-body">{cur.body}</div>
    </div>
  );
}

/* ---- Taste notes ---- */
function TasteNotes({ dark }){
  return (
    <div className="taste-grid">
      {TASTE.map((t,i)=>(
        <div className="taste-card reveal" style={{transitionDelay:(i*.07)+"s"}} key={t.k}>
          <span className="taste-k">{t.k}</span>
          <span className="taste-v">{t.v}</span>
        </div>
      ))}
    </div>
  );
}

/* ---- Comparison table ---- */
function CompareTable(){
  return (
    <div className="compare">
      <div className="compare-row compare-headrow">
        <div className="compare-feat"></div>
        <div className="compare-col compare-mye"><span className="pill solid">Mye Vegan Caviar</span></div>
        <div className="compare-col"><span className="small" style={{letterSpacing:".1em",textTransform:"uppercase",color:"var(--muted)"}}>Traditional Caviar</span></div>
      </div>
      {COMPARE.map((r,i)=>(
        <div className="compare-row" key={i}>
          <div className="compare-feat">{r[0]}</div>
          <div className="compare-col compare-mye"><Icon name="check" size={15} className="cmp-yes"/> {r[1]}</div>
          <div className="compare-col compare-trad">{r[2]}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { SectionHead, Accordion, AccItem, IngredientsPanel, TasteNotes, CompareTable, INGR_TABS });