/* ============================================================
   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;
}
html{transition:background-color .45s var(--ease-quiet,ease);}
`;
  document.head.appendChild(s);
})();

/* ---- Tracks the live theme so nav coloring can react to it directly ---- */
function useIsDarkTheme() {
  const [dark, setDark] = React.useState(() => document.documentElement.dataset.theme === "dark");
  React.useEffect(() => {
    const obs = new MutationObserver(() => setDark(document.documentElement.dataset.theme === "dark"));
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
    return () => obs.disconnect();
  }, []);
  return dark;
}

/* ---- Theme toggle: persists across pages, mirrors the language button ---- */
function ThemeToggle({ lang, onDark = false, onSelect }) {
  /* Reads/writes the document attribute directly rather than mirroring it
     through local state + an effect: this button can be unmounted (menu
     closing) in the very same click that toggles it, and a state update
     queued on an about-to-unmount component is dropped before its effect
     ever runs. Writing straight to the DOM + localStorage is synchronous,
     so the theme change lands even when onSelect closes the menu at once. */
  const dark = useIsDarkTheme();
  const toggle = () => {
    const next = !dark;
    if (next) document.documentElement.dataset.theme = "dark";
    else delete document.documentElement.dataset.theme;
    try { localStorage.setItem("ds_theme", next ? "dark" : "light"); } catch (e) {}
  };
  const label = dark ? (lang === "tr" ? "Açık" : "Light") : (lang === "tr" ? "Koyu" : "Dark");
  return (
    <button onClick={() => { toggle(); onSelect && onSelect(); }} 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.0240, 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.9840, 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.0380, 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.9720, 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.0600, 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.0640, 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.9510, lng: 29.0950, 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.060];

/* ---- 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>
  );
}

/* ---- Side menu: language + theme, tucked behind a two-line toggle ----
   Controlled by the parent nav so the bar can react to the menu being open
   (same as hover) and can be forced back to idle the moment a language or
   theme is picked. */
function SideMenu({ lang, onToggleLang, onDark, open, onOpenChange, onSelect }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) onOpenChange(false); };
    document.addEventListener("mousedown", onDoc);
    const onEsc = (e) => { if (e.key === "Escape") onOpenChange(false); };
    document.addEventListener("keydown", onEsc);
    return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onEsc); };
  }, [open, onOpenChange]);
  const lineColor = onDark ? "var(--text-on-dark)" : "var(--text-display)";
  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button onClick={() => onOpenChange(!open)} aria-label={lang === "tr" ? "Ayarlar" : "Settings"} aria-expanded={open} style={{
        display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "flex-end", gap: "5px",
        width: "26px", height: "20px", background: "transparent", border: "none", cursor: "pointer", padding: 0,
      }}>
        <span aria-hidden="true" style={{ display: "block", width: "100%", height: "1px", background: lineColor, transition: "background var(--duration-base) var(--ease-quiet)" }}></span>
        <span aria-hidden="true" style={{ display: "block", width: "70%", height: "1px", background: lineColor, transition: "background var(--duration-base) var(--ease-quiet)" }}></span>
      </button>
      {open && (
        <div style={{
          position: "absolute", top: "calc(100% + 18px)", right: 0, minWidth: "180px",
          background: "var(--surface-page)", border: "1px solid var(--hairline)", boxShadow: "var(--shadow-overlay)",
          padding: "var(--space-5)", display: "flex", flexDirection: "column", gap: "var(--space-5)", zIndex: 30,
        }}>
          <button onClick={() => { onToggleLang(); onSelect(); }} style={{
            display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-4)",
            background: "transparent", border: "none", cursor: "pointer", padding: 0, textAlign: "left",
            fontFamily: "var(--font-sans-body)", fontSize: "var(--type-eyebrow)", fontWeight: "var(--weight-body-medium)",
            letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)",
          }}>
            <span>{lang === "tr" ? "Dil" : "Language"}</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: "8px", color: "var(--text-display)" }}>
              <span aria-hidden="true" style={{ width: "14px", height: "1px", background: "var(--bronze-500)" }}></span>
              {I18N[lang].langLabel}
            </span>
          </button>
          <div style={{ borderTop: "1px solid var(--hairline)", paddingTop: "var(--space-5)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span style={{
              fontFamily: "var(--font-sans-body)", fontSize: "var(--type-eyebrow)", fontWeight: "var(--weight-body-medium)",
              letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)",
            }}>{lang === "tr" ? "Tema" : "Theme"}</span>
            <ThemeToggle lang={lang} onDark={false} onSelect={onSelect} />
          </div>
        </div>
      )}
    </div>
  );
}

function SiteNav({ lang, onToggleLang, active, onDark = false, hairline = true }) {
  const t = I18N[lang];
  const [navHover, setNavHover] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const barActive = navHover || menuOpen;
  const closeMenuAndIdle = () => { setMenuOpen(false); setNavHover(false); };
  const isDarkTheme = useIsDarkTheme();
  /* Text always needs to read against whatever is actually behind the bar,
     not just the theme in the abstract:
     - onDark (Hero, sat over a photo): idle text is a distinct navy — never
       the near-black ink-900 — regardless of theme; it only flips to white
       when the site's dark theme is active AND the bar is hovered (the
       panel turns navy then, so white is needed for contrast).
     - interior pages (nav sits flush on var(--surface-page)): that surface
       flips light/dark with the theme, and the bar's own idle/hover
       background always matches it — so text should just track the theme,
       navy on the light page, white on the dark one, regardless of hover. */
  const brightText = onDark ? (isDarkTheme && barActive) : isDarkTheme;
  const effectiveOnDark = brightText;
  const navFg = brightText ? "#f4f2ed" : "var(--ink-700)";
  const navFgMuted = brightText ? "rgba(244, 242, 237, 0.72)" : "var(--ink-500)";
  const leftLinks = [
    { 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: "contact", label: t.nav.contact, href: "contact.html" },
  ];
  return (
    <nav
      onMouseEnter={() => setNavHover(true)} onMouseLeave={() => setNavHover(false)}
      style={{
      display: "flex", alignItems: "center", gap: "var(--space-7)",
      padding: "var(--space-6) var(--page-margin)", boxSizing: "border-box", width: "100%",
      background: barActive ? "var(--surface-page)" : "transparent",
      backdropFilter: barActive ? "blur(8px)" : "none", WebkitBackdropFilter: barActive ? "blur(8px)" : "none",
      borderBottom: hairline ? `1px solid ${barActive ? "var(--hairline)" : "transparent"}` : "1px solid transparent",
      transition: "background var(--duration-base) var(--ease-quiet), border-color var(--duration-base) var(--ease-quiet)",
      "--text-display": navFg, "--text-on-dark": navFg,
      "--text-muted": navFgMuted, "--text-on-dark-muted": navFgMuted,
    }}>
      <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={effectiveOnDark} />)}
      </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={effectiveOnDark} />
      </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={effectiveOnDark} />)}
        <SideMenu lang={lang} onToggleLang={onToggleLang} onDark={effectiveOnDark} open={menuOpen} onOpenChange={setMenuOpen} onSelect={closeMenuAndIdle} />
      </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: "uploads/artella-1.png",  alt: "Artella" },
  { src: "uploads/buderus-1.png",  alt: "Buderus" },
  { src: "uploads/schidler-1.png", alt: "Schindler" },
  { src: "uploads/viesmann-1.png", alt: "Viessmann" },
];
/* Every logo file is a solid-white box with a colored mark. In light theme
   mix-blend-mode:multiply erases the white box against the light page. In
   dark theme multiply would crush the colored marks toward black instead, so
   idle uses invert+grayscale (white box -> black, marks -> light grey) with
   mix-blend-mode:screen (erases the now-black box, keeps the grey marks
   visible) — giving every logo the same flat, light-grey ghost look. Hover
   always drops to the true-color mark, full opacity. */
function PartnerLogo({ logo, isDarkTheme }) {
  const [hover, setHover] = React.useState(false);
  const idle = isDarkTheme
    ? { filter: "grayscale(1) invert(1)", opacity: 0.55, mixBlendMode: "screen" }
    : { filter: "grayscale(1)", opacity: 0.62, mixBlendMode: "multiply" };
  const shown = hover ? { filter: "none", opacity: 1, mixBlendMode: "normal" } : idle;
  return (
    <img src={logo.src} alt={logo.alt} loading="lazy"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        maxWidth: "100%", maxHeight: "100%", width: "100%", objectFit: "contain",
        transition: "filter var(--duration-base) var(--ease-quiet), opacity var(--duration-base) var(--ease-quiet)",
        ...shown,
      }} />
  );
}
function Partners({ lang }) {
  const isDarkTheme = useIsDarkTheme();
  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" }}>
              <PartnerLogo logo={logo} isDarkTheme={isDarkTheme} />
            </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" },
          { label: t.nav.contact, href: "contact.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 });