/* ============================================================
   Shared components — Header, Footer, MobileBar, etc.
   ============================================================ */

const PHONE_DISPLAY = "0474 223 16 20";
const PHONE_LINK = "tel:+904742231620";
const PHONE_MOBILE_1 = "0538 772 89 20";
const PHONE_MOBILE_1_LINK = "tel:+905387728920";
const PHONE_MOBILE_2 = "0553 113 80 25";
const PHONE_MOBILE_2_LINK = "tel:+905531138025";
const WHATSAPP_DISPLAY = "0554 193 97 36";
const WHATSAPP_LINK = "https://wa.me/905541939736";
const BRAND = "Taner Elektronik";
const BRAND_FULL = "Taner Elektronik · Baymak Yetkili Servisi";
const CONTACT_NAME = "Taner Kaya";
const TAGLINE = "Kars Baymak Yetkili Servisi";

const NAV = [
  { id: "home", label: "Ana Sayfa" },
  { id: "hizmetler", label: "Hizmetler" },
  { id: "kombi", label: "Kombi Servisi" },
  { id: "sss", label: "Sık Sorulan Sorular" },
  { id: "iletisim", label: "İletişim" },
];

/* -------- Logo ------------------------------------- */
function Logo({ size = 44, dark = false }) {
  if (dark) {
    // Footer / dark surface: text-only treatment
    return (
      <a
        href="#home"
        onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("nav", { detail: "home" })); }}
        style={{
          display: "inline-flex", alignItems: "center", gap: 12,
          textDecoration: "none", color: "#fff",
        }}
        aria-label={BRAND_FULL}
      >
        <span style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
          <span style={{ fontWeight: 800, fontSize: 22, letterSpacing: "-0.025em" }}>TANER ELEKTRONİK</span>
          <span style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.65)", marginTop: 6, fontWeight: 700 }}>
            BAYMAK YETKİLİ SERVİSİ · KARS
          </span>
        </span>
      </a>
    );
  }
  // Header / light surface: brand image logo
  return (
    <a
      href="#home"
      onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("nav", { detail: "home" })); }}
      style={{
        display: "inline-flex", alignItems: "center",
        textDecoration: "none",
      }}
      aria-label={BRAND_FULL}
    >
      <img
        src="assets/logo.png"
        alt={BRAND_FULL}
        style={{ height: size, width: "auto", display: "block" }}
      />
    </a>
  );
}

/* -------- Header ----------------------------------- */
function Header({ current, onNav }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
    {/* Top announcement strip */}
    <div style={{
      background: "var(--green-800)",
      color: "rgba(255,255,255,0.95)",
      fontSize: 13,
      fontWeight: 600,
      letterSpacing: "-0.005em",
    }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, height: 38 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
          <Icon.Shield width="14" height="14" style={{ flexShrink: 0, color: "oklch(85% 0.08 155)" }} />
          <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
            Kars'ta Baymak Yetkili Kombi &amp; Klima Servisi
          </span>
        </div>
        <div className="hide-mobile" style={{ display: "flex", alignItems: "center", gap: 16, color: "rgba(255,255,255,0.85)", fontWeight: 500 }}>
          <a href={PHONE_LINK} style={{ color: "inherit", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Icon.Phone width="13" height="13" /> <span className="tel" style={{ fontWeight: 700 }}>{PHONE_DISPLAY}</span>
          </a>
          <span style={{ width: 1, height: 14, background: "rgba(255,255,255,0.18)" }} />
          <a href={WHATSAPP_LINK} target="_blank" rel="noreferrer" style={{ color: "inherit", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Icon.Whatsapp width="13" height="13" /> <span className="tel" style={{ fontWeight: 700 }}>{WHATSAPP_DISPLAY}</span>
          </a>
        </div>
      </div>
    </div>
    <header
      style={{
        position: "sticky", top: 0, zIndex: 40,
        background: scrolled ? "rgba(255,255,255,0.86)" : "rgba(255,255,255,0.6)",
        backdropFilter: "saturate(140%) blur(14px)",
        WebkitBackdropFilter: "saturate(140%) blur(14px)",
        borderBottom: `1px solid ${scrolled ? "var(--line)" : "transparent"}`,
        transition: "background 200ms ease, border-color 200ms ease",
      }}
    >
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 96 }}>
        <Logo size={72} />
        <nav className="hide-mobile" style={{ display: "flex", gap: 4 }}>
          {NAV.map((item) => (
            <button
              key={item.id}
              onClick={() => onNav(item.id)}
              className="btn btn-ghost btn-sm"
              style={{
                color: current === item.id ? "var(--green-800)" : "var(--ink-soft)",
                background: current === item.id ? "var(--green-100)" : "transparent",
                fontWeight: current === item.id ? 700 : 500,
              }}
            >
              {item.label}
            </button>
          ))}
        </nav>
        <div className="row hide-mobile" style={{ gap: 10 }}>
          <a className="btn btn-secondary btn-sm" href={PHONE_LINK} style={{ gap: 8 }}>
            <Icon.Phone width="16" height="16" />
            <span className="tel" style={{ fontWeight: 700 }}>{PHONE_DISPLAY}</span>
          </a>
          <button className="btn btn-primary btn-sm" onClick={() => window.dispatchEvent(new CustomEvent("open-chat"))}>
            Servis Talep Et
          </button>
        </div>
        <button
          className="btn btn-ghost btn-sm only-mobile"
          onClick={() => setMenuOpen((v) => !v)}
          aria-label="Menü"
          style={{ padding: 8, height: 40, width: 40 }}
        >
          {menuOpen ? <Icon.Close width="22" height="22" /> : <Icon.Menu width="22" height="22" />}
        </button>
      </div>
      {menuOpen && (
        <div className="only-mobile" style={{ borderTop: "1px solid var(--line)", background: "var(--bg-elev)" }}>
          <div className="container" style={{ padding: "16px 20px 24px", display: "flex", flexDirection: "column", gap: 4 }}>
            {NAV.map((item) => (
              <button
                key={item.id}
                onClick={() => { onNav(item.id); setMenuOpen(false); }}
                style={{
                  textAlign: "left", padding: "14px 12px",
                  border: 0, background: current === item.id ? "var(--green-100)" : "transparent",
                  borderRadius: "var(--r-md)",
                  font: "inherit", fontSize: 16, fontWeight: 600,
                  color: current === item.id ? "var(--green-800)" : "var(--ink)",
                  cursor: "pointer",
                }}
              >
                {item.label}
              </button>
            ))}
            <div style={{ height: 1, background: "var(--line)", margin: "8px 0" }} />
            <a className="btn btn-primary" href={PHONE_LINK} style={{ justifyContent: "center", width: "100%" }}>
              <Icon.Phone width="18" height="18" />
              <span className="tel">{PHONE_DISPLAY}</span>
            </a>
          </div>
        </div>
      )}
    </header>
    </>
  );
}

/* -------- Mobile bottom bar ------------------------ */
function MobileBar() {
  return (
    <nav className="mobile-bar" aria-label="Hızlı işlemler">
      <a className="primary" href={PHONE_LINK}>
        <Icon.Phone width="20" height="20" />
        <span>Ara</span>
      </a>
      <a className="wa" href={WHATSAPP_LINK} target="_blank" rel="noreferrer">
        <Icon.Whatsapp width="20" height="20" />
        <span>WhatsApp</span>
      </a>
      <a href="https://maps.google.com" target="_blank" rel="noreferrer">
        <Icon.MapPin width="20" height="20" />
        <span>Yol Tarifi</span>
      </a>
    </nav>
  );
}

/* -------- Footer ----------------------------------- */
function Footer({ onNav }) {
  return (
    <footer style={{ background: "var(--green-900)", color: "rgba(255,255,255,0.85)", marginTop: 64 }}>
      <div className="container" style={{ padding: "72px 28px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48 }}
             className="footer-grid">
          <div>
            <Logo dark size={40} />
            <p style={{ marginTop: 18, lineHeight: 1.55, color: "rgba(255,255,255,0.7)", maxWidth: 320 }}>
              Kars merkez ve ilçelerinde Baymak yetkili kombi, klima ve petek temizliği hizmeti veren teknik servis.
            </p>
            <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 10 }}>
              <a href={PHONE_LINK} style={{ color: "#fff", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10, fontSize: 18, fontWeight: 700 }}>
                <Icon.Phone width="18" height="18" /> <span className="tel">{PHONE_DISPLAY}</span>
              </a>
              <a href={PHONE_MOBILE_1_LINK} style={{ color: "rgba(255,255,255,0.78)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10, fontSize: 14 }}>
                <Icon.Phone width="14" height="14" /> <span className="tel">{PHONE_MOBILE_1}</span> <span style={{ color: "rgba(255,255,255,0.5)" }}>· cep</span>
              </a>
              <a href={PHONE_MOBILE_2_LINK} style={{ color: "rgba(255,255,255,0.78)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10, fontSize: 14 }}>
                <Icon.Phone width="14" height="14" /> <span className="tel">{PHONE_MOBILE_2}</span> <span style={{ color: "rgba(255,255,255,0.5)" }}>· cep</span>
              </a>
              <a href={WHATSAPP_LINK} target="_blank" rel="noreferrer" style={{ color: "rgba(255,255,255,0.78)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10, fontSize: 14 }}>
                <Icon.Whatsapp width="14" height="14" /> <span className="tel">{WHATSAPP_DISPLAY}</span> <span style={{ color: "rgba(255,255,255,0.5)" }}>· WhatsApp</span>
              </a>
            </div>
          </div>

          <FooterCol title="Hizmetler" items={[
            "Kombi bakım, onarım, arıza",
            "Duvar tipi yoğuşmalı kazan",
            "Hidrofor bakım & onarım",
            "Klima montaj & arıza",
            "Petek tesisatı yıkama",
            "Orijinal yedek parça",
          ]} />
          <FooterCol title="Sayfalar" items={NAV.map((n) => n.label)} onClick={(i) => onNav(NAV[i].id)} />
          <FooterCol title="Hizmet Bölgesi" items={[
            "Kars Merkez",
            "Selim",
            "Kağızman",
            "Susuz",
            "Arpaçay",
            "Akyaka",
            "Digor",
          ]} />
        </div>

        <div style={{
          marginTop: 56, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.12)",
          display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "space-between", alignItems: "center",
          fontSize: 13, color: "rgba(255,255,255,0.55)",
        }}>
          <span>
            Site tasarımı &amp;{" "}
            <a href="https://crescent.tr" target="_blank" rel="noreferrer"
               style={{ color: "rgba(255,255,255,0.85)", textDecoration: "none", fontWeight: 600, borderBottom: "1px solid rgba(255,255,255,0.3)" }}>
              © 2026 Crescent Creative
            </a>
          </span>
          <span>© 2026 {BRAND_FULL} · Firma yetkilisi: {CONTACT_NAME}</span>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 520px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}
function FooterCol({ title, items, onClick }) {
  return (
    <div>
      <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map((it, i) => (
          <li key={i}>
            {onClick ? (
              <button onClick={() => onClick(i)} style={{ all: "unset", cursor: "pointer", color: "rgba(255,255,255,0.78)" }}>
                {it}
              </button>
            ) : (
              <a href="#" onClick={(e) => e.preventDefault()} style={{ color: "rgba(255,255,255,0.78)", textDecoration: "none" }}>{it}</a>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

/* -------- Service Card ----------------------------- */
function ServiceCard({ icon: I, title, desc, tone = "default", onRequest }) {
  return (
    <div className="card lift" style={{
      padding: 28, display: "flex", flexDirection: "column", gap: 16,
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        width: 52, height: 52, borderRadius: 14,
        background: tone === "warm" ? "color-mix(in oklch, var(--accent) 18%, white)" : "var(--green-100)",
        color: tone === "warm" ? "oklch(48% 0.15 65)" : "var(--green-800)",
        display: "grid", placeItems: "center",
        border: `1px solid ${tone === "warm" ? "color-mix(in oklch, var(--accent) 30%, white)" : "var(--green-200)"}`,
      }}>
        <I width="26" height="26" />
      </div>
      <div>
        <h3 className="u-h3" style={{ margin: 0 }}>{title}</h3>
        <p style={{ margin: "8px 0 0", color: "var(--ink-soft)", fontSize: 14.5, lineHeight: 1.5 }}>{desc}</p>
      </div>
      <button
        onClick={onRequest}
        className="btn btn-ghost btn-sm"
        style={{ alignSelf: "flex-start", padding: "0 12px", marginTop: "auto", color: "var(--green-800)", fontWeight: 700 }}
      >
        Servis Talep Et <Icon.ArrowRight width="14" height="14" />
      </button>
    </div>
  );
}

/* -------- FAQ Accordion ---------------------------- */
function FAQ({ items, defaultOpen = -1 }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div className="card" style={{ overflow: "hidden" }}>
      {items.map((q, i) => {
        const isOpen = open === i;
        return (
          <div key={i} style={{ borderTop: i === 0 ? 0 : "1px solid var(--line)" }}>
            <button
              onClick={() => setOpen(isOpen ? -1 : i)}
              style={{
                all: "unset", cursor: "pointer", boxSizing: "border-box",
                display: "flex", alignItems: "center", justifyContent: "space-between",
                gap: 16, padding: "22px 24px", width: "100%",
                fontWeight: 600, fontSize: 16.5, color: "var(--ink)",
              }}
              aria-expanded={isOpen}
            >
              <span style={{ flex: 1, textWrap: "balance" }}>{q.q}</span>
              <span style={{
                width: 32, height: 32, borderRadius: "50%",
                background: isOpen ? "var(--green-700)" : "var(--green-100)",
                color: isOpen ? "#fff" : "var(--green-800)",
                display: "grid", placeItems: "center",
                transition: "all 200ms ease",
                transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
                flexShrink: 0,
              }}>
                <Icon.ChevronDown width="16" height="16" />
              </span>
            </button>
            <div style={{
              maxHeight: isOpen ? 400 : 0,
              overflow: "hidden",
              transition: "max-height 320ms cubic-bezier(0.2, 0.7, 0.2, 1)",
            }}>
              <div style={{ padding: "0 24px 24px", color: "var(--ink-soft)", lineHeight: 1.6, fontSize: 15.5, maxWidth: 720 }}>
                {q.a}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* -------- Stat / Badge tile ------------------------ */
function StatTile({ icon: I, title, sub }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 14, padding: "16px 18px",
      background: "var(--bg-elev)", border: "1px solid var(--line)",
      borderRadius: "var(--r-md)",
    }}>
      <span style={{
        width: 40, height: 40, borderRadius: 10,
        background: "var(--green-100)", color: "var(--green-800)",
        display: "grid", placeItems: "center", flexShrink: 0,
      }}>
        <I width="20" height="20" />
      </span>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
        <strong style={{ fontSize: 15.5, letterSpacing: "-0.01em" }}>{title}</strong>
        <span style={{ fontSize: 13, color: "var(--ink-mute)", marginTop: 2 }}>{sub}</span>
      </div>
    </div>
  );
}

/* -------- Section header --------------------------- */
function SectionHead({ eyebrow, title, lede, align = "left" }) {
  return (
    <div className="section-head" style={{ textAlign: align, marginInline: align === "center" ? "auto" : undefined }}>
      {eyebrow && <div className="u-eyebrow" style={{ marginBottom: 12 }}>{eyebrow}</div>}
      <h2 className="u-h1" style={{ margin: 0 }}>{title}</h2>
      {lede && <p className="u-lede" style={{ marginTop: 16, marginBottom: 0 }}>{lede}</p>}
    </div>
  );
}

Object.assign(window, { Logo, Header, MobileBar, Footer, ServiceCard, FAQ, StatTile, SectionHead, PHONE_DISPLAY, PHONE_LINK, PHONE_MOBILE_1, PHONE_MOBILE_1_LINK, PHONE_MOBILE_2, PHONE_MOBILE_2_LINK, WHATSAPP_DISPLAY, WHATSAPP_LINK, BRAND, BRAND_FULL, CONTACT_NAME, TAGLINE, NAV });
