'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
} 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' | 'ictihat' | 'dilekce' | 'stajyer' | 'simulator'>('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" />
                  Masaüstü ve Mobil Uygulama · UYAP Tarayıcı Eklentisi Entegre
                </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="Analiz Modülleri" className="flex flex-wrap gap-2 mb-8">
                {[
                  { id: 'celiski', label: '01. İfade & Çelişki Avcısı', icon: AlertTriangle },
                  { id: 'ictihat', label: '02. 18M+ İçtihat & Mevzuat', icon: Search },
                  { id: 'dilekce', label: '03. Dilekçe Stüdyosu (.UDF)', icon: FileText },
                  { id: 'stajyer', label: '04. Dijital Stajyer (Canlı Duruşma)', icon: GraduationCap },
                  { id: 'simulator', label: '05. Duruşma Simülatörü & Müzakere', icon: Scale },
                ].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-5 py-2.5 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={15} 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 (kolluk tutanağı, savcılık sorgusu, duruşma tutanağı) 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: 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>
                  )}

                  {/* TAB 3: DİLEKÇE STÜDYOSU VE UDF */}
                  {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; Gelişmiş Editör
                        </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>
                          <span className="rounded-full bg-zinc-100 px-3 py-1 text-xs font-bold text-zinc-700">Zengin Hukuki Editör</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 4: 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 5: DURUŞMA SİMÜLATÖRÜ & MÜZAKERE */}
                  {activeTab === 'simulator' && (
                    <motion.div
                      key="simulator"
                      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} /> HAKİM &amp; KARŞI TARAF SİMÜLASYONU
                        </div>
                        <h3 className="mt-4 text-2xl font-extrabold tracking-tight text-zinc-950">
                          Duruşmaya Girmeden Önce Savunmanızın Açıklarını Test Edin
                        </h3>
                        <p className="mt-3 text-sm leading-relaxed text-zinc-600">
                          Hakim rolüne bürünen yapay zekâ usul ve ispat açıklarınızı sorgular; Karşı Taraf Avukatı modu ise zamanaşımı ve delil zayıflıklarınızı yüzünüze vurur. Arabuluculuk simülatörü ise kazanma olasılığı ve tazminat aralığını hesaplar.
                        </p>
                        <div className="mt-6 grid grid-cols-2 gap-3">
                          <div className="rounded-2xl border border-zinc-200/80 bg-zinc-50 p-4">
                            <div className="font-bold text-xs text-zinc-900 mb-1">⚖️ Hakim Modu</div>
                            <p className="text-xs text-zinc-600">HMK/CMK usul ve kesin süre baskısı</p>
                          </div>
                          <div className="rounded-2xl border border-zinc-200/80 bg-zinc-50 p-4">
                            <div className="font-bold text-xs text-zinc-900 mb-1">💼 Karşı Taraf Modu</div>
                            <p className="text-xs text-zinc-600">Savunma açıklarını yüzünüze vurma</p>
                          </div>
                        </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-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">
                            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">
                            <strong>Önerilen İlk Teklif Stratejisi:</strong> Masada 650.000 ₺ ile açılış yapılması ve karşı tarafın ticari faiz indirim talebine karşılık asıl alacağın peşin tahsiline odaklanılması tavsiye edilir.
                          </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-[56ch]">
                <h2 className="text-[clamp(1.75rem,3.2vw,2.5rem)] font-extrabold tracking-tight">
                  Müvekkil sırrı ve veri egemenliği en yüksek önceliğimizdir
                </h2>
                <p className="mt-3 text-base text-zinc-400">
                  Bir dava dosyası bir avukatın elindeki en hassas emanettir. AyrisLegal bu mesleki sorumluluk ve sır saklama yükümlülüğü bilinciyle inşa edilmiştir.
                </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: 'Yerel şifreli saklama', desc: 'Hassas veriler ve dosya arşivi cihazınızın yerel işletim sistemi şifreleme katmanıyla korunur.' },
                { icon: Cloud, title: 'Kendi Drive’ınıza yedekleme', desc: 'Yedeklemeler merkezi sunuculara değil, büronuzun kendi yetkilendirdiği Google Drive hesabına şifreli aktarılır.' },
                { icon: ShieldCheck, title: 'Sıfır Model Eğitimi', desc: 'Müvekkil dosyalarınız veya dilekçeleriniz kamuya açık yapay zekâ modellerini eğitmek için asla kullanılmaz.' },
                { icon: CheckCircle2, title: 'Nihai karar daima sizde', desc: 'AyrisLegal analitik taslak üretir; hukuki değerlendirme, strateji ve imza yetkisi her zaman sizdedir.' },
              ].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, kim görebilir?',
                a: 'Belgeleriniz cihazınızda yerel şifreli depolamada tutulur. Yedeklemeler merkezi sunucularımıza değil, büronuzun kendi Google Drive hesabına şifreli olarak aktarılır. Başka bir avukat veya üçüncü tarafla kesinlikle paylaşılmaz ve kamuya açık modellerin eğitiminde kullanılmaz.'
              },
              {
                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>

        {/* ══════════════════════════════ KURUCU PİLOTU & ŞEFFAF SÜREÇ ═════ */}
        <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} /> Şeffaf ve Dürüst Yaklaşım
                </span>
                <h2 className="mt-4 text-[clamp(1.75rem,3.2vw,2.5rem)] font-extrabold tracking-tight text-zinc-950">
                  Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
                </h2>
                <p className="mt-4 text-base leading-relaxed text-zinc-600">
                  AyrisLegal yeni. Sahte ya da ödünç yorumlar yerine dürüst olmayı seçtik: platformu kurucu ekiple birlikte, doğrudan geri bildiriminizle ve kendi dava dosyalarınızla test edin.
                </p>
              </div>
            </Reveal>

            {/* 3 Adım Kartları */}
            <div className="grid grid-cols-1 gap-6 md:grid-cols-3 mb-16">
              {[
                {
                  step: '1',
                  title: 'Formu Doldurun',
                  desc: '30 saniyede temel büro bilgilerinizi ve ilgilendiğiniz dava alanlarını iletin. Kredi kartı veya taahhüt gerekmez.',
                },
                {
                  step: '2',
                  title: 'Kurucu Ekipten Biri Sizi Arar',
                  desc: 'Mühendislik ve hukuk ekibimiz aynı gün sizinle iletişime geçerek birebir demo için ortak uygun saati netleştirir.',
                },
                {
                  step: '3',
                  title: '15 Dk Dosyanızla Canlı Test',
                  desc: 'Kendi tensip zabıtlarınız, bilirkişi raporlarınız ve tanık beyanlarınız üzerinde çelişki analizini canlı görün.',
                },
              ].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>
  )
}
