'use client'

import React, { useRef, useState } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { useParams } from 'next/navigation'
import { motion, useInView, useMotionValue, useTransform, useSpring, useReducedMotion, AnimatePresence } from 'framer-motion'
import {
  ArrowRight, FileText, Search, MessageSquare, ShieldCheck, Cloud, Lock,
  CheckCircle2, Sparkles, Scale, GraduationCap, AlertTriangle,
  FolderOpen, Landmark, Users2, ChevronDown, Copy, Check, Terminal,
  Cpu, HardDrive, Zap, SlidersHorizontal, Calendar, Clock, Compass, ScanLine, Brain
} from 'lucide-react'

/* ─────────────────────────────────────────────────────────────────────────
   Brand tokens — "The Modern Jurist Studio"
   AyrisLegal Kırmızısı (#E61919) tek aksan renk, nötr paper white & zinc skalası.
   ───────────────────────────────────────────────────────────────────────── */
const ACCENT = '#E61919'
const ACCENT_DARK = '#B8140F'
const ACCENT_SOFT = '#FDEEEC'

function Reveal({ children, className = '', delay = 0 }: {
  children: React.ReactNode; className?: string; delay?: number
}) {
  const ref = useRef<HTMLDivElement>(null)
  const inView = useInView(ref, { once: true, margin: '-60px' })
  const shouldReduceMotion = useReducedMotion()

  if (shouldReduceMotion) {
    return <div className={className}>{children}</div>
  }

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 16 }}
      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
      transition={{ type: 'spring', stiffness: 100, damping: 20, delay }}
      className={className}
    >
      {children}
    </motion.div>
  )
}

/* Magnetic CTA — spring physics with reduced motion fallback */
function MagneticButton({
  href,
  children,
  variant = 'solid',
  className = ''
}: {
  href: string
  children: React.ReactNode
  variant?: 'solid' | 'outline'
  className?: string
}) {
  const shouldReduceMotion = useReducedMotion()
  const x = useMotionValue(0)
  const y = useMotionValue(0)
  const springX = useSpring(x, { stiffness: 150, damping: 15, mass: 0.5 })
  const springY = useSpring(y, { stiffness: 150, damping: 15, mass: 0.5 })
  const tx = useTransform(springX, v => v)
  const ty = useTransform(springY, v => v)

  const handleMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (shouldReduceMotion) return
    const rect = e.currentTarget.getBoundingClientRect()
    x.set((e.clientX - rect.left - rect.width / 2) * 0.22)
    y.set((e.clientY - rect.top - rect.height / 2) * 0.22)
  }
  const handleLeave = () => {
    x.set(0)
    y.set(0)
  }

  const base = `inline-flex items-center justify-center gap-2 rounded-full px-7 py-3.5 text-sm font-bold transition-all active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#E61919] ${className}`
  const style = variant === 'solid'
    ? { background: ACCENT, color: '#ffffff' }
    : { background: '#ffffff', color: '#18181B', border: '1.5px solid rgb(228 228 231)' }

  if (shouldReduceMotion) {
    return (
      <Link
        href={href}
        style={style}
        className={base}
        onMouseEnter={e => {
          if (variant === 'solid') (e.currentTarget as HTMLElement).style.background = ACCENT_DARK
        }}
        onMouseLeave={e => {
          if (variant === 'solid') (e.currentTarget as HTMLElement).style.background = ACCENT
        }}
      >
        {children}
      </Link>
    )
  }

  return (
    <motion.div
      style={{ x: tx, y: ty }}
      onMouseMove={handleMove}
      onMouseLeave={handleLeave}
      className="inline-block"
    >
      <Link
        href={href}
        style={style}
        className={base}
        onMouseEnter={e => {
          if (variant === 'solid') (e.currentTarget as HTMLElement).style.background = ACCENT_DARK
        }}
        onMouseLeave={e => {
          if (variant === 'solid') (e.currentTarget as HTMLElement).style.background = ACCENT
        }}
      >
        {children}
      </Link>
    </motion.div>
  )
}

/* Sürekli nabız atan "canlı" durum göstergesi */
const LivePulse = React.memo(function LivePulse() {
  return (
    <span className="relative flex h-2 w-2" aria-hidden="true">
      <motion.span
        className="absolute inline-flex h-full w-full rounded-full"
        style={{ background: ACCENT }}
        animate={{ scale: [1, 2.4], opacity: [0.6, 0] }}
        transition={{ duration: 1.6, repeat: Infinity, ease: 'easeOut' }}
      />
      <span className="relative inline-flex h-2 w-2 rounded-full" style={{ background: ACCENT }} />
    </span>
  )
})

function BrowserFrame({ children, title = 'AyrisLegal Masaüstü Çalışma Alanı', className = '' }: { children: React.ReactNode; title?: string; className?: string }) {
  return (
    <div className={`w-full overflow-hidden rounded-[1.75rem] border border-zinc-200/80 bg-white shadow-[0_30px_70px_-25px_rgba(24,24,27,0.20)] ${className}`}>
      <div className="flex items-center gap-2 border-b border-zinc-200/80 bg-zinc-50 px-4 py-3">
        <span className="h-2.5 w-2.5 rounded-full bg-red-400" aria-hidden="true" />
        <span className="h-2.5 w-2.5 rounded-full bg-amber-400" aria-hidden="true" />
        <span className="h-2.5 w-2.5 rounded-full bg-emerald-400" aria-hidden="true" />
        <span className="flex-1 text-center font-mono text-xs font-semibold text-zinc-500">{title}</span>
      </div>
      <div className="bg-white">{children}</div>
    </div>
  )
}

const NAV_LINKS = [
  { label: 'Modüller', href: '#moduller' },
  { label: 'UYAP & UDF', href: '#uyap' },
  { label: 'Güvenlik', href: '#guvenlik' },
  { label: 'Fiyatlar', href: '#fiyatlandirma' },
  { label: 'SSS', href: '#sss' },
]

export default function HomePage() {
  const [pricingDuration, setPricingDuration] = useState<'12m' | '6m'>('12m')
  const [activeTab, setActiveTab] = useState<
    'celiski' | 'ozet' | 'rontgen' | 'strateji' | 'muzakere' | 'dilekce' |
    'takvim' | 'sablonlar' | 'muvekkiller' | 'belgeler' | 'stajyer' | 'ictihat'
  >('celiski')
  const [openFaqIndex, setOpenFaqIndex] = useState<number | null>(0)
  const [copiedSnippet, setCopiedSnippet] = useState(false)

  const params = useParams()
  const locale = (params?.locale as string) || 'tr'

  const handleCopySnippet = () => {
    setCopiedSnippet(true)
    setTimeout(() => setCopiedSnippet(false), 2000)
  }

  return (
    <div className="min-h-[100dvh] bg-white text-zinc-900 selection:bg-[#FDEEEC] selection:text-[#B8140F]">
      {/* ══════════════════════════════ NAV ═════════════════════════════ */}
      <header className="sticky top-0 z-30 flex items-center justify-between gap-4 border-b border-zinc-100 bg-white/90 px-5 py-4 backdrop-blur-md md:px-16">
        <Link href={`/${locale}`} className="flex items-center gap-2.5" aria-label="AyrisLegal Ana Sayfa">
          <Image src="/logo.png" alt="AyrisLegal" width={28} height={28} className="h-7 w-auto object-contain" priority />
          <span className="text-xl font-extrabold tracking-tight text-zinc-950">AyrisLegal</span>
        </Link>
        <nav aria-label="Ana Menü" className="hidden items-center gap-8 md:flex">
          {NAV_LINKS.map(l => (
            <a key={l.href} href={l.href} className="text-sm font-semibold text-zinc-600 transition-colors hover:text-zinc-950">
              {l.label}
            </a>
          ))}
        </nav>
        <div className="flex items-center gap-3">
          <Link
            href={`/${locale}/iletisim`}
            className="inline-flex items-center gap-1.5 rounded-full px-5 py-2.5 text-sm font-bold text-white transition-all hover:bg-[#B8140F] shadow-sm active:scale-[0.98]"
            style={{ background: ACCENT }}
          >
            15 Dk Canlı Demo <ArrowRight size={15} strokeWidth={2.5} aria-hidden="true" />
          </Link>
        </div>
      </header>

      <main>
        {/* ══════════════════════════════ HERO ════════════════════════════ */}
        <section className="relative overflow-hidden pt-8 md:pt-14 pb-16 md:pb-24">
          <div className="mx-auto grid max-w-[1400px] grid-cols-1 gap-12 px-5 md:grid-cols-[1.05fr_0.95fr] md:gap-12 md:px-16 items-center">
            <div>
              <Reveal>
                <span className="inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                  <Sparkles size={14} strokeWidth={2.5} aria-hidden="true" /> Avukatlar İçin Yapay Zekâ Destekli Hukuk Çalışma Alanı
                </span>
              </Reveal>
              <Reveal delay={0.06}>
                <h1 className="mt-5 text-[clamp(2.375rem,5.2vw,3.75rem)] font-extrabold leading-[1.03] tracking-tight text-zinc-950">
                  Pasif araştırma değil,<br />
                  <span style={{ color: ACCENT }}>aktif düşünce ortağı.</span>
                </h1>
              </Reveal>
              <Reveal delay={0.12}>
                <p className="mt-6 max-w-[54ch] text-base md:text-lg leading-relaxed text-zinc-600">
                  AyrisLegal; yüzlerce sayfalık dava dosyalarınızı inceler, tensip ve tanık çelişkilerini yakalar, 18M+ içtihat tarar, duruşma simülasyonu yapar ve doğrudan UYAP uyumlu <strong>.udf</strong> dilekçe üretir.
                </p>
              </Reveal>
              <Reveal delay={0.18}>
                <div className="mt-8 flex flex-wrap items-center gap-4">
                  <MagneticButton href={`/${locale}/iletisim`}>
                    15 Dk Canlı Demo Alın <ArrowRight size={16} strokeWidth={2.5} aria-hidden="true" />
                  </MagneticButton>
                  <MagneticButton href="#moduller" variant="outline">
                    12 Analiz Modülünü İnceleyin
                  </MagneticButton>
                </div>
              </Reveal>
              <Reveal delay={0.24}>
                <p className="mt-5 text-xs font-semibold text-zinc-500 flex items-center gap-2">
                  <CheckCircle2 size={15} className="text-emerald-600 shrink-0" aria-hidden="true" />
                  Tüm veriler kendi bilgisayarınızda saklanır · Yasal olarak hiçbir veriniz tarafımıza ulaşmaz
                </p>
              </Reveal>
            </div>

            {/* Asimetrik Canlı Masaüstü Önizleme Paneli */}
            <Reveal delay={0.15} className="relative">
              <div className="relative">
                <BrowserFrame title="AyrisLegal — 2024/145 E. Ticari Alacak Davası">
                  <div className="p-5 sm:p-6">
                    {/* Dosya Başlığı & Canlı Durum */}
                    <div className="mb-4 flex items-center justify-between border-b border-zinc-100 pb-3">
                      <div>
                        <span className="font-mono text-xs font-bold text-zinc-800 uppercase tracking-wide">
                          2024/145 Esas · Ticari Alacak &amp; İtirazın İptali
                        </span>
                        <div className="text-xs text-zinc-500 mt-0.5">İstanbul 14. Asliye Ticaret Mahkemesi</div>
                      </div>
                      <span className="inline-flex items-center gap-1.5 rounded-full bg-zinc-50 border border-zinc-200/80 px-2.5 py-1 font-mono text-xs font-bold text-zinc-700">
                        <LivePulse /> UYAP Canlı Akış
                      </span>
                    </div>

                    {/* Evrak Triage Akışı */}
                    <div className="space-y-2.5">
                      {[
                        { title: 'Kök Bilirkişi Raporu (Mali İnceleme)', type: 'PDF / Otomatik Metin Okuma', date: '18.01.2026', badge: 'Çelişki Tespit Edildi' },
                        { title: '2024/145 Esas Tensip Zaptı', type: 'UDF / Resmi Format', date: '12.01.2026', badge: 'Ara Karar Eşleşti' },
                        { title: 'Ticari Defter & İrsaliyeli Faturalar', type: 'Ek Delil Paketi', date: '10.01.2026', badge: 'Aranabilir Metin' },
                      ].map(row => (
                        <div key={row.title} className="flex items-center justify-between rounded-2xl border border-zinc-100 bg-zinc-50/60 px-4 py-3">
                          <div className="flex items-center gap-3">
                            <CheckCircle2 size={16} strokeWidth={2.2} className="text-emerald-600 shrink-0" aria-hidden="true" />
                            <div>
                              <div className="text-sm font-bold text-zinc-900">{row.title}</div>
                              <span className="font-mono text-xs font-semibold text-zinc-500">{row.type}</span>
                            </div>
                          </div>
                          <span className="font-mono text-xs font-medium text-zinc-500">{row.date}</span>
                        </div>
                      ))}
                    </div>

                    {/* Çelişki Avcısı & Strateji Kartı */}
                    <div className="mt-4 rounded-2xl border border-red-200/90 p-4" style={{ background: ACCENT_SOFT }}>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2 font-bold text-xs uppercase tracking-wide" style={{ color: ACCENT_DARK }}>
                          <AlertTriangle size={15} strokeWidth={2.5} aria-hidden="true" />
                          <span>İfade &amp; Çelişki Avcısı (Çapraz Sorgu)</span>
                        </div>
                        <span className="font-mono text-xs font-bold rounded-full bg-white/80 px-2.5 py-0.5" style={{ color: ACCENT_DARK }}>
                          TTK m. 83 Uyumsuzluğu
                        </span>
                      </div>
                      <p className="mt-2 text-xs font-medium leading-relaxed text-zinc-800">
                        Bilirkişi raporundaki cari hesap mutabakat tarihi ile davalı şirket yetkilisinin savcılık beyanında belirttiği teslimat tarihi arasında <strong>45 günlük çelişki</strong> tespit edildi.
                      </p>
                    </div>
                  </div>
                </BrowserFrame>

                {/* Floating Dijital Stajyer Rozeti */}
                <div className="absolute -bottom-6 -left-6 hidden w-[270px] rounded-2xl border border-zinc-200/80 bg-white p-4 shadow-[0_20px_45px_-15px_rgba(24,24,27,0.20)] lg:block">
                  <div className="flex items-center gap-2 text-xs font-bold text-zinc-900">
                    <GraduationCap size={16} strokeWidth={2} style={{ color: ACCENT }} aria-hidden="true" />
                    <span>Dijital Stajyer: Duruşma Nokta Atışı</span>
                  </div>
                  <p className="mt-1.5 font-mono text-xs text-zinc-600">
                    &ldquo;Sayfa 14, Paragraf 3: Fatura vadesi 15.03.2024&rdquo; (%99 Güven)
                  </p>
                </div>
              </div>
            </Reveal>
          </div>

          {/* İstatistik Şeridi */}
          <div className="mx-auto max-w-[1400px] px-5 pt-16 md:px-16">
            <Reveal>
              <div className="grid grid-cols-2 gap-6 border-t border-zinc-100 pt-10 md:grid-cols-4">
                {[
                  { value: '18 Milyon+', label: 'Yargıtay, Danıştay, AYM, BAM Emsal Kararı' },
                  { value: '12 Analiz Modülü', label: 'Çelişki avcısı, simülatör, dosya röntgeni' },
                  { value: 'Doğal .UDF', label: 'UYAP Doküman Editörü doğrudan çıktı desteği' },
                  { value: 'Gizlilik Odaklı', label: 'Yerel depolama & Sıfır Model Eğitimi güvencesi' },
                ].map(s => (
                  <div key={s.label}>
                    <div className="font-mono text-2xl md:text-3xl font-extrabold text-zinc-950">{s.value}</div>
                    <div className="mt-1.5 text-xs font-medium leading-snug text-zinc-600">{s.label}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </section>

        {/* ══════════════════════════════ 12 DAVA ANALİZ MODÜLÜ (STÜDYO) ══ */}
        <section id="moduller" className="bg-zinc-50/70 py-20 md:py-28 border-y border-zinc-100">
          <div className="mx-auto max-w-[1400px] px-5 md:px-16">
            <Reveal>
              <div className="mb-12 max-w-[60ch]">
                <h2 className="text-[clamp(1.75rem,3.5vw,2.5rem)] font-extrabold tracking-tight text-zinc-950">
                  Davanın her safhası için 12 uzman yapay zekâ modülü
                </h2>
                <p className="mt-3 text-base text-zinc-600">
                  Tensip zaptından duruşma salonuna, arabuluculuk masasından UDF dilekçe imzasına kadar eksiksiz hukuk çalışma alanı.
                </p>
              </div>
            </Reveal>

            {/* Modül Sekmeleri */}
            <Reveal delay={0.06}>
              <div role="tablist" aria-label="12 Hukuk Çalışma Modülü" className="flex flex-wrap gap-2 mb-8">
                {[
                  { id: 'celiski', label: '01. İfade & Çelişki Avcısı', icon: AlertTriangle },
                  { id: 'ozet', label: '02. Yapay Zekâ Dosya Özeti', icon: Brain },
                  { id: 'rontgen', label: '03. Dosya Röntgeni (Usul)', icon: ScanLine },
                  { id: 'strateji', label: '04. Dava Stratejisi & Plan', icon: Compass },
                  { id: 'muzakere', label: '05. Müzakere & Arabuluculuk', icon: Scale },
                  { id: 'dilekce', label: '06. Dilekçe Stüdyosu (.UDF)', icon: FileText },
                  { id: 'takvim', label: '07. Duruşma Takvimi & Ajanda', icon: Calendar },
                  { id: 'sablonlar', label: '08. Belge & Şablon Havuzu', icon: SlidersHorizontal },
                  { id: 'muvekkiller', label: '09. Müvekkiller & Cari Takip', icon: Users2 },
                  { id: 'belgeler', label: '10. Belgeler & Yerel OCR', icon: FolderOpen },
                  { id: 'stajyer', label: '11. Dijital Stajyer & Duruşma', icon: GraduationCap },
                  { id: 'ictihat', label: '12. 18M+ İçtihat & Mevzuat', icon: Search },
                ].map(tab => {
                  const isSelected = activeTab === tab.id
                  const Icon = tab.icon
                  return (
                    <button
                      key={tab.id}
                      role="tab"
                      aria-selected={isSelected}
                      onClick={() => setActiveTab(tab.id as any)}
                      className={`inline-flex items-center gap-2 rounded-full px-4 py-2 text-xs md:text-sm font-bold transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#E61919] ${
                        isSelected
                          ? 'bg-zinc-950 text-white shadow-sm'
                          : 'bg-white text-zinc-700 hover:bg-zinc-100 border border-zinc-200/80'
                      }`}
                    >
                      <Icon size={14} strokeWidth={2.2} style={{ color: isSelected ? '#ffffff' : ACCENT }} aria-hidden="true" />
                      {tab.label}
                    </button>
                  )
                })}
              </div>
            </Reveal>

            {/* Modül İçerik Paneli */}
            <Reveal delay={0.12}>
              <div className="overflow-hidden rounded-3xl border border-zinc-200/80 bg-white p-6 sm:p-8 md:p-10 shadow-[0_20px_60px_-30px_rgba(24,24,27,0.12)]">
                <AnimatePresence mode="wait">
                  {/* TAB 1: ÇELİŞKİ AVCISI */}
                  {activeTab === 'celiski' && (
                    <motion.div
                      key="celiski"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <AlertTriangle size={13} strokeWidth={2.5} /> ÇAPRAZ SORGU &amp; İFADE ÇELİŞKİ ANALİZİ
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Kolluk, Savcılık ve Mahkeme İfadeleri Arasındaki Çatlaklar
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Sanık, mağdur ve tanık beyanlarını farklı aşamalardaki evraklarla karşılaştırır; yer, zaman, eylem tutarsızlıklarını çıkarıp duruşmada sorulacak can alıcı soruları hazırlar.
                        </p>
                        <div className="mt-6 space-y-3">
                          <div className="rounded-2xl border border-zinc-100 bg-zinc-50 p-4">
                            <div className="font-mono text-xs font-bold text-zinc-500 uppercase">1. Kaynak: Kolluk İfade Tutanağı (14.02.2024 · 02:15)</div>
                            <p className="mt-1 text-sm font-medium text-zinc-800">
                              &ldquo;...Olay saatinde şirketin merkez ofisinde toplantıdaydım, fabrikaya hiç uğramadım.&rdquo;
                            </p>
                          </div>
                          <div className="rounded-2xl border border-zinc-100 bg-zinc-50 p-4">
                            <div className="font-mono text-xs font-bold text-zinc-500 uppercase">2. Kaynak: HTS &amp; Baz Kaydı / Güvenlik Kamera Raporu</div>
                            <p className="mt-1 text-sm font-medium text-zinc-800">
                              &ldquo;...Sanığın cep telefonu aynı gece 01:45-02:30 arasında Organize Sanayi Bölgesi baz istasyonundan sinyal almıştır.&rdquo;
                            </p>
                          </div>
                        </div>
                      </div>

                      <div className="rounded-2xl border border-red-200/90 bg-red-50/50 p-6">
                        <div className="flex items-center justify-between border-b border-red-200/60 pb-3">
                          <div className="font-bold text-sm text-zinc-900 flex items-center gap-2">
                            <Scale size={16} style={{ color: ACCENT }} />
                            Duruşmada Sorulacak Çapraz Sorgu Soruları
                          </div>
                          <span className="font-mono text-xs font-bold text-emerald-800 bg-emerald-100/80 px-2.5 py-0.5 rounded-full">
                            CMK m. 201
                          </span>
                        </div>
                        <ul className="mt-4 space-y-3 text-xs leading-relaxed text-zinc-800">
                          <li className="flex items-start gap-2">
                            <span className="font-bold font-mono text-red-600">S.1:</span>
                            <span>Kolluk ifadenizde ofiste olduğunuzu belirtmenize rağmen, baz kayıtları OSB bölgesinde olduğunuzu göstermektedir. Bu çelişkiyi nasıl açıklıyorsunuz?</span>
                          </li>
                          <li className="flex items-start gap-2">
                            <span className="font-bold font-mono text-red-600">S.2:</span>
                            <span>Tanık Ahmet Yılmaz&apos;ın sizi 02:10&apos;da fabrika kapısında gördüğü yönündeki beyanı karşısında savunmanız nedir?</span>
                          </li>
                        </ul>
                        <div className="mt-5 rounded-xl bg-white p-3.5 border border-red-200/60 font-mono text-xs text-zinc-700">
                          <strong>Dava Stratejisi Notu:</strong> Çelişki sabit olduğundan beraat talebine itiraz edilmeli ve kamera kayıtlarının bilirkişiyle netleştirilmesi istenmelidir.
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 2: YAPAY ZEKA ÖZETİ */}
                  {activeTab === 'ozet' && (
                    <motion.div
                      key="ozet"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <Brain size={13} strokeWidth={2.5} /> KRONOLOJİ &amp; DOSYA ÖZETİ
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          180+ Sayfalık Dosyadan Net Olay Örgüsü ve Risk Haritası
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Tensip zabıtları, dilekçeler, sevk irsaliyeleri ve banka dekontlarını kronolojik sıraya dizer; tarafların iddialarını, yasal dayanakları ve davanın zayıf noktalarını tek raporda özetler.
                        </p>
                        <div className="mt-6 space-y-2 text-xs font-mono">
                          <div className="rounded-xl border border-zinc-200/80 bg-zinc-50 p-3.5">
                            <span className="text-zinc-500">DOSYA:</span> <strong>2024/145 E. Ticari Alacak &amp; İtirazın İptali</strong>
                          </div>
                          <div className="rounded-xl border border-zinc-200/80 bg-zinc-50 p-3.5">
                            <span className="text-zinc-500">TARANAN EVRAK:</span> <strong>28 Adet Belge (182 Sayfa OCR)</strong>
                          </div>
                        </div>
                      </div>

                      <div className="rounded-2xl border border-zinc-200/80 bg-zinc-50 p-6 space-y-4 text-xs font-mono text-zinc-800">
                        <div className="flex items-center justify-between border-b border-zinc-200 pb-3">
                          <span className="font-bold text-zinc-900">KRONOLOJİK OLAY HARİTASI</span>
                          <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-bold text-emerald-800">%85 Haklılık Skoru</span>
                        </div>
                        <div className="space-y-2.5">
                          <div className="bg-white p-3 rounded-xl border border-zinc-200/60">
                            <strong className="text-zinc-900">12.01.2024:</strong> Sözleşme akdedildi (Madde 4: 30 gün vade).
                          </div>
                          <div className="bg-white p-3 rounded-xl border border-zinc-200/60">
                            <strong className="text-zinc-900">18.02.2024:</strong> 340.000 ₺ tutarlı 4 parti mal teslim edildi (İrsaliye No: 48102).
                          </div>
                          <div className="bg-white p-3 rounded-xl border border-zinc-200/60">
                            <strong className="text-zinc-900">26.02.2024:</strong> Faturaya 8 günlük yasal sürede itiraz edilmedi (TTK m. 21/2).
                          </div>
                        </div>
                        <div className="rounded-xl bg-amber-50 p-3 border border-amber-200 text-amber-900 font-sans text-xs">
                          <strong>Hukuki Risk:</strong> Karşı tarafın kısmi ayıplı mal iddiası için bilirkişi heyetine ek inceleme talebi hazırlanmalıdır.
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 3: DOSYA RÖNTGENİ */}
                  {activeTab === 'rontgen' && (
                    <motion.div
                      key="rontgen"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <ScanLine size={13} strokeWidth={2.5} /> HMK &amp; CMK USUL RÖNTGENİ
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Usul Hataları, Tebligat Eksiklikleri ve Kesin Süre Taraması
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Mahkemenin tensip zaptındaki ara kararlarını ve tebligat mazbatalarını tarar; harç tamamlama, bilirkişi itirazı ve delil bildirme gibi hak düşürücü süreleri kaçırmamanız için kırmızı alarm üretir.
                        </p>
                        <div className="mt-6 flex flex-wrap gap-2 text-xs">
                          <span className="rounded-full bg-zinc-100 px-3 py-1 font-bold text-zinc-800">HMK m. 119 Dava Şartı</span>
                          <span className="rounded-full bg-zinc-100 px-3 py-1 font-bold text-zinc-800">HMK m. 281 Bilirkişi İtiraz</span>
                          <span className="rounded-full bg-zinc-100 px-3 py-1 font-bold text-zinc-800">Tebligat Kanunu m. 21/2</span>
                        </div>
                      </div>

                      <div className="rounded-2xl border border-zinc-200/80 bg-zinc-50 p-6 space-y-3 text-xs">
                        <div className="flex items-center justify-between border-b border-zinc-200 pb-3">
                          <span className="font-bold font-mono text-zinc-900">TESPİT EDİLEN USUL DURUMU</span>
                          <span className="rounded bg-red-100 px-2 py-0.5 font-bold text-red-700 font-mono">1 Kritik Uyarı</span>
                        </div>
                        <div className="bg-red-50 border border-red-200 p-3.5 rounded-xl text-red-900 space-y-1">
                          <div className="font-bold flex items-center gap-1.5"><AlertTriangle size={14} /> Yüksek Öncelik: Bilirkişi Raporuna İtiraz</div>
                          <p className="text-xs font-sans">12.08.2026 tarihinde tebliğ edilen kök rapora 2 haftalık yasal itiraz süresinin bitimine <strong>4 gün kaldı</strong> (Son gün: 26.08.2026).</p>
                        </div>
                        <div className="bg-emerald-50 border border-emerald-200 p-3.5 rounded-xl text-emerald-900 space-y-1">
                          <div className="font-bold flex items-center gap-1.5"><CheckCircle2 size={14} /> Tamamlanan Usul Aşaması: Tebligat Mazbatası</div>
                          <p className="text-xs font-sans">Davalı vekiline yapılan dava dilekçesi tebliği e-Tebligat sistemi üzerinden usulüne uygun kesinleşmiştir.</p>
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 4: DAVA STRATEJİSİ */}
                  {activeTab === 'strateji' && (
                    <motion.div
                      key="strateji"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <Compass size={13} strokeWidth={2.5} /> KAZANMA PLANI &amp; DEF&apos;İ STRATEJİSİ
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Adım Adım Dava Yol Haritası ve Karşı Hamle Tahmini
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Müvekkilinizin lehine olan emsal Yargıtay kararlarını sıralar; karşı tarafın muhtemel zamanaşımı ve yetki itirazlarına karşı önleyici dilekçe stratejisi kurar.
                        </p>
                        <div className="mt-6 space-y-2">
                          <div className="rounded-xl border border-zinc-200/80 bg-zinc-50 p-3 text-xs font-semibold text-zinc-800">
                            🎯 1. Hamle: TTK m. 83 uyarınca karşı taraf ticari defterlerinin ibrazını istemek
                          </div>
                          <div className="rounded-xl border border-zinc-200/80 bg-zinc-50 p-3 text-xs font-semibold text-zinc-800">
                            🎯 2. Hamle: İİK m. 67 gereğince %20 icra inkâr tazminatı talebini yinelemek
                          </div>
                        </div>
                      </div>

                      <div className="rounded-2xl border border-zinc-200/80 bg-white p-6 shadow-sm">
                        <div className="font-bold text-sm text-zinc-950 mb-2">Stratejik Mahkeme Talepleri Listesi</div>
                        <ul className="space-y-2.5 text-xs text-zinc-700">
                          <li className="p-2.5 bg-zinc-50 rounded-lg border border-zinc-100">
                            <strong>Müzekkere Talebi:</strong> Garanti Bankası Levent Şubesi&apos;ne müzekkere yazılarak davalının 18.02.2024 tarihli EFT dekont aslının celbi.
                          </li>
                          <li className="p-2.5 bg-zinc-50 rounded-lg border border-zinc-100">
                            <strong>Bilirkişi Ek Raporu:</strong> Mali müşavir bilirkişinin reeskont avans faizi hesabındaki 18.400 ₺ eksik hesaplamanın düzeltilmesi.
                          </li>
                          <li className="p-2.5 bg-zinc-50 rounded-lg border border-zinc-100">
                            <strong>İçtihat Dayanağı:</strong> Yargıtay 11. HD 2023/1842 E. emsal kararı ile faturanın kesinleştiğinin tespiti.
                          </li>
                        </ul>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 5: MÜZAKERE & ARABULUCULUK */}
                  {activeTab === 'muzakere' && (
                    <motion.div
                      key="muzakere"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <Scale size={13} strokeWidth={2.5} /> RİSK &amp; TAZMİNAT MODELLEMESİ
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Kazanma İhtimali ve Masadan Kalkış Noktası (Walk-Away)
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Dava maliyetini, yargılama süresini ve delil gücünü analiz eder; arabuluculuk masasında kabul edilebilecek asgari tutarı ve açılış teklifini belirler.
                        </p>
                      </div>

                      <div className="rounded-2xl border border-zinc-200/80 bg-zinc-50 p-6">
                        <div className="flex items-center justify-between border-b border-zinc-200/80 pb-3">
                          <span className="font-mono text-xs font-bold text-zinc-800">MÜZAKERE &amp; ARABULUCULUK HESAPLAMASI</span>
                          <span className="font-mono text-xs font-bold text-emerald-800 bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-200/60">
                            Kazanma Olasılığı: %78 - %84
                          </span>
                        </div>
                        <div className="mt-4 space-y-3 text-xs">
                          <div className="flex justify-between items-center bg-white p-3 rounded-xl border border-zinc-200/60 font-mono">
                            <span className="text-zinc-600">Tahmini Tazminat Aralığı:</span>
                            <strong className="text-zinc-950 font-bold">450.000 ₺ - 620.000 ₺</strong>
                          </div>
                          <div className="flex justify-between items-center bg-white p-3 rounded-xl border border-zinc-200/60 font-mono">
                            <span className="text-zinc-600">Masadan Kalkış Noktası (Alt Sınır):</span>
                            <strong className="text-red-600 font-bold">380.000 ₺</strong>
                          </div>
                          <p className="text-zinc-600 leading-relaxed pt-1 font-sans">
                            <strong>Önerilen İlk Teklif:</strong> 650.000 ₺ ile açılış yapılması, ticari faiz indirimine karşılık anaparanın 15 gün içinde nakden tahsiline odaklanılması tavsiye edilir.
                          </p>
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 6: DİLEKÇE STÜDYOSU */}
                  {activeTab === 'dilekce' && (
                    <motion.div
                      key="dilekce"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <FileText size={13} strokeWidth={2.5} /> DİLEKÇE STÜDYOSU &amp; DOĞAL .UDF MOTORU
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          10 Kategori, 50+ Dilekçe Türü &amp; UYAP Doküman Çıktısı
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Dava dosyasındaki tensip zaptı, deliller ve ilgili Yargıtay içtihatları otomatik olarak dilekçenize aktarılır. Tek tıkla UYAP Doküman Editörü uyumlu <strong>.udf</strong>, Word (DOCX) veya PDF olarak dışa aktarılır.
                        </p>
                        <div className="mt-6 flex flex-wrap gap-2">
                          <span className="rounded-full bg-zinc-100 px-3 py-1 text-xs font-bold text-zinc-700">UYAP (.udf) İndir</span>
                          <span className="rounded-full bg-zinc-100 px-3 py-1 text-xs font-bold text-zinc-700">Word (.docx) İndir</span>
                          <span className="rounded-full bg-zinc-100 px-3 py-1 text-xs font-bold text-zinc-700">📚 Kanun Maddesi Ekle</span>
                        </div>
                      </div>

                      <div className="rounded-2xl border border-zinc-200/80 bg-zinc-50 p-6">
                        <div className="flex items-center justify-between border-b border-zinc-200/80 pb-3">
                          <span className="font-mono text-xs font-bold text-zinc-700">İSTANBUL 14. ASLİYE TİCARET MAHKEMESİNE</span>
                          <button
                            onClick={handleCopySnippet}
                            className="inline-flex items-center gap-1.5 font-mono text-xs font-bold text-zinc-700 hover:text-zinc-950 bg-white px-2.5 py-1 rounded-lg border border-zinc-200/80"
                          >
                            {copiedSnippet ? <Check size={13} className="text-emerald-600" /> : <Copy size={13} />}
                            {copiedSnippet ? 'Kopyalandı' : 'Kopyala'}
                          </button>
                        </div>
                        <div className="mt-4 space-y-2 font-mono text-xs text-zinc-800 leading-relaxed bg-white p-4 rounded-xl border border-zinc-200/60">
                          <p><strong>ESAS NO:</strong> 2024/145 Esas</p>
                          <p><strong>DAVACI:</strong> Kozmos Bilişim A.Ş.</p>
                          <p><strong>KONU:</strong> 18.01.2026 tarihli kök bilirkişi raporuna itirazlarımız ve ek rapor talebimiz hk.</p>
                          <p className="pt-2 text-zinc-600">
                            <strong>HUKUKİ SEBEPLER:</strong> 6100 sayılı HMK m. 281, 6102 sayılı TTK m. 83 ve Yargıtay HGK 2022/11-402 E. sayılı yerleşik içtihadı uyarınca...
                          </p>
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 7: DURUŞMA TAKVİMİ & AJANDA */}
                  {activeTab === 'takvim' && (
                    <motion.div
                      key="takvim"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <Calendar size={13} strokeWidth={2.5} /> BÜRO AJANDASI &amp; DURUŞMA TAKVİMİ
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Adliye Bazlı Filtreleme ve Çakışmasız Duruşma Yönetimi
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          UYAP portalındaki tüm duruşma günleri, kesin süreler ve bilirkişi itiraz tarihleri tek merkezde toplanır. Çağlayan, Bakırköy, Kartal adliyelerine göre renk kodlu listeler ve çakışma uyarıları sunar.
                        </p>
                        <div className="mt-6 flex flex-wrap gap-2 text-xs font-mono">
                          <span className="rounded-lg bg-blue-50 border border-blue-200 px-2.5 py-1 text-blue-800 font-bold">Çağlayan Adliyesi</span>
                          <span className="rounded-lg bg-purple-50 border border-purple-200 px-2.5 py-1 text-purple-800 font-bold">Bakırköy Adliyesi</span>
                          <span className="rounded-lg bg-emerald-50 border border-emerald-200 px-2.5 py-1 text-emerald-800 font-bold">Anadolu (Kartal)</span>
                        </div>
                      </div>

                      <div className="rounded-2xl border border-zinc-200/80 bg-zinc-50 p-6 space-y-3 font-mono text-xs">
                        <div className="flex items-center justify-between border-b border-zinc-200 pb-3">
                          <span className="font-bold text-zinc-900">BUGÜNÜN DURUŞMA PROGRAMI</span>
                          <span className="rounded bg-emerald-100 px-2 py-0.5 text-emerald-800 font-bold">3 Duruşma</span>
                        </div>
                        <div className="space-y-2 font-sans">
                          <div className="bg-white p-3 rounded-xl border border-zinc-200/60 flex items-center justify-between">
                            <div>
                              <div className="font-bold text-zinc-900">09:30 · İstanbul 14. Asliye Ticaret (Salon 2)</div>
                              <div className="text-xs text-zinc-600 font-mono">2024/145 E. Kozmos vs. Demirtaş (Tahkikat)</div>
                            </div>
                            <span className="rounded bg-blue-100 text-blue-800 px-2 py-0.5 text-xs font-bold font-mono">Çağlayan</span>
                          </div>
                          <div className="bg-white p-3 rounded-xl border border-zinc-200/60 flex items-center justify-between">
                            <div>
                              <div className="font-bold text-zinc-900">11:15 · İstanbul 3. İş Mahkemesi (Salon 1)</div>
                              <div className="text-xs text-zinc-600 font-mono">2025/312 E. Kıdem &amp; İhbar Tazminatı</div>
                            </div>
                            <span className="rounded bg-blue-100 text-blue-800 px-2 py-0.5 text-xs font-bold font-mono">Çağlayan</span>
                          </div>
                          <div className="bg-white p-3 rounded-xl border border-zinc-200/60 flex items-center justify-between">
                            <div>
                              <div className="font-bold text-zinc-900">14:00 · Bakırköy 8. Ağır Ceza (Salon 4)</div>
                              <div className="text-xs text-zinc-600 font-mono">2024/89 E. Karar Duruşması</div>
                            </div>
                            <span className="rounded bg-purple-100 text-purple-800 px-2 py-0.5 text-xs font-bold font-mono">Bakırköy</span>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 8: BELGE & SÖZLEŞME ŞABLONLARI */}
                  {activeTab === 'sablonlar' && (
                    <motion.div
                      key="sablonlar"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <SlidersHorizontal size={13} strokeWidth={2.5} /> 120+ HUKUKİ BELGE &amp; SÖZLEŞME ŞABLONU
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Tahliye Taahhütnamesi, İhtarnameler ve Protokoller
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Büronuzun en sık ihtiyaç duyduğu güncel yargı içtihatlarına tam uyumlu sözleşmeler, vekaletnameler, tahliye taahhütnameleri ve arabuluculuk anlaşma tutanakları hazır dinamik alanlarla gelir.
                        </p>
                        <div className="mt-6 flex flex-wrap gap-2 text-xs">
                          <span className="rounded-full bg-zinc-100 px-3 py-1 font-bold text-zinc-800">TBK Uyumlu Tahliye Taahhüdü</span>
                          <span className="rounded-full bg-zinc-100 px-3 py-1 font-bold text-zinc-800">İbraname &amp; Feragatname</span>
                          <span className="rounded-full bg-zinc-100 px-3 py-1 font-bold text-zinc-800">Gizlilik Sözleşmesi (NDA)</span>
                        </div>
                      </div>

                      <div className="rounded-2xl border border-zinc-200/80 bg-zinc-50 p-6 space-y-3 font-sans text-xs">
                        <div className="flex items-center justify-between border-b border-zinc-200 pb-3 font-mono">
                          <span className="font-bold text-zinc-900">TAHLİYE TAAHHÜTNAMESİ ŞABLONU (TBK m. 352/1)</span>
                          <span className="rounded bg-emerald-100 px-2 py-0.5 text-emerald-800 font-bold">İçtihat Uyumlu</span>
                        </div>
                        <div className="bg-white p-4 rounded-xl border border-zinc-200/60 space-y-2 font-mono text-xs text-zinc-800">
                          <p><strong>TAAHHÜT EDEN (KİRACI):</strong> [Kiracı Adı Soyadı / TC No]</p>
                          <p><strong>KİRAYA VEREN:</strong> [Mal Sahibi Adı Soyadı]</p>
                          <p><strong>TAHLİYE TARİHİ:</strong> 15.09.2026 (Kira akdinden sonraki tarih)</p>
                          <p className="text-zinc-600 pt-1 font-sans">
                            💡 <strong>Yargıtay Uyarısı:</strong> Kira sözleşmesi ile aynı gün imzalanmadığı teyit edilmiş olup, Yargıtay Hukuk Genel Kurulu 2021/3-412 E. içtihadına uygun tanzim tarihi koruması içerir.
                          </p>
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 9: MÜVEKKİLLER & CARİ TAKİP */}
                  {activeTab === 'muvekkiller' && (
                    <motion.div
                      key="muvekkiller"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <Users2 size={13} strokeWidth={2.5} /> MÜVEKKİL CRM &amp; CARİ HESAP TAKİBİ
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Masraf, Avans, Bilirkişi Harçları ve Vekalet Ücreti Dengesi
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Müvekkillerinizin bağlı dava dosyalarını, yapılan UYAP harçlarını, bilirkişi avanslarını ve vekalet ücreti tahsilatlarını tek merkezden çevrimdışı ve güvenle takip edin.
                        </p>
                      </div>

                      <div className="rounded-2xl border border-zinc-200/80 bg-zinc-50 p-6 space-y-3 font-mono text-xs">
                        <div className="flex items-center justify-between border-b border-zinc-200 pb-3">
                          <span className="font-bold text-zinc-900">MÜVEKKİL: KOZMOS BİLİŞİM SİSTEMLERİ A.Ş.</span>
                          <span className="rounded bg-blue-100 px-2 py-0.5 text-blue-800 font-bold">3 Aktif Dosya</span>
                        </div>
                        <div className="grid grid-cols-2 gap-2.5">
                          <div className="bg-white p-3 rounded-xl border border-zinc-200/60">
                            <span className="text-zinc-500">Alınan Avans &amp; Masraf:</span>
                            <div className="text-base font-bold text-zinc-900 mt-1">42.500 ₺</div>
                          </div>
                          <div className="bg-white p-3 rounded-xl border border-zinc-200/60">
                            <span className="text-zinc-500">Hakedilen Vekalet Ücreti:</span>
                            <div className="text-base font-bold text-emerald-600 mt-1">120.000 ₺</div>
                          </div>
                        </div>
                        <div className="bg-white p-3 rounded-xl border border-zinc-200/60 font-sans text-xs text-zinc-700">
                          <strong>Son İşlem:</strong> 18.08.2026 · 4.200 ₺ Bilirkişi Ücreti UYAP Masraf Dekontu kaydedildi. (Cari bakiye mutabık).
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 10: BELGELER & YEREL OCR */}
                  {activeTab === 'belgeler' && (
                    <motion.div
                      key="belgeler"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <FolderOpen size={13} strokeWidth={2.5} /> YEREL DÖKÜMAN OCR &amp; AKILLI FİLTRE
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Taranmış PDF ve Resim Evraklarında Anında Metin Çıkarma
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Yalnızca kendi bilgisayarınızın işlemcisiyle çalışan yerel OCR motoru; el yazılı tutanakları, eski tip irsaliyeleri ve mühürlü raporları tam metin aranabilir hale getirir.
                        </p>
                      </div>

                      <div className="rounded-2xl border border-zinc-200/80 bg-zinc-900 text-white p-6 space-y-3 font-mono text-xs">
                        <div className="flex items-center justify-between border-b border-zinc-800 pb-3 text-zinc-400">
                          <span>TARANAN BELGE: İrsaliye_Teslim_Fisi_Scan.pdf</span>
                          <span className="text-emerald-400">OCR Tamamlandı (100%)</span>
                        </div>
                        <div className="bg-zinc-950 p-3.5 rounded-xl border border-zinc-800 text-zinc-300 space-y-1">
                          <p className="text-zinc-500">// Çıkarılan Metin Katmanı</p>
                          <p>&ldquo;Teslim Alan: Ahmet Kaan (Depo Sorumlusu - Kaşe/İmza)&rdquo;</p>
                          <p>&ldquo;Mal Cinsi: 40 Adet Endüstriyel Sunucu Donanımı&rdquo;</p>
                          <p>&ldquo;Teslim Tarihi: 18.02.2024 Saat: 16:45 — Hasarsız teslim alındı.&rdquo;</p>
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 11: DİJİTAL STAJYER */}
                  {activeTab === 'stajyer' && (
                    <motion.div
                      key="stajyer"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <GraduationCap size={13} strokeWidth={2.5} /> CANLI DURUŞMA NOKTA ATIŞI ASİSTANI
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Duruşma Esnasında 3 Saniyede Net Evrak ve Sayfa Alıntısı
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Hakim veya karşı taraf avukatı anlık bir soru sorduğunda klasör karıştırmaya son. Saniyeler içinde evrak adı, kesin tarih, saat, sayfa no ve tırnak içi alıntı önünüze gelir.
                        </p>
                        <div className="mt-6 space-y-2">
                          {[
                            '🏥 Hastane ve adli tıp raporu hangi tarihteydi?',
                            '📜 Sanığın kolluktaki ifadesi saat kaçta alınmış?',
                            '🚗 Olay yeri inceleme raporunda ne yazıyor?',
                            '📞 HTS ve baz istasyonu kayıt tarihleri nelerdir?'
                          ].map(q => (
                            <div key={q} className="rounded-xl border border-zinc-200/80 bg-zinc-50 px-3.5 py-2 text-xs font-semibold text-zinc-800">
                              {q}
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="rounded-2xl border border-emerald-200/90 bg-emerald-50/50 p-6">
                        <div className="flex items-center justify-between border-b border-emerald-200/60 pb-3">
                          <span className="font-mono text-xs font-bold text-emerald-900">📌 NOKTA ATIŞI DURUŞMA YANITI</span>
                          <span className="font-mono text-xs font-bold text-emerald-800 bg-white px-2.5 py-0.5 rounded-full border border-emerald-200">
                            %98.4 Güven Skoru
                          </span>
                        </div>
                        <div className="mt-4 space-y-2 text-xs font-mono text-zinc-800 bg-white p-4 rounded-xl border border-emerald-200/60">
                          <p><strong>EVRAK:</strong> Adli Tıp Kurumu 2. İhtisas Kurulu Raporu</p>
                          <p><strong>TARİH / SAAT:</strong> 04.11.2024 · 14:30</p>
                          <p><strong>SAYFA / PARAGRAF:</strong> Sayfa 7, Paragraf 4</p>
                          <div className="mt-2 pt-2 border-t border-zinc-100 text-zinc-900 font-sans text-xs italic">
                            &ldquo;...Yapılan muayenede tespit edilen bulguların basit tıbbi müdahaleyle (BTM) giderilebilecek nitelikte olduğu oybirliğiyle mütalaa olunur.&rdquo;
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* TAB 12: 18M İÇTİHAT VE MEVZUAT */}
                  {activeTab === 'ictihat' && (
                    <motion.div
                      key="ictihat"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-1 gap-8 lg:grid-cols-2 items-start"
                    >
                      <div>
                        <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                          <Search size={13} strokeWidth={2.5} /> 18 MİLYON+ EMSAL &amp; 26.900+ KANUN MADDESİ
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Doğal Dille Arama &amp; Çevrimdışı Kanun Deposu
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Yargıtay, Danıştay, AYM, BAM, UYAP Emsaller, Sigorta Tahkim, KVKK ve Rekabet Kurumu kararlarını semantik gerekçe uyumuna göre puanlar. 26.900+ kanun maddesine internetsiz ortamda bile anında erişim sağlar.
                        </p>
                        <div className="mt-6 flex flex-wrap gap-1.5 text-xs font-mono">
                          {['HMK (6100)', 'TCK (5237)', 'CMK (5271)', 'TMK (4721)', 'TBK (6098)', 'İİK (2004)', 'İYUK (2577)', 'İŞK (4857)', 'TTK (6102)'].map(k => (
                            <span key={k} className="rounded-lg bg-zinc-100 border border-zinc-200/80 px-2.5 py-1 text-zinc-700 font-semibold">
                              {k}
                            </span>
                          ))}
                        </div>
                      </div>

                      <div className="space-y-3">
                        {[
                          { daire: 'Yargıtay Hukuk Genel Kurulu', esas: '2022/11-402', karar: '2023/118', uyum: '%98 Argüman Uyumu', ozet: 'Ticari defterlerin ibraz edilmemesi halinde karşı tarafın defter kayıtlarının ve irsaliyeli faturaların kesin delil niteliği...' },
                          { daire: 'Yargıtay 11. Hukuk Dairesi', esas: '2023/1842', karar: '2024/290', uyum: '%94 Argüman Uyumu', ozet: 'Fatura tebliğinden itibaren 8 gün içinde itiraz edilmemesi ve içeriğinin kabul edilmiş sayılması durumunda ispat yükü...' },
                        ].map(k => (
                          <div key={k.esas} className="rounded-2xl border border-zinc-200/80 bg-white p-5 hover:border-zinc-300 transition-colors">
                            <div className="flex items-center justify-between">
                              <span className="font-mono text-xs font-bold text-zinc-800">{k.daire}</span>
                              <span className="font-mono text-xs font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-200/60">
                                {k.uyum}
                              </span>
                            </div>
                            <div className="font-mono text-xs font-bold text-zinc-950 mt-1">E. {k.esas} · K. {k.karar}</div>
                            <p className="mt-2 text-xs leading-relaxed text-zinc-600">{k.ozet}</p>
                          </div>
                        ))}
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </Reveal>
          </div>
        </section>

        {/* ══════════════════════════════ UYAP VE MASAÜSTÜ KÖPRÜSÜ ════════ */}
        <section id="uyap" className="mx-auto max-w-[1400px] px-5 py-20 md:px-16 md:py-28">
          <Reveal>
            <div className="mb-14 max-w-[54ch]">
              <h2 className="text-[clamp(1.75rem,3.2vw,2.5rem)] font-extrabold tracking-tight text-zinc-950">
                UYAP Avukat Portalı ile doğrudan masaüstü köprüsü
              </h2>
              <p className="mt-3 text-base text-zinc-600">
                Tarayıcı eklentisi ile portaldan tek tıkla dosya aktarımı, akıllı metin okuma ve güvenli yerel veritabanı.
              </p>
            </div>
          </Reveal>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-[1.4fr_1fr] md:grid-rows-2">
            {/* Büyük Kart — UYAP Eklentisi */}
            <Reveal className="md:row-span-2">
              <div
                className="flex h-full flex-col justify-between rounded-[1.75rem] p-8 sm:p-10 text-white shadow-sm"
                style={{ background: `linear-gradient(150deg, ${ACCENT}, ${ACCENT_DARK})` }}
              >
                <div>
                  <Zap size={28} strokeWidth={2} aria-hidden="true" />
                  <h3 className="mt-5 text-2xl font-extrabold tracking-tight">UYAP Tarayıcı Eklentisi Entegrasyonu</h3>
                  <p className="mt-3 max-w-[44ch] text-sm md:text-base leading-relaxed text-white/95">
                    UYAP Avukat Portalında açık olan dosyanın safahatını, tensip zabıtlarını, evrak listesini ve duruşma günlerini tek tıkla masaüstü uygulamanıza aktarın.
                  </p>
                </div>
                <div className="mt-8 flex flex-wrap items-center gap-3">
                  <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-xs font-bold">
                    <CheckCircle2 size={14} strokeWidth={2.5} aria-hidden="true" /> Şifre / E-İmza Paylaşımı Gerekmez
                  </span>
                  <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-xs font-bold">
                    <HardDrive size={14} strokeWidth={2.5} aria-hidden="true" /> Doğrudan Yerel Köprü
                  </span>
                </div>
              </div>
            </Reveal>

            <Reveal delay={0.06}>
              <div className="h-full rounded-[1.75rem] border border-zinc-200/80 bg-white p-7">
                <FileText size={22} strokeWidth={2} className="text-zinc-600" aria-hidden="true" />
                <h3 className="mt-4 text-lg font-bold text-zinc-950">Doğal .UDF Ayrıştırıcı ve Üretici</h3>
                <p className="mt-2 text-sm leading-relaxed text-zinc-600">
                  Adalet Bakanlığı UYAP Doküman Editörü formatını yerel olarak çözer ve metin katmanını çıkarır. Yazılan dilekçeleri doğrudan `.udf` olarak üretir.
                </p>
              </div>
            </Reveal>

            <Reveal delay={0.12}>
              <div className="h-full rounded-[1.75rem] border border-zinc-200/80 bg-white p-7">
                <Cpu size={22} strokeWidth={2} className="text-zinc-600" aria-hidden="true" />
                <h3 className="mt-4 text-lg font-bold text-zinc-950">Optik Karakter Tanıma (OCR)</h3>
                <p className="mt-2 text-sm leading-relaxed text-zinc-600">
                  Taranmış PDF tensip zabıtlarını, adli tıp ve bilirkişi raporlarını optik karakter tanıma motoruyla tam metin aranabilir hale getirir.
                </p>
              </div>
            </Reveal>
          </div>

          <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-[1.3fr_1fr_1fr]">
            <Reveal>
              <div className="h-full rounded-[1.75rem] border border-zinc-200/80 bg-white p-7">
                <div className="grid grid-cols-3 gap-2.5">
                  {[
                    { icon: HardDrive, label: 'Yerel Depo' },
                    { icon: Terminal, label: 'Hızlı Arama' },
                    { icon: Users2, label: 'Müvekkil CRM' },
                  ].map(c => (
                    <div key={c.label} className="rounded-xl bg-zinc-50 p-3 text-center border border-zinc-100">
                      <c.icon size={18} strokeWidth={2} className="mx-auto text-zinc-700" aria-hidden="true" />
                      <div className="mt-1.5 text-xs font-bold text-zinc-800">{c.label}</div>
                    </div>
                  ))}
                </div>
                <h3 className="mt-5 text-base font-bold text-zinc-950">Çevrimdışı Çalışma &amp; Cari Takip</h3>
                <p className="mt-1.5 text-sm leading-relaxed text-zinc-600">İnternet kesilse dahi dosyalara, kanun maddelerine ve müvekkil cari hesaplarına kesintisiz erişim.</p>
              </div>
            </Reveal>
            <Reveal delay={0.06}>
              <div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200/80 bg-white p-7">
                <Cloud size={22} strokeWidth={2} className="text-zinc-600" aria-hidden="true" />
                <h3 className="mt-4 text-base font-bold text-zinc-950">Google Drive Otomatik Yedekleme</h3>
                <p className="mt-2 text-sm leading-relaxed text-zinc-600">Dava dosyalarınız ve yerel verileriniz şifreli olarak büronuzun kendi Google Drive hesabına yedeklenir.</p>
              </div>
            </Reveal>
            <Reveal delay={0.12}>
              <div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200/80 bg-white p-7">
                <SlidersHorizontal size={22} strokeWidth={2} className="text-zinc-600" aria-hidden="true" />
                <h3 className="mt-4 text-base font-bold text-zinc-950">Belge &amp; Şablon Havuzu</h3>
                <p className="mt-2 text-sm leading-relaxed text-zinc-600">Büronuzun sık kullandığı sözleşmeler, ihtarnameler, protokoller ve vekaletnameler tek merkezde.</p>
              </div>
            </Reveal>
          </div>
        </section>

        {/* ══════════════════════════════ GÜVENLİK ════════════════════════ */}
        <section id="guvenlik" className="bg-zinc-950 py-20 text-white md:py-28">
          <div className="mx-auto max-w-[1200px] px-5 md:px-16">
            <Reveal>
              <div className="mb-14 max-w-[58ch]">
                <div className="inline-flex items-center gap-2 rounded-full bg-emerald-500/10 px-3.5 py-1 text-xs font-bold text-emerald-400 border border-emerald-500/20 mb-4">
                  <ShieldCheck size={14} /> Tam Veri İzolasyonu &amp; Sıfır Veri Tutma
                </div>
                <h2 className="text-[clamp(1.75rem,3.2vw,2.5rem)] font-extrabold tracking-tight">
                  Tüm verileriniz yalnızca kendi bilgisayarınızda. Yasal olarak hiçbir veriyi elimizde tutmuyoruz.
                </h2>
                <p className="mt-3 text-base text-zinc-400 leading-relaxed">
                  Hiçbir dava dosyası, müvekkil bilgisi veya arama geçmişi AyrisLegal sunucularına ulaşmaz. Tarafımıza hiçbir veri aktarılmaz; tüm analizler ve belgeler tamamen kendi bilgisayarınızın yerel şifreli alanında barınır.
                </p>
              </div>
            </Reveal>
            <div className="grid grid-cols-1 gap-px overflow-hidden rounded-3xl bg-zinc-800 sm:grid-cols-2 lg:grid-cols-4">
              {[
                { icon: Lock, title: 'Yasal Sıfır Veri Tutma', desc: 'Yasal ve teknik olarak müvekkil dosyalarınız sunucularımıza ulaşmaz; veritabanımızda hiçbir dosya veya arama geçmişi tutulmaz.' },
                { icon: HardDrive, title: 'Yalnızca Kendi PC’nizde Saklama', desc: 'Dava arşivi, tensip analizleri ve notlar tamamen kendi bilgisayarınızın yerel şifreli depolama katmanında kalır.' },
                { icon: ShieldCheck, title: 'Sıfır Model Eğitimi', desc: 'Müvekkil sırrı esastır. Dosyalarınız veya dilekçeleriniz yapay zekâ modellerini eğitmek amacıyla kesinlikle kullanılmaz.' },
                { icon: Cloud, title: 'Kendi Drive’ınıza Şifreli Yedekleme', desc: 'Yedeklemeler merkezi bir buluta değil, yalnızca büronuzun yetkilendirdiği kendi Google Drive hesabına şifreli aktarılır.' },
              ].map((item, i) => (
                <Reveal key={item.title} delay={i * 0.05}>
                  <div className="h-full bg-zinc-950 p-7">
                    <item.icon size={22} strokeWidth={2} style={{ color: ACCENT }} aria-hidden="true" />
                    <h3 className="mt-4 text-sm font-bold text-white">{item.title}</h3>
                    <p className="mt-2 text-xs leading-relaxed text-zinc-400">{item.desc}</p>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* ══════════════════════════════ FİYATLANDIRMA ═══════════════════ */}
        <section id="fiyatlandirma" className="mx-auto max-w-[1100px] px-5 py-20 md:px-16 md:py-28">
          <Reveal>
            <div className="mb-3 text-center">
              <h2 className="text-[clamp(1.75rem,3.2vw,2.5rem)] font-extrabold tracking-tight text-zinc-950">
                Şeffaf ve öngörülebilir fiyatlandırma
              </h2>
              <p className="mt-3 text-base text-zinc-600">
                Tüm 12 analiz modülü, 18M içtihat ve UDF motoru fiyata dahildir.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.05}>
            <div className="mb-10 flex justify-center">
              <div role="tablist" aria-label="Fiyatlandırma Periyodu" className="inline-flex gap-1 rounded-full bg-zinc-100 p-1.5 border border-zinc-200/80">
                <button
                  role="tab"
                  aria-selected={pricingDuration === '12m'}
                  onClick={() => setPricingDuration('12m')}
                  className={`rounded-full px-5 py-2 text-xs font-bold transition-all ${
                    pricingDuration === '12m' ? 'bg-white text-zinc-950 shadow-sm' : 'text-zinc-600 hover:text-zinc-900'
                  }`}
                >
                  12 Aylık Plan (Avantajlı)
                </button>
                <button
                  role="tab"
                  aria-selected={pricingDuration === '6m'}
                  onClick={() => setPricingDuration('6m')}
                  className={`rounded-full px-5 py-2 text-xs font-bold transition-all ${
                    pricingDuration === '6m' ? 'bg-white text-zinc-950 shadow-sm' : 'text-zinc-600 hover:text-zinc-900'
                  }`}
                >
                  6 Aylık Plan
                </button>
              </div>
            </div>
          </Reveal>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            <Reveal delay={0.08}>
              <div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200/80 bg-white p-8 sm:p-10 shadow-sm">
                <div className="flex items-center justify-between">
                  <p className="font-mono text-xs font-bold uppercase tracking-wide" style={{ color: ACCENT }}>Bireysel Avukat</p>
                  <span className="rounded-full bg-zinc-100 px-3 py-1 font-mono text-xs font-bold text-zinc-700">
                    {pricingDuration === '12m' ? '12 Ay Erişim' : '6 Ay Erişim'}
                  </span>
                </div>
                <p className="mt-2.5 text-4xl font-extrabold tracking-tighter text-zinc-950 font-mono">
                  {pricingDuration === '12m' ? '30.000 ₺' : '18.000 ₺'}
                  <span className="text-sm font-sans font-medium text-zinc-500">
                    {pricingDuration === '12m' ? ' / 12 ay' : ' / 6 ay'}
                  </span>
                </p>
                <p className="mt-4 text-sm text-zinc-600">Solo ve butik çalışan avukatlar için eksiksiz hukuki yapay zekâ asistanı ve çalışma alanı.</p>
                <div className="my-6 border-t border-zinc-100" />
                <ul className="mb-8 flex flex-col gap-3.5">
                  {[
                    '12 Dava Analiz Modülü (Çelişki Avcısı, Röntgen, Simülatör)',
                    '18M+ Emsal İçtihat ve 26.900+ Kanun Maddesi',
                    'Doğal .UDF, Word ve PDF Dilekçe Üretimi',
                    'Dijital Stajyer (Canlı Duruşma Nokta Atışı)',
                    'Masaüstü ve Mobil Uygulama + UYAP Eklentisi',
                    'Yerel Çevrimdışı Depolama & Sıfır Model Eğitimi'
                  ].map(item => (
                    <li key={item} className="flex items-center gap-2.5 text-sm font-medium text-zinc-800">
                      <CheckCircle2 size={16} strokeWidth={2.5} className="text-emerald-600 shrink-0" aria-hidden="true" />{item}
                    </li>
                  ))}
                </ul>
                <Link
                  href={`/${locale}/iletisim`}
                  className="mt-auto rounded-full border border-zinc-200/80 py-3.5 text-center text-sm font-bold text-zinc-900 transition-colors hover:bg-zinc-50"
                >
                  15 Dk Canlı Demo Alın
                </Link>
              </div>
            </Reveal>

            <Reveal delay={0.14}>
              <div className="relative flex h-full flex-col rounded-[1.75rem] border p-8 sm:p-10 shadow-sm" style={{ borderColor: ACCENT, background: ACCENT_SOFT }}>
                <span className="absolute -top-3 left-9 rounded-full px-3.5 py-1 text-xs font-bold text-white shadow-sm" style={{ background: ACCENT }}>
                  Ekip Çalışması
                </span>
                <p className="font-mono text-xs font-bold uppercase tracking-wide" style={{ color: ACCENT_DARK }}>Hukuk Bürosu</p>
                <p className="mt-2.5 text-3xl font-extrabold tracking-tight text-zinc-950 font-mono">Özel Teklif</p>
                <p className="mt-4 text-sm text-zinc-800">Tüm ekibiniz için paylaşımlı dava çalışma alanı, ortak emsal/şablon havuzu ve çoklu lisans.</p>
                <div className="my-6 border-t border-red-200/60" />
                <ul className="mb-8 flex flex-col gap-3.5">
                  {[
                    'Tüm bireysel AyrisLegal özellikleri',
                    'Büro içi çoklu avukat & stajyer lisansı',
                    'Ekip içi dosya, emsal ve şablon paylaşımı',
                    'Özel UYAP & Doküman sunucusu entegrasyonu',
                    'Kurucu ekiple öncelikli 7/24 teknik destek'
                  ].map(item => (
                    <li key={item} className="flex items-center gap-2.5 text-sm font-medium text-zinc-900">
                      <CheckCircle2 size={16} strokeWidth={2.5} style={{ color: ACCENT_DARK }} className="shrink-0" aria-hidden="true" />{item}
                    </li>
                  ))}
                </ul>
                <Link
                  href={`/${locale}/iletisim`}
                  className="mt-auto rounded-full py-3.5 text-center text-sm font-bold text-white transition-all hover:bg-[#B8140F] shadow-sm"
                  style={{ background: ACCENT }}
                >
                  Büronuz İçin İletişime Geçin
                </Link>
              </div>
            </Reveal>
          </div>
        </section>

        {/* ══════════════════════════════ SSS ══════════════════════════════ */}
        <section id="sss" className="mx-auto max-w-[900px] px-5 py-20 md:px-16 md:py-28">
          <Reveal>
            <div className="text-center mb-12">
              <h2 className="text-[clamp(1.75rem,3.2vw,2.5rem)] font-extrabold tracking-tight text-zinc-950">
                Sıkça Sorulan Sorular
              </h2>
              <p className="mt-3 text-base text-zinc-600">
                AyrisLegal, UYAP entegrasyonu, veri güvenliği ve yapay zekâ kullanımı hakkında merak edilenler.
              </p>
            </div>
          </Reveal>

          <div className="divide-y divide-zinc-100 border-y border-zinc-100">
            {[
              {
                q: 'Müvekkil dosyalarım nerede saklanıyor, tarafınıza veri ulaşıyor mu?',
                a: 'Hayır, tarafımıza hiçbir veri ulaşmaz. Tüm verileriniz yalnızca kendi bilgisayarınızda yerel şifreli depolamada tutulur. Yasal ve teknik olarak hiçbir dava dosyanız, arama geçmişiniz veya müvekkil bilginiz AyrisLegal sunucularına iletilmez ve elimizde tutulmaz. Yedeklemeler merkezi bir sunucuya değil, yalnızca büronuzun yetkilendirdiği kendi Google Drive hesabına şifreli aktarılır.'
              },
              {
                q: 'UYAP şifremi veya e-imzamı AyrisLegal ile paylaşmam gerekiyor mu?',
                a: 'Hayır. UYAP Tarayıcı Eklentisi sisteminizde zaten açık olan güvenli oturumunuzu kullanır; kimlik, e-imza veya şifre bilgileriniz hiçbir zaman AyrisLegal sunucularına iletilmez.'
              },
              {
                q: 'Yapay zekâ yanlış bir çıkarım yaparsa sorumluluk kimde?',
                a: 'AyrisLegal bir karar organı değildir; analitik bir düşünce ortağıdır. Ürettiği tüm emsal kararlar gerçek mahkeme esas ve karar numaralarıyla sunulur ve doğrulanabilir bağlantılar içerir. Nihai hukuki değerlendirme ve imza sorumluluğu daima avukata aittir.'
              },
              {
                q: 'Dilekçeleri doğrudan UYAP Doküman Editörü (.udf) formatında indirebilir miyim?',
                a: 'Evet. AyrisLegal bünyesindeki yerel UDF motoru, editörde yazılan dilekçeleri tek tıkla resmi Adalet Bakanlığı UYAP formatına (.udf), Word (.docx) veya PDF formatına dönüştürür.'
              },
              {
                q: 'İnternet bağlantısı olmadığında çevrimdışı çalışabilir miyim?',
                a: 'Evet. Önceden taranmış dava dosyaları, yerel arşivi ve 26.900+ kanun maddesi internetsiz ortamda bile anında görüntülenebilir ve aranabilir.'
              },
              {
                q: 'Büromdaki diğer avukatlarla aynı anda ortak dava havuzunu kullanabilir miyim?',
                a: 'Evet. Hukuk Bürosu planı kapsamında büro içi çoklu avukat ve stajyer lisansı, ortak emsal havuzu ve paylaşımlı dava çalışma alanı sunulmaktadır.'
              }
            ].map((item, idx) => {
              const isOpen = openFaqIndex === idx
              return (
                <div key={item.q} className="py-5">
                  <button
                    onClick={() => setOpenFaqIndex(isOpen ? null : idx)}
                    className="flex w-full items-start justify-between gap-4 text-left font-bold text-zinc-900 transition-colors hover:text-zinc-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#E61919] rounded-lg"
                    aria-expanded={isOpen}
                  >
                    <span className="text-base md:text-lg">{item.q}</span>
                    <ChevronDown
                      size={20}
                      strokeWidth={2.2}
                      className={`mt-0.5 shrink-0 transition-transform duration-200 ${isOpen ? 'rotate-180 text-[#E61919]' : 'text-zinc-500'}`}
                      aria-hidden="true"
                    />
                  </button>
                  {isOpen && (
                    <div className="mt-3 text-sm md:text-base leading-relaxed text-zinc-600 pl-0">
                      {item.a}
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        </section>

        {/* ══════════════════════════════ 7 GÜN ÜCRETSİZ TEST & GERİ BİLDİRİM ═════ */}
        <section className="border-t border-zinc-100 bg-white py-20 md:py-28">
          <div className="mx-auto max-w-[1200px] px-5 md:px-16">
            <Reveal>
              <div className="text-center max-w-[68ch] mx-auto mb-14">
                <span className="inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                  <Sparkles size={14} /> 7 Gün Ücretsiz Deneme &amp; Birlikte Geliştirme
                </span>
                <h2 className="mt-4 text-[clamp(1.75rem,3.2vw,2.5rem)] font-extrabold tracking-tight text-zinc-950">
                  Ürünü indirin, 7 gün boyunca ücretsiz test edin.
                </h2>
                <p className="mt-4 text-base leading-relaxed text-zinc-600">
                  Geri bildirimlerde bulunun, AyrisLegal&apos;i doğrudan büronuzun dava türlerine ve çalışma pratiğine odaklayalım. Kredi kartı veya taahhüt gerekmez.
                </p>
              </div>
            </Reveal>

            {/* 3 Adım Kartları */}
            <div className="grid grid-cols-1 gap-6 md:grid-cols-3 mb-16">
              {[
                {
                  step: '1',
                  title: 'Mac App Store’dan İndirin',
                  desc: 'Tek tıkla Mac’inize yükleyin, kurulum veya kredi kartı gerektirmeden anında büronuzda çalıştırın.',
                },
                {
                  step: '2',
                  title: '7 Gün Dosyalarınızla Test Edin',
                  desc: 'Kendi tensip zabıtlarınız, bilirkişi raporlarınız ve tanık beyanlarınız üzerinde tüm 12 analiz modülünü sınırsız deneyin.',
                },
                {
                  step: '3',
                  title: 'Geri Bildirim Verin, Size Odaklayalım',
                  desc: 'Büronuza özel ihtiyaçları ve önerilerinizi iletin; mühendislik ekibimizle platformu sizin pratiğinize göre geliştirelim.',
                },
              ].map((item, idx) => (
                <Reveal key={item.step} delay={idx * 0.08}>
                  <div className="relative flex h-full flex-col rounded-3xl border border-zinc-200/80 bg-zinc-50/60 p-8 transition-all hover:bg-white hover:shadow-lg hover:border-zinc-300">
                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-900 text-white font-mono text-base font-bold shadow-sm">
                      {item.step}
                    </div>
                    <h3 className="mt-5 text-lg font-bold text-zinc-950">
                      {item.title}
                    </h3>
                    <p className="mt-2 text-sm leading-relaxed text-zinc-600">
                      {item.desc}
                    </p>
                  </div>
                </Reveal>
              ))}
            </div>

            {/* ══════════ PLATFORM & MAĞAZA ROZETLERİ ══════════ */}
            <Reveal delay={0.2}>
              <div className="rounded-3xl border border-zinc-200/80 bg-zinc-950 p-8 md:p-12 text-white shadow-xl">
                <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-8">
                  <div className="max-w-[48ch]">
                    <div className="inline-flex items-center gap-2 rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-bold text-emerald-400 border border-emerald-500/20">
                      <span className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse" /> macOS&apos;ta Yayındayız
                    </div>
                    <h3 className="mt-3 text-2xl font-extrabold tracking-tight text-white">
                      Masaüstü ve Mobil Ekosistemi
                    </h3>
                    <p className="mt-2 text-sm text-zinc-400 leading-relaxed">
                      Ofisinizde derin dosya analizi için macOS masaüstünde yayındayız; Windows ve mobil uygulamalarımız çok yakında.
                    </p>
                  </div>

                  {/* Mağaza Butonları */}
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 w-full lg:w-auto">
                    {/* Apple macOS */}
                    <a
                      href="https://apps.apple.com/tr/app/ayris-legal/id6802116702?mt=12"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="group flex items-center gap-3.5 rounded-2xl border border-zinc-700/80 bg-zinc-900 px-4 py-3 text-left transition-all hover:border-zinc-500 hover:bg-zinc-800/90 active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400"
                    >
                      <svg className="h-7 w-7 text-white shrink-0 fill-current group-hover:scale-105 transition-transform" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.37c.62-.75 1.04-1.8 0.92-2.85-.9.04-1.99.6-2.64 1.36-.58.67-1.09 1.74-.96 2.76 1 .08 2.06-.52 2.68-1.27z" />
                      </svg>
                      <div>
                        <div className="flex items-center gap-2">
                          <span className="text-xs font-semibold text-zinc-400">macOS / Apple Store</span>
                          <span className="rounded bg-emerald-500/20 px-1.5 py-0.5 text-xs font-bold text-emerald-400 whitespace-nowrap">Yayında</span>
                        </div>
                        <p className="text-sm font-bold text-white group-hover:text-emerald-300 transition-colors">Apple Mac Uygulaması</p>
                      </div>
                    </a>

                    {/* Windows */}
                    <div className="flex items-center gap-3.5 rounded-2xl border border-zinc-800/60 bg-zinc-900/40 px-4 py-3 text-left opacity-80">
                      <svg className="h-6 w-6 text-zinc-400 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.901-1.802" />
                      </svg>
                      <div>
                        <div className="flex items-center gap-2">
                          <span className="text-xs font-semibold text-zinc-400">Windows Store</span>
                          <span className="rounded bg-amber-500/20 px-1.5 py-0.5 text-xs font-bold text-amber-300 whitespace-nowrap">Çok Yakında</span>
                        </div>
                        <p className="text-sm font-bold text-zinc-300">Windows Uygulaması</p>
                      </div>
                    </div>

                    {/* iPhone / iPad App Store */}
                    <div className="flex items-center gap-3.5 rounded-2xl border border-zinc-800/60 bg-zinc-900/40 px-4 py-3 text-left opacity-80">
                      <svg className="h-7 w-7 text-zinc-400 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.37c.62-.75 1.04-1.8 0.92-2.85-.9.04-1.99.6-2.64 1.36-.58.67-1.09 1.74-.96 2.76 1 .08 2.06-.52 2.68-1.27z" />
                      </svg>
                      <div>
                        <div className="flex items-center gap-2">
                          <span className="text-xs font-semibold text-zinc-400">iOS / iPhone</span>
                          <span className="rounded bg-amber-500/20 px-1.5 py-0.5 text-xs font-bold text-amber-300 whitespace-nowrap">Çok Yakında</span>
                        </div>
                        <p className="text-sm font-bold text-zinc-300">App Store Mobil</p>
                      </div>
                    </div>

                    {/* Google Play */}
                    <div className="flex items-center gap-3.5 rounded-2xl border border-zinc-800/60 bg-zinc-900/40 px-4 py-3 text-left opacity-80">
                      <svg className="h-6 w-6 text-zinc-400 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M3.609 1.814L13.792 12 3.61 22.186c-.365-.333-.61-.83-.61-1.406V3.22c0-.576.245-1.073.61-1.406zM15.207 13.414l2.586 2.586-11.534 6.55 8.948-9.136zm2.586-5.414l-2.586 2.586-8.948-9.136 11.534 6.55zm1.414 1.414l3.197 1.815c.928.528.928 1.386 0 1.914l-3.197 1.815-2.121-2.121 2.121-2.121z" />
                      </svg>
                      <div>
                        <div className="flex items-center gap-2">
                          <span className="text-xs font-semibold text-zinc-400">Android</span>
                          <span className="rounded bg-amber-500/20 px-1.5 py-0.5 text-xs font-bold text-amber-300 whitespace-nowrap">Çok Yakında</span>
                        </div>
                        <p className="text-sm font-bold text-zinc-300">Google Play Store</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </section>

        {/* ══════════════════════════════ DÖNÜŞÜM / CTA BLOĞU ══════════════ */}
        <section className="bg-zinc-50/70 py-20 md:py-28">
          <div className="mx-auto max-w-[1100px] px-5 md:px-16">
            <Reveal>
              <div className="rounded-3xl border border-zinc-200/80 bg-white p-8 md:p-14 shadow-[0_20px_60px_-30px_rgba(24,24,27,0.15)] flex flex-col md:flex-row items-start md:items-center justify-between gap-8">
                <div className="max-w-[56ch]">
                  <h2 className="text-[clamp(1.5rem,3vw,2.125rem)] font-extrabold tracking-tight text-zinc-950">
                    Kendi dava dosyalarınızla 15 dakikada test edin.
                  </h2>
                  <p className="mt-3 text-sm md:text-base leading-relaxed text-zinc-600">
                    Pazarlama vaatleri yerine gerçek dosya çalışması: platformu kurucu ekiple birlikte, doğrudan büronuzun dava türlerine ve UYAP evraklarına göre canlı oturumda deneyimleyin.
                  </p>
                  <ul className="mt-5 flex flex-wrap gap-4 text-xs font-bold text-zinc-700">
                    <li className="flex items-center gap-1.5"><CheckCircle2 size={15} className="text-emerald-600" aria-hidden="true" /> 15 Dk birebir canlı demo</li>
                    <li className="flex items-center gap-1.5"><CheckCircle2 size={15} className="text-emerald-600" aria-hidden="true" /> Pilot erişim imkânı</li>
                    <li className="flex items-center gap-1.5"><CheckCircle2 size={15} className="text-emerald-600" aria-hidden="true" /> Kredi kartı gerekmez</li>
                  </ul>
                </div>
                <div className="shrink-0 w-full md:w-auto">
                  <Link
                    href={`/${locale}/iletisim`}
                    className="inline-flex w-full md:w-auto items-center justify-center gap-2 rounded-full px-8 py-4 text-sm font-bold text-white transition-all hover:bg-[#B8140F] active:scale-[0.98] shadow-sm"
                    style={{ background: ACCENT }}
                  >
                    Canlı Demo Talep Edin <ArrowRight size={16} strokeWidth={2.5} aria-hidden="true" />
                  </Link>
                </div>
              </div>
            </Reveal>
          </div>
        </section>
      </main>

      {/* ══════════════════════════════ FOOTER ═══════════════════════════ */}
      <footer className="mx-auto flex max-w-[1400px] flex-wrap items-center justify-between gap-3 border-t border-zinc-100 px-5 py-8 text-xs text-zinc-500 md:px-16">
        <span>© {new Date().getFullYear()} AyrisLegal — Ayris Tech&apos;in bir ürünüdür.</span>
        <a
          href="https://ayris.tech"
          target="_blank"
          rel="noopener noreferrer"
          className="text-zinc-600 font-medium hover:text-zinc-900 underline-offset-4 hover:underline"
        >
          Created by ayris.tech
        </a>
      </footer>
    </div>
  )
}