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

/* ============================================================
   Only One Design — Shared UI components
   ============================================================ */

// ---------- Logo (placeholder wordmark + monogram) ----------
function LogoWordmark({ height = 36, dark = false }) {
  const ink = dark ? "#FBF8F2" : "#1A1916";
  const brass = "#A8884E";
  const rule = dark ? "rgba(251,248,242,0.3)" : "#E4DCCD";
  return (
    <svg height={height} viewBox="0 0 360 60" xmlns="http://www.w3.org/2000/svg" aria-label="Only One Design">
      <g fontFamily="'Cormorant Garamond', Georgia, serif">
        <text x="0" y="30" fontSize="22" fontWeight="500" letterSpacing="3" fill={ink}>ONLY ONE</text>
        <text x="0" y="52" fontSize="15" fontWeight="500" letterSpacing="6.5" fill={brass}>DESIGN</text>
      </g>
      <line x1="170" y1="14" x2="170" y2="50" stroke={rule} strokeWidth="1" />
      <g fontFamily="'Inter', sans-serif" fill={ink}>
        <text x="184" y="26" fontSize="9" letterSpacing="2.6">DUBAI DESIGN</text>
        <text x="184" y="42" fontSize="9" letterSpacing="2.6">DISTRICT — d3</text>
      </g>
    </svg>
  );
}

function LogoMark({ size = 40, dark = false }) {
  const ink = dark ? "#FBF8F2" : "#1A1916";
  const brass = "#A8884E";
  return (
    <svg width={size} height={size} viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <circle cx="30" cy="30" r="29" fill="none" stroke={brass} strokeWidth="1" />
      <text x="50%" y="55%" textAnchor="middle" fontFamily="'Cormorant Garamond', serif" fontSize="28" fontWeight="500" fill={ink}>O</text>
    </svg>
  );
}

// ---------- Eyebrow ----------
function Eyebrow({ children, rule = true, style }) {
  return (
    <span className={"eyebrow" + (rule ? " eyebrow-rule" : "")} style={style}>
      {children}
    </span>
  );
}

// ---------- Flag (CLIENT-FILL etc) ----------
function Flag({ children, kind = "fill" }) {
  return <span className={"flag" + (kind === "fill" ? " flag-fill" : "")}><span className="flag-dot"></span>{children}</span>;
}

// ---------- Breadcrumb ----------
function Crumb({ items, onNav }) {
  return (
    <nav className="crumb" aria-label="Breadcrumb">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">/</span>}
          {it.to ? <a href={"#/" + it.to} onClick={(e) => { e.preventDefault(); onNav(it.to); }}>{it.label}</a> : <span>{it.label}</span>}
        </React.Fragment>
      ))}
    </nav>
  );
}

// ---------- Navbar ----------
const NAV_LINKS = [
  { to: "home", label: "Home", labelAr: "الرئيسية" },
  { to: "services", label: "Services", labelAr: "الخدمات" },
  { to: "process", label: "Process", labelAr: "المسار" },
  { to: "lookbook", label: "Lookbook", labelAr: "المعرض" },
  { to: "atelier", label: "Atelier", labelAr: "الأتيليه" },
  { to: "contact", label: "Contact", labelAr: "تواصل" },
];

function Navbar({ route, onNav, locale, onLocale }) {
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [route]);

  return (
    <header className="nav">
      <div className="container nav-inner">
        <a className="nav-logo" href="#/home" onClick={(e) => { e.preventDefault(); onNav("home"); }}>
          <LogoWordmark height={36} />
        </a>
        <nav className="nav-links" aria-label="Primary">
          {NAV_LINKS.map(l => (
            <a key={l.to}
               className={"nav-link" + (route === l.to ? " active" : "")}
               href={"#/" + l.to}
               onClick={(e) => { e.preventDefault(); onNav(l.to); }}>
              {locale === "ar" ? l.labelAr : l.label}
            </a>
          ))}
        </nav>
        <div className="nav-right">
          <LocaleSwitcher locale={locale} onLocale={onLocale} />
          <button className="btn btn-primary btn-sm" onClick={() => onNav("appointments")}>
            {locale === "ar" ? "احجز موعد" : "Book Appointment"}
          </button>
          <button className="menu-toggle" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)}>
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M2 5h14M2 9h14M2 13h14" stroke="currentColor" strokeWidth="1.2"/></svg>
          </button>
        </div>
      </div>
      <div className={"mobile-menu" + (open ? " open" : "")}>
        {NAV_LINKS.map(l => (
          <a key={l.to} href={"#/" + l.to}
             onClick={(e) => { e.preventDefault(); onNav(l.to); }}>
            {locale === "ar" ? l.labelAr : l.label}
          </a>
        ))}
        <a href="#/appointments" onClick={(e)=>{e.preventDefault(); onNav("appointments");}}>
          {locale === "ar" ? "احجز موعد" : "Book Appointment"} →
        </a>
      </div>
    </header>
  );
}

function LocaleSwitcher({ locale, onLocale }) {
  const locales = [
    { id: "en", label: "EN" },
    { id: "ar", label: "AR" },
    { id: "ru", label: "RU", disabled: true },
    { id: "zh", label: "ZH", disabled: true },
  ];
  return (
    <div className="locale-switcher" role="group" aria-label="Language">
      {locales.map((l, i) => (
        <React.Fragment key={l.id}>
          {i > 0 && <span className="sep">·</span>}
          <button
            className={locale === l.id ? "active" : ""}
            onClick={() => !l.disabled && onLocale(l.id)}
            title={l.disabled ? "Available when translation is supplied" : undefined}
            style={l.disabled ? { opacity: 0.35, cursor: "not-allowed" } : null}>
            {l.label}
          </button>
        </React.Fragment>
      ))}
    </div>
  );
}

// ---------- Footer ----------
function Footer({ onNav, locale, callConfirmed }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand-mark">ONLY ONE <span className="accent">DESIGN</span></div>
            <p style={{ marginTop: 18, color: "rgba(251,248,242,0.6)", maxWidth: "32ch", fontSize: 14 }}>
              An appointment-based apparel &amp; tailoring studio in Dubai Design District. By appointment only.
            </p>
            <div style={{ marginTop: 24 }}>
              <Flag kind="brass">Placeholder wordmark — replace with client logo</Flag>
            </div>
          </div>
          <div>
            <h5>Visit</h5>
            <div className="item">Building 07, Office Entrance</div>
            <div className="item">No. B203 · Dubai Design District</div>
            <div className="item">Dubai, United Arab Emirates</div>
            <div className="item" style={{ marginTop: 10, fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(251,248,242,0.4)" }}>
              CONFIRM: B203 vs 203B
            </div>
          </div>
          <div>
            <h5>Hours</h5>
            <div className="item">By appointment</div>
            <div className="item" style={{ marginTop: 8, fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(251,248,242,0.4)" }}>
              Directory hours pending confirmation
            </div>
            <h5 style={{ marginTop: 28 }}>Contact</h5>
            {callConfirmed
              ? <a href="tel:+97144362671" className="item">+971 4 436 2671</a>
              : <div className="item" style={{ opacity: 0.55 }}>Live line publishing pending</div>}
            <a href="#/contact" onClick={(e) => { e.preventDefault(); onNav("contact"); }} className="item">contact</a>
          </div>
          <div>
            <h5>Studio</h5>
            <a href="#/services" onClick={(e) => { e.preventDefault(); onNav("services"); }}>Services</a>
            <a href="#/process" onClick={(e) => { e.preventDefault(); onNav("process"); }}>Process</a>
            <a href="#/lookbook" onClick={(e) => { e.preventDefault(); onNav("lookbook"); }}>Lookbook</a>
            <a href="#/atelier" onClick={(e) => { e.preventDefault(); onNav("atelier"); }}>Atelier</a>
            <a href="#/appointments" onClick={(e) => { e.preventDefault(); onNav("appointments"); }}>Appointments</a>
            <h5 style={{ marginTop: 28 }}>Languages</h5>
            <div className="item" style={{ opacity: 0.7 }}>EN · AR · RU · ZH</div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ONLY ONE DESIGN — d3 Dubai</span>
          <span>Demo build / placeholder · No prices · No reviews</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Trust strip ----------
function TrustStrip({ locale }) {
  const items = [
    { k: locale === "ar" ? "بالموعد" : "By appointment", v: locale === "ar" ? "زيارة خاصة" : "Private visit" },
    { k: locale === "ar" ? "الموقع" : "Location", v: locale === "ar" ? "حي دبي للتصميم" : "Dubai Design District" },
    { k: locale === "ar" ? "الأسلوب" : "Approach", v: locale === "ar" ? "تفصيل حسب القياس" : "Made-to-measure" },
  ];
  return (
    <section className="trust">
      <div className="container">
        <div className="trust-inner">
          {items.map((it, i) => (
            <div key={i} className="trust-cell">
              <div className="k">{it.k}</div>
              <div className="v">{it.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Callout (CTA band) ----------
function Callout({ title, onNav, locale }) {
  return (
    <section className="container section">
      <div className="callout">
        <div>
          <Eyebrow style={{ color: "var(--secondary)" }}>{locale === "ar" ? "ابدأ من هنا" : "Begin here"}</Eyebrow>
          <h2 style={{ marginTop: 14 }}>{title || (locale === "ar" ? "زيارة الأتيليه تبدأ بموعد." : "A visit to the atelier begins with an appointment.")}</h2>
        </div>
        <div className="flex-row">
          <button className="btn btn-primary" style={{ background: "var(--surface)", color: "var(--ink)", borderColor: "var(--surface)" }}
                  onClick={() => onNav("appointments")}>
            {locale === "ar" ? "احجز موعدًا" : "Book an Appointment"}
          </button>
          <button className="btn btn-ghost" style={{ color: "var(--surface)", borderColor: "rgba(251,248,242,0.4)" }}
                  onClick={() => onNav("atelier")}>
            {locale === "ar" ? "عن الأتيليه" : "Visit the Atelier"}
          </button>
        </div>
      </div>
    </section>
  );
}

// ---------- Lightbox ----------
function Lightbox({ src, caption, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  return (
    <div className="lightbox" onClick={onClose}>
      <button className="lb-close" aria-label="Close" onClick={onClose}>×</button>
      <img src={src} alt="" onClick={(e) => e.stopPropagation()} />
      <div className="lb-caption">{caption}</div>
    </div>
  );
}

// ---------- Empty state ----------
function EmptyState({ title, body, action }) {
  return (
    <div className="empty">
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", color: "var(--secondary-deep)", textTransform: "uppercase", marginBottom: 12 }}>
        Empty by design
      </div>
      <h3 className="display display-s" style={{ margin: 0 }}>{title}</h3>
      <p className="muted" style={{ maxWidth: "44ch", margin: "12px auto 24px" }}>{body}</p>
      {action}
    </div>
  );
}

Object.assign(window, {
  LogoWordmark, LogoMark, Eyebrow, Flag, Crumb,
  Navbar, LocaleSwitcher, Footer, TrustStrip, Callout, Lightbox, EmptyState,
  NAV_LINKS
});