/* ============================================================
   Dervişoğlu İnşaat — shared site scaffolding
   i18n content (TR/EN), language hook, navbar + footer.
   Exported to window for use across all pages.
   ============================================================ */
const DS = window.DerviOLuDesignSystem_1f2aa9;

/* ---- Dark mode: inverts grounds, keeps the same theme + layout. ----
   Applied as early as possible (before React renders) to avoid a flash,
   and injected once. The inverse (ink) sections become light, the stone
   page becomes ink — the alternating two-tone rhythm is preserved. */
(function initTheme() {
  try {
    if (localStorage.getItem("ds_theme") === "dark") {
      document.documentElement.dataset.theme = "dark";
    }
  } catch (e) {}
  if (document.getElementById("ds-dark-theme")) return;
  const s = document.createElement("style");
  s.id = "ds-dark-theme";
  s.textContent = `
[data-theme="dark"]{
  --surface-page:#161929;
  --surface-raised:#1f2338;
  --surface-tint:#1f2338;
  --surface-muted:#1f2338;
  --surface-inverse:#f8f6f1;
  --surface-inverse-raised:#f1ede4;
  --text-display:#f4f2ed;
  --text-body:rgba(244,242,237,.74);
  --text-muted:rgba(244,242,237,.52);
  --text-accent:var(--bronze-300);
  --text-on-dark:#161929;
  --text-on-dark-muted:rgba(22,25,41,.62);
  --text-on-dark-accent:var(--bronze-600);
  --hairline:rgba(248,246,241,.16);
  --hairline-strong:rgba(248,246,241,.34);
  --hairline-on-dark:rgba(22,25,41,.16);
  --interactive:#f8f6f1;
  --interactive-hover:#e7e0d2;
}
[data-theme="dark"] nav{background:rgba(22,25,41,.92)!important;}
[data-theme="dark"] .partner-logo{mix-blend-mode:normal!important;filter:grayscale(1) brightness(0) invert(1)!important;opacity:.6!important;}
html{transition:background-color .45s var(--ease-quiet,ease);}
`;
  document.head.appendChild(s);
})();

/* ---- Theme toggle: persists across pages, mirrors the language button ---- */
function ThemeToggle({ lang, onDark = false }) {
  const [dark, setDark] = React.useState(() => {
    try {
      return localStorage.getItem("ds_theme") === "dark";
    } catch (e) {
      return false;
    }
  });
  React.useEffect(() => {
    if (dark) document.documentElement.dataset.theme = "dark";
    else delete document.documentElement.dataset.theme;
    try {
      localStorage.setItem("ds_theme", dark ? "dark" : "light");
    } catch (e) {}
  }, [dark]);
  const label = dark
    ? lang === "tr"
      ? "Açık"
      : "Light"
    : lang === "tr"
      ? "Koyu"
      : "Dark";
  return (
    <button
      onClick={() => setDark((d) => !d)}
      aria-label={lang === "tr" ? "Tema" : "Theme"}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: "8px",
        background: "transparent",
        border: "none",
        cursor: "pointer",
        padding: "6px 0",
        fontFamily: "var(--font-sans-body)",
        fontSize: "var(--type-eyebrow)",
        fontWeight: "var(--weight-body-medium)",
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        color: onDark ? "var(--text-on-dark-muted)" : "var(--text-muted)",
        whiteSpace: "nowrap",
      }}
    >
      <span
        aria-hidden="true"
        style={{
          width: "11px",
          height: "11px",
          borderRadius: "50%",
          border: "1px solid var(--bronze-500)",
          background: dark ? "var(--bronze-500)" : "transparent",
        }}
      ></span>
      {label}
    </button>
  );
}

/* ---- Project category labels (filters) ---- */
const PROJECT_CATS = {
  for_sale: { tr: "Satışta", en: "For Sale" },
  upcoming: { tr: "Yakında", en: "Upcoming" },
  residential: { tr: "Konut", en: "Residential" },
  commercial: { tr: "Ticari", en: "Commercial" },
  institutional: { tr: "Kurumsal", en: "Institutional" },
};

/* ---- Map sites: the Kadıköy → Bostancı Marmara shoreline (west → east) ---- */
const MAP_SITES = [
  {
    key: "moda",
    lat: 40.9805,
    lng: 29.024,
    year: "2021",
    units: 6,
    category: "residential",
    name: { tr: "Moda Sahil Konağı", en: "Moda Seafront Residence" },
    area: { tr: "Moda", en: "Moda" },
    status: { tr: "Tamamlandı", en: "Completed" },
  },
  {
    key: "kiziltoprak",
    lat: 40.984,
    lng: 29.0455,
    year: "2026",
    units: 18,
    category: "for_sale",
    name: { tr: "Kızıltoprak Rezidans", en: "Kızıltoprak Residence" },
    area: { tr: "Kızıltoprak", en: "Kızıltoprak" },
    status: { tr: "Satışta", en: "For Sale" },
  },
  {
    key: "fenerbahce",
    lat: 40.9685,
    lng: 29.038,
    year: "2022",
    units: 4,
    category: "residential",
    name: { tr: "Fenerbahçe Sahil Evi", en: "Fenerbahçe Shore House" },
    area: { tr: "Fenerbahçe", en: "Fenerbahçe" },
    status: { tr: "Tamamlandı", en: "Completed" },
  },
  {
    key: "kalamis",
    lat: 40.972,
    lng: 29.0345,
    year: "2027",
    units: 12,
    category: "upcoming",
    name: { tr: "Kalamış Marina Apartmanı", en: "Kalamış Marina Apartments" },
    area: { tr: "Kalamış", en: "Kalamış" },
    status: { tr: "Yakında — 2027", en: "Upcoming — 2027" },
  },
  {
    key: "goztepe",
    lat: 40.9755,
    lng: 29.06,
    year: "2023",
    units: 14,
    category: "residential",
    name: { tr: "Göztepe Bahçe Evleri", en: "Göztepe Garden Houses" },
    area: { tr: "Göztepe", en: "Göztepe" },
    status: { tr: "Tamamlandı", en: "Completed" },
  },
  {
    key: "caddebostan",
    lat: 40.9625,
    lng: 29.064,
    year: "2026",
    units: 24,
    category: "for_sale",
    name: { tr: "Caddebostan 32", en: "Caddebostan 32" },
    area: { tr: "Caddebostan", en: "Caddebostan" },
    status: { tr: "Satışta", en: "For Sale" },
  },
  {
    key: "suadiye",
    lat: 40.9575,
    lng: 29.0855,
    year: "2024",
    units: 3,
    category: "residential",
    name: { tr: "Suadiye Köşkü", en: "Suadiye Villa" },
    area: { tr: "Suadiye", en: "Suadiye" },
    status: { tr: "Tamamlandı", en: "Completed" },
  },
  {
    key: "bostanci",
    lat: 40.951,
    lng: 29.095,
    year: "2027",
    units: 9,
    category: "commercial",
    name: { tr: "Bostancı Sahil Ofisleri", en: "Bostancı Shore Offices" },
    area: { tr: "Bostancı", en: "Bostancı" },
    status: { tr: "Yakında — 2027", en: "Upcoming — 2027" },
  },
];
const MAP_CENTER = [40.9685, 29.06];

/* ---- Projects (shared across home + projects page) ---- */
const PROJECTS = [
  {
    key: "tasevler",
    ratio: "4 / 5",
    year: "2025",
    categories: ["residential", "for_sale"],
    title: { tr: "Taş Evler Konakları", en: "Taş Evler Residences" },
    location: { tr: "Bodrum", en: "Bodrum" },
    type: { tr: "Yeni Yapı", en: "New Build" },
    status: { tr: "Tamamlandı", en: "Completed" },
    blurb: {
      tr: "Yamaca yaslanan, yerel taşla örülmüş on iki konak.",
      en: "Twelve residences set into the slope, built in local stone.",
    },
  },
  {
    key: "nisantasi",
    ratio: "4 / 5",
    year: "2026",
    categories: ["residential", "upcoming", "for_sale"],
    title: { tr: "Nişantaşı 19 Rezidans", en: "Nişantaşı 19 Residence" },
    location: { tr: "İstanbul", en: "Istanbul" },
    type: { tr: "Geliştirme", en: "Development" },
    status: { tr: "Devam ediyor — 2027", en: "In progress — 2027" },
    blurb: {
      tr: "Sokağın ölçeğine saygılı, sakin bir şehir yapısı.",
      en: "A calm urban building, faithful to the scale of the street.",
    },
  },
  {
    key: "karakoy",
    ratio: "4 / 5",
    year: "2024",
    categories: ["commercial"],
    title: { tr: "Karaköy Atölye Binası", en: "Karaköy Workshop Building" },
    location: { tr: "İstanbul", en: "Istanbul" },
    type: { tr: "Restorasyon", en: "Restoration" },
    status: { tr: "Tamamlandı", en: "Completed" },
    blurb: {
      tr: "Bir liman deposunun ışıkla yeniden tanışması.",
      en: "A harbour warehouse reacquainted with daylight.",
    },
  },
  {
    key: "alacati",
    ratio: "4 / 5",
    year: "2023",
    categories: ["residential"],
    title: { tr: "Alaçatı Sahil Evi", en: "Alaçatı Coast House" },
    location: { tr: "İzmir", en: "İzmir" },
    type: { tr: "Yeni Yapı", en: "New Build" },
    status: { tr: "Tamamlandı", en: "Completed" },
    blurb: {
      tr: "Rüzgâra ve tuza göre yontulmuş tek katlı bir ev.",
      en: "A single-storey house shaped to the wind and the salt.",
    },
  },
  {
    key: "galata",
    ratio: "4 / 5",
    year: "2022",
    categories: ["residential", "commercial"],
    title: {
      tr: "Galata Apartmanı Restorasyonu",
      en: "Galata Apartment Restoration",
    },
    location: { tr: "İstanbul", en: "Istanbul" },
    type: { tr: "Restorasyon", en: "Restoration" },
    status: { tr: "Tamamlandı", en: "Completed" },
    blurb: {
      tr: "Yüz yıllık bir cephenin sessizce onarılması.",
      en: "The quiet repair of a century-old façade.",
    },
  },
  {
    key: "cesme",
    ratio: "4 / 5",
    year: "2026",
    categories: ["residential", "upcoming", "for_sale"],
    title: { tr: "Çeşme Bağ Evi", en: "Çeşme Vineyard House" },
    location: { tr: "İzmir", en: "İzmir" },
    type: { tr: "Yeni Yapı", en: "New Build" },
    status: { tr: "Devam ediyor — 2027", en: "In progress — 2027" },
    blurb: {
      tr: "Bağların arasına yerleşen, toprak rengi bir kütle.",
      en: "An earth-toned volume settled among the vines.",
    },
  },
  {
    key: "kampus",
    ratio: "4 / 5",
    year: "2024",
    categories: ["institutional"],
    title: { tr: "Erenköy Eğitim Kampüsü", en: "Erenköy Education Campus" },
    location: { tr: "İstanbul", en: "Istanbul" },
    type: { tr: "Yeni Yapı", en: "New Build" },
    status: { tr: "Tamamlandı", en: "Completed" },
    blurb: {
      tr: "Avlular ve gün ışığı çevresinde kurgulanmış bir okul yerleşkesi.",
      en: "A school campus composed around courtyards and daylight.",
    },
  },
];

/* ---- Full bilingual copy ---- */
const I18N = {
  tr: {
    langLabel: "EN",
    nav: {
      home: "Ana Sayfa",
      sale: "Satışta Olan Projeler",
      projects: "Projeler",
      urban: "Kentsel Dönüşüm",
      about: "Hakkımızda",
      contact: "İletişim",
    },
    footer: {
      statement: "Zamana karşı değil, zamanla inşa ediyoruz.",
      menu: "Menü",
      contact: "İletişim",
      legal: "© 2026 Dervişoğlu İnşaat. Tüm hakları saklıdır.",
    },
  },
  en: {
    langLabel: "TR",
    nav: {
      home: "Home",
      sale: "Projects for Sale",
      projects: "Projects",
      urban: "Urban Transformation",
      about: "About",
      contact: "Contact",
    },
    footer: {
      statement: "We do not build against time. We build with it.",
      menu: "Menu",
      contact: "Contact",
      legal: "© 2026 Dervişoğlu İnşaat. All rights reserved.",
    },
  },
};

/* ---- Language hook (persists across pages) ---- */
function useLang() {
  const [lang, setLang] = React.useState(() => {
    try {
      return localStorage.getItem("ds_lang") || "tr";
    } catch (e) {
      return "tr";
    }
  });
  React.useEffect(() => {
    try {
      localStorage.setItem("ds_lang", lang);
    } catch (e) {}
    document.documentElement.lang = lang;
  }, [lang]);
  const toggle = () => setLang((l) => (l === "tr" ? "en" : "tr"));
  return [lang, toggle, setLang];
}

/* ---- Site navigation: centered wordmark, split links left/right ---- */
function NavLink({ l, active, onDark }) {
  const [hover, setHover] = React.useState(false);
  const isActive = active === l.key;
  const color = onDark
    ? isActive
      ? "var(--text-on-dark)"
      : "var(--text-on-dark-muted)"
    : isActive
      ? "var(--text-display)"
      : "var(--text-muted)";
  return (
    <a
      href={l.href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        fontFamily: "var(--font-sans-body)",
        fontSize: "var(--type-eyebrow)",
        fontWeight: "var(--weight-body-medium)",
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        textDecoration: "none",
        color,
        opacity: hover ? "var(--hover-dim)" : 1,
        paddingBottom: "6px",
        whiteSpace: "nowrap",
        transition:
          "opacity var(--duration-fast) var(--ease-quiet), color var(--duration-fast) var(--ease-quiet)",
      }}
    >
      {l.label}
      <span
        aria-hidden="true"
        style={{
          position: "absolute",
          left: 0,
          bottom: 0,
          height: "1px",
          width: isActive || hover ? "100%" : "0%",
          background: "var(--bronze-500)",
          transition: "width var(--duration-base) var(--ease-quiet)",
        }}
      ></span>
    </a>
  );
}

function SiteNav({
  lang,
  onToggleLang,
  active,
  onDark = false,
  hairline = true,
}) {
  const t = I18N[lang];
  const leftLinks = [
    { key: "home", label: t.nav.home, href: "index.html" },
    { key: "sale", label: t.nav.sale, href: "satista-projeler.html" },
    { key: "about", label: t.nav.about, href: "about.html" },
  ];
  const rightLinks = [
    { key: "projects", label: t.nav.projects, href: "projects.html" },
    { key: "urban", label: t.nav.urban, href: "kentsel-donusum.html" },
    { key: "contact", label: t.nav.contact, href: "contact.html" },
  ];
  return (
    <nav
      style={{
        display: "flex",
        alignItems: "center",
        gap: "var(--space-7)",
        padding: "var(--space-6) var(--page-margin)",
        boxSizing: "border-box",
        width: "100%",
        background: onDark ? "transparent" : "rgba(248, 246, 241, 0.92)",
        backdropFilter: onDark ? "none" : "blur(8px)",
        WebkitBackdropFilter: onDark ? "none" : "blur(8px)",
        borderBottom: hairline
          ? `1px solid ${onDark ? "var(--hairline-on-dark)" : "var(--hairline)"}`
          : "1px solid transparent",
      }}
    >
      <div
        style={{
          flex: "1 1 0",
          minWidth: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-start",
          gap: "var(--space-6)",
          flexWrap: "wrap",
        }}
      >
        {leftLinks.map((l) => (
          <NavLink key={l.key} l={l} active={active} onDark={onDark} />
        ))}
      </div>
      <a
        href="index.html"
        aria-label="Dervişoğlu İnşaat"
        style={{
          textDecoration: "none",
          flexShrink: 0,
          zoom: 1.9,
          lineHeight: 0,
        }}
      >
        <DS.Wordmark size="sm" stacked={false} onDark={onDark} />
      </a>
      <div
        style={{
          flex: "1 1 0",
          minWidth: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-end",
          gap: "var(--space-6)",
          flexWrap: "wrap",
        }}
      >
        {rightLinks.map((l) => (
          <NavLink key={l.key} l={l} active={active} onDark={onDark} />
        ))}
        <button
          onClick={onToggleLang}
          aria-label="Dil / Language"
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: "8px",
            background: "transparent",
            border: "none",
            cursor: "pointer",
            padding: "6px 0",
            fontFamily: "var(--font-sans-body)",
            fontSize: "var(--type-eyebrow)",
            fontWeight: "var(--weight-body-medium)",
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: onDark ? "var(--text-on-dark-muted)" : "var(--text-muted)",
            whiteSpace: "nowrap",
          }}
        >
          <span
            aria-hidden="true"
            style={{
              width: "14px",
              height: "1px",
              background: "var(--bronze-500)",
            }}
          ></span>
          {I18N[lang].langLabel}
        </button>
        <ThemeToggle lang={lang} onDark={onDark} />
      </div>
    </nav>
  );
}

/* ---- Count-up: animates a figure from 0 when scrolled into view ---- */
function CountStat({ value, label, onDark = false }) {
  const ref = React.useRef(null);
  const [n, setN] = React.useState(0);
  const target = parseInt(String(value).replace(/\D/g, ""), 10) || 0;
  const suffix = String(value).replace(/[0-9]/g, "");
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reduce =
      window.matchMedia &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) {
      setN(target);
      return;
    }
    let raf,
      started = false;
    const ease = (x) => 1 - Math.pow(1 - x, 3);
    const run = () => {
      const t0 = performance.now(),
        dur = 1500;
      const tick = (now) => {
        const p = Math.min((now - t0) / dur, 1);
        setN(Math.round(ease(p) * target));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    };
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !started) {
            started = true;
            run();
            io.disconnect();
          }
        });
      },
      { threshold: 0.4 },
    );
    io.observe(el);
    return () => {
      io.disconnect();
      if (raf) cancelAnimationFrame(raf);
    };
  }, [target]);
  return (
    <div ref={ref}>
      <DS.StatBlock value={`${n}${suffix}`} label={label} onDark={onDark} />
    </div>
  );
}

/* ---- Solution-partners strip: real brand logos ---- */
const PARTNER_LOGOS = [
  { src: "assets/uploads/artella-1.png", alt: "Artella" },
  { src: "assets/uploads/buderus-1.png", alt: "Buderus" },
  { src: "assets/uploads/schidler-1.png", alt: "Schindler" },
  { src: "assets/uploads/viesmann-1.png", alt: "Viessmann" },
];
function Partners({ lang }) {
  const heading = lang === "tr" ? "Çözüm Ortaklarımız" : "Solution Partners";
  const lead =
    lang === "tr"
      ? "İç mekân sistemlerinde — asansörden ısıtma sistemlerine — birlikte çalıştığımız markalar."
      : "The brands we build with across interior systems — from elevators to heating.";
  return (
    <section
      style={{
        background: "var(--surface-page)",
        borderTop: "1px solid var(--hairline)",
        padding: "var(--space-9) var(--page-margin)",
        boxSizing: "border-box",
      }}
    >
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto" }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-end",
            gap: "var(--space-7)",
            flexWrap: "wrap",
            marginBottom: "var(--space-7)",
          }}
        >
          <span
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "var(--space-3)",
              fontFamily: "var(--font-sans-body)",
              fontSize: "var(--type-eyebrow)",
              fontWeight: "var(--weight-body-medium)",
              letterSpacing: "var(--tracking-eyebrow)",
              textTransform: "uppercase",
              color: "var(--text-accent)",
            }}
          >
            <span
              aria-hidden="true"
              style={{
                width: "28px",
                height: "1px",
                background: "var(--bronze-500)",
              }}
            ></span>
            {heading}
          </span>
          <p
            style={{
              fontFamily: "var(--font-sans-body)",
              fontWeight: "var(--weight-body-light)",
              fontSize: "var(--type-small)",
              lineHeight: 1.65,
              color: "var(--text-muted)",
              margin: 0,
              maxWidth: "46ch",
              textAlign: "right",
            }}
          >
            {lead}
          </p>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: "1px",
            background: "var(--hairline)",
            border: "1px solid var(--hairline)",
          }}
        >
          {PARTNER_LOGOS.map((logo, i) => (
            <div
              key={i}
              style={{
                background: "var(--surface-page)",
                height: "132px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                padding: "var(--space-3) var(--space-4)",
                boxSizing: "border-box",
              }}
            >
              <img
                src={logo.src}
                alt={logo.alt}
                loading="lazy"
                className="partner-logo"
                style={{
                  maxWidth: "100%",
                  maxHeight: "100%",
                  width: "100%",
                  objectFit: "contain",
                  mixBlendMode: "multiply",
                  filter: "grayscale(1)",
                  opacity: 0.62,
                  transition:
                    "filter var(--duration-base) var(--ease-quiet), opacity var(--duration-base) var(--ease-quiet)",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.filter = "grayscale(0)";
                  e.currentTarget.style.opacity = "1";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.filter = "grayscale(1)";
                  e.currentTarget.style.opacity = "0.62";
                }}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Footer with language-aware copy + page links ---- */
function SiteFooter({ lang }) {
  const t = I18N[lang];
  return (
    <React.Fragment>
      <Partners lang={lang} />
      <DS.Footer
        statement={t.footer.statement}
        legal={t.footer.legal}
        columns={[
          {
            title: t.footer.menu,
            links: [
              { label: t.nav.sale, href: "satista-projeler.html" },
              { label: t.nav.projects, href: "projects.html" },
              { label: t.nav.urban, href: "kentsel-donusum.html" },
              { label: t.nav.about, href: "about.html" },
            ],
          },
          {
            title: t.footer.contact,
            links: [
              {
                label: "info@dervisogluinsaat.com",
                href: "mailto:info@dervisogluinsaat.com",
              },
              { label: "+90 212 000 00 00", href: "tel:+902120000000" },
              {
                label:
                  lang === "tr" ? "Karaköy, İstanbul" : "Karaköy, Istanbul",
                href: "contact.html",
              },
            ],
          },
        ]}
      />
    </React.Fragment>
  );
}

Object.assign(window, {
  DS,
  PROJECTS,
  PROJECT_CATS,
  MAP_SITES,
  MAP_CENTER,
  I18N,
  useLang,
  SiteNav,
  SiteFooter,
  CountStat,
});