// Marmar Halim — shared components (Nav, Footer, FAB, atoms)
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Top announcement bar ---------- */
function Announce() {
  return (
    <div className="announce">
      Made to Order · 4–6 Weeks <span className="dot"></span> Worldwide Shipping from Dubai <span className="dot"></span> SS25 “My Girl” Now Available
    </div>
  );
}

/* ---------- Nav ---------- */
function Nav({ route, go, overlay }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const Item = ({ name, label }) => (
    <button onClick={() => go(name)} aria-current={route === name}>{label}</button>
  );

  const isOver = overlay && !scrolled;
  return (
    <header className={"nav " + (overlay ? "nav--over " : "") + (scrolled ? "scrolled" : "")}>
      <div className="container">
        <div className="nav-row">
          <nav className="nav-links">
            <Item name="collections" label="Collections" />
            <Item name="shop" label="Shop" />
            <Item name="bridal" label="Bridal" />
            <Item name="couture" label="Couture" />
            <Item name="modest" label="Modest" />
          </nav>
          <button className="nav-logo" onClick={() => go("home")} aria-label="Marmar Halim, home">
            <img src="media/marmar-halim-logo.webp" alt="Marmar Halim" />
          </button>
          <div className="nav-actions">
            <Item name="designer" label="The Designer" />
            <Item name="contact" label="Contact" />
            <button className="nav-fitting" onClick={() => go("appointments")}>Book a Fitting</button>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ---------- Footer ---------- */
function Footer({ go }) {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-grid">
          <div>
            <div className="brand-mark">Marmar Halim</div>
            <p style={{ maxWidth: 360, opacity: 0.78, fontSize: 14 }}>
              An Egyptian luxury eveningwear &amp; couture house — sculptural, hand-pleated. Designed in Dubai since 2014.
            </p>
            <div className="news" style={{ marginTop: 28 }}>
              <input type="email" placeholder="Receive collection invitations" />
              <button>Subscribe →</button>
            </div>
          </div>
          <div>
            <h4>The House</h4>
            <ul>
              <li><a onClick={() => go("designer")}>The Designer</a></li>
              <li><a onClick={() => go("designer")}>Atelier &amp; Craft</a></li>
              <li><a onClick={() => go("stockists")}>Stockists &amp; Press</a></li>
              <li><a onClick={() => go("appointments")}>Book a Fitting</a></li>
              <li><a onClick={() => go("contact")}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Collections</h4>
            <ul>
              <li><a onClick={() => go("collections")}>SS25 — My Girl</a></li>
              <li><a onClick={() => go("bridal")}>Bridal</a></li>
              <li><a onClick={() => go("couture")}>Couture</a></li>
              <li><a onClick={() => go("modest")}>Modest Wear</a></li>
              <li><a onClick={() => go("shop")}>Shop Eveningwear</a></li>
            </ul>
          </div>
          <div>
            <h4>Service</h4>
            <ul>
              <li><a onClick={() => go("faqs")}>Made-to-Order</a></li>
              <li><a onClick={() => go("faqs")}>Sizing &amp; Fit</a></li>
              <li><a onClick={() => go("faqs")}>Shipping &amp; Returns</a></li>
              <li><a href="https://wa.me/971564973497" target="_blank" rel="noreferrer">WhatsApp Atelier</a></li>
              <li><a href="mailto:onlinestore@marmar-halim.com">onlinestore@marmar-halim.com</a></li>
            </ul>
            <h4 style={{ marginTop: 32 }}>Follow</h4>
            <ul style={{ display: "flex", gap: 16 }}>
              <li><a href="https://instagram.com/marmarhalim" target="_blank" rel="noreferrer">Instagram</a></li>
              <li><a href="https://tiktok.com/@marmarhalim" target="_blank" rel="noreferrer">TikTok</a></li>
              <li><a href="https://pinterest.com/marmarhalim/" target="_blank" rel="noreferrer">Pinterest</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© Marmar Halim Fashion Design LLC · Dubai</span>
          <span>Made to Order · 4–6 Weeks · Worldwide Shipping</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- WhatsApp FAB ---------- */
function WhatsAppFab() {
  return (
    <a
      className="fab"
      href="https://wa.me/971564973497?text=Hi%20Marmar%20Halim%2C%20I%27d%20like%20to%20enquire."
      target="_blank"
      rel="noreferrer"
      aria-label="WhatsApp the atelier"
    >
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 2.1.55 4.15 1.6 5.96L2 22l4.25-1.66a9.9 9.9 0 0 0 5.79 1.81h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.13-2.9-7C17.18 3.04 14.69 2 12.04 2Zm0 18.05h-.01a8.18 8.18 0 0 1-4.17-1.14l-.3-.18-2.52.99.83-2.45-.19-.31a8.13 8.13 0 0 1-1.26-4.35c0-4.5 3.67-8.17 8.17-8.17 2.18 0 4.23.85 5.77 2.4a8.12 8.12 0 0 1 2.39 5.78c0 4.5-3.67 8.17-8.17 8.17Zm4.48-6.13c-.25-.12-1.45-.71-1.68-.79-.22-.08-.39-.12-.55.13s-.62.79-.76.95c-.14.16-.28.18-.52.06-.25-.12-1.04-.38-1.99-1.22-.74-.66-1.23-1.47-1.37-1.72-.14-.25-.02-.39.11-.51.12-.11.25-.28.37-.42.13-.14.16-.24.25-.4.08-.16.04-.31-.02-.43-.06-.12-.55-1.34-.76-1.83-.2-.48-.4-.42-.55-.43h-.47c-.16 0-.43.06-.65.31-.22.25-.85.83-.85 2.03 0 1.2.87 2.36.99 2.52.12.16 1.71 2.62 4.15 3.67.58.25 1.04.4 1.39.51.58.18 1.11.16 1.53.1.47-.07 1.45-.59 1.65-1.16.21-.57.21-1.06.14-1.16-.06-.1-.22-.16-.47-.28Z"/>
      </svg>
      <span className="label">WhatsApp Atelier</span>
    </a>
  );
}

/* ---------- Mobile bottom bar ---------- */
function MobileBar({ go }) {
  return (
    <div className="mobar">
      <a className="btn btn--ghost" href="https://wa.me/971564973497" target="_blank" rel="noreferrer">WhatsApp</a>
      <button className="btn" onClick={() => go("appointments")}>Book a Fitting</button>
    </div>
  );
}

/* ---------- Section header ---------- */
function SectionHead({ eyebrow, title, meta, action }) {
  return (
    <div className="section-head">
      <div>
        {eyebrow && <div className="eyebrow gold" style={{ marginBottom: 18 }}>{eyebrow}</div>}
        <h2 className="title">{title}</h2>
      </div>
      <div className="meta">
        {meta}
        {action}
      </div>
    </div>
  );
}

/* ---------- ProductCard ---------- */
function ProductCard({ p, onOpen }) {
  return (
    <button className="product-card" onClick={() => onOpen(p)} aria-label={p.name}>
      <div className="img">
        <span className="badge">{p.line.toUpperCase()}</span>
        <img src={p.img} alt={p.name} loading="lazy" />
      </div>
      <div className="info">
        <span className="name">{p.name}</span>
        <span className="price">{window.MMH_DATA.fmtAED(p.aed)}</span>
      </div>
      <div className="mto">Made to order · 4–6 weeks</div>
    </button>
  );
}

/* ---------- Toast ---------- */
function Toast({ msg }) {
  return <div className={"toast " + (msg ? "show" : "")}>{msg}</div>;
}

/* ---------- Press strip (text-only, no fake logos) ---------- */
function PressStrip({ dark }) {
  const items = [
    { kind: "Stocked at", name: "Moda Operandi" },
    { kind: "Shown", name: "Dubai Fashion Week 2019" },
    { kind: "Featured in", name: "SheerLuxe Middle East" },
    { kind: "Bridal Editor", name: "THE WED" },
  ];
  return (
    <div className={"strip " + (dark ? "dark" : "")} style={dark ? { background: "var(--noir)", borderColor: "var(--line-dark)" } : null}>
      <div className="strip-track">
        {[...items, ...items].map((it, i) => (
          <span className="strip-item" key={i} style={dark ? { color: "rgba(251,247,241,0.7)" } : null}>
            <span style={{ opacity: 0.55 }}>{it.kind}</span>
            <span className="sep"></span>
            <span style={{ fontFamily: "var(--serif)", fontSize: 18, letterSpacing: 0.02 + "em", textTransform: "none" }}>{it.name}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

/* expose globally */
Object.assign(window, {
  Announce, Nav, Footer, WhatsAppFab, MobileBar, SectionHead, ProductCard, Toast, PressStrip,
});
