/* ============================================================
   LARA EVELYN — Homepage
   ============================================================ */

/* ---------------- HERO ---------------- */
function Hero({ headline, sub, onNav }) {
  return (
    <section className="hero hero-split">
      <div className="hero-split-text">
        <Eyebrow line>Bespoke · Made to Measure</Eyebrow>
        <h1 className="display hero-h" style={{ whiteSpace: "pre-line" }}>{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("custom", {})}>Start a Bespoke Enquiry</Btn>
        </div>
        <div className="hero-meta">
          <div><strong>Bespoke</strong><span>Made-to-measure atelier</span></div>
          <div><strong>Nigeria &amp; worldwide</strong><span>Shipping on every commission</span></div>
        </div>
      </div>
      <div className="hero-mosaic">
        <div className="hm-tile hm-a zoomable">
          <Ph label="HERO · MOSAIC · 1" ratio="fill" />
          <video className="hm-video" autoPlay muted loop playsInline src="https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/lara-evelyn-storefront/lara_v1_24s.mp4" />
        </div>
        <div className="hm-tile hm-b zoomable">
          <Ph label="HERO · MOSAIC · 2" ratio="fill" />
          <video className="hm-video" autoPlay muted loop playsInline src="https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/lara-evelyn-storefront/lara_v2_13s.mp4" />
        </div>
        <div className="hm-tile hm-c zoomable">
          <Ph label="HERO · MOSAIC · 3" ratio="fill" />
          <video className="hm-video" autoPlay muted loop playsInline src="https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/lara-evelyn-storefront/lara_v3_24s.mp4" />
        </div>
        <div className="hm-tile hm-d zoomable">
          <Ph label="HERO · MOSAIC · 4" ratio="fill" />
          <video className="hm-video" autoPlay muted loop playsInline src="https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/lara-evelyn-storefront/lara_v4_26s.mp4" />
        </div>
        <div className="hero-float">
          <span className="mono">SIGNATURE</span>
          <span className="serif">Aso-Oke Bridal Set</span>
        </div>
      </div>
    </section>
  );
}

/* ---------------- TRUST BAR ---------------- */
function TrustBar() {
  const items = [
    { icon: "scissors", t: "Bespoke atelier", s: "Made to your measurements" },
    { icon: "truck", t: "Nigeria & worldwide shipping", s: "Tracked delivery on every order" },
    { icon: "ruler", t: "Fittings included", s: "Cut and finished for you" },
    { icon: "shield", t: "Secure checkout", s: "Card or bank transfer" },
  ];
  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: "Aso-Oke Bridal", disp: "Aso-Oke Bridal", label: "ASO-OKE BRIDAL · SHOP", n: "01" },
    { name: "Agbada", disp: "Agbada", label: "AGBADA · SHOP", n: "02" },
    { name: "Beaded Lace Gown", disp: "Beaded Lace Gowns", label: "BEADED LACE · SHOP", n: "03" },
    { name: "Aso-Ebi Set", disp: "Aso-Ebi Sets", label: "ASO-EBI · SHOP", n: "04" },
  ];
  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 pieces</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} ratio="portrait" />
                <div className="cat-card-cap">
                  <span className="mono">{c.n}</span>
                  <span className="serif">{c.disp}</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-FINISHING" ratio="portrait" /></Reveal>
        <div className="story-body">
          <Reveal><Eyebrow line>Our Story</Eyebrow></Reveal>
          <Reveal delay={1}><h2 className="serif story-h">A house built on fit.</h2></Reveal>
          <Reveal delay={2}>
            <p className="lede" style={{ marginBottom: 22 }}>
              {(window.BRAND?.story.body) || "Aso-oke bridal sets, groom agbada, couple aso-ebi looks and beaded lace gowns — each piece is measured, cut and finished by hand."}
            </p>
          </Reveal>
          <Reveal delay={3} className="row" style={{ gap: 18, flexWrap: "wrap" }}>
            <Btn onClick={() => onNav("about", {})}>Read our story</Btn>
          </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="BESPOKE · FITTING" 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 }}>
            Tell us the occasion, the fabric and the fit you have in mind. Every commission is measured,
            cut and finished by hand — for one person, a couple, or a full aso-ebi party.
          </p>
          <div className="bespoke-steps">
            {[["01", "Share your vision"], ["02", "Choose fabric & cut"], ["03", "Fittings"], ["04", "Delivered to you"]].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 Bespoke Enquiry</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>
        </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" />
        <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 bespokeEdit = ["royal-aso-oke-ensemble", "crystal-corset-lace-gown", "groom-agbada-gold", "couple-aso-ebi-look"].map(RB.byId).filter(Boolean);
  return (
    <div className="fade-page">
      <Hero headline={tweaks.heroHeadline} sub={tweaks.heroSub} onNav={onNav} />
      <TrustBar />
      <CategoryStrip onNav={onNav} />
      <FeaturedRow eyebrow="Just added" title="New this season" products={newArrivals} onNav={onNav} />
      <FeaturedRow eyebrow="Signature commissions" title="The bespoke edit" products={bespokeEdit} onNav={onNav} />
      <StorySection onNav={onNav} />
      <BespokeBand onNav={onNav} />
      <Testimonials />
      <FAQ />
    </div>
  );
}

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