/* global Icon, useScrollReveal */

const SERVICES = [
{
  id: "s1", n: "01",
  title: "Ağız ve Diş Muayenesi",
  desc: "Ağız kokusu, diş eti problemleri, kırık dişler ve ağız içi ağrı şüphesinde detaylı değerlendirme.",
  icon: "tooth",
  img: "assets/service-01-muayene.jpg"
},
{
  id: "s2", n: "02",
  title: "Dental Röntgen",
  desc: "Diş eti altında görünmeyen problemlerin değerlendirilmesinde kullanılır.",
  icon: "xray",
  img: "assets/service-02-rontgen.jpg"
},
{
  id: "s3", n: "03",
  title: "Diş Temizliği",
  desc: "Diş taşı, plak birikimi ve diş eti sağlığının korunmasına yönelik profesyonel dental temizlik uygulamaları.",
  icon: "scalpel",
  img: "assets/service-10-temizlik.jpg"
},
{
  id: "s4", n: "04",
  title: "Periodontal Tedaviler",
  desc: "Diş eti hastalıklarının temizliği, tedavisi ve gerekli durumlarda cerrahi uygulamalar.",
  icon: "scalpel",
  img: "assets/service-03-periodontal.jpg"
},
{
  id: "s5", n: "05",
  title: "Kanal Tedavisi",
  desc: "Dişin çekilmeden korunabildiği uygun vakalarda, kanal tedavisi seçenekleri değerlendirilir.",
  icon: "shield",
  img: "assets/service-04-kanal.jpg"
},
{
  id: "s6", n: "06",
  title: "Restoratif Diş Hekimliği",
  desc: "Kırık, aşınmış veya madde kaybı olan dişlerde dişi korumaya yönelik restoratif tedavi seçenekleri.",
  icon: "shield",
  img: "assets/service-09-restoratif.jpg"
},
{
  id: "s7", n: "07",
  title: "Prostodontik (Protetik) Tedavi",
  desc: "Diş kayıpları veya ileri madde kaybı olan uygun vakalarda, fonksiyonun ve ağız sağlığının desteklenmesine yönelik protetik tedavi seçeneklerinin değerlendirilmesi.",
  icon: "bone",
  img: "assets/service-11-prostodontik.jpg"
},
{
  id: "s8", n: "08",
  title: "Ortodontik Değerlendirme ve Tedavi",
  desc: "Kapanış bozuklukları, diş dizilim problemleri ve çene gelişimiyle ilişkili durumların değerlendirilmesi.",
  icon: "tooth",
  img: "assets/service-08-ortodonti.jpg"
},
{
  id: "s9", n: "09",
  title: "Pediyatrik Diş Hekimliği",
  desc: "Yavru kedi ve köpeklerde diş gelişimi, süt dişleri ve erken dönem ağız-diş sağlığı değerlendirmeleri.",
  icon: "paw",
  img: "assets/service-07-pediyatrik.jpg"
},
{
  id: "s10", n: "10",
  title: "Çene ve Ağız Cerrahisi",
  desc: "Kırıklar, ağız içi kitleler ve ileri cerrahi vakaların değerlendirilmesi.",
  icon: "bone",
  img: "assets/service-05-cerrahi.jpg"
},
{
  id: "s11", n: "11",
  title: "Anestezi ve Hasta Takibi",
  desc: "Dental işlemler öncesinde hastaya özel anestezi planlaması ve operasyon sonrası takip süreci.",
  icon: "anesthesia",
  img: "assets/service-06-anestezi.jpg"
}];


function Services() {
  const sectionRef = useScrollReveal();

  return (
    <section id="hizmetler" className="section section--alt" ref={sectionRef}>
      <div className="container-wide">
        <div style={servStyles.head} data-svc-head>
          <div className="scroll-rise" data-stag="0">
            <div className="eyebrow">Hizmetler</div>
            <h2 className="h-display h2" style={{ marginTop: 18, marginBottom: 0 }}>
              Bazı vakalar yalnızca <span className="orange-word">“diş taşı temizliği”nden</span> ibaret olmayabilir.
            </h2>
          </div>
          <div className="scroll-rise" data-stag="1" style={servStyles.intro}>
            <p className="lede" style={{ margin: 0 }}>
              Diş eti hastalıklarından kırık dişlere, kanal tedavilerinden çene
              cerrahisine kadar farklı alanlarda değerlendirme ve tedavi
              süreçleri yürütüyoruz.
            </p>
            <a href="Hizmetler.html" className="ulink" style={{ marginTop: 18, display: "inline-flex", alignItems: "center" }}>
              Tüm hizmetler <span className="arrow">→</span>
            </a>
          </div>
        </div>

        <div style={servStyles.grid} data-services-grid>
          {SERVICES.map((s, i) =>
          <a key={s.id} href={`Hizmetler.html#hizmet-${s.id}`} className="scroll-rise" data-stag={i % 3} style={servStyles.card}>
              <div style={servStyles.cardMediaWrap}>
                <img src={window.A(s.img)} alt={s.title} style={servStyles.cardMedia} loading="lazy" onError={(e) => { if (!e.currentTarget.dataset.fb) { e.currentTarget.dataset.fb = "1"; e.currentTarget.src = "assets/_placeholder.svg"; } }} />
              </div>
              <div style={servStyles.cardHead}>
                <span style={servStyles.cardNum}>{s.n}</span>
                <span style={servStyles.cardIcon}><Icon name={s.icon} size={18} /></span>
              </div>
              <h3 className="h-display h3" style={servStyles.cardTitle}>{s.title}</h3>
              <p style={servStyles.cardDesc}>{s.desc}</p>
              <div style={servStyles.cardCta}>
                <span>Detay</span>
                <Icon name="arrowRight" size={14} />
              </div>
            </a>
          )}
        </div>
      </div>

      {/* Style overlay for hover interactions that can't be done inline */}
      <style>{`
        a[data-svc]:hover { border-color: var(--pd-charcoal); transform: translateY(-2px); }
        a[data-svc]:hover .svc-icon { background: var(--pd-orange); color: #fff; }
      `}</style>
    </section>);

}

const servStyles = {
  head: {
    display: "grid",
    gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
    gap: 56, alignItems: "end",
    marginBottom: 56
  },
  intro: { display: "flex", flexDirection: "column", alignItems: "flex-start" },

  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gap: 20
  },
  cardMediaWrap: {
    margin: "-28px -26px 18px",
    aspectRatio: "4 / 3",
    overflow: "hidden",
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
    background: "var(--pd-neutral-50)"
  },
  cardMedia: {
    width: "100%", height: "100%",
    objectFit: "cover", display: "block"
  },
  card: {
    position: "relative",
    background: "#fff",
    border: "1px solid var(--pd-border-1)",
    borderRadius: 8,
    padding: "28px 26px 26px",
    overflow: "hidden",
    transition: "border-color 220ms var(--pd-ease-out), transform 220ms var(--pd-ease-out), box-shadow 220ms var(--pd-ease-out)",
    display: "flex", flexDirection: "column", gap: 10,
    cursor: "pointer"
  },
  cardHead: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    marginBottom: 8
  },
  cardNum: {
    fontFamily: "var(--pd-font-display)",
    fontSize: 26, lineHeight: 1, color: "var(--pd-orange)",
    letterSpacing: "-0.01em"
  },
  cardIcon: {
    width: 40, height: 40, borderRadius: 8,
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    background: "var(--pd-neutral-50)", color: "var(--pd-charcoal)",
    border: "1px solid var(--pd-border-1)",
    transition: "background-color 220ms, color 220ms, border-color 220ms"
  },
  cardTitle: {
    fontSize: "clamp(15px, 4.6vw, 22px)", margin: 0,
    fontFamily: "var(--pd-font-display)"
  },
  cardDesc: {
    fontSize: 14, lineHeight: 1.55,
    color: "var(--pd-fg-2)", margin: 0
  },
  cardCta: {
    display: "inline-flex", alignItems: "center", gap: 8,
    color: "var(--pd-orange)", fontWeight: 600, fontSize: 13,
    marginTop: 8
  }
};

window.Services = Services;