// THE MOST — UI components
const { useState, useEffect, useRef, useMemo } = React;

// ---------- Brand wordmark ----------
function Wordmark({ size = 22, color = "currentColor", showTagline = false }) {
  return (
    <div className="tm-wordmark" style={{ color }}>
      <span className="tm-mark" style={{ fontSize: size }}>THEMOST</span>
      {showTagline && (
        <span className="tm-mark-tag" style={{ fontSize: size * 0.34 }}>
          HAIR DESIGN&nbsp;&nbsp;LADIES SALON
        </span>
      )}
    </div>
  );
}

// ---------- Star rating ----------
function Stars({ value = 5, size = 11 }) {
  return (
    <span className="tm-stars" aria-label={`${value} out of 5`}>
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill={i < value ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.4">
          <path d="M12 2.5l2.92 6.34 6.96.66-5.26 4.71 1.56 6.79L12 17.6l-6.18 3.4 1.56-6.79-5.26-4.71 6.96-.66z" strokeLinejoin="round"/>
        </svg>
      ))}
    </span>
  );
}

// ---------- Top navigation ----------
function Navbar({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Services", "services"],
    ["The Salon", "heritage"],
    ["Portfolio", "portfolio"],
    ["Reviews", "reviews"],
    ["Visit", "visit"],
  ];

  const go = (id) => {
    setOpen(false);
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <header className={`tm-nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="tm-nav-inner">
        <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }} className="tm-nav-brand">
          <Wordmark size={18} showTagline />
        </a>
        <nav className="tm-nav-links">
          {links.map(([label, id]) => (
            <button key={id} className="tm-nav-link" onClick={() => go(id)}>{label}</button>
          ))}
        </nav>
        <div className="tm-nav-cta">
          <a href={window.SALON_DATA.contact.landlineHref} className="tm-nav-call" aria-label="Call the salon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg>
          </a>
          <button className="tm-btn tm-btn-primary" onClick={onBook}>Book Now</button>
          <button className="tm-nav-burger" onClick={() => setOpen(!open)} aria-label="Menu">
            <span/><span/><span/>
          </button>
        </div>
      </div>
      {open && (
        <div className="tm-nav-mobile">
          {links.map(([label, id]) => (
            <button key={id} onClick={() => go(id)}>{label}</button>
          ))}
        </div>
      )}
    </header>
  );
}

// ---------- Rating chip ----------
function RatingChip({ compact = false, light = false }) {
  const r = window.SALON_DATA.rating;
  return (
    <div className={`tm-rating-chip ${light ? "is-light" : ""} ${compact ? "is-compact" : ""}`}>
      <Stars value={Math.round(r.value)} size={compact ? 10 : 12} />
      <span className="tm-rating-num">{r.value.toFixed(1)}</span>
      <span className="tm-rating-divider"/>
      <span className="tm-rating-meta">on {r.platform} · {r.count} reviews</span>
    </div>
  );
}

// ---------- Trust strip ----------
function TrustStrip() {
  const items = [
    "Rated 4.9 on Fresha · 507 reviews",
    "Women-only sanctuary",
    "Dubai Design District, Bldg 6",
    "International, since Istanbul 2010",
  ];
  return (
    <div className="tm-trust">
      <div className="tm-trust-track">
        {[0, 1].map((rep) => (
          <div className="tm-trust-row" key={rep} aria-hidden={rep === 1}>
            {items.map((t, i) => (
              <span key={i} className="tm-trust-item">
                <span className="tm-trust-dot"/>
                {t}
              </span>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Hero ----------
function Hero({ onBook, variant = "editorial", heroImage }) {
  // variants: editorial (large portrait, dark), banner (kate moss banner), interior (storefront)
  const images = {
    editorial: "media/editorial-bw-1.webp",
    portrait: "media/editorial-profile.webp",
    banner: "media/hero-banner.webp",
    interior: "media/storefront.webp",
  };
  const img = heroImage || images[variant] || images.editorial;
  return (
    <section className="tm-hero" id="top">
      <div className="tm-hero-media">
        <img src={img} alt="The Most — editorial" />
        <div className="tm-hero-veil"/>
      </div>
      <div className="tm-hero-inner">
        <div className="tm-hero-top">
          <span className="tm-eyebrow tm-eyebrow-light">An exclusive ladies salon — d3, Dubai</span>
        </div>
        <h1 className="tm-hero-title">
          <span className="tm-hero-title-1">Meet</span>
          <span className="tm-hero-title-2"><em>Yourself.</em></span>
        </h1>
        <p className="tm-hero-sub">
          Hair, beauty and nails crafted to the same standard since Istanbul, 2010 —
          now in our private Dubai Design District studio.
        </p>
        <div className="tm-hero-ctas">
          <button className="tm-btn tm-btn-primary tm-btn-large" onClick={onBook}>
            Book on Fresha
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
          <button className="tm-btn tm-btn-ghost-light tm-btn-large" onClick={() => document.getElementById("services").scrollIntoView({ behavior: "smooth" })}>
            View Services
          </button>
        </div>
        <div className="tm-hero-foot">
          <RatingChip light />
          <span className="tm-hero-foot-sep">·</span>
          <span className="tm-hero-foot-note">Women &amp; girls only · By appointment</span>
        </div>
      </div>
      <div className="tm-hero-corners">
        <span className="tm-corner tl">EST. ISTANBUL · 2010</span>
        <span className="tm-corner tr">VOL. XX — d3 DUBAI</span>
        <span className="tm-corner bl">№ 55 / EDITORIAL</span>
        <span className="tm-corner br">SCROLL ↓</span>
      </div>
    </section>
  );
}

// ---------- Section heading ----------
function SectionHead({ eyebrow, title, sub, align = "left" }) {
  return (
    <header className={`tm-sec-head is-${align}`}>
      <div className="tm-eyebrow">{eyebrow}</div>
      <h2 className="tm-sec-title">{title}</h2>
      {sub && <p className="tm-sec-sub">{sub}</p>}
    </header>
  );
}

// ---------- Signature services ----------
function Signature({ onBook }) {
  const items = window.SALON_DATA.signature;
  return (
    <section className="tm-section tm-signature" id="services">
      <div className="tm-container">
        <SectionHead
          eyebrow="01 — Signature"
          title={<>The services we&rsquo;re <em>known for.</em></>}
          sub="Six rituals that define a day at THE MOST. Tap any to begin a booking — every appointment is held on Fresha."
        />
        <div className="tm-sig-grid">
          {items.map((s, i) => (
            <article key={s.id} className="tm-sig-card" onClick={() => onBook(s)}>
              <div className="tm-sig-media">
                <img src={s.image} alt={s.name} />
                <span className="tm-sig-num">{String(i + 1).padStart(2, "0")}</span>
              </div>
              <div className="tm-sig-body">
                <div className="tm-sig-cat">{s.category}</div>
                <h3 className="tm-sig-name">{s.name}</h3>
                <p className="tm-sig-blurb">{s.blurb}</p>
                <div className="tm-sig-meta">
                  <span className="tm-sig-dur">{s.duration}</span>
                  <span className="tm-sig-price">{s.price}</span>
                </div>
                <div className="tm-sig-book">
                  Book <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </div>
              </div>
            </article>
          ))}
        </div>
        <div className="tm-sig-footer">
          <span>Looking for the full menu?</span>
          <button className="tm-link" onClick={() => document.getElementById("menu").scrollIntoView({ behavior: "smooth" })}>
            See every service &amp; price →
          </button>
        </div>
      </div>
    </section>
  );
}

// ---------- Full menu ----------
function Menu({ onBook }) {
  const menu = window.SALON_DATA.menu;
  const cats = Object.keys(menu);
  const [active, setActive] = useState(cats[0]);
  return (
    <section className="tm-section tm-menu" id="menu">
      <div className="tm-container">
        <SectionHead
          eyebrow="02 — Full Menu"
          title={<>Every service, <em>every price.</em></>}
          sub="Drawn directly from the official THE MOST price list. All prices in AED. Booking fees are honoured on Fresha at point of confirmation."
        />
        <div className="tm-menu-layout">
          <nav className="tm-menu-nav">
            {cats.map((c) => (
              <button
                key={c}
                onClick={() => setActive(c)}
                className={`tm-menu-tab ${active === c ? "is-active" : ""}`}
              >
                <span className="tm-menu-tab-label">{c}</span>
                <span className="tm-menu-tab-count">{menu[c].length}</span>
              </button>
            ))}
            <div className="tm-menu-note">
              <strong>Note —</strong> A small number of services appear at different prices on Fresha (e.g. Hair Trim). The official site price list is shown here; final confirmation occurs at booking.
            </div>
          </nav>
          <div className="tm-menu-list">
            <div className="tm-menu-list-head">
              <h3>{active}</h3>
              <span>{menu[active].length} services</span>
            </div>
            <ul className="tm-menu-rows">
              {menu[active].map(([name, dur, price], i) => (
                <li key={i} className="tm-menu-row">
                  <div className="tm-menu-row-name">
                    <span className="tm-menu-row-idx">{String(i + 1).padStart(2, "0")}</span>
                    <span>{name}</span>
                  </div>
                  <div className="tm-menu-row-dur">{dur}</div>
                  <div className="tm-menu-row-price">{price}</div>
                  <button
                    className="tm-menu-row-book"
                    onClick={() => onBook({ id: name, name, category: active, duration: dur, price: `AED ${price}` })}
                  >
                    Book
                  </button>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Heritage ----------
function Heritage() {
  return (
    <section className="tm-section tm-heritage" id="heritage">
      <div className="tm-container">
        <SectionHead
          eyebrow="03 — The Salon"
          title={<>From a boutique hall in Etiler<br/><em>to Dubai Design District.</em></>}
        />
        <div className="tm-heritage-grid">
          <div className="tm-heritage-text">
            <p className="tm-heritage-quote">
              &ldquo;Our adventure began in 2010 with a single boutique hall in Istanbul–Etiler.
              Thirteen years on, in our twentieth salon, we still ask each guest the same thing —
              that she come as she is, and leave a little more herself.&rdquo;
            </p>
            <div className="tm-heritage-meta">
              <div>
                <div className="tm-eyebrow">Founded</div>
                <div className="tm-heritage-meta-val">July 2010 · Istanbul</div>
              </div>
              <div>
                <div className="tm-eyebrow">Now</div>
                <div className="tm-heritage-meta-val">d3 Dubai · 13th year</div>
              </div>
              <div>
                <div className="tm-eyebrow">Motto</div>
                <div className="tm-heritage-meta-val tm-italic">Meet Yourself.</div>
              </div>
            </div>
            <div className="tm-founders">
              <div className="tm-founder">
                <div className="tm-founder-img"><img src="media/founder-emrah-demirci.webp" alt="Emrah Demirci"/></div>
                <div>
                  <div className="tm-founder-name">Emrah Demirci</div>
                  <div className="tm-founder-role">Co-founder, Creative Direction</div>
                </div>
              </div>
              <div className="tm-founder">
                <div className="tm-founder-img"><img src="media/founder-ozden-kurtur.webp" alt="Özden Kürtür"/></div>
                <div>
                  <div className="tm-founder-name">Özden Kürtür</div>
                  <div className="tm-founder-role">Co-founder</div>
                </div>
              </div>
            </div>
          </div>
          <div className="tm-heritage-visual">
            <img className="tm-heritage-img tm-heritage-img-1" src="media/interior-1.webp" alt="Salon interior"/>
            <img className="tm-heritage-img tm-heritage-img-2" src="media/editorial-dark.webp" alt="Editorial"/>
            <div className="tm-heritage-badge">
              <div className="tm-heritage-badge-num">20</div>
              <div className="tm-heritage-badge-label">Salons<br/>worldwide<sup>*</sup></div>
            </div>
            <div className="tm-heritage-cap">* Branch list under reconfirmation with the salon</div>
          </div>
        </div>
        <div className="tm-heritage-timeline">
          {[
            ["2010", "Istanbul, Etiler", "First boutique hall opens"],
            ["2013", "İstinyePark", "Flagship in İstanbul's leading retail district"],
            ["2017", "International", "First branch outside Türkiye"],
            ["2022", "Collection 2022", "Editorial colour collection released"],
            ["2023", "Dubai · d3", "Building 6, Ground Floor opens"],
            ["2026", "20th salon", "Anniversary year — booking-led, women-only"],
          ].map(([y, place, note], i) => (
            <div key={i} className="tm-tl-step">
              <div className="tm-tl-year">{y}</div>
              <div className="tm-tl-place">{place}</div>
              <div className="tm-tl-note">{note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Portfolio (consent-gated) ----------
function Portfolio() {
  const [consent, setConsent] = useState(false);
  const [filter, setFilter] = useState("all");
  const [lightbox, setLightbox] = useState(null);
  const items = window.SALON_DATA.portfolio;
  const filtered = useMemo(
    () => filter === "all" ? items : items.filter((it) => it.kind === filter),
    [filter, items]
  );

  return (
    <section className="tm-section tm-portfolio" id="portfolio">
      <div className="tm-container">
        <SectionHead
          eyebrow="04 — Portfolio"
          title={<>Recent work, <em>shown with permission.</em></>}
          sub="A women-only sanctuary means private results. Editorial frames and interiors are public; before-and-after treatment imagery is shown only to guests who request it."
        />
        {!consent ? (
          <div className="tm-consent">
            <div className="tm-consent-art">
              <img src="media/editorial-comingsoon.webp" alt=""/>
              <div className="tm-consent-veil"/>
            </div>
            <div className="tm-consent-body">
              <div className="tm-eyebrow">Consent gate</div>
              <h3 className="tm-consent-title">A quiet portfolio.</h3>
              <p>
                Our guests are private. Editorial and salon imagery are shown by default; before-and-after
                treatment results are reserved for visitors who confirm they&rsquo;re here to choose a service.
              </p>
              <ul className="tm-consent-list">
                <li>I&rsquo;m considering a service at THE MOST.</li>
                <li>I understand all imagery is shared with model consent.</li>
                <li>I&rsquo;ll keep this portfolio private.</li>
              </ul>
              <button className="tm-btn tm-btn-primary" onClick={() => setConsent(true)}>
                I agree — show the portfolio
              </button>
              <button className="tm-link tm-link-quiet" onClick={() => document.getElementById("services").scrollIntoView({ behavior: "smooth" })}>
                Not now, take me to services
              </button>
            </div>
          </div>
        ) : (
          <>
            <div className="tm-portfolio-filters">
              {[["all", "All"], ["editorial", "Editorial"], ["interior", "The Salon"]].map(([k, l]) => (
                <button
                  key={k}
                  className={`tm-pill ${filter === k ? "is-active" : ""}`}
                  onClick={() => setFilter(k)}
                >
                  {l} <span className="tm-pill-count">{k === "all" ? items.length : items.filter((it) => it.kind === k).length}</span>
                </button>
              ))}
              <div className="tm-portfolio-gap-note">
                Before/after treatment imagery awaiting client release — placeholder editorial frames shown.
              </div>
            </div>
            <div className="tm-portfolio-grid">
              {filtered.map((it, i) => (
                <button key={i} className={`tm-pf-item tm-pf-${i % 6}`} onClick={() => setLightbox(it)}>
                  <img src={it.src} alt={it.caption}/>
                  <div className="tm-pf-cap">{it.caption}</div>
                </button>
              ))}
            </div>
          </>
        )}
        {lightbox && (
          <div className="tm-lightbox" onClick={() => setLightbox(null)}>
            <button className="tm-lightbox-close" aria-label="Close">×</button>
            <img src={lightbox.src} alt={lightbox.caption} onClick={(e) => e.stopPropagation()}/>
            <div className="tm-lightbox-cap">{lightbox.caption}</div>
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- Reviews ----------
function Reviews() {
  const r = window.SALON_DATA.rating;
  const reviews = window.SALON_DATA.reviews;
  return (
    <section className="tm-section tm-reviews" id="reviews">
      <div className="tm-container">
        <div className="tm-reviews-head">
          <div>
            <SectionHead
              eyebrow="05 — Reviews"
              title={<>Loved on <em>Fresha.</em></>}
              sub="Real, dated, verified. We don&rsquo;t blend platforms — Fresha numbers are Fresha numbers."
            />
          </div>
          <div className="tm-reviews-score">
            <div className="tm-score-val">{r.value.toFixed(1)}</div>
            <div className="tm-score-meta">
              <Stars value={5} size={14}/>
              <div className="tm-score-line">on {r.platform} · {r.count} reviews</div>
              <div className="tm-score-line tm-muted">{r.asOf}</div>
            </div>
          </div>
        </div>
        <div className="tm-reviews-grid">
          {reviews.map((rv, i) => (
            <article key={i} className="tm-review">
              <Stars value={rv.stars} size={11}/>
              {rv.text ? (
                <blockquote className="tm-review-text">&ldquo;{rv.text}&rdquo;</blockquote>
              ) : (
                <blockquote className="tm-review-text tm-muted">5-star rating · no written review</blockquote>
              )}
              <footer className="tm-review-foot">
                <span className="tm-review-name">{rv.name}</span>
                <span className="tm-review-date">{rv.date}</span>
              </footer>
            </article>
          ))}
        </div>
        <div className="tm-reviews-cta">
          <span>Want to read every review?</span>
          <a className="tm-link" href={window.SALON_DATA.contact.fresha} target="_blank" rel="noreferrer">
            Open on Fresha →
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------- Stylists (placeholder — names client-confirm) ----------
function Stylists() {
  return (
    <section className="tm-section tm-stylists">
      <div className="tm-container">
        <SectionHead
          eyebrow="06 — Stylists"
          title={<>The hands you&rsquo;re booking, <em>made known.</em></>}
          sub="Our guests have named Alaa and Noor in five-star reviews. We&rsquo;re holding their cards here until they&rsquo;ve approved their photo and bio — the rest of the team will follow."
        />
        <div className="tm-stylists-grid">
          {[
            { name: "Alaa", note: "Mentioned in 5★ reviews", state: "awaiting consent" },
            { name: "Noor", note: "Mentioned in 5★ reviews", state: "awaiting consent" },
            { name: "Senior Stylist", note: "To be confirmed", state: "placeholder" },
            { name: "Colourist", note: "To be confirmed", state: "placeholder" },
          ].map((s, i) => (
            <article key={i} className="tm-stylist">
              <div className="tm-stylist-img" aria-hidden>
                <div className="tm-stylist-mono">
                  {s.name.split(" ").map((w) => w[0]).join("").slice(0, 2)}
                </div>
              </div>
              <div className="tm-stylist-name">{s.name}</div>
              <div className="tm-stylist-note">{s.note}</div>
              <div className="tm-stylist-state">— {s.state}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Visit / Contact ----------
function Visit({ onBook }) {
  const d = window.SALON_DATA;
  return (
    <section className="tm-section tm-visit" id="visit">
      <div className="tm-container">
        <SectionHead
          eyebrow="07 — Visit"
          title={<>Building 6, ground floor.<br/><em>By appointment.</em></>}
        />
        <div className="tm-visit-grid">
          <div className="tm-visit-info">
            <div className="tm-visit-block">
              <div className="tm-eyebrow">Address</div>
              <div className="tm-visit-line">Dubai Design District (d3)</div>
              <div className="tm-visit-line">Building 6 · Ground Floor</div>
              <div className="tm-visit-line">Za&rsquo;abeel · Dubai · UAE</div>
              <div className="tm-visit-aside">Nearest landmark: Starbucks &ldquo;The Lighthouse&rdquo;</div>
            </div>
            <div className="tm-visit-block">
              <div className="tm-eyebrow">Contact</div>
              <a className="tm-visit-line tm-visit-link" href={d.contact.landlineHref}>{d.contact.landline}</a>
              <a className="tm-visit-line tm-visit-link" href={d.contact.emailHref}>{d.contact.email}</a>
              <a className="tm-visit-line tm-visit-link" href={d.contact.instagramHref} target="_blank" rel="noreferrer">{d.contact.instagram}</a>
            </div>
            <div className="tm-visit-block">
              <div className="tm-eyebrow">Hours</div>
              <div className="tm-visit-hours">
                <span>Mon — Sat</span>
                <span className="tm-muted">confirming · 10:00–19:00 or 21:00 across sources</span>
              </div>
              <div className="tm-visit-hours">
                <span>Sun</span>
                <span className="tm-muted">confirming · listed both open and closed</span>
              </div>
              <div className="tm-visit-aside">Call ahead to confirm — three published schedules disagree.</div>
            </div>
            <div className="tm-visit-ctas">
              <button className="tm-btn tm-btn-primary" onClick={onBook}>Book on Fresha</button>
              <a className="tm-btn tm-btn-ghost" href={d.contact.landlineHref}>Call salon</a>
            </div>
          </div>
          <div className="tm-visit-map">
            <div className="tm-map-frame">
              <img src="media/storefront.webp" alt="The Most storefront at d3 Building 6"/>
              <div className="tm-map-pin">
                <div className="tm-map-pin-dot"/>
                <div className="tm-map-pin-ring"/>
                <div className="tm-map-pin-label">
                  THE MOST<br/>
                  <span>Bldg 6 · d3</span>
                </div>
              </div>
              <div className="tm-map-meta">
                <span>25.1890° N</span>
                <span>55.2968° E</span>
                <span className="tm-muted">approx. — pin confirming</span>
              </div>
            </div>
            <a className="tm-link tm-link-block" href="https://www.google.com/maps/search/?api=1&query=The+Most+Hair+Design+Ladies+Salon+Dubai+Design+District" target="_blank" rel="noreferrer">
              Open in Google Maps →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="tm-footer">
      <div className="tm-container">
        <div className="tm-footer-top">
          <div className="tm-footer-brand">
            <Wordmark size={26} color="#FAF6F1" showTagline/>
            <p className="tm-footer-motto"><em>Meet Yourself.</em></p>
          </div>
          <div className="tm-footer-cols">
            <div>
              <div className="tm-eyebrow tm-eyebrow-light">Visit</div>
              <p>Dubai Design District<br/>Building 6, Ground Floor<br/>Dubai, UAE</p>
            </div>
            <div>
              <div className="tm-eyebrow tm-eyebrow-light">Contact</div>
              <p>
                <a href={window.SALON_DATA.contact.landlineHref}>+971 4 421 5577</a><br/>
                <a href={window.SALON_DATA.contact.emailHref}>dubai@themost.ae</a><br/>
                <a href={window.SALON_DATA.contact.instagramHref} target="_blank" rel="noreferrer">@themostdubai</a>
              </p>
            </div>
            <div>
              <div className="tm-eyebrow tm-eyebrow-light">Book</div>
              <p>
                <a href={window.SALON_DATA.contact.fresha} target="_blank" rel="noreferrer">Fresha</a><br/>
                <a href={window.SALON_DATA.contact.landlineHref}>Call to reserve</a>
              </p>
            </div>
          </div>
        </div>
        <div className="tm-footer-bot">
          <span>© 2026 THE MOST — Hair Design Ladies Salon · d3 Dubai</span>
          <span className="tm-muted">An international group since Istanbul, July 2010 · Women-only</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Sticky mobile book bar ----------
function StickyBook({ onBook }) {
  return (
    <div className="tm-sticky-book">
      <div className="tm-sticky-meta">
        <RatingChip compact/>
      </div>
      <button className="tm-btn tm-btn-primary" onClick={onBook}>Book Now</button>
    </div>
  );
}

Object.assign(window, {
  Wordmark, Stars, Navbar, RatingChip, TrustStrip, Hero, SectionHead,
  Signature, Menu, Heritage, Portfolio, Reviews, Stylists, Visit, Footer, StickyBook,
});