/* global React */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- icons ---------- */
const Icon = {
  Search: (p) => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
  ),
  Bag: (p) => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M5 8h14l-1.2 11.2A2 2 0 0 1 15.8 21H8.2a2 2 0 0 1-2-1.8L5 8Z"/><path d="M9 8V6a3 3 0 1 1 6 0v2"/></svg>
  ),
  Heart: (p) => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 20s-7-4.35-7-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 19 10c0 5.65-7 10-7 10Z"/></svg>
  ),
  HeartFill: (p) => (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" {...p}><path d="M12 20s-7-4.35-7-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 19 10c0 5.65-7 10-7 10Z"/></svg>
  ),
  Wa: (p) => (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" {...p}><path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2Zm5.5 14.1c-.2.6-1.2 1.2-1.7 1.3-.5.1-1.1.1-1.7-.1-.4-.1-1-.3-1.7-.6-3-1.3-4.9-4.3-5.1-4.5-.1-.2-1.1-1.5-1.1-2.8 0-1.3.7-1.9 1-2.2.2-.2.6-.3.8-.3h.6c.2 0 .5-.1.7.5l.9 2.1c.1.2.1.4 0 .6l-.4.5c-.2.2-.3.4-.1.7.2.3.7 1.2 1.6 1.9 1.1.9 2 1.2 2.3 1.3.3.1.5.1.7-.1l.7-.9c.2-.3.4-.3.6-.2l1.9.9c.2.1.4.2.5.3.1.2.1.7-.2 1.5Z"/></svg>
  ),
  Ig: (p) => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
  ),
  Tt: (p) => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M14 4c.5 2.4 2.4 4 5 4v3a8 8 0 0 1-5-1.8V15a5 5 0 1 1-5-5"/></svg>
  ),
  ArrowR: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><path d="M5 12h14m-6-6 6 6-6 6"/></svg>
  ),
  Plus: (p) => (<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 5v14M5 12h14"/></svg>),
  Minus: (p) => (<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M5 12h14"/></svg>),
  Close: (p) => (<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><path d="m6 6 12 12M18 6 6 18"/></svg>),
  Dot: () => <span className="dot" />
};

/* ---------- announcement bar ---------- */
function Announcement() {
  return (
    <div className="announce">
      <span>Worldwide express · <em>2–7 days</em></span>
      <span>Complimentary gift wrap · AED 30</span>
      <span>Atelier · Dubai Design District</span>
    </div>
  );
}

/* ---------- navbar ---------- */
function Navbar({ route, navigate, bagCount, openBag, openSearch }) {
  const [megaOpen, setMegaOpen] = useState(null);

  const linkClass = (key) => "nav__link" + (route.startsWith(key) ? " active" : "");

  return (
    <header className="nav">
      <div className="nav__inner">
        <nav className="nav__left">
          <a className={linkClass("/shop")}
             onMouseEnter={() => setMegaOpen("shop")}
             onMouseLeave={() => setMegaOpen(null)}
             onClick={() => navigate("/shop")}>Shop</a>
          <a className={linkClass("/collections")}
             onMouseEnter={() => setMegaOpen("collections")}
             onMouseLeave={() => setMegaOpen(null)}
             onClick={() => navigate("/collections")}>Collections</a>
          <a className={linkClass("/fragrance")} onClick={() => navigate("/fragrance")}>Fragrance</a>
          <a className={linkClass("/gifting")} onClick={() => navigate("/gifting")}>Gifting</a>
        </nav>
        <a className="nav__logo" onClick={() => navigate("/")}>
          PEARLA
          <small>D&nbsp;U&nbsp;B&nbsp;A&nbsp;I</small>
        </a>
        <div className="nav__right">
          <a className={linkClass("/about")} onClick={() => navigate("/about")}>Atelier</a>
          <a className={linkClass("/contact")} onClick={() => navigate("/contact")}>Contact</a>
          <button className="nav__icon-btn" onClick={openSearch} aria-label="Search"><Icon.Search /></button>
          <button className="nav__icon-btn" onClick={openBag} aria-label="Bag">
            <Icon.Bag />
            {bagCount > 0 && <span className="nav__bag-count">{bagCount}</span>}
          </button>
        </div>

        {megaOpen && (
          <div className="mega"
               style={{ display: "grid" }}
               onMouseEnter={() => setMegaOpen(megaOpen)}
               onMouseLeave={() => setMegaOpen(null)}>
            {megaOpen === "shop" && (
              <>
                <div className="mega__col">
                  <span className="label">Shop By Category</span>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>Abayas</a>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>Kaftans</a>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>Dresses &amp; Caftans</a>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>Sets</a>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>Scarves</a>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>Fine Jewelry</a>
                </div>
                <div className="mega__col">
                  <span className="label">Highlights</span>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>New Arrivals</a>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>Bestsellers</a>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>Statement Pieces</a>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>Everyday Edit</a>
                  <a onClick={() => { navigate("/shop"); setMegaOpen(null); }}>Under AED 1,000</a>
                </div>
                <div className="mega__col">
                  <span className="label">Services</span>
                  <a onClick={() => { navigate("/gifting"); setMegaOpen(null); }}>Gift Wrapping</a>
                  <a onClick={() => { navigate("/about"); setMegaOpen(null); }}>Atelier Appointment</a>
                  <a onClick={() => { navigate("/contact"); setMegaOpen(null); }}>Personal Styling</a>
                  <a onClick={() => { navigate("/contact"); setMegaOpen(null); }}>Size Guide</a>
                </div>
                <a className="mega__feature" onClick={() => { navigate("/collections/princess-and-the-pearl"); setMegaOpen(null); }}>
                  <img src="media/onmodel-01-midnight-muse-lace.webp" alt="" />
                  <span>Princess and<br/>the Pearl</span>
                </a>
              </>
            )}
            {megaOpen === "collections" && (
              <>
                {window.PEARLA_DATA.collections.slice(0, 3).map(c => (
                  <a className="mega__feature" key={c.id} onClick={() => { navigate("/collections/" + c.id); setMegaOpen(null); }}>
                    <img src={c.hero} alt="" />
                    <span>{c.title}</span>
                  </a>
                ))}
                <div className="mega__col">
                  <span className="label">All Stories</span>
                  {window.PEARLA_DATA.collections.map(c => (
                    <a key={c.id} onClick={() => { navigate("/collections/" + c.id); setMegaOpen(null); }}>{c.title}</a>
                  ))}
                </div>
              </>
            )}
          </div>
        )}
      </div>
    </header>
  );
}

/* ---------- hero ---------- */
function Hero({ navigate }) {
  return (
    <section className="hero">
      <img className="hero__img" src="media/onmodel-04-celestial-bloom-abaya.webp" alt="" />
      <div className="hero__veil" />
      <div className="hero__sidetag">Chapter 06 — Princess and the Pearl</div>
      <div className="hero__content">
        <div className="hero__meta">
          <span>FW 26 / 27</span><i /><span>Editorial №06</span><i /><span>Shot in Dubai</span>
        </div>
        <h1 className="hero__title">
          Stories you<br/>can <em>wear.</em>
        </h1>
        <p className="hero__sub">
          Contemporary modest fashion from Dubai — each piece a never‑ending fairytale, written in lace, thread and the long quiet evenings of the Gulf.
        </p>
        <div className="hero__ctas">
          <button className="btn btn--light" onClick={() => navigate("/collections/new-collection")}>Shop New Collection <Icon.ArrowR /></button>
          <button className="btn btn--ghost-light" onClick={() => navigate("/about")}>Discover Pearla</button>
        </div>
      </div>
    </section>
  );
}

/* ---------- pedigree strip ---------- */
function Pedigree() {
  return (
    <div className="pedigree">
      <span>An Emirati House</span>
      <Icon.Dot />
      <em>Showcased at Arab Fashion Week — RTW FW 22 / 23</em>
      <Icon.Dot />
      <span>Founded by Hessa &amp; Fatma Ali Aljoker</span>
      <Icon.Dot />
      <span>Atelier · d3 · Dubai</span>
    </div>
  );
}

/* ---------- featured collections ---------- */
function CollectionsBlock({ navigate }) {
  const cols = window.PEARLA_DATA.collections.slice(0, 4);
  return (
    <section className="section wrap">
      <div className="sec-head">
        <div className="sec-head__title">
          <span className="eyebrow">The Chapters</span>
          <h2 className="h-1">Collections, each a small fairytale.</h2>
        </div>
        <a className="link-arrow" onClick={() => navigate("/collections")}>All Collections <Icon.ArrowR /></a>
      </div>
      <div className="coll-grid">
        {cols.map((c, i) => (
          <article className={"coll-card" + (i === 0 ? " tall" : "")} key={c.id} onClick={() => navigate("/collections/" + c.id)}>
            <div className="coll-card__media">
              <img src={c.hero} alt={c.title} />
              <span className="coll-card__count">{c.count} pieces</span>
              <span className="coll-card__season">{c.subtitle}</span>
            </div>
            <div className="coll-card__body">
              <span className="label">{c.tag}</span>
              <h3 className="h-3">{c.title}</h3>
              <p className="muted body-m">{c.kicker}</p>
              <span className="link-arrow" style={{ marginTop: 6, alignSelf: "flex-start" }}>Read the chapter <Icon.ArrowR /></span>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ---------- product card ---------- */
function ProductCard({ p, onOpen, onAdd, fav, toggleFav }) {
  return (
    <article className="prod-card" onClick={() => onOpen(p.id)}>
      <div className="prod-card__media">
        <img className="main" src={p.image} alt={p.name} loading="lazy" />
        {p.alt && <img className="alt" src={p.alt} alt="" loading="lazy" />}
        {p.tag && <span className="prod-card__tag">{p.tag}</span>}
        <button className={"prod-card__heart" + (fav ? " on" : "")}
                onClick={(e) => { e.stopPropagation(); toggleFav(p.id); }}
                aria-label="Save">
          {fav ? <Icon.HeartFill /> : <Icon.Heart />}
        </button>
        <button className="prod-card__quick" onClick={(e) => { e.stopPropagation(); onAdd(p, "M"); }}>
          Quick add — Size M
        </button>
      </div>
      <div className="prod-card__body">
        <span className="prod-card__name">{p.name}</span>
        <div className="prod-card__row">
          <span>{p.category} · {p.collection}</span>
          <span className="prod-card__price">AED {p.price.toLocaleString()}</span>
        </div>
      </div>
    </article>
  );
}

/* ---------- signature pieces grid ---------- */
function ProductsBlock({ navigate, onAdd, favs, toggleFav, products }) {
  const list = products || window.PEARLA_DATA.products.slice(0, 8);
  return (
    <section className="section wrap" style={{ paddingTop: 0 }}>
      <div className="sec-head">
        <div className="sec-head__title">
          <span className="eyebrow">Signature Pieces</span>
          <h2 className="h-1">The wardrobe of this season.</h2>
        </div>
        <a className="link-arrow" onClick={() => navigate("/shop")}>Shop all 61 pieces <Icon.ArrowR /></a>
      </div>
      <div className="prod-grid">
        {list.map(p => (
          <ProductCard key={p.id} p={p}
            onOpen={(id) => navigate("/product/" + id)}
            onAdd={onAdd}
            fav={favs.has(p.id)}
            toggleFav={toggleFav} />
        ))}
      </div>
    </section>
  );
}

/* ---------- gifting block ---------- */
function GiftingBlock({ navigate }) {
  return (
    <section className="section wrap">
      <div className="gift">
        <div className="gift__visual" aria-hidden="true">
          <div className="gift__ribbon" />
          <div className="gift__bow" />
          <div className="gift__tag">For the one<br/>who loves a long ending.</div>
        </div>
        <div className="gift__body">
          <span className="eyebrow">Pearla, wrapped</span>
          <h2 className="h-1">Wrapped like<br/>a story.</h2>
          <p className="lede">
            Every order leaves the atelier ribbon‑tied, tissue‑lined and tucked with a handwritten note — gifting that feels like the piece itself.
          </p>
          <ul className="gift__points">
            <li><b>Atelier gift wrap</b>Hand‑finished tissue, ribbon &amp; wax‑seal. AED 30.</li>
            <li><b>Personal note</b>Up to 240 characters, written by the team in ink.</li>
            <li><b>Ramadan &amp; Eid edits</b>Curated by occasion, ready to send.</li>
            <li><b>Concierge gifting</b>WhatsApp the team — they'll choose with you.</li>
          </ul>
          <div style={{ display: "flex", gap: 12, marginTop: 18 }}>
            <button className="btn" onClick={() => navigate("/gifting")}>Explore Gifting <Icon.ArrowR /></button>
            <a className="btn btn--ghost" href="https://wa.me/971528009555" target="_blank">WhatsApp the Atelier</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- seasonal drop marquee ---------- */
function SeasonalDrop({ navigate }) {
  const text = (
    <>
      <span><b>Ramadan &amp; Eid '26</b></span>
      <span><i>✦</i></span>
      <span>The lace is ready</span>
      <span><i>✦</i></span>
      <span>Preview the collection</span>
      <span><i>✦</i></span>
      <span><b>Ramadan &amp; Eid '26</b></span>
      <span><i>✦</i></span>
      <span>The lace is ready</span>
      <span><i>✦</i></span>
      <span>Preview the collection</span>
      <span><i>✦</i></span>
    </>
  );
  return (
    <div className="wrap">
      <div className="drop" onClick={() => navigate("/collections/ramadan-eid")} style={{ cursor: "pointer" }}>
        <span className="label" style={{ paddingLeft: 8 }}>Drop 07</span>
        <div className="drop__marquee">{text}{text}</div>
        <a className="link-arrow" style={{ paddingRight: 8 }}>Open the chapter <Icon.ArrowR /></a>
      </div>
    </div>
  );
}

/* ---------- fragrance band ---------- */
function FragranceBlock({ navigate }) {
  return (
    <section className="frag">
      <div className="frag__inner">
        <div className="frag__copy">
          <span className="eyebrow">A brand‑world extension</span>
          <h2>
            S'<em>élever</em><br />— the scent of<br />the story.
          </h2>
          <p className="lede" style={{ color: "rgba(251,247,241,0.85)" }}>
            Our signature eau de parfum. Built around oud, white tea and a tied silk ribbon — for the woman who treats fragrance as wardrobe.
          </p>
          <div className="frag__notes">
            <div>
              <span className="label">Top</span>
              <b>Bergamot · Pear</b>
            </div>
            <div>
              <span className="label">Heart</span>
              <b>White tea · Jasmine</b>
            </div>
            <div>
              <span className="label">Base</span>
              <b>Oud · Cashmere musk</b>
            </div>
          </div>
          <div className="frag__price">AED 100 — 30 ML · AED 200 — 50 ML</div>
          <div style={{ display: "flex", gap: 12, marginTop: 22 }}>
            <button className="btn btn--light" onClick={() => navigate("/fragrance")}>Discover the Scent <Icon.ArrowR /></button>
            <button className="btn btn--ghost-light" onClick={() => navigate("/fragrance")}>Order a sample</button>
          </div>
        </div>
        <div className="frag__visual">
          <img className="bg" src="media/fragrance-selever-lifestyle.webp" alt="" />
          <img className="bottle" src="media/fragrance-selever-bottle.webp" alt="S'élever bottle" />
        </div>
        <div className="frag__ornament" />
      </div>
    </section>
  );
}

/* ---------- founder note ---------- */
function FounderBlock({ navigate }) {
  return (
    <section className="section wrap">
      <div className="founder">
        <div className="founder__media">
          <div className="placeholder">
            <span className="mono">[ founder portrait — client to supply ]</span>
            <h3>Hessa &amp; Fatma Ali Aljoker</h3>
            <span className="mono">Sisters · Creative Directors · Dubai</span>
          </div>
        </div>
        <div>
          <span className="eyebrow">A note from the atelier</span>
          <p className="founder__quote" style={{ marginTop: 14 }}>
            Each piece withholds a story, so the woman who chooses to wear it feels like the protagonist of a never‑ending fairytale.
          </p>
          <div className="founder__sig">
            <span className="label">Signed</span>
            <em>— Hessa &amp; Fatma</em>
          </div>
          <p className="body-l" style={{ marginTop: 26, color: "var(--ink)", maxWidth: "52ch" }}>
            We design in two registers — wearable everyday pieces in fine fabrics, and theatrical statements for the nights you'll remember. Both written from Dubai, both made to outlast the season.
          </p>
          <button className="btn btn--ghost" style={{ marginTop: 28 }} onClick={() => navigate("/about")}>Read the full story <Icon.ArrowR /></button>
        </div>
      </div>
    </section>
  );
}

/* ---------- social strip ---------- */
function SocialBlock() {
  const tiles = window.PEARLA_DATA.social;
  return (
    <section className="section wrap" style={{ paddingTop: 0 }}>
      <div className="social__head">
        <div className="sec-head__title">
          <span className="eyebrow">@pearladubai</span>
          <h2 className="h-2">As worn, as photographed,<br/>as you've sent us.</h2>
        </div>
        <div style={{ display: "flex", gap: 12 }}>
          <a className="btn btn--ghost btn--sm" href="https://instagram.com/pearladubai" target="_blank"><Icon.Ig /> Instagram</a>
          <a className="btn btn--ghost btn--sm" href="https://tiktok.com/@pearladubai" target="_blank"><Icon.Tt /> TikTok</a>
        </div>
      </div>
      <div className="social">
        {tiles.map((src, i) => (
          <a className="social__tile" key={i} href="https://instagram.com/pearladubai" target="_blank">
            <img src={src} alt="" loading="lazy" />
            <span className="icon"><Icon.Ig /></span>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ---------- newsletter ---------- */
function Newsletter() {
  const [done, setDone] = useState(false);
  return (
    <section className="newsletter">
      <span className="eyebrow">The Atelier Letter</span>
      <h2 className="h-1" style={{ marginTop: 10 }}>Stories, first.</h2>
      <p className="lede muted" style={{ margin: "16px auto 0", maxWidth: "48ch" }}>
        Drops, invitations and the occasional private preview — sent twice a month, never more.
      </p>
      <form onSubmit={(e) => { e.preventDefault(); setDone(true); }}>
        {!done ? (
          <>
            <input type="email" placeholder="Your email" required />
            <button type="submit">Subscribe <Icon.ArrowR /></button>
          </>
        ) : (
          <span className="label" style={{ margin: "0 auto", paddingBlock: 14 }}>Welcome to the atelier ✦</span>
        )}
      </form>
      <p className="label" style={{ marginTop: 18 }}>By subscribing you agree to our privacy policy.</p>
    </section>
  );
}

/* ---------- footer ---------- */
function Footer({ navigate }) {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__top">
          <div className="footer__brand">
            <span className="footer__logo">PEARLA</span>
            <p>An Emirati contemporary modest‑fashion house — abayas, kaftans, dresses and a signature scent, designed and shipped from the Dubai Design District.</p>
            <div style={{ display: "flex", gap: 10, marginTop: 8 }}>
              <a className="btn btn--ghost-light btn--sm" href="https://instagram.com/pearladubai" target="_blank"><Icon.Ig /></a>
              <a className="btn btn--ghost-light btn--sm" href="https://tiktok.com/@pearladubai" target="_blank"><Icon.Tt /></a>
              <a className="btn btn--ghost-light btn--sm" href="https://wa.me/971528009555" target="_blank"><Icon.Wa /></a>
            </div>
          </div>
          <div className="footer__col">
            <h4>Shop</h4>
            <a onClick={() => navigate("/shop")}>Abayas</a>
            <a onClick={() => navigate("/shop")}>Kaftans</a>
            <a onClick={() => navigate("/shop")}>Dresses &amp; Caftans</a>
            <a onClick={() => navigate("/shop")}>Sets</a>
            <a onClick={() => navigate("/shop")}>Scarves</a>
            <a onClick={() => navigate("/shop")}>Fine Jewelry</a>
          </div>
          <div className="footer__col">
            <h4>The Story</h4>
            <a onClick={() => navigate("/collections")}>Collections</a>
            <a onClick={() => navigate("/fragrance")}>S'élever Fragrance</a>
            <a onClick={() => navigate("/gifting")}>Gifting</a>
            <a onClick={() => navigate("/about")}>About Pearla</a>
            <a onClick={() => navigate("/about")}>Atelier Appointment</a>
          </div>
          <div className="footer__col">
            <h4>Service</h4>
            <a onClick={() => navigate("/contact")}>Size Guide</a>
            <a onClick={() => navigate("/contact")}>Shipping &amp; Returns</a>
            <a onClick={() => navigate("/contact")}>Contact</a>
            <a onClick={() => navigate("/contact")}>Terms &amp; Conditions</a>
            <a onClick={() => navigate("/contact")}>Join Our Team</a>
          </div>
          <div className="footer__col">
            <h4>Atelier</h4>
            <a>Office 303B, Building 5</a>
            <a>Dubai Design District</a>
            <a>P.O. Box 20213, Dubai UAE</a>
            <a href="mailto:info@pearla.ae" style={{ marginTop: 12 }}>info@pearla.ae</a>
            <a href="tel:+97142772012">+971 4 277 2012</a>
            <a href="https://wa.me/971528009555">+971 52 800 9555 · WhatsApp</a>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 Pearla Trading L.L.C. · Dubai</span>
          <span>Prices in AED · Worldwide via Premium Express, 2–7 days</span>
        </div>
      </div>
    </footer>
  );
}

/* expose */
Object.assign(window, {
  Icon, Announcement, Navbar, Hero, Pedigree, CollectionsBlock,
  ProductCard, ProductsBlock, GiftingBlock, SeasonalDrop,
  FragranceBlock, FounderBlock, SocialBlock, Newsletter, Footer
});
