/* ============================================================
   HOME / PDP — assembles hero + all sections
   ============================================================ */
const TRUST = [
  ["leaf","100% plant-based"],
  ["spoon","Ready to serve"],
  ["shield","Made from seaweed, not fish roe"],
  ["truck","Free UK delivery on selected orders"],
  ["snow","Refrigerate after opening"],
  ["heart","Made for hosting"],
];

function TrustStrip(){
  const items = [...TRUST,...TRUST];
  return (
    <div className="trust-strip dark on-dark">
      <div className="marquee">
        <div className="marquee-track">
          {items.map(([ic,t],i)=>(<span className="trust-item" key={i}><Icon name={ic} size={17}/> {t} <span className="trust-dot">✦</span></span>))}
        </div>
      </div>
    </div>
  );
}

function UseCases(){
  return (
    <section className="section" id="serve">
      <div className="wrap-wide">
        <div className="between" style={{alignItems:"flex-end",gap:24,flexWrap:"wrap",marginBottom:46}}>
          <SectionHead eyebrow="No prep needed" title={<>Serve it like a restaurant.</>} sub="Add a spoonful to blinis, sushi, canapés or crisps for instant dinner-party theatre."/>
          <Link to="/recipes" className="btn btn-ghost">See all serving ideas <Icon name="arrow" size={16} className="arr"/></Link>
        </div>
        <div className="usecase-grid">
          {USE_CASES.map((u,i)=>(
            <article className="usecase reveal" style={{transitionDelay:(i*.07)+"s"}} key={u.id}>
              <Photo src={IMG[u.img]} label={u.label} className="usecase-img"/>
              <div className="usecase-body">
                <h3 className="h-sm">{u.title}</h3>
                <p className="small" style={{marginTop:8,color:"var(--ink-soft)"}}>{u.copy}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function TasteSection(){
  return (
    <section className="section deep on-dark">
      <div className="wrap-wide">
        <div className="taste-top">
          <div>
            <SectionHead dark eyebrow="Taste & texture" title={<>What does vegan<br/>caviar taste like?</>}/>
          </div>
          <p className="lede" style={{maxWidth:"42ch"}}>Mye is made for a clean, briny, ocean-inspired flavour with delicate pearls that add texture and visual impact to small plates. Savoury and elegant — designed to <span className="serif-it">complement</span>, never overpower.</p>
        </div>
        <div className="mt-4"><TasteNotes dark/></div>
        <p className="small reveal" style={{marginTop:24,color:"rgba(244,238,225,.6)",maxWidth:"60ch"}}>
          Inspired by the caviar experience — a plant-based alternative to traditional caviar, not an identical copy of sturgeon roe.
        </p>
      </div>
    </section>
  );
}

function CompareSection(){
  return (
    <section className="section cream-bg">
      <div className="wrap">
        <SectionHead center eyebrow="Mye vs traditional" title="Luxury garnish. No fish involved."
          sub="The same visual drama on the plate — built for plant-based hosting and a friendlier price."/>
        <div className="mt-4 reveal"><CompareTable/></div>
      </div>
    </section>
  );
}

function BundleSection(){
  const cart = useCart();
  return (
    <section className="section" id="bundles">
      <div className="wrap">
        <SectionHead center eyebrow="Choose your table size" title="One tin, or enough for the party"
          sub="Every pack is the same Mye Noir — the more you gather, the less per tin. Free UK delivery on selected orders."/>

        {/* anchor band */}
        <div className="bundle-anchor reveal">
          <span><s>Traditional caviar £{TRAD_CAVIAR_LOW}+</s> / 50g</span>
          <Icon name="arrow" size={15}/>
          <span className="bundle-anchor-mye">Mye Noir from <b>{money(TIN_PRICE)}</b> / 50g · free spoon over {money(SPOON_GIFT_THRESHOLD)}</span>
        </div>

        <div className="bundle-cards bundle-cards-4 mt-3">
          {BUNDLES.map(b=>{
            const on = cart.selected===b.id;
            const save = b.compare? b.compare-b.price : 0;
            const gift = b.price>=SPOON_GIFT_THRESHOLD;
            return (
              <div className={"bcard reveal"+(on?" on":"")+(b.id==="host"?" feat":"")+(b.decoy?" decoy":"")} key={b.id}>
                {b.badge && <span className={"bcard-badge"+(b.id==="host"?" gold":"")}>{b.badge}</span>}
                <div className="bcard-vis">
                  <div className="bcard-tins">
                    {Array.from({length:Math.min(b.tins,4)}).map((_,i)=>(
                      <div className="tin bcard-tin" style={{ "--i":i }} key={i}><div className="gleam"></div><div className="lip"><div className="caviar pearls" style={{borderRadius:"50%"}}></div></div></div>
                    ))}
                  </div>
                </div>
                <h3 className="h-sm">{b.name}</h3>
                <p className="bcard-tins-label">{b.tins} × 50g · {money(perTin(b))}/tin</p>
                <p className="small" style={{color:"var(--ink-soft)",minHeight:40}}>{b.blurb}</p>
                <div className="bcard-price">
                  <span className="tnum" style={{fontFamily:"var(--serif)",fontSize:30,fontWeight:600}}>{money(b.price)}</span>
                  {b.compare && b.compare>b.price && <span className="bsel-was tnum" style={{fontSize:15}}>{money(b.compare)}</span>}
                  {save>0 && <span className="pill green" style={{marginLeft:"auto"}}>Save {money(save)}</span>}
                </div>
                {gift && <p className="bcard-gift"><Icon name="gift" size={13}/> Free mother-of-pearl spoon</p>}
                <button className={"btn btn-block "+(on||b.id==="host"?"btn-gold":"btn-ghost")} style={{marginTop:gift?12:16}}
                  onClick={()=>{cart.setSelected(b.id);cart.add(b.id,1);}}>
                  Add {b.name} <Icon name="arrow" size={16} className="arr"/>
                </button>
                <p className="bcard-use">{b.use}</p>
              </div>
            );
          })}
        </div>
        <div className="bundle-trade reveal">
          <div>
            <p className="eyebrow no-rule">For restaurants &amp; events</p>
            <p className="h-sm" style={{marginTop:6}}>Serving Mye at a restaurant, supper club or wedding?</p>
          </div>
          <Link to="/wholesale" className="btn btn-ghost">Request trade pricing <Icon name="arrow" size={16} className="arr"/></Link>
        </div>
      </div>
    </section>
  );
}

function IngredientsSection(){
  return (
    <section className="section paper-bg" id="ingredients">
      <div className="wrap-wide ingr-layout">
        <div>
          <SectionHead eyebrow="Clear on ingredients" title="Simple to serve. Nothing to hide."
            sub="Everything you'd want to check before serving — ingredients, allergens, storage and shipping, all in one tap."/>
          <div className="ingr-quick mt-3">
            <div className="ingr-quick-i"><Icon name="leaf" size={18}/><div><b>Plant-based</b><span>No fish roe, no animal products</span></div></div>
            <div className="ingr-quick-i"><Icon name="snow" size={18}/><div><b>Keep it chilled</b><span>Refrigerate once opened, use within 3 months</span></div></div>
            <div className="ingr-quick-i"><Icon name="spoon" size={18}/><div><b>Finishing garnish</b><span>Best served cold, straight from the tin</span></div></div>
          </div>
        </div>
        <div className="reveal d1"><IngredientsPanel/></div>
      </div>
    </section>
  );
}

function ReviewsPreview(){
  return (
    <section className="section cream-bg">
      <div className="wrap-wide">
        <div className="between" style={{alignItems:"flex-end",gap:24,flexWrap:"wrap",marginBottom:42}}>
          <div>
            <SectionHead eyebrow="Real customers · real tables" title="Loved at dinner tables across the UK"/>
            <div className="row" style={{gap:14,marginTop:16,flexWrap:"wrap"}}>
              <Stars value={PRODUCT.rating} className="lg"/>
              <span style={{fontFamily:"var(--serif)",fontSize:22,color:"var(--navy-800)"}}>{PRODUCT.rating} out of 5</span>
              <span className="small">· based on {PRODUCT.reviewCount} verified reviews</span>
            </div>
          </div>
          <Link to="/reviews" className="btn btn-ghost">Read all reviews <Icon name="arrow" size={16} className="arr"/></Link>
        </div>
        <div className="reviews-row">
          {REVIEWS.slice(0,3).map((r,i)=>(<ReviewCard r={r} key={i} delay={i*.07}/>))}
        </div>
      </div>
    </section>
  );
}

function ReviewCard({ r, delay=0 }){
  return (
    <article className="rev-card card reveal" style={{transitionDelay:delay+"s"}}>
      <div className="rev-top">
        <Stars value={r.rating}/>
        <span className="pill" style={{padding:"3px 10px"}}>{r.tag}</span>
      </div>
      <h4 className="h-sm" style={{marginTop:14}}>{r.title}</h4>
      <p style={{marginTop:10,color:"var(--ink-soft)",fontSize:15}}>{r.body}</p>
      <div className="rev-by">
        <span className="rev-avatar">{r.name[0]}</span>
        <div>
          <p style={{fontWeight:500,fontSize:14}}>{r.name}</p>
          <p className="small"><Icon name="check" size={12}/> Verified buyer · {r.loc}</p>
        </div>
      </div>
    </article>
  );
}

function ProofSafe(){
  return (
    <section className="section-sm">
      <div className="wrap center">
        <div className="flourish" style={{maxWidth:560,margin:"0 auto 22px"}}><span className="dot"></span></div>
        <p className="proof-line">Made for dinner-party hosts · loved by plant-based foodies · a premium garnish for canapés, sushi &amp; blinis</p>
        <p className="ph-note" style={{marginTop:18}}>[ Add verified press / chef features here only when real &amp; permission-safe ]</p>
      </div>
    </section>
  );
}

function FaqPreview(){
  return (
    <section className="section" id="faq">
      <div className="wrap faq-layout">
        <div className="faq-aside">
          <SectionHead eyebrow="Good to know" title="FAQs"
            sub="Everything first-time vegan-caviar buyers tend to ask before serving."/>
          <Link to="/faq" className="btn btn-ghost mt-3">All questions <Icon name="arrow" size={16} className="arr"/></Link>
        </div>
        <div className="faq-list"><Accordion items={FAQS.slice(0,6)} defaultOpen={0}/></div>
      </div>
    </section>
  );
}

function FinalCTA(){
  const cart = useCart();
  return (
    <section className="final-cta deep on-dark">
      <div className="final-glow"></div>
      <div className="wrap center" style={{position:"relative",zIndex:2}}>
        <div className="final-tin"><CaviarTin size="min(40vw,160px)"/></div>
        <div className="eyebrow on-dark no-rule reveal" style={{justifyContent:"center",marginTop:26}}>Ready to serve · impossible to ignore</div>
        <h2 className="display reveal d1" style={{marginTop:18,maxWidth:"18ch",marginInline:"auto"}}>Make your next dinner feel <span className="serif-it">instantly more expensive.</span></h2>
        <p className="lede reveal d2" style={{marginTop:20,maxWidth:"46ch",marginInline:"auto"}}>A premium seaweed-based caviar alternative for canapés, sushi, blinis and champagne nights.</p>
        <div className="final-actions reveal d2">
          <button className="btn btn-gold btn-lg" onClick={()=>{cart.add(cart.selected,1);}}>Add to Cart · {money(bundleById(cart.selected).price)}</button>
          <Link to="/recipes" className="btn btn-ghost btn-lg">Browse recipes</Link>
        </div>
        <p className="small reveal d3" style={{marginTop:20,color:"rgba(244,238,225,.6)"}}>Selected orders ship free · 100% plant-based · Secure checkout</p>
      </div>
    </section>
  );
}

function OccasionsSection(){
  return (
    <section className="section">
      <div className="wrap-wide occ-grid">
        <div className="occ-feature reveal">
          <Photo src={IMG.blinis} label="THE TABLE" className="occ-feature-img"/>
          <div className="occ-feature-cap on-dark">
            <p className="eyebrow on-dark no-rule">Mye Noir</p>
            <p className="h-md" style={{marginTop:8}}>For the moments worth <span className="serif-it">dressing up.</span></p>
          </div>
        </div>
        <div className="occ-list">
          <SectionHead eyebrow="Occasions" title="A spoonful, and the night changes."/>
          <div className="occ-items mt-3">
            {OCCASIONS.map((o,i)=>(
              <div className="occ-item reveal" style={{transitionDelay:(i*.06)+"s"}} key={o.k}>
                <span className="occ-num">{String(i+1).padStart(2,"0")}</span>
                <div>
                  <p className="occ-k">{o.k}</p>
                  <p className="small" style={{color:"var(--ink-soft)",marginTop:4}}>{o.v}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CollectionSection(){
  const [email,setEmail] = useState("");
  const [done,setDone] = useState(false);
  return (
    <section className="section deep on-dark" id="collection">
      <div className="wrap-wide">
        <div className="center" style={{maxWidth:"60ch",margin:"0 auto"}}>
          <div className="eyebrow on-dark no-rule" style={{justifyContent:"center"}}>The Collection · coming soon</div>
          <h2 className="h-xl reveal" style={{marginTop:14}}>More pearls, <span className="serif-it">in waiting.</span></h2>
          <p className="lede reveal d1" style={{marginTop:16,marginInline:"auto"}}>Mye Noir is the first of the house. These are next — in the kitchen now, on the table soon.</p>
        </div>

        <div className="coll-grid mt-4">
          {UPCOMING.map((u,i)=>(
            <article className="coll-card reveal" style={{transitionDelay:(i*.06)+"s"}} key={u.id}>
              <div className="coll-vis">
                <div className="tin coll-tin"><div className="gleam"></div><div className="lip"><div className={"caviar pearls pearls-"+u.pearl} style={{borderRadius:"50%"}}></div></div></div>
                <span className="coll-lock"><Icon name="lock" size={13}/></span>
              </div>
              <p className="coll-eta">{u.eta}</p>
              <h3 className="h-sm" style={{color:"var(--ivory)"}}>{u.name}</h3>
              <p className="coll-sub">{u.sub}</p>
              <p className="small coll-note">{u.note}</p>
            </article>
          ))}
        </div>

        <div className="coll-notify reveal">
          {done ? (
            <p className="news-done" style={{justifyContent:"center"}}><Icon name="check" size={16}/> You're on the list — you'll be first to taste what's next.</p>
          ) : (
            <React.Fragment>
              <p className="small" style={{color:"rgba(244,238,225,.75)"}}>Be first to know when the collection drops.</p>
              <form className="news-row" onSubmit={e=>{e.preventDefault(); if(email.includes("@")) setDone(true);}}>
                <input className="input" type="email" required placeholder="you@email.com" value={email} onChange={e=>setEmail(e.target.value)} aria-label="Email"/>
                <button className="btn btn-gold" type="submit">Notify me</button>
              </form>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>
  );
}

function HomePage(){
  useReveal();
  const toIngredients = ()=>{ const el=document.getElementById("ingredients"); if(el) window.scrollTo({top:el.offsetTop-80,behavior:"smooth"}); };
  return (
    <div>
      <HeroA onIngredients={toIngredients}/>
      <TrustStrip/>
      <UseCases/>
      <TasteSection/>
      <OccasionsSection/>
      <CompareSection/>
      <BundleSection/>
      <CollectionSection/>
      <IngredientsSection/>
      <ReviewsPreview/>
      <ProofSafe/>
      <FaqPreview/>
      <FinalCTA/>
    </div>
  );
}

Object.assign(window, { HomePage, ReviewCard, TrustStrip });