/* global React */
// ============================================
// A_LIZ HAIRDRESSER — Inner pages
// ============================================

const { SERVICES: ALL_SERVICES, GALLERY: ALL_GALLERY, CATEGORIES, SERVICE_META, SERVICE_DETAILS } = window.AL_DATA;
const { useLang: useLangInner, useT: useTInner, useReveal: useRevealInner, useRoute: useRouteInner, Icon: IconInner, CtaStrip: CtaStripInner, WA_LINK: WA_LINK_INNER, usePageSEO: usePageSEOInner } = window;
const { useState: useStateP, useEffect: useEffectP } = React;

// pick helper for {tr,en,...} objects
function L(obj, lang) {
  if (!obj) return "";
  return obj[lang] || obj.tr || obj.en || "";
}

// Build a WhatsApp link prefilled with the service name
function svcWaLink(name) {
  const msg = `Merhaba, "${name}" hizmeti için randevu / bilgi almak istiyorum.`;
  return `https://wa.me/905388745166?text=${encodeURIComponent(msg)}`;
}

// ========== PAGE HEAD ==========
function PageHead({ crumb, eyebrowKey, titleKey, ledeKey }) {
  const t = useTInner();
  const { go } = useRouteInner();
  return (
    <section className="page-head">
      <div className="shell">
        <div className="crumb">
          <a onClick={() => go('home')}>{t("nav_home")}</a>
          <span className="sep" />
          <span>{crumb}</span>
        </div>
        <h1 className="display display-xl">{t(titleKey)}</h1>
        <p className="lede">{t(ledeKey)}</p>
      </div>
    </section>
  );
}

// ========== SERVICE DETAIL DRAWER ==========
function ServiceDrawer({ svc, lang, onClose }) {
  const t = useTInner();
  useEffectP(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    document.body.classList.add("drawer-open");
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
      document.body.classList.remove("drawer-open");
    };
  }, [onClose]);

  if (!svc) return null;
  const meta = SERVICE_META[svc.id] || {};
  const detail = SERVICE_DETAILS[svc.id] || {};
  const name = svc.names[lang] || svc.names.tr;

  return (
    <div className="svc-drawer-overlay" onClick={onClose}>
      <button className="svc-drawer-close" onClick={(e) => { e.stopPropagation(); onClose(); }} aria-label="close">×</button>
      <div className="svc-drawer" onClick={(e) => e.stopPropagation()}>
        <div className="svc-drawer-media">
          <img loading="lazy" decoding="async" src={svc.img} alt={name} />
          <div className="svc-drawer-media-tag">
            <span>{name}</span>
            <small>{svc.names.en}</small>
          </div>
        </div>
        <div className="svc-drawer-content">
          <div className="svc-drawer-head">
            <h2 className="display display-sm">{name}</h2>
            <p className="svc-drawer-long">{L(detail.long, lang) || (svc.desc[lang] || svc.desc.tr)}</p>
          </div>

          <div className="svc-drawer-facts">
            {meta.dur && (
              <div className="svc-fact">
                <span className="k">{t("svc_dur_k")}</span>
                <span className="v">{L(meta.dur, lang)}</span>
              </div>
            )}
            {meta.brand && (
              <div className="svc-fact">
                <span className="k">{t("svc_brand_k")}</span>
                <span className="v">{meta.brand}</span>
              </div>
            )}
          </div>

          {detail.forWhom && (
            <div className="svc-drawer-block">
              <span className="svc-block-label">{t("svc_forwhom_k")}</span>
              <p>{L(detail.forWhom, lang)}</p>
            </div>
          )}

          {detail.steps && (
            <div className="svc-drawer-block">
              <span className="svc-block-label">{t("svc_process_k")}</span>
              <div className="svc-steps">
                {detail.steps.map((s, i) => (
                  <div className="svc-step" key={i}>
                    <span className="svc-step-num">{i + 1}</span>
                    <span className="svc-step-text">{L(s, lang)}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          <a className="btn btn-primary svc-drawer-cta" href={svcWaLink(name)} target="_blank" rel="noopener">
            <span><IconInner.Wa /> {t("cta_book")} · {t("cta_whatsapp")}</span>
          </a>
        </div>
      </div>
    </div>
  );
}

// ========== SERVICES PAGE ==========
function ServicesPage() {
  usePageSEOInner('services');
  const t = useTInner();
  const { lang } = useLangInner();
  const ref = useRevealInner();
  const [cat, setCat] = useStateP("all");
  const [active, setActive] = useStateP(null);

  const filtered = cat === "all"
    ? ALL_SERVICES
    : ALL_SERVICES.filter((s) => (SERVICE_META[s.id] || {}).cat === cat);

  return (
    <>
      <PageHead crumb={t("page_services_title")} titleKey="page_services_title" ledeKey="page_services_lede" />

      <section className="section" ref={ref} data-screen-label="Services List">
        <div className="shell">
          {/* Category tabs */}
          <div className="svc-cats">
            {CATEGORIES.map((c) => {
              const count = c.id === "all" ? ALL_SERVICES.length : ALL_SERVICES.filter((s) => (SERVICE_META[s.id] || {}).cat === c.id).length;
              return (
                <button
                  key={c.id}
                  className={`svc-cat ${cat === c.id ? "active" : ""}`}
                  onClick={() => setCat(c.id)}
                >
                  {L(c.label, lang)}
                  <span className="svc-cat-count">{count}</span>
                </button>
              );
            })}
          </div>

          {/* Service list */}
          <div className="svc-list" key={cat}>
            {filtered.map((svc, i) => {
              const meta = SERVICE_META[svc.id] || {};
              return (
                <button key={svc.id} className="svc-row" onClick={() => setActive(svc)}>
                  <div className="svc-num">{String(i + 1).padStart(2, "0")}</div>
                  <div>
                    <div className="svc-name">
                      {svc.names[lang] || svc.names.tr}
                      {lang !== "en" && <small>{svc.names.en}</small>}
                    </div>
                  </div>
                  <div className="svc-desc">
                    {svc.desc[lang] || svc.desc.tr}
                    {meta.dur && <span className="svc-desc-meta"><IconInner.Clock /> {L(meta.dur, lang)}</span>}
                  </div>
                  <div className="svc-icon" />
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {active && <ServiceDrawer svc={active} lang={lang} onClose={() => setActive(null)} />}

      <CtaStripInner />
    </>
  );
}

// ========== GALLERY PAGE ==========
function GalleryPage() {
  usePageSEOInner('gallery');
  const t = useTInner();
  const ref = useRevealInner();
  const { lang } = useLangInner();

  const comingSoon = {
    tr: { tag: "Yakında", title: "Yeni çekimlerimiz geliyor.", sub: "Salonumuzdan taze kareler — en kısa sürede burada.", note: "Bu arada Instagram'dan canlı takip edebilirsiniz." },
    en: { tag: "Coming Soon", title: "Fresh shots on their way.", sub: "Behind-the-scenes moments from our salon — arriving shortly.", note: "Follow us on Instagram for live updates." },
    ar: { tag: "قريباً", title: "صور جديدة في الطريق.", sub: "لحظات من صالوننا — ستصل قريباً.", note: "تابعونا على إنستغرام." },
    ru: { tag: "Скоро", title: "Новые съёмки уже в пути.", sub: "Живые кадры из нашего салоне — совсем скоро.", note: "Следите за нами в Instagram." },
    it: { tag: "In Arrivo", title: "Nuovi scatti in arrivo.", sub: "Momenti dal nostro salon — disponibili a breve.", note: "Seguici su Instagram per aggiornamenti." },
    de: { tag: "Demnächst", title: "Neue Aufnahmen kommen.", sub: "Frische Blicke aus unserem Salon — bald hier.", note: "Folgt uns auf Instagram." },
    fr: { tag: "Bientôt", title: "Nouvelles photos en chemin.", sub: "Des instants de notre salon — à venir très prochainement.", note: "Suivez-nous sur Instagram." },
    es: { tag: "Próximamente", title: "Nuevas fotos en camino.", sub: "Momentos de nuestro salon — llegando pronto.", note: "Síguenos en Instagram." },
  };
  const cs = comingSoon[lang] || comingSoon.tr;

  const preview = ALL_GALLERY.slice(0, 6);

  return (
    <>
      <PageHead crumb={t("page_gallery_title")} titleKey="page_gallery_title" ledeKey="page_gallery_lede" />

      {/* Coming soon banner */}
      <section className="gal-coming-wrap" ref={ref}>
        <div className="shell">
          <div className="gal-coming reveal">
            <div className="gal-coming-badge">{cs.tag}</div>
            <h2 className="gal-coming-title">{cs.title}</h2>
            <p className="gal-coming-sub">{cs.sub}</p>
            <p className="gal-coming-note">{cs.note}</p>
            <a className="btn btn-primary" href="https://www.instagram.com/a_lizhairdresser" target="_blank" rel="noopener" style={{ marginTop: 8 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
              @a_lizhairdresser
            </a>
          </div>

          {/* Blurred preview grid */}
          <div className="gal-preview-grid reveal reveal-delay-1">
            {preview.map((g, i) => (
              <div key={i} className="gal-preview-item">
                <img loading="lazy" decoding="async" src={g.img} alt={`A_Liz Hairdresser gallery — hair transformation ${i + 1}`} />
                <div className="gal-preview-blur" />
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaStripInner />
    </>
  );
}

// ========== ABOUT PAGE ==========
function AboutPage() {
  usePageSEOInner('about');
  const t = useTInner();
  const ref = useRevealInner();
  return (
    <>
      <PageHead crumb={t("page_about_title")} titleKey="page_about_title" ledeKey="page_about_lede" />
      <section className="section" ref={ref} data-screen-label="About Story">
        <div className="shell">
          <div className="about-hero">
            <div className="reveal">
              <div className="eyebrow">{t("rv_eyebrow")}</div>
              <h2 className="display display-lg" style={{ marginTop: 16 }}>{t("about_h1")}</h2>
              <p style={{ marginTop: 24 }}>{t("about_p1")}</p>
              <p>{t("about_p2")}</p>
              <div style={{ marginTop: 32 }}>
                <a className="btn btn-primary" href={WA_LINK_INNER} target="_blank" rel="noopener">
                  <span><IconInner.Wa /> {t("cta_book")}</span>
                </a>
              </div>
            </div>
            <div className="about-img reveal reveal-delay-1">
              <img loading="eager" decoding="async" src="assets/img/hero-2.webp" alt="Salon" />
            </div>
          </div>
        </div>
      </section>

      <section className="section section-tight" data-screen-label="About Values">
        <div className="shell">
          <div className="values-grid">
            {[
              { numStr: "i", t: "val1_t", d: "val1_d" },
              { numStr: "ii", t: "val2_t", d: "val2_d" },
              { numStr: "iii", t: "val3_t", d: "val3_d" },
            ].map((v, i) => (
              <div className="value-card" key={i}>
                <span className="value-num">— {v.numStr} —</span>
                <h3 className="value-title">{t(v.t)}</h3>
                <p className="value-desc">{t(v.d)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaStripInner />
    </>
  );
}

// ========== CONTACT PAGE ==========
function ContactPage() {
  usePageSEOInner('contact');
  const t = useTInner();
  const ref = useRevealInner();
  const { lang } = useLangInner();

  const hours = {
    tr: "Her gün 10:00 – 24:00",
    en: "Daily 10:00 – 24:00",
    ar: "يومياً 10:00 – 24:00",
    ru: "Ежедневно 10:00 – 24:00",
    it: "Ogni giorno 10:00 – 24:00",
    de: "Täglich 10:00 – 24:00",
    fr: "Tous les jours 10h – 24h",
    es: "Todos los días 10:00 – 24:00",
  };

  const channels = [
    {
      icon: <IconInner.Wa />,
      label: "WhatsApp",
      value: "+90 538 874 5166",
      sub: { tr: "Randevu & bilgi için yaz", en: "Message for booking & info", ar: "للحجز والاستفسار", ru: "Для записи и вопросов", it: "Per prenotare e info", de: "Für Termine & Infos", fr: "Réservation & renseignements", es: "Para citas e información" },
      href: WA_LINK_INNER,
    },
    {
      icon: <IconInner.Instagram />,
      label: "Instagram",
      value: "@a_lizhairdresser",
      sub: { tr: "Güncel çalışmalar & haberler", en: "Latest work & news", ar: "أحدث الأعمال والأخبار", ru: "Последние работы и новости", it: "Ultime novità", de: "Aktuelle Arbeiten & News", fr: "Dernières créations & actualités", es: "Últimas obras y noticias" },
      href: "https://www.instagram.com/a_lizhairdresser",
    },
    {
      icon: <IconInner.Pin />,
      label: { tr: "Adres", en: "Address", ar: "العنوان", ru: "Адрес", it: "Indirizzo", de: "Adresse", fr: "Adresse", es: "Dirección" },
      value: { tr: "Alemdar Mah., Divanyolu Cad. No.50, Divan Bazar / Fatih, İstanbul", en: "Alemdar, Divanyolu St. No.50, Divan Bazar / Fatih, Istanbul", ar: "ش. ديوانيولو رقم 50، ديفان بازار، الفاتح / إسطنبول", ru: "Дивайолу ул., д.50, Диван Базар, Фатих / Стамбул", it: "Via Divanyolu 50, Divan Bazar / Fatih, Istanbul", de: "Divanyolu Str. 50, Divan Bazar / Fatih, Istanbul", fr: "Rue Divanyolu 50, Divan Bazar / Fatih, Istanbul", es: "Divanyolu No.50, Divan Bazar / Fatih, Estambul" },
      sub: { tr: "Sultanahmet'e 2 dk · Topkapı Sarayı'na 5 dk", en: "2 min to Sultanahmet · 5 min to Topkapi Palace", ar: "2 دقيقة من السلطان أحمد · 5 دقائق من قصر توبقابي", ru: "2 мин до Султанахмет · 5 мин до Дворца Топкапы", it: "2 min da Sultanahmet · 5 min da Palazzo Topkapi", de: "2 Min. zum Sultanahmet · 5 Min. zum Topkapi-Palast", fr: "2 min de Sultanahmet · 5 min du Palais Topkapi", es: "2 min a Sultanahmet · 5 min al Palacio Topkapi" },
      href: "https://maps.google.com/?q=Alemdar+Mahallesi+Divanyolu+Caddesi+No+50+Fatih+Istanbul",
    },
  ];

  return (
    <>
      <PageHead crumb={t("page_contact_title")} titleKey="page_contact_title" ledeKey="page_contact_lede" />

      <section className="section contact-section" ref={ref} data-screen-label="Contact">
        <div className="shell">
          <div className="contact-layout">

            {/* Left — channels */}
            <div className="contact-channels reveal">
              <div className="eyebrow" style={{ marginBottom: 24 }}>{t("page_contact_title")}</div>
              {channels.map((ch, i) => (
                <a key={i} className="contact-ch" href={ch.href} target="_blank" rel="noopener">
                  <span className="contact-ch-icon">{ch.icon}</span>
                  <div className="contact-ch-body">
                    <span className="contact-ch-label">{typeof ch.label === "object" ? (ch.label[lang] || ch.label.tr) : ch.label}</span>
                    <span className="contact-ch-value">{typeof ch.value === "object" ? (ch.value[lang] || ch.value.tr) : ch.value}</span>
                    <span className="contact-ch-sub">{ch.sub[lang] || ch.sub.tr}</span>
                  </div>
                  <span className="contact-ch-arrow">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </span>
                </a>
              ))}
            </div>

            {/* Right — hours + CTA */}
            <div className="contact-right reveal reveal-delay-1">
              <div className="contact-hours-card">
                <div className="contact-hours-eyebrow">{t("loc_hours_k")}</div>
                <div className="contact-hours-value">{hours[lang] || hours.tr}</div>
                <div className="contact-hours-note">{t("loc_hours_sub")}</div>
                <div className="contact-hours-sep"></div>
                <a className="btn btn-primary" href={WA_LINK_INNER} target="_blank" rel="noopener" style={{ width: "100%", justifyContent: "center" }}>
                  <IconInner.Wa /> {t("cta_book")} · WhatsApp
                </a>
              </div>

              {/* Rich map — same as homepage */}
              <div className="contact-map-mini">
                <div className="map-stylized"></div>
                <div className="map-grid"></div>
                <svg viewBox="0 0 600 300" style={{position:"absolute",inset:0,width:"100%",height:"100%"}} xmlns="http://www.w3.org/2000/svg">
                  <defs>
                    <radialGradient id="cMapGlow" cx="50%" cy="50%" r="50%">
                      <stop offset="0%" stopColor="rgba(183,110,121,0.18)" />
                      <stop offset="100%" stopColor="rgba(183,110,121,0)" />
                    </radialGradient>
                  </defs>
                  <ellipse cx="300" cy="150" rx="220" ry="120" fill="url(#cMapGlow)" />
                  <path d="M20,140 Q120,132 200,138 Q280,144 380,138 Q460,132 580,140" stroke="rgba(255,255,255,0.22)" strokeWidth="5" fill="none" strokeLinecap="round"/>
                  <path d="M20,140 Q120,132 200,138 Q280,144 380,138 Q460,132 580,140" stroke="rgba(183,110,121,0.6)" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
                  <path d="M200,10 Q225,60 248,110 Q262,130 272,140" stroke="rgba(255,255,255,0.14)" strokeWidth="3.5" fill="none" strokeLinecap="round"/>
                  <path d="M200,10 Q225,60 248,110 Q262,130 272,140" stroke="rgba(183,110,121,0.38)" strokeWidth="1" fill="none"/>
                  <path d="M180,140 L175,240 Q185,270 200,290" stroke="rgba(255,255,255,0.08)" strokeWidth="2" fill="none"/>
                  <path d="M380,140 L385,230 Q395,265 415,290" stroke="rgba(255,255,255,0.08)" strokeWidth="2" fill="none"/>
                  <rect x="80" y="50" width="72" height="56" rx="3" fill="rgba(183,110,121,0.1)" stroke="rgba(183,110,121,0.35)" strokeWidth="1"/>
                  <rect x="430" y="180" width="90" height="68" rx="3" fill="rgba(183,110,121,0.08)" stroke="rgba(183,110,121,0.25)" strokeWidth="1"/>
                  <ellipse cx="230" cy="195" rx="46" ry="32" fill="rgba(183,110,121,0.07)" stroke="rgba(183,110,121,0.2)" strokeWidth="1" strokeDasharray="4 3"/>
                  <text x="85" y="80" fill="rgba(255,255,255,0.52)" fontSize="8.5" fontFamily="Inter,sans-serif" fontWeight="600">Ayasofya</text>
                  <text x="437" y="215" fill="rgba(255,255,255,0.48)" fontSize="8.5" fontFamily="Inter,sans-serif" fontWeight="600">Topkapı</text>
                  <text x="198" y="194" fill="rgba(255,255,255,0.44)" fontSize="8" fontFamily="Inter,sans-serif">Sultanahmet</text>
                  <text x="134" y="128" fill="rgba(255,255,255,0.52)" fontSize="8" fontFamily="Inter,sans-serif" fontWeight="600" letterSpacing="0.06em">DİVANYOLU CAD.</text>
                  <line x1="300" y1="140" x2="116" y2="78" stroke="rgba(183,110,121,0.28)" strokeWidth="1" strokeDasharray="4 4"/>
                  <line x1="300" y1="140" x2="475" y2="214" stroke="rgba(183,110,121,0.22)" strokeWidth="1" strokeDasharray="4 4"/>
                  <line x1="300" y1="140" x2="230" y2="178" stroke="rgba(183,110,121,0.24)" strokeWidth="1" strokeDasharray="4 4"/>
                  <rect x="148" y="94" width="38" height="14" rx="7" fill="rgba(183,110,121,0.4)"/>
                  <text x="167" y="105" fill="white" fontSize="7.5" fontFamily="Inter,sans-serif" fontWeight="700" textAnchor="middle">2 dk</text>
                  <rect x="444" y="170" width="38" height="14" rx="7" fill="rgba(183,110,121,0.32)"/>
                  <text x="463" y="181" fill="white" fontSize="7.5" fontFamily="Inter,sans-serif" fontWeight="700" textAnchor="middle">5 dk</text>
                  <rect x="246" y="153" width="38" height="14" rx="7" fill="rgba(183,110,121,0.32)"/>
                  <text x="265" y="164" fill="white" fontSize="7.5" fontFamily="Inter,sans-serif" fontWeight="700" textAnchor="middle">2 dk</text>
                </svg>
                <div className="map-pin" style={{top:"44%",left:"50%"}}>
                  <div className="map-pin-label"><span style={{color:"var(--rose)",marginRight:4}}>✦</span>Divanyolu No.50</div>
                  <div className="map-pin-dot"></div>
                </div>
                <div className="map-compass">
                  <svg viewBox="0 0 32 32" width="28" height="28">
                    <circle cx="16" cy="16" r="15" fill="rgba(10,6,4,0.7)" stroke="rgba(183,110,121,0.4)" strokeWidth="1"/>
                    <path d="M16 4 L18 14 L16 12 L14 14 Z" fill="rgba(183,110,121,0.9)"/>
                    <path d="M16 28 L18 18 L16 20 L14 18 Z" fill="rgba(255,255,255,0.3)"/>
                    <text x="16" y="10" fill="rgba(183,110,121,0.9)" fontSize="5" fontFamily="Inter" fontWeight="700" textAnchor="middle">N</text>
                  </svg>
                </div>
                <a className="map-overlay" href="https://maps.google.com/?q=Alemdar+Mahallesi+Divanyolu+Caddesi+No+50+Fatih+Istanbul" target="_blank" rel="noopener">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                  Google Maps'te Aç
                </a>
              </div>
            </div>

          </div>
        </div>
      </section>
    </>
  );
}



// ========== PRIVACY / KVKK PAGE ==========
function PrivacyPage() {
  const { lang } = useLangInner();
  const { go } = useRouteInner();
  const content = {
    tr: {
      eyebrow: "Yasal",
      title: "KVKK & Gizlilik Politikası",
      updated: "Son güncelleme: Ocak 2025",
      sections: [
        {
          h: "1. Veri Sorumlusu",
          p: "A_LizHairdresser olarak, 6698 sayılı Kişisel Verilerin Korunması Kanunu (KVKK) kapsamında veri sorumlusu sıfatıyla hareket etmekteyiz. Salonumuz İstanbul Fatih, Alemdar Mahallesi, Divanyolu Caddesi No.50, Divan Bazar adresinde faaliyet göstermektedir. İletişim: info@alizhairdresser.com | WhatsApp: +90 538 874 51 66"
        },
        {
          h: "2. Toplanan Veriler",
          p: "Sitemizi ziyaret ettiğinizde veya randevu talebinde bulunduğunuzda aşağıdaki kişisel verileriniz işlenebilir: Ad ve soyad, telefon numarası, e-posta adresi, talep edilen hizmet bilgisi ve iletişim notları. Bu veriler yalnızca randevu yönetimi ve hizmet sunumu amacıyla kullanılmaktadır."
        },
        {
          h: "3. Verilerin İşlenme Amacı",
          p: "Kişisel verileriniz; randevu oluşturma ve yönetimi, hizmet kalitesinin artırılması, sizinle iletişim kurulması ve yasal yükümlülüklerin yerine getirilmesi amaçlarıyla işlenmektedir. Verileriniz üçüncü taraflarla paylaşılmaz ve ticari amaçlarla kullanılmaz."
        },
        {
          h: "4. Verilerin Saklanması",
          p: "Kişisel verileriniz, işlenme amacının gerektirdiği süre boyunca ve yasal yükümlülükler kapsamında saklanmaktadır. Bu süre sona erdiğinde verileriniz güvenli bir şekilde silinir veya anonim hale getirilir."
        },
        {
          h: "5. Çerez Politikası",
          p: "Sitemizde teknik zorunluluk nedeniyle çerezler kullanılmaktadır. Bu çerezler site işlevselliğini sağlamak için gerekli olup kişisel veri içermez. Tarayıcı ayarlarınızdan çerez tercihlerinizi yönetebilirsiniz."
        },
        {
          h: "6. Haklarınız",
          p: "KVKK'nın 11. maddesi kapsamında aşağıdaki haklara sahipsiniz: Kişisel verilerinizin işlenip işlenmediğini öğrenme, işlenmişse buna ilişkin bilgi talep etme, işlenme amacını ve amacına uygun kullanılıp kullanılmadığını öğrenme, yurt içinde veya yurt dışında verilerin aktarıldığı üçüncü kişileri bilme, eksik veya yanlış işlenen verilerin düzeltilmesini isteme, kişisel verilerin silinmesini veya yok edilmesini isteme."
        },
        {
          h: "7. İletişim",
          p: "Kişisel verilerinizle ilgili taleplerinizi bize iletmek için: E-posta: info@alizhairdresser.com | WhatsApp: +90 538 874 51 66 | Adres: Alemdar Mahallesi, Divanyolu Caddesi No.50, Divan Bazar, Fatih / İstanbul"
        },
      ]
    },
    en: {
      eyebrow: "Legal",
      title: "Privacy Policy",
      updated: "Last updated: January 2025",
      sections: [
        {
          h: "1. Data Controller",
          p: "A_LizHairdresser acts as the data controller under KVKK Law No. 6698. Our salon is located at Alemdar Mahallesi, Divanyolu Caddesi No.50, Divan Bazar, Fatih / Istanbul. Contact: info@alizhairdresser.com | WhatsApp: +90 538 874 51 66"
        },
        {
          h: "2. Data We Collect",
          p: "When you visit our website or request an appointment, we may process the following personal data: first and last name, phone number, email address, requested service information and communication notes. This data is used solely for appointment management and service delivery."
        },
        {
          h: "3. Purpose of Processing",
          p: "Your personal data is processed for: creating and managing appointments, improving service quality, communicating with you, and fulfilling legal obligations. Your data is not shared with third parties or used for commercial purposes."
        },
        {
          h: "4. Data Retention",
          p: "Your personal data is retained for the period required by its processing purpose and applicable legal obligations. Once this period ends, your data is securely deleted or anonymised."
        },
        {
          h: "5. Cookie Policy",
          p: "Our website uses technically necessary cookies to ensure site functionality. These cookies do not contain personal data. You can manage your cookie preferences through your browser settings."
        },
        {
          h: "6. Your Rights",
          p: "Under Article 11 of KVKK, you have the right to: learn whether your personal data is being processed, request information about the processing, learn the purpose and whether it is being used accordingly, know the third parties to whom data is transferred, request correction of incomplete or incorrect data, and request deletion or destruction of personal data."
        },
        {
          h: "7. Contact",
          p: "To submit a request regarding your personal data: Email: info@alizhairdresser.com | WhatsApp: +90 538 874 51 66 | Address: Alemdar, Divanyolu St. No.50, Divan Bazar, Fatih / Istanbul"
        },
      ]
    },
    de: {
      eyebrow: "Rechtliches",
      title: "Datenschutzerklärung",
      updated: "Zuletzt aktualisiert: Januar 2025",
      sections: [
        { h: "1. Verantwortlicher", p: "A_LizHairdresser handelt als Verantwortlicher gemäß KVKK-Gesetz Nr. 6698. Unser Salon befindet sich in Alemdar Mah., Divanyolu Cad. No.50, Divan Bazar, Fatih / Istanbul. Kontakt: info@alizhairdresser.com | WhatsApp: +90 538 874 51 66" },
        { h: "2. Erhobene Daten", p: "Bei einem Besuch unserer Website oder einer Terminanfrage können folgende personenbezogene Daten verarbeitet werden: Vor- und Nachname, Telefonnummer, E-Mail-Adresse, gewünschte Dienstleistung und Kommunikationsnotizen." },
        { h: "3. Zweck der Verarbeitung", p: "Ihre Daten werden für Terminverwaltung, Serviceverbesserung und Kommunikation verwendet. Sie werden nicht an Dritte weitergegeben." },
        { h: "4. Datenspeicherung", p: "Ihre Daten werden nur so lange gespeichert, wie es der Verarbeitungszweck erfordert, danach sicher gelöscht." },
        { h: "5. Cookies", p: "Wir verwenden technisch notwendige Cookies für die Funktionalität der Website. Diese enthalten keine personenbezogenen Daten." },
        { h: "6. Ihre Rechte", p: "Sie haben das Recht auf Auskunft, Berichtigung, Löschung und Einschränkung der Verarbeitung Ihrer personenbezogenen Daten." },
        { h: "7. Kontakt", p: "E-Mail: info@alizhairdresser.com | WhatsApp: +90 538 874 51 66 | Adresse: Divanyolu Str. 50, Divan Bazar, Fatih / Istanbul" },
      ]
    },
    fr: {
      eyebrow: "Légal",
      title: "Politique de confidentialité",
      updated: "Dernière mise à jour : Janvier 2025",
      sections: [
        { h: "1. Responsable du traitement", p: "A_LizHairdresser agit en tant que responsable du traitement conformément à la loi KVKK n° 6698. Notre salon est situé à Alemdar Mah., Divanyolu Cad. No.50, Divan Bazar, Fatih / Istanbul. Contact: info@alizhairdresser.com | WhatsApp: +90 538 874 51 66" },
        { h: "2. Données collectées", p: "Lors de votre visite ou d'une demande de rendez-vous, nous pouvons traiter: nom et prénom, numéro de téléphone, adresse e-mail, service demandé et notes de communication." },
        { h: "3. Finalité du traitement", p: "Vos données sont traitées pour la gestion des rendez-vous, l'amélioration du service et la communication. Elles ne sont pas partagées avec des tiers." },
        { h: "4. Conservation", p: "Vos données sont conservées le temps nécessaire puis supprimées de manière sécurisée." },
        { h: "5. Cookies", p: "Nous utilisons des cookies techniquement nécessaires qui ne contiennent pas de données personnelles." },
        { h: "6. Vos droits", p: "Vous disposez des droits d'accès, de rectification, d'effacement et de limitation du traitement de vos données personnelles." },
        { h: "7. Contact", p: "E-mail: info@alizhairdresser.com | WhatsApp: +90 538 874 51 66 | Adresse: Rue Divanyolu 50, Divan Bazar, Fatih / Istanbul" },
      ]
    },
  };
  const c = content[lang] || content.en;
  const sectionIcons = ['🏛', '📋', '🎯', '🔒', '🍪', '⚖️', '✉️'];
  return (
    <div className="legal-page">
      <div className="legal-hero">
        <div className="shell">
          <div className="legal-hero-inner">
            <div className="legal-badge">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
              {c.eyebrow}
            </div>
            <h1 className="legal-title">{c.title}</h1>
            <p className="legal-updated">{c.updated}</p>
          </div>
        </div>
      </div>
      <div className="shell">
        <div className="legal-body">
          <div className="legal-sections">
            {c.sections.map((s, i) => (
              <div key={i} className="legal-section">
                <div className="legal-section-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="legal-section-content">
                  <h2 className="legal-section-title">{s.h}</h2>
                  <p className="legal-section-text">{s.p}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="legal-sidebar">
            <div className="legal-contact-card">
              <div className="legal-contact-title">
                {lang === 'tr' ? 'İletişim' : lang === 'de' ? 'Kontakt' : lang === 'fr' ? 'Contact' : 'Contact'}
              </div>
              <a className="legal-contact-item" href="mailto:info@alizhairdresser.com">
                <span className="legal-contact-icon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                </span>
                info@alizhairdresser.com
              </a>
              <a className="legal-contact-item" href="https://wa.me/905388745166" target="_blank" rel="noopener">
                <span className="legal-contact-icon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                </span>
                +90 538 874 51 66
              </a>
              <div className="legal-contact-item">
                <span className="legal-contact-icon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                </span>
                <span>Divanyolu Cad. No.50<br/>Divan Bazar, Fatih<br/>İstanbul</span>
              </div>
            </div>
            <div className="legal-other-links">
              <div className="legal-other-title">
                {lang === 'tr' ? 'Diğer Belgeler' : lang === 'de' ? 'Weitere Dokumente' : lang === 'fr' ? 'Autres documents' : 'Other Documents'}
              </div>
              <a className="legal-other-link" onClick={() => go('terms')}>
                {lang === 'tr' ? 'Kullanım Koşulları' : lang === 'de' ? 'Nutzungsbedingungen' : lang === 'fr' ? "Conditions d'utilisation" : 'Terms of Use'} →
              </a>
              <a className="legal-other-link" onClick={() => go('cookies')}>
                {lang === 'tr' ? 'Çerez Politikası' : lang === 'de' ? 'Cookie-Richtlinie' : lang === 'fr' ? 'Politique de Cookies' : 'Cookie Policy'} →
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ========== TERMS OF USE PAGE ==========
function TermsPage() {
  const t = useTInner();
  const { lang } = useLangInner();
  const { go } = useRouteInner();
  const content = {
    tr: {
      title: "Kullanım Koşulları",
      updated: "Son güncelleme: Ocak 2025",
      sections: [
        { h: "1. Genel", p: "Bu web sitesi A_LizHairdresser tarafından işletilmektedir. Siteyi kullanarak aşağıdaki koşulları kabul etmiş sayılırsınız." },
        { h: "2. Hizmetler", p: "Sunulan hizmetler ve fiyatlar önceden bildirim yapılmaksızın değiştirilebilir. Randevular WhatsApp üzerinden alınmaktadır." },
        { h: "3. Fikri Mülkiyet", p: "Sitedeki tüm içerik, görseller ve metinler A_LizHairdresser'a aittir. İzinsiz kullanılamaz." },
        { h: "4. Sorumluluk Sınırlaması", p: "Sitemizin kullanımından doğabilecek dolaylı zararlardan sorumlu değiliz." },
        { h: "5. Değişiklikler", p: "Bu koşullar dilediğimiz zaman güncellenebilir. Güncel versiyonu takip etmenizi öneririz." },
        { h: "6. İletişim", p: "Sorularınız için WhatsApp: +90 538 874 51 66 | Adres: Alemdar Mah., Divanyolu Cad. No.50, Divan Bazar, Fatih, İstanbul" },
      ]
    },
    en: {
      title: "Terms of Use",
      updated: "Last updated: January 2025",
      sections: [
        { h: "1. General", p: "This website is operated by A_LizHairdresser. By using the site, you agree to the following terms." },
        { h: "2. Services", p: "Services and prices may change without prior notice. Appointments are made via WhatsApp." },
        { h: "3. Intellectual Property", p: "All content, images, and texts on this site belong to A_LizHairdresser and may not be used without permission." },
        { h: "4. Limitation of Liability", p: "We are not responsible for any indirect damages arising from the use of our site." },
        { h: "5. Changes", p: "These terms may be updated at any time. We recommend checking for the latest version." },
        { h: "6. Contact", p: "For questions: WhatsApp: +90 538 874 51 66 | Address: Alemdar, Divanyolu St. No.50, Divan Bazar, Fatih, Istanbul" },
      ]
    },
    de: {
      title: "Nutzungsbedingungen",
      updated: "Zuletzt aktualisiert: Januar 2025",
      sections: [
        { h: "1. Allgemeines", p: "Diese Website wird von A_LizHairdresser betrieben. Mit der Nutzung der Website stimmen Sie den folgenden Bedingungen zu." },
        { h: "2. Dienstleistungen", p: "Dienstleistungen und Preise können ohne vorherige Ankündigung geändert werden." },
        { h: "3. Geistiges Eigentum", p: "Alle Inhalte, Bilder und Texte gehören A_LizHairdresser und dürfen ohne Genehmigung nicht verwendet werden." },
        { h: "4. Haftungsbeschränkung", p: "Wir haften nicht für indirekte Schäden, die aus der Nutzung unserer Website entstehen." },
        { h: "5. Änderungen", p: "Diese Bedingungen können jederzeit aktualisiert werden." },
        { h: "6. Kontakt", p: "WhatsApp: +90 538 874 51 66 | Adresse: Divanyolu Str. 50, Divan Bazar, Fatih, Istanbul" },
      ]
    },
  };
  const c = content[lang] || content.en;
  return (
    <div className="legal-page">
      <div className="legal-hero">
        <div className="shell">
          <div className="legal-hero-inner">
            <div className="legal-badge">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
              {lang === 'tr' ? 'Yasal' : lang === 'de' ? 'Rechtliches' : lang === 'fr' ? 'Légal' : 'Legal'}
            </div>
            <h1 className="legal-title">{c.title}</h1>
            <p className="legal-updated">{c.updated}</p>
          </div>
        </div>
      </div>
      <div className="shell">
        <div className="legal-body">
          <div className="legal-sections">
            {c.sections.map((s, i) => (
              <div key={i} className="legal-section">
                <div className="legal-section-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="legal-section-content">
                  <h2 className="legal-section-title">{s.h}</h2>
                  <p className="legal-section-text">{s.p}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="legal-sidebar">
            <div className="legal-contact-card">
              <div className="legal-contact-title">
                {lang === 'tr' ? 'İletişim' : lang === 'de' ? 'Kontakt' : lang === 'fr' ? 'Contact' : 'Contact'}
              </div>
              <a className="legal-contact-item" href="mailto:info@alizhairdresser.com">
                <span className="legal-contact-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></span>
                info@alizhairdresser.com
              </a>
              <a className="legal-contact-item" href="https://wa.me/905388745166" target="_blank" rel="noopener">
                <span className="legal-contact-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg></span>
                +90 538 874 51 66
              </a>
            </div>
            <div className="legal-other-links">
              <div className="legal-other-title">
                {lang === 'tr' ? 'Diğer Belgeler' : lang === 'de' ? 'Weitere Dokumente' : lang === 'fr' ? 'Autres documents' : 'Other Documents'}
              </div>
              <a className="legal-other-link" onClick={() => go('privacy')}>
                {lang === 'tr' ? 'KVKK & Gizlilik' : lang === 'de' ? 'Datenschutz' : lang === 'fr' ? 'Confidentialité' : 'Privacy Policy'} →
              </a>
              <a className="legal-other-link" onClick={() => go('cookies')}>
                {lang === 'tr' ? 'Çerez Politikası' : lang === 'de' ? 'Cookie-Richtlinie' : lang === 'fr' ? 'Cookies' : 'Cookie Policy'} →
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ========== COOKIE POLICY PAGE ==========
function CookiePage() {
  const t = useTInner();
  const { lang } = useLangInner();
  const { go } = useRouteInner();
  const content = {
    tr: {
      title: "Çerez Politikası",
      updated: "Son güncelleme: Ocak 2025",
      sections: [
        { h: "Çerez Nedir?", p: "Çerezler, web sitelerinin tarayıcınıza kaydettiği küçük metin dosyalarıdır. Oturumunuzu hatırlamak ve size daha iyi hizmet sunmak için kullanılır." },
        { h: "Kullandığımız Çerezler", p: "Zorunlu çerezler: Sitenin temel işlevleri için gereklidir. Analitik çerezler: Ziyaretçi istatistikleri için kullanılır. Pazarlama çerezleri: Kişiselleştirilmiş içerik için kullanılır." },
        { h: "Çerez Yönetimi", p: "Tarayıcı ayarlarınızdan çerezleri devre dışı bırakabilirsiniz. Ancak bu durumda bazı site özellikleri düzgün çalışmayabilir." },
        { h: "KVKK Kapsamı", p: "Çerez kullanımımız 6698 sayılı Kişisel Verilerin Korunması Kanunu (KVKK) kapsamında yürütülmektedir." },
        { h: "İletişim", p: "Çerez politikamız hakkında sorularınız için: WhatsApp: +90 538 874 51 66" },
      ]
    },
    en: {
      title: "Cookie Policy",
      updated: "Last updated: January 2025",
      sections: [
        { h: "What are Cookies?", p: "Cookies are small text files saved to your browser by websites. They are used to remember your session and provide better service." },
        { h: "Cookies We Use", p: "Necessary cookies: Required for basic site functions. Analytics cookies: Used for visitor statistics. Marketing cookies: Used for personalised content." },
        { h: "Managing Cookies", p: "You can disable cookies in your browser settings. However, some site features may not work properly as a result." },
        { h: "Legal Basis", p: "Our cookie usage is conducted in accordance with KVKK Law No. 6698." },
        { h: "Contact", p: "For questions about our cookie policy: WhatsApp: +90 538 874 51 66" },
      ]
    },
    de: {
      title: "Cookie-Richtlinie",
      updated: "Zuletzt aktualisiert: Januar 2025",
      sections: [
        { h: "Was sind Cookies?", p: "Cookies sind kleine Textdateien, die Websites in Ihrem Browser speichern. Sie werden verwendet, um Ihre Sitzung zu speichern und besseren Service zu bieten." },
        { h: "Verwendete Cookies", p: "Notwendige Cookies: Für grundlegende Funktionen erforderlich. Analytische Cookies: Für Besucherstatistiken. Marketing-Cookies: Für personalisierte Inhalte." },
        { h: "Cookie-Verwaltung", p: "Sie können Cookies in Ihren Browsereinstellungen deaktivieren." },
        { h: "Rechtliche Grundlage", p: "Unsere Cookie-Nutzung erfolgt gemäß KVKK-Gesetz Nr. 6698." },
        { h: "Kontakt", p: "Für Fragen: WhatsApp: +90 538 874 51 66" },
      ]
    },
  };
  const c = content[lang] || content.en;
  return (
    <div className="legal-page">
      <div className="legal-hero">
        <div className="shell">
          <div className="legal-hero-inner">
            <div className="legal-badge">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="10"/><path d="M8 12h8M12 8v8"/></svg>
              {lang === 'tr' ? 'Yasal' : lang === 'de' ? 'Rechtliches' : lang === 'fr' ? 'Légal' : 'Legal'}
            </div>
            <h1 className="legal-title">{c.title}</h1>
            <p className="legal-updated">{c.updated}</p>
          </div>
        </div>
      </div>
      <div className="shell">
        <div className="legal-body">
          <div className="legal-sections">
            {c.sections.map((s, i) => (
              <div key={i} className="legal-section">
                <div className="legal-section-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="legal-section-content">
                  <h2 className="legal-section-title">{s.h}</h2>
                  <p className="legal-section-text">{s.p}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="legal-sidebar">
            <div className="legal-contact-card">
              <div className="legal-contact-title">
                {lang === 'tr' ? 'İletişim' : lang === 'de' ? 'Kontakt' : lang === 'fr' ? 'Contact' : 'Contact'}
              </div>
              <a className="legal-contact-item" href="mailto:info@alizhairdresser.com">
                <span className="legal-contact-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></span>
                info@alizhairdresser.com
              </a>
            </div>
            <div className="legal-other-links">
              <div className="legal-other-title">
                {lang === 'tr' ? 'Diğer Belgeler' : lang === 'de' ? 'Weitere Dokumente' : lang === 'fr' ? 'Autres documents' : 'Other Documents'}
              </div>
              <a className="legal-other-link" onClick={() => go('privacy')}>
                {lang === 'tr' ? 'KVKK & Gizlilik' : lang === 'de' ? 'Datenschutz' : lang === 'fr' ? 'Confidentialité' : 'Privacy Policy'} →
              </a>
              <a className="legal-other-link" onClick={() => go('terms')}>
                {lang === 'tr' ? 'Kullanım Koşulları' : lang === 'de' ? 'Nutzungsbedingungen' : lang === 'fr' ? 'Conditions' : 'Terms of Use'} →
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}


// ========== APPOINTMENT PAGE ==========
function AppointmentPage() {
  usePageSEOInner('appointment');
  const t = useTInner();
  const { lang } = useLangInner();
  const [step, setStep] = useStateP(1); // 1=calendar, 2=form
  const [guestType, setGuestType] = useStateP(null);
  const [selectedDate, setSelectedDate] = useStateP(null);
  const [selectedTime, setSelectedTime] = useStateP(null);
  const [month, setMonth] = useStateP(() => {
    const d = new Date(); return { year: d.getFullYear(), month: d.getMonth() };
  });
  const [form, setForm] = useStateP({ firstName: '', lastName: '', phone: '', note: '' });
  const [services, setServices] = useStateP([]);
  const [errors, setErrors] = useStateP({});

  const DAYS = {
    tr: ['Pzt','Sal','Çar','Per','Cum','Cmt','Paz'],
    en: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
    de: ['Mo','Di','Mi','Do','Fr','Sa','So'],
    fr: ['Lu','Ma','Me','Je','Ve','Sa','Di'],
    ar: ['الإث','الثل','الأر','الخم','الجم','الس','الأح'],
    ru: ['Пн','Вт','Ср','Чт','Пт','Сб','Вс'],
    it: ['Lun','Mar','Mer','Gio','Ven','Sab','Dom'],
    es: ['Lu','Ma','Mi','Ju','Vi','Sá','Do'],
  };
  const MONTHS = {
    tr: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
    en: ['January','February','March','April','May','June','July','August','September','October','November','December'],
    de: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
    fr: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
    ar: ['يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'],
    ru: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
    it: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'],
    es: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
  };
  const GUEST_ICONS = {
    bayan: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="7" r="4"/>
        <path d="M5 20c0-3.314 3.134-6 7-6s7 2.686 7 6"/>
        <path d="M12 16v4M9 18h6"/>
      </svg>
    ),
    bay: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="7" r="4"/>
        <path d="M5 20c0-3.314 3.134-6 7-6s7 2.686 7 6"/>
      </svg>
    ),
    cocuk: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="7" r="3"/>
        <path d="M6 20c0-2.761 2.686-5 6-5s6 2.239 6 5"/>
        <path d="M8 11.5C8 11.5 9 13 12 13s4-1.5 4-1.5"/>
      </svg>
    ),
  };

  const GUEST_TYPES = {
    tr: [{ id:'bayan', label:'Bayan' }, { id:'bay', label:'Bay' }, { id:'cocuk', label:'Çocuk' }],
    en: [{ id:'bayan', label:'Lady' }, { id:'bay', label:'Gent' }, { id:'cocuk', label:'Child' }],
    de: [{ id:'bayan', label:'Damen' }, { id:'bay', label:'Herren' }, { id:'cocuk', label:'Kind' }],
    fr: [{ id:'bayan', label:'Femme' }, { id:'bay', label:'Homme' }, { id:'cocuk', label:'Enfant' }],
    ar: [{ id:'bayan', label:'سيدة' }, { id:'bay', label:'رجل' }, { id:'cocuk', label:'طفل' }],
    ru: [{ id:'bayan', label:'Женщина' }, { id:'bay', label:'Мужчина' }, { id:'cocuk', label:'Ребёнок' }],
    it: [{ id:'bayan', label:'Donna' }, { id:'bay', label:'Uomo' }, { id:'cocuk', label:'Bambino' }],
    es: [{ id:'bayan', label:'Dama' }, { id:'bay', label:'Caballero' }, { id:'cocuk', label:'Niño' }],
  };
  const SVC_LIST = {
    tr: ['Saç Kesimi','Renklendirme','Balayage / Ombré','Keratin Bakım','Makyaj','Tırnak Bakımı','Ayak Masajı','Fön & Şekillendirme','Kaş & Kirpik','Gelin Saçı','Diğer'],
    en: ['Haircut','Colouring','Balayage / Ombré','Keratin Treatment','Makeup','Nail Care','Foot Massage','Blow Dry & Style','Brow & Lash','Bridal Hair','Other'],
    de: ['Haarschnitt','Färbung','Balayage / Ombré','Keratin','Makeup','Nagelbehandlung','Fußmassage','Föhnen','Brauen & Wimpern','Brautfrisur','Sonstiges'],
    fr: ['Coupe','Coloration','Balayage / Ombré','Kératine','Maquillage','Soin des ongles','Massage des pieds','Brushing','Sourcils & Cils','Coiffure mariée','Autre'],
    ar: ['قص الشعر','تلوين','بالاياج','كيراتين','مكياج','العناية بالأظافر','مساج القدم','تمليس','الحاجب والرمش','شعر العروس','أخرى'],
    ru: ['Стрижка','Окрашивание','Балаяж / Омбре','Кератин','Макияж','Уход за ногтями','Массаж ног','Укладка','Брови и ресницы','Свадебная прическа','Другое'],
    it: ['Taglio','Colorazione','Balayage / Ombré','Cheratina','Trucco','Cura delle unghie','Massaggio ai piedi','Piega','Sopracciglia & Ciglia','Acconciatura sposa','Altro'],
    es: ['Corte','Coloración','Balayage / Ombré','Queratina','Maquillaje','Cuidado de uñas','Masaje de pies','Peinado','Cejas & Pestañas','Peinado novia','Otro'],
  };

  const days = DAYS[lang] || DAYS.en;
  const monthNames = MONTHS[lang] || MONTHS.en;
  const guestTypes = GUEST_TYPES[lang] || GUEST_TYPES.en;
  const svcList = SVC_LIST[lang] || SVC_LIST.en;

  // Time slots 10:00 - 00:00 every 30 min
  const timeSlots = [];
  for (let h = 10; h < 24; h++) {
    timeSlots.push(`${String(h).padStart(2,'0')}:00`);
    timeSlots.push(`${String(h).padStart(2,'0')}:30`);
  }

  // Calendar helpers
  const today = new Date();
  today.setHours(0,0,0,0);
  const { year, month: m } = month;
  const firstDay = new Date(year, m, 1);
  const lastDay = new Date(year, m + 1, 0);
  // Monday-first: shift Sunday to end
  const startDow = (firstDay.getDay() + 6) % 7;
  const cells = [];
  for (let i = 0; i < startDow; i++) cells.push(null);
  for (let d = 1; d <= lastDay.getDate(); d++) cells.push(new Date(year, m, d));

  const prevMonth = () => setMonth(p => {
    const d = new Date(p.year, p.month - 1, 1);
    return { year: d.getFullYear(), month: d.getMonth() };
  });
  const nextMonth = () => setMonth(p => {
    const d = new Date(p.year, p.month + 1, 1);
    return { year: d.getFullYear(), month: d.getMonth() };
  });

  const isPast = d => d && d < today;
  const isSelected = d => d && selectedDate && d.toDateString() === selectedDate.toDateString();

  const toggleService = (s) => {
    setServices(prev => prev.includes(s) ? prev.filter(x => x !== s) : [...prev, s]);
  };

  const canProceed = guestType && selectedDate && selectedTime;

  const buildWaMessage = () => {
    const gt = guestTypes.find(g => g.id === guestType);
    const dateStr = selectedDate ? selectedDate.toLocaleDateString(lang === 'tr' ? 'tr-TR' : lang === 'de' ? 'de-DE' : lang === 'ar' ? 'ar-SA' : 'en-GB', { weekday:'long', day:'numeric', month:'long', year:'numeric' }) : '';
    const svcStr = services.length ? services.join(', ') : '—';
    const msgs = {
      tr: `Merhaba, randevu almak istiyorum.\n\nAd Soyad: ${form.firstName} ${form.lastName}\nTelefon: ${form.phone}\nMisafir: ${gt?.label}\nTarih: ${dateStr}\nSaat: ${selectedTime}\nHizmet(ler): ${svcStr}${form.note ? '\nNot: ' + form.note : ''}`,
      en: `Hello, I'd like to book an appointment.\n\nName: ${form.firstName} ${form.lastName}\nPhone: ${form.phone}\nGuest: ${gt?.label}\nDate: ${dateStr}\nTime: ${selectedTime}\nService(s): ${svcStr}${form.note ? '\nNote: ' + form.note : ''}`,
      de: `Hallo, ich möchte einen Termin buchen.\n\nName: ${form.firstName} ${form.lastName}\nTelefon: ${form.phone}\nGast: ${gt?.label}\nDatum: ${dateStr}\nUhrzeit: ${selectedTime}\nDienstleistung(en): ${svcStr}${form.note ? '\nAnmerkung: ' + form.note : ''}`,
      fr: `Bonjour, je souhaite prendre rendez-vous.\n\nNom: ${form.firstName} ${form.lastName}\nTéléphone: ${form.phone}\nInvité: ${gt?.label}\nDate: ${dateStr}\nHeure: ${selectedTime}\nService(s): ${svcStr}${form.note ? '\nNote: ' + form.note : ''}`,
    };
    return msgs[lang] || msgs.en;
  };

  const handleSubmit = () => {
    const errs = {};
    if (!form.firstName.trim()) errs.firstName = true;
    if (!form.lastName.trim())  errs.lastName  = true;
    if (services.length === 0)  errs.services  = true;
    if (Object.keys(errs).length) { setErrors(errs); return; }
    const msg = encodeURIComponent(buildWaMessage());
    window.open(`https://wa.me/905388745166?text=${msg}`, '_blank');
  };

  const labels = {
    title: { tr:'Randevu Al', en:'Book Appointment', de:'Termin buchen', fr:'Prendre RDV', ar:'احجز موعد', ru:'Запись', it:'Prenota', es:'Reservar' },
    step1: { tr:'Tarih & Saat', en:'Date & Time', de:'Datum & Zeit', fr:'Date & Heure', ar:'التاريخ والوقت', ru:'Дата и время', it:'Data & Ora', es:'Fecha & Hora' },
    step2: { tr:'Bilgileriniz', en:'Your Details', de:'Ihre Details', fr:'Vos coordonnées', ar:'بياناتك', ru:'Ваши данные', it:'I tuoi dati', es:'Tus datos' },
    guest: { tr:'Misafir Tipi', en:'Guest Type', de:'Gasttyp', fr:'Type de client', ar:'نوع الضيف', ru:'Тип гостя', it:'Tipo ospite', es:'Tipo de cliente' },
    pickDate: { tr:'Tarih Seçin', en:'Select Date', de:'Datum wählen', fr:'Choisir une date', ar:'اختر التاريخ', ru:'Выберите дату', it:'Seleziona data', es:'Seleccionar fecha' },
    pickTime: { tr:'Saat Seçin', en:'Select Time', de:'Uhrzeit wählen', fr:"Choisir l'heure", ar:'اختر الوقت', ru:'Выберите время', it:'Seleziona orario', es:'Seleccionar hora' },
    next: { tr:'Devam Et →', en:'Continue →', de:'Weiter →', fr:'Continuer →', ar:'متابعة →', ru:'Далее →', it:'Continua →', es:'Continuar →' },
    back: { tr:'← Geri', en:'← Back', de:'← Zurück', fr:'← Retour', ar:'← رجوع', ru:'← Назад', it:'← Indietro', es:'← Atrás' },
    firstName: { tr:'Ad', en:'First Name', de:'Vorname', fr:'Prénom', ar:'الاسم', ru:'Имя', it:'Nome', es:'Nombre' },
    lastName: { tr:'Soyad', en:'Last Name', de:'Nachname', fr:'Nom', ar:'اللقب', ru:'Фамилия', it:'Cognome', es:'Apellido' },
    phone: { tr:'Telefon', en:'Phone', de:'Telefon', fr:'Téléphone', ar:'الهاتف', ru:'Телефон', it:'Telefono', es:'Teléfono' },
    note: { tr:'Not (isteğe bağlı)', en:'Note (optional)', de:'Notiz (optional)', fr:"Note (facultatif)", ar:'ملاحظة (اختياري)', ru:'Примечание', it:'Nota (opzionale)', es:'Nota (opcional)' },
    services: { tr:'Hizmet Seçin', en:'Select Services', de:'Dienste wählen', fr:'Choisir services', ar:'اختر الخدمات', ru:'Выберите услуги', it:'Scegli servizi', es:'Seleccionar servicios' },
    confirm: { tr:'WhatsApp ile Onayla', en:'Confirm via WhatsApp', de:'Per WhatsApp bestätigen', fr:'Confirmer via WhatsApp', ar:'تأكيد عبر واتساب', ru:'Подтвердить в WhatsApp', it:'Conferma via WhatsApp', es:'Confirmar por WhatsApp' },
    required: { tr:'Bu alan zorunludur', en:'This field is required', de:'Pflichtfeld', fr:'Champ obligatoire', ar:'هذا الحقل مطلوب', ru:'Обязательное поле', it:'Campo obbligatorio', es:'Campo obligatorio' },
    svcRequired: { tr:'En az bir hizmet seçin', en:'Please select at least one service', de:'Bitte mindestens einen Dienst wählen', fr:'Veuillez sélectionner au moins un service', ar:'يرجى اختيار خدمة واحدة على الأقل', ru:'Выберите хотя бы одну услугу', it:'Seleziona almeno un servizio', es:'Selecciona al menos un servicio' },
    summary: { tr:'Özet', en:'Summary', de:'Zusammenfassung', fr:'Résumé', ar:'ملخص', ru:'Итог', it:'Riepilogo', es:'Resumen' },
  };
  const L = (obj) => obj[lang] || obj.en || Object.values(obj)[0];

  return (
    <div className="appt-page">
      {/* Header */}
      <div className="appt-header">
        <div className="shell">
          <div className="eyebrow">{L(labels.title)}</div>
          <h1 className="display display-lg">{L(labels.title)}</h1>
          <p style={{ color: 'var(--ink-soft)', marginTop: 8, fontSize: 15 }}>
            A_LizHairdresser · Divanyolu Cad. No.50, Fatih
          </p>
        </div>
      </div>

      {/* Step indicator */}
      <div className="appt-steps">
        <div className="shell">
          <div className="appt-step-row">
            <div className={`appt-step ${step >= 1 ? 'active' : ''}`}>
              <span className="appt-step-num">01</span>
              <span className="appt-step-label">{L(labels.step1)}</span>
            </div>
            <div className="appt-step-line" />
            <div className={`appt-step ${step >= 2 ? 'active' : ''}`}>
              <span className="appt-step-num">02</span>
              <span className="appt-step-label">{L(labels.step2)}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="shell">
        {step === 1 && (
          <div className="appt-step1">
            {/* Guest type selector */}
            <div className="appt-block">
              <div className="appt-block-title">{L(labels.guest)}</div>
              <div className="appt-guest-row">
                {guestTypes.map(g => (
                  <button
                    key={g.id}
                    className={`appt-guest-btn ${guestType === g.id ? 'active' : ''}`}
                    onClick={() => setGuestType(g.id)}
                  >
                    <span className="appt-guest-icon">{GUEST_ICONS[g.id]}</span>
                    <span className="appt-guest-label">{g.label}</span>
                  </button>
                ))}
              </div>
            </div>

            <div className="appt-grid">
              {/* Calendar */}
              <div className="appt-block appt-calendar-block">
                <div className="appt-block-title">{L(labels.pickDate)}</div>
                <div className="appt-calendar">
                  <div className="appt-cal-nav">
                    <button className="appt-cal-arrow" onClick={prevMonth} aria-label="prev">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 18l-6-6 6-6"/></svg>
                    </button>
                    <span className="appt-cal-month">{monthNames[m]} {year}</span>
                    <button className="appt-cal-arrow" onClick={nextMonth} aria-label="next">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 18l6-6-6-6"/></svg>
                    </button>
                  </div>
                  <div className="appt-cal-grid">
                    {days.map(d => <div key={d} className="appt-cal-dow">{d}</div>)}
                    {cells.map((d, i) => (
                      <button
                        key={i}
                        className={`appt-cal-day ${!d ? 'empty' : ''} ${d && isPast(d) ? 'past' : ''} ${isSelected(d) ? 'selected' : ''} ${d && d.toDateString() === today.toDateString() ? 'today' : ''}`}
                        disabled={!d || isPast(d)}
                        onClick={() => d && !isPast(d) && setSelectedDate(d)}
                      >
                        {d ? d.getDate() : ''}
                      </button>
                    ))}
                  </div>
                </div>
              </div>

              {/* Time slots */}
              <div className="appt-block appt-time-block">
                <div className="appt-block-title">{L(labels.pickTime)}</div>
                <div className="appt-time-grid">
                  {timeSlots.map(ts => (
                    <button
                      key={ts}
                      className={`appt-time-slot ${selectedTime === ts ? 'active' : ''}`}
                      onClick={() => setSelectedTime(ts)}
                    >
                      {ts}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {/* Summary bar */}
            {(selectedDate || selectedTime) && (
              <div className="appt-summary-bar">
                {guestType && <span className="appt-sb-item">{guestTypes.find(g=>g.id===guestType)?.label}</span>}
                {selectedDate && <span className="appt-sb-sep">·</span>}
                {selectedDate && <span className="appt-sb-item">📅 {selectedDate.toLocaleDateString(lang === 'tr' ? 'tr-TR' : 'en-GB', { day:'numeric', month:'long' })}</span>}
                {selectedTime && <span className="appt-sb-sep">·</span>}
                {selectedTime && <span className="appt-sb-item">🕐 {selectedTime}</span>}
              </div>
            )}

            <div className="appt-footer">
              <button
                className={`btn btn-primary appt-next-btn ${canProceed ? '' : 'disabled'}`}
                disabled={!canProceed}
                onClick={() => canProceed && setStep(2)}
              >
                {L(labels.next)}
              </button>
              {!canProceed && (
                <p className="appt-hint">
                  {lang === 'tr' ? 'Devam etmek için misafir tipi, tarih ve saat seçin' :
                   lang === 'de' ? 'Bitte Gasttyp, Datum und Uhrzeit wählen' :
                   lang === 'fr' ? "Veuillez choisir le type de client, la date et l'heure" :
                   lang === 'ar' ? 'يرجى اختيار نوع الضيف والتاريخ والوقت' :
                   lang === 'ru' ? 'Выберите тип гостя, дату и время' :
                   'Please select guest type, date and time to continue'}
                </p>
              )}
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="appt-step2">
            {/* Summary card */}
            <div className="appt-summary-card">
              <div className="appt-sc-title">{L(labels.summary)}</div>
              <div className="appt-sc-row">
                <span>👤</span><span>{guestTypes.find(g=>g.id===guestType)?.label}</span>
              </div>
              <div className="appt-sc-row">
                <span>📅</span>
                <span>{selectedDate?.toLocaleDateString(lang==='tr'?'tr-TR':'en-GB', { weekday:'long', day:'numeric', month:'long', year:'numeric' })}</span>
              </div>
              <div className="appt-sc-row">
                <span>🕐</span>
                <span>{selectedTime}</span>
              </div>
              <button className="appt-sc-change" onClick={() => setStep(1)}>
                {L(labels.back)}
              </button>
            </div>

            {/* Form */}
            <div className="appt-form">
              <div className="appt-form-row">
                <div className="appt-field">
                  <label className="appt-label">{L(labels.firstName)} *</label>
                  <input
                    className={`appt-input ${errors.firstName ? 'error' : ''}`}
                    value={form.firstName}
                    onChange={e => { setForm(p=>({...p,firstName:e.target.value})); setErrors(p=>({...p,firstName:false})); }}
                    placeholder={L(labels.firstName)}
                  />
                  {errors.firstName && <span className="appt-error">{L(labels.required)}</span>}
                </div>
                <div className="appt-field">
                  <label className="appt-label">{L(labels.lastName)} *</label>
                  <input
                    className={`appt-input ${errors.lastName ? 'error' : ''}`}
                    value={form.lastName}
                    onChange={e => { setForm(p=>({...p,lastName:e.target.value})); setErrors(p=>({...p,lastName:false})); }}
                    placeholder={L(labels.lastName)}
                  />
                  {errors.lastName && <span className="appt-error">{L(labels.required)}</span>}
                </div>
              </div>

              <div className="appt-field">
                <label className="appt-label">{L(labels.phone)}</label>
                <input
                  className="appt-input"
                  value={form.phone}
                  onChange={e => setForm(p=>({...p,phone:e.target.value}))}
                  placeholder="+90 5XX XXX XX XX"
                  type="tel"
                />
              </div>

              {/* Services */}
              <div className="appt-field">
                <label className="appt-label">{L(labels.services)} *</label>
                {errors.services && <span className="appt-error" style={{display:'block',marginBottom:8}}>{L(labels.svcRequired)}</span>}
                <div className="appt-svc-grid">
                  {svcList.map(s => (
                    <button
                      key={s}
                      className={`appt-svc-chip ${services.includes(s) ? 'active' : ''}`}
                      onClick={() => { toggleService(s); setErrors(p=>({...p,services:false})); }}
                    >
                      {services.includes(s) && <span className="appt-check">✓</span>}
                      {s}
                    </button>
                  ))}
                </div>
              </div>

              <div className="appt-field">
                <label className="appt-label">{L(labels.note)}</label>
                <textarea
                  className="appt-input appt-textarea"
                  value={form.note}
                  onChange={e => setForm(p=>({...p,note:e.target.value}))}
                  placeholder={L(labels.note)}
                  rows={3}
                />
              </div>

              <div className="appt-footer appt-footer-2">
                <button className="appt-back-btn" onClick={() => setStep(1)}>{L(labels.back)}</button>
                <button className="btn btn-primary appt-confirm-btn" onClick={handleSubmit}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                  {L(labels.confirm)}
                </button>
              </div>
            </div>
          </div>
        )}

      </div>
    </div>
  );
}

Object.assign(window, { ServicesPage, GalleryPage, AboutPage, ContactPage, PrivacyPage, TermsPage, CookiePage, AppointmentPage });