/* ============================================================
   HERO — 3 switchable directions + product gallery
   ============================================================ */
const GALLERY = [
  { id:"tin", src:IMG.tin, label:"MYE NOIR · 50G TIN", pos:"center" },
  { id:"blinis", src:IMG.blinis, label:"ON BLINIS", pos:"center" },
  { id:"sushi", src:IMG.sushi, label:"ON SUSHI", pos:"center" },
  { id:"champagne", src:IMG.champagne, label:"WITH CHAMPAGNE", pos:"center" },
  { id:"cucumber", src:IMG.rCucumber, label:"CUCUMBER CUPS", pos:"center" },
  { id:"potato", src:IMG.rPotato, label:"NEW POTATO BITES", pos:"center" },
];

function GalleryMedia({ item, className, style }){
  return <Photo src={item.src} label={item.label} pos={item.pos} className={className} style={style}/>;
}

function ProductGallery({ aspect="4/5" }){
  const [active,setActive] = useState(0);
  return (
    <div className="gallery">
      <div className="gallery-main" style={{aspectRatio:aspect}}>
        <GalleryMedia item={GALLERY[active]} className="gallery-stage"/>
        <span className="pill solid gallery-flag"><Icon name="leaf" size={13}/> 100% plant-based</span>
      </div>
      <div className="gallery-thumbs">
        {GALLERY.map((g,i)=>(
          <button key={g.id} className={"gthumb"+(i===active?" on":"")} onClick={()=>setActive(i)} aria-label={"View "+g.label}>
            <img src={g.src} alt={g.label} loading="lazy"/>
          </button>
        ))}
      </div>
    </div>
  );
}

function ProofLine({ dark }){
  return (
    <div className="proofline">
      <Stars value={PRODUCT.rating} className="lg"/>
      <span className="small" style={{color:dark?"rgba(244,238,225,.8)":"var(--ink-soft)"}}>
        <b style={{color:dark?"var(--ivory)":"var(--navy-800)"}}>{PRODUCT.rating}</b> · {PRODUCT.reviewCount} verified reviews
      </span>
    </div>
  );
}

/* ---------- Direction A · The Editorial (light, two-column) ---------- */
function HeroA({ onIngredients }){
  return (
    <section className="hero-a section-sm">
      <div className="wrap-wide hero-a-grid">
        <div className="hero-a-media reveal"><ProductGallery/></div>
        <div className="hero-a-copy">
          <div className="hero-kicker reveal">
            <span className="hero-kicker-name">Mye Noir</span>
            <span className="hero-kicker-sub">Signature Seaweed Caviar · 50g</span>
          </div>
          <h1 className="display reveal d1" style={{marginTop:16}}>Restaurant-style vegan caviar, <span className="serif-it">without the fish.</span></h1>
          <p className="lede reveal d2" style={{marginTop:20,maxWidth:"46ch"}}>Glossy seaweed pearls with a clean ocean flavour and a delicate pop — the easiest way to make canapés, blinis, sushi and champagne nights feel expensive.</p>
          <div className="reveal d2" style={{marginTop:18}}><ProofLine/></div>
          <div className="reveal d3" style={{marginTop:26}}><BuyBox onIngredients={onIngredients}/></div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Direction B · The Atelier (dark, centred) ---------- */
function HeroB({ onIngredients }){
  return (
    <section className="hero-b deep on-dark">
      <div className="hero-b-glow"></div>
      <div className="wrap hero-b-inner">
        <div className="eyebrow on-dark reveal" style={{justifyContent:"center"}}>Plant-based luxury garnish</div>
        <h1 className="display reveal d1" style={{marginTop:18,maxWidth:"15ch"}}>The easiest way to make your table feel <span className="serif-it">expensive.</span></h1>
        <p className="lede reveal d2" style={{marginTop:20,maxWidth:"50ch",marginInline:"auto"}}>Seaweed pearls with a clean ocean flavour and a delicate pop. Caviar energy — no fish involved.</p>
        <div className="reveal d2" style={{marginTop:20,display:"flex",justifyContent:"center"}}><ProofLine dark/></div>
        <div className="hero-b-tin reveal d2"><CaviarTin size="min(58vw, 320px)"/></div>
        <div className="hero-b-buy reveal d3"><BuyBox onIngredients={onIngredients}/></div>
      </div>
    </section>
  );
}

/* ---------- Direction C · The Spread (gallery-forward, floating card) ---------- */
function HeroC({ onIngredients }){
  return (
    <section className="hero-c">
      <Scene kind="scene-table" className="hero-c-bg" label="DINNER TABLE SCENE">
        <div className="hero-c-overlay"></div>
      </Scene>
      <div className="wrap-wide hero-c-grid">
        <div className="hero-c-copy on-dark">
          <div className="eyebrow on-dark reveal">Canapés · sushi · blinis · champagne</div>
          <h1 className="display reveal d1" style={{marginTop:16}}>Caviar energy.<br/><span className="serif-it">No fish involved.</span></h1>
          <p className="lede reveal d2" style={{marginTop:18,maxWidth:"40ch"}}>A premium seaweed-based caviar alternative, ready to serve straight from the tin.</p>
          <div className="reveal d2" style={{marginTop:18}}><ProofLine dark/></div>
        </div>
        <div className="hero-c-card reveal d2">
          <div className="hero-c-card-head">
            <div>
              <p className="h-sm" style={{fontFamily:"var(--serif)"}}>{PRODUCT.name}</p>
              <p className="small">{PRODUCT.tagline}</p>
            </div>
            <div className="tin" style={{width:58,height:58}}><div className="gleam"></div><div className="lip"><div className="caviar pearls" style={{borderRadius:"50%"}}></div></div></div>
          </div>
          <BuyBox onIngredients={onIngredients}/>
        </div>
      </div>
    </section>
  );
}

const HEROES = { A:HeroA, B:HeroB, C:HeroC };
const HERO_META = { A:"The Editorial", B:"The Atelier", C:"The Spread" };

function HeroSwitcher({ value, onChange }){
  return (
    <div className="hero-switch" role="group" aria-label="Hero direction">
      <span className="hero-switch-label">Hero direction</span>
      <div className="hero-switch-btns">
        {["A","B","C"].map(k=>(
          <button key={k} className={"hsbtn"+(value===k?" on":"")} onClick={()=>onChange(k)} title={HERO_META[k]}>
            <b>{k}</b><span>{HERO_META[k]}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ProductGallery, GalleryMedia, ProofLine, HeroA, HeroB, HeroC, HEROES, HERO_META, HeroSwitcher });