/* ============================================================
   DIOTBRAND — Homepage
   ============================================================ */

/* ---------------- TRUST BAR ---------------- */
function TrustBar() {
  const items = [
    { icon: "scissors", t: "Made to measure", s: "Every piece cut to you" },
    { icon: "ruler", t: "Built on the bodice", s: "Hand-beaded, boned corsetry" },
    { icon: "truck", t: "Worldwide delivery", s: "Commissions ship anywhere" },
    { icon: "ig", t: "On Instagram", s: (window.BRAND && window.BRAND.igHandle) || "@diotbrand" },
  ];
  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 Gowns", disp: "Bridal Gowns", label: "BRIDAL GOWNS", n: "01" },
    { name: "Custom/Eveningwear", disp: "Custom/Eveningwear", label: "CUSTOM/EVENINGWEAR", n: "02" },
    { name: "Corsetry", disp: "Corsetry", label: "CORSETRY", n: "03" },
  ];
  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" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
          {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.disp}</span>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FEATURED PRODUCTS ---------------- */
function FeaturedRow({ title, eyebrow, products, onNav, link }) {
  const { onNav: navFallback } = 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} />
            </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 · BODICE CRAFT" 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 the bodice.</h2></Reveal>
          <Reveal delay={2}>
            <p className="lede" style={{ marginBottom: 22 }}>
              {(window.BRAND?.story.body) || "Diotbrand builds every gown from the bodice out — hand-beaded, boned and fitted before the skirt is cut."}
            </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="CUSTOM · COMMISSION HERO" ratio="square" /></div>
        <div className="bespoke-body">
          <Eyebrow line>Custom Commissions</Eyebrow>
          <h2 className="serif bespoke-h">Commissioned for you, down to the stitch.</h2>
          <p className="lede" style={{ marginBottom: 26 }}>
            Describe your vision, add up to three pieces of inspiration from our own work, attach references,
            and optionally book a consultation — all on-site, no price shown upfront.
          </p>
          <div className="bespoke-steps">
            {[["01", "Submit your brief"], ["02", "Optional consultation"], ["03", "We price it for you"], ["04", "Approve & begin"]].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>
          </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 an enquiry — we reply within a few hours, {(window.BRAND?.regionLine) || "Lagos"} 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 FOLLOW BAND ---------------- */
function CommunityStrip() {
  const ig = (window.BRAND && window.BRAND.igUrl) || "https://instagram.com/diotbrand";
  return (
    <section className="lb-teaser" style={{ minHeight: 420 }}>
      <Ph label="FOLLOW · INSTAGRAM" ratio="cinema" className="lb-teaser-bg" />
      <div className="lb-teaser-ov" />
      <div className="wrap lb-teaser-content">
        <Reveal><Eyebrow style={{ color: "var(--accent-bright)" }}>{(window.BRAND && window.BRAND.igHandle) || "@diotbrand"}</Eyebrow></Reveal>
        <Reveal delay={1}><h2 className="serif lb-teaser-h">Follow the studio</h2></Reveal>
        <Reveal delay={2}><p className="lede on-img" style={{ maxWidth: "42ch", margin: "0 auto 28px" }}>
          New gowns, corsetry and behind-the-scenes from the Lagos studio — all on Instagram.
        </p></Reveal>
        <Reveal delay={3}><a className="btn" href={ig} target="_blank" rel="noopener"><span>Visit @diotbrand</span></a></Reveal>
      </div>
    </section>
  );
}

/* ---------------- PRODUCT CARD ---------------- */
function ProductCard({ p, onNav }) {
  return (
    <article className="pcard zoomable" onClick={() => onNav("product", { id: p.id })}>
      <div className="pcard-media">
        <Ph label={p.label} ratio="portrait" />
        <button className="quick" onClick={(e) => { e.stopPropagation(); onNav("custom", { inspiration: p.name }); }}>
          Request Consultation
        </button>
      </div>
      <div className="pcard-body">
        <span className="pcard-cat">{p.cat}</span>
        <span className="pcard-name">{p.name}</span>
        <button className="link-arrow" style={{ marginTop: 4 }} onClick={(e) => { e.stopPropagation(); onNav("custom", { inspiration: p.name }); }}>Request Consultation →</button>
      </div>
    </article>
  );
}

/* ---------------- HOME PAGE ---------------- */
function HomePage({ onNav, tweaks }) {
  const pieces = RB.PRODUCTS;
  return (
    <div className="fade-page">
      <HeroCollage onNav={onNav} headline={tweaks && tweaks.heroHeadline} sub={tweaks && tweaks.heroSub} />
      <TrustBar />
      <CategoryStrip onNav={onNav} />
      <FeaturedRow eyebrow="From the studio" title="Signature pieces" products={pieces} onNav={onNav} />
      <StorySection onNav={onNav} />
      <BespokeBand onNav={onNav} />
      <FAQ />
      <CommunityStrip />
    </div>
  );
}

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