function Hero({ t, lang, tweaks, onShop }) {
  const displayFamily = lang === "zh" ? "var(--font-cn-display)" : "var(--font-display)";
  return (
    <section style={{
      position:"relative",
      width:"100%",
      height: 620,
      backgroundImage:`url(./assets/photos/hero-pink-bouquet.png)`,
      backgroundSize:"cover",
      backgroundPosition:"50% 50%",
      backgroundRepeat:"no-repeat",
      backgroundColor:"var(--pp-paper)",
      overflow:"hidden",
    }}>
      <div style={{ position:"absolute", inset:0, maxWidth:1280, margin:"0 auto", padding:"0 56px", display:"flex", flexDirection:"column", justifyContent:"center", alignItems:"flex-start", gap:18, color:"var(--pp-ink)" }}>
        <div style={{ fontFamily:"var(--font-sans)", fontSize:11, fontWeight:600, letterSpacing:"0.32em", color:"var(--pp-ink-soft)" }}>{t.hero_eyebrow}</div>
        <h1 style={{
          fontFamily: displayFamily, fontWeight:400,
          fontSize: lang==="zh"?72:84, lineHeight:1.04, margin:0,
          color:"var(--pp-ink)", letterSpacing: lang==="zh"?"0.02em":"-0.005em",
          maxWidth:520, textWrap:"balance",
          animation:"pp-fade-up 900ms cubic-bezier(0.22,0.61,0.36,1)",
        }}>
          {t.hero_title_a}<br/>{t.hero_title_b}<br/><span className="pp-italic-accent">{t.hero_title_c}</span>
        </h1>
        <button onClick={onShop} className="pp-pulse" style={{
          marginTop:14, fontFamily: lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)", fontSize:12, fontWeight:600, letterSpacing:"0.22em",
          padding:"14px 28px", borderRadius:0, border:0, cursor:"pointer",
          background:"var(--pp-blush)", color:"var(--pp-ink)", boxShadow:"var(--shadow-2)",
          transition:"transform 200ms ease, box-shadow 200ms ease",
        }} onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-2px)";e.currentTarget.style.boxShadow="var(--shadow-3)";}} onMouseLeave={e=>{e.currentTarget.style.transform="";e.currentTarget.style.boxShadow="var(--shadow-2)";}}>{t.hero_cta} →</button>
      </div>
    </section>
  );
}

function FeatureStrip({ t, lang }) {
  const items = [
    { icon: <ICN.flower size={28}/>, title:t.feat_1_t, desc:t.feat_1_d },
    { icon: <ICN.leaf size={28}/>,   title:t.feat_3_t, desc:t.feat_3_d },
    { icon: <ICN.heart size={28}/>,  title:t.feat_4_t, desc:t.feat_4_d },
  ];
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  return (
    <section style={{ background:"var(--pp-paper-soft)", padding:"40px 32px", borderBottom:"1px solid var(--hairline)" }}>
      <div style={{ maxWidth:1180, margin:"0 auto", display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:0 }}>
        {items.map((it,i)=>(
          <div key={i} style={{ textAlign:"center", padding:"0 18px", borderRight: i<2?"1px solid var(--pp-paper-edge)":"0", color:"var(--pp-ink)" }}>
            <div style={{ display:"flex", justifyContent:"center", marginBottom:12, color:"var(--pp-ink)" }}>{it.icon}</div>
            <div style={{ fontFamily, fontSize: lang==="zh"?13:11, fontWeight:600, letterSpacing:lang==="zh"?"0.06em":"0.22em", textTransform: lang==="zh"?"none":"uppercase", marginBottom:8 }}>{it.title}</div>
            <div style={{ fontFamily:"var(--font-serif)", fontSize:14, color:"var(--pp-ink-soft)", lineHeight:1.5 }}>{it.desc}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CollectionsGrid({ t, lang, onPickCollection }) {
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  return (
    <section style={{ background:"var(--pp-rose-card)", padding:"56px 32px 64px" }}>
      <div style={{ textAlign:"center", marginBottom:32 }}>
        <div style={{ fontFamily, fontSize: lang==="zh"?14:11, fontWeight:600, letterSpacing: lang==="zh"?"0.18em":"0.32em", textTransform: lang==="zh"?"none":"uppercase", color:"var(--pp-ink)" }}>{t.shop_collections}</div>
      </div>
      <div className="pp-reveal-stagger pp-reveal in" style={{ maxWidth:1280, margin:"0 auto", display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:18 }}>
        {COLLECTIONS.map((c,i)=>(
          <article key={c.slug} onClick={()=>onPickCollection(c.slug)} className="pp-card" style={{ background:"var(--bg-card)", borderRadius:0, overflow:"hidden", boxShadow:"var(--shadow-2)", cursor:"pointer", display:"flex", flexDirection:"column" }}>
            <div style={{ aspectRatio:"4/5", backgroundImage:`url(./assets/photos/${c.cover})`, backgroundSize:"cover", backgroundPosition:"center" }}/>
            <div style={{ padding:"22px 16px 24px", textAlign:"center", borderTop:"1px solid var(--hairline)" }}>
              <div style={{ fontFamily, fontSize:13, fontWeight:600, letterSpacing:"0.22em", color:"var(--pp-ink)", marginBottom:10, textTransform: lang==="zh"?"none":"uppercase" }}>{lang==="zh"?c.name_zh:c.name_en}</div>
              <div style={{ display:"inline-flex", alignItems:"center", gap:6, fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.22em", color:"var(--pp-ink-soft)" }}>
                {t.shop_now} <ICN.arrowR size={12}/>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// Full /collections index page — same 4 cards as the homepage strip, larger format.
function CollectionsIndexPage({ t, lang, onPickCollection }) {
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  const dispFamily = lang==="zh"?"var(--font-cn-display)":"var(--font-display)";
  return (
    <div style={{ padding:"56px 32px" }}>
      <div style={{ maxWidth:1280, margin:"0 auto" }}>
        <h1 style={{ fontFamily:dispFamily, fontWeight:500, fontSize:56, marginBottom:8 }}>{lang==="zh"?"花束系列":"Collections"}</h1>
        <p style={{ fontFamily:"var(--font-serif)", fontSize:15, color:"var(--pp-ink-soft)", marginBottom:32, maxWidth:520 }}>
          {lang==="zh"?"为每一个重要的瞬间，精选一束花。":"A curated edit for every meaningful moment."}
        </p>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:20 }}>
          {COLLECTIONS.map(c=>(
            <article key={c.slug} onClick={()=>onPickCollection(c.slug)} className="pp-card" style={{ background:"var(--bg-card)", overflow:"hidden", boxShadow:"var(--shadow-2)", cursor:"pointer" }}>
              <div style={{ aspectRatio:"4/5", backgroundImage:`url(./assets/photos/${c.cover})`, backgroundSize:"cover", backgroundPosition:"center" }}/>
              <div style={{ padding:"22px 16px 24px", textAlign:"center", borderTop:"1px solid var(--hairline)" }}>
                <div style={{ fontFamily, fontSize:13, fontWeight:600, letterSpacing:"0.22em", color:"var(--pp-ink)", textTransform: lang==="zh"?"none":"uppercase" }}>{lang==="zh"?c.name_zh:c.name_en}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

// Filtered collection page — shows only products whose `collections` array contains the slug.
function CollectionPage({ t, lang, slug, onPick }) {
  const dispFamily = lang==="zh"?"var(--font-cn-display)":"var(--font-display)";
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  const meta = COLLECTIONS.find(c=>c.slug===slug);
  const items = PRODUCTS.filter(p=>(p.collections||[]).includes(slug));
  return (
    <div style={{ padding:"56px 32px" }}>
      <div style={{ maxWidth:1280, margin:"0 auto" }}>
        <div style={{ fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.32em", color:"var(--pp-pink-deep)", textTransform: lang==="zh"?"none":"uppercase", marginBottom:8 }}>
          {lang==="zh"?"花束系列":"Collections"}
        </div>
        <h1 style={{ fontFamily:dispFamily, fontWeight:500, fontSize:56, marginBottom:8 }}>{meta ? (lang==="zh"?meta.name_zh:meta.name_en) : slug}</h1>
        <p style={{ fontFamily:"var(--font-serif)", fontSize:14, color:"var(--pp-ink-soft)", marginBottom:32 }}>
          {items.length} {lang==="zh"?"款花束":(items.length===1?"bouquet":"bouquets")}
        </p>
        {items.length>0 ? (
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:20 }}>
            {items.map(p=> <ProductCard key={p.id} p={p} lang={lang} onPick={onPick}/>)}
          </div>
        ) : (
          <div style={{ fontFamily:"var(--font-serif)", fontSize:15, color:"var(--pp-ink-soft)", padding:"40px 0" }}>
            {lang==="zh"?"暂无花束。":"Nothing here yet."}
          </div>
        )}
      </div>
    </div>
  );
}

function ShopGrid({ t, lang, products, onPick }) {
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  const dispFamily = lang==="zh"?"var(--font-cn-display)":"var(--font-display)";
  // Newest 8 by addedAt desc; stable sort preserves array order on ties.
  const justArrived = [...products]
    .sort((a,b)=> (b.addedAt||"").localeCompare(a.addedAt||""))
    .slice(0,8);
  return (
    <section style={{ background:"var(--bg)", padding:"72px 32px" }}>
      <div style={{ maxWidth:1280, margin:"0 auto" }}>
        <header style={{ display:"flex", alignItems:"flex-end", justifyContent:"space-between", marginBottom:28 }}>
          <div>
            <div style={{ fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.32em", color:"var(--pp-pink-deep)" }}>{lang==="zh"?"本周精选":"PICKED THIS WEEK"}</div>
            <h2 style={{ fontFamily: dispFamily, fontWeight:500, fontSize:44, margin:"6px 0 0", letterSpacing: lang==="zh"?"0.02em":"-0.005em" }}>
              {lang==="zh"?"新鲜到达。":"Newly arrived."}
            </h2>
          </div>
        </header>
        <div className="pp-reveal-stagger pp-reveal in" style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:20 }}>
          {justArrived.map(p=> <ProductCard key={p.id} p={p} lang={lang} onPick={onPick}/>)}
        </div>
      </div>
    </section>
  );
}

function ProductCard({ p, lang, onPick }) {
  const [hover,setHover] = React.useState(false);
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  const dispFamily = lang==="zh"?"var(--font-cn-display)":"var(--font-display)";
  const t = useT(lang);
  // Sold-out products replace the price with a status label. Custom products hide price entirely on the card.
  const priceLabel = p.isSoldOut ? t.sold_out : `S$${p.price}`;
  const priceColor = p.isSoldOut ? "var(--pp-ink-mute)" : "var(--pp-pink-deep)";
  const priceFontSize = p.isSoldOut ? 11 : 20;
  const priceLetter = p.isSoldOut ? "0.22em" : "normal";
  const priceWeight = p.isSoldOut ? 700 : 500;
  return (
    <article
      onClick={()=>onPick(p.id)}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      className="pp-card"
      style={{ background:"var(--bg-card)", borderRadius:0, overflow:"hidden", border:"1px solid var(--hairline)", boxShadow: hover?"var(--shadow-3)":"var(--shadow-2)", cursor:"pointer", position:"relative" }}>
      <div className="pp-card-img-wrap" style={{ aspectRatio:"4/5", position:"relative" }}>
        <div style={{ width:"100%", height:"100%", backgroundImage:`url(./assets/photos/${p.photo})`, backgroundSize:"cover", backgroundPosition:"center", filter: p.isSoldOut?"grayscale(0.4)":"none" }}/>
      </div>
      <div style={{ padding:"16px 18px 20px" }}>
        <div style={{ fontFamily, fontSize:10, fontWeight:600, letterSpacing:"0.22em", textTransform:"uppercase", color:"var(--pp-pink-deep)" }}>NO. {p.code}</div>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginTop:6, gap:10 }}>
          <h4 style={{ fontFamily: dispFamily, fontWeight:500, fontSize:22, margin:0, color:"var(--pp-ink)" }}>{lang==="zh"?p.name_zh:p.name_en}</h4>
          {p.isCustom ? (
            <span style={{ fontFamily, fontWeight:700, fontSize:11, letterSpacing:"0.22em", color:"var(--pp-pink-deep)", textTransform:"uppercase" }}>{t.custom_label}</span>
          ) : (
            <span style={{ fontFamily: p.isSoldOut?fontFamily:dispFamily, fontWeight:priceWeight, fontSize:priceFontSize, letterSpacing:priceLetter, color:priceColor, fontVariantNumeric:"tabular-nums" }}>{priceLabel}</span>
          )}
        </div>
      </div>
    </article>
  );
}
window.ProductCard = ProductCard;

function AboutBlock({ t, lang }) {
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  const dispFamily = lang==="zh"?"var(--font-cn-display)":"var(--font-display)";
  return (
    <section style={{
      position:"relative",
      width:"100%",
      aspectRatio:"1942/809",
      backgroundImage:`url(./assets/photos/about-pink-banner.png)`,
      backgroundSize:"cover",
      backgroundPosition:"center",
      backgroundRepeat:"no-repeat",
      animation:"pp-fade-in 900ms cubic-bezier(0.22,0.61,0.36,1)",
    }}>
      <div style={{
        position:"absolute", inset:0,
        display:"flex", flexDirection:"column", justifyContent:"center", alignItems:"flex-start",
        padding:"0 8% 0 8%",
        maxWidth:"50%",
      }}>
        <div style={{ fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.32em", color:"var(--pp-pink-deep)" }}>{t.about_eyebrow}</div>
        <h2 style={{ fontFamily: dispFamily, fontWeight:500, fontSize:"clamp(28px,3.4vw,52px)", lineHeight:1.1, margin:"14px 0 14px", whiteSpace:"pre-line", color:"var(--pp-ink)" }}>{t.about_title}</h2>
        <div style={{ width:48, height:1, background:"var(--pp-ink-faint)", margin:"4px 0 16px" }}/>
        <p style={{ fontFamily:"var(--font-serif)", fontSize:"clamp(13px,1vw,15px)", lineHeight:1.6, color:"var(--pp-ink-soft)", marginBottom:22, maxWidth:"min(380px, 80%)" }}>{t.about_body}</p>
        <button style={{ fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.22em", textTransform: lang==="zh"?"none":"uppercase", padding:"13px 24px", borderRadius:0, border:0, background:"var(--pp-ink)", color:"var(--bg)", cursor:"pointer" }}>{t.about_cta} →</button>
      </div>
    </section>
  );
}

function InstagramStrip({ t, lang }) {
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  const photos = ["sweetheart-1.jpg","first-blush-1.jpg","sunny-pink-1.jpg","pink-reverie-2.jpg","store-mood-1.jpg","sweetheart-2.jpg"];
  return (
    <section style={{ background:"var(--pp-blush-tint)", padding:"32px 0 0" }}>
      <div style={{ textAlign:"center", marginBottom:18 }}>
        <div style={{ fontFamily, fontSize:11, fontWeight:600, letterSpacing:"0.22em", color:"var(--pp-ink)" }}>{t.follow}</div>
      </div>
      <div style={{ display:"grid", gridTemplateColumns:"repeat(6,1fr)", gap:0 }}>
        {photos.map((ph,i)=>(
          <div key={i} style={{ aspectRatio:"1/1", backgroundImage:`url(./assets/photos/${ph})`, backgroundSize:"cover", backgroundPosition:"center" }}/>
        ))}
      </div>
    </section>
  );
}

function Footer({ t, lang }) {
  const fontFamily = lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)";
  const dispFamily = lang==="zh"?"var(--font-cn-display)":"var(--font-display)";
  const head = { fontFamily, fontSize:11, fontWeight:700, letterSpacing:"0.22em", color:"var(--pp-ink)", marginBottom:16 };
  const item = { fontFamily:"var(--font-serif)", fontSize:14, color:"var(--pp-ink-soft)", lineHeight:1.9, cursor:"pointer" };
  return (
    <footer style={{ background:"var(--pp-paper-soft)", borderTop:"1px solid var(--hairline)", padding:"56px 32px 28px" }}>
      <div style={{ maxWidth:1280, margin:"0 auto", display:"grid", gridTemplateColumns:"1.4fr 1fr 1.4fr", gap:48 }}>
        <div>
          <div style={{ fontFamily: dispFamily, fontStyle:"italic", fontSize:24, color:"var(--pp-pink-deep)" }}>Passion's Petals</div>
          <div style={{ fontFamily, fontSize:9, fontWeight:600, letterSpacing:"0.32em", color:"var(--pp-terracotta-deep)", marginTop:4 }}>· EST 2026 · SINGAPORE ·</div>
        </div>
        <div>
          <div style={head}>{t.foot_shop}</div>
          {t.foot_shop_items.map((x,i)=> <div key={i} style={item}>{x}</div>)}
        </div>
        <div>
          <div style={head}>{t.foot_help}</div>
          <a href="https://t.me/papapassion" target="_blank" rel="noopener noreferrer" style={{ ...item, textDecoration:"none", display:"block" }}>Telegram</a>
          <a href="https://wa.me/6588956482" target="_blank" rel="noopener noreferrer" style={{ ...item, textDecoration:"none", display:"block" }}>WhatsApp</a>
          <div style={{ display:"flex", gap:14, marginTop:20, color:"var(--pp-ink)", alignItems:"center" }}>
            <a href="https://t.me/passionpetalbouquet" target="_blank" rel="noopener noreferrer" title="Telegram" style={{ color:"inherit", display:"inline-flex" }}><ICN.tg size={18}/></a>
            <a href="https://www.instagram.com/passionatelypetals" target="_blank" rel="noopener noreferrer" title="Instagram" style={{ color:"inherit", display:"inline-flex" }}><ICN.ig size={18}/></a>
            <a href="https://www.tiktok.com/@passionatelypetals" target="_blank" rel="noopener noreferrer" title="TikTok" style={{ color:"inherit", display:"inline-flex" }}><ICN.tt size={18}/></a>
            <a href="https://xhslink.com/m/6K4j40mHbQf" target="_blank" rel="noopener noreferrer" title="小红书" style={{ fontFamily:"var(--font-cn-sans)", fontSize:11, fontWeight:600, letterSpacing:"0.05em", color:"inherit", textDecoration:"none" }}>小红书</a>
          </div>
        </div>
      </div>
      <div style={{ maxWidth:1280, margin:"40px auto 0", paddingTop:18, borderTop:"1px solid var(--pp-paper-edge)", display:"flex", justifyContent:"space-between", fontFamily, fontSize:11, color:"var(--pp-ink-mute)", letterSpacing:"0.06em" }}>
        <span>{t.foot_legal}</span>
        <span>Privacy · Terms</span>
      </div>
    </footer>
  );
}

window.Hero = Hero; window.FeatureStrip = FeatureStrip; window.CollectionsGrid = CollectionsGrid; window.CollectionsIndexPage = CollectionsIndexPage; window.CollectionPage = CollectionPage; window.ShopGrid = ShopGrid; window.AboutBlock = AboutBlock; window.InstagramStrip = InstagramStrip; window.Footer = Footer;