// Bishop Design — shared UI primitives
const { useState, useEffect, useRef } = React;

// ---------- Locale ----------
const L = {
  en: {
    nav: { projects: "Projects", sectors: "Sectors", studio: "Studio", awards: "Awards", contact: "Contact" },
    cta: "Start a project",
    eyebrow: "Bishop Design — Dubai & Miami, since 2004",
    heroLine1: "Revolutionary",
    heroLine2: "Design",
    heroSub: "International multi-award-winning interior design and architecture studio. Hospitality, residential, commercial and retail — across the region and on a global scale.",
    sectors: "Sectors",
    sectorIntro: "Five disciplines, one studio.",
    work: "Selected Work",
    workIntro: "A deeper look at the projects that shaped the studio.",
    seeAll: "See all 88 projects",
    awards: "Recognition",
    awardsIntro: "100+ awards regionally and internationally.",
    startBig1: "Start a project",
    startBig2: "with the studio.",
    startSub: "Tell us about your site, your operator and your brief. We typically respond within two working days.",
  },
  ar: {
    nav: { projects: "المشاريع", sectors: "القطاعات", studio: "الاستوديو", awards: "الجوائز", contact: "تواصل" },
    cta: "ابدأ مشروعًا",
    eyebrow: "بيشوب ديزاين — دبي وميامي، منذ ٢٠٠٤",
    heroLine1: "تصميم",
    heroLine2: "ثوري",
    heroSub: "استوديو تصميم داخلي وعمارة حائز على جوائز دولية متعددة. الضيافة، السكني، التجاري والتجزئة — في المنطقة وعلى المستوى العالمي.",
    sectors: "القطاعات",
    sectorIntro: "خمسة تخصصات، استوديو واحد.",
    work: "أعمال مختارة",
    workIntro: "نظرة أعمق على المشاريع التي شكّلت الاستوديو.",
    seeAll: "عرض جميع المشاريع الـ ٨٨",
    awards: "تقدير",
    awardsIntro: "أكثر من ١٠٠ جائزة إقليمية ودولية.",
    startBig1: "ابدأ مشروعًا",
    startBig2: "مع الاستوديو.",
    startSub: "حدثنا عن موقعك، مشغلك، ومتطلباتك. عادةً ما نرد خلال يومَي عمل.",
  },
};

function useLocaleStrings(locale) {
  return L[locale] || L.en;
}

// ---------- Logo ----------
function Logo({ onClick, big }) {
  return (
    <a href="#/" onClick={(e) => { e.preventDefault(); onClick && onClick(); }} className="logo-mark" style={{ display: "inline-block" }}>
      <span style={{ fontSize: big ? 30 : 22 }}>BISHOP</span>
      <small>By Paul Bishop</small>
    </a>
  );
}

// ---------- Nav ----------
function Nav({ route, navigate, mode = "auto", locale, setLocale }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const t = useLocaleStrings(locale);
  const darkOver = mode === "dark";
  const dataMode = (darkOver && !scrolled) ? "dark" : "light";
  return (
    <nav className="nav" data-scrolled={scrolled} data-mode={dataMode}>
      <Logo onClick={() => navigate("home")} />
      <div className="nav-links">
        <a href="#/projects"   data-active={route.page === "projects" || route.page === "case"} onClick={(e) => { e.preventDefault(); navigate("projects"); }}>{t.nav.projects}</a>
        <a href="#/sectors"    data-active={route.page === "sector"} onClick={(e) => { e.preventDefault(); navigate("sector", { slug: "restaurants" }); }}>{t.nav.sectors}</a>
        <a href="#/studio"     data-active={route.page === "studio"} onClick={(e) => { e.preventDefault(); navigate("studio"); }}>{t.nav.studio}</a>
        <a href="#/awards"     data-active={route.page === "awards"} onClick={(e) => { e.preventDefault(); navigate("awards"); }}>{t.nav.awards}</a>
        <a href="#/contact"    data-active={route.page === "contact"} onClick={(e) => { e.preventDefault(); navigate("contact"); }}>{t.nav.contact}</a>
      </div>
      <div className="nav-right">
        <div className="nav-locale">
          <button data-active={locale === "en"} onClick={() => setLocale("en")}>EN</button>
          <span style={{ opacity: .3 }}>/</span>
          <button data-active={locale === "ar"} onClick={() => setLocale("ar")}>AR</button>
        </div>
        <a href="#/contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }} className="nav-cta">{t.cta} <span className="btn-arrow" /></a>
      </div>
    </nav>
  );
}

// ---------- Footer ----------
function Footer({ navigate }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48, paddingBottom: 60, borderBottom: "1px solid rgba(255,255,255,.12)" }}>
          <div>
            <div className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", lineHeight: 1, marginBottom: 24 }}>Bishop</div>
            <p style={{ maxWidth: 360, color: "rgba(255,255,255,.65)", fontSize: 15, lineHeight: 1.55, margin: 0 }}>
              Bishop Design by Paul Bishop is an international multi-award-winning interior design and architecture studio, based in Dubai and Miami. Established 2004.
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,.5)", marginBottom: 16 }}>Dubai — HQ</div>
            <p style={{ color: "rgba(255,255,255,.85)", fontSize: 15, margin: 0, lineHeight: 1.55 }}>
              Suite #111 & 112<br/>Pinnacle Building, Al Barsha<br/>Dubai, United Arab Emirates
            </p>
            <p style={{ marginTop: 16, fontSize: 14 }}>
              <a href="tel:+97143990271">+971 4 399 0271</a><br/>
              <a href="mailto:info@wearebishopdesign.com">info@wearebishopdesign.com</a>
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,.5)", marginBottom: 16 }}>Miami</div>
            <p style={{ color: "rgba(255,255,255,.85)", fontSize: 15, margin: 0, lineHeight: 1.55 }}>
              By appointment<br/>1111 Brickell Avenue<br/>Miami, FL 33131
            </p>
            <p style={{ marginTop: 16, fontSize: 14 }}>
              <a href="tel:+13055461122">+1 305 546 1122</a>
            </p>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,.5)", marginTop: 28, marginBottom: 8 }}>South Africa</div>
            <p style={{ color: "rgba(255,255,255,.55)", fontSize: 13, margin: 0 }}>Stellenbosch — opening 2026</p>
          </div>
          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,.5)", marginBottom: 16 }}>Index</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
              <li><a href="#/projects" onClick={(e) => { e.preventDefault(); navigate("projects"); }}>Projects</a></li>
              <li><a href="#/sectors"  onClick={(e) => { e.preventDefault(); navigate("sector", { slug: "restaurants" }); }}>Sectors</a></li>
              <li><a href="#/studio"   onClick={(e) => { e.preventDefault(); navigate("studio"); }}>Studio</a></li>
              <li><a href="#/awards"   onClick={(e) => { e.preventDefault(); navigate("awards"); }}>Awards</a></li>
              <li><a href="#/contact"  onClick={(e) => { e.preventDefault(); navigate("contact"); }}>Contact</a></li>
              <li style={{ marginTop: 16 }}><a href="#" onClick={(e) => e.preventDefault()}>Rogue by Bishop</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>Press →</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>Careers</a></li>
            </ul>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,.5)", marginTop: 28, marginBottom: 8 }}>Follow</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", gap: 14, fontSize: 12, letterSpacing: ".16em", textTransform: "uppercase", fontFamily: "var(--mono)" }}>
              <li><a href="#" onClick={(e) => e.preventDefault()}>Instagram</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>LinkedIn</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>Vimeo</a></li>
            </ul>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 28, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", color: "rgba(255,255,255,.45)", textTransform: "uppercase", flexWrap: "wrap", gap: 12 }}>
          <span>© 2026 Bishop Design LLC · All rights reserved</span>
          <span>Dubai · Miami · Stellenbosch</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Cards ----------
function ProjectCard({ project, ratio = "tall", onClick }) {
  return (
    <a href={`#/project/${project.slug}`} className="proj-card" onClick={(e) => { e.preventDefault(); onClick && onClick(project); }}>
      <div className="proj-card-img" data-ratio={ratio} style={{ backgroundImage: `url(media/project-${project.img}.webp)` }} />
      <div className="proj-card-meta">
        <div>
          <div className="proj-card-name">{project.name}</div>
          <div className="meta" style={{ marginTop: 6, fontSize: 11 }}>{project.sector} · {project.scope}</div>
        </div>
        <div className="proj-card-loc">{project.location.split(",")[0]} · {project.year}</div>
      </div>
    </a>
  );
}

function SectorTile({ sector, count, onClick }) {
  return (
    <a href={`#/sector/${sector.slug}`} className="sector-tile" onClick={(e) => { e.preventDefault(); onClick && onClick(sector); }}>
      <div className="sector-tile-img" style={{ backgroundImage: `url(media/sector-${sector.slug}.webp)` }} />
      <div className="sector-tile-label">
        <div>
          <div className="sector-tile-name">{sector.name}</div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", opacity: .8, marginTop: 6 }}>{sector.sub}</div>
        </div>
        <div className="sector-tile-count">{String(count).padStart(2, "0")} · Projects</div>
      </div>
    </a>
  );
}

// ---------- Eyebrow ----------
function Eyebrow({ children, dot, light }) {
  return (
    <div className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 10, color: light ? "rgba(255,255,255,.7)" : undefined }}>
      {dot !== false && <span style={{ display: "inline-block", width: 6, height: 6, background: "var(--accent)", borderRadius: 999 }} />}
      {children}
    </div>
  );
}

// ---------- Marquee award strip ----------
function AwardMarquee({ items }) {
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((a, i) => (
          <span key={i} className="marquee-item">
            <span style={{ color: "var(--accent)" }}>✦</span> {a}
          </span>
        ))}
      </div>
    </div>
  );
}

// ---------- Sticky CTA (mobile) ----------
function StickyCTA({ navigate }) {
  return (
    <div className="sticky-cta">
      <span>Bishop Design</span>
      <a href="#/contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }} style={{ display: "inline-flex", gap: 10, alignItems: "center" }}>
        Start a project <span className="btn-arrow" style={{ background: "currentColor" }} />
      </a>
    </div>
  );
}

// ---------- Disclaimer ----------
function Disclaimer() {
  return (
    <div className="disclaimer">
      Internal prototype · imagery & metadata pending client + photographer rights confirmation
    </div>
  );
}

// ---------- Lightbox ----------
function Lightbox({ images, index, onClose, setIndex }) {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setIndex((index + 1) % images.length);
      if (e.key === "ArrowLeft")  setIndex((index - 1 + images.length) % images.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [index, images.length]);
  return (
    <div className="lightbox" onClick={onClose}>
      <div className="lightbox-counter">{String(index + 1).padStart(2, "0")} / {String(images.length).padStart(2, "0")}</div>
      <button className="lightbox-close" onClick={(e) => { e.stopPropagation(); onClose(); }}>×</button>
      <button className="lightbox-nav lightbox-nav-prev" onClick={(e) => { e.stopPropagation(); setIndex((index - 1 + images.length) % images.length); }}>←</button>
      <button className="lightbox-nav lightbox-nav-next" onClick={(e) => { e.stopPropagation(); setIndex((index + 1) % images.length); }}>→</button>
      <img className="lightbox-img" src={`media/project-${images[index]}.webp`} onClick={(e) => e.stopPropagation()} />
    </div>
  );
}

// Expose
Object.assign(window, { Logo, Nav, Footer, ProjectCard, SectorTile, Eyebrow, AwardMarquee, StickyCTA, Disclaimer, Lightbox, useLocaleStrings, L });
