/* LW Design Group — shared UI */

const { useState, useEffect, useRef, useMemo } = React;

/* -------- tiny helpers -------- */
function cx(...xs) { return xs.filter(Boolean).join(" "); }
function useT(lang) { return I18N[lang] || I18N.en; }
function MonoLabel({ children, className }) {
  return <span className={cx("lw-mono-label", className)}>{children}</span>;
}
function Rule({ wide }) { return <div className={cx("lw-rule", wide && "lw-rule--wide")} />; }

/* -------- IMAGE with reference badge --------
   Brief: NO ref photos may ship. We display them in the prototype but mark them. */
function Img({ src, alt, ratio, className, showRef = true, style }) {
  return (
    <figure className={cx("lw-img", className)} style={{ aspectRatio: ratio || "auto", ...style }}>
      <img src={src} alt={alt} loading="lazy" />
      {showRef && <span className="lw-img__ref" title="Reference photography — © Natelee Cocks. Rights NOT cleared.">REF</span>}
    </figure>
  );
}

/* -------- NAVBAR -------- */
function Navbar({ route, go, lang, setLang, density }) {
  const t = useT(lang);
  const [scrolled, setScrolled] = useState(false);
  const [openMobile, setOpenMobile] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const items = [
    ["projects", t.nav_projects],
    ["sectors", t.nav_sectors],
    ["studio", t.nav_studio],
    ["offices", t.nav_offices],
    ["awards", t.nav_awards],
    ["contact", t.nav_contact],
  ];
  return (
    <header className={cx("lw-nav", scrolled && "lw-nav--scrolled")}>
      <div className="lw-nav__inner">
        <a className="lw-logo" onClick={() => go("home")} aria-label="LW — home">
          <Wordmark />
        </a>
        <nav className="lw-nav__links" aria-label="primary">
          {items.map(([id, label]) => (
            <a key={id}
               className={cx("lw-nav__link", route.name === id && "is-active")}
               onClick={() => go(id)}>
              {label}
            </a>
          ))}
        </nav>
        <div className="lw-nav__tail">
          <LangSwitch lang={lang} setLang={setLang} />
          <button className="lw-btn lw-btn--ink" onClick={() => go("contact")}>
            {t.cta_start}
            <span aria-hidden>↗</span>
          </button>
          <button className="lw-nav__burger" onClick={() => setOpenMobile(v => !v)} aria-label="menu">
            <span /><span /><span />
          </button>
        </div>
      </div>
      {openMobile && (
        <div className="lw-nav__mobile">
          {items.map(([id, label]) => (
            <a key={id} onClick={() => { go(id); setOpenMobile(false); }}>{label}</a>
          ))}
        </div>
      )}
    </header>
  );
}

function Wordmark() {
  /* A restrained mono-line LW wordmark — placeholder until client supplies SVG.
     Marked as placeholder in the source. */
  return (
    <svg viewBox="0 0 92 28" className="lw-wordmark" aria-label="LW Design Group">
      <text x="0" y="22" className="lw-wordmark__lw">LW</text>
      <line x1="34" y1="6" x2="34" y2="22" stroke="currentColor" strokeWidth="0.6" />
      <text x="40" y="14" className="lw-wordmark__t1">DESIGN</text>
      <text x="40" y="24" className="lw-wordmark__t2">GROUP · DUBAI</text>
    </svg>
  );
}

function LangSwitch({ lang, setLang }) {
  return (
    <div className="lw-lang" role="group" aria-label="language">
      {["en", "ar"].map(L => (
        <button key={L}
                className={cx("lw-lang__b", lang === L && "is-active")}
                onClick={() => setLang(L)}>
          {L === "en" ? "EN" : "عربى"}
        </button>
      ))}
    </div>
  );
}

/* -------- FOOTER -------- */
function Footer({ go, lang }) {
  const t = useT(lang);
  return (
    <footer className="lw-footer">
      <div className="lw-footer__top">
        <div className="lw-footer__brand">
          <Wordmark />
          <p className="lw-footer__lede">
            An independent architecture and interior design studio. Dubai · Hong Kong · São Paulo · Aarhus.
          </p>
          <p className="lw-footer__since"><MonoLabel>Est. 1999 · 140+ staff</MonoLabel></p>
        </div>
        <div className="lw-footer__cols">
          <div>
            <MonoLabel>Studio</MonoLabel>
            <a onClick={() => go("studio")}>About</a>
            <a onClick={() => go("studio")}>Leadership</a>
            <a onClick={() => go("awards")}>Awards</a>
            <a onClick={() => go("offices")}>Offices</a>
          </div>
          <div>
            <MonoLabel>Work</MonoLabel>
            <a onClick={() => go("projects")}>All projects</a>
            <a onClick={() => go("sectors")}>By sector</a>
            <a onClick={() => go("projects", { discipline: "interior" })}>Interior Design</a>
            <a onClick={() => go("projects", { discipline: "architecture" })}>Architecture</a>
          </div>
          <div>
            <MonoLabel>Connect</MonoLabel>
            <a onClick={() => go("contact")}>Start a project</a>
            <a href="tel:+97143697800">+971 4 369 7800</a>
            <a>studio@lwdesigngroup.com</a>
            <span className="lw-footer__sub">Email pending client confirmation</span>
          </div>
          <div>
            <MonoLabel>Social</MonoLabel>
            <a>Instagram / @lw.designgroup</a>
            <a>LinkedIn / lw-design-group</a>
            <a>Facebook / LWdesigngroupdubai</a>
          </div>
        </div>
      </div>
      <Rule wide />
      <div className="lw-footer__bottom">
        <span>© LW Design Group 1999–2026</span>
        <span className="lw-footer__rights">{t.footer_rights}</span>
        <span className="lw-footer__build">
          Concept site — portfolio-first reframe · v0.1 prototype
        </span>
      </div>
    </footer>
  );
}

/* -------- PROJECT CARD -------- */
function ProjectCard({ p, size = "md", onClick, lang }) {
  const sector = SECTORS.find(s => s.id === p.sector);
  return (
    <a className={cx("lw-card", `lw-card--${size}`)} onClick={onClick}>
      <Img src={p.cover} alt={p.name} ratio={size === "tall" ? "3/4" : size === "wide" ? "16/10" : "4/3"} />
      <div className="lw-card__meta">
        <div className="lw-card__line">
          <MonoLabel>{sector?.label}</MonoLabel>
          <MonoLabel>{p.year}</MonoLabel>
        </div>
        <h3 className="lw-card__title">{p.name}</h3>
        <p className="lw-card__loc">{p.location}</p>
      </div>
    </a>
  );
}

/* -------- CTA BAND -------- */
function StartBand({ go, lang }) {
  const t = useT(lang);
  return (
    <section className="lw-band">
      <div className="lw-band__inner">
        <div>
          <MonoLabel>Studio enquiry</MonoLabel>
          <h2 className="lw-h2">A new brief, a new building, a new room — start here.</h2>
        </div>
        <button className="lw-btn lw-btn--ghost-light" onClick={() => go("contact")}>
          {t.cta_start} <span aria-hidden>↗</span>
        </button>
      </div>
    </section>
  );
}

/* -------- REVEAL on scroll -------- */
function Reveal({ children, as: As = "div", delay = 0, className }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setSeen(true); io.disconnect(); }
    }, { threshold: 0.08, rootMargin: "0px 0px -40px 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As ref={ref}
        className={cx("lw-reveal", seen && "is-in", className)}
        style={{ transitionDelay: delay + "ms" }}>
      {children}
    </As>
  );
}

/* -------- MARQUEE (infinite ticker) -------- */
function Marquee({ items, speed = 60, separator = "·" }) {
  // duplicate items so the loop never shows a seam
  const row = [...items, ...items];
  return (
    <div className="lw-marquee" aria-hidden="false">
      <div className="lw-marquee__track" style={{ animationDuration: `${speed}s` }}>
        {row.map((item, i) => (
          <span key={i} className="lw-marquee__item">
            {typeof item === "string"
              ? <span className="lw-marquee__t">{item}</span>
              : (
                <>
                  <span className="lw-marquee__t">{item.name}</span>
                  {item.city && <span className="lw-marquee__sub">{item.city}</span>}
                  {item.year && <span className="lw-marquee__yr">{item.year}</span>}
                </>
              )}
            <span className="lw-marquee__sep" aria-hidden>{separator}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  cx, useT, MonoLabel, Rule, Img, Navbar, Footer, ProjectCard, StartBand, Wordmark,
  Reveal, Marquee,
});
