/* TDD — common components (Logo, Nav, Footer) */

const { useState, useEffect, useRef } = React;

function Logo({ size = 36 }) {
  // Inline SVG of TDD logo (currentColor)
  return (
    <svg viewBox="0 0 320 130" style={{ height: size, width: "auto" }} fill="currentColor" role="img" aria-label="The Design Destination">
      <g fill="currentColor">
        <text x="232" y="34" textAnchor="end" fontFamily="'Cormorant Garamond', Georgia, serif" fontSize="26" letterSpacing="6">THE</text>
        <text x="232" y="70" textAnchor="end" fontFamily="'Cormorant Garamond', Georgia, serif" fontSize="34" letterSpacing="5">DESIGN</text>
        <text x="232" y="108" textAnchor="end" fontFamily="'Cormorant Garamond', Georgia, serif" fontSize="34" letterSpacing="4">DESTINATION</text>
      </g>
      <g fill="none" stroke="currentColor" strokeWidth="9">
        <path d="M250 22 h24 a26 26 0 0 1 0 86 h-24 V22 Z" />
        <path d="M270 30 h22 a30 30 0 0 1 0 70 h-22" opacity="0.85" />
      </g>
    </svg>
  );
}

const LOCALES = [
  { code: "en", label: "English", short: "EN", dir: "ltr" },
  { code: "ar", label: "العربية", short: "AR", dir: "rtl" },
  { code: "ru", label: "Русский", short: "RU", dir: "ltr" },
  { code: "zh", label: "中文", short: "ZH", dir: "ltr" },
];

const NAV_LINKS = [
  { key: "brands", label: "Brands" },
  { key: "materials", label: "Materials" },
  { key: "studio", label: "Studio" },
  { key: "about", label: "About" },
  { key: "contact", label: "Contact" },
];

// Simple AR copy (preview-level only)
const AR_LINKS = {
  brands: "العلامات", materials: "المواد", studio: "الاستوديو", about: "عن TDD", contact: "تواصل",
  bookCta: "احجز زيارة الاستوديو",
};

function Nav({ route, onNavigate, locale, setLocale, dir }) {
  const [openLocale, setOpenLocale] = useState(false);
  const localeRef = useRef(null);

  useEffect(() => {
    function onDoc(e) { if (localeRef.current && !localeRef.current.contains(e.target)) setOpenLocale(false); }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  const link = (l) => locale === "ar" ? (AR_LINKS[l.key] || l.label) : l.label;
  const ctaLabel = locale === "ar" ? AR_LINKS.bookCta : "Book a Studio Visit";

  return (
    <nav className="nav">
      <div className="nav-inner">
        <button className="nav-logo" onClick={() => onNavigate("home")} aria-label="Home">
          <Logo size={32} />
        </button>
        <div className="nav-links">
          {NAV_LINKS.map(l => (
            <button
              key={l.key}
              className={"nav-link " + (route === l.key || (l.key === "brands" && route === "brand") ? "active" : "")}
              onClick={() => onNavigate(l.key)}
            >{link(l)}</button>
          ))}
        </div>
        <div className="nav-cta">
          <div style={{ position: "relative" }} ref={localeRef}>
            <button className="locale-pill" onClick={() => setOpenLocale(o => !o)}>
              {locale.toUpperCase()} <span className="arr">▾</span>
            </button>
            {openLocale && (
              <div className="locale-menu">
                {LOCALES.map(l => (
                  <button key={l.code} onClick={() => { setLocale(l.code); setOpenLocale(false); }}>
                    <span>{l.label}</span>
                    <span className="lbl-en">{l.short}</span>
                  </button>
                ))}
              </div>
            )}
          </div>
          <button className="btn btn-primary" onClick={() => onNavigate("contact")}>
            {ctaLabel} <span className="arr">{dir === "rtl" ? "←" : "→"}</span>
          </button>
        </div>
      </div>
    </nav>
  );
}

function Footer({ onNavigate }) {
  const d = window.TDD_DATA;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="logo-wrap"><Logo size={42} /></div>
            <p className="blurb">High-end European furnishing fabrics, leather, wallpaper, carpets and accessories — represented in the Middle East from a by-appointment studio in Dubai Design District.</p>
          </div>
          <div>
            <h5>Browse</h5>
            <ul>
              <li onClick={() => onNavigate("brands")}>Brand Library</li>
              <li onClick={() => onNavigate("materials")}>Materials</li>
              <li onClick={() => onNavigate("studio")}>The Studio</li>
              <li onClick={() => onNavigate("about")}>About TDD</li>
            </ul>
          </div>
          <div>
            <h5>Engage</h5>
            <ul>
              <li onClick={() => onNavigate("contact")}>Book a Studio Visit</li>
              <li onClick={() => onNavigate("contact")}>Request Samples</li>
              <li onClick={() => onNavigate("contact")}>Trade / Project Enquiry</li>
              <li onClick={() => onNavigate("contact")}>Download Brochure</li>
            </ul>
          </div>
          <div>
            <h5>Group</h5>
            <ul>
              {d.group.map(g => (
                <li key={g.city} onClick={() => onNavigate("about")}>{g.city} — {g.phone}</li>
              ))}
            </ul>
          </div>
          <div>
            <h5>Follow</h5>
            <ul>
              <li><a href="https://instagram.com/tddfurnishing_d3" target="_blank" rel="noreferrer">Instagram</a></li>
              <li><a href="https://facebook.com/tdddubai" target="_blank" rel="noreferrer">Facebook</a></li>
              <li>Pinterest · LinkedIn — by request</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 TDD Furnishing Trading LLC · Dubai Design District</div>
          <div>tddfze.com · office@tddfze.com</div>
        </div>
      </div>
    </footer>
  );
}

function ScrollProgress() {
  const [w, setW] = useState(0);
  useEffect(() => {
    function onScroll() {
      const h = document.documentElement;
      const total = h.scrollHeight - h.clientHeight;
      setW(total > 0 ? (h.scrollTop / total) * 100 : 0);
    }
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return <div className="scroll-bar"><div className="fill" style={{ width: `${w}%` }}></div></div>;
}

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

Object.assign(window, { Logo, Nav, Footer, ScrollProgress, useReveal, LOCALES, AR_LINKS });