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

/* ─────────── content (real data, sourced from brief) ─────────── */

// Twelve named bridal gowns (from the live bridal feed)
const BRIDAL = [
  { id: "SELENA",    name: "Selena",    price: 16500, img: "media/bridal-01-selena.webp",    note: "Off-shoulder organza, sculpted bow tail",  collection: "L'Amour en Fleurs" },
  { id: "LEONIE",    name: "Léonie",    price: 16500, img: "media/bridal-02-leonie.webp",    note: "Strapless sheath, appliqué floral veil",    collection: "L'Amour en Fleurs" },
  { id: "CELESTINE", name: "Céléstine", price: 22000, img: "media/bridal-03-celestine.webp", note: "Strapless A-line, three-dimensional bloom", collection: "Garden Tales" },
  { id: "SOPHIA",    name: "Sophia",    price: 23000, img: "media/bridal-04-sophia.webp",    note: "Strapless ball, magnolia embroidery",       collection: "L'Amour Sucré" },
  { id: "DALIA",     name: "Dalia",     price: 24000, img: "media/bridal-05-dalia.webp",     note: "Hand-beaded bodice, voluminous veil",       collection: "L'Amour Sucré" },
  { id: "ZOE",       name: "Zoé",       price: 27000, img: "media/bridal-06-zoe.webp",       note: "Sheer bateau lace, slim belt detail",       collection: "Garden Tales" },
  { id: "SOLENE",    name: "Solène",    price: 29000, img: "media/bridal-07-solene.webp",    note: "Strapless pearl ball, sheer gloves",        collection: "L'Amour en Fleurs" },
  { id: "LUNA",      name: "Luna",      price: 46000, img: "media/bridal-08-luna.webp",      note: "Off-shoulder beaded chiffon, full skirt",   collection: "L'Amour en Fleurs" },
  { id: "AYLA",      name: "Ayla",      price: 44000, img: "media/bridal-09-ayla.webp",      note: "Strapless beaded couture, tulle train",     collection: "Garden Tales" },
  { id: "LILLY",     name: "Lilly",     price: 29000, img: "media/bridal-10-lilly.webp",     note: "Long-sleeve micro-bead, structured A-line", collection: "L'Amour Sucré" },
  { id: "GAIA",      name: "Gaia",      price: 28000, img: "media/bridal-11-gaia.webp",      note: "Lace ballgown, off-shoulder detailing",     collection: "L'Amour en Fleurs" },
  { id: "AMBER",     name: "Amber",     price: 32000, img: "media/bridal-12-amber.webp",     note: "Floral appliqué, cascading butterfly veil", collection: "Garden Tales" },
];

// Eveningwear (from media manifest)
const EVENING = [
  { id: "EV1", name: "Strapless Hand-Beaded Gown",    price: 16800, img: "media/ev-01-hand-beaded-shawl.webp", note: "With organza shawl, made to order" },
  { id: "EV2", name: "Pleated Beaded-Flower Gown",    price: 15600, img: "media/ev-02-pleated-flowers.webp",   note: "Structured plissé, hand-beaded flora" },
  { id: "EV3", name: "Mermaid Lace Gown",              price: 10300, img: "media/ev-03-mermaid-lace.webp",      note: "Strapless lace, bow-tail detail" },
  { id: "EV4", name: "Linear Off-Shoulder Beaded",     price: 17900, img: "media/ev-04-linear-beaded.webp",     note: "Hand-stitched linear beadwork" },
  { id: "EV5", name: "Halter Beaded Top & Skirt",     price:  9900, img: "media/ev-05-halter-flared.webp",     note: "Halter bodice, flared crepe skirt" },
  { id: "EV6", name: "Heart-Shaped Beaded Gown",      price: 15400, img: "media/ev-06-heart-beaded.webp",      note: "Sweetheart neck, full bead constellation" },
  { id: "EV7", name: "Off-Shoulder Plissé Tulle",     price:  8400, img: "media/ev-07-plisse-tulle.webp",      note: "Structured plissé, voluminous skirt" },
  { id: "EV8", name: "Wave-Draped Cage Gown",         price:  8800, img: "media/ev-08-cage-flowers.webp",      note: "Hand-draped wave, three-dimensional flowers" },
];

// 8 featured pieces for the curated grid — mix bridal + eveningwear
const FEATURED = [
  { src: BRIDAL[7],  type: "BRIDAL"  }, // Luna
  { src: EVENING[3], type: "EVENING" }, // Linear Off-Shoulder
  { src: BRIDAL[5],  type: "BRIDAL"  }, // Zoé
  { src: EVENING[1], type: "EVENING" }, // Pleated Flowers
  { src: BRIDAL[2],  type: "BRIDAL"  }, // Céléstine
  { src: EVENING[5], type: "EVENING" }, // Heart Beaded
  { src: BRIDAL[10], type: "BRIDAL"  }, // Gaia
  { src: EVENING[0], type: "EVENING" }, // Hand-Beaded Shawl
];

const SHOWROOMS = [
  {
    city: "Dubai",
    tag: "Evening Wear · d3",
    addr: "Dubai Design District\nBuilding 8, Showroom 310 · 3rd Floor",
    rows: [
      ["Phone",  "+971 58 508 7555"],
      ["Hours",  "Mon–Fri  11:00 – 19:00\nSaturday  11:00 – 18:00", "flagged"],
      ["By",     "Appointment only"],
    ],
    schedulista: "1074577152",
    waText: "Hi%20Sandy%20Nour%2C%20I%27d%20like%20to%20visit%20the%20d3%20eveningwear%20showroom.",
    map: "https://maps.app.goo.gl/iwV9eFLQCt2dmu6h8",
  },
  {
    city: "Dubai",
    tag: "Bridal · Jebel Ali",
    addr: "National Industries Park\nJebel Ali",
    rows: [
      ["Phone",  "+971 58 514 0008"],
      ["Hours",  "Mon–Fri  11:00 – 19:00\nSaturday  11:00 – 18:00", "flagged"],
      ["By",     "Appointment only"],
    ],
    schedulista: "1074642641",
    waText: "Hi%20Sandy%20Nour%2C%20I%27d%20like%20to%20visit%20the%20Jebel%20Ali%20bridal%20showroom.",
    map: "https://maps.app.goo.gl/",
  },
  {
    city: "Beirut",
    tag: "Bridal & Eveningwear",
    addr: "Nahr el Mot, Mar Mtanios Street\nRazico Center · 2nd Floor",
    rows: [
      ["Phone",  "+961 70 885 955"],
      ["Hours",  "Mon–Fri  10:00 – 18:00"],
      ["By",     "Appointment only"],
    ],
    schedulista: "1074645528",
    waText: "Hi%20Sandy%20Nour%2C%20I%27d%20like%20to%20visit%20the%20Beirut%20atelier.",
    map: "https://maps.app.goo.gl/",
  },
];

const TIMELINE = [
  ["MILAN",   "MA, Istituto Marangoni"],
  ["BEIRUT",  "Atelier & sample-room, est. mid-2000s"],
  ["2017",    "Eponymous bridal and eveningwear lines launched"],
  ["TODAY",   "230+ international stockists, 50+ artisans and designers"],
];

const SCHEDULISTA = "https://www.schedulista.com/schedule/sandynour/choose_time";
const WA_BASE = "https://wa.me/971522693605";

/* ─────────── i18n ─── only a handful of strings flipped on toggle ─── */
const I18N = {
  en: {
    eyebrow:     "Sandy Nour · Bridal & Eveningwear",
    title1:      "Contemporary",
    title2:      "fairytales",
    title3:      "woven into timeless wardrobes.",
    sub:         "An editorial private-showroom layer over a 306-piece live USD catalogue — hand-beaded by 50+ artisans, from a Beirut atelier with roots in the mid-2000s.",
    bookFitting: "Book a private fitting",
    whatsapp:    "WhatsApp the atelier",
    scroll:      "Scroll · Spring–Summer 26",
    side:        "House of Sandy Nour · couture maison",
    featured:    "Featured pieces",
    bridal:      "Bridal",
    evening:     "Evening Wear",
    bespoke:     "Bespoke",
    designerLink:"The Designer",
    showrooms:   "Showrooms",
  },
  ar: {
    eyebrow:     "ساندي نور · فساتين زفاف وسهرة",
    title1:      "حكايات",
    title2:      "معاصرة",
    title3:      "تُنسج في خزائن خالدة.",
    sub:         "طبقة صالة عرض خاصة فوق كتالوج حيّ يضمّ 306 قطعة بالدولار — مطرّزة يدوياً بأيدي أكثر من 50 حرفياً، من أتيليه بيروتي تأسس في منتصف العقد الأول من الألفية.",
    bookFitting: "احجزي قياساً خاصاً",
    whatsapp:    "واتساب الأتيليه",
    scroll:      "تمرير · ربيع–صيف ٢٦",
    side:        "دار ساندي نور",
    featured:    "قطع مختارة",
    bridal:      "زفاف",
    evening:     "سهرة",
    bespoke:     "تفصيل",
    designerLink:"المصممة",
    showrooms:   "صالات العرض",
  },
};

const fmtPrice = (n) =>
  new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(n);

/* ─────────── components ─────────── */

function Nav({ t, lang, setLang, tweaks }) {
  const links = [
    ["Bridal",       "#bridal"],
    ["Evening Wear", "#evening"],
    ["Bespoke",      "#bespoke"],
    ["The Designer", "#designer"],
    ["Showrooms",    "#showrooms"],
  ];
  return (
    <div className="nav-wrap">
      <div className="container">
        <nav className="nav">
          <div className="nav-left">
            {links.slice(0, 3).map(([label, href]) => (
              <a key={label} className="nav-link" href={href}>{label}</a>
            ))}
          </div>
          <a href="#top" className="brand" aria-label="Sandy Nour">
            SANDY <span className="dot">·</span> NOUR
          </a>
          <div className="nav-right">
            {links.slice(3).map(([label, href]) => (
              <a key={label} className="nav-link" href={href}>{label}</a>
            ))}
            <div className="lang" role="group" aria-label="Language">
              <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
              <button className={lang === "ar" ? "on" : ""} onClick={() => setLang("ar")}>AR</button>
            </div>
            <a href={SCHEDULISTA} target="_blank" rel="noopener" className="nav-cta">
              {t.bookFitting}
              <span aria-hidden>→</span>
            </a>
          </div>
        </nav>
      </div>
    </div>
  );
}

function Hero({ t, tweaks }) {
  return (
    <section className="hero" id="top">
      <div
        className="hero-img"
        style={{ backgroundImage: `url(media/bridal-01-selena.webp)` }}
      />
      <div className="hero-vignette" />

      <div className="hero-side">{t.side}</div>

      <div className="container hero-inner">
        <div />
        <div className="hero-meta">
          <div className="left">
            <div className="hero-eyebrow">
              <span className="bar" />
              {t.eyebrow}
            </div>
            <h1 className="hero-title">
              {t.title1}{" "}
              <em>{t.title2}</em>
              <br />
              {t.title3}
            </h1>
            <p className="hero-sub">{t.sub}</p>
            <div className="hero-cta-row">
              <a href={SCHEDULISTA} target="_blank" rel="noopener" className="btn btn-primary">
                {t.bookFitting}
                <span aria-hidden>→</span>
              </a>
              <a
                href={`${WA_BASE}?text=Hi%20Sandy%20Nour%2C%20I%27d%20like%20to%20book%20a%20private%20fitting%20for%20...`}
                target="_blank"
                rel="noopener"
                className="btn btn-ghost-light"
              >
                {t.whatsapp}
              </a>
            </div>
          </div>
          <div className="right">
            <div className="credit-name">Selena · Bridal</div>
            <div>L'Amour en Fleurs · SS26</div>
            <div className="price">USD 16,500 · made to order</div>
          </div>
        </div>
      </div>

      <div className="hero-scroll">
        <span className="line" />
        {t.scroll}
      </div>
    </section>
  );
}

function TrustSpine() {
  const items = [
    { n: "MA",    sub: "Istituto Marangoni, Milan" },
    { n: "2000s", sub: "Beirut atelier, est. mid-2000s" },
    { n: "230+",  sub: "International stockists" },
    { n: "50+",   sub: "Artisans & designers" },
    { n: "d3",    sub: "Dubai Design District presence" },
  ];
  return (
    <div className="trust">
      <div className="container">
        <div className="trust-row">
          {items.map((it, i) => (
            <div className="trust-cell" key={i}>
              <div className="n">
                {it.n.includes("&")
                  ? it.n.split("&").map((part, idx) => (
                      <React.Fragment key={idx}>
                        {idx > 0 && <span className="ampersand">&</span>}
                        {part}
                      </React.Fragment>
                    ))
                  : it.n}
              </div>
              <div className="l">{it.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function CollectionSplit({ t }) {
  return (
    <section className="split" id="collections">
      <a href="#bridal" className="split-card">
        <div className="img" style={{ backgroundImage: `url(media/bridal-07-solene.webp)` }} />
        <div className="overlay" />
        <div className="meta">
          <div className="top">
            <span>01 · {t.bridal}</span>
            <span className="n">53 gowns</span>
          </div>
          <div>
            <h3 className="name">
              For her <em>walk</em><br />
              toward forever
            </h3>
            <p className="blurb">
              Made-to-order bridal couture from the atelier — hand-beaded silks,
              sculpted tulle, and trains drafted to your measurements.
            </p>
            <span className="enter">
              Enter the bridal world
              <span aria-hidden>→</span>
            </span>
          </div>
        </div>
      </a>
      <a href="#evening" className="split-card">
        <div className="img" style={{ backgroundImage: `url(media/ev-04-linear-beaded.webp)` }} />
        <div className="overlay" />
        <div className="meta">
          <div className="top">
            <span>02 · {t.evening}</span>
            <span className="n">242 pieces</span>
          </div>
          <div>
            <h3 className="name">
              For her <em>nights</em><br />
              of consequence
            </h3>
            <p className="blurb">
              Hand-beaded eveningwear from USD 6,600 — galas, weddings of the
              week, the kind of evening you'll want to remember.
            </p>
            <span className="enter">
              Enter eveningwear
              <span aria-hidden>→</span>
            </span>
          </div>
        </div>
      </a>
    </section>
  );
}

function FeaturedGrid({ t, tweaks }) {
  const priceClass =
    tweaks.priceMode === "hidden" ? "hide-price" :
    tweaks.priceMode === "hover"  ? "hover-price" : "";
  const items = useMemo(() => {
    if (tweaks.density === "compact") {
      return [...FEATURED, { src: BRIDAL[0], type: "BRIDAL" }, { src: EVENING[6], type: "EVENING" }, { src: BRIDAL[9], type: "BRIDAL" }, { src: EVENING[7], type: "EVENING" }];
    }
    return FEATURED;
  }, [tweaks.density]);
  return (
    <section className="section" id="featured">
      <div className="container">
        <div className="section-num">
          <span className="bar" />
          01 · SPRING / SUMMER 26 · LATEST
        </div>
        <div className="section-head">
          <h2 className="h">
            {t.featured} <em>from the maison</em>
          </h2>
          <p className="p">
            Twenty-eight named gowns currently in the showroom this season — every
            price below is the live USD figure from the catalogue, no on-request
            curtain, no conversion. Book a fitting to see them in person.
          </p>
        </div>

        <div className="gown-grid">
          {items.map((it, i) => {
            const src = it.src;
            const isBridal = it.type === "BRIDAL";
            return (
              <a
                key={`${src.id}-${i}`}
                href={isBridal ? "#bridal" : "#evening"}
                className={`gown ${priceClass}`}
              >
                <div className="frame">
                  <div className="img" style={{ backgroundImage: `url(${src.img})` }} />
                  <span className="corner">No. {String(i + 1).padStart(2, "0")}</span>
                  <span className={`tag ${isBridal ? "bridal" : ""}`}>
                    {isBridal ? "Bridal" : "Evening"}
                  </span>
                  <span className="hover-cta">Book a fitting →</span>
                </div>
                <div className="label">
                  <span className="name">{src.name}</span>
                  <span className="price">
                    <span className="ccy">USD</span>
                    {Number(src.price).toLocaleString("en-US")}
                  </span>
                </div>
                <div className="note">
                  {src.note}{src.collection ? ` · ${src.collection}` : ""}
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Bespoke() {
  const steps = [
    ["01", "Private consultation at the atelier"],
    ["02", "Measurements & sketch review"],
    ["03", "Fabric & beadwork selection"],
    ["04", "Two fittings before final hand-over"],
  ];
  return (
    <section className="bespoke" id="bespoke">
      <div className="img" style={{ backgroundImage: `url(media/bridal-05-dalia.webp)` }} aria-hidden />
      <div className="text">
        <div className="section-num">
          <span className="bar" />
          02 · BESPOKE & MADE TO ORDER
        </div>
        <h2 className="h">
          Cut, beaded,<br />
          and finished <em>to you.</em>
        </h2>
        <p className="body">
          Every silhouette in the house is a starting point. Adjust the neckline,
          re-route the embroidery, change the colour, shift the train. Tailoring
          is finished by hand at the Beirut atelier; alterations are included on
          made-to-order commissions.
        </p>
        <ul className="list">
          {steps.map(([num, label]) => (
            <li key={num}>
              <span className="num">{num}</span>
              <span>{label}</span>
            </li>
          ))}
        </ul>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href={SCHEDULISTA} target="_blank" rel="noopener" className="btn btn-dark">
            Book a consultation
            <span aria-hidden>→</span>
          </a>
          <a href="#designer" className="btn btn-ghost-dark">The atelier story</a>
        </div>
      </div>
    </section>
  );
}

function Showrooms() {
  return (
    <section className="section showrooms-section" id="showrooms">
      <div className="container">
        <div className="section-num">
          <span className="bar" />
          03 · THREE SHOWROOMS · BY APPOINTMENT
        </div>
        <div className="section-head">
          <h2 className="h">
            Visit the <em>maison</em>
          </h2>
          <p className="p">
            Each room serves a different conversation — eveningwear in d3, bridal
            at Jebel Ali, and the founding atelier in Beirut. Bookings flow
            through Schedulista, with a WhatsApp fallback per room.
          </p>
        </div>

        <div className="showroom-grid">
          {SHOWROOMS.map((s, i) => (
            <div className="showroom" key={i}>
              <div className="city">
                <div className="name">{s.city}</div>
                <div className="tag">No. 0{i + 1} · {s.tag}</div>
              </div>
              <div className="addr">
                {s.addr.split("\n").map((line, idx) => (
                  <React.Fragment key={idx}>
                    {line}
                    {idx < s.addr.split("\n").length - 1 && <br />}
                  </React.Fragment>
                ))}
              </div>
              <dl>
                {s.rows.map(([k, v, flag]) => (
                  <React.Fragment key={k}>
                    <dt>{k}</dt>
                    <dd>
                      {v.split("\n").map((line, idx) => (
                        <React.Fragment key={idx}>
                          {line}
                          {idx < v.split("\n").length - 1 && <br />}
                        </React.Fragment>
                      ))}
                      {flag && <span className="flag">⚑ pending</span>}
                    </dd>
                  </React.Fragment>
                ))}
              </dl>
              <div className="ctas">
                <a
                  href={`${SCHEDULISTA}?service_id=${s.schedulista}`}
                  target="_blank"
                  rel="noopener"
                  className="primary"
                >
                  Book a fitting
                </a>
                <a
                  href={`${WA_BASE}?text=${s.waText}`}
                  target="_blank"
                  rel="noopener"
                  className="ghost"
                >
                  WhatsApp
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Designer() {
  return (
    <section className="section" id="designer">
      <div className="container">
        <div className="section-num">
          <span className="bar" />
          04 · THE DESIGNER
        </div>
        <div className="designer">
          <div>
            <div className="quote-frame">
              <p className="pull">
                "I draft a gown the way I'd draft a letter — slowly, by hand, until
                every line says exactly what it needs to say, and nothing more."
              </p>
              <div className="signature">
                <span className="glyph">SN</span>
                Sandy Nour, founder
              </div>
            </div>
            <ul className="biolist">
              {TIMELINE.map(([yr, txt]) => (
                <li key={yr}>
                  <span className="yr">{yr}</span>
                  <span>{txt}</span>
                </li>
              ))}
            </ul>
            <a href="#designer" className="btn btn-ghost-dark" style={{ marginTop: 24, alignSelf: "flex-start" }}>
              Read the atelier story
              <span aria-hidden>→</span>
            </a>
          </div>
          <div className="portrait">
            <div className="placeholder">
              <span>Designer portrait</span>
              <span style={{ opacity: 0.6, fontSize: 10 }}>client-supplied · pending</span>
            </div>
            <div className="label">Atelier · Beirut</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AppointmentBand() {
  return (
    <section className="band">
      <div className="container band-inner">
        <div>
          <div className="section-num" style={{ color: "#E9CD90" }}>
            <span className="bar" style={{ background: "#E9CD90" }} />
            05 · BY APPOINTMENT
          </div>
          <h2 className="h">
            Sit with us<span className="gap" />
            for an <em>afternoon.</em>
          </h2>
          <p className="sub">
            Private fittings are unhurried — fabric on the table, beadwork in
            hand, a sketchpad open between us. Pick a showroom, leave the rest
            to the atelier.
          </p>
          <div className="actions">
            <a href={SCHEDULISTA} target="_blank" rel="noopener" className="btn btn-primary">
              Book a private fitting
              <span aria-hidden>→</span>
            </a>
            <a
              href={`${WA_BASE}?text=Hi%20Sandy%20Nour%2C%20I%27d%20like%20to%20book%20a%20private%20fitting%20for%20...`}
              target="_blank"
              rel="noopener"
              className="btn btn-ghost-light"
            >
              WhatsApp the atelier
            </a>
          </div>
        </div>

        <div className="band-right">
          {SHOWROOMS.map((s, i) => (
            <a
              key={i}
              href={`${SCHEDULISTA}?service_id=${s.schedulista}`}
              target="_blank"
              rel="noopener"
              className="band-row"
            >
              <div className="left">
                <span className="n">0{i + 1}</span>
                <div>
                  <div className="city">{s.city}</div>
                  <p className="sub">{s.tag}</p>
                </div>
              </div>
              <span className="arrow">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="wordmark">SANDY · NOUR</div>
            <p className="tag">
              Bridal &amp; eveningwear couture from a Beirut atelier with
              showrooms in Dubai Design District, Jebel Ali, and Beirut. Made
              to order, made by hand.
            </p>
            <a href="https://www.instagram.com/sandynourofficial/" target="_blank" rel="noopener" className="insta">
              ↗ @sandynourofficial
            </a>
          </div>
          <div className="footer-col">
            <h4>Collections</h4>
            <ul>
              <li><a href="#bridal">Bridal</a></li>
              <li><a href="#evening">Evening Wear</a></li>
              <li><a href="#bespoke">Bespoke / Made to Order</a></li>
              <li><a href="#bridal">L'Amour en Fleurs</a></li>
              <li><a href="#bridal">L'Amour Sucré</a></li>
              <li><a href="#bridal">Garden Tales</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Showrooms</h4>
            <ul>
              <li><a href="#showrooms">Dubai · d3 Eveningwear</a></li>
              <li><a href="#showrooms">Dubai · Jebel Ali Bridal</a></li>
              <li><a href="#showrooms">Beirut · Atelier</a></li>
              <li><a href={SCHEDULISTA} target="_blank" rel="noopener">Book a fitting ↗</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="tel:+971522693605">+971 52 269 3605 (chat)</a></li>
              <li><a href="tel:+971585087555">+971 58 508 7555 (d3)</a></li>
              <li><a href="tel:+971585140008">+971 58 514 0008 (Jebel Ali)</a></li>
              <li><a href="tel:+96170885955">+961 70 885 955 (Beirut)</a></li>
              <li><a href="mailto:info@sandynour.com">info@sandynour.com</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-base">
          <div>© 2026 Sandy Nour Fashion Design · Beirut · Dubai</div>
          <div className="legal">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Photographer credits</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFab() {
  return (
    <a
      href={`${WA_BASE}?text=Hi%20Sandy%20Nour%2C%20I%27d%20like%20to%20book%20a%20private%20fitting%20for%20...`}
      target="_blank"
      rel="noopener"
      className="wa-fab"
      aria-label="WhatsApp the atelier"
    >
      <span className="pulse" />
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden>
        <path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 0 1 8.413 3.488a11.82 11.82 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592c5.448 0 9.886-4.434 9.889-9.885c.002-5.462-4.415-9.89-9.881-9.892c-5.452 0-9.887 4.434-9.889 9.884c-.001 2.225.651 3.891 1.746 5.634l-.999 3.648l3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347c-.297-.149-1.758-.868-2.031-.967c-.272-.099-.47-.149-.669.149c-.198.297-.768.967-.941 1.165c-.173.198-.347.223-.644.074c-.297-.149-1.255-.462-2.39-1.475c-.883-.788-1.48-1.761-1.653-2.059c-.173-.297-.018-.458.13-.606c.134-.133.297-.347.446-.521c.151-.172.2-.296.3-.495c.099-.198.05-.371-.025-.52c-.075-.149-.669-1.612-.916-2.207c-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372c-.272.297-1.04 1.016-1.04 2.479c0 1.462 1.065 2.875 1.213 3.074c.149.198 2.095 3.2 5.076 4.487c.709.306 1.263.489 1.694.626c.712.226 1.36.194 1.872.118c.571-.085 1.758-.719 2.006-1.413c.248-.694.248-1.289.173-1.413z"/>
      </svg>
    </a>
  );
}

/* ─────────── Tweaks panel — wired to the host edit mode ─────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "antique",
  "background": "ivory",
  "priceMode": "always",
  "density": "editorial"
}/*EDITMODE-END*/;

function applyTweaks(tweaks) {
  const root = document.documentElement;
  const gold = {
    antique:    ["#B89A66", "#8A6D2F", "#C9A24B"],
    champagne:  ["#D7BE8E", "#A38649", "#E7C879"],
    buff:       ["#A98D5E", "#735727", "#B89958"],
  }[tweaks.accent] || ["#B89A66", "#8A6D2F", "#C9A24B"];
  root.style.setProperty("--gold",       gold[0]);
  root.style.setProperty("--gold-deep",  gold[1]);
  root.style.setProperty("--gold-bright",gold[2]);

  const bg = {
    ivory:    ["#FBF8F4", "#F4EFE7", "#FFFFFF"],
    paper:    ["#FFFFFF", "#F6F4F0", "#FFFFFF"],
    espresso: ["#161210", "#1F1A17", "#241E1A"],
  }[tweaks.background] || ["#FBF8F4", "#F4EFE7", "#FFFFFF"];
  root.style.setProperty("--bg",       bg[0]);
  root.style.setProperty("--bg-deep",  bg[1]);
  root.style.setProperty("--surface",  bg[2]);
  if (tweaks.background === "espresso") {
    root.style.setProperty("--text",       "#F4EFE7");
    root.style.setProperty("--text-soft",  "#D6CDBF");
    root.style.setProperty("--muted",      "#9A9087");
    root.style.setProperty("--hairline",   "#2A2421");
    root.style.setProperty("--hairline-strong", "#3A332D");
  } else {
    root.style.setProperty("--text",       "#1F1A17");
    root.style.setProperty("--text-soft",  "#3A322C");
    root.style.setProperty("--muted",      "#6B635B");
    root.style.setProperty("--hairline",   "#E7E0D6");
    root.style.setProperty("--hairline-strong", "#D6CDBF");
  }
  document.body.classList.toggle("dense", tweaks.density === "compact");
}

/* ─────────── root ─────────── */
function App() {
  const [lang, setLang] = useState("en");
  const t = I18N[lang];

  const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect } = window;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
  }, [lang]);

  return (
    <>
      <Nav t={t} lang={lang} setLang={setLang} />
      <Hero t={t} />
      <TrustSpine />
      <CollectionSplit t={t} />
      <FeaturedGrid t={t} tweaks={tweaks} />
      <Bespoke />
      <Showrooms />
      <Designer />
      <AppointmentBand />
      <Footer />
      <WhatsAppFab />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent gold">
          <TweakRadio
            label="Tone"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "antique",   label: "Antique" },
              { value: "champagne", label: "Champagne" },
              { value: "buff",      label: "Buff" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Surface">
          <TweakRadio
            label="Page tone"
            value={tweaks.background}
            onChange={(v) => setTweak("background", v)}
            options={[
              { value: "ivory",    label: "Ivory" },
              { value: "paper",    label: "Paper" },
              { value: "espresso", label: "Espresso" },
            ]}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "compact",   label: "Compact" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Grid pricing">
          <TweakSelect
            label="USD price"
            value={tweaks.priceMode}
            onChange={(v) => setTweak("priceMode", v)}
            options={[
              { value: "always", label: "Always visible (recommended)" },
              { value: "hover",  label: "Reveal on hover" },
              { value: "hidden", label: "Hide on grid" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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