// ============================================================
//  MONOGRAM — shared components
// ============================================================
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ---------- Reveal on scroll
function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12, rootMargin: "0px 0px -10% 0px" });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

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

// ---------- Monogram wordmark
function Wordmark({ size = "default" }) {
  const small = size === "small";
  return (
    <div className="nav-mono">
      <div className="mono-mark" aria-hidden="true">M</div>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span className="mono-word" style={small ? { fontSize: 16, letterSpacing: "0.28em" } : null}>MONOGRAM</span>
        <span className="mono-tag">Escaping Flatland</span>
      </div>
    </div>
  );
}

// ---------- Nav
function Nav({ route, setRoute, locale, setLocale }) {
  const scrolled = useScrolled();
  const t = COPY[locale];
  return (
    <header className={"nav " + (scrolled ? "scrolled" : "")} role="banner">
      <a onClick={() => setRoute({ name: "home" })}>
        <Wordmark />
      </a>

      <nav className="nav-links" aria-label="Primary">
        <a className={"nav-link " + (route.name === "home" ? "active" : "")} onClick={() => setRoute({ name: "home" })}>{t.nav.home}</a>
        <a className={"nav-link " + (route.name === "collection" ? "active" : "")} onClick={() => setRoute({ name: "collection", id: "sculptural" })}>{t.nav.jewellery}</a>
        <a className="nav-link" onClick={() => scrollToId("concept-section")}>{t.nav.concept}</a>
        <a className={"nav-link " + (route.name === "bespoke" ? "active" : "")} onClick={() => setRoute({ name: "bespoke" })}>{t.nav.bespoke}</a>
        <a className="nav-link" onClick={() => scrollToId("contact-section")}>{t.nav.contact}</a>
      </nav>

      <div className="nav-right">
        <div className="locale-switch" role="tablist" aria-label="Locale">
          <button className={locale === "en" ? "active" : ""} onClick={() => setLocale("en")} role="tab" aria-selected={locale === "en"}>EN</button>
          <button className={locale === "ar" ? "active" : ""} onClick={() => setLocale("ar")} role="tab" aria-selected={locale === "ar"}>عر</button>
        </div>
        <button className="btn solid" onClick={() => setRoute({ name: "bespoke" })}>
          <span>{t.nav.book}</span>
          <span className="arrow" aria-hidden="true">→</span>
        </button>
      </div>
    </header>
  );
}

function scrollToId(id) {
  const target = document.getElementById(id);
  if (target) {
    const y = target.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top: y, behavior: "smooth" });
  }
}

// ---------- Section head
function SectionHead({ num, eyebrow, title, titleItal, sub, id }) {
  return (
    <header className="section-head reveal" id={id}>
      <div>
        <div className="sh-num">{num} · {eyebrow}</div>
        <h2 className="sh-title">
          {title} <span className="ital">{titleItal}</span>
        </h2>
      </div>
      {sub ? <p className="sh-sub">{sub}</p> : null}
    </header>
  );
}

// ---------- WhatsApp FAB
function WhatsAppFab({ locale }) {
  const t = COPY[locale];
  const href = "https://wa.me/971504563365?text=" + encodeURIComponent(
    locale === "ar"
      ? "مرحباً MONOGRAM، أودّ حجز استشارة خاصّة."
      : "Hi MONOGRAM, I'd like to book a bespoke consultation."
  );
  return (
    <a className="whatsapp-fab" href={href} target="_blank" rel="noopener noreferrer">
      <span aria-hidden="true" style={{
        width: 7, height: 7, borderRadius: 999,
        background: "var(--primary)", display: "inline-block",
        boxShadow: "0 0 0 3px rgba(196,155,72,0.18)"
      }}/>
      {t.waFab}
    </a>
  );
}

// ---------- Footer
function Footer({ setRoute, locale }) {
  const t = COPY[locale];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="fb-word">MONOGRAM</div>
            <p>{locale === "ar"
              ? "دار تصميم إماراتيّة الصنع. مجوهرات نحتيّة ودعوات كوتور، انطلاقاً من الحروف العربيّة."
              : "A UAE design house. Sculptural fine jewellery and couture invitations, rooted in Arabic letterforms."}
            </p>
          </div>
          <div className="footer-col">
            <h4>{t.nav.jewellery}</h4>
            <ul>
              {COLLECTIONS.map((c) => (
                <li key={c.id}><a onClick={() => setRoute({ name: "collection", id: c.id })}>
                  {locale === "ar" ? c.nameAr : c.nameEn}
                </a></li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h4>{locale === "ar" ? "الاستوديو" : "Studio"}</h4>
            <ul>
              <li><a onClick={() => scrollToId("concept-section")}>{t.nav.concept}</a></li>
              <li><a onClick={() => setRoute({ name: "bespoke" })}>{t.nav.bespoke}</a></li>
              <li><a onClick={() => scrollToId("contact-section")}>{t.nav.contact}</a></li>
              <li><a href="https://instagram.com/monogramuae" target="_blank" rel="noopener noreferrer">@monogramuae</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>{locale === "ar" ? "تواصل" : "Channels"}</h4>
            <ul>
              <li><a href="https://wa.me/971504563365">WhatsApp · +971 50 456 3365</a></li>
              <li><a href="mailto:design.monogram@gmail.com">design.monogram@gmail.com</a></li>
              <li><a>Building 07 · B205 · d3</a></li>
              <li><a>Mon–Fri · 10:30 – 15:00</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>© MONOGRAM · {locale === "ar" ? "إماراتيّة الصنع" : "Made in the UAE"}</span>
          <span>{locale === "ar" ? "نموذج تصميم · غير رسميّ" : "Concept rebuild · prototype"}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { useReveal, useScrolled, Wordmark, Nav, SectionHead, WhatsAppFab, Footer, scrollToId });