/* ============================================================
   UI PRIMITIVES
   ============================================================ */
const money = (n) => "£" + (Number.isInteger(n) ? n : n.toFixed(2));

/* ---- Icons (simple, stroked) ---- */
const PATHS = {
  cart:"M3 4h2l2.4 12.2a1 1 0 0 0 1 .8h8.7a1 1 0 0 0 1-.8L21 8H6",
  search:"M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm6-2l4 4",
  menu:"M3 6h18M3 12h18M3 18h18",
  close:"M5 5l14 14M19 5L5 19",
  check:"M4 12l5 5L20 6",
  plus:"M12 5v14M5 12h14",
  minus:"M5 12h14",
  arrow:"M5 12h14M13 5l7 7-7 7",
  arrowL:"M19 12H5M11 5l-7 7 7 7",
  chevD:"M6 9l6 6 6-6",
  user:"M4 20a8 8 0 0 1 16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
  leaf:"M5 21c0-9 6-15 15-16 0 9-5 16-15 16zM5 21c2-4 4-6 8-8",
  truck:"M3 6h11v9H3zM14 9h4l3 3v3h-7zM7.5 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm10 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
  shield:"M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z",
  snow:"M12 2v20M4 6l16 12M20 6L4 18M2 12h20",
  spoon:"M12 13c-3 0-4-2.5-4-5.5S9.5 2 12 2s4 2.5 4 5.5S15 13 12 13zm0 0v9",
  heart:"M12 20s-7-4.4-9.2-8.3C1.2 8.7 2.6 5 6 5c2 0 3.2 1.3 4 2.5C10.8 6.3 12 5 14 5c3.4 0 4.8 3.7 3.2 6.7C19 15.6 12 20 12 20z",
  quote:"M9 7H5v6h4l-2 4h2l3-4V7zm10 0h-4v6h4l-2 4h2l3-4V7z",
  star:"M12 3l2.6 5.6 6 .8-4.4 4.2 1.1 6L12 17l-5.3 2.6 1.1-6L3.4 9.4l6-.8z",
  globe:"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0 0c-3 0-5-4-5-9s2-9 5-9m0 18c3 0 5-4 5-9s-2-9-5-9M3.5 9h17M3.5 15h17",
  clock:"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-14v5l3.5 2",
  lock:"M5 11h14v9H5zM8 11V8a4 4 0 0 1 8 0v3",
  gift:"M4 11h16v9H4zM4 7h16v4H4zm8 0v13M12 7S10.5 3 8 4s1 3 4 3zm0 0s1.5-4 4-3-1 3-4 3z",
  mail:"M3 6h18v12H3zM3 7l9 6 9-6",
  pin:"M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11zm0-8a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
};
function Icon({ name, size=20, sw=1.6, className="", fill=false }){
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill?"currentColor":"none"}
      stroke={fill?"none":"currentColor"} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
      className={className} aria-hidden="true">
      <path d={PATHS[name]||""} />
    </svg>
  );
}

/* ---- Stars ---- */
function Star({ fillPct=100 }){
  const id = "s"+Math.random().toString(36).slice(2,8);
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <defs><linearGradient id={id}><stop offset={fillPct+"%"} stopColor="currentColor"/><stop offset={fillPct+"%"} stopColor="rgba(184,137,61,.22)"/></linearGradient></defs>
      <path d={PATHS.star} fill={`url(#${id})`} stroke="none"/>
    </svg>
  );
}
function Stars({ value=5, className="" }){
  return (
    <span className={"stars "+className} role="img" aria-label={value+" out of 5 stars"}>
      {[0,1,2,3,4].map(i=>{
        const pct = Math.max(0, Math.min(100,(value-i)*100));
        return <Star key={i} fillPct={pct}/>;
      })}
    </span>
  );
}

/* ---- Reveal: handled purely in CSS now (React-safe). Kept as no-op for call sites. ---- */
function useReveal(){ return null; }

/* ---- Scene placeholder (generated atmospheric imagery) ---- */
function Scene({ kind="scene-table", label, tag, className="", style, children, ratio }){
  const st = { ...style };
  if(ratio) st.aspectRatio = ratio;
  return (
    <div className={"ph "+kind+" "+className} style={st}>
      <div className="grain"></div>
      {children}
      {tag && <div className="ph-tag">{tag}</div>}
      {label && <div className="ph-label">{label}</div>}
    </div>
  );
}

/* ---- Real product photography ---- */
const IMG = {
  tin:"assets/img/p-tin.jpg",
  blinis:"assets/img/p-blinis.jpg",
  sushi:"assets/img/p-sushi.jpg",
  champagne:"assets/img/p-champ.jpg",
  rBlinis:"assets/img/r-blinis.jpg",
  rChamp:"assets/img/r-champ.jpg",
  rCucumber:"assets/img/r-cucumber.jpg",
  rPotato:"assets/img/r-potato.jpg",
  ch1:"assets/img/ch1.jpg",
  ch2:"assets/img/ch2.jpg",
  ch3:"assets/img/ch3.jpg",
  ch4:"assets/img/ch4.jpg",
};
function Photo({ src, label, tag, className="", style, ratio, pos="center", children }){
  const st = { ...style };
  if(ratio) st.aspectRatio = ratio;
  return (
    <div className={"ph photo "+className} style={st}>
      <img className="ph-img" src={src} alt={label||"Mye Noir"} loading="lazy" style={{objectPosition:pos}}/>
      {children}
      {tag && <div className="ph-tag">{tag}</div>}
      {label && <div className="ph-label">{label}</div>}
    </div>
  );
}

/* ---- Fish mark (logo) — minimal solid silhouette, matches the tin ---- */
function FishMark({ size=26, className="", color="currentColor" }){
  return (
    <svg width={size} height={size*0.6} viewBox="0 0 50 30" className={className} aria-hidden="true" fill={color}>
      <path d="M48.5 15c0-1-3.4-3.2-8.2-4.9C36.6 4.6 30.2 1.6 22.8 1.6c-4.9 0-9.4 1.4-13 3.8C7 7 4.6 9 4.6 9s2.1.7 4.6 1.3C6.4 12 4 13.8 4 13.8s2.7 2 6.2 3.6c1.2 3.9 3.8 7.2 7.4 9.2-1 .6-2.4 1.1-4.2 1.5 0 0 3.3 1 7.4 1 7.4 0 13.8-3 17.5-8.5 4.8-1.7 8.2-3.9 8.2-4.9 0-.2-.1-.5-.3-.7.2-.2.3-.4.3-.6zM31.5 12.2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/>
    </svg>
  );
}

/* ---- The signature caviar tin (CSS only) ---- */
function CaviarTin({ size=360, open=true, style }){
  return (
    <div className="tin" style={{ width:size, height:size, ...style }} aria-label="Tin of Mye vegan caviar">
      <div className="gleam"></div>
      <div className="lip">
        {open
          ? <div className="caviar pearls" style={{ borderRadius:"50%" }}></div>
          : <div className="caviar" style={{ borderRadius:"50%", background:"radial-gradient(70% 70% at 35% 30%,#1d344c,#0b1b2a)" }}></div>}
      </div>
    </div>
  );
}

/* ============================================================
   PAYMENT MARKS — original, simplified renderings
   ============================================================ */
function VisaMark(){ return (
  <span className="pm" style={{background:"#1A1F71"}}>
    <span style={{color:"#fff",fontFamily:"var(--sans)",fontWeight:600,fontStyle:"italic",fontSize:13,letterSpacing:".02em"}}>VISA</span>
  </span>);}
function MCMark(){ return (
  <span className="pm" style={{background:"#fff"}}>
    <svg width="34" height="22" viewBox="0 0 34 22"><circle cx="13" cy="11" r="7" fill="#EB001B"/><circle cx="21" cy="11" r="7" fill="#F79E1B"/><path d="M17 5.5a7 7 0 0 0 0 11 7 7 0 0 0 0-11z" fill="#FF5F00"/></svg>
  </span>);}
function AmexMark(){ return (
  <span className="pm" style={{background:"#2E77BC"}}>
    <span style={{color:"#fff",fontWeight:700,fontSize:8.5,letterSpacing:".04em",lineHeight:1,textAlign:"center"}}>AMEX</span>
  </span>);}
function MaestroMark(){ return (
  <span className="pm" style={{background:"#fff"}}>
    <svg width="34" height="22" viewBox="0 0 34 22"><circle cx="13" cy="11" r="7" fill="#0099DF"/><circle cx="21" cy="11" r="7" fill="#ED0006"/><path d="M17 5.5a7 7 0 0 0 0 11 7 7 0 0 0 0-11z" fill="#6C6BBD"/></svg>
  </span>);}

function PaymentRow({ marks=["visa","mc","amex","maestro"], className="" }){
  const M = { visa:<VisaMark/>, mc:<MCMark/>, amex:<AmexMark/>, maestro:<MaestroMark/> };
  return <span className={"pm-row "+className}>{marks.map((m,i)=><React.Fragment key={i}>{M[m]}</React.Fragment>)}</span>;
}

/* ---- Express checkout brand buttons ---- */
function ApplePayBtn({ onClick }){ return (
  <button className="xbtn" style={{background:"#000",color:"#fff"}} onClick={onClick} aria-label="Pay with Apple Pay">
    <svg width="17" height="20" viewBox="0 0 17 20" fill="#fff" aria-hidden="true"><path d="M13.6 10.6c0-2 1.6-2.9 1.7-3-1-1.4-2.4-1.6-2.9-1.6-1.3-.1-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7-1.3 0-2.6.8-3.3 2-1.4 2.4-.4 6 1 8 .6 1 1.4 2.1 2.4 2 1-.1 1.3-.6 2.5-.6s1.5.6 2.6.6 1.7-1 2.3-2c.7-1.1 1-2.2 1-2.3-.1 0-2-.7-2.2-3.1zM11.6 4.6c.5-.7.9-1.6.8-2.6-.8 0-1.7.5-2.3 1.2-.5.6-.9 1.5-.8 2.4.9.1 1.8-.4 2.3-1z"/></svg>
    <span style={{fontWeight:500,fontSize:15}}>Pay</span>
  </button>);}

function GooglePayBtn({ onClick }){ return (
  <button className="xbtn" style={{background:"#fff",color:"#3c4043",border:"1px solid #dadce0"}} onClick={onClick} aria-label="Pay with Google Pay">
    <span style={{fontWeight:600,fontSize:15,letterSpacing:"-.01em"}}>
      <span style={{color:"#4285F4"}}>G</span><span style={{color:"#EA4335"}}>o</span><span style={{color:"#FBBC05"}}>o</span><span style={{color:"#4285F4"}}>g</span><span style={{color:"#34A853"}}>l</span><span style={{color:"#EA4335"}}>e</span>
    </span>
    <span style={{fontWeight:500,fontSize:15,color:"#5f6368"}}>Pay</span>
  </button>);}

function ShopPayBtn({ onClick }){ return (
  <button className="xbtn" style={{background:"#5A31F4",color:"#fff"}} onClick={onClick} aria-label="Pay with Shop Pay">
    <span style={{fontWeight:600,fontSize:15,letterSpacing:"-.01em"}}>shop</span>
    <span style={{fontWeight:400,fontSize:15,opacity:.92}}>Pay</span>
  </button>);}

function PayPalBtn({ onClick }){ return (
  <button className="xbtn" style={{background:"#FFC439",color:"#003087"}} onClick={onClick} aria-label="Pay with PayPal">
    <span style={{fontWeight:700,fontStyle:"italic",fontSize:15,color:"#003087"}}>Pay</span>
    <span style={{fontWeight:700,fontStyle:"italic",fontSize:15,color:"#0070BA"}}>Pal</span>
  </button>);}

Object.assign(window, {
  money, Icon, Stars, useReveal, Scene, Photo, IMG, FishMark, CaviarTin,
  VisaMark, MCMark, AmexMark, MaestroMark, PaymentRow,
  ApplePayBtn, GooglePayBtn, ShopPayBtn, PayPalBtn,
});