// ─────────── Shared components (Header, Footer, Logo, Placeholder) ───────────

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

/* tiny logo mark */
function Mark({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      {/* mountain / A monogram — Anadolu mark */}
      <rect x="0.5" y="0.5" width="31" height="31" stroke="currentColor" strokeOpacity="0.5" />
      <path d="M4 24 L12 8 L16 16 L20 11 L28 24 Z" fill="currentColor" />
      <path d="M4 24 L28 24" stroke="var(--accent)" strokeWidth="1.5" />
    </svg>
  );
}

function Logo({ compact = false }) {
  const t = window.__T;
  return (
    <a href="#/" className="logo" style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <Mark size={32} />
      {!compact && (
        <div style={{ lineHeight: 1, display: "flex", flexDirection: "column", gap: 4 }}>
          <span style={{
            fontFamily: "var(--font-display)",
            fontWeight: 600,
            fontSize: 18,
            letterSpacing: "0.04em",
            textTransform: "uppercase",
          }}>{t.brand}</span>
          <span style={{
            fontFamily: "var(--font-mono)",
            fontSize: 9.5,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: "var(--text-mute)",
          }}>{t.common.since} · İnşaat Malz.</span>
        </div>
      )}
    </a>
  );
}

/* placeholder image — striped + monospace label */
function PH({ label = "PHOTO", aspect = "16/10", code, scale = "site", width, height }) {
  return (
    <div className="ph" style={{ aspectRatio: aspect, width: width || "100%", height: height || undefined }}>
      <div style={{
        position: "absolute", top: 12, left: 12, right: 12,
        display: "flex", justifyContent: "space-between",
        fontFamily: "var(--font-mono)", fontSize: 10,
        letterSpacing: "0.14em", color: "var(--text-mute)", zIndex: 2,
      }}>
        <span>{code || "—"}</span>
        <span>{scale}</span>
      </div>
      <span>{label}</span>
      <div style={{
        position: "absolute", bottom: 12, left: 12, right: 12,
        display: "flex", justifyContent: "space-between",
        fontFamily: "var(--font-mono)", fontSize: 9.5,
        letterSpacing: "0.16em", color: "var(--text-dim)", zIndex: 2,
      }}>
        <span>▢ DROP PHOTO</span>
        <span>1920×1200</span>
      </div>
    </div>
  );
}

/* fade-in observer */
function Fade({ children, delay = 0 }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setTimeout(() => setShown(true), delay);
            io.disconnect();
          }
        });
      },
      { rootMargin: "0px 0px -8% 0px", threshold: 0.05 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return (
    <div ref={ref} className={`fade ${shown ? "in" : ""}`}>
      {children}
    </div>
  );
}

/* Arrow icon */
function Arr({ size = 12 }) {
  return (
    <svg className="arr" width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M1 7 H13 M9 3 L13 7 L9 11" stroke="currentColor" strokeWidth="1.4" fill="none" />
    </svg>
  );
}

/* Header / global nav */
function Header({ route, setRoute, lang, setLang }) {
  const t = window.__T;
  const items = [
    ["home", t.nav.home],
    ["about", t.nav.about],
    ["products", t.nav.products],
    ["projects", t.nav.projects],
    ["contact", t.nav.contact],
  ];
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      {/* top utility bar */}
      <div style={{
        position: "relative", zIndex: 80,
        borderBottom: "1px solid var(--line)",
        background: "var(--bg)",
        fontFamily: "var(--font-mono)", fontSize: 10.5,
        letterSpacing: "0.14em", textTransform: "uppercase",
        color: "var(--text-mute)",
      }}>
        <div className="container" style={{
          display: "flex", justifyContent: "space-between",
          alignItems: "center", padding: "9px var(--pad)",
        }}>
          <span>Hat: 0212 653 53 00 · Pzt–Cmt 08:00–18:00</span>
          <div style={{ display: "flex", gap: 18, alignItems: "center" }}>
            <span>Bahçelievler / İstanbul · Türkiye Geneli Teslimat</span>
            <div className="lang-toggle">
              {["tr", "en"].map((l) => (
                <button
                  key={l}
                  onClick={() => setLang(l)}
                  className={lang === l ? "act" : ""}
                  style={{
                    background: "none", border: 0, padding: "4px 6px",
                    color: lang === l ? "var(--accent)" : "var(--text-mute)",
                    fontFamily: "inherit", fontSize: "inherit", letterSpacing: "inherit",
                    textTransform: "inherit", cursor: "pointer",
                  }}
                >
                  {l.toUpperCase()}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>

      <header className={`hdr ${scrolled ? "scrolled" : ""}`}>
        <div className="container hdr-inner">
          <Logo />
          <nav className="nav-main">
            {items.map(([id, label]) => (
              <a
                key={id}
                href={`#/${id}`}
                onClick={(e) => { e.preventDefault(); setRoute(id); }}
                className={route === id ? "act" : ""}
              >
                <span className="n-idx">/{String(items.findIndex(i => i[0] === id) + 1).padStart(2, "0")}</span>
                <span className="n-lbl">{label}</span>
              </a>
            ))}
          </nav>
          <div className="hdr-cta">
            <button className="btn solid" onClick={() => setRoute("quote")}>
              {t.nav.quote} <Arr />
            </button>
            <button
              className="burger"
              onClick={() => setMobileOpen((v) => !v)}
              aria-label="Menu"
            >
              <span /><span /><span />
            </button>
          </div>
        </div>
        {mobileOpen && (
          <div className="mobile-menu">
            {items.map(([id, label]) => (
              <a key={id} href={`#/${id}`}
                onClick={(e) => { e.preventDefault(); setRoute(id); setMobileOpen(false); }}>
                {label}
              </a>
            ))}
            <button className="btn solid" onClick={() => { setRoute("quote"); setMobileOpen(false); }}>
              {t.nav.quote}
            </button>
          </div>
        )}
      </header>
    </>
  );
}

/* Footer */
function Footer({ setRoute }) {
  const t = window.__T;
  return (
    <footer className="ftr">
      <div className="container">
        <div className="ftr-top">
          <div className="ftr-brand">
            <Logo />
            <p style={{ color: "var(--text-mute)", maxWidth: 360, marginTop: 18 }}>
              {t.footer.tag}.
            </p>
            <div className="row" style={{ marginTop: 24 }}>
              <span className="tag">CE</span>
              <span className="tag">TSE</span>
              <span className="tag">ISO 9001</span>
              <span className="tag">ISO 14001</span>
              <span className="tag">OHSAS 18001</span>
            </div>
          </div>

          <div className="ftr-cols">
            <div>
              <div className="ftr-h">{t.footer.cols.nav}</div>
              {[
                ["home", t.nav.home],
                ["about", t.nav.about],
                ["products", t.nav.products],
                ["projects", t.nav.projects],
                ["contact", t.nav.contact],
                ["quote", t.nav.quote],
              ].map(([id, label]) => (
                <a key={id} href={`#/${id}`} onClick={(e) => { e.preventDefault(); setRoute(id); }}>
                  {label}
                </a>
              ))}
            </div>
            <div>
              <div className="ftr-h">{t.footer.cols.contact}</div>
              <a href="tel:02126535300">0212 653 53 00</a>
              <a href="mailto:info@anadoluinsaat.com">info@anadoluinsaat.com</a>
              <a>Yenibosna Merkez Mah., Ayvaz Cami Sok., No:1/A</a>
              <a>Bahçelievler / İstanbul</a>
            </div>
            <div>
              <div className="ftr-h">{t.footer.cols.legal}</div>
              {t.footer.legal.map((x) => <a key={x}>{x}</a>)}
              <a>Bayilik Başvurusu</a>
              <a>Tedarikçi Portalı</a>
            </div>
          </div>
        </div>

        <div className="ftr-mark">
          <div style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(60px, 13vw, 220px)",
            lineHeight: 0.85,
            letterSpacing: "-0.02em",
            color: "var(--bg-2)",
            textTransform: "uppercase",
            whiteSpace: "nowrap",
            overflow: "hidden",
            paddingTop: 60,
            paddingBottom: 30,
            borderTop: "1px solid var(--line)",
            marginTop: 60,
          }}>
            ANADOLU İNŞAAT
          </div>
        </div>

        <div className="ftr-base">
          <span>{t.footer.copy}</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-dim)" }}>
            v.2026.04 · Made in İstanbul
          </span>
        </div>
      </div>
    </footer>
  );
}

/* expose globals */
Object.assign(window, { Mark, Logo, PH, Fade, Arr, Header, Footer });