/* ============================================================
   ADORN — Homepage (heroes, rails, edits, lookbook teaser)
   ============================================================ */

/* ---------------- HERO VARIANTS ---------------- */
function HeroSplit({ headline, onNav }) {
  return (
    <section className="hero hero-split">
      <div className="hero-split-text">
        <h1 className="display hero-h">{headline}</h1>
        <div className="hero-cta">
          <Btn onClick={() => onNav("shop", {})}>Shop New Arrivals</Btn>
        </div>
        <div className="hero-meta">
          <div><strong>Made to order</strong><span>Hand-beaded, piece by piece</span></div>
          <div><strong>Worldwide</strong><span>Tracked delivery from Ibadan</span></div>
        </div>
      </div>
      <div className="hero-split-media zoomable">
        <Vid label="HERO · PANEL A" ratio="tall" eager />
        <div className="hero-float">
          <span className="mono">SIGNATURE</span>
          <span className="serif">The Eko Top-Handle</span>
        </div>
      </div>
    </section>
  );
}

function HeroCentered({ headline, onNav }) {
  return (
    <section className="hero hero-centered">
      <Vid label="HERO · PANEL B" ratio="cinema" className="hero-centered-bg" eager />
      <div className="hero-centered-overlay" />
      <div className="hero-centered-content">
        <h1 className="display hero-h on-img">{headline}</h1>
        <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 HeroStacked({ headline, onNav }) {
  const words = headline.split(" ");
  return (
    <section className="hero hero-stacked">
      <div className="hero-stk-top wrap">
        <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"><Vid label="HERO · PANEL C" ratio="wide" eager /></div>
        <div className="hero-stk-card">
          <Btn block onClick={() => onNav("shop", {})}>Shop the Collection</Btn>
        </div>
        <div className="hero-stk-img b zoomable"><Ph label="HERO · PANEL D" ratio="portrait" /></div>
      </div>
      <Marquee items={RB.CATEGORIES} />
    </section>
  );
}

/* ---------------- COLLAGE HERO (default) ----------------
   Five panels, five distinct brand films — one main panel carrying
   the headline over a local scrim, plus four category panels. */
const HCG_PANELS = [
  { key: "clutches", chip: "Clutches", cls: "b", vid: "HERO · PANEL B", cat: "Clutches" },
  { key: "accessories", chip: "Accessories", cls: "c", vid: "HERO · PANEL C", cat: "Beaded Accessories" },
  { key: "bags", chip: "Beaded Bags", cls: "d", img: "HERO · PANEL D", cat: "Beaded Bags" },
];
function HeroCollage({ headline, onNav }) {
  return (
    <section className="hero hero-collage">
      <div className="hcg-grid">
        <div className="hcg-panel a">
          <Vid label="HERO · PANEL A" ratio="tall" className="hcg-media" eager />
          <div className="hcg-scrim" aria-hidden="true" />
          <div className="hcg-text">
            <h1 className="display hcg-h">{headline}</h1>
            <div className="hero-cta hcg-cta">
              <Btn onClick={() => onNav("shop", {})}>Shop New Arrivals</Btn>
            </div>
          </div>
        </div>
        {HCG_PANELS.map((pn) => (
          <button key={pn.key} className={"hcg-panel zoomable " + pn.cls}
            onClick={() => onNav("shop", pn.cat ? { cat: pn.cat } : {})} aria-label={pn.chip}>
            {pn.vid
              ? <Vid label={pn.vid} ratio="tall" className="hcg-media" eager />
              : <Ph label={pn.img} ratio="tall" className="hcg-media" />}
            <span className="hcg-chip">{pn.chip} <Icon name="arrow" size={13} /></span>
          </button>
        ))}
      </div>
    </section>
  );
}

function Hero(props) {
  const map = { collage: HeroCollage, split: HeroSplit, centered: HeroCentered, stacked: HeroStacked };
  const Cmp = map[props.layout] || HeroCollage;
  return <Cmp {...props} />;
}

/* ---------------- TRUST BAR (service facts only) ---------------- */
function TrustBar() {
  const items = [
    { icon: "truck", t: "Nationwide & worldwide", s: "Tracked delivery from Ibadan" },
    { icon: "spark", t: "Made to order", s: "Hand-beaded, piece by piece" },
    { icon: "return", t: "Custom colours", s: "Most pieces can be beaded to order" },
    { icon: "shield", t: "Secure on-site checkout", s: "Paystack & dollar wire 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 (8 categories) ---------------- */
function CategoryStrip({ onNav }) {
  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 adorn-cats" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
          {RB.CATEGORIES.map((cat, i) => (
            <Reveal key={cat} delay={(i % 4) + 1} className="cat-card zoomable">
              <button className="cat-card-btn" onClick={() => onNav("shop", { cat })}>
                <Ph label={cat.toUpperCase() + " · SHOP"} ratio="portrait" />
                <div className="cat-card-cap">
                  <span className="mono">{String(i + 1).padStart(2, "0")}</span>
                  <span className="serif">{cat}</span>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- PRODUCT CARD ---------------- */
function ProductCard({ p, onNav, onAdd, wished, onWish }) {
  const sizing = RB.SIZING[p.sizing];
  const needsSize = sizing && sizing.required;
  const quick = (e) => {
    e.stopPropagation();
    onAdd(p);
  };
  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={quick}>Add to bag</button>
      </div>
      <div className="pcard-body">
        <span className="pcard-cat">{p.sub || p.cat}</span>
        <span className="pcard-name">{p.name}</span>
        <Price ngn={p.price} className="pcard-price" />
        <div className="swatches">
          {p.colors.slice(0, 4).map((c) => <span key={c.name} className="swatch" style={{ background: c.hex }} title={c.name} />)}
          {p.colors.length > 4 && <span className="swatch-more">+{p.colors.length - 4}</span>}
        </div>
      </div>
    </article>
  );
}

/* ---------------- FEATURED RAIL ---------------- */
function FeaturedRow({ title, 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 }}>
          <h2 className="serif">{title}</h2>
          <button className="link-arrow" onClick={() => onNav("shop", link || {})}>View all</button>
        </Reveal>
        <div className="product-grid" style={products.length < 4 ? { gridTemplateColumns: `repeat(${products.length}, 1fr)` } : undefined}>
          {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="STUDIO · PACKING" ratio="portrait" /></Reveal>
        <div className="story-body">
          <Reveal><h2 className="serif story-h" style={{ marginTop: 0 }}>The finishing touch.</h2></Reveal>
          <Reveal delay={1} className="row" style={{ gap: 18, flexWrap: "wrap" }}>
            <Btn onClick={() => onNav("about", {})}>Read our story</Btn>
          </Reveal>
        </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">
          <h2 className="serif" style={{ fontSize: "clamp(32px,4vw,52px)", fontWeight: 500, 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>
  );
}

/* ---------------- HOME PAGE ---------------- */
function HomePage({ onNav, tweaks }) {
  const newIn = RB.PRODUCTS.filter((p) => p.badge === "New").slice(0, 4);
  const signature = RB.PRODUCTS.filter((p) => p.badge === "Signature").slice(0, 4);
  return (
    <div className="fade-page">
      <Hero layout={tweaks.heroLayout} headline={tweaks.heroHeadline} onNav={onNav} />
      <TrustBar />
      <CategoryStrip onNav={onNav} />
      <FeaturedRow title="New this week" products={newIn} onNav={onNav} />
      <FeaturedRow title="The signatures" products={signature} onNav={onNav} />
      <StorySection onNav={onNav} />
      <FAQ />
    </div>
  );
}

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