// Queen of Spades — editorial demo
// Multi-view SPA: home, /collections, four lookbooks, /designer, /recognition, /contact

const { useState, useEffect, useRef, useCallback } = React;

/* ─────────────────────────────────────────  data  ───────────────────────────── */
const MEDIA = "media/";
// Recovered archive images are small (570–1155px). We've upscaled each to 2x
// with high-quality smoothing so they display crisp on retina/large screens.
const img2x = (file) => MEDIA + file.replace(/\.webp$/, "-2x.webp");
const T = {
  en: {
    nav: { collections: "Collections", designer: "The Designer", recognition: "Recognition", contact: "Visit", enquire: "Enquire" },
  },
  ar: {
    nav: { collections: "المجموعات", designer: "المصممة", recognition: "تكريم", contact: "زيارة", enquire: "استفسر" },
  },
};

const LINES = [
  { id: "abayas", num: "01", name: "Signature Abayas", ar: "عبايات التوقيع", img: "cover-abayas.webp", desc: "Jumpsuit · high-low · belted · reversible — the abaya, reinvented." },
  { id: "eveningwear", num: "02", name: "Eveningwear", ar: "فساتين السهرة", img: "gala-01.webp", desc: "Kaftans, gowns and statement cover-ups for the occasion." },
  { id: "bridal", num: "03", name: "Bridal", ar: "العرائس", img: "cover-weddings.webp", desc: "The bride, in colour — made-to-order, by private consultation." },
  { id: "baby-spades", num: "04", name: "Baby Spades", ar: "بيبي سبيدز", img: "cover-baby-spades.webp", desc: "Little queens — the Queen of Spades spirit, made for girls." },
];

const ABAYA_LOOKS = [
  { id: "AB-01", name: "Picnic Basket — Polka", img: "abaya-colour-02.webp", tag: "Colour SS" },
  { id: "AB-02", name: "Picnic Basket — Floral", img: "cover-abayas.webp", tag: "Colour SS" },
  { id: "AB-03", name: "Picnic Basket — Black", img: "abaya-colour-03.webp", tag: "Colour SS" },
  { id: "AB-04", name: "Garden Stripe", img: "abaya-colour-01.webp", tag: "Colour SS" },
  { id: "AB-05", name: "Frost Cape", img: "collection-snow-01.webp", tag: "Snow FW" },
  { id: "AB-06", name: "Frost Embroidered", img: "collection-snow-02.webp", tag: "Snow FW" },
  { id: "AB-07", name: "Lemons & Lace", img: "feathers-01.webp", tag: "Atelier" },
  { id: "AB-08", name: "Runway 01 — Cape", img: "runway-01.webp", tag: "Runway" },
  { id: "AB-09", name: "Runway 02 — Mustard", img: "runway-02.webp", tag: "Runway" },
  { id: "AB-10", name: "Runway 03 — Gold Trim", img: "runway-03.webp", tag: "Runway" },
  { id: "AB-11", name: "Runway 04 — Sage", img: "runway-04.webp", tag: "Runway" },
  { id: "AB-12", name: "Pearl & Fringe", img: "princess-01.webp", tag: "Vintage" },
];

const EVE_LOOKS = [
  { id: "EV-01", name: "Vamp — Couture Gown", img: "gala-01.webp", tag: "Eveningwear" },
  { id: "EV-02", name: "Vamp — Editorial", img: "gala-02.webp", tag: "Eveningwear" },
  { id: "EV-03", name: "Velvet & Gold", img: "cover-feathers.webp", tag: "Eveningwear" },
  { id: "EV-04", name: "Lace Cocktail", img: "feathers-01.webp", tag: "Eveningwear" },
];

const BRIDAL_LOOKS = [
  { id: "BR-01", name: "Cathedral Veil", img: "cover-weddings.webp", tag: "Bridal" },
  { id: "BR-02", name: "Mother & Daughter", img: "wedding-01.webp", tag: "Bridal" },
  { id: "BR-03", name: "Blush Ribbon", img: "wedding-02.webp", tag: "Bridal" },
];

const BABY_LOOKS = [
  { id: "BS-01", name: "Little Queen — Ivory", img: "cover-baby-spades.webp", tag: "Baby Spades" },
  { id: "BS-02", name: "Letter Print", img: "princess-01.webp", tag: "Baby Spades" },
];

const RECOGNITION = [
  { label: "Documentary", title: "Featured in a National Geographic documentary on old vs modern UAE", date: "~ June 2015", src: "Per Khaleej Times — confirm exact title/date" },
  { label: "Publication", title: "Profiled in the book \u201CEmirati Women Achievers\u201D", date: "Xponent Media, 2015", src: "Per Khaleej Times" },
  { label: "Stockist", title: "Galeries Lafayette, The Dubai Mall — stockist since February 2010", date: "2010 — among first Emirati designers", src: "Per Haute Arabia · Khaleej Times" },
  { label: "Collaboration", title: "Rolls-Royce — limited-edition couture collection", date: "Year TBC", src: "Per brand PR — specifics + image rights to confirm", gated: true },
  { label: "Collaboration", title: "Cadillac \u201CMasterpieces\u201D — exterior artwork", date: "Year TBC", src: "Per brand PR — specifics + image rights to confirm", gated: true },
  { label: "Press", title: "Khaleej Times — \u201CLamya Abedin, reigning Queen of Spades\u201D", date: "July 2015", src: "Khaleej Times" },
];

const TIMELINE = [
  { year: "2008", what: "Lamya Abedin founds Queen of Spades — born from a search for a one-of-a-kind abaya. The brand name nods to the playing card: black spade, colourful inside." },
  { year: "Feb 2010", what: "Boutique launch at Galeries Lafayette, The Dubai Mall — among the first Emirati designers stocked there." },
  { year: "2014–15", what: "Shows at Arab Fashion Week, Dubai. Stocked across the UAE, Saudi Arabia, Qatar and South Africa." },
  { year: "June 2015", what: "Featured in a National Geographic documentary comparing old and modern UAE; profiled in the book \u201CEmirati Women Achievers.\u201D" },
  { year: "Collaborations", what: "Limited-edition couture collection with Rolls-Royce; \u201CMasterpieces\u201D exterior artwork with Cadillac. Specifics + imagery rights TBC." },
  { year: "Today", what: "Atelier at Dubai Design District (d3), Building 06, 1st floor, B102. By appointment for bridal & made-to-order." },
];

/* ─────────────────────────────────────────  primitives  ─────────────────────── */
function SpadePip({ size = 12, color = "#0C0B0A", accent = "#9E2B25" }) {
  return (
    <svg viewBox="0 0 80 80" width={size} height={size} aria-hidden="true">
      <path d="M40 4 C40 4 8 30 8 50 a16 16 0 0 0 28 11 c-1 9-5 14-10 17 h28 c-5-3-9-8-10-17 a16 16 0 0 0 28-11 C72 30 40 4 40 4 Z" fill={color} />
      <path d="M40 14 C40 14 22 32 22 47 a9 9 0 0 0 18 2 Z" fill={accent} />
    </svg>
  );
}

function Logo({ size = 22, dark }) {
  return (
    <span className="nav-logo" onClick={() => window.navigate && window.navigate("home")}>
      <span className="pip">
        <SpadePip size={size} color={dark ? "#0C0B0A" : "#F6F2EA"} accent="#9E2B25" />
      </span>
      <span className="wm" style={{ color: dark ? "#0C0B0A" : "#F6F2EA" }}>Queen of Spades</span>
    </span>
  );
}

/* ─────────────────────────────────────────  Navbar  ─────────────────────────── */
function Navbar({ route, navigate, lang, setLang, openEnquiry }) {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const on = () => setSolid(window.scrollY > 80);
    window.addEventListener("scroll", on); on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  useEffect(() => { setSolid(route !== "home"); }, [route]);
  const t = T[lang].nav;
  const isActive = (r) => route === r || (r === "collections" && route.startsWith("collections"));
  return (
    <nav className={`nav ${solid ? "solid" : ""}`}>
      <div className="nav-left">
        <Logo />
      </div>
      <div className="nav-right">
        <button className={`nav-link ${isActive("collections") ? "active" : ""}`} onClick={() => navigate("collections")}>{t.collections}</button>
        <button className={`nav-link ${isActive("designer") ? "active" : ""}`} onClick={() => navigate("designer")}>{t.designer}</button>
        <button className={`nav-link ${isActive("recognition") ? "active" : ""}`} onClick={() => navigate("recognition")}>{t.recognition}</button>
        <button className={`nav-link ${isActive("contact") ? "active" : ""}`} onClick={() => navigate("contact")}>{t.contact}</button>
        <div className="lang-toggle" aria-label="Language">
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          <button className={lang === "ar" ? "on" : ""} onClick={() => setLang("ar")}>ع</button>
        </div>
        <button className="nav-cta" onClick={() => openEnquiry()}>{t.enquire} <span style={{marginLeft: 4}}>↗</span></button>
      </div>
    </nav>
  );
}

/* ─────────────────────────────────────────  Footer  ────────────────────────── */
function Footer({ navigate, openEnquiry }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-col foot-brand">
            <div className="mark">
              <SpadePip size={28} color="#F6F2EA" accent="#9E2B25" />
              <span className="wm">Queen of Spades</span>
            </div>
            <p className="blurb">A pioneering Dubai abaya-couture house by Emirati designer Lamya Abedin. Founded 2008. Atelier at Dubai Design District (d3), by appointment.</p>
          </div>
          <div className="foot-col">
            <h4>Collections</h4>
            {LINES.map(l => (
              <a key={l.id} onClick={() => navigate("collections/" + l.id)}>{l.name}</a>
            ))}
          </div>
          <div className="foot-col">
            <h4>The House</h4>
            <a onClick={() => navigate("designer")}>The Designer</a>
            <a onClick={() => navigate("recognition")}>Recognition &amp; Press</a>
            <a onClick={() => navigate("contact")}>Visit d3</a>
            <a onClick={() => openEnquiry()}>Make an Enquiry</a>
          </div>
          <div className="foot-col">
            <h4>Channels</h4>
            <a href="https://instagram.com/queenofspadesbylamyaabedin" target="_blank" rel="noopener noreferrer">Instagram ↗</a>
            <span className="li" style={{color: "var(--ochre)", fontSize: 11, fontFamily: "JetBrains Mono, monospace", letterSpacing: "0.15em"}}>WHATSAPP · CLIENT TO CONFIRM</span>
            <span className="li" style={{color: "var(--ochre)", fontSize: 11, fontFamily: "JetBrains Mono, monospace", letterSpacing: "0.15em"}}>EMAIL · CLIENT TO CONFIRM</span>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© Queen of Spades · Lamya Abedin · Est. 2008</span>
          <span style={{display: "flex", gap: 12, alignItems: "center"}}>
            <SpadePip size={10} color="#9E2B25" accent="#F6F2EA" />
            Dubai Design District, UAE — by appointment
          </span>
          <span>Editorial rebuild — site demo</span>
        </div>
      </div>
    </footer>
  );
}

/* ─────────────────────────────────────────  Hero (home)  ───────────────────── */
// Editorial magazine-cover layout. Image is CONTAINED (not full-bleed) so the
// recovered archive photos (570–1155px wide) display at near-native resolution.
const HERO_FRAMES = [
  { img: "cover-abayas.webp",        sig: "N° I",   tag: "PICNIC BASKET · S/S",   caption: "Florals, breaking the black" },
  { img: "abaya-colour-02.webp",     sig: "N° II",  tag: "POLKA · GARDEN",        caption: "Black canvas, polka through" },
  { img: "cover-feathers.webp",      sig: "N° III", tag: "FEATHERS · ATELIER",    caption: "Texture, breaking the black" },
  { img: "cover-weddings.webp",      sig: "N° IV",  tag: "BRIDAL · ARCHIVE",      caption: "The bride, in colour" },
];

function Hero({ openEnquiry, navigate }) {
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % HERO_FRAMES.length), 5200);
    return () => clearInterval(id);
  }, []);
  const frame = HERO_FRAMES[active];
  return (
    <header className="hero">
      <div className="hero-grid">
        <div className="hero-left">
          <div>
            <div className="hero-eyebrow-row">
              <SpadePip size={16} accent="#c33b33" color="#F6F2EA" />
              <span className="eyebrow red">Edition 01 · Lookbook 2025</span>
              <span className="rule" />
              <span className="eyebrow">House of Lamya Abedin · since 2008</span>
            </div>
            <h1>
              Breaking<br/>
              <span className="through">through</span><br/>
              <span className="the">the black.</span>
            </h1>
            <p className="hero-sub">
              The reinvented abaya — in colour, in motion, in your wardrobe.
              Designed in Dubai by Lamya Abedin since 2008.
            </p>
            <div className="hero-actions">
              <button className="btn red" onClick={() => navigate("collections")}>Explore the Collections <span className="arr">→</span></button>
              <button className="btn ghost" onClick={() => openEnquiry()}>Make an Enquiry <span className="arr">↗</span></button>
            </div>
          </div>
          <div className="hero-foot">
            <div className="col">N° 048 / Dubai<strong>Atelier · d3 Bldg 06</strong></div>
            <div className="col" style={{textAlign: "center"}}>Lookbook 2025<strong>04 lines · 21 looks</strong></div>
            <div className="col" style={{textAlign: "right"}}>Index — scroll<strong>01 of 06 ↓</strong></div>
          </div>
        </div>
        <div className="hero-right">
          <div className="hero-photo" key={frame.img} style={{ backgroundImage: `url(${img2x(frame.img)})` }} />
          <div className="hero-overlay-mark"><span className="dot" /> Atelier · open by appointment</div>
          <div className="hero-thumbs">
            {HERO_FRAMES.map((f, i) => (
              <div
                key={i}
                className={`hero-thumb ${i === active ? "on" : ""}`}
                style={{ backgroundImage: `url(${img2x(f.img)})` }}
                onClick={() => setActive(i)}
              />
            ))}
          </div>
          <div className="hero-overlay-caption">
            <div className="num">{frame.sig}</div>
            <div className="lbl"><strong>{frame.tag}</strong>{frame.caption}</div>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ─────────────────────────────────────────  Marquee  ───────────────────────── */
function Marquee() {
  const items = ["Jumpsuit Abaya", "High-Low", "Belted", "Reversible", "Pocketed", "Eveningwear", "Bridal · By Appointment", "Baby Spades"];
  const seg = (
    <span>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span style={{color: "var(--bone)"}}>{it}</span>
          <span className="marquee-dot">✦</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">{seg}{seg}</div>
    </div>
  );
}

/* ─────────────────────────────────────────  Concept  ───────────────────────── */
function Concept() {
  return (
    <section className="concept">
      <div className="container">
        <div className="concept-grid">
          <div>
            <div className="eyebrow red" style={{marginBottom: 24}}>§ 01 / The Concept</div>
            <div className="concept-quote">
              "The spade is black,<br/>
              but the card is <span className="em">colourful</span>.<br/>
              We're trying to revolutionise the abaya."
            </div>
            <div className="concept-attr">
              <span className="eyebrow">— Lamya Abedin · Founder · per Khaleej Times</span>
            </div>
          </div>
          <div className="concept-body">
            <div className="eyebrow" style={{marginBottom: 18}}>The premise</div>
            <p>
              For two decades the abaya was framed as one thing: black, full-length, uniform. Queen of Spades was founded in 2008 to break through that — to reimagine the silhouette in red, blue and grey; in jumpsuit, high-low, belted, pocketed and reversible cuts.
            </p>
            <p>
              The result is an abaya that keeps its grace and dissent — a black canvas with colour breaking through. The line has since expanded into eveningwear, bridal, and a children's edit called <em>Baby Spades</em>.
            </p>
            <div style={{marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap"}}>
              {["Jumpsuit", "High-Low", "Belted", "Pocketed", "Reversible"].map(s => (
                <span key={s} style={{padding: "8px 14px", border: "1px solid var(--line-2)", fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--bone)"}}>{s}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────  Collections grid  ──────────────── */
function CollectionsBlock({ navigate }) {
  return (
    <section className="collections">
      <div className="container-wide">
        <div className="section-header">
          <div>
            <div className="eyebrow red" style={{marginBottom: 16}}>§ 02 / Four Worlds</div>
            <h2>The Collections.</h2>
          </div>
          <div className="right">
            One signature, four worlds<br/>
            Colour, breaking the black
          </div>
        </div>
        <div className="coll-grid">
          {LINES.map(l => (
            <div key={l.id} className="coll-tile" onClick={() => navigate("collections/" + l.id)}>
              <div className="img" style={{ backgroundImage: `url(${img2x(l.img)})` }} />
              <div className="veil" />
              <div className="corner">N° {l.num} <span className="marquee-dot">✦</span></div>
              <div className="corner-arrow">↗</div>
              <div className="meta">
                <div className="num">Index / {l.num}</div>
                <div className="name">{l.name}</div>
                <div className="desc">{l.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────  Editorial stripe  ──────────────── */
function EditorialStripe() {
  return (
    <section className="editorial-stripe">
      <div className="container-wide">
        <div className="eyebrow red" style={{marginBottom: 24}}>§ 03 / In Colour</div>
        <div className="es-grid">
          <div className="es-figure" style={{ backgroundImage: `url(${img2x('abaya-colour-01.webp')})` }} />
          <div className="es-text" style={{textAlign: "center"}}>
            <div className="es-num">N°<span style={{fontSize: "0.5em", verticalAlign: "super"}}>03</span></div>
            <h2 style={{marginTop: 24}}>Picnic Basket,<br/>in three colours.</h2>
            <p style={{margin: "16px auto 0"}}>An exhibit of the house's central idea — print, polka, stripe and embroidery, mounted against the brand's signature noir. Spring/Summer edit.</p>
          </div>
          <div className="es-figure wide" style={{ backgroundImage: `url(${img2x('cover-abayas.webp')})` }} />
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────  Designer teaser  ──────────────── */
function DesignerTeaser({ navigate }) {
  return (
    <section className="designer-block">
      <div className="container">
        <div className="designer-grid">
          <div className="designer-portrait" style={{ backgroundImage: `url(${img2x('designer-lamya-abedin.webp')})` }} />
          <div className="designer-text">
            <div className="eyebrow red" style={{marginBottom: 24}}>§ 04 / The Designer</div>
            <h2>Lamya<br/>Abedin.</h2>
            <p className="quote">"If abayas are meant to be completely black, then you will see me doing the opposite."</p>
            <p className="body">
              Self-taught Emirati designer, mother of three, former government research officer.
              Founded Queen of Spades in 2008 after a search for a one-of-a-kind abaya turned into a brand. Inspirations drawn from Japanese kimono and Malaysian batik.
            </p>
            <div className="designer-meta">
              <div className="cell"><div className="num">2008</div><div className="label">Founded</div></div>
              <div className="cell"><div className="num">04</div><div className="label">Lines</div></div>
              <div className="cell"><div className="num">15+</div><div className="label">Years</div></div>
            </div>
            <div style={{marginTop: 36}}>
              <button className="btn" onClick={() => navigate("designer")}>Meet the Designer <span className="arr">→</span></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────  Recognition strip (home)  ─────── */
function RecognitionHome({ navigate }) {
  const items = RECOGNITION.slice(0, 5);
  return (
    <section className="recognition">
      <div className="container-wide">
        <div className="rec-head">
          <div className="eyebrow red" style={{marginBottom: 18}}>§ 05 / Recognition</div>
          <h2>As told elsewhere.</h2>
          <p className="sub">Public record — attributed, dated. No invented ratings or follower counts; the house's story has been told by other people, on the record.</p>
        </div>
        <div className="rec-row">
          {items.map((r, i) => (
            <div key={i} className="rec-cell">
              <div>
                <div className="label">{r.label}</div>
                <div className="title" style={{marginTop: 12}}>{r.title}</div>
              </div>
              <div className="src">{r.date}</div>
            </div>
          ))}
        </div>
        <div style={{textAlign: "center", marginTop: 40}}>
          <button className="btn ghost" onClick={() => navigate("recognition")}>Full press archive <span className="arr">→</span></button>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────  Contact band (home)  ─────────── */
function ContactBand({ navigate, openEnquiry }) {
  return (
    <section className="contact-band">
      <div className="container">
        <div className="cb-grid">
          <div className="cb-img" style={{ backgroundImage: `url(${img2x('store-d3.webp')})` }} />
          <div className="cb-text">
            <div className="eyebrow red" style={{marginBottom: 24}}>§ 06 / Visit</div>
            <h2>Every woman,<br/>a queen.</h2>
            <p className="body">The atelier is open by appointment at Dubai Design District. For bridal and made-to-order, book a private consultation — we'll meet you with fabrics in hand.</p>
            <div className="lines">
              <div className="ln"><div className="k">Atelier</div><div className="v">Dubai Design District (d3)<br/>Building 06, 1st floor, B102</div></div>
              <div className="ln"><div className="k">Hours</div><div className="v">Mon–Sat · 10:00 — 22:00 <span className="pending">[CLIENT TO CONFIRM]</span></div></div>
              <div className="ln"><div className="k">Channels</div><div className="v">Instagram <a href="https://instagram.com/queenofspadesbylamyaabedin" target="_blank" rel="noopener" style={{color: "var(--red-bright)", textDecoration: "underline"}}>@queenofspadesbylamyaabedin</a></div></div>
            </div>
            <div style={{display: "flex", gap: 12, flexWrap: "wrap"}}>
              <button className="btn red" onClick={() => openEnquiry()}>Make an Enquiry <span className="arr">→</span></button>
              <button className="btn ghost" onClick={() => navigate("contact")}>Visit details <span className="arr">↗</span></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────  Enquiry modal  ─────────────────── */
function EnquiryModal({ open, onClose, prefill, onSubmit }) {
  const [interest, setInterest] = useState(prefill?.interest || "Signature Abayas");
  const [piece, setPiece] = useState(prefill?.piece || "");
  const [date, setDate] = useState("");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [msg, setMsg] = useState("");
  useEffect(() => {
    if (prefill) {
      setInterest(prefill.interest || "Signature Abayas");
      setPiece(prefill.piece || "");
    }
  }, [prefill, open]);
  useEffect(() => {
    if (!open) return;
    const k = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", k);
    return () => document.removeEventListener("keydown", k);
  }, [open, onClose]);
  if (!open) return null;
  const heroImg = interest === "Bridal" ? "wedding-02.webp" : interest === "Eveningwear" ? "gala-01.webp" : interest === "Baby Spades" ? "cover-baby-spades.webp" : "abaya-colour-02.webp";
  const handle = (e) => {
    e.preventDefault();
    onSubmit({ interest, piece, date, name, email, phone, msg });
  };
  return (
    <div className="modal-veil" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="left" style={{ backgroundImage: `url(${img2x(heroImg)})` }} />
        <div className="right">
          <button className="close" onClick={onClose} aria-label="Close">×</button>
          <div className="eyebrow red" style={{marginBottom: 12}}>§ Enquiry</div>
          <h3>Make an Enquiry.</h3>
          <p className="lead">A short note — the atelier will reach out within two working days.</p>
          <form onSubmit={handle}>
            <div className="field">
              <label>Interest</label>
              <div className="chips">
                {["Signature Abayas", "Eveningwear", "Bridal", "Baby Spades"].map(c => (
                  <button type="button" key={c} className={`chip ${interest === c ? "on" : ""}`} onClick={() => setInterest(c)}>{c}</button>
                ))}
              </div>
            </div>
            {piece && (
              <div className="field">
                <label>Piece</label>
                <input value={piece} onChange={(e) => setPiece(e.target.value)} />
              </div>
            )}
            <div className="field-row">
              <div className="field"><label>Name</label><input value={name} onChange={(e) => setName(e.target.value)} required /></div>
              <div className="field"><label>Email</label><input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required /></div>
            </div>
            <div className="field-row">
              <div className="field"><label>Phone / WhatsApp</label><input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="+971…" /></div>
              {interest === "Bridal" && (
                <div className="field"><label>Event date</label><input type="date" value={date} onChange={(e) => setDate(e.target.value)} /></div>
              )}
            </div>
            <div className="field"><label>Message</label><textarea value={msg} onChange={(e) => setMsg(e.target.value)} rows={3} placeholder="A little about what you're looking for…" /></div>
            <div className="modal-actions">
              <span className="eyebrow">Your enquiry · noted in confidence</span>
              <button type="submit" className="btn red">Send Enquiry <span className="arr">→</span></button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────  Home  ──────────────────────────── */
function Home({ navigate, openEnquiry }) {
  return (
    <main>
      <Hero openEnquiry={openEnquiry} navigate={navigate} />
      <Marquee />
      <Concept />
      <CollectionsBlock navigate={navigate} />
      <EditorialStripe />
      <DesignerTeaser navigate={navigate} />
      <RecognitionHome navigate={navigate} />
      <ContactBand navigate={navigate} openEnquiry={openEnquiry} />
    </main>
  );
}

/* ─────────────────────────────────────────  Page wrappers (sub-routes)  ───── */
function PageHero({ crumbs, title, lede, num, navigate }) {
  return (
    <section className="page-hero">
      <div className="container">
        <div className="crumbs">
          <a onClick={() => navigate("home")}>House</a> <span>/</span>
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              {c.route ? <a onClick={() => navigate(c.route)}>{c.label}</a> : <span>{c.label}</span>}
              {i < crumbs.length - 1 && <span>/</span>}
            </React.Fragment>
          ))}
        </div>
        <div style={{display: "flex", alignItems: "end", justifyContent: "space-between", gap: 24, flexWrap: "wrap", marginTop: 16}}>
          <h1>{title}</h1>
          {num && <div className="eyebrow red">{num}</div>}
        </div>
        {lede && <p className="lede">{lede}</p>}
      </div>
    </section>
  );
}

function CollectionsHub({ navigate }) {
  return (
    <div className="page-wrap">
      <PageHero
        navigate={navigate}
        crumbs={[{ label: "Collections" }]}
        title={<>Four worlds,<br/>one signature.</>}
        num="§ 02 · Lookbook 2025"
        lede="Each line shares the same starting point — a black canvas, and a refusal to leave it there. Choose a world; the atelier will meet you there."
      />
      <section style={{padding: "32px 0 120px"}}>
        <div className="container-wide">
          <div className="coll-grid">
            {LINES.map(l => (
              <div key={l.id} className="coll-tile" onClick={() => navigate("collections/" + l.id)} style={{aspectRatio: "3/4.6"}}>
                <div className="img" style={{ backgroundImage: `url(${img2x(l.img)})` }} />
                <div className="veil" />
                <div className="corner">N° {l.num} <span className="marquee-dot">✦</span></div>
                <div className="corner-arrow">↗</div>
                <div className="meta">
                  <div className="num">Index / {l.num}</div>
                  <div className="name">{l.name}</div>
                  <div className="desc">{l.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function Lookbook({ line, looks, navigate, openEnquiry, copy, num, extra }) {
  const [filter, setFilter] = useState("All");
  const tags = ["All", ...Array.from(new Set(looks.map(l => l.tag)))];
  const filtered = filter === "All" ? looks : looks.filter(l => l.tag === filter);
  return (
    <div className="page-wrap">
      <PageHero
        navigate={navigate}
        crumbs={[{ label: "Collections", route: "collections" }, { label: line.name }]}
        title={copy.title}
        num={num}
        lede={copy.lede}
      />
      {extra}
      <section className="lookbook">
        <div className="container-wide">
          <div className="lb-bar">
            <div className="filters">
              {tags.map(t => (
                <button key={t} className={`chip ${filter === t ? "on" : ""}`} onClick={() => setFilter(t)}>{t}</button>
              ))}
            </div>
            <div className="count">{filtered.length} {filtered.length === 1 ? "Look" : "Looks"}</div>
          </div>
          <div className="lb-grid">
            {filtered.map((look, i) => (
              <div key={look.id} className="lb-item" onClick={() => openEnquiry({ interest: line.name, piece: look.name })}>
                <div className="figure" style={{ backgroundImage: `url(${img2x(look.img)})` }}>
                  <div className="num">N° {look.id}</div>
                  <div className="enq"><span>Enquire about this piece</span><span>↗</span></div>
                </div>
                <div className="info">
                  <div className="name">{look.name}</div>
                  <div className="tag">{look.tag}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{textAlign: "center", marginTop: 64, paddingTop: 48, borderTop: "1px solid var(--line)"}}>
            <p className="serif-i" style={{fontSize: 28, marginBottom: 24, color: "var(--bone)"}}>Found a piece that's almost there?</p>
            <button className="btn red" onClick={() => openEnquiry({ interest: line.name })}>Enquire about a custom piece <span className="arr">→</span></button>
          </div>
        </div>
      </section>
    </div>
  );
}

function BridalFunnel({ openEnquiry }) {
  return (
    <section className="funnel">
      <div className="container">
        <div style={{display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24}}>
          <div>
            <div className="eyebrow red" style={{marginBottom: 18}}>§ Bridal · Three steps</div>
            <h2 style={{fontSize: 56, maxWidth: 480}}>The bride,<br/>in colour.</h2>
          </div>
          <p style={{color: "var(--bone)", fontSize: 16, maxWidth: 380, lineHeight: 1.65}}>Made-to-order, by private consultation. Three steps from inspiration to fitting — every gown personal, every detail named.</p>
        </div>
        <div className="funnel-steps">
          {[
            { n: "I", t: "Inspiration", d: "Begin in the bridal lookbook. Save the silhouettes, fabrics, palette and details that move you." },
            { n: "II", t: "Private Consultation", d: "Meet the atelier at d3. We bring fabrics in hand, sketch on the spot. Lead time confirmed at the meeting." },
            { n: "III", t: "Your Appointment", d: "Fittings, finishings, and the final piece — delivered by appointment in time for your day." },
          ].map((s, i) => (
            <div key={i} className="funnel-step">
              <div className="num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <span className="num-label">Step {i + 1} of 3</span>
            </div>
          ))}
        </div>
        <div style={{marginTop: 40, display: "flex", justifyContent: "center"}}>
          <button className="btn red" onClick={() => openEnquiry({ interest: "Bridal" })}>Request a Bridal Consultation <span className="arr">→</span></button>
        </div>
      </div>
    </section>
  );
}

function DesignerPage({ navigate, openEnquiry }) {
  return (
    <div className="page-wrap">
      <PageHero
        navigate={navigate}
        crumbs={[{ label: "The Designer" }]}
        title={<>Lamya<br/>Abedin.</>}
        num="§ 04 · Founder"
        lede="Self-taught Emirati designer. Mother of three. Former government research officer. Founded Queen of Spades in 2008 — out of a search for a one-of-a-kind abaya that turned into a fifteen-year house."
      />
      <section>
        <div className="container">
          <div className="designer-page-grid">
            <div className="stack">
              <img src={img2x('designer-lamya-abedin.webp')} alt="Lamya Abedin" />
              <img src={img2x('designer-lamya-abedin-2.webp')} alt="Lamya Abedin in her studio" />
            </div>
            <div className="copy">
              <div className="eyebrow red" style={{marginBottom: 20}}>The Story</div>
              <p className="serif-i" style={{fontSize: 30, color: "var(--ivory)", lineHeight: 1.25, marginBottom: 24}}>
                "If abayas are meant to be completely black, then you will see me doing the opposite."
              </p>
              <p>A business and accounting background, a former role as a government research officer, and three children later — Lamya Abedin started Queen of Spades because she couldn't find an abaya that looked the way she felt.</p>
              <p>The brand name nods to the playing card. The spade is black; the card itself is colourful. The abaya, she argued, could work the same way: black canvas, colour breaking through. Red. Blue. Grey. New silhouettes — jumpsuit, high-low, belted, pocketed, reversible.</p>
              <p>Her design references travel further than the GCC — Japanese kimono construction, Malaysian batik printwork, European tailoring. Lived experience across Europe, Africa, Saudi Arabia and the UAE shows up in the cuts.</p>
              <p>The house has since expanded into eveningwear, bridal, and a children's line called Baby Spades — and remains designer-led from a small atelier at Dubai Design District.</p>
              <div className="timeline">
                <div className="eyebrow red" style={{padding: "20px 0 8px"}}>§ A short timeline</div>
                {TIMELINE.map((t, i) => (
                  <div key={i} className="timeline-row">
                    <div className="year">{t.year}</div>
                    <div className="what">{t.what}</div>
                  </div>
                ))}
              </div>
              <div style={{marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap"}}>
                <button className="btn red" onClick={() => openEnquiry()}>Speak with the atelier <span className="arr">→</span></button>
                <button className="btn ghost" onClick={() => navigate("recognition")}>Recognition &amp; press <span className="arr">↗</span></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function RecognitionPage({ navigate }) {
  return (
    <div className="page-wrap">
      <PageHero
        navigate={navigate}
        crumbs={[{ label: "Recognition" }]}
        title={<>As told<br/>elsewhere.</>}
        num="§ 05 · Press"
        lede="A short archive of public-record recognition — every claim attributed and dated. Rights-sensitive imagery is held back until written clearance is confirmed."
      />
      <section>
        <div className="container">
          <div className="rec-page-grid">
            {RECOGNITION.map((r, i) => (
              <div key={i} className="rec-card">
                <div className="meta-line"><span>{r.label}</span><span>{r.date}</span></div>
                <h3>{r.title}</h3>
                {r.gated && (
                  <div className="gated">
                    <div className="lock">⚑ Imagery rights-gated</div>
                    <div className="note">Published only with written clearance</div>
                  </div>
                )}
                {!r.gated && (
                  <p className="blurb">A dated, public reference confirming part of the house's record. We list this here in attribution form, not as marketing claim — the citation is the headline, not the boast.</p>
                )}
                <div className="footer-line">
                  <span className="src">Source · {r.src}</span>
                  <span className="src" style={{color: "var(--red-bright)"}}>N° {(i+1).toString().padStart(2,'0')} ↗</span>
                </div>
              </div>
            ))}
          </div>
          <div style={{padding: "32px 0", borderTop: "1px solid var(--line)", textAlign: "center"}}>
            <p className="eyebrow">No invented ratings. No follower counts. No celebrity images without clearance.</p>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactPage({ navigate, openEnquiry }) {
  return (
    <div className="page-wrap">
      <PageHero
        navigate={navigate}
        crumbs={[{ label: "Visit" }]}
        title={<>Visit the<br/>atelier.</>}
        num="§ 06 · d3"
        lede="The atelier is open by appointment at Dubai Design District (d3). For bridal and made-to-order, we recommend booking a private consultation in advance."
      />
      <section className="contact-page">
        <div className="container">
          <div className="contact-grid">
            <div className="map" style={{ backgroundImage: `url(${img2x('store-d3.webp')})` }}>
              <div style={{position: "absolute", top: 24, left: 24, fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.2em", color: "var(--ivory)"}}>
                25.18° N · 55.30° E<br/>
                <span style={{color: "var(--red-bright)"}}>D3 · BLDG 06 · B102</span>
              </div>
              <div style={{position: "absolute", bottom: 24, left: 24, right: 24, display: "flex", justifyContent: "space-between", alignItems: "end", color: "var(--bone)"}}>
                <span className="eyebrow">Archive image — 2014–2019</span>
                <span className="eyebrow" style={{color: "var(--ochre)"}}>Map · pin TBC</span>
              </div>
            </div>
            <div className="contact-info">
              <div className="group">
                <div className="k">Address</div>
                <div className="v">
                  Dubai Design District (d3)<br/>
                  Building 06, 1st floor, B102<br/>
                  Dubai, United Arab Emirates<br/>
                  <span className="pending" style={{marginTop: 8, display: "inline-block"}}>UNIT · CLIENT TO CONFIRM</span>
                </div>
              </div>
              <div className="group">
                <div className="k">Hours</div>
                <div className="v">
                  Monday – Saturday<br/>
                  10:00 – 22:00<br/>
                  <span className="pending" style={{marginTop: 8, display: "inline-block"}}>HOURS · CLIENT TO CONFIRM</span>
                </div>
              </div>
              <div className="group">
                <div className="k">Channels</div>
                <div className="v">
                  Instagram · <a href="https://instagram.com/queenofspadesbylamyaabedin" target="_blank" rel="noopener" style={{color: "var(--red-bright)", textDecoration: "underline"}}>@queenofspadesbylamyaabedin</a><br/>
                  <span className="pending" style={{marginTop: 8, display: "inline-block"}}>PHONE · WHATSAPP · EMAIL · CLIENT TO CONFIRM</span>
                </div>
              </div>
              <div className="group">
                <div className="k">By appointment</div>
                <div className="v">
                  For bridal, made-to-order or a styling visit, please write ahead. The atelier replies within two working days.<br/><br/>
                  <button className="btn red" onClick={() => openEnquiry()}>Make an Enquiry <span className="arr">→</span></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ─────────────────────────────────────────  Router  ────────────────────────── */
function App() {
  const [route, setRoute] = useState("home");
  const [lang, setLang] = useState("en");
  const [modal, setModal] = useState({ open: false, prefill: null });
  const [toast, setToast] = useState(null);

  const navigate = useCallback((r) => {
    setRoute(r);
    window.scrollTo({ top: 0, behavior: "instant" });
    history.replaceState({}, "", "#" + r);
  }, []);
  useEffect(() => { window.navigate = navigate; }, [navigate]);

  useEffect(() => {
    const h = location.hash.slice(1);
    if (h) setRoute(h);
  }, []);

  const openEnquiry = (prefill = null) => setModal({ open: true, prefill });
  const closeEnquiry = () => setModal({ open: false, prefill: null });

  const submitEnquiry = (data) => {
    closeEnquiry();
    setToast(`Enquiry noted — we'll reply within two working days · ${data.name || "Friend"}`);
    setTimeout(() => setToast(null), 3500);
  };

  let body;
  if (route === "home") body = <Home navigate={navigate} openEnquiry={openEnquiry} />;
  else if (route === "collections") body = <CollectionsHub navigate={navigate} />;
  else if (route === "collections/abayas") body = <Lookbook line={LINES[0]} looks={ABAYA_LOOKS} navigate={navigate} openEnquiry={openEnquiry} num="§ 01 / Lookbook 2025" copy={{ title: <>Signature<br/>Abayas.</>, lede: "Jumpsuit, high-low, belted, pocketed, reversible — the abaya, reinvented in colour and new materials. Twelve looks across three editorial seasons." }} />;
  else if (route === "collections/eveningwear") body = <Lookbook line={LINES[1]} looks={EVE_LOOKS} navigate={navigate} openEnquiry={openEnquiry} num="§ 02 / Eveningwear" copy={{ title: <>Eveningwear.</>, lede: "Kaftans, evening dresses and statement cover-ups — couture for the occasion. By enquiry, by appointment." }} />;
  else if (route === "collections/bridal") body = <Lookbook line={LINES[2]} looks={BRIDAL_LOOKS} navigate={navigate} openEnquiry={openEnquiry} num="§ 03 / Bridal" copy={{ title: <>The bride,<br/>in colour.</>, lede: "Made-to-order, by private consultation. A bridal house that argues for colour and dissent inside the white tradition." }} extra={<BridalFunnel openEnquiry={openEnquiry} />} />;
  else if (route === "collections/baby-spades") body = <Lookbook line={LINES[3]} looks={BABY_LOOKS} navigate={navigate} openEnquiry={openEnquiry} num="§ 04 / Baby Spades" copy={{ title: <>Baby Spades.</>, lede: "Little queens — the Queen of Spades spirit, made for girls. By enquiry." }} />;
  else if (route === "designer") body = <DesignerPage navigate={navigate} openEnquiry={openEnquiry} />;
  else if (route === "recognition") body = <RecognitionPage navigate={navigate} />;
  else if (route === "contact") body = <ContactPage navigate={navigate} openEnquiry={openEnquiry} />;
  else body = <Home navigate={navigate} openEnquiry={openEnquiry} />;

  return (
    <div dir={lang === "ar" ? "rtl" : "ltr"}>
      <Navbar route={route} navigate={navigate} lang={lang} setLang={setLang} openEnquiry={openEnquiry} />
      {body}
      <Footer navigate={navigate} openEnquiry={openEnquiry} />
      <EnquiryModal open={modal.open} onClose={closeEnquiry} prefill={modal.prefill} onSubmit={submitEnquiry} />
      <button className="fab" onClick={() => openEnquiry()} title="Make an enquiry" aria-label="Enquire">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
      </button>
      {toast && <div className="toast">{toast}</div>}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);