/* global window, React */
// ============================================
// A_LIZ HAIRDRESSER — Legal Pages
// ============================================
const { useLang: useLangLegal, useT: useTLegal, useRoute: useRouteLegal } = window;
const { useState: useStateLegal, useEffect: useEffectLegal } = React;

// ========== SHARED LEGAL LAYOUT ==========
function LegalLayout({ badge, icon, title, updated, sections, lang }) {
  const { go } = useRouteLegal();

  const contactLabel = { tr:'İletişim', en:'Contact', de:'Kontakt', fr:'Contact', ar:'تواصل', ru:'Контакт', it:'Contatto', es:'Contacto' };
  const otherLabel   = { tr:'Diğer Belgeler', en:'Other Documents', de:'Weitere Dokumente', fr:'Autres documents', ar:'وثائق أخرى', ru:'Другие документы', it:'Altri documenti', es:'Otros documentos' };
  const privacyLabel = { tr:'KVKK & Gizlilik', en:'Privacy Policy', de:'Datenschutz', fr:'Confidentialité', ar:'الخصوصية', ru:'Конфиденциальность', it:'Privacy', es:'Privacidad' };
  const termsLabel   = { tr:'Kullanım Koşulları', en:'Terms of Use', de:'Nutzungsbedingungen', fr:"Conditions d'utilisation", ar:'شروط الاستخدام', ru:'Условия', it:'Termini', es:'Términos' };
  const cookieLabel  = { tr:'Çerez Politikası', en:'Cookie Policy', de:'Cookie-Richtlinie', fr:'Cookies', ar:'ملفات تعريف الارتباط', ru:'Cookies', it:'Cookie', es:'Cookies' };
  const L = (obj) => obj[lang] || obj.en;

  useEffectLegal(() => { window.scrollTo(0, 0); }, []);

  return (
    <div className="legal-page">
      {/* Dark hero */}
      <div className="legal-hero">
        <div className="shell">
          <div className="legal-hero-inner">
            <div className="legal-badge">
              {icon}
              {badge}
            </div>
            <h1 className="legal-title">{title}</h1>
            <p className="legal-updated">{updated}</p>
          </div>
        </div>
      </div>

      <div className="shell">
        <div className="legal-body">
          {/* Main sections */}
          <div className="legal-sections">
            {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>

          {/* Sidebar */}
          <div className="legal-sidebar">
            {/* Contact card */}
            <div className="legal-contact-card">
              <div className="legal-contact-title">{L(contactLabel)}</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 style={{lineHeight:1.5}}>Divanyolu Cad. No.50<br/>Divan Bazar, Fatih / İstanbul</span>
              </div>
            </div>

            {/* Other docs */}
            <div className="legal-other-links">
              <div className="legal-other-title">{L(otherLabel)}</div>
              <button className="legal-other-link" onClick={() => go('privacy')}>{L(privacyLabel)} →</button>
              <button className="legal-other-link" onClick={() => go('terms')}>{L(termsLabel)} →</button>
              <button className="legal-other-link" onClick={() => go('cookies')}>{L(cookieLabel)} →</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ========== PRIVACY / KVKK ==========
function PrivacyPage() {
  const { lang } = useLangLegal();
  const badges = { tr:'Yasal', en:'Legal', de:'Rechtliches', fr:'Légal', ar:'قانوني', ru:'Правовое', it:'Legale', es:'Legal' };
  const titles = { tr:'KVKK & Gizlilik Politikası', en:'Privacy Policy', de:'Datenschutzerklärung', fr:'Politique de confidentialité', ar:'سياسة الخصوصية', ru:'Политика конфиденциальности', it:'Informativa Privacy', es:'Política de privacidad' };
  const dates  = { tr:'Son güncelleme: Ocak 2025', en:'Last updated: January 2025', de:'Zuletzt aktualisiert: Januar 2025', fr:'Dernière mise à jour : Janvier 2025', ar:'آخر تحديث: يناير 2025', ru:'Последнее обновление: январь 2025', it:'Ultimo aggiornamento: gennaio 2025', es:'Última actualización: enero 2025' };
  const L = (obj) => obj[lang] || obj.en;
  const sections = {
    tr: [
      { h:'1. Veri Sorumlusu', p:'A_LizHairdresser olarak, 6698 sayılı KVKK kapsamında veri sorumlusu sıfatıyla hareket etmekteyiz. Salonumuz Alemdar Mahallesi, Divanyolu Caddesi No.50, Divan Bazar, Fatih / İstanbul adresinde faaliyet göstermektedir. İletişim: info@alizhairdresser.com' },
      { h:'2. Toplanan Veriler', p:'Randevu talebinde bulunduğunuzda şu verileriniz işlenebilir: ad soyad, telefon numarası, e-posta adresi, talep edilen hizmet bilgisi ve iletişim notları. Verileriniz yalnızca randevu yönetimi ve hizmet sunumu amacıyla kullanılır.' },
      { h:'3. İşlenme Amacı', p:'Kişisel verileriniz; randevu yönetimi, hizmet kalitesinin artırılması, iletişim ve yasal yükümlülüklerin yerine getirilmesi için işlenmektedir. Verileriniz üçüncü taraflarla paylaşılmaz.' },
      { h:'4. Saklama Süresi', p:'Verileriniz, işlenme amacının gerektirdiği süre ve yasal yükümlülükler kapsamında saklanır. Bu süre sonunda güvenli biçimde silinir veya anonim hale getirilir.' },
      { h:'5. Çerez Kullanımı', p:'Sitemizde yalnızca teknik zorunluluk nedeniyle çerezler kullanılmaktadır. Bu çerezler kişisel veri içermez. Tarayıcı ayarlarından çerez tercihlerinizi yönetebilirsiniz.' },
      { h:'6. Haklarınız (KVKK md.11)', p:'Verilerinizin işlenip işlenmediğini öğrenme, bilgi talep etme, işlenme amacını öğrenme, aktarıldığı kişileri bilme, eksik/yanlış verilerin düzeltilmesini isteme ve verilerin silinmesini talep etme haklarına sahipsiniz.' },
      { h:'7. Başvuru', p:'Talepleriniz için: info@alizhairdresser.com | WhatsApp: +90 538 874 51 66' },
    ],
    en: [
      { h:'1. Data Controller', p:'A_LizHairdresser acts as data controller under KVKK Law No. 6698. Located at Alemdar, Divanyolu St. No.50, Divan Bazar, Fatih / Istanbul. Contact: info@alizhairdresser.com' },
      { h:'2. Data Collected', p:'When booking an appointment we may process: name, phone number, email, requested service and notes. Data is used solely for appointment management and service delivery.' },
      { h:'3. Purpose of Processing', p:'Data is processed for appointment management, service improvement, communication and legal compliance. It is not shared with third parties.' },
      { h:'4. Retention', p:'Data is retained for the period required by its purpose and legal obligations, then securely deleted or anonymised.' },
      { h:'5. Cookies', p:'We use technically necessary cookies that contain no personal data. You can manage preferences in your browser settings.' },
      { h:'6. Your Rights (KVKK Art.11)', p:'You have the right to learn whether your data is processed, request information, learn the purpose, know recipients, request correction of inaccurate data, and request deletion.' },
      { h:'7. Contact', p:'For requests: info@alizhairdresser.com | WhatsApp: +90 538 874 51 66' },
    ],
    de: [
      { h:'1. Verantwortlicher', p:'A_LizHairdresser handelt als Verantwortlicher gemäß KVKK Nr. 6698. Adresse: Divanyolu Str. 50, Divan Bazar, Fatih / Istanbul. Kontakt: info@alizhairdresser.com' },
      { h:'2. Erhobene Daten', p:'Bei Terminbuchungen: Name, Telefon, E-Mail, Dienst und Notizen. Nur für Terminverwaltung und Dienstleistung verwendet.' },
      { h:'3. Verarbeitungszweck', p:'Terminverwaltung, Qualitätsverbesserung, Kommunikation und rechtliche Pflichten. Keine Weitergabe an Dritte.' },
      { h:'4. Speicherung', p:'Daten werden so lange gespeichert wie nötig und danach sicher gelöscht.' },
      { h:'5. Cookies', p:'Nur technisch notwendige Cookies ohne personenbezogene Daten.' },
      { h:'6. Ihre Rechte', p:'Auskunft, Berichtigung, Löschung und Widerspruch gegen die Verarbeitung.' },
      { h:'7. Kontakt', p:'info@alizhairdresser.com | WhatsApp: +90 538 874 51 66' },
    ],
  };

  const icon = (
    <svg width="18" height="18" 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>
  );
  return <LegalLayout badge={L(badges)} icon={icon} title={L(titles)} updated={L(dates)} sections={sections[lang] || sections.en} lang={lang} />;
}

// ========== TERMS OF USE ==========
function TermsPage() {
  const { lang } = useLangLegal();
  const L = (obj) => obj[lang] || obj.en;
  const badges = { tr:'Yasal', en:'Legal', de:'Rechtliches', fr:'Légal', ar:'قانوني', ru:'Правовое', it:'Legale', es:'Legal' };
  const titles = { tr:'Kullanım Koşulları', en:'Terms of Use', de:'Nutzungsbedingungen', fr:"Conditions d'utilisation", ar:'شروط الاستخدام', ru:'Условия использования', it:'Termini di utilizzo', es:'Términos de uso' };
  const dates  = { tr:'Son güncelleme: Ocak 2025', en:'Last updated: January 2025', de:'Zuletzt aktualisiert: Januar 2025', fr:'Dernière mise à jour : Janvier 2025', ar:'آخر تحديث: يناير 2025', ru:'Последнее обновление: январь 2025', it:'Ultimo aggiornamento: gennaio 2025', es:'Última actualización: enero 2025' };
  const sections = {
    tr: [
      { 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. Önceden yazılı izin alınmadan kullanılamaz, kopyalanamaz veya dağıtılamaz.' },
      { h:'4. Sorumluluk', p:'Site üzerinden sunulan bilgiler yalnızca genel bilgi amaçlıdır. Sitemizin kullanımından doğabilecek dolaylı zararlardan sorumlu değiliz.' },
      { h:'5. Randevu & İptal', p:'Randevular WhatsApp üzerinden alınmakta olup iptal veya değişiklik için en az 24 saat öncesinden bildirim yapılması gerekmektedir.' },
      { h:'6. Değişiklikler', p:'Bu koşullar dilediğimiz zaman güncellenebilir. Güncel versiyonu düzenli olarak incelemenizi öneririz.' },
    ],
    en: [
      { 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 belong to A_LizHairdresser and may not be used without prior written permission.' },
      { h:'4. Liability', p:'Information on this site is for general purposes only. We are not responsible for indirect damages arising from its use.' },
      { h:'5. Appointment & Cancellation', p:'Appointments are made via WhatsApp. Cancellations or changes must be notified at least 24 hours in advance.' },
      { h:'6. Changes', p:'These terms may be updated at any time. We recommend reviewing them regularly.' },
    ],
    de: [
      { h:'1. Allgemeines', p:'Diese Website wird von A_LizHairdresser betrieben. Mit der Nutzung stimmen Sie diesen Bedingungen zu.' },
      { h:'2. Dienstleistungen', p:'Leistungen und Preise können ohne Vorankündigung geändert werden. Termine werden per WhatsApp vereinbart.' },
      { h:'3. Geistiges Eigentum', p:'Alle Inhalte gehören A_LizHairdresser und dürfen ohne schriftliche Genehmigung nicht verwendet werden.' },
      { h:'4. Haftung', p:'Die Informationen dienen nur allgemeinen Zwecken. Wir haften nicht für indirekte Schäden.' },
      { h:'5. Termin & Stornierung', p:'Termine werden per WhatsApp vereinbart. Absagen mindestens 24 Stunden im Voraus.' },
      { h:'6. Änderungen', p:'Diese Bedingungen können jederzeit aktualisiert werden.' },
    ],
  };
  const icon = (
    <svg width="18" height="18" 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>
  );
  return <LegalLayout badge={L(badges)} icon={icon} title={L(titles)} updated={L(dates)} sections={sections[lang] || sections.en} lang={lang} />;
}

// ========== COOKIE POLICY ==========
function CookiePage() {
  const { lang } = useLangLegal();
  const L = (obj) => obj[lang] || obj.en;
  const badges = { tr:'Yasal', en:'Legal', de:'Rechtliches', fr:'Légal', ar:'قانوني', ru:'Правовое', it:'Legale', es:'Legal' };
  const titles = { tr:'Çerez Politikası', en:'Cookie Policy', de:'Cookie-Richtlinie', fr:'Politique de Cookies', ar:'سياسة ملفات تعريف الارتباط', ru:'Политика Cookie', it:'Politica dei Cookie', es:'Política de Cookies' };
  const dates  = { tr:'Son güncelleme: Ocak 2025', en:'Last updated: January 2025', de:'Zuletzt aktualisiert: Januar 2025', fr:'Dernière mise à jour : Janvier 2025', ar:'آخر تحديث: يناير 2025', ru:'Последнее обновление: январь 2025', it:'Ultimo aggiornamento: gennaio 2025', es:'Última actualización: enero 2025' };
  const sections = {
    tr: [
      { h:'Çerez Nedir?', p:'Çerezler, web sitelerinin tarayıcınıza kaydettiği küçük metin dosyalarıdır. Oturumunuzu hatırlamak ve daha iyi hizmet sunmak için kullanılır.' },
      { h:'Zorunlu Çerezler', p:'Sitenin temel işlevleri için zorunludur. Devre dışı bırakılamaz. Kişisel veri içermez.' },
      { h:'Analitik Çerezler', p:'Ziyaretçi sayısı ve sayfa performansı ölçümü için kullanılır. Bireysel kullanıcıları tanımlamaz.' },
      { h:'Pazarlama Çerezleri', p:'Kişiselleştirilmiş içerik ve reklam gösterimi için kullanılabilir. Tarayıcı ayarlarından devre dışı bırakabilirsiniz.' },
      { h:'KVKK Kapsamı', p:'Çerez kullanımımız 6698 sayılı KVKK kapsamında yürütülmektedir. Tercihlerinizi çerez banner\'ından yönetebilirsiniz.' },
    ],
    en: [
      { h:'What are Cookies?', p:'Cookies are small text files saved to your browser. They are used to remember your session and provide better service.' },
      { h:'Necessary Cookies', p:'Required for basic site functions. Cannot be disabled. Contain no personal data.' },
      { h:'Analytics Cookies', p:'Used to measure visitor numbers and page performance. Do not identify individual users.' },
      { h:'Marketing Cookies', p:'May be used for personalised content and ads. You can disable these in your browser settings.' },
      { h:'Legal Basis', p:'Cookie usage is conducted in accordance with KVKK Law No. 6698. Manage your preferences via the cookie banner.' },
    ],
    de: [
      { h:'Was sind Cookies?', p:'Cookies sind kleine Textdateien, die Websites in Ihrem Browser speichern. Sie helfen, Ihre Sitzung zu speichern.' },
      { h:'Notwendige Cookies', p:'Für grundlegende Funktionen erforderlich. Nicht deaktivierbar. Ohne personenbezogene Daten.' },
      { h:'Analytische Cookies', p:'Zur Messung von Besucherzahlen. Keine Identifizierung einzelner Nutzer.' },
      { h:'Marketing-Cookies', p:'Für personalisierte Inhalte. In den Browsereinstellungen deaktivierbar.' },
      { h:'Rechtliche Grundlage', p:'Gemäß KVKK-Gesetz Nr. 6698. Präferenzen über das Cookie-Banner verwalten.' },
    ],
  };
  const icon = (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="12" cy="12" r="10"/>
      <circle cx="8" cy="9" r="1" fill="currentColor"/>
      <circle cx="14" cy="7" r="1" fill="currentColor"/>
      <circle cx="16" cy="13" r="1" fill="currentColor"/>
      <circle cx="10" cy="15" r="1" fill="currentColor"/>
    </svg>
  );
  return <LegalLayout badge={L(badges)} icon={icon} title={L(titles)} updated={L(dates)} sections={sections[lang] || sections.en} lang={lang} />;
}

window.PrivacyPage = PrivacyPage;
window.TermsPage   = TermsPage;
window.CookiePage  = CookiePage;