// components.jsx — shared UI for Muse Design prototype
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ---------- Brand mark ----------
function BrandMark({ inverted }) {
  return (
    <div className="brand" data-comment-anchor="brand-mark">
      <div className="mark" style={inverted ? { color: "#FBF9F6" } : {}}>
        m<em>u</em>se
      </div>
      <div className="sub" style={inverted ? { color: "rgba(251,249,246,0.55)" } : {}}>
        design — dubai
      </div>
    </div>
  );
}

// ---------- Top bar / nav ----------
function Topbar({ route, navigate }) {
  const items = [
    { id: "home",     label: "Index" },
    { id: "projects", label: "Projects" },
    { id: "sectors",  label: "Sectors" },
    { id: "services", label: "Services" },
    { id: "studio",   label: "Studio" },
    { id: "contact",  label: "Contact" },
  ];
  const [locale, setLocale] = useState("EN");
  const active = route.name === "case" ? "projects" : route.name === "sector" ? "sectors" : route.name;
  return (
    <header className="topbar">
      <div className="wrap topbar-inner">
        <a onClick={() => navigate({ name: "home" })} style={{ cursor: "pointer" }}>
          <BrandMark />
        </a>
        <nav className="nav">
          {items.map(it => (
            <button
              key={it.id}
              onClick={() => navigate({ name: it.id })}
              aria-current={active === it.id ? "true" : undefined}
            >
              {it.label}
            </button>
          ))}
        </nav>
        <div className="right">
          <div className="locale">
            {["EN","AR","RU"].map(l => (
              <button key={l} className={locale === l ? "on" : ""} onClick={() => setLocale(l)}>{l}</button>
            ))}
          </div>
          <button className="btn btn-sm btn-arrow" onClick={() => navigate({ name: "contact" })}>
            Start a project
          </button>
        </div>
      </div>
    </header>
  );
}

// ---------- Footer ----------
function Footer({ navigate }) {
  return (
    <footer className="footer" data-comment-anchor="footer">
      <div className="wrap">
        <div className="brand-block">
          <div className="display">muse<span style={{ color: "var(--brass-soft)", fontStyle: "italic" }}>.</span></div>
          <p>
            A Dubai luxury interior + fit-out studio. Founded 2007 by Michael Dudnyk and
            Stanislava Rudas-Dudnyk. Headquartered at Dubai Design District,
            building 1B, office 601.
          </p>
        </div>
        <div>
          <h6>Practice</h6>
          <ul>
            <li><a onClick={() => navigate({ name: "projects" })}>Projects</a></li>
            <li><a onClick={() => navigate({ name: "sectors" })}>Sectors</a></li>
            <li><a onClick={() => navigate({ name: "services" })}>Services</a></li>
            <li><a onClick={() => navigate({ name: "studio" })}>Studio</a></li>
          </ul>
        </div>
        <div>
          <h6>Contact</h6>
          <ul>
            <li><a href="tel:+971553573290">+971 55 357 3290</a></li>
            <li><a href="https://api.whatsapp.com/send?phone=971553573290" target="_blank" rel="noopener">WhatsApp</a></li>
            <li><a href="mailto:info@musedesign.ae">info@musedesign.ae</a></li>
            <li>d3 · Bldg 1B · Office 601</li>
            <li>Mon–Sat 09:00–18:00</li>
          </ul>
        </div>
        <div>
          <h6>Follow</h6>
          <ul>
            <li><a href="#" onClick={e => e.preventDefault()}>Instagram</a></li>
            <li><a href="#" onClick={e => e.preventDefault()}>Facebook</a></li>
            <li><a href="#" onClick={e => e.preventDefault()}>LinkedIn</a></li>
            <li><a href="#" onClick={e => e.preventDefault()}>Pinterest</a></li>
          </ul>
        </div>
      </div>
      <div className="wrap footer-bottom">
        <div>© 2007–2026 Muse Interior Design LLC</div>
        <div>Trade licence · Dubai · UAE</div>
        <div>Prototype build · BytesGlue showcase</div>
      </div>
    </footer>
  );
}

// ---------- WhatsApp FAB ----------
function WhatsappFab({ context }) {
  const text = encodeURIComponent(
    context === "project"
      ? "Hi Muse — I'd like to discuss a project similar to the one I just viewed."
      : "Hi Muse — I'd like to start a project. Could we set up a call?"
  );
  return (
    <a
      className="fab-whatsapp"
      href={`https://api.whatsapp.com/send?phone=971553573290&text=${text}`}
      target="_blank"
      rel="noopener"
      aria-label="WhatsApp Muse Design"
    >
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M19.05 4.91A10 10 0 0 0 4.91 19.05L4 22l3.05-.91A10 10 0 1 0 19.05 4.91zM12 20.07a8 8 0 0 1-4.08-1.11l-.29-.17-1.81.54.54-1.77-.19-.3A8.07 8.07 0 1 1 12 20.07zm4.59-5.94c-.25-.13-1.48-.73-1.71-.81s-.4-.13-.56.12-.65.81-.79.97-.29.19-.54.06a6.6 6.6 0 0 1-1.94-1.2 7.32 7.32 0 0 1-1.34-1.66c-.14-.25 0-.38.11-.5s.25-.29.37-.43.16-.25.25-.41a.46.46 0 0 0 0-.43c-.06-.12-.56-1.34-.76-1.84s-.4-.41-.56-.42-.31 0-.47 0a.9.9 0 0 0-.65.31 2.76 2.76 0 0 0-.86 2.04 4.79 4.79 0 0 0 1 2.55 11 11 0 0 0 4.22 3.74c.59.25 1 .4 1.42.52a3.42 3.42 0 0 0 1.55.1 2.53 2.53 0 0 0 1.66-1.17 2.05 2.05 0 0 0 .14-1.17c-.05-.1-.2-.16-.45-.29z"/>
      </svg>
    </a>
  );
}

// ---------- Section head ----------
function SectionHead({ roman, title, aside }) {
  return (
    <div className="section-head">
      <div className="roman">{roman}</div>
      <h2>{title}</h2>
      {aside ? <div className="aside">{aside}</div> : <div />}
    </div>
  );
}

// ---------- Process strip (dark) ----------
function ProcessStrip() {
  return (
    <div className="process" data-comment-anchor="process-strip">
      {PROCESS_STEPS.map(s => (
        <div className="step" key={s.num}>
          <div className="num">{s.num}</div>
          <h4>{s.title}</h4>
          <p>{s.body}</p>
        </div>
      ))}
    </div>
  );
}

// ---------- Recognition strip ----------
function RecognitionStrip() {
  return (
    <div className="recognition" data-comment-anchor="recognition">
      <div className="cell">
        <div className="award-rank">13<sup>th</sup></div>
        <h5>Fit-Out Powerlist 2024</h5>
        <div className="src">Design Middle East</div>
        <p>
          Ranked 13<sup>th</sup> in the regional Fit-Out Powerlist —
          a list of practices "elevating luxury living in Dubai".
        </p>
      </div>
      <div className="cell">
        <div className="eyebrow">Project Feature</div>
        <h5 style={{ marginTop: 14 }}>Jaddaf Barbershop</h5>
        <div className="src">Commercial Interior Design</div>
        <p>
          Press feature on a Jaddaf barbershop — woodwork, hanging lights, leather upholstery, exposed services.
        </p>
      </div>
      <div className="cell">
        <div className="eyebrow">Since</div>
        <h5 style={{ marginTop: 14 }}>2007 · Dubai</h5>
        <div className="src">Established practice</div>
        <p>
          Husband-and-wife studio led by Michael Dudnyk and Stanislava Rudas-Dudnyk.
          Headquartered at Dubai Design District.
        </p>
      </div>
    </div>
  );
}

// ---------- Lightbox ----------
function Lightbox({ images, startIndex, onClose }) {
  const [i, setI] = useState(startIndex || 0);
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") setI(p => (p - 1 + images.length) % images.length);
      if (e.key === "ArrowRight") setI(p => (p + 1) % images.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [images.length, onClose]);
  return (
    <div className="lightbox" onClick={onClose}>
      <button className="lb-close" onClick={onClose}>Close ✕</button>
      <button className="lb-nav prev" onClick={e => { e.stopPropagation(); setI((i - 1 + images.length) % images.length); }}>‹</button>
      <button className="lb-nav next" onClick={e => { e.stopPropagation(); setI((i + 1) % images.length); }}>›</button>
      <img src={images[i]} alt="" onClick={e => e.stopPropagation()} />
      <div className="lb-caption">{String(i + 1).padStart(2, "0")} / {String(images.length).padStart(2, "0")} · photographer credit pending</div>
    </div>
  );
}

Object.assign(window, { BrandMark, Topbar, Footer, WhatsappFab, SectionHead, ProcessStrip, RecognitionStrip, Lightbox });