/* ============================================================
   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>SS26 · Nigeria &amp; Worldwide</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 couture</span></div>
        </div>
      </div>
      <div className="hero-split-media zoomable">
        <Ph label="HERO · BRIDE IN CATHEDRAL GOWN" ratio="tall" />
        <div className="hero-float">
          <span className="mono">SIGNATURE</span>
          <span className="serif">Adaeze Cathedral Gown</span>
        </div>
      </div>
    </section>
  );
}

function HeroCentered({ headline, sub, onNav }) {
  return (
    <section className="hero hero-centered">
      <Ph label="HERO · EDITORIAL · THE VOWS" ratio="cinema" className="hero-centered-bg" />
      <div className="hero-centered-overlay" />
      <div className="hero-centered-content">
        <Eyebrow style={{ color: "#e9c97a" }}>Where Every Bride Becomes Unforgettable</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 · BRIDAL" 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 · ASOEBI" ratio="portrait" /></div>
      </div>
      <Marquee items={["Bridal", "Reception", "Asoebi", "Prom", "Red Carpet", "Bespoke", "Aso-Oke", "Ready-to-Wear"]} />
    </section>
  );
}

function HeroStacked({ headline, sub, onNav }) {
  const words = headline.split(" ");
  return (
    <section className="hero hero-stacked">
      <div className="hero-stk-top wrap">
        <Eyebrow line>Couture · 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="ASOEBI · 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="RED CARPET · GALA" ratio="portrait" /></div>
      </div>
    </section>
  );
}

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

  const SLIDES = [
    {
      imgLabel: "HERO · BRIDE IN CATHEDRAL GOWN",
      eyebrow: "SS26 · The Bridal Atelier",
      headline: "Dressed to be\nUnforgettable.",
      sub: "Hand-beaded lace, illusion bodices and sweeping trains — bespoke bridal couture, made to measure.",
      cta: "Shop Bridal",
      ctaFn: () => onNav("shop", { cat: "Bridal" }),
      accent: "#e8c4c0",
    },
    {
      imgLabel: "EDITORIAL · BRIDAL",
      eyebrow: "The Wedding Atelier",
      headline: "For the day\nyou'll relive forever.",
      sub: "Cathedral gowns, mermaid silhouettes and second-look dresses — built for the moment you say I do.",
      cta: "Explore Bridal Edit",
      ctaFn: () => onNav("shop", { occasion: "Bridal" }),
      accent: "#c9a86a",
    },
    {
      imgLabel: "ASOEBI · OWAMBE",
      eyebrow: "Owambe & Asoebi",
      headline: "Reign at\nevery celebration.",
      sub: "Beaded iro-and-buba, Aso-Oke sets and statement gowns for the family front row.",
      cta: "Shop Asoebi",
      ctaFn: () => onNav("shop", { cat: "Asoebi" }),
      accent: "#cba15f",
    },
    {
      imgLabel: "RED CARPET · GALA",
      eyebrow: "Red Carpet · SS26",
      headline: "Command\nevery room.",
      sub: "Velvet, sequin and slit gowns for galas, premieres and milestone nights.",
      cta: "Shop Red Carpet",
      ctaFn: () => onNav("shop", { cat: "Red Carpet" }),
      accent: "#c18a70",
    },
    {
      imgLabel: "RTW · DAY-TO-NIGHT",
      eyebrow: "Ready-to-Wear · SS26",
      headline: "Couture for\nevery day.",
      sub: "Silk, crepe and linen for the woman who lives in couture between the big occasions.",
      cta: "Shop Ready-to-Wear",
      ctaFn: () => onNav("shop", { cat: "Ready-to-Wear" }),
      accent: "#cdb893",
    },
  ];

  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: "Bridal", label: "BRIDAL", n: "01" },
    { name: "Asoebi", label: "ASOEBI", n: "02" },
    { name: "Reception", label: "RECEPTION", n: "03" },
    { name: "Red Carpet", label: "RED CARPET", n: "04" },
    { name: "Ready-to-Wear", label: "READY-TO-WEAR", 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-BEADING A BRIDAL BODICE" ratio="portrait" /></Reveal>
        <div className="story-body">
          <Reveal><Eyebrow line>Our Story</Eyebrow></Reveal>
          <Reveal delay={1}><h2 className="serif story-h">Where every bride becomes unforgettable.</h2></Reveal>
          <Reveal delay={2}>
            <p className="lede" style={{ marginBottom: 22 }}>
              Winns Couture was born in Port Harcourt from a love of dramatic silhouettes and intricate detail. From the
              first sketch to the final bead, every gown is designed to make its wearer feel like the most beautiful version
              of herself.
            </p>
            <p style={{ color: "var(--ink-soft)", marginBottom: 30 }}>
              We specialise in bespoke bridal, asoebi, prom and red-carpet couture — crafted by hand in Nigeria and
              delivered worldwide for the woman who refuses to blend in.
            </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">500+</strong><span>brides dressed</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 = { bridal: "Bridal", asoebi: "Celebration", redcarpet: "Evening", rtw: "Everyday 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 · THE VOWS SS26" ratio="cinema" className="lb-teaser-bg" />
      <div className="lb-teaser-ov" />
      <div className="wrap lb-teaser-content">
        <Reveal><Eyebrow style={{ color: "#e9c97a" }}>The SS26 Lookbook</Eyebrow></Reveal>
        <Reveal delay={1}><h2 className="serif lb-teaser-h">The Vows</h2></Reveal>
        <Reveal delay={2}><p className="lede on-img" style={{ maxWidth: "46ch", margin: "0 auto 28px" }}>
          An ivory love story told in lace and light — our most romantic bridal 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 last bead.</h2>
          <p className="lede" style={{ marginBottom: 26 }}>
            Open-ended Custom Orders, fixed-price Bridal Packages, or a private consultation — all built on the same
            couture craft. Choose your fabric, your silhouette and your detailing, made entirely to you in 8–16 weeks.
          </p>
          <div className="bespoke-steps">
            {[["01", "Book a consultation"], ["02", "Design your gown"], ["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, Nigeria 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>@winns_couture</Eyebrow>
        <h2 className="serif" style={{ fontSize: "clamp(28px,3.4vw,42px)", fontWeight: 500, marginTop: 10 }}>Worn by our brides</h2>
      </div>
      <div className="insta-row">
        {["PORT HARCOURT", "LAGOS", "ABUJA", "ACCRA", "LONDON", "HOUSTON"].map((c, i) => (
          <a key={i} className="insta-cell zoomable" href="https://instagram.com/winns_couture" target="_blank" rel="noreferrer" 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}</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 });