/* global React */
// sections.jsx — Site sections, all driven by cfg prop (from config.js).

// ── Icons ───────────────────────────────────────────────────────────────────
const Ico = {
  phone: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72a2 2 0 0 1 1.72 2z" />
    </svg>
  ),
  shield: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      <path d="M9 12l2 2 4-4" />
    </svg>
  ),
  clock: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" />
      <path d="M12 6v6l4 2" />
    </svg>
  ),
  heart: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
    </svg>
  ),
  paw: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <ellipse cx="5.5" cy="11" rx="2.2" ry="2.8"/>
      <ellipse cx="9.5" cy="6" rx="2" ry="2.6"/>
      <ellipse cx="14.5" cy="6" rx="2" ry="2.6"/>
      <ellipse cx="18.5" cy="11" rx="2.2" ry="2.8"/>
      <path d="M12 11.5c-3 0-5.5 2.8-5.5 5.5 0 1.7 1.4 3 3 3 1 0 1.5-.5 2.5-.5s1.5.5 2.5.5c1.6 0 3-1.3 3-3 0-2.7-2.5-5.5-5.5-5.5z"/>
    </svg>
  ),
  arrow: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  ),
  check: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12l5 5L20 7" />
    </svg>
  ),
  settings: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3" />
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
    </svg>
  ),
};

// Brand logo — uses cfg.logoUrl if present, otherwise paw mark in circle
function BrandMark({ cfg }) {
  if (cfg.logoUrl) {
    return <img className="brand__mark brand__mark--img" src={cfg.logoUrl} alt={cfg.brandName} />;
  }
  return <span className="brand__mark">{Ico.paw}</span>;
}

function Brand({ cfg, dark = false }) {
  return (
    <a className="brand" href="#top">
      <BrandMark cfg={cfg} />
      <span className="brand__name">
        <b>{cfg.brandName}</b>
        <span>{cfg.brandSub}</span>
      </span>
    </a>
  );
}

// ── EmergencyBar ────────────────────────────────────────────────────────────
function EmergencyBar({ cfg, onCall }) {
  return (
    <div className="emergency-bar" role="alert">
      <div className="emergency-bar__inner">
        <div className="emergency-bar__left">
          <span className="emergency-bar__dot" />
          <span className="emergency-bar__label">{cfg.brandTagline}</span>
        </div>
        <a className="emergency-bar__phone" href={`tel:${cfg.phoneTel}`} onClick={(e) => { e.preventDefault(); onCall(); }}>
          {cfg.phone}
        </a>
      </div>
    </div>
  );
}

// ── Nav ─────────────────────────────────────────────────────────────────────
function Nav({ cfg, onCall }) {
  return (
    <nav className="nav">
      <div className="nav__inner">
        <Brand cfg={cfg} />
        <div className="nav__links">
          <a href="#hizmetler">Hizmetler</a>
          <a href="#hakkimizda">Hakkımızda</a>
          <a href="#randevu">Randevu</a>
          <a href="#iletisim">İletişim</a>
        </div>
        <button className="nav__cta" onClick={onCall}>
          {Ico.phone}
          <span>Acil Ara</span>
        </button>
      </div>
    </nav>
  );
}

// ── Hero ────────────────────────────────────────────────────────────────────
function Hero({ cfg, onCall }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero__grid">
          <div className="hero__copy">
            <span className="hero__open reveal">
              <i />{cfg.heroEyebrow}
            </span>
            <h1 className="hero__title reveal delay-1">
              {cfg.heroTitlePre} <em>{cfg.heroTitleEm}</em> {cfg.heroTitlePost}
            </h1>
            <p className="hero__sub reveal delay-2">
              {cfg.heroSub}
            </p>
            <div className="hero__cta-row reveal delay-3">
              <button className="btn btn--primary btn--lg" onClick={onCall}>
                {Ico.phone}
                <span>{cfg.phone}</span>
              </button>
              <a className="btn btn--ghost btn--lg" href="#hizmetler">
                Hizmetler
              </a>
            </div>
            <div className="hero__meta reveal delay-3">
              <span>Ortalama Yanıt</span>
              <strong>5 dakika içinde</strong>
            </div>
          </div>
          <div className="hero__media reveal delay-2">
            <div className="hero__media-img" />
            <div className="hero__media-paws">
              <img src="assets/hero.png"  alt="hero" style={{ width: '100%', height: 'auto' ,objectFit: 'cover'}} />
            </div>
            <span className="hero__media-tag"><i />Şu anda açık</span>
          
          </div>
        </div>
        <div className="hero__stats reveal">
          <div className="stat">
            <span className="stat__num">7/24</span>
            <span className="stat__lbl">Açık Klinik</span>
          </div>
          <div className="stat">
            <span className="stat__num">{cfg.statYears}</span>
            <span className="stat__lbl">Yıl Tecrübe</span>
          </div>
          <div className="stat">
            <span className="stat__num">{cfg.statPets}</span>
            <span className="stat__lbl">Mutlu Dost</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Services ────────────────────────────────────────────────────────────────
const SERVICES = [
  { title: "7/24 Acil Müdahale", desc: "Gece gündüz, hafta sonu dahil. Acil durumlarda hemen arayın.", emergency: true },
  { title: "Genel Muayene", desc: "Detaylı sağlık kontrolü ve teşhis hizmetleri." },
  { title: "Aşı & Parazit", desc: "Karma aşı, kuduz aşısı, iç-dış parazit koruması." },
  { title: "Cerrahi Operasyon", desc: "Modern ekipmanla güvenli ameliyat ve kısırlaştırma." },
  { title: "Laboratuvar & Tahlil", desc: "Hızlı kan tahlili, idrar analizi ve görüntüleme." },
  { title: "Bakım & Tıraş", desc: "Profesyonel tüy bakımı, tırnak kesimi, hijyen hizmetleri." },
];

function Services({ onCall }) {
  return (
    <section className="services" id="hizmetler">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Hizmetlerimiz</span>
          <h2>Dostunuz için tam donanımlı bakım.</h2>
          <p style={{ color: "var(--ink-2)", maxWidth: "52ch", marginTop: 8 }}>
            Acil müdahaleden rutin kontrole, ameliyathaneden laboratuvara kadar her ihtiyaç tek çatı altında.
          </p>
        </div>
        <div className="services__grid">
          {SERVICES.map((s, i) => (
            <div
              key={i}
              className={`service reveal${s.emergency ? " is-emergency" : ""}`}
              onClick={s.emergency ? onCall : undefined}
              style={s.emergency ? { cursor: "pointer" } : undefined}
            >
              <span className="service__num">{String(i + 1).padStart(2, "0")} / 06</span>
              <h3 className="service__title">{s.title}</h3>
              <p className="service__desc">{s.desc}</p>
              {s.emergency && <span className="service__link">Şimdi Ara</span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── About ───────────────────────────────────────────────────────────────────
function About({ cfg }) {
  const VALUES = [
    { icon: Ico.shield, title: "Güvenilir Bakım", desc: "Lisanslı veteriner hekimler, steril klinik ortamı." },
    { icon: Ico.clock, title: `${cfg.statYears} Yıl Tecrübe`, desc: "Esenler ve çevresinde binlerce mutlu evcil dost." },
    { icon: Ico.heart, title: "Şefkatli Ekip", desc: "Hayvan dostlarımız ve sahipleri için empatiyle hizmet." },
  ];
  return (
    <section id="hakkimizda">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Hakkımızda</span>
          <h2>Esenler'in 7/24 güvenilir veteriner adresi.</h2>
        </div>
        <div className="about__grid">
          <div className="about__copy reveal">
            <p>{cfg.aboutP1}</p>
            <p>{cfg.aboutP2}</p>
          </div>
          <div className="values reveal delay-1">
            {VALUES.map((v, i) => (
              <div className="value" key={i}>
                <span className="value__icon">{v.icon}</span>
                <div>
                  <h4>{v.title}</h4>
                  <p>{v.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Hours ───────────────────────────────────────────────────────────────────
const DAYS = ["Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar"];
function Hours({ cfg, onCall }) {
  const jsDay = new Date().getDay();
  const todayIdx = (jsDay + 6) % 7;
  return (
    <section className="hours">
      <div className="container">
        <div className="hours__grid">
          <div className="hours__intro reveal">
            <span className="eyebrow" style={{ color: "#f7f3eaa0" }}>Çalışma Saatleri</span>
            <h2 style={{ marginTop: 10 }}>7 gün, 24 saat.</h2>
            <p style={{ marginTop: 14 }}>
              Hafta sonu ve resmi tatiller dahil her gün hizmetinizdeyiz. Acil durumda telefon hattımızı arayın, sizi en kısa sürede karşılayalım.
            </p>
            <button className="btn btn--emergency btn--lg" onClick={onCall}>
              {Ico.phone}
              <span>Hemen Ara: {cfg.phone}</span>
            </button>
          </div>
          <div className="hours__table reveal delay-1">
            {DAYS.map((d, i) => (
              <div key={d} className={`hours__row${i === todayIdx ? " is-today" : ""}`}>
                <span className="hours__day">{d}{i === todayIdx ? " · Bugün" : ""}</span>
                <span className="hours__time">00:00 — 24:00</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Testimonials ────────────────────────────────────────────────────────────
const TESTIMONIALS = [
  { name: "Ayşe Y.", pet: "Boncuk · Tekir kedi", quote: "Gece 2'de kedimiz hastalandı, telefonu açar açmaz yönlendirdiler. 10 dakika içinde kliniğe vardık, ekip kapıda bekliyordu." },
  { name: "Mehmet K.", pet: "Şila · Golden", quote: "Köpeğimin ameliyatı sonrası süreç boyunca her gün arayıp durumunu sordular. Bu kadar ilgili bir veteriner görmedim." },
  { name: "Zeynep T.", pet: "Pamuk · Britanya", quote: "Aşı takibi için düzenli geliyoruz. Ortam çok temiz, doktorlar sabırlı. Pamuk artık veteriner deyince korkmuyor." },
  { name: "Cem A.", pet: "Karamel · Sokak", quote: "Yaralı bulduğum kediyi gece getirdim. Hiç ücret bile sormadılar, önce müdahale ettiler. Teşekkürler ekip." },
];

function Testimonials({ cfg }) {
  return (
    <section>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Mutlu Dostlar</span>
          <h2>{cfg.statPets} evcil dostun ailesi anlatıyor.</h2>
        </div>
        <div className="testimonials__rail reveal">
          {TESTIMONIALS.map((t, i) => (
            <div className="testimonial" key={i}>
              <div className="testimonial__stars">★ ★ ★ ★ ★</div>
              <p className="testimonial__quote">{t.quote}</p>
              <div className="testimonial__by">
                <span className="testimonial__avatar" />
                <div>
                  <div className="testimonial__name">{t.name}</div>
                  <div className="testimonial__pet">{t.pet}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="testimonials__count">→ kaydırın · binlerce yorumdan birkaçı</div>
      </div>
    </section>
  );
}

// ── Gallery ─────────────────────────────────────────────────────────────────
const GALLERY = [
  { label: "Klinik girişi · 4:5", cls: "gallery__cell--tall" },
  { label: "Muayene odası", cls: "" },
  { label: "Cerrahi salonu", cls: "" },
  { label: "Bekleme alanı · panorama", cls: "gallery__cell--wide" },
  { label: "Laboratuvar", cls: "" },
  { label: "Ekibimiz", cls: "" },
];
function Gallery() {
  return (
    <section className="gallery">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Klinikten Kareler</span>
          <h2>Dostunuzu emin ellere bırakın.</h2>
        </div>
        <div className="gallery__grid reveal">
          {GALLERY.map((g, i) => (
            <div className={`gallery__cell ${g.cls}`} key={i}>
              <div className="gallery__cell-fill" />
              <div className="gallery__cell-label">{g.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Appointment Form ────────────────────────────────────────────────────────
const PETS = ["Köpek", "Kedi", "Kuş", "Tavşan", "Diğer"];
const REASONS = ["Acil durum", "Genel muayene", "Aşı / Parazit", "Cerrahi / Operasyon", "Laboratuvar / Tahlil", "Bakım & Tıraş"];

function Appointment({ cfg }) {
  const [form, setForm] = React.useState({
    name: "", phone: "", petName: "", petType: "Köpek", reason: "Genel muayene", date: "", time: "10:00", note: "",
  });
  const [submitted, setSubmitted] = React.useState(false);
  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };
  const today = new Date().toISOString().split("T")[0];

  if (submitted) {
    return (
      <section id="randevu">
        <div className="container">
          <div className="section-head reveal">
            <span className="eyebrow">Randevu</span>
            <h2>Randevu talebiniz alındı.</h2>
          </div>
          <div className="form__success" style={{ maxWidth: 560 }}>
            <span style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--accent)", color: "var(--ink)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{Ico.check}</span>
            <div className="form__success-title">Teşekkürler {form.name || "dostum"}, görüştük sayılır.</div>
            <div className="form__success-body">
              {form.petName ? `${form.petName} için ` : ""}{form.date || "en kısa zamanda"} {form.time && `, ${form.time}`} randevunuz değerlendirmeye alındı. 15 dakika içinde sizi telefonla arayacağız.
            </div>
            <div className="form__success-body" style={{ opacity: 0.75 }}>
              Acil bir durumsa lütfen doğrudan arayın: <strong>{cfg.phone}</strong>
            </div>
            <button className="btn btn--ghost" style={{ background: "var(--on-primary)", color: "var(--primary)", marginTop: 8 }} onClick={() => setSubmitted(false)}>
              Yeni randevu →
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="randevu">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Online Randevu</span>
          <h2>Acil değilse, randevu alın.</h2>
        </div>
        <div className="appointment__grid">
          <div className="appointment__intro reveal">
            <p>
              Rutin muayene, aşı veya bakım hizmetleri için formu doldurun. Uygunluk durumunu 15 dakika içinde telefonla bildiriyoruz.
            </p>
            <p style={{ marginTop: 16, color: "var(--muted)", fontSize: 14 }}>
              <strong style={{ color: "var(--emergency)" }}>Acil durumda</strong> form doldurmayın — doğrudan arayın.
            </p>
            <a href={`tel:${cfg.phoneTel}`} className="btn btn--emergency" style={{ marginTop: 16 }}>
              {Ico.phone} {cfg.phone}
            </a>
          </div>
          <form className="form reveal delay-1" onSubmit={onSubmit}>
            <div className="form__row form__row--split">
              <div className="form__row">
                <label className="form__label">Adınız</label>
                <input className="form__input" required value={form.name} onChange={update("name")} placeholder="Ayşe Yılmaz" />
              </div>
              <div className="form__row">
                <label className="form__label">Telefon</label>
                <input className="form__input" required type="tel" value={form.phone} onChange={update("phone")} placeholder="0xxx xxx xx xx" />
              </div>
            </div>
            <div className="form__row">
              <label className="form__label">Dostunuzun Türü</label>
              <div className="form__pet-chips">
                {PETS.map((p) => (
                  <button type="button" key={p} className="form__pet-chip" aria-pressed={form.petType === p} onClick={() => setForm((f) => ({ ...f, petType: p }))}>
                    {p}
                  </button>
                ))}
              </div>
            </div>
            <div className="form__row form__row--split">
              <div className="form__row">
                <label className="form__label">Dostunuzun Adı</label>
                <input className="form__input" value={form.petName} onChange={update("petName")} placeholder="Boncuk" />
              </div>
              <div className="form__row">
                <label className="form__label">Hizmet</label>
                <select className="form__select" value={form.reason} onChange={update("reason")}>
                  {REASONS.map((r) => <option key={r} value={r}>{r}</option>)}
                </select>
              </div>
            </div>
            <div className="form__row form__row--split">
              <div className="form__row">
                <label className="form__label">Tarih</label>
                <input className="form__input" type="date" min={today} value={form.date} onChange={update("date")} />
              </div>
              <div className="form__row">
                <label className="form__label">Saat</label>
                <input className="form__input" type="time" value={form.time} onChange={update("time")} />
              </div>
            </div>
            <div className="form__row">
              <label className="form__label">Not (opsiyonel)</label>
              <textarea className="form__textarea" value={form.note} onChange={update("note")} placeholder="Belirtmek istediğiniz semptom, ilaç, alerji..." />
            </div>
            <div className="form__submit-row">
              <button type="submit" className="btn btn--primary btn--lg">
                Randevu Talebi Gönder {Ico.arrow}
              </button>
              <p className="form__note">15 dk içinde sizi arayacağız · Onay sonrası geçerlidir</p>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

// ── Contact + Map ───────────────────────────────────────────────────────────
function Contact({ cfg, onCall }) {
  return (
    <section id="iletisim">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">İletişim</span>
          <h2>Bize ulaşın.</h2>
          <p style={{ color: "var(--ink-2)", marginTop: 8 }}>
            Acil durumda lütfen önce telefonla arayın. Klinik 7/24 açıktır.
          </p>
        </div>
        <div className="contact__grid">
          <div className="contact__list reveal">
            <div className="contact__item">
              <span className="contact__item-label">Telefon · 7/24</span>
              <a className="contact__item-value" href={`tel:${cfg.phoneTel}`} onClick={(e) => { e.preventDefault(); onCall(); }} style={{ color: "var(--primary)" }}>
                {cfg.phone}
              </a>
              <span className="contact__item-meta">Acil hat — gece gündüz açık</span>
            </div>
            <div className="contact__item">
              <span className="contact__item-label">Adres</span>
              <span className="contact__item-value" style={{ fontSize: 20, lineHeight: 1.3 }}>
                {cfg.addressLine1}
              </span>
              <span className="contact__item-meta">{cfg.addressLine2}</span>
            </div>
            <div className="contact__item">
              <span className="contact__item-label">Çalışma Saatleri</span>
              <span className="contact__item-value">7/24 Açık</span>
              <span className="contact__item-meta">Hafta sonu ve resmi tatiller dahil</span>
            </div>
            {cfg.whatsapp && (
              <div className="contact__item">
                <span className="contact__item-label">WhatsApp</span>
                <a className="contact__item-value" href={`https://wa.me/${cfg.whatsapp.replace(/\D/g, "")}`} target="_blank" rel="noreferrer" style={{ color: "var(--primary)" }}>
                  {cfg.whatsapp}
                </a>
                <span className="contact__item-meta">Mesaj atın, geri dönelim</span>
              </div>
            )}
          </div>
          <div className="contact__map reveal delay-1">
            <div className="contact__map-tiles" />
            <div className="contact__map-road contact__map-road--d" />
            <div className="contact__map-road contact__map-road--h" />
            <div className="contact__map-road contact__map-road--v" />
            <div className="contact__map-pin">
              <div className="contact__map-pin-dot">
                <span className="contact__map-pin-pulse" />
              </div>
            </div>
            <div className="contact__map-card">
              <div>
                <div className="contact__map-card-name">{cfg.brandName}</div>
                <div className="contact__map-card-dist">{cfg.addressLine1}</div>
              </div>
              <button className="contact__map-card-btn" onClick={() => window.open(cfg.mapsUrl, "_blank")}>Yol Tarifi</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ──────────────────────────────────────────────────────────────────
function Footer({ cfg, onCall }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <Brand cfg={cfg} />
            <p style={{ marginTop: 14, color: "#f7f3ea99", maxWidth: "36ch" }}>
              7 gün 24 saat, hafta sonu ve tatiller dahil hayvan dostlarınız için buradayız.
            </p>
          </div>
          <div className="footer__col">
            <h5>Hızlı Bağlantılar</h5>
            <ul>
              <li><a href="#hizmetler">Hizmetler</a></li>
              <li><a href="#hakkimizda">Hakkımızda</a></li>
              <li><a href="#randevu">Randevu</a></li>
              <li><a href="#iletisim">İletişim</a></li>
              <li><a href="ayarlar.html" style={{ opacity: 0.6 }}>Ayarlar</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>İletişim</h5>
            <ul>
              <li><a href={`tel:${cfg.phoneTel}`} onClick={(e) => { e.preventDefault(); onCall(); }}>{cfg.phone}</a></li>
              <li>{cfg.addressLine1}</li>
              <li>{cfg.addressLine2}</li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>{cfg.copyright}</span>
          <a href="ayarlar.html" style={{ display: "inline-flex", alignItems: "center", gap: 6 }} title="Site ayarları">
            {Ico.settings} Ayarlar
          </a>
        </div>
      </div>
    </footer>
  );
}

// ── Floating Call Button ────────────────────────────────────────────────────
function FAB({ cfg, onCall }) {
  return (
    <button className="fab" onClick={onCall} aria-label={`Acil ara ${cfg.phone}`}>
      <span className="fab__ring">{Ico.phone}</span>
      <span>
        <div style={{ fontSize: 9, opacity: 0.75, letterSpacing: "0.14em", textTransform: "uppercase", lineHeight: 1 }}>7/24 Acil</div>
        <div className="fab__num">{cfg.phone}</div>
      </span>
    </button>
  );
}

// ── Call Modal ──────────────────────────────────────────────────────────────
function CallModal({ cfg, open, onClose }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog">
        <span style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--emergency)", color: "#fff7f0", display: "inline-flex", alignItems: "center", justifyContent: "center", margin: "0 auto 4px" }}>
          {Ico.phone}
        </span>
        <h3>Şimdi aranıyor</h3>
        <p>Veteriner hekimimiz 7/24 hatta. Ortalama yanıt süresi <strong style={{ color: "var(--ink)" }}>5 dakika</strong>.</p>
        <div className="modal__num">{cfg.phone}</div>
        <div className="modal__actions">
          <button className="btn btn--ghost" onClick={onClose}>Vazgeç</button>
          <a className="btn btn--emergency" href={`tel:${cfg.phoneTel}`}>
            {Ico.phone} Ara
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Ico, BrandMark, Brand,
  EmergencyBar, Nav, Hero, Services, About, Hours,
  Testimonials, Gallery, Appointment, Contact, Footer,
  FAB, CallModal,
});