/* ============================================================
   RACK & BOX — Homepage  (4 hero concepts + sections)
   ============================================================ */

/* ---------------- HERO VARIANTS ---------------- */
function HeroSplit({ headline, sub, onNav }) {
  return (
    <section className="hero hero-split">
      <div className="hero-split-text">
        <Eyebrow line>{((window.BRAND?.seasonTag) || "SS26") + " · " + ((window.BRAND?.regionLine) || "Lagos & London")}</Eyebrow>
        <h1 className="display hero-h">{headline}</h1>
        <p className="lede hero-sub">{sub}</p>
        <div className="hero-cta">
          <Btn onClick={() => onNav("shop", {})}>Shop the Collection</Btn>
          <Btn variant="ghost" arrow={false} onClick={() => onNav("booking", {})}>Book a Fitting</Btn>
        </div>
        <div className="hero-meta">
          <div><strong>Worldwide</strong><span>DHL Express shipping</span></div>
          <div><strong>Bespoke</strong><span>Made-to-measure atelier</span></div>
        </div>
      </div>
      <div className="hero-split-media zoomable">
        <Ph label="HERO · GROOM IN EMERALD AGBADA" ratio="tall" />
        <div className="hero-float">
          <span className="mono">SIGNATURE</span>
          <span className="serif">Adé Royal Agbada</span>
        </div>
      </div>
    </section>
  );
}

function HeroCentered({ headline, sub, onNav }) {
  return (
    <section className="hero hero-centered">
      <Ph label="HERO · EDITORIAL · LAGOS NIGHTS" ratio="cinema" className="hero-centered-bg" />
      <div className="hero-centered-overlay" />
      <div className="hero-centered-content">
        <Eyebrow style={{ color: "var(--accent-bright)" }}>Every Stitch Tells a Story</Eyebrow>
        <h1 className="display hero-h on-img">{headline}</h1>
        <p className="lede hero-sub on-img">{sub}</p>
        <div className="hero-cta center-cta">
          <Btn onClick={() => onNav("shop", {})}>Shop Now</Btn>
        </div>
      </div>
      <div className="hero-scroll">Scroll <span className="hero-scroll-line" /></div>
    </section>
  );
}

function HeroEditorial({ headline, sub, onNav }) {
  return (
    <section className="hero hero-editorial">
      <div className="hero-ed-grid">
        <div className="hero-ed-media a zoomable"><Ph label="LOOK 01 · AGBADA" ratio="tall" /></div>
        <div className="hero-ed-center">
          <Eyebrow>The SS26 Collection</Eyebrow>
          <h1 className="display hero-h hero-ed-h">{headline}</h1>
          <p className="lede hero-sub">{sub}</p>
          <Btn onClick={() => onNav("shop", {})}>Discover</Btn>
        </div>
        <div className="hero-ed-media b zoomable"><Ph label="LOOK 02 · KAFTAN" ratio="portrait" /></div>
      </div>
      <Marquee items={["Agbada", "Kaftans", "Senator", "Tuxedos", "Footwear", "Bespoke", "Aso-Oke", "Cashmere"]} />
    </section>
  );
}

function HeroStacked({ headline, sub, onNav }) {
  const words = headline.split(" ");
  return (
    <section className="hero hero-stacked">
      <div className="hero-stk-top wrap">
        <Eyebrow line>Heritage · Reimagined</Eyebrow>
        <h1 className="display hero-stk-h">
          {words.map((w, i) => (
            <span key={i} className="hero-stk-word">{w} </span>
          ))}
        </h1>
      </div>
      <div className="hero-stk-band">
        <div className="hero-stk-img a zoomable"><Ph label="FESTIVE · OWAMBE" ratio="wide" /></div>
        <div className="hero-stk-card">
          <p className="hero-sub" style={{ color: "var(--ink-soft)" }}>{sub}</p>
          <Btn block onClick={() => onNav("shop", {})}>Shop the Collection</Btn>
          <button className="hero-stk-link" onClick={() => onNav("bespoke", {})}>or book a private fitting →</button>
        </div>
        <div className="hero-stk-img b zoomable"><Ph label={((window.BRAND?.secondCity.toUpperCase()) || "LONDON") + " · TAILORING"} ratio="portrait" /></div>
      </div>
    </section>
  );
}

/* ---------------- CAROUSEL HERO ---------------- */
function HeroCarousel({ onNav }) {
  const DURATION = 4800;

  const SLIDES = [
    {
      imgLabel: "HERO · GROOM IN EMERALD AGBADA",
      eyebrow: "SS26 · Signature Menswear",
      headline: "Every Stitch\nTells a Story.",
      sub: "Hand-woven Aso-Oke, silk-lined agbadas and cashmere tailoring — made between Lagos and London.",
      cta: "Shop Agbada",
      ctaFn: () => onNav("shop", { cat: "Agbada" }),
      accent: "var(--accent-bright)",
    },
    {
      imgLabel: "EDITORIAL · BRIDAL",
      eyebrow: "The Wedding Atelier",
      headline: "Dressed for the\nGrand Moment.",
      sub: "Ivory agbadas, razor-sharp tuxedos and full groomsmen sets — built for the day you will relive forever.",
      cta: "Explore Wedding Edit",
      ctaFn: () => onNav("shop", { occasion: "Wedding" }),
      accent: "#e8c4c4",
    },
    {
      imgLabel: "HERO · EDITORIAL · LAGOS NIGHTS",
      eyebrow: "SS26 · Editorial",
      headline: "Lagos Nights.",
      sub: "Velvet, gold thread and the glow of Victoria Island after dark — our most cinematic collection yet.",
      cta: "Shop the Collection",
      ctaFn: () => onNav("shop", {}),
      accent: "var(--accent-bright)",
    },
    {
      imgLabel: "SUIT · BOARDROOM",
      eyebrow: "The Boardroom Edit",
      headline: "Power,\nPresented Immaculately.",
      sub: "Half-canvas suiting and silk separates for the professional who commands every room.",
      cta: "Shop Corporate",
      ctaFn: () => onNav("shop", { occasion: "Corporate" }),
      accent: "#aebfce",
    },
    {
      imgLabel: "KAFTAN · EVENING",
      eyebrow: "Casual Luxury",
      headline: "Ease,\nExpertly Cut.",
      sub: "Soft kaftans, camp-collar shirts and relaxed tailoring — off-duty menswear with a Lagos soul.",
      cta: "Shop Casual Luxury",
      ctaFn: () => onNav("shop", { occasion: "Casual Luxury" }),
      accent: "var(--accent-bright)",
    },
  ];

  const [cur, setCur] = useState(0);
  const [progKey, setProgKey] = useState(0);
  const pausedRef = useRef(false);
  const heroRef = useRef(null);

  /* Auto-advance */
  useEffect(() => {
    const t = setInterval(() => {
      if (!pausedRef.current) {
        setCur(c => (c + 1) % SLIDES.length);
        setProgKey(k => k + 1);
      }
    }, DURATION);
    return () => clearInterval(t);
  }, []);

  /* Keyboard ← → */
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "ArrowLeft")  { setCur(c => (c - 1 + SLIDES.length) % SLIDES.length); setProgKey(k => k + 1); }
      if (e.key === "ArrowRight") { setCur(c => (c + 1) % SLIDES.length); setProgKey(k => k + 1); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  /* Touch swipe */
  useEffect(() => {
    const el = heroRef.current;
    if (!el) return;
    let tx = 0, ty = 0;
    const ts = (e) => { tx = e.touches[0].clientX; ty = e.touches[0].clientY; };
    const te = (e) => {
      const dx = e.changedTouches[0].clientX - tx;
      const dy = e.changedTouches[0].clientY - ty;
      if (Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy)) {
        setCur(c => dx < 0 ? (c + 1) % SLIDES.length : (c - 1 + SLIDES.length) % SLIDES.length);
        setProgKey(k => k + 1);
      }
    };
    el.addEventListener("touchstart", ts, { passive: true });
    el.addEventListener("touchend", te, { passive: true });
    return () => { el.removeEventListener("touchstart", ts); el.removeEventListener("touchend", te); };
  }, []);

  const go = (n) => { setCur(((n % SLIDES.length) + SLIDES.length) % SLIDES.length); setProgKey(k => k + 1); };
  const slide = SLIDES[cur];

  return (
    <section
      ref={heroRef}
      className="hero hero-carousel"
      onMouseEnter={() => { pausedRef.current = true; }}
      onMouseLeave={() => { pausedRef.current = false; }}
    >
      {/* Background layers */}
      <div className="hc-bgs" aria-hidden="true">
        {SLIDES.map((s, i) => {
          const src = (window.RB_IMGS || {})[s.imgLabel] || "";
          return (
            <div key={i} className={"hc-bg" + (i === cur ? " active" : "")}
              style={{ backgroundImage: src ? `url(${src})` : "none" }} />
          );
        })}
      </div>

      {/* Overlays */}
      <div className="hc-overlay" aria-hidden="true" />
      <div className="hc-bottom-fade" aria-hidden="true" />

      {/* Progress bar */}
      <div className="hc-progress-track" aria-hidden="true">
        <div key={progKey} className="hc-progress-fill"
          style={{ "--hc-dur": DURATION + "ms", "--hc-accent": slide.accent }} />
      </div>

      {/* Content — re-keyed to trigger entrance animation on each slide */}
      <div className="wrap hc-content" key={cur}>
        <Eyebrow style={{ color: slide.accent, marginBottom: 18 }}>{slide.eyebrow}</Eyebrow>
        <h1 className="display hc-headline">{slide.headline}</h1>
        <p className="lede hc-sub">{slide.sub}</p>
        <div className="hero-cta" style={{ marginTop: 38 }}>
          <Btn onClick={slide.ctaFn}>{slide.cta}</Btn>
          <Btn variant="ghost" arrow={false} className="on-dark" onClick={() => onNav("bespoke", {})}>Book a Fitting</Btn>
        </div>
      </div>

      {/* Arrows */}
      <button className="hc-arrow hc-prev" onClick={() => go(cur - 1)} aria-label="Previous slide">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
      </button>
      <button className="hc-arrow hc-next" onClick={() => go(cur + 1)} aria-label="Next slide">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </button>

      {/* Dots */}
      <div className="hc-dots" role="tablist">
        {SLIDES.map((_, i) => (
          <button key={i} role="tab" aria-label={"Slide " + (i + 1)} aria-selected={i === cur}
            className={"hc-dot" + (i === cur ? " active" : "")}
            style={{ "--dot-accent": slide.accent }}
            onClick={() => go(i)} />
        ))}
      </div>

      {/* Slide counter */}
      <div className="hc-counter" aria-hidden="true">
        <span className="mono">{String(cur + 1).padStart(2, "0")}</span>
        <span style={{ opacity: 0.3 }}>/</span>
        <span className="mono" style={{ opacity: 0.4 }}>{String(SLIDES.length).padStart(2, "0")}</span>
      </div>
    </section>
  );
}

function Hero(props) {
  const map = {
    /* originals */
    split: HeroSplit, centered: HeroCentered, editorial: HeroEditorial, stacked: HeroStacked, carousel: HeroCarousel,
    /* Amy Aghomi-inspired */
    video: HeroVideo, aghomi: HeroAghomi, luxsplit: HeroLuxSplit, typo: HeroTypo, mosaic: HeroMosaic,
    /* Collage */
    collage: HeroCollage,
  };
  const Cmp = map[props.layout] || HeroCarousel;
  return <Cmp {...props} />;
}

/* ---------------- TRUST BAR ---------------- */
function TrustBar() {
  const items = [
    { icon: "truck", t: "Worldwide Shipping", s: "Multiple shipping options" },
    { icon: "scissors", t: "Bespoke Atelier", s: "Made-to-fit" },
    { icon: "ruler", t: "Fit Finder", s: "Find your size in 2 min" },
    { icon: "shield", t: "Secure Checkout", s: "Multiple payment options" },
  ];
  return (
    <div className="trustbar">
      <div className="wrap trustbar-inner">
        {items.map((it) => (
          <div className="trust-item" key={it.t}>
            <Icon name={it.icon} size={22} stroke={1.4} />
            <div><span className="trust-t">{it.t}</span><span className="trust-s">{it.s}</span></div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- CATEGORY STRIP ---------------- */
function CategoryStrip({ onNav }) {
  const cats = [
    { name: "Agbada", label: "AGBADA", n: "01" },
    { name: "Kaftan", label: "KAFTANS", n: "02" },
    { name: "Suit", label: "SUITS", n: "03" },
    { name: "Shirt", label: "SHIRTING", n: "04" },
    { name: "Footwear", label: "FOOTWEAR", n: "05" },
  ];
  return (
    <section className="section-pad-sm">
      <div className="wrap-wide">
        <Reveal className="section-head" style={{ marginBottom: 40 }}>
          <h2 className="serif">Shop by category</h2>
          <button className="link-arrow" onClick={() => onNav("shop", {})}>All products</button>
        </Reveal>
        <div className="cat-strip">
          {cats.map((c, i) => (
            <Reveal key={c.name} delay={(i % 4) + 1} className="cat-card zoomable">
              <button className="cat-card-btn" onClick={() => onNav("shop", { cat: c.name })}>
                <Ph label={c.label + " · SHOP"} ratio="portrait" />
                <div className="cat-card-cap">
                  <span className="mono">{c.n}</span>
                  <span className="serif">{c.name}</span>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FEATURED PRODUCTS ---------------- */
function FeaturedRow({ title, eyebrow, products, onNav, link }) {
  const { addToCart, toggleWish, wishlist } = useContext(RBCtx);
  return (
    <section className="section-pad">
      <div className="wrap-wide">
        <Reveal className="section-head" style={{ marginBottom: 44 }}>
          <div>
            <Eyebrow>{eyebrow}</Eyebrow>
            <h2 className="serif" style={{ marginTop: 14 }}>{title}</h2>
          </div>
          <button className="link-arrow" onClick={() => onNav("shop", link || {})}>View all</button>
        </Reveal>
        <div className="product-grid">
          {products.map((p, i) => (
            <Reveal key={p.id} delay={(i % 4) + 1}>
              <ProductCard p={p} onNav={onNav} onAdd={addToCart} wished={wishlist.includes(p.id)} onWish={toggleWish} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- STORY ---------------- */
function StorySection({ onNav }) {
  return (
    <section className="section-pad story-sec">
      <div className="wrap-wide story-grid">
        <Reveal className="story-media zoomable"><Ph label="ATELIER · HAND-WEAVING ASO-OKE" ratio="portrait" /></Reveal>
        <div className="story-body">
          <Reveal><Eyebrow line>Our Story</Eyebrow></Reveal>
          <Reveal delay={1}><h2 className="serif story-h">Every stitch tells a story.</h2></Reveal>
          <Reveal delay={2}>
            <p className="lede" style={{ marginBottom: 22 }}>
              Founded in {(window.BRAND?.founded) || "2019"}, {(window.BRAND?.story.body) || "Rack & Box was born between two cities — the rhythm of Lagos and the restraint of London. We work with weaving cooperatives and master tailors to craft pieces that carry heritage into the present."}
            </p>
            <p style={{ color: "var(--ink-soft)", marginBottom: 30 }}>
              From hand-woven Aso-Oke to double-faced cashmere, each garment is cut for the grooms, socialites and tastemakers
              who want their clothes to speak before they do.
            </p>
          </Reveal>
          <Reveal delay={3} className="row" style={{ gap: 18, flexWrap: "wrap" }}>
            <Btn onClick={() => onNav("about", {})}>Read our story</Btn>
            <div className="story-stats">
              <div><strong className="serif">12k+</strong><span>pieces delivered</span></div>
              <div><strong className="serif">40+</strong><span>countries shipped</span></div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------------- OCCASIONS ---------------- */
function OccasionSection({ onNav }) {
  return (
    <section className="section-pad occ-sec">
      <div className="wrap-wide">
        <Reveal className="section-head center-head">
          <div className="center" style={{ width: "100%" }}>
            <Eyebrow>Dress for the moment</Eyebrow>
            <h2 className="serif" style={{ margin: "14px auto 0", maxWidth: "none" }}>Shop by occasion</h2>
          </div>
        </Reveal>
        <div className="occ-grid">
          {RB.COLLECTIONS.map((c, i) => (
            <Reveal key={c.id} delay={(i % 4) + 1} className="occ-card zoomable">
              <button className="occ-card-btn" onClick={() => {
                const map = { wedding: "Wedding", festive: "Festive", corporate: "Corporate", casual: "Casual Luxury" };
                onNav("shop", { occasion: map[c.id] });
              }}>
                <Ph label={c.label} ratio={i % 2 === 0 ? "tall" : "portrait"} />
                <div className="occ-overlay" />
                <div className="occ-cap">
                  <span className="mono">{String(c.count).padStart(2, "0")} pieces</span>
                  <span className="serif occ-title">{c.title}</span>
                  <span className="occ-blurb">{c.blurb}</span>
                  <span className="link-arrow on-img">Explore</span>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- LOOKBOOK TEASER ---------------- */
function LookbookTeaser({ onNav }) {
  return (
    <section className="lb-teaser">
      <Ph label="EDITORIAL · LAGOS NIGHTS SS26" ratio="cinema" className="lb-teaser-bg" />
      <div className="lb-teaser-ov" />
      <div className="wrap lb-teaser-content">
        <Reveal><Eyebrow style={{ color: "var(--accent-bright)" }}>The SS26 Lookbook</Eyebrow></Reveal>
        <Reveal delay={1}><h2 className="serif lb-teaser-h">Lagos Nights</h2></Reveal>
        <Reveal delay={2}><p className="lede on-img" style={{ maxWidth: "46ch", margin: "0 auto 28px" }}>
          Velvet, gold thread and the glow of the city after dark — our most cinematic collection yet.
        </p></Reveal>
        <Reveal delay={3}><Btn onClick={() => onNav("lookbook", {})}>View the Lookbook</Btn></Reveal>
      </div>
    </section>
  );
}

/* ---------------- BESPOKE CTA ---------------- */
function BespokeBand({ onNav }) {
  return (
    <section className="bespoke-band">
      <div className="wrap-wide bespoke-grid">
        <div className="bespoke-media zoomable"><Ph label="BESPOKE · FITTING ROOM" ratio="square" /></div>
        <div className="bespoke-body">
          <Eyebrow line>The Bespoke Service</Eyebrow>
          <h2 className="serif bespoke-h">Commissioned for you, down to the stitch.</h2>
          <p className="lede" style={{ marginBottom: 26 }}>
            Open-ended Custom Orders, fixed-price Packages, or a private fitting — all built on the same atelier
            craft. Choose your cloth, your cut and your finishings, made entirely to you in 3–6 weeks.
          </p>
          <div className="bespoke-steps">
            {[["01", "Book a fitting"], ["02", "Choose cloth & cut"], ["03", "Three fittings"], ["04", "Delivered worldwide"]].map(([n, t]) => (
              <div className="bespoke-step" key={n}><span className="mono">{n}</span><span>{t}</span></div>
            ))}
          </div>
          <div className="hero-cta">
            <Btn onClick={() => onNav("custom", {})}>Start a Custom Order</Btn>
            <Btn variant="ghost" arrow={false} onClick={() => onNav("packages", {})}>View Packages</Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- TESTIMONIALS ---------------- */
function Testimonials() {
  const [i, setI] = useState(0);
  const t = RB.TESTIMONIALS;
  useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % t.length), 6000);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="section-pad testi-sec">
      <div className="wrap testi-inner center">
        <Reveal><Stars value={5} size={18} /></Reveal>
        <Reveal delay={1}>
          <blockquote className="testi-quote serif">“{t[i].quote}”</blockquote>
        </Reveal>
        <Reveal delay={2}>
          <div className="testi-author">{t[i].name} <span>· {t[i].role}</span></div>
        </Reveal>
        <div className="testi-dots">
          {t.map((_, k) => <button key={k} className={"tdot" + (k === i ? " on" : "")} onClick={() => setI(k)} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section-pad">
      <div className="wrap faq-grid">
        <div className="faq-head">
          <Eyebrow line>Good to know</Eyebrow>
          <h2 className="serif" style={{ fontSize: "clamp(32px,4vw,52px)", fontWeight: 500, marginTop: 16, lineHeight: 1.04 }}>Frequently asked questions</h2>
          <p style={{ color: "var(--ink-soft)", marginTop: 18 }}>Can't find an answer? Our concierge replies within a few hours, {(window.BRAND?.regionLine) || "Lagos & London"} time.</p>
        </div>
        <div className="faq-list">
          {RB.FAQS.map((f, i) => (
            <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span><Icon name={open === i ? "minus" : "plus"} size={20} />
              </button>
              <div className="faq-a"><p>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- INSTAGRAM STRIP ---------------- */
function CommunityStrip() {
  return (
    <section className="insta-sec">
      <div className="center" style={{ marginBottom: 32 }}>
        <Eyebrow>{(window.BRAND && window.BRAND.igHandle) || "@rackandbox"}</Eyebrow>
        <h2 className="serif" style={{ fontSize: "clamp(28px,3.4vw,42px)", fontWeight: 500, marginTop: 10 }}>Worn by the community</h2>
      </div>
      <div className="insta-row">
        {((window.BRAND && window.BRAND.instaCities) || ["LAGOS", "LONDON", "ABUJA", "ACCRA", "ATLANTA", "DUBAI"]).map((c, i) => (
          <a key={i} className="insta-cell zoomable" href="#" aria-label={"Instagram " + c}>
            <Ph label={"@ · " + c} ratio="square" />
            <span className="insta-ic"><Icon name="ig" size={20} /></span>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ---------------- PRODUCT CARD ---------------- */
function ProductCard({ p, onNav, onAdd, wished, onWish }) {
  return (
    <article className="pcard zoomable" onClick={() => onNav("product", { id: p.id })}>
      <div className="pcard-media">
        {p.badge && <span className="pcard-tag">{p.badge}</span>}
        <button className={"wish" + (wished ? " active" : "")} onClick={(e) => { e.stopPropagation(); onWish(p.id); }} aria-label="Wishlist">
          <Icon name={wished ? "star-f" : "heart"} size={17} />
        </button>
        <Ph label={p.label} ratio="portrait" />
        <button className="quick" onClick={(e) => { e.stopPropagation(); onAdd(p, { size: p.sizes[1] || p.sizes[0], color: p.colors[0].name }); }}>
          + Quick add
        </button>
      </div>
      <div className="pcard-body">
        <span className="pcard-cat">{p.cat} · {p.gender}</span>
        <span className="pcard-name">{p.name}</span>
        <span className="pcard-price"><Price ngn={p.price} old={p.oldPrice} /></span>
        <div className="swatches">{p.colors.slice(0, 4).map((c) => <span key={c.name} className="swatch" style={{ background: c.hex }} title={c.name} />)}</div>
      </div>
    </article>
  );
}

/* ---------------- HOME PAGE ---------------- */
function HomePage({ onNav, tweaks }) {
  const newArrivals = RB.PRODUCTS.filter((p) => p.badge === "New" || p.badge === "Signature").slice(0, 4);
  const featured = RB.PRODUCTS.slice(0, 4);
  return (
    <div className="fade-page">
      <Hero layout={tweaks.heroLayout} headline={tweaks.heroHeadline} sub={tweaks.heroSub} onNav={onNav} />
      <TrustBar />
      <CategoryStrip onNav={onNav} />
      <FeaturedRow eyebrow="Just arrived" title="New this season" products={newArrivals} onNav={onNav} />
      <StorySection onNav={onNav} />
      <OccasionSection onNav={onNav} />
      <BespokeBand onNav={onNav} />
      <Testimonials />
      <FAQ />
      <CommunityStrip />
    </div>
  );
}

Object.assign(window, { HomePage, ProductCard, Hero, HeroCarousel, FAQ, Testimonials });