/* ============================================================
   EMAGINE BY BUKOLA — Homepage
   Hand-beaded couture · Made in Nigeria · Worn worldwide
   ============================================================ */

/* ---------------- HERO — real-motion video collage banner ----------------
   Each panel is either a real Instagram gown clip or a clean single-subject
   gown still. Every <video> panel is backed by a real <img> still layer
   underneath (not just the poster attribute), so if the clip can't decode
   (the Design preview runtime ships without a video decoder) the panel still
   shows full-colour couture — never blank or dark. Adjacent panels never
   share the same clip or still, and every still is a clean single-subject
   image (no price stamps, no catalogue grids). */
function EmagineHero({ headline, sub, onNav }) {
  const panels = [
    { type: "video", clip: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/emaginebybukola-storefront/Screen_Recording_20260628_162442_Instagram.webm", still: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/emaginebybukola-storefront/Screenshot_20260628_161252.jpg", kb: "kb-a", tag: "Red Carpet" },
    { type: "video", clip: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/emaginebybukola-storefront/Screen_Recording_20260628_162133_Instagram.webm", still: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/emaginebybukola-storefront/Screenshot_20260628_161322.jpg", kb: "kb-b", tag: "Signature Beadwork" },
    { type: "video", clip: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/emaginebybukola-storefront/Screen_Recording_20260628_162625_Instagram.webm", still: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/emaginebybukola-storefront/Screenshot_20260628_161718.jpg", kb: "kb-c", tag: "Prom" },
    { type: "video", clip: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/emaginebybukola-storefront/Screen_Recording_20260628_162133_Instagram.webm", still: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/emaginebybukola-storefront/Screenshot_20260628_161429.jpg", kb: "kb-d", tag: "Bridal · @ebbridals" },
  ];
  return (
    <section className="hero hero-collage" data-screen-label="Home — Hero">
      <div className="hcol-grid" aria-hidden="true">
        {panels.map((p, i) => (
          <div className={"hcol-panel p" + (i + 1)} key={i}>
            <img className={"hcol-img hcol-still " + (p.type === "image" ? p.kb : "")} src={p.still} alt="" />
            {p.type === "video" && (
              <video className="hcol-img hcol-video" autoPlay muted loop playsInline poster={p.still}>
                <source src={p.clip} type="video/webm" />
              </video>
            )}
            <span className="hcol-tag">{p.tag}</span>
          </div>
        ))}
      </div>

      <div className="hcol-overlay">
        <div className="hcol-textwrap">
          <Eyebrow line style={{ color: "#f3e6c9" }}>Hand-Beaded Couture · Made in Nigeria</Eyebrow>
          <h1 className="display hcol-h">{headline}</h1>
          <p className="lede hcol-sub">{sub}</p>
          <div className="hero-cta hcol-cta">
            <Btn onClick={() => onNav("shop", {})}>Explore Collections</Btn>
            <Btn variant="ghost" arrow={false} onClick={() => onNav("custom", {})}>Request a Consultation</Btn>
          </div>
          <div className="hcol-meta">
            <span><strong>Made in Nigeria</strong> · hand-beaded at our Lagos atelier</span>
            <span className="hcol-dot">•</span>
            <span><strong>Worldwide shipping</strong> · US · UK · Canada</span>
          </div>
        </div>
      </div>

      <div className="hcol-float">
        <span className="mono">AMVCA 2026</span>
        <span className="serif">Nomzamo Mbatha · on the red carpet</span>
      </div>
    </section>
  );
}

/* ---------------- TRUST BAR ---------------- */
function TrustBar() {
  const items = [
    { icon: "truck", t: "Worldwide Shipping", s: "US · UK · Canada & beyond" },
    { icon: "scissors", t: "Made in Nigeria", s: "Hand-beaded at our Lagos atelier" },
    { icon: "ruler", t: "Bespoke Couture", s: "Custom-fit to your measurements" },
    { 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>
  );
}

/* ---------------- COLLECTIONS STRIP ---------------- */
function CollectionsStrip({ onNav }) {
  const cats = [
    { name: "Bridal",     label: "COLLECTION · BRIDAL",     n: "01", fn: () => onNav("shop", { cat: "Bridal" }) },
    { name: "Red Carpet", label: "COLLECTION · RED CARPET", n: "02", fn: () => onNav("shop", { cat: "Red Carpet" }) },
    { name: "Prom",       label: "COLLECTION · PROM",       n: "03", fn: () => onNav("shop", { cat: "Prom" }) },
    { name: "Custom",     label: "COLLECTION · CUSTOM",     n: "04", fn: () => onNav("custom", {}) },
  ];
  return (
    <section className="section-pad-sm">
      <div className="wrap-wide">
        <Reveal className="section-head" style={{ marginBottom: 40 }}>
          <h2 className="serif">The four collections</h2>
          <button className="link-arrow" onClick={() => onNav("collections", {})}>View all</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={c.fn}>
                <Ph label={c.label} 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>
  );
}

/* ---------------- PRESS ---------------- */
function PressBand({ onNav }) {
  return (
    <section className="section-pad-sm press-band">
      <div className="wrap-wide press-grid">
        <Reveal className="press-media zoomable"><Ph label="PRESS · AMVCA 2026" ratio="wide" /></Reveal>
        <div className="press-body">
          <Reveal><Eyebrow line>As Seen</Eyebrow></Reveal>
          <Reveal delay={1}><h2 className="serif press-h">Dressed for the AMVCA red carpet.</h2></Reveal>
          <Reveal delay={2}>
            <p className="lede" style={{ marginBottom: 22 }}>
              Emagine by Bukola dressed Nomzamo Mbatha for the AMVCA 2026 red carpet — hand-beaded couture
              built for the biggest stage in African entertainment.
            </p>
          </Reveal>
          <Reveal delay={3}><button className="link-arrow" onClick={() => onNav("shop", { cat: "Red Carpet" })}>Shop Red Carpet</button></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 DETAIL" ratio="portrait" /></Reveal>
        <div className="story-body">
          <Reveal><Eyebrow line>The Emagine Atelier</Eyebrow></Reveal>
          <Reveal delay={1}><h2 className="serif story-h">Hand-beaded. Unforgettable.</h2></Reveal>
          <Reveal delay={2}>
            <p className="lede" style={{ marginBottom: 22 }}>
              Emagine by Bukola is a Nigerian luxury womenswear atelier — hand-beaded couture with fluid
              lines and quiet-luxury detailing. Every gown begins and ends with a needle, a thread and hours
              of hand-placed beadwork at our atelier in Lagos.
            </p>
          </Reveal>
          <Reveal delay={3}>
            <p style={{ color: "var(--ink-soft)", marginBottom: 30 }}>
              We build four collections — Red Carpet, Prom, Bridal (our bridal line, @ebbridals) and fully
              Custom commissions — every piece made in Nigeria and shipped worldwide, with dedicated service
              to the US, UK and Canada.
            </p>
          </Reveal>
          <Reveal delay={4} className="row" style={{ gap: 18, flexWrap: "wrap" }}>
            <Btn onClick={() => onNav("about", {})}>Our Story</Btn>
            <Btn variant="ghost" arrow={false} onClick={() => onNav("custom", {})}>Request a Consultation</Btn>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------------- REAL MOMENTS ---------------- */
function RealMoments({ onNav }) {
  return (
    <section className="section-pad-sm">
      <div className="wrap-wide">
        <Reveal className="section-head" style={{ marginBottom: 40 }}>
          <div>
            <Eyebrow>Real Clients</Eyebrow>
            <h2 className="serif" style={{ marginTop: 14 }}>Real brides, real moments</h2>
          </div>
          <button className="link-arrow" onClick={() => onNav("about", {})}>Our story</button>
        </Reveal>
        <div className="moments-grid">
          {RB.REAL_MOMENTS.map((m, i) => (
            <Reveal key={m.label} delay={(i % 4) + 1} className="moment-card zoomable">
              <Ph label={m.label} ratio="portrait" />
              <span className="moment-cap">{m.caption}</span>
            </Reveal>
          ))}
        </div>
      </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="CUSTOM · CONSULTATION" ratio="square" /></div>
        <div className="bespoke-body">
          <Eyebrow line>Custom &amp; Bespoke</Eyebrow>
          <h2 className="serif bespoke-h">Your dream dress, made for you.</h2>
          <p className="lede" style={{ marginBottom: 26 }}>
            Every custom and bridal commission is priced individually — there is no fixed price list.
            Share your vision through our consultation form and the atelier will reply with a personalised
            quote. Hand-crafted in Lagos and shipped worldwide, with dedicated service to the US, UK and Canada.
          </p>
          <div className="bespoke-steps">
            {[["01", "Request a consultation"], ["02", "Share your vision"], ["03", "Fittings, refined by hand"], ["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", {})}>Request a Consultation</Btn>
            <Btn variant="ghost" arrow={false} onClick={() => onNav("shop", { cat: "Bridal" })}>Shop Bridal</Btn>
          </div>
        </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? Send us a message via the Contact page and our atelier will reply.</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>
  );
}

/* ---------------- 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" />
        {p.cat !== "Bridal" && (
          <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">From <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 featured = ["silver-mermaid-gown", "flame-statement-gown", "adaeze-ivory-bridal-gown", "emerald-bloom-gown"]
    .map((id) => RB.byId(id)).filter(Boolean);
  return (
    <div className="fade-page">
      <EmagineHero headline={tweaks.heroHeadline} sub={tweaks.heroSub} onNav={onNav} />
      <TrustBar />
      <CollectionsStrip onNav={onNav} />
      <FeaturedRow eyebrow="The Atelier Edit" title="Signature pieces" products={featured} onNav={onNav} />
      <PressBand onNav={onNav} />
      <StorySection onNav={onNav} />
      <RealMoments onNav={onNav} />
      <BespokeBand onNav={onNav} />
      <FAQ />
    </div>
  );
}

Object.assign(window, { HomePage, ProductCard, EmagineHero, FAQ });