const { TickRule, Button, Card, Badge, Icon, SectionHeading, DataRow, Alert, Accordion, Breadcrumb, Dialog, Switch, Tabs } = (window.FintelligentComTrLanding_96e553 || (console.error("Fintelligent DS: _ds_bundle.js not loaded — check the <script src> path"), {}));

const LEGAL_DOCS = [
  { id: "kvkk", label: { tr: "KVKK aydınlatma metni", en: "KVKK disclosure notice" }, updated: "01.08.2026" },
  { id: "gizlilik", label: { tr: "Gizlilik politikası", en: "Privacy policy" }, updated: "01.08.2026" },
  { id: "cerez", label: { tr: "Çerez politikası", en: "Cookie policy" }, updated: "01.08.2026" },
  { id: "destek", label: { tr: "Destek ve iletişim", en: "Support and contact" }, updated: "01.08.2026" },
];

function LegalScreen({ lang, onNav }) {
  const T = window.T;
  const { Container, Section } = window;
  const c = window.SITE.company;
  const [doc, setDoc] = React.useState("kvkk");
  const [cookieOpen, setCookieOpen] = React.useState(false);
  const [prefs, setPrefs] = React.useState({ perf: true, mkt: false });
  const active = LEGAL_DOCS.find((d) => d.id === doc);

  const bodies = {
    kvkk: {
      lede: { tr: "Fintelligent Teknoloji Yatırımları A.Ş., 6698 sayılı Kişisel Verilerin Korunması Kanunu kapsamında veri sorumlusudur.", en: "Fintelligent Teknoloji Yatırımları A.Ş. acts as data controller under Law no. 6698 on the Protection of Personal Data." },
      items: [
        { question: { tr: "Hangi verileri işliyoruz", en: "What data we process" }, answer: { tr: "Ad soyad, iletişim bilgisi, işlem kayıtları ve cihaz bilgisi. Kart verisi tarafımızca saklanmaz; ödeme sağlayıcı üzerinde tokenize edilir.", en: "Name, contact details, transaction records and device information. Card data is not stored by us; it is tokenised at the payment provider." } },
        { question: { tr: "İşleme amacı ve hukuki sebebi", en: "Purpose and legal basis" }, answer: { tr: "Sözleşmenin kurulması ve ifası, hukuki yükümlülüklerin yerine getirilmesi ve meşru menfaat. Ticari ileti gönderimi yalnızca açık rıza ile yapılır.", en: "Formation and performance of the contract, compliance with legal obligations, and legitimate interest. Commercial messages are sent only with explicit consent." } },
        { question: { tr: "Saklama süresi", en: "Retention period" }, answer: { tr: "Mali kayıtlar 10 yıl, iletişim kayıtları 2 yıl saklanır. Süre dolduğunda veriler silinir veya anonim hale getirilir.", en: "Financial records are kept for 10 years and contact records for 2 years. At the end of the period data is deleted or anonymised." } },
        { question: { tr: "Yurt dışına aktarım", en: "International transfer" }, answer: { tr: "Kişisel veriler Türkiye içindeki veri merkezlerinde işlenir. Yurt dışına aktarım yapılmamaktadır.", en: "Personal data is processed in data centres located in Türkiye. No international transfer takes place." } },
      ],
    },
    gizlilik: {
      lede: { tr: "Bu politika, fintelligent.com.tr üzerinden ve geliştirdiğimiz uygulamalar aracılığıyla toplanan bilgilerin nasıl kullanıldığını açıklar.", en: "This policy explains how information collected through fintelligent.com.tr and the applications we develop is used." },
      items: [
        { question: { tr: "Topladığımız bilgiler", en: "Information we collect" }, answer: { tr: "Hesap bilgileri, işlem geçmişi, uygulama kullanım ölçümleri ve destek yazışmaları.", en: "Account details, wallet transaction history, app usage metrics and support correspondence." } },
        { question: { tr: "Üçüncü taraf paylaşımı", en: "Third-party sharing" }, answer: { tr: "Ödeme sağlayıcı ve iş ortakları ile yalnızca işlemin gerçekleşmesi için gerekli asgari veri paylaşılır.", en: "Only the minimum data required to complete a transaction is shared with the payment provider, wallet infrastructure and merchant partners." } },
        { question: { tr: "Çocukların verileri", en: "Children's data" }, answer: { tr: "Hizmet 18 yaş altı kullanıcılara yönelik değildir.", en: "The service is not directed at users under 18." } },
        { question: { tr: "Güvenlik", en: "Security" }, answer: { tr: "Aktarım TLS ile şifrelenir. Devreye alma öncesi bağımsız sızma testi yapılır.", en: "Traffic is encrypted with TLS. An independent penetration test is carried out before go-live." } },
      ],
    },
    cerez: {
      lede: { tr: "Sitede yalnızca zorunlu, performans ve pazarlama olmak üzere üç kategori çerez kullanılır.", en: "The site uses three cookie categories: strictly necessary, performance and marketing." },
      items: [
        { question: { tr: "Zorunlu çerezler", en: "Strictly necessary cookies" }, answer: { tr: "Oturum yönetimi ve güvenlik için gereklidir, kapatılamaz.", en: "Required for session management and security; these cannot be turned off." } },
        { question: { tr: "Performans çerezleri", en: "Performance cookies" }, answer: { tr: "Sayfa yüklenme süreleri ve hata oranlarını ölçer. Kişisel tanımlayıcı içermez.", en: "Measure page load times and error rates. They contain no personal identifiers." } },
        { question: { tr: "Pazarlama çerezleri", en: "Marketing cookies" }, answer: { tr: "Yalnızca açık rıza ile kullanılır. Tercihinizi istediğiniz zaman değiştirebilirsiniz.", en: "Used only with explicit consent. You can change your preference at any time." } },
      ],
    },
    destek: {
      lede: { tr: "Tüm destek, ticari talep ve KVKK başvuruları için info@fintelligent.com.tr adresi kullanılır.", en: "All support, commercial and KVKK requests use info@fintelligent.com.tr." },
      items: [
        { question: { tr: "Yanıt süresi", en: "Response time" }, answer: { tr: "KVKK başvuruları kanunda öngörülen 30 gün içinde yanıtlanır.", en: "KVKK requests are answered within the statutory 30 days." } },
        { question: { tr: "Uygulama mağazası doğrulaması", en: "App store verification" }, answer: { tr: "Geliştirici hesapları Fintelligent Teknoloji Yatırımları A.Ş. adınadır. Doğrulama için gereken ünvan ve adres bilgileri bu sayfada yayımlanmıştır.", en: "The developer account is held by Fintelligent Teknoloji Yatırımları A.Ş. The legal name and address details required for verification are published on this page." } },
      ],
    },
  };

  const b = bodies[doc];

  return (
    <div>
      <Container style={{ paddingTop: 40, paddingBottom: 8 }}>
        <Breadcrumb items={[
          { label: T({ tr: "Ana sayfa", en: "Home" }, lang), href: "#" },
          { label: T({ tr: "Yasal", en: "Legal" }, lang) },
          { label: T(active.label, lang) },
        ]} />
      </Container>

      <Section pad="sm" style={{ paddingTop: 24 }}>
        <Container>
          <div className="g-legal" style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 64, alignItems: "start" }}>
            <nav style={{ position: "sticky", top: 92 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-400)", marginBottom: 14 }}>
                {T({ tr: "Belgeler", en: "Documents" }, lang)}
              </div>
              {LEGAL_DOCS.map((d) => (
                <button key={d.id} type="button" onClick={() => setDoc(d.id)}
                  style={{
                    display: "block", width: "100%", textAlign: "left", background: "none", cursor: "pointer",
                    border: "none", borderLeft: "2px solid " + (doc === d.id ? "var(--navy-900)" : "var(--border-default)"),
                    padding: "9px 0 9px 14px", fontSize: 15, letterSpacing: "-0.012em",
                    color: doc === d.id ? "var(--navy-900)" : "var(--navy-500)",
                    fontWeight: doc === d.id ? 600 : 400,
                    transition: "color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard)",
                  }}>{T(d.label, lang)}</button>
              ))}
              <div style={{ marginTop: 24 }}>
                <Button variant="secondary" size="sm" iconLeft="activity" onClick={() => setCookieOpen(true)}>
                  {T({ tr: "Çerez tercihleri", en: "Cookie preferences" }, lang)}
                </Button>
              </div>
            </nav>

            <div style={{ maxWidth: 700 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                <Badge tone="neutral">{T({ tr: "Güncelleme", en: "Updated" }, lang)} {active.updated}</Badge>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--navy-300)" }}>
                  {T({ tr: "Türkçe metin esastır", en: "The Turkish text prevails" }, lang)}
                </span>
              </div>
              <h1 style={{ fontSize: 38, letterSpacing: "-0.028em", lineHeight: 1.14 }}>{T(active.label, lang)}</h1>
              <p style={{ marginTop: 16, fontSize: 17, lineHeight: 1.62, color: "var(--text-secondary)" }}>{T(b.lede, lang)}</p>

              <div style={{ marginTop: 32 }}>
                <Accordion defaultOpen={0} items={b.items.map((i) => ({ question: T(i.question, lang), answer: T(i.answer, lang) }))} />
              </div>

              <div style={{ marginTop: 40 }}>
                <TickRule ticks={9} />
                <div className="g-2t" style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                  <div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-300)" }}>
                      {T({ tr: "Veri sorumlusu", en: "Data controller" }, lang)}
                    </div>
                    <div style={{ marginTop: 6, fontSize: 15, lineHeight: 1.55 }}>{c.legalName}</div>
                    <div style={{ marginTop: 4, fontSize: 14, color: "var(--navy-500)", lineHeight: 1.55 }}>{c.address}</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-300)" }}>
                      {T({ tr: "Başvuru kanalı", en: "Request channel" }, lang)}
                    </div>
                    <div className="tabular" style={{ marginTop: 6, fontFamily: "var(--font-mono)", fontSize: 14 }}>{c.email}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </Section>

      <Dialog open={cookieOpen} title={T({ tr: "Çerez tercihleri", en: "Cookie preferences" }, lang)} onClose={() => setCookieOpen(false)} width={560}
        footer={<>
          <Button variant="secondary" onClick={() => setCookieOpen(false)}>{T({ tr: "Vazgeç", en: "Cancel" }, lang)}</Button>
          <Button onClick={() => setCookieOpen(false)}>{T({ tr: "Tercihleri kaydet", en: "Save preferences" }, lang)}</Button>
        </>}>
        <p>{T({ tr: "Zorunlu çerezler sitenin çalışması için gereklidir ve kapatılamaz. Diğer kategorileri istediğiniz zaman değiştirebilirsiniz.", en: "Strictly necessary cookies are required for the site to work and cannot be turned off. You can change the other categories at any time." }, lang)}</p>
        <div style={{ display: "flex", flexDirection: "column", gap: 14, margin: "20px 0 4px" }}>
          <Switch checked disabled label={T({ tr: "Zorunlu çerezler", en: "Strictly necessary" }, lang)} />
          <Switch checked={prefs.perf} onChange={(e) => setPrefs((p) => ({ ...p, perf: e.target.checked }))} label={T({ tr: "Performans çerezleri", en: "Performance" }, lang)} />
          <Switch checked={prefs.mkt} onChange={(e) => setPrefs((p) => ({ ...p, mkt: e.target.checked }))} label={T({ tr: "Pazarlama çerezleri", en: "Marketing" }, lang)} />
        </div>
      </Dialog>
    </div>
  );
}

Object.assign(window, { LegalScreen });