/* ============================================================
   Screens — Home, KombiServisi, SSS, Iletisim
   ============================================================ */

const FAQ_ITEMS = [
  {
    q: "Kombi yıllık bakımı ne sıklıkla yapılmalı?",
    a: "Üretici firmaların ortak tavsiyesi yılda bir kez, ideal olarak ısıtma sezonu başlamadan önce (Eylül–Ekim) bakım yaptırmaktır. Kars gibi kışın uzun sürdüğü bölgelerde bu, hem can güvenliği hem de yakıt tasarrufu açısından kritik bir bakımdır.",
  },
  {
    q: "Kombim çalışmıyor — ne kadar sürede gelebilirsiniz?",
    a: "Kars merkez içinde mesai saatleri içinde ortalama 60–90 dakika içinde adresinize ulaşıyoruz. İlçeler için aynı gün ya da ertesi gün servis veriyoruz. Acil durumlar için 7/24 nöbetçi servis numaramız aktiftir.",
  },
  {
    q: "Servis ücretiniz ne kadar?",
    a: "Arıza tespiti için sabit bir keşif ücreti alıyoruz; işlem onaylandığında bu ücret hizmet bedelinden düşülüyor. Tüm fiyatları işleme başlamadan yazılı olarak onayınıza sunuyoruz — sürpriz fatura yok.",
  },
  {
    q: "Garanti süreniz nedir?",
    a: "Değişen orijinal yedek parçalar 24 ay üretici garantisi kapsamındadır. Garanti belgenizi servis sonrası dijital ve basılı olarak teslim ediyoruz.",
  },
  {
    q: "Hangi marka kombilere bakım yapıyorsunuz?",
    a: "Firma prensiplerimiz gereği yetkili servisi olduğumuz Baymak markası dışında diğer markalara bakım vermiyoruz. Tüm Baymak kombi, duvar/yer tipi yoğuşmalı kazan ve hidrofor modelleri kapsamımızdadır.",
  },
  {
    q: "Petek temizliği ne işe yarar?",
    a: "Peteklerde biriken çamur, kireç ve tortu, sıcak su dolaşımını yavaşlatır ve aynı sıcaklığı sağlamak için çok daha fazla yakıt tüketmenize neden olur. Düzenli petek temizliği, yıllık faturada %25’e varan tasarruf sağlayabilir.",
  },
];

const SERVICES = [
  { id: "kombi-ariza", icon: Icon.Flame, title: "Kombi Arıza Servisi", desc: "Yanmama, basınç düşmesi, ısıtmama gibi tüm kombi arızalarında aynı gün servis.", tone: "warm" },
  { id: "kombi-bakim", icon: Icon.Tool, title: "Kombi Yıllık Bakımı", desc: "Yakıt verimliliği, baca güvenliği ve uzun ömür için sezon öncesi kapsamlı bakım." },
  { id: "petek", icon: Icon.Droplet, title: "Petek Temizliği", desc: "Sirkülasyonu açan kapalı sistem temizlik. Daha az yakıt, daha hızlı ısınma." },
  { id: "klima", icon: Icon.Snowflake, title: "Klima Servisi", desc: "Kurulum, gaz dolumu, bakım ve onarım — split, multi ve VRF sistemler." },
];

/* ===================================================
   HOME
   =================================================== */
function ScreenHome({ openChat, onNav }) {
  return (
    <div className="reveal">
      {/* HERO ============================================= */}
      <section style={{ position: "relative", overflow: "hidden" }}>
        <HeroBackdrop />
        <div className="container hero-inner" style={{ position: "relative", paddingTop: 72, paddingBottom: 96 }}>
          <div className="hero-grid">
            <div>
              <div className="row-wrap" style={{ gap: 8, marginBottom: 24 }}>
                <span className="chip chip-dot chip-live">Şu an servisteyiz</span>
                <span className="chip" style={{ background: "white", color: "var(--ink-soft)" }}>
                  <Icon.MapPin width="13" height="13" /> Kars Merkez & 7 ilçe
                </span>
              </div>

              <h1 className="u-display">
                Kars’ta <span style={{ color: "var(--green-700)" }}>Baymak</span> yetkili <br/>
                kombi &amp; klima servisi.
              </h1>

              <p className="u-lede" style={{ maxWidth: 540, marginTop: 24 }}>
                Kars’ın zorlu kış şartlarında kombiniz, klimanız ve peteklerinizin güvenli, verimli ve sorunsuz çalışması için Baymak yetkili teknik servis.
              </p>

              <div className="row-wrap" style={{ marginTop: 32, gap: 10 }}>
                <a className="btn btn-primary btn-lg" href={PHONE_LINK}>
                  <Icon.Phone width="18" height="18" />
                  <span>Hemen Ara · <span className="tel" style={{ fontWeight: 800 }}>{PHONE_DISPLAY}</span></span>
                </a>
                <button className="btn btn-secondary btn-lg" onClick={() => openChat()}>
                  <Icon.Whatsapp width="18" height="18" style={{ color: "var(--whatsapp)" }} />
                  Servis Talep Et
                </button>
              </div>

              {/* trust strip */}
              <div style={{
                marginTop: 40,
                display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)",
                gap: 8,
                maxWidth: 560,
              }} className="hero-trust">
                <TrustItem
                  big="4.9"
                  unit={<span style={{ display: "inline-flex", color: "oklch(75% 0.16 85)" }}>
                    {[0,1,2,3,4].map(i => <Icon.Star key={i} width="13" height="13" />)}
                  </span>}
                  label="1.240+ müşteri yorumu"
                />
                <TrustItem big="15+" unit="yıl" label="Kars’ta kesintisiz hizmet" />
                <TrustItem big="24" unit="ay" label="yedek parça garantisi" />
              </div>
            </div>

            {/* mascot slot */}
            <div className="hero-mascot">
              <div style={{
                position: "relative",
                width: "100%", aspectRatio: "1 / 1.05",
                maxWidth: 460, marginInline: "auto",
              }}>
                <div style={{
                  position: "absolute", inset: 0,
                  background: "radial-gradient(circle at 50% 55%, oklch(95% 0.04 155), transparent 60%)",
                }} />
                <img
                  src="assets/mascot.png"
                  alt="Baymak maskotu"
                  style={{
                    position: "absolute", inset: 0,
                    width: "100%", height: "100%",
                    objectFit: "contain",
                    filter: "drop-shadow(0 24px 36px rgba(15, 30, 25, 0.18))",
                  }}
                />
                {/* floating callouts (hidden on mobile to avoid covering the mascot face) */}
                <Callout className="hero-callout" style={{ top: "10%", right: "-2%" }} icon={Icon.Clock} text="Ortalama 90 dk içinde kapınızda" />
                <Callout className="hero-callout" style={{ bottom: "12%", left: "-6%" }} icon={Icon.Shield} text="Garantili işçilik · Şeffaf fiyat" />
              </div>
              {/* Inline equivalents for mobile, placed below the mascot */}
              <div className="hero-callouts-mobile" style={{
                display: "none",
                flexWrap: "wrap", justifyContent: "center", gap: 8,
                marginTop: 16,
              }}>
                <span className="chip" style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", color: "var(--ink)", height: "auto", padding: "8px 14px" }}>
                  <Icon.Clock width="13" height="13" style={{ color: "var(--green-700)" }} /> 90 dk içinde kapınızda
                </span>
                <span className="chip" style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", color: "var(--ink)", height: "auto", padding: "8px 14px" }}>
                  <Icon.Shield width="13" height="13" style={{ color: "var(--green-700)" }} /> Garantili işçilik
                </span>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          .hero-grid {
            display: grid;
            grid-template-columns: 1.15fr 1fr;
            gap: 56px;
            align-items: center;
          }
          @media (max-width: 920px) {
            .hero-grid { grid-template-columns: 1fr; gap: 24px; }
            .hero-mascot > div { max-width: 260px; }
            .hero-callout { display: none !important; }
            .hero-callouts-mobile { display: flex !important; }
            .hero-inner { padding-top: 32px !important; padding-bottom: 48px !important; }
          }
          @media (max-width: 540px) {
            .hero-trust { grid-template-columns: 1fr !important; max-width: 100% !important; }
          }
        `}</style>
      </section>

      {/* SERVICE CARDS ===================================== */}
      <section className="section" style={{ background: "var(--bg-elev)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Hızlı İhtiyaç"
            title="Hangi konuda yardıma ihtiyacınız var?"
            lede="Aşağıdan kategori seçin, formu birlikte 30 saniyede dolduralım."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="service-grid">
            {SERVICES.map((s) => (
              <ServiceCard key={s.id} {...s} onRequest={() => openChat(s.id)} />
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 980px) { .service-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          @media (max-width: 540px) { .service-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* KARS WHY ========================================== */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 64, alignItems: "center" }} className="why-grid">
            <div>
              <SectionHead
                eyebrow="Neden Kars’ta Düzenli Bakım?"
                title="Kars’ın sert kışında kombiniz, evinizin en kritik makinesidir."
                lede="Uzun ve −30°C’ye inen kış şartlarında, bakım yapılmamış bir kombi sadece arıza riski değil, gizli yakıt kaybı ve karbonmonoksit tehlikesi anlamına gelir."
              />
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {[
                  ["Yıllık %15–25 yakıt tasarrufu", "Tıkalı petek ve eskimiş brülör daha çok gaz yakar; bakım faturanızı düşürür."],
                  ["Karbonmonoksit güvenliği", "Bakımlı baca ve fan sistemi, sessiz tehlike olan CO sızıntısını engeller."],
                  ["Kombi ömrünü 2 katına çıkarır", "Düzenli bakım gören cihaz, ortalama 8 yıl yerine 15+ yıl problemsiz çalışır."],
                ].map(([t, d]) => (
                  <li key={t} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{
                      width: 28, height: 28, borderRadius: "50%",
                      background: "var(--green-700)", color: "#fff",
                      display: "grid", placeItems: "center", flexShrink: 0, marginTop: 2,
                    }}>
                      <Icon.Check width="16" height="16" />
                    </span>
                    <div>
                      <strong style={{ fontSize: 17, letterSpacing: "-0.01em" }}>{t}</strong>
                      <div style={{ color: "var(--ink-soft)", marginTop: 4, lineHeight: 1.5 }}>{d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>

            <div className="card" style={{ padding: 32, display: "flex", flexDirection: "column", gap: 20 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div>
                  <div className="u-eyebrow">Sezon hatırlatma</div>
                  <div className="u-h2" style={{ marginTop: 8 }}>Kombi bakım zamanı geldi mi?</div>
                </div>
                <span style={{
                  width: 56, height: 56, borderRadius: 14,
                  background: "color-mix(in oklch, var(--accent) 20%, white)",
                  color: "oklch(50% 0.15 65)",
                  display: "grid", placeItems: "center",
                  border: "1px solid color-mix(in oklch, var(--accent) 30%, white)",
                }}>
                  <Icon.Flame width="28" height="28" />
                </span>
              </div>
              <BakimRehberi />
              <button onClick={() => openChat("kombi-bakim")} className="btn btn-primary" style={{ width: "100%" }}>
                <Icon.Tool width="16" height="16" /> Bakım Randevusu Al
              </button>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 920px) { .why-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
        `}</style>
      </section>

      {/* DISTRICTS ========================================= */}
      <section className="section-tight" style={{ background: "var(--green-50)", borderTop: "1px solid var(--green-200)", borderBottom: "1px solid var(--green-200)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48, alignItems: "center" }} className="dist-grid">
            <div>
              <div className="u-eyebrow">Hizmet Bölgeleri</div>
              <h2 className="u-h2" style={{ margin: "12px 0 12px" }}>Kars merkez ve 7 ilçede yerinde servis.</h2>
              <p style={{ color: "var(--ink-soft)", margin: 0, maxWidth: 380 }}>
                Köyler ve mezralar dahil tüm Kars genelinde planlı servis ağımız var.
              </p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }} className="dist-list">
              {["Kars Merkez", "Selim", "Kağızman", "Susuz", "Arpaçay", "Akyaka", "Digor"].map((d) => (
                <div key={d} style={{
                  padding: "14px 16px", background: "var(--bg-elev)",
                  border: "1px solid var(--green-200)",
                  borderRadius: "var(--r-md)",
                  fontWeight: 600, fontSize: 14.5,
                  display: "flex", alignItems: "center", gap: 8,
                }}>
                  <Icon.MapPin width="14" height="14" style={{ color: "var(--green-700)" }} />
                  {d}
                </div>
              ))}
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 860px) {
            .dist-grid { grid-template-columns: 1fr !important; }
            .dist-list { grid-template-columns: repeat(2, 1fr) !important; }
          }
        `}</style>
      </section>

      {/* AUTHORIZATION CERTIFICATE ========================= */}
      <YetkiBelgesi />

      {/* TESTIMONIALS ====================================== */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Müşteri Yorumları"
            title="Komşularımız ne diyor?"
            lede="1.240+ değerlendirme ortalaması · Google ve Sahibinden onaylı."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="testi-grid">
            {[
              { name: "Murat Aydın", district: "Kars Merkez · Sukapı", quote: "Kombimiz gece çalışmayı bıraktı, sabah aradım, öğleden önce ekip evdeydi. Sorunu açıklayıp fiyatı baştan söylediler, sürpriz yok." },
              { name: "Selma K.", district: "Kars Merkez · Yusufpaşa", quote: "İki kış üst üste yıllık bakım yaptırıyoruz. Doğalgaz faturamızın hissedilir şekilde düştüğünü söyleyebilirim." },
              { name: "Recep Demir", district: "Selim", quote: "Petek temizliği sonrası evdeki sıcak/soğuk dengesi tamamen değişti. İlçeye geldikleri için ayrıca teşekkür ediyorum." },
            ].map((t, i) => (
              <div key={i} className="card lift" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 14 }}>
                <div style={{ display: "flex", color: "oklch(75% 0.16 85)", gap: 2 }}>
                  {[0,1,2,3,4].map(j => <Icon.Star key={j} width="16" height="16" />)}
                </div>
                <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.55, color: "var(--ink)" }}>
                  “{t.quote}”
                </p>
                <div style={{ marginTop: "auto", paddingTop: 8, borderTop: "1px solid var(--line)" }}>
                  <div style={{ fontWeight: 700 }}>{t.name}</div>
                  <div style={{ fontSize: 13, color: "var(--ink-mute)" }}>{t.district}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 920px) { .testi-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* FAQ PREVIEW ======================================= */}
      <section className="section" style={{ background: "var(--green-50)", borderTop: "1px solid var(--green-200)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "flex-start" }} className="faq-grid">
            <div style={{ position: "sticky", top: 100 }}>
              <SectionHead
                eyebrow="Sık Sorulan Sorular"
                title="Önce şuna bakın."
                lede="Müşterilerimizin en çok sorduğu 6 soruyu derledik."
              />
              <button className="btn btn-secondary" onClick={() => onNav("sss")}>
                Tüm soruları gör <Icon.ArrowRight width="14" height="14" />
              </button>
            </div>
            <FAQ items={FAQ_ITEMS} defaultOpen={0} />
          </div>
        </div>
        <style>{`
          @media (max-width: 920px) { .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
            .faq-grid > div:first-child { position: static !important; } }
        `}</style>
      </section>

      {/* CTA =============================================== */}
      <BigCTA openChat={openChat} />
    </div>
  );
}

function HeroBackdrop() {
  return (
    <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden" }}>
      <div style={{
        position: "absolute", inset: "-10% 50% auto -10%",
        height: "80%",
        background: "radial-gradient(ellipse at 30% 40%, oklch(94% 0.045 155 / 0.7), transparent 60%)",
      }} />
      <div style={{
        position: "absolute", top: "30%", left: "10%", right: 0, height: 1,
        background: "linear-gradient(90deg, transparent, var(--green-200), transparent)",
      }} />
    </div>
  );
}

function TrustItem({ big, unit, label }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4, paddingRight: 12, borderRight: "1px solid var(--line)" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
        <span style={{ fontSize: 28, fontWeight: 800, letterSpacing: "-0.03em" }}>{big}</span>
        <span style={{ fontSize: 13, color: "var(--ink-soft)", fontWeight: 600 }}>{unit}</span>
      </div>
      <span style={{ fontSize: 12.5, color: "var(--ink-mute)", lineHeight: 1.35 }}>{label}</span>
    </div>
  );
}

function Callout({ icon: I, text, style, className }) {
  return (
    <div className={className} style={{
      position: "absolute",
      background: "var(--bg-elev)",
      border: "1px solid var(--line)",
      borderRadius: "var(--r-pill)",
      padding: "10px 16px 10px 12px",
      display: "flex", alignItems: "center", gap: 10,
      fontSize: 13.5, fontWeight: 600,
      boxShadow: "var(--shadow-md)",
      animation: "msgIn 700ms 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both",
      whiteSpace: "nowrap",
      ...style,
    }}>
      <span style={{
        width: 28, height: 28, borderRadius: "50%",
        background: "var(--green-100)", color: "var(--green-800)",
        display: "grid", placeItems: "center",
      }}>
        <I width="14" height="14" />
      </span>
      {text}
    </div>
  );
}

function BakimRehberi() {
  const items = [
    { lbl: "Kombi sesi son zamanlarda farklı geliyor", w: 0.35 },
    { lbl: "1 yıldan uzun süredir bakım yapılmadı", w: 0.7 },
    { lbl: "Aynı sıcaklık için daha çok yakıt yakılıyor", w: 0.55 },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {items.map((it, i) => (
        <div key={i}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14, marginBottom: 8 }}>
            <span style={{ color: "var(--ink)", fontWeight: 500 }}>{it.lbl}</span>
            <span className="u-mono" style={{ fontSize: 11.5, color: "var(--ink-mute)" }}>BAKIM SİNYALİ</span>
          </div>
          <div style={{ height: 6, background: "var(--green-100)", borderRadius: 3, overflow: "hidden" }}>
            <div style={{
              width: `${it.w * 100}%`, height: "100%",
              background: it.w > 0.6 ? "var(--accent)" : "var(--green-700)",
              borderRadius: 3,
            }} />
          </div>
        </div>
      ))}
    </div>
  );
}

function YetkiBelgesi() {
  const [zoom, setZoom] = React.useState(false);
  return (
    <section className="section" style={{ background: "var(--bg-elev)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 64, alignItems: "center" }} className="cert-grid">
          <div>
            <div className="u-eyebrow">Yetki Belgesi · 2026</div>
            <h2 className="u-h1" style={{ margin: "12px 0 16px" }}>
              Kars bölgesi için <span style={{ color: "var(--green-700)" }}>resmi yetkili servis</span>.
            </h2>
            <p className="u-lede" style={{ margin: 0, maxWidth: 520 }}>
              Taner Elektronik, BDR Thermea Group bünyesinde yer alan Baymak marka kombi, kazan ve ısıtma sistemlerinin arıza, bakım ve onarımı için <strong>Kars</strong> bölgesinde 2026 yılı süresince yetkilidir.
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
              {[
                ["Yetkili servis statüsü", "Doğrudan üreticiden onaylı"],
                ["Orijinal yedek parça", "Üretici garantisi kapsamında"],
                ["Eğitimli teknik personel", "Üretici eğitimlerini almış ekip"],
              ].map(([t, d]) => (
                <li key={t} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <span style={{
                    width: 26, height: 26, borderRadius: "50%",
                    background: "var(--green-700)", color: "#fff",
                    display: "grid", placeItems: "center", flexShrink: 0, marginTop: 2,
                  }}>
                    <Icon.Check width="14" height="14" />
                  </span>
                  <div>
                    <strong style={{ fontSize: 16 }}>{t}</strong>
                    <span style={{ color: "var(--ink-mute)", marginLeft: 8, fontSize: 14 }}>· {d}</span>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          <button
            onClick={() => setZoom(true)}
            aria-label="Yetki belgesini büyüt"
            style={{
              all: "unset", cursor: "zoom-in",
              position: "relative",
              borderRadius: "var(--r-lg)",
              overflow: "hidden",
              border: "1px solid var(--line)",
              boxShadow: "var(--shadow-md)",
              transition: "transform 200ms ease, box-shadow 200ms ease",
              display: "block",
              background: "#fff",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "var(--shadow-lg)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; }}
          >
            <img
              src="assets/yetki-belgesi-2026.png"
              alt="Taner Elektronik · 2026 Baymak Yetkili Servis Belgesi · Kars"
              style={{ display: "block", width: "100%", height: "auto" }}
            />
            <span style={{
              position: "absolute", top: 16, left: 16,
              padding: "6px 12px", borderRadius: "var(--r-pill)",
              background: "var(--bg-elev)", border: "1px solid var(--green-200)",
              color: "var(--green-800)", fontSize: 12, fontWeight: 700,
              letterSpacing: "0.04em", textTransform: "uppercase",
              display: "inline-flex", alignItems: "center", gap: 6,
            }}>
              <Icon.Shield width="12" height="12" /> 2026 Yetki Belgesi
            </span>
            <span style={{
              position: "absolute", bottom: 12, right: 12,
              padding: "6px 12px", borderRadius: "var(--r-pill)",
              background: "rgba(15,30,25,0.7)", color: "#fff",
              fontSize: 12, fontWeight: 600,
              backdropFilter: "blur(8px)",
            }}>
              Büyütmek için tıklayın
            </span>
          </button>
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          .cert-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .cert-grid > button { order: -1; }
        }
      `}</style>

      {zoom && (
        <div
          onClick={() => setZoom(false)}
          style={{
            position: "fixed", inset: 0, zIndex: 200,
            background: "rgba(15,30,25,0.85)",
            backdropFilter: "blur(8px)",
            display: "grid", placeItems: "center",
            padding: 24, cursor: "zoom-out",
            animation: "fadeIn 200ms ease",
          }}
        >
          <img
            src="assets/yetki-belgesi-2026.png"
            alt="Taner Elektronik · 2026 Baymak Yetkili Servis Belgesi"
            style={{
              maxWidth: "min(1200px, 100%)", maxHeight: "90vh",
              borderRadius: "var(--r-md)", boxShadow: "var(--shadow-lg)",
              objectFit: "contain",
            }}
          />
          <button
            onClick={(e) => { e.stopPropagation(); setZoom(false); }}
            aria-label="Kapat"
            style={{
              position: "fixed", top: 24, right: 24,
              width: 44, height: 44, borderRadius: "50%",
              background: "rgba(255,255,255,0.15)", color: "#fff",
              border: "1px solid rgba(255,255,255,0.2)",
              display: "grid", placeItems: "center", cursor: "pointer",
            }}
          >
            <Icon.Close width="22" height="22" />
          </button>
        </div>
      )}
    </section>
  );
}

function BigCTA({ openChat }) {
  return (
    <section className="section">
      <div className="container">
        <div style={{
          position: "relative", overflow: "hidden",
          background: "linear-gradient(135deg, var(--green-800), var(--green-700))",
          color: "#fff",
          borderRadius: "var(--r-xl)",
          padding: "64px 56px",
          display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 32, alignItems: "center",
        }} className="cta-grid">
          <div aria-hidden="true" style={{
            position: "absolute", right: -80, top: -80, width: 360, height: 360,
            background: "radial-gradient(circle, oklch(70% 0.14 155 / 0.4), transparent 60%)",
            borderRadius: "50%",
          }} />
          <div style={{ position: "relative" }}>
            <div className="u-eyebrow" style={{ color: "oklch(85% 0.06 155)" }}>Hızlı destek</div>
            <h2 className="u-h1" style={{ margin: "12px 0 16px", color: "#fff" }}>
              Şu an arayın, bugün servis alın.
            </h2>
            <p style={{ margin: 0, color: "rgba(255,255,255,0.8)", fontSize: 17, maxWidth: 520 }}>
              Mesai saatleri içinde Kars merkez için ortalama 90 dakikada kapınızdayız. Mesai dışı için 7/24 nöbetçi hattımız aktiftir.
            </p>
          </div>
          <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 10 }}>
            <a className="btn btn-lg" href={PHONE_LINK} style={{
              background: "#fff", color: "var(--green-800)", justifyContent: "center", fontWeight: 800,
            }}>
              <Icon.Phone width="18" height="18" />
              <span className="tel">{PHONE_DISPLAY}</span>
            </a>
            <button className="btn btn-lg" onClick={() => openChat()} style={{
              background: "rgba(255,255,255,0.1)", color: "#fff",
              border: "1px solid rgba(255,255,255,0.2)", justifyContent: "center",
            }}>
              <Icon.Whatsapp width="18" height="18" /> WhatsApp ile yazın
            </button>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .cta-grid { grid-template-columns: 1fr !important; padding: 40px 28px !important; }
        }
      `}</style>
    </section>
  );
}

/* ===================================================
   KOMBİ SERVİSİ — example service detail page
   =================================================== */
function ScreenKombi({ openChat, onNav }) {
  return (
    <div className="reveal">
      {/* Page hero */}
      <section style={{ background: "var(--green-50)", borderBottom: "1px solid var(--green-200)" }}>
        <div className="container" style={{ padding: "56px 28px 64px" }}>
          <Breadcrumb onNav={onNav} crumbs={[["home", "Ana Sayfa"], [null, "Kombi Servisi"]]} />
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "center", marginTop: 24 }} className="kombi-hero">
            <div>
              <span className="chip"><Icon.Flame width="13" height="13" /> Hizmet Sayfası</span>
              <h1 className="u-h1" style={{ margin: "16px 0 16px" }}>
                Kars Kombi Arıza Servisi
              </h1>
              <p className="u-lede" style={{ maxWidth: 580 }}>
                Kombiniz çalışmıyor, sıcak su gelmiyor ya da arıza kodu mu veriyor? Kars merkez ve ilçelerde aynı gün servis, şeffaf fiyat, 24 ay yedek parça garantisi.
              </p>
              <div className="row-wrap" style={{ marginTop: 28, gap: 10 }}>
                <button onClick={() => openChat("kombi-ariza")} className="btn btn-primary btn-lg">
                  <Icon.Send width="16" height="16" /> Servis Talep Et
                </button>
                <a className="btn btn-secondary btn-lg" href={PHONE_LINK}>
                  <Icon.Phone width="16" height="16" />
                  <span className="tel">{PHONE_DISPLAY}</span>
                </a>
              </div>
              <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Badge>Aynı gün servis</Badge>
                <Badge>Baymak yetkili servisi</Badge>
                <Badge>Garantili işçilik</Badge>
                <Badge>Şeffaf fiyat</Badge>
              </div>
            </div>
            <div className="card" style={{ padding: 24, gap: 14, display: "flex", flexDirection: "column" }}>
              <div className="u-eyebrow">Hızlı durum kontrolü</div>
              <h3 style={{ margin: 0, fontSize: 20, fontWeight: 700 }}>Kombiniz hangi belirtiyi veriyor?</h3>
              <SymptomList openChat={openChat} />
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 920px) { .kombi-hero { grid-template-columns: 1fr !important; gap: 32px !important; } }
        `}</style>
      </section>

      {/* What we do */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }} className="kombi-steps">
            {[
              { n: "01", t: "Arama & ön teşhis", d: "Telefonda veya formdan arızanızı anlatın. Teknik ekibimiz olası nedenleri en olası 2-3 senaryoya indirir." },
              { n: "02", t: "Yerinde tespit", d: "Belirlenen zamanda gelir, sabit keşif ücretiyle arızayı tespit eder, fiyatı onayınıza sunarız. İşlem onaylanırsa keşif ücreti düşer." },
              { n: "03", t: "Onarım & garanti", d: "Orijinal yedek parça ile aynı gün onarım. Değişen orijinal parçalar 24 ay üretici garantisi kapsamındadır." },
            ].map((s, i) => (
              <div key={i} className="card" style={{ padding: 28, position: "relative" }}>
                <div style={{
                  fontSize: 48, fontWeight: 800, color: "var(--green-200)",
                  letterSpacing: "-0.04em", lineHeight: 1,
                }}>{s.n}</div>
                <h3 className="u-h3" style={{ margin: "12px 0 8px" }}>{s.t}</h3>
                <p style={{ margin: 0, color: "var(--ink-soft)", lineHeight: 1.55 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 860px) { .kombi-steps { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* Long form SEO content */}
      <section className="section-tight" style={{ background: "var(--bg-elev)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <h2 className="u-h2">Kars’ta kombi arızası yaşadığınızda ilk yapmanız gerekenler</h2>
          <p style={{ color: "var(--ink-soft)", fontSize: 17, lineHeight: 1.7 }}>
            Kars iklimi nedeniyle kombi arızaları sıklıkla acil bir durumdur — özellikle Kasım ile Mart arasındaki dönemde. Kombi tamamen çalışmayı bırakırsa, müdahale öncesi yapılabilecek bazı güvenli kontroller var.
          </p>

          <h3 className="u-h3" style={{ marginTop: 32 }}>Ön kontrol listesi (servisi aramadan önce)</h3>
          <ul style={{ color: "var(--ink-soft)", fontSize: 17, lineHeight: 1.8, paddingLeft: 22 }}>
            <li>Gaz vanasının açık olduğundan emin olun.</li>
            <li>Kombi basıncını panelden okuyun. 1–1.5 bar normaldir; 0.5 bar altıysa su takviyesi gerekebilir.</li>
            <li>Termostat pillerini ve oda termostatı bağlantısını kontrol edin.</li>
            <li>Donma riski olan dış borulara dokunarak buz veya yoğuşma var mı bakın.</li>
            <li>Panelde arıza kodu varsa, telefonda bize kodu söyleyin — ön teşhis hızlanır.</li>
          </ul>

          <h3 className="u-h3" style={{ marginTop: 32 }}>En sık görülen kombi arızaları</h3>
          <p style={{ color: "var(--ink-soft)", fontSize: 17, lineHeight: 1.7 }}>
            Kars şartlarında en yaygın 4 sorun: basınç düşüşü, donmuş yoğuşma tahliyesi, kireçlenmiş eşanjör ve fan/brülör arızası. Donmuş tahliye gibi sorunlar 20 dakikada çözülürken, eşanjör kireci için kapsamlı bir bakım gerekir. Tam liste ve müdahale süreleri için sizi telefonda bilgilendirebiliriz.
          </p>

          <div style={{
            marginTop: 32, padding: 24, background: "var(--green-50)",
            border: "1px solid var(--green-200)", borderRadius: "var(--r-lg)",
            display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap",
          }}>
            <div style={{ flex: 1, minWidth: 240 }}>
              <strong style={{ fontSize: 17 }}>Aklınızdaki soruya 30 saniyede cevap alın.</strong>
              <p style={{ margin: "6px 0 0", color: "var(--ink-soft)" }}>Servis danışmanımıza yazın, doğru yönlendirmeyi alın.</p>
            </div>
            <button className="btn btn-primary" onClick={() => openChat("kombi-ariza")}>
              <Icon.Send width="14" height="14" /> Sohbeti Başlat
            </button>
          </div>
        </div>
      </section>

      {/* Services list (no prices) */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Hizmetlerimiz"
            title="Verdiğimiz tüm servisler."
            lede="Fiyatlandırma, arıza ve cihaz türüne göre değişir; servisten önce yazılı onayınıza sunulur. Sürpriz fatura yoktur."
          />
          <ServicesList />
        </div>
      </section>

      <BigCTA openChat={openChat} />
    </div>
  );
}

function Breadcrumb({ crumbs, onNav }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink-mute)", fontSize: 13.5 }}>
      {crumbs.map(([id, label], i) => (
        <React.Fragment key={i}>
          {id ? (
            <button onClick={() => onNav(id)} style={{ all: "unset", cursor: "pointer", color: "var(--ink-soft)" }}>{label}</button>
          ) : (
            <span style={{ color: "var(--ink)" }}>{label}</span>
          )}
          {i < crumbs.length - 1 && <span style={{ color: "var(--line-strong)" }}>/</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

function Badge({ children }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "6px 12px", borderRadius: "var(--r-pill)",
      background: "var(--bg-elev)", border: "1px solid var(--green-200)",
      color: "var(--green-800)", fontSize: 13, fontWeight: 600,
    }}>
      <Icon.Check width="13" height="13" /> {children}
    </span>
  );
}

function SymptomList({ openChat }) {
  const symptoms = [
    "Kombi tamamen çalışmıyor",
    "Sıcak su gelmiyor",
    "Petekler ısınmıyor",
    "Hata kodu / yanıp sönen ışık",
    "Su sızıntısı var",
    "Anormal ses çıkarıyor",
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      {symptoms.map((s, i) => (
        <button key={i} onClick={() => openChat("kombi-ariza")} style={{
          all: "unset", cursor: "pointer", boxSizing: "border-box",
          padding: "12px 14px", borderRadius: "var(--r-md)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          border: "1px solid var(--line)",
          fontSize: 14.5, fontWeight: 500,
          width: "100%",
          transition: "all 120ms ease",
        }}
        onMouseEnter={(e) => { e.currentTarget.style.background = "var(--green-100)"; e.currentTarget.style.borderColor = "var(--green-200)"; e.currentTarget.style.color = "var(--green-800)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.color = "var(--ink)"; }}
        >
          {s}
          <Icon.ArrowRight width="14" height="14" style={{ opacity: 0.5 }} />
        </button>
      ))}
    </div>
  );
}

function ServicesList() {
  const rows = [
    [Icon.Flame, "Kombi Bakım, Onarım, Arıza", "Yetkili servisi olduğumuz tüm Baymak kombilerinde yanmama, basınç düşmesi, hata kodu, sızıntı, ısıtmama gibi sorunlar için aynı gün servis."],,
    [Icon.Spark, "Duvar Tipi Yoğuşmalı Kazan", "Duvar ve yer tipi yoğuşmalı kazanlar için bakım, onarım ve arıza tespiti."],
    [Icon.Droplet, "Hidrofor Bakım, Onarım, Arıza", "Tek ve çift pompalı hidrofor sistemlerinde basınç, kontaktör ve membran arızaları."],
    [Icon.Snowflake, "Klima Montaj & Arıza", "Split ve multi klima montajı, gaz dolumu, bakım ve arıza onarımı."],
    [Icon.Tool, "Petek Tesisatı Yıkama", "Kapalı sistem petek temizliği — daha hızlı ısınma, ciddi yakıt tasarrufu."],
    [Icon.Badge, "Orijinal Yedek Parça", "Kombi, duvar/yer tipi yoğuşmalı kazan ve hidrofor için orijinal yedek parça stoklu."],
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="services-list-grid">
      {rows.map(([I, title, desc], i) => (
        <div key={i} className="card lift" style={{ padding: 24, display: "flex", gap: 14, alignItems: "flex-start" }}>
          <span style={{
            width: 44, height: 44, borderRadius: 12,
            background: "var(--green-100)", color: "var(--green-800)",
            display: "grid", placeItems: "center", flexShrink: 0,
            border: "1px solid var(--green-200)",
          }}>
            <I width="22" height="22" />
          </span>
          <div>
            <strong style={{ fontSize: 16.5, letterSpacing: "-0.01em" }}>{title}</strong>
            <p style={{ margin: "6px 0 0", color: "var(--ink-soft)", fontSize: 14.5, lineHeight: 1.5 }}>{desc}</p>
          </div>
        </div>
      ))}
      <style>{`
        @media (max-width: 920px) { .services-list-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 600px) { .services-list-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </div>
  );
}

function PricingTable() {
  const rows = [
    ["Keşif & arıza tespiti", "₺350", "İşlem onaylanırsa fiyattan düşülür"],
    ["Yıllık kombi bakımı", "₺1.250 'den itibaren", "Tüm tüm marka kombiler için sabit"],
    ["Petek temizliği (daire)", "₺2.400 'den itibaren", "Petek sayısı ve sistem tipine göre"],
    ["Klima bakımı (split)", "₺850 'den itibaren", "Filtre, gaz kontrol, dış ünite dahil"],
  ];
  return (
    <div className="card" style={{ overflow: "hidden" }}>
      {rows.map(([label, price, note], i) => (
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr 1.6fr",
          padding: "20px 24px",
          borderTop: i === 0 ? 0 : "1px solid var(--line)",
          alignItems: "center", gap: 16,
        }} className="pricing-row">
          <div style={{ fontWeight: 700, fontSize: 16 }}>{label}</div>
          <div style={{ fontWeight: 800, fontSize: 18, color: "var(--green-800)", letterSpacing: "-0.01em" }}>{price}</div>
          <div style={{ color: "var(--ink-mute)", fontSize: 14 }}>{note}</div>
        </div>
      ))}
      <style>{`
        @media (max-width: 720px) {
          .pricing-row { grid-template-columns: 1fr !important; gap: 4px !important; }
        }
      `}</style>
    </div>
  );
}

/* ===================================================
   HİZMETLER
   =================================================== */
const HIZMETLER = [
  {
    id: "kombi",
    icon: Icon.Flame,
    title: "Kombi Bakım, Onarım & Arıza",
    desc: "Yetkili servisi olduğumuz tüm Baymak modelleri için kapsamlı hizmet sunuyoruz.",
    bullets: [
      "Yıllık sezon bakımı (brülör, eşanjör, baca güvenliği)",
      "Arıza kodu tespiti ve onarım",
      "Basınç düşmesi, sızıntı, ateşleme problemleri",
      "Donmuş yoğuşma tahliyesi çözümü (Kars kışı)",
    ],
    cta: "kombi-ariza",
    tone: "warm",
  },
  {
    id: "kazan",
    icon: Icon.Spark,
    title: "Duvar / Yer Tipi Yoğuşmalı Kazan",
    desc: "Apartman, villa ve ticari kullanım için duvar ve yer tipi yoğuşmalı kazanlarda bakım, onarım ve arıza tespiti.",
    bullets: [
      "Üretici talimatlarına uygun yıllık bakım",
      "Kontrol kartı ve sensör arızaları",
      "Sirkülasyon pompası ve emniyet vanası kontrolü",
      "Yakıt verimliliği ölçümü",
    ],
    cta: "kazan",
  },
  {
    id: "hidrofor",
    icon: Icon.Droplet,
    title: "Hidrofor Bakım, Onarım & Arıza",
    desc: "Konut, site ve ticari hidrofor sistemlerinde kesintisiz su basıncı için bakım ve servis.",
    bullets: [
      "Tek ve çift pompalı sistem servisi",
      "Basınç tankı (membran) değişimi",
      "Kontaktör, pressostat, otomatik kontrol",
      "Pompa motoru bakım ve sargı kontrolü",
    ],
    cta: "hidrofor",
  },
  {
    id: "klima",
    icon: Icon.Snowflake,
    title: "Klima Montaj & Arıza",
    desc: "Split ve multi klima sistemlerinde montaj, demontaj, bakım ve arıza onarımı.",
    bullets: [
      "Yeni klima montajı, ek hat çekimi",
      "Gaz dolumu ve kaçak tespiti",
      "Filtre, fan ve buharlaştırıcı temizliği",
      "Mevsim öncesi performans kontrolü",
    ],
    cta: "klima",
  },
  {
    id: "petek",
    icon: Icon.Tool,
    title: "Petek Tesisatı Yıkama",
    desc: "Kapalı sistem petek temizliği — biriken çamur ve kireç tabakası açılır, sirkülasyon eski performansına döner.",
    bullets: [
      "Kapalı devre kimyasal yıkama",
      "Petek başı bireysel akış kontrolü",
      "Sirkülasyon sonrası test ve doldurma",
      "Yıllık %25’e varan yakıt tasarrufu",
    ],
    cta: "petek",
  },
  {
    id: "yedek",
    icon: Icon.Badge,
    title: "Orijinal Yedek Parça",
    desc: "Kombi, duvar tipi ve yer tipi yoğuşmalı kazan ile hidrofor sistemleri için orijinal yedek parça stoklu.",
    bullets: [
      "Üretici onaylı orijinal parçalar",
      "Üretici garantisi (genelde 24 ay)",
      "Hızlı temin — çoğu parça stokta",
      "Faturalı satış, garanti belgesi ile",
    ],
    cta: "yedek",
  },
];

function ScreenHizmetler({ openChat, onNav }) {
  return (
    <div className="reveal">
      <section style={{ background: "var(--green-50)", borderBottom: "1px solid var(--green-200)" }}>
        <div className="container" style={{ padding: "56px 28px 64px" }}>
          <Breadcrumb onNav={onNav} crumbs={[["home", "Ana Sayfa"], [null, "Hizmetler"]]} />
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 56, alignItems: "center", marginTop: 24 }} className="hiz-hero">
            <div>
              <span className="chip"><Icon.Shield width="13" height="13" /> Yetkili Servis · Kars</span>
              <h1 className="u-h1" style={{ margin: "16px 0 16px" }}>
                Verdiğimiz tüm hizmetler.
              </h1>
              <p className="u-lede" style={{ maxWidth: 620 }}>
                Kombi, yoğuşmalı kazan, hidrofor, klima ve petek tesisatı — ısıtma ve su sistemlerinizin tamamı için tek elden bakım, onarım ve orijinal yedek parça.
              </p>
              <div className="row-wrap" style={{ marginTop: 28, gap: 10 }}>
                <button onClick={() => openChat()} className="btn btn-primary btn-lg">
                  <Icon.Send width="16" height="16" /> Servis Talep Et
                </button>
                <a className="btn btn-secondary btn-lg" href={PHONE_LINK}>
                  <Icon.Phone width="16" height="16" />
                  <span className="tel">{PHONE_DISPLAY}</span>
                </a>
              </div>
            </div>

            <div className="card" style={{ padding: 24 }}>
              <div className="u-eyebrow">Hızlı erişim</div>
              <h3 style={{ margin: "10px 0 14px", fontSize: 18, fontWeight: 700 }}>Hangi hizmeti arıyorsunuz?</h3>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {HIZMETLER.map((h) => (
                  <a key={h.id} href={`#service-${h.id}`}
                     onClick={(e) => {
                       e.preventDefault();
                       const el = document.getElementById(`service-${h.id}`);
                       if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
                     }}
                     style={{
                       display: "flex", alignItems: "center", gap: 10,
                       padding: "10px 12px", borderRadius: "var(--r-md)",
                       textDecoration: "none", color: "var(--ink)",
                       fontSize: 14.5, fontWeight: 500,
                       transition: "background 120ms ease",
                     }}
                     onMouseEnter={(e) => e.currentTarget.style.background = "var(--green-100)"}
                     onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
                  >
                    <span style={{
                      width: 28, height: 28, borderRadius: 8,
                      background: "var(--green-100)", color: "var(--green-800)",
                      display: "grid", placeItems: "center", flexShrink: 0,
                    }}>
                      <h.icon width="14" height="14" />
                    </span>
                    <span style={{ flex: 1 }}>{h.title}</span>
                    <Icon.ArrowRight width="14" height="14" style={{ opacity: 0.4 }} />
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 920px) { .hiz-hero { grid-template-columns: 1fr !important; gap: 32px !important; } }
        `}</style>
      </section>

      {/* Service detail cards */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }} className="hiz-grid">
            {HIZMETLER.map((h, i) => (
              <div key={h.id} id={`service-${h.id}`} className="card lift" style={{
                padding: 32, display: "flex", flexDirection: "column", gap: 20,
                position: "relative", overflow: "hidden",
                scrollMarginTop: 80,
              }}>
                <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                  <span style={{
                    width: 56, height: 56, borderRadius: 14,
                    background: h.tone === "warm" ? "color-mix(in oklch, var(--accent) 18%, white)" : "var(--green-100)",
                    color: h.tone === "warm" ? "oklch(48% 0.15 65)" : "var(--green-800)",
                    display: "grid", placeItems: "center", flexShrink: 0,
                    border: `1px solid ${h.tone === "warm" ? "color-mix(in oklch, var(--accent) 30%, white)" : "var(--green-200)"}`,
                  }}>
                    <h.icon width="28" height="28" />
                  </span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-mute)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                      0{i + 1} · Hizmet
                    </div>
                    <h2 className="u-h2" style={{ fontSize: 24, margin: "6px 0 0", letterSpacing: "-0.018em" }}>{h.title}</h2>
                  </div>
                </div>
                <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: 15.5, lineHeight: 1.6 }}>{h.desc}</p>

                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }} className="hiz-bullets">
                  {h.bullets.map((b, j) => (
                    <li key={j} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "var(--ink)" }}>
                      <span style={{
                        width: 18, height: 18, borderRadius: "50%",
                        background: "var(--green-700)", color: "#fff",
                        display: "grid", placeItems: "center", flexShrink: 0, marginTop: 1,
                      }}>
                        <Icon.Check width="11" height="11" />
                      </span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>

                <div style={{ display: "flex", gap: 10, marginTop: "auto", paddingTop: 8 }}>
                  <button onClick={() => openChat(h.cta)} className="btn btn-primary btn-sm">
                    <Icon.Send width="14" height="14" /> Servis Talep Et
                  </button>
                  <a href={PHONE_LINK} className="btn btn-secondary btn-sm">
                    <Icon.Phone width="14" height="14" /> Ara
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 920px) {
            .hiz-grid { grid-template-columns: 1fr !important; }
          }
          @media (max-width: 540px) {
            .hiz-bullets { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* Mid-page strip */}
      <section className="section-tight" style={{ background: "var(--green-50)", borderTop: "1px solid var(--green-200)", borderBottom: "1px solid var(--green-200)" }}>
        <div className="container">
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            gap: 32, flexWrap: "wrap",
          }}>
            <div style={{ flex: 1, minWidth: 280 }}>
              <h3 className="u-h2" style={{ margin: 0, fontSize: 28 }}>Aradığınız hizmet listede yok mu?</h3>
              <p style={{ margin: "8px 0 0", color: "var(--ink-soft)", fontSize: 16 }}>
                Isıtma ve su sistemlerine dair her sorunuzda telefonla danışabilirsiniz.
              </p>
            </div>
            <div className="row-wrap" style={{ gap: 10 }}>
              <a href={PHONE_LINK} className="btn btn-primary">
                <Icon.Phone width="16" height="16" /> <span className="tel">{PHONE_DISPLAY}</span>
              </a>
              <button onClick={() => openChat()} className="btn btn-secondary">
                <Icon.Send width="14" height="14" /> Sohbet Başlat
              </button>
            </div>
          </div>
        </div>
      </section>

      <BigCTA openChat={openChat} />
    </div>
  );
}

function ScreenSSS({ openChat, onNav }) {
  const allFaqs = [
    ...FAQ_ITEMS,
    {
      q: "Hangi ödeme yöntemlerini kabul ediyorsunuz?",
      a: "Nakit, kredi kartı (taksitli) ve havale/EFT ile ödeme alabiliyoruz. Şirket faturası için talebinizi serviste belirtmeniz yeterli.",
    },
    {
      q: "Servis sonrası fatura ve garanti belgesi veriyor musunuz?",
      a: "Evet. Tüm işlemler resmi fatura ile sonuçlandırılır. Garanti belgesi dijital ve basılı olarak teslim edilir; saklamanızı öneririz.",
    },
    {
      q: "Mesai dışı çalışıyor musunuz?",
      a: "Acil durumlar için (kombi tamamen kapandıysa) 7/24 nöbetçi hattımız aktiftir. Mesai dışı servis ücreti telefonda netleştirilir.",
    },
  ];
  return (
    <div className="reveal">
      <section style={{ background: "var(--green-50)", borderBottom: "1px solid var(--green-200)" }}>
        <div className="container" style={{ padding: "56px 28px 56px" }}>
          <Breadcrumb onNav={onNav} crumbs={[["home", "Ana Sayfa"], [null, "Sık Sorulan Sorular"]]} />
          <h1 className="u-h1" style={{ margin: "20px 0 12px", maxWidth: 740 }}>
            Sık sorulan sorulara yanıtlar.
          </h1>
          <p className="u-lede" style={{ maxWidth: 640, margin: 0 }}>
            Müşterilerimizin en çok merak ettiği konuları topladık. Burada cevabını bulamazsanız bize doğrudan ulaşın.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ maxWidth: 920 }}>
          <FAQ items={allFaqs} defaultOpen={0} />
          <div style={{
            marginTop: 32, padding: 28, borderRadius: "var(--r-lg)",
            background: "var(--green-50)", border: "1px solid var(--green-200)",
            display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap",
          }}>
            <div style={{ flex: 1, minWidth: 220 }}>
              <strong style={{ fontSize: 18 }}>Sorunuz hâlâ cevaplanmadıysa?</strong>
              <p style={{ margin: "6px 0 0", color: "var(--ink-soft)" }}>
                Servis danışmanımıza yazın, 2 dk içinde dönelim.
              </p>
            </div>
            <button className="btn btn-primary" onClick={() => openChat()}>
              <Icon.Send width="14" height="14" /> Soru Sor
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================================================
   İLETİŞİM
   =================================================== */
function ScreenIletisim({ openChat, onNav }) {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", phone: "", subject: "", note: "" });
  const submit = (e) => {
    e.preventDefault();
    const lines = [
      "Merhaba Taner Elektronik 👋",
      "",
      "İletişim formu üzerinden yazıyorum:",
      `• Ad Soyad: ${form.name}`,
      `• Telefon: ${form.phone}`,
      `• Konu: ${form.subject || "—"}`,
    ];
    if (form.note.trim()) {
      lines.push(`• Not: ${form.note.trim()}`);
    }
    lines.push("", "Geri dönüşünüzü bekliyorum.");
    const url = `https://wa.me/905541939736?text=${encodeURIComponent(lines.join("\n"))}`;
    window.open(url, "_blank", "noopener,noreferrer");
    setSent(true);
  };
  return (
    <div className="reveal">
      <section style={{ background: "var(--green-50)", borderBottom: "1px solid var(--green-200)" }}>
        <div className="container" style={{ padding: "56px 28px 56px" }}>
          <Breadcrumb onNav={onNav} crumbs={[["home", "Ana Sayfa"], [null, "İletişim"]]} />
          <h1 className="u-h1" style={{ margin: "20px 0 12px", maxWidth: 740 }}>İletişim.</h1>
          <p className="u-lede" style={{ maxWidth: 600, margin: 0 }}>
            Kars merkez ofisimiz mesai saatleri içinde açıktır. Acil durumda 7/24 numaramızı arayabilirsiniz.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 48 }} className="contact-grid">
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <ContactItem icon={Icon.Phone} title="Sabit Hat" big={PHONE_DISPLAY} sub="Servis merkezi · mesai içi" href={PHONE_LINK} />
              <ContactItem icon={Icon.Phone} title="Cep Telefonu 1" big={PHONE_MOBILE_1} sub="7/24 · acil arama" href={PHONE_MOBILE_1_LINK} />
              <ContactItem icon={Icon.Phone} title="Cep Telefonu 2" big={PHONE_MOBILE_2} sub="7/24 · yedek hat" href={PHONE_MOBILE_2_LINK} />
              <ContactItem icon={Icon.Whatsapp} title="WhatsApp" big={WHATSAPP_DISPLAY} sub="Görsel & video destek" href={WHATSAPP_LINK} />
              <ContactItem icon={Icon.Badge} title="Firma Yetkilisi" big={CONTACT_NAME} sub="Direkt iletişim" />
              <ContactItem icon={Icon.MapPin} title="Adres" big="Şehitler Mah. İnönü Cad. No: 108" sub="Kars Merkez · Pzt–Cmt · 08:30–19:00" />
              <ContactItem icon={Icon.Clock} title="Çalışma saatleri" big="Mesai içi: 08:30 – 19:00" sub="Acil servis: 7 gün / 24 saat" />
            </div>
            <div className="card" style={{ padding: 32 }}>
              <div className="u-eyebrow">Mesaj Bırakın</div>
              <h2 className="u-h2" style={{ margin: "10px 0 16px" }}>Geri arayalım.</h2>

              {sent ? (
                <SuccessNote name={form.name} fallbackUrl={`https://wa.me/905541939736?text=${encodeURIComponent(`Merhaba Taner Elektronik 👋\n\nİletişim formu üzerinden yazıyorum:\n• Ad Soyad: ${form.name}\n• Telefon: ${form.phone}\n• Konu: ${form.subject || "—"}${form.note.trim() ? `\n• Not: ${form.note.trim()}` : ""}\n\nGeri dönüşünüzü bekliyorum.`)}`} />
              ) : (
                <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }} className="form-row">
                    <div className="field">
                      <label>Adınız Soyadınız</label>
                      <input className="input" required placeholder="Adınız Soyadınız"
                             value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} />
                    </div>
                    <div className="field">
                      <label>Telefon</label>
                      <input className="input tel" required inputMode="tel" placeholder="0 5__ ___ __ __"
                             value={form.phone} onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))} />
                    </div>
                  </div>
                  <div className="field">
                    <label>Konu</label>
                    <select className="select" required
                            value={form.subject} onChange={(e) => setForm((f) => ({ ...f, subject: e.target.value }))}>
                      <option value="" disabled>Seçin…</option>
                      <option>Kombi bakım, onarım, arıza</option>
                      <option>Duvar / yer tipi yoğuşmalı kazan</option>
                      <option>Hidrofor bakım & onarım</option>
                      <option>Klima montaj & arıza</option>
                      <option>Petek tesisatı yıkama</option>
                      <option>Orijinal yedek parça</option>
                      <option>Diğer</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Kısa not (opsiyonel)</label>
                    <textarea className="textarea" placeholder="Belirtileri, marka/model bilgisini veya tercih ettiğiniz zaman aralığını yazabilirsiniz."
                              value={form.note} onChange={(e) => setForm((f) => ({ ...f, note: e.target.value }))} />
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderRadius: "var(--r-md)", background: "var(--green-50)", border: "1px solid var(--green-200)", fontSize: 13, color: "var(--green-800)" }}>
                    <Icon.Whatsapp width="16" height="16" />
                    <span>Mesajınız <strong>WhatsApp</strong>'ta hazır olarak açılacak — "Gönder"e basmanız yeterli.</span>
                  </div>
                  <button type="submit" className="btn btn-wa btn-lg" style={{ alignSelf: "flex-start" }}>
                    <Icon.Whatsapp width="16" height="16" /> WhatsApp'tan Gönder
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr !important; } }
          @media (max-width: 540px) { .form-row { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
    </div>
  );
}

function ContactItem({ icon: I, title, big, sub, href }) {
  const Tag = href ? "a" : "div";
  return (
    <Tag href={href} target={href && href.startsWith("http") ? "_blank" : undefined} rel="noreferrer"
      style={{
        textDecoration: "none", color: "inherit",
        display: "flex", gap: 16, alignItems: "flex-start",
        padding: 20, background: "var(--bg-elev)",
        border: "1px solid var(--line)", borderRadius: "var(--r-lg)",
        transition: "border-color 150ms ease, box-shadow 150ms ease",
      }}
      onMouseEnter={(e) => href && (e.currentTarget.style.borderColor = "var(--green-300)", e.currentTarget.style.boxShadow = "var(--shadow-sm)")}
      onMouseLeave={(e) => href && (e.currentTarget.style.borderColor = "var(--line)", e.currentTarget.style.boxShadow = "none")}
    >
      <span style={{
        width: 44, height: 44, borderRadius: 12,
        background: "var(--green-100)", color: "var(--green-800)",
        display: "grid", placeItems: "center", flexShrink: 0,
      }}>
        <I width="20" height="20" />
      </span>
      <div style={{ flex: 1 }}>
        <div className="u-eyebrow">{title}</div>
        <div style={{ fontWeight: 700, fontSize: 17, marginTop: 4, letterSpacing: "-0.01em" }}>{big}</div>
        <div style={{ fontSize: 13.5, color: "var(--ink-mute)", marginTop: 4 }}>{sub}</div>
      </div>
    </Tag>
  );
}

function SuccessNote({ name, fallbackUrl }) {
  return (
    <div style={{
      padding: 24, borderRadius: "var(--r-lg)",
      background: "var(--green-50)", border: "1px solid var(--green-200)",
      display: "flex", gap: 14, alignItems: "flex-start",
    }}>
      <span style={{
        width: 40, height: 40, borderRadius: "50%",
        background: "var(--green-700)", color: "#fff",
        display: "grid", placeItems: "center", flexShrink: 0,
      }}>
        <Icon.Whatsapp width="22" height="22" />
      </span>
      <div style={{ flex: 1 }}>
        <strong style={{ fontSize: 17 }}>WhatsApp açıldı{name ? `, ${name.split(" ")[0]}` : ""} 📲</strong>
        <p style={{ margin: "6px 0 0", color: "var(--ink-soft)" }}>
          Mesajınız hazır olarak göründü — sadece <strong>"Gönder"</strong>e basmanız yeterli. WhatsApp açılmadıysa aşağıdaki butonla tekrar deneyebilirsiniz.
        </p>
        <div style={{ marginTop: 14, display: "flex", gap: 8, flexWrap: "wrap" }}>
          {fallbackUrl && (
            <a href={fallbackUrl} target="_blank" rel="noreferrer" className="btn btn-wa btn-sm">
              <Icon.Whatsapp width="14" height="14" /> WhatsApp'ı tekrar aç
            </a>
          )}
          <a href={PHONE_LINK} className="btn btn-secondary btn-sm">
            <Icon.Phone width="14" height="14" /> {PHONE_DISPLAY}
          </a>
        </div>
      </div>
    </div>
  );
}

window.ScreenHome = ScreenHome;
window.ScreenKombi = ScreenKombi;
window.ScreenHizmetler = ScreenHizmetler;
window.ScreenSSS = ScreenSSS;
window.ScreenIletisim = ScreenIletisim;
window.FAQ_ITEMS = FAQ_ITEMS;