// Nav and footer.

function Nav({ route, navigate, locale, setLocale }) {
  const links = [
    { id: "projects", label: locale === "ar" ? "المشاريع" : "Projects" },
    { id: "sectors", label: locale === "ar" ? "القطاعات" : "Sectors" },
    { id: "how-we-build", label: locale === "ar" ? "كيف نبني" : "How we build" },
    { id: "studio", label: locale === "ar" ? "الاستوديو" : "Studio" },
    { id: "awards", label: locale === "ar" ? "الجوائز" : "Awards" },
    { id: "contact", label: locale === "ar" ? "تواصل" : "Contact" },
  ];

  // Sectors hovers a flyout — but for prototype scope we treat as scroll target.
  const isActive = (id) => {
    if (id === "projects" && (route.name === "projects" || route.name === "project")) return true;
    if (id === "sectors" && route.name === "sectors") return true;
    if (id === "how-we-build" && route.name === "how-we-build") return true;
    if (id === "studio" && route.name === "studio") return true;
    if (id === "awards" && route.name === "awards") return true;
    if (id === "contact" && route.name === "contact") return true;
    return false;
  };

  return (
    <header className="nav">
      <div className="container nav-inner">
        <Wordmark onClick={() => navigate({ name: "home" })} />
        <nav className="nav-links" aria-label="Primary">
          {links.map((l) => (
            <button
              key={l.id}
              className={"nav-link" + (isActive(l.id) ? " is-active" : "")}
              onClick={() => {
                if (l.id === "projects") navigate({ name: "projects" });
                else if (l.id === "sectors") navigate({ name: "sectors" });
                else if (l.id === "how-we-build") navigate({ name: "how-we-build" });
                else if (l.id === "studio") navigate({ name: "studio" });
                else if (l.id === "awards") navigate({ name: "awards" });
                else if (l.id === "contact") navigate({ name: "contact" });
              }}
            >
              {l.label}
            </button>
          ))}
        </nav>
        <div className="nav-utility">
          <div className="locale-switch" role="tablist" aria-label="Language">
            {["EN", "AR"].map((L) => {
              const lv = L.toLowerCase();
              return (
                <button key={L} onClick={() => setLocale(lv)} className={locale === lv ? "is-active" : ""}>{L}</button>
              );
            })}
          </div>
          <Button onClick={() => navigate({ name: "contact" })} arrow={true}>
            {locale === "ar" ? "ابدأ مشروعًا" : "Start a project"}
          </Button>
        </div>
      </div>
    </header>
  );
}

function Footer({ navigate, locale }) {
  const { brand } = window.DS_DATA;
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-top">
          <div className="footer-cta-block">
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <LogoMark size={28} color="var(--bronze)" />
              <span style={{ fontFamily: "var(--font-display)", letterSpacing: "0.04em", fontSize: 18, color: "#F4F1EA" }}>
                DESIGNSMITH<span style={{ color: "var(--bronze)" }}>.</span>
              </span>
            </div>
            <div className="footer-cta">
              Talk to the team. <a onClick={(e) => { e.preventDefault(); navigate({ name: "contact" }); }} href="#contact">Start a project</a>
            </div>
            <div style={{ fontSize: 13, color: "#9AA0A8", maxWidth: 360 }}>
              {brand.address.line1}, {brand.address.area}<br />
              {brand.address.city}, {brand.address.country}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 14, color: "#C7C2B8" }}>
              <a href={`tel:${brand.phone.replace(/\s/g, "")}`}>{brand.phone}</a>
              <a href={`mailto:${brand.email}`}>{brand.email}</a>
            </div>
          </div>

          <div>
            <h4>Site</h4>
            <ul>
              <li><a onClick={(e) => { e.preventDefault(); navigate({ name: "projects" }); }} href="#">Projects</a></li>
              <li><a onClick={(e) => { e.preventDefault(); navigate({ name: "sectors" }); }} href="#">Sectors</a></li>
              <li><a onClick={(e) => { e.preventDefault(); navigate({ name: "how-we-build" }); }} href="#">How we build</a></li>
              <li><a onClick={(e) => { e.preventDefault(); navigate({ name: "studio" }); }} href="#">Studio</a></li>
              <li><a onClick={(e) => { e.preventDefault(); navigate({ name: "awards" }); }} href="#">Awards</a></li>
              <li><a href="#">Insights</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </div>

          <div>
            <h4>Sectors</h4>
            <ul>
              {window.DS_DATA.sectors.map((s) => (
                <li key={s.id}>
                  <a onClick={(e) => { e.preventDefault(); navigate({ name: "projects", filter: s.id }); }} href="#">
                    {s.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4>Connect</h4>
            <ul>
              <li><a href={`tel:${brand.phone.replace(/\s/g, "")}`}>{brand.phone}</a></li>
              <li><a href={`mailto:${brand.email}`}>{brand.email}</a></li>
              <li><a href="#">Instagram — {brand.socials.instagram}</a></li>
              <li><a href="#">LinkedIn — designsmithuae</a></li>
              <li><a href="#">Facebook — {brand.socials.facebook}</a></li>
              <li><a href="#">Pinterest — {brand.socials.pinterest}</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} Designsmith Interior Works L.L.C — All rights reserved.</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#">Privacy</a>
            <a href="#">Cookies</a>
            <a href="#">Imprint</a>
            <span>Dubai · India · KSA</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function StickyCta({ navigate, locale }) {
  return (
    <div className="sticky-cta" onClick={() => navigate({ name: "contact" })}>
      <span><span className="label" style={{ color: "rgba(250,248,244,0.6)" }}>Begin</span> {locale === "ar" ? "ابدأ مشروعًا" : "Start a project"}</span>
      <span>→</span>
    </div>
  );
}

Object.assign(window, { Nav, Footer, StickyCta });