'use client'

import React, { useRef, useState } from 'react'
import { motion, useInView, useMotionValue, useTransform, useSpring } from 'framer-motion'
import {
  ArrowRight, FileText, Search, MessageSquare, ShieldCheck, Cloud, Lock,
  CheckCircle2, Sparkles, Scale, GraduationCap, AlertTriangle,
  FolderOpen, Landmark, Users2, ChevronRight,
} from 'lucide-react'
import ContactFormV2 from '@/components/contact-form-v2'

/* ─────────────────────────────────────────────────────────────────────────
   Brand tokens — AyrisLegal kırmızısı (#E61919) tek aksan renk, nötr taban
   zinc skalası. Referans görsellerdeki turuncu/lacivert paletle kasıtlı
   olarak hiçbir ortak nokta yok (başka bir şirketin kimliği).
   ───────────────────────────────────────────────────────────────────────── */
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' })
  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 20 }}
      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
      transition={{ type: 'spring', stiffness: 100, damping: 20, delay }}
      className={className}
    >
      {children}
    </motion.div>
  )
}

/* Magnetic CTA — useMotionValue/useTransform dışında hiçbir React state
   kullanmıyor (skill kuralı: sürekli hover animasyonu için useState yasak). */
function MagneticButton({ href, children, variant = 'solid' }: {
  href: string; children: React.ReactNode; variant?: 'solid' | 'outline'
}) {
  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<HTMLAnchorElement>) => {
    const rect = e.currentTarget.getBoundingClientRect()
    x.set((e.clientX - rect.left - rect.width / 2) * 0.25)
    y.set((e.clientY - rect.top - rect.height / 2) * 0.25)
  }
  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-[15px] font-semibold transition-colors active:scale-[0.98]'
  const style = variant === 'solid'
    ? { background: ACCENT, color: '#fff' }
    : { background: '#fff', color: '#18181B', border: '1.5px solid rgb(228 228 231)' }

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

/* Sürekli nabız atan "canlı" gösterge — izole, memoized, parent'ı
   yeniden render etmez (performance guardrail). */
const LivePulse = React.memo(function LivePulse() {
  return (
    <span className="relative flex h-2 w-2">
      <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 }: { children: React.ReactNode }) {
  return (
    <div className="w-full overflow-hidden rounded-[1.75rem] border border-zinc-200/70 bg-white shadow-[0_30px_70px_-25px_rgba(24,24,27,0.25)]">
      <div className="flex items-center gap-2 border-b border-zinc-200/70 bg-zinc-50 px-4 py-3">
        <span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
        <span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
        <span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
        <span className="flex-1 text-center text-xs font-medium text-zinc-400">ayrislegal.com</span>
      </div>
      <div className="bg-white">{children}</div>
    </div>
  )
}

const NAV_LINKS = [
  { label: 'Özellikler', href: '#tanisin' },
  { label: 'Fiyatlar', href: '#fiyatlandirma' },
  { label: 'SSS', href: '#sss' },
  { label: 'İletişim', href: '#iletisim' },
]

export default function HomePageV2() {
  const [pricingYearly, setPricingYearly] = useState(true)

  return (
    <div className="min-h-[100dvh] bg-white text-zinc-900" style={{ fontFamily: '"Archivo", ui-sans-serif, system-ui, sans-serif' }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap');
        ::selection { background: ${ACCENT_SOFT}; color: ${ACCENT_DARK}; }
      `}</style>

      {/* ══════════════════════════════ NAV ═════════════════════════════ */}
      <nav className="sticky top-0 z-30 flex items-center justify-between gap-4 border-b border-zinc-100 bg-white/85 px-5 py-4 backdrop-blur-md md:px-16">
        <img src="/logo.png" alt="AyrisLegal" className="h-6 w-auto object-contain" />
        <div className="hidden items-center gap-8 md:flex">
          {NAV_LINKS.map(l => (
            <a key={l.href} href={l.href} className="text-[14.5px] font-semibold text-zinc-500 transition-colors hover:text-zinc-900">
              {l.label}
            </a>
          ))}
        </div>
        <div className="flex items-center gap-3">
          <a href="#iletisim" className="hidden rounded-full border border-zinc-200 px-5 py-2.5 text-sm font-semibold text-zinc-900 transition-colors hover:bg-zinc-50 sm:inline-block">
            Giriş Yap
          </a>
          <a href="#iletisim" className="inline-flex items-center gap-1.5 rounded-full px-5 py-2.5 text-sm font-semibold text-white transition-colors" style={{ background: ACCENT }}>
            Ücretsiz Deneyin <ArrowRight size={15} strokeWidth={2} />
          </a>
        </div>
      </nav>

      {/* ══════════════════════════════ HERO — asimetrik, sola hizalı ═══ */}
      <section className="relative overflow-hidden">
        <div className="pointer-events-none absolute -right-40 -top-40 h-[520px] w-[520px] rounded-full opacity-[0.07] blur-3xl" style={{ background: ACCENT }} />
        <div className="mx-auto grid max-w-[1400px] grid-cols-1 gap-14 px-5 pb-16 pt-16 md:grid-cols-[1fr_0.9fr] md:gap-10 md:px-16 md:pb-24 md:pt-24">
          <div>
            <Reveal>
              <span className="inline-flex items-center gap-2 rounded-full px-4 py-2 text-[13px] font-semibold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
                <Sparkles size={14} strokeWidth={2.5} /> Avukatlar için yapay zeka destekli hukuki asistan
              </span>
            </Reveal>
            <Reveal delay={0.06}>
              <h1 className="mt-6 text-[clamp(38px,5.5vw,60px)] font-extrabold leading-[1.03] tracking-tighter 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-[52ch] text-[17px] leading-relaxed text-zinc-500">
                AyrisLegal, dava dosyalarınızı analiz eder, hukuki sorularınızı yanıtlar, içtihat taraması yapar ve saniyeler içinde dilekçe taslağı oluşturur.
              </p>
            </Reveal>
            <Reveal delay={0.18}>
              <div className="mt-9 flex flex-wrap items-center gap-4">
                <MagneticButton href="#iletisim">Ücretsiz Deneyin <ArrowRight size={16} strokeWidth={2.5} /></MagneticButton>
                <MagneticButton href="#tanisin" variant="outline">Nasıl Çalışır?</MagneticButton>
              </div>
            </Reveal>
            <Reveal delay={0.24}>
              <p className="mt-5 text-[13px] text-zinc-400">Kredi kartı gerekmez · Kurucu ekiple birebir demo</p>
            </Reveal>
          </div>

          {/* Asimetrik görsel kompozisyon: ana panel + üstüne binen yüzen kart */}
          <Reveal delay={0.15} className="relative">
            <div className="relative mt-6 md:mt-14">
              <BrowserFrame>
                <div className="p-5">
                  <div className="mb-4 flex items-center justify-between">
                    <span className="text-[11px] font-bold uppercase tracking-wide text-zinc-400">Kira Tespit Davası · Dosya Detayı</span>
                    <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-zinc-400">
                      <LivePulse /> Canlı
                    </span>
                  </div>
                  {[
                    { name: 'Bilirkişi Raporu - Kira Tespiti', date: '15.01.2026' },
                    { name: '2024/100 Esas Tensip Tutanağı', date: '10.01.2026' },
                    { name: 'Kira Sözleşmesi', date: '10.01.2026' },
                  ].map(row => (
                    <div key={row.name} className="mb-2 flex items-center justify-between rounded-2xl border border-zinc-100 px-4 py-3">
                      <div className="flex items-center gap-2.5">
                        <CheckCircle2 size={15} strokeWidth={2} className="text-zinc-300" />
                        <span className="text-[13.5px] font-semibold text-zinc-700">{row.name}</span>
                      </div>
                      <span className="text-[11.5px] text-zinc-400">{row.date}</span>
                    </div>
                  ))}
                </div>
              </BrowserFrame>

              {/* Yüzen, üste binen ikinci panel — variance 8 asimetrisi */}
              <div className="absolute -bottom-8 -left-8 hidden w-[220px] rounded-2xl border border-zinc-200/70 bg-white p-4 shadow-[0_20px_45px_-15px_rgba(24,24,27,0.2)] sm:block">
                <div className="mb-2 flex items-center gap-2" style={{ color: ACCENT }}>
                  <AlertTriangle size={15} strokeWidth={2.5} />
                  <span className="text-[11px] font-bold uppercase tracking-wide">Çelişki Avcısı</span>
                </div>
                <p className="text-[12px] leading-snug text-zinc-500">2 ifade arasında çelişki tespit edildi.</p>
              </div>
            </div>
          </Reveal>
        </div>

        {/* İstatistik şeridi — asimetrik genişlikler */}
        <div className="mx-auto max-w-[1400px] px-5 pb-16 md:px-16">
          <Reveal>
            <div className="grid grid-cols-2 gap-3 border-t border-zinc-100 pt-10 md:grid-cols-[1fr_1.3fr_1fr_1fr] md:gap-4">
              {[
                { value: '1', label: 'Sabit fiyat, tüm avukatlara' },
                { value: '40.000 ₺', label: 'Yıllık, gizli ücret yok' },
                { value: '5', label: 'Mahkeme kaynağı tek ekranda' },
                { value: '7/24', label: 'Dosyanızla çalışan ortak' },
              ].map(s => (
                <div key={s.label}>
                  <div className="font-mono text-2xl font-bold text-zinc-950">{s.value}</div>
                  <div className="mt-1 text-[12.5px] leading-snug text-zinc-500">{s.label}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* ══════════════════════════════ TANIŞIN — zig-zag showcase ══════════════ */}
      <section id="tanisin" className="mx-auto max-w-[1400px] px-5 py-20 md:px-16 md:py-28">
        <Reveal>
          <div className="mb-16 max-w-[46ch] md:mb-24">
            <span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-400">Platform</span>
            <h2 className="mt-3 text-[clamp(28px,3.6vw,42px)] font-extrabold tracking-tighter text-zinc-950">AyrisLegal ile tanışın</h2>
            <p className="mt-3 text-[16px] text-zinc-500">Modern hukukçunun ihtiyaç duyduğu tüm araçlar, tek bir platformda.</p>
          </div>
        </Reveal>

        {/* 01 */}
        <div className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
          <Reveal>
            <span className="font-mono text-sm font-bold" style={{ color: ACCENT }}>01</span>
            <h3 className="mt-3 text-[clamp(22px,2.4vw,28px)] font-bold tracking-tight text-zinc-950">Dava dosyası yönetimi</h3>
            <p className="mt-4 max-w-[42ch] text-[15px] leading-relaxed text-zinc-500">
              Belgelerinizi yükleyin, yapay zeka saniyeler içinde okuyup analiz etsin. Dosyanın tarafları, UYAP bilgileri ve genel durumu tek ekranda.
            </p>
          </Reveal>
          <Reveal delay={0.08}>
            <BrowserFrame>
              <div className="p-5">
                <div className="mb-3 flex flex-wrap gap-1.5">
                  {['Genel Bakış', 'Belgeler', 'İçtihat Arama', 'Dilekçeler'].map((t, i) => (
                    <span key={t} className={`rounded-full px-3 py-1.5 text-[11.5px] font-semibold ${i === 0 ? 'text-white' : 'text-zinc-500'}`} style={i === 0 ? { background: ACCENT } : { background: '#F4F4F5' }}>
                      {t}
                    </span>
                  ))}
                </div>
                <div className="rounded-2xl border border-zinc-100 bg-zinc-50/60 p-4">
                  <div className="mb-2 text-[12.5px] font-bold text-zinc-800">Taraflar</div>
                  <div className="space-y-1 text-[12.5px] text-zinc-500">
                    <div>Davacı: Elif Yılmaz</div>
                    <div>Davalı: Mehmet Kaya</div>
                    <div>Mahkeme: Ankara 33. Sulh Hukuk Mahkemesi</div>
                  </div>
                </div>
              </div>
            </BrowserFrame>
          </Reveal>
        </div>

        {/* 02 — image left, text right */}
        <div className="mt-24 grid grid-cols-1 items-center gap-10 md:mt-32 md:grid-cols-2 md:gap-16">
          <Reveal delay={0.08} className="order-2 md:order-1">
            <BrowserFrame>
              <div className="p-5">
                <div className="mb-3 flex items-center gap-2 text-[13px] font-bold text-zinc-800">
                  <Scale size={16} strokeWidth={2} style={{ color: ACCENT }} /> Dava Stratejisi
                </div>
                <ul className="mb-4 space-y-2 pl-4 text-[12.5px] leading-relaxed text-zinc-500" style={{ listStyleType: 'disc' }}>
                  <li>Kira sözleşmesinin emsal olarak kullanılması</li>
                  <li>Bilirkişi raporundaki hatalı değerlendirmelerin çürütülmesi</li>
                  <li>Kira bedelinin 01.08.2023&apos;ten itibaren geçerli sayılması</li>
                </ul>
                <div className="grid grid-cols-2 gap-2.5">
                  <div className="rounded-xl border border-zinc-100 bg-emerald-50/60 p-3">
                    <div className="mb-1 text-[10.5px] font-bold text-emerald-700">MEVCUT DELİLLER</div>
                    <div className="text-[11.5px] text-zinc-500">Temmuz 2026 emsal ilanları</div>
                  </div>
                  <div className="rounded-xl border border-zinc-100 p-3" style={{ background: ACCENT_SOFT }}>
                    <div className="mb-1 text-[10.5px] font-bold" style={{ color: ACCENT_DARK }}>EKSİK DELİLLER</div>
                    <div className="text-[11.5px] text-zinc-500">Güncel emsal kira ilanı</div>
                  </div>
                </div>
              </div>
            </BrowserFrame>
          </Reveal>
          <Reveal className="order-1 md:order-2">
            <span className="font-mono text-sm font-bold" style={{ color: ACCENT }}>02</span>
            <h3 className="mt-3 text-[clamp(22px,2.4vw,28px)] font-bold tracking-tight text-zinc-950">Dosya içerisinde akıllı analizler</h3>
            <p className="mt-4 max-w-[42ch] text-[15px] leading-relaxed text-zinc-500">
              Dosya Özeti, Dosya Röntgeni, Çelişki Avcısı, Dava Stratejisi ve Müzakere/Arabuluculuk analizleri — dosyanızdaki tüm belgeleri okuyarak tek tıkla kapsamlı analizler sunar.
            </p>
            <div className="mt-5 flex flex-wrap gap-2">
              {['Çelişki Avcısı', 'Dosya Özeti', 'Dosya Röntgeni', 'Müzakere'].map(t => (
                <span key={t} className="rounded-full bg-zinc-100 px-3.5 py-1.5 text-[12px] font-semibold text-zinc-600">{t}</span>
              ))}
            </div>
          </Reveal>
        </div>

        {/* 03 */}
        <div className="mt-24 grid grid-cols-1 items-center gap-10 md:mt-32 md:grid-cols-2 md:gap-16">
          <Reveal>
            <span className="font-mono text-sm font-bold" style={{ color: ACCENT }}>03</span>
            <h3 className="mt-3 text-[clamp(22px,2.4vw,28px)] font-bold tracking-tight text-zinc-950">İçtihat arama ve raporlama</h3>
            <p className="mt-4 max-w-[42ch] text-[15px] leading-relaxed text-zinc-500">
              Doğal dille arayın, AyrisLegal sizin için en alakalı Yargıtay, Danıştay ve AYM kararlarını bulsun, okusun ve kapsamlı bir içtihat raporu hazırlasın.
            </p>
          </Reveal>
          <Reveal delay={0.08}>
            <BrowserFrame>
              <div className="grid grid-cols-2 divide-x divide-zinc-100">
                <div className="p-4">
                  <div className="mb-2.5 text-[10.5px] font-bold uppercase tracking-wide text-zinc-400">Sonuçlar (50)</div>
                  {[
                    { chamber: 'Ceza Genel Kurulu', esas: '2020/165', karar: '2021/273' },
                    { chamber: '1. Ceza Dairesi', esas: '2023/5798', karar: '2023/5821' },
                  ].map(r => (
                    <div key={r.esas} className="mb-2 rounded-xl border border-zinc-100 p-2.5">
                      <div className="mb-1 flex items-center gap-1.5">
                        <span className="rounded-full px-1.5 py-0.5 text-[8.5px] font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>YARGITAY</span>
                        <span className="text-[10px] text-zinc-400">{r.chamber}</span>
                      </div>
                      <div className="text-[12px] font-bold text-zinc-800">E. {r.esas} - K. {r.karar}</div>
                    </div>
                  ))}
                </div>
                <div className="p-4">
                  <div className="mb-2 flex items-center gap-1.5 text-[12px] font-bold text-zinc-800">
                    <Sparkles size={13} strokeWidth={2.5} style={{ color: ACCENT }} /> İçtihat Raporu
                  </div>
                  <p className="text-[11px] leading-relaxed text-zinc-500">
                    <b className="text-zinc-800">1. Alaka Puanı ve Durum</b><br />
                    Sunulan 48 karardan yaklaşık 15 tanesi doğrudan uyuşmazlığın esasına ilişkindir…
                  </p>
                </div>
              </div>
            </BrowserFrame>
          </Reveal>
        </div>
      </section>

      {/* ══════════════════════════════ BENTO — özellik ızgarası (3-eşit-kart YOK) ═══════ */}
      <section className="bg-zinc-50/70 py-20 md:py-28">
        <div className="mx-auto max-w-[1400px] px-5 md:px-16">
          <Reveal>
            <div className="mb-14 max-w-[50ch]">
              <span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-400">Tek Platform</span>
              <h2 className="mt-3 text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter text-zinc-950">Bizzat mahkemeye gitmek dışında her şey burada</h2>
            </div>
          </Reveal>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-[1.4fr_1fr] md:grid-rows-2">
            {/* Büyük kart — sohbet, 2 satır boyu */}
            <Reveal className="md:row-span-2">
              <div className="flex h-full flex-col justify-between rounded-[1.75rem] p-9 text-white" style={{ background: `linear-gradient(150deg, ${ACCENT}, ${ACCENT_DARK})` }}>
                <div>
                  <MessageSquare size={26} strokeWidth={2} />
                  <h3 className="mt-5 text-2xl font-extrabold tracking-tight">Dosyalarınızla sohbet edin</h3>
                  <p className="mt-3 max-w-[42ch] text-[14.5px] leading-relaxed text-white/85">
                    Dava dosyalarınızı yükleyin, AyrisLegal sizin için hepsini saniyeler içinde okuyup analiz etsin — Türk hukuk sistemine özel eğitilmiş yapay zekasıyla dilekçe taslakları hazırlasın.
                  </p>
                </div>
                <span className="mt-8 inline-flex w-fit items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-[12.5px] font-semibold">
                  <Landmark size={14} strokeWidth={2.5} /> Türk hukukuna özel yapay zeka
                </span>
              </div>
            </Reveal>

            <Reveal delay={0.06}>
              <div className="h-full rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
                <FileText size={22} strokeWidth={2} className="text-zinc-400" />
                <h3 className="mt-4 text-lg font-bold text-zinc-950">Dilekçe asistanı</h3>
                <p className="mt-2 text-[13.5px] leading-relaxed text-zinc-500">
                  Belgeleri, analizleri ve içtihat araştırmalarını bağlam olarak ekleyin, profesyonel dilekçeler hazırlayın.
                </p>
              </div>
            </Reveal>

            <Reveal delay={0.12}>
              <div className="h-full rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
                <div className="flex items-center gap-3">
                  <Search size={22} strokeWidth={2} className="text-zinc-400" />
                  <span className="rounded-full bg-zinc-100 px-2.5 py-1 text-[10.5px] font-bold text-zinc-500">UYAP Chrome Eklentisi</span>
                </div>
                <h3 className="mt-4 text-lg font-bold text-zinc-950">Akıllı içtihat arama &amp; UDF desteği</h3>
                <p className="mt-2 text-[13.5px] leading-relaxed text-zinc-500">
                  En alakalı kararları bulur, okur. UYAP formatındaki (UDF) dosyalarınızı otomatik OCR ile doğrudan yükleyin.
                </p>
              </div>
            </Reveal>
          </div>

          {/* İkinci sıra — asimetrik 3'lü, eşit değil (2fr/1fr/1fr) */}
          <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-[1.3fr_1fr_1fr]">
            <Reveal>
              <div className="h-full rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
                <div className="grid grid-cols-3 gap-2">
                  {[
                    { icon: FolderOpen, label: 'Evrak Yönetimi' },
                    { icon: FileText, label: 'Dilekçe Sistemi' },
                    { icon: Search, label: 'İçtihat Arama' },
                  ].map(c => (
                    <div key={c.label} className="rounded-xl bg-zinc-50 p-3 text-center">
                      <c.icon size={18} strokeWidth={2} className="mx-auto text-zinc-500" />
                      <div className="mt-1.5 text-[10.5px] font-semibold text-zinc-600">{c.label}</div>
                    </div>
                  ))}
                </div>
                <h3 className="mt-5 text-base font-bold text-zinc-950">Tüm büro ihtiyaçlarınız tek yerde</h3>
                <p className="mt-1.5 text-[13px] leading-relaxed text-zinc-500">Dava yönetiminden UYAP entegrasyonuna kadar.</p>
              </div>
            </Reveal>
            <Reveal delay={0.06}>
              <div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
                <GraduationCap size={22} strokeWidth={2} className="text-zinc-400" />
                <h3 className="mt-4 text-base font-bold text-zinc-950">Dijital stajyer</h3>
                <p className="mt-2 text-[13px] leading-relaxed text-zinc-500">Uzun soluklu araştırma görevlerini AyrisLegal&apos;a devredin.</p>
              </div>
            </Reveal>
            <Reveal delay={0.12}>
              <div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
                <div className="flex items-center gap-2">
                  <Users2 size={22} strokeWidth={2} className="text-zinc-400" />
                  <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[9.5px] font-bold text-zinc-500">YAKINDA</span>
                </div>
                <h3 className="mt-4 text-base font-bold text-zinc-950">Ekip paylaşımı</h3>
                <p className="mt-2 text-[13px] leading-relaxed text-zinc-500">Büronuzla ortak çalışma alanı.</p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════ GÜVEN — koyu zemin, saf siyah değil ═══════ */}
      <section 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]">
              <span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-500">Güven</span>
              <h2 className="mt-3 text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter">Dosyalarınız sizin kalır</h2>
              <p className="mt-3 text-[15px] text-zinc-400">Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal&apos;ı bu bilinçle kuruyoruz.</p>
            </div>
          </Reveal>
          <div className="grid grid-cols-1 gap-px overflow-hidden rounded-3xl bg-white/10 sm:grid-cols-2 lg:grid-cols-4">
            {[
              { icon: Lock, title: 'Yerel şifreli saklama', desc: 'Hassas veriler işletim sisteminizin kendi güvenli katmanıyla şifrelenir.' },
              { icon: Cloud, title: 'Kendi Drive’ınıza yedekleme', desc: 'Yedekleme bizim sunucularımıza değil, sizin Drive hesabınıza yapılır.' },
              { icon: ShieldCheck, title: 'Sadece sizin analiziniz', desc: 'Belgeleriniz başka kullanıcılarla paylaşılmaz.' },
              { icon: CheckCircle2, title: 'Son karar her zaman sizde', desc: 'AyrisLegal analiz ve taslak üretir, nihai kontrol sizde kalır.' },
            ].map((item, i) => (
              <Reveal key={item.title} delay={i * 0.05}>
                <div className="h-full bg-zinc-950 p-7">
                  <item.icon size={20} strokeWidth={2} style={{ color: ACCENT }} />
                  <h3 className="mt-4 text-[14px] font-bold">{item.title}</h3>
                  <p className="mt-2 text-[12.5px] leading-relaxed text-zinc-500">{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">
            <span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-400">Fiyatlandırma</span>
            <h2 className="mt-3 text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter text-zinc-950">İhtiyacınıza uygun modeller</h2>
            <p className="mt-3 text-[15px] text-zinc-500">Basit, şeffaf fiyatlandırma — gizli ücret yok.</p>
          </div>
        </Reveal>
        <Reveal delay={0.05}>
          <div className="mb-10 flex justify-center">
            <div className="inline-flex gap-1 rounded-full bg-zinc-100 p-1">
              <button onClick={() => setPricingYearly(true)} className={`rounded-full px-4.5 px-[18px] py-2 text-[13.5px] font-bold transition-colors ${pricingYearly ? 'bg-white text-zinc-900 shadow-sm' : 'text-zinc-500'}`}>Yıllık</button>
              <button onClick={() => setPricingYearly(false)} className={`rounded-full px-[18px] py-2 text-[13.5px] font-bold transition-colors ${!pricingYearly ? 'bg-white text-zinc-900 shadow-sm' : 'text-zinc-500'}`}>Aylık bilgi al</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 p-9">
              <p className="text-[12.5px] font-bold uppercase tracking-wide" style={{ color: ACCENT }}>Bireysel Avukat</p>
              <p className="mt-2.5 text-[42px] font-extrabold tracking-tighter text-zinc-950">
                {pricingYearly ? '40.000 ₺' : 'Bilgi Al'}
                {pricingYearly && <span className="text-[15px] font-medium text-zinc-400"> / yıl</span>}
              </p>
              <p className="mt-4 text-[14px] text-zinc-500">Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.</p>
              <div className="my-6 border-t border-zinc-100" />
              <ul className="mb-7 flex flex-col gap-3">
                {['Sınırsız dosya analizi', 'AI tartışma ortağı', 'İçtihat arama', 'Dilekçe taslağı üretimi'].map(item => (
                  <li key={item} className="flex items-center gap-2.5 text-[14px] text-zinc-700">
                    <CheckCircle2 size={16} strokeWidth={2.5} className="text-emerald-600" />{item}
                  </li>
                ))}
              </ul>
              <a href="#iletisim" className="mt-auto rounded-full border border-zinc-200 py-3.5 text-center text-[14.5px] font-bold text-zinc-900 transition-colors hover:bg-zinc-50">Ücretsiz Deneyin</a>
            </div>
          </Reveal>
          <Reveal delay={0.14}>
            <div className="relative flex h-full flex-col rounded-[1.75rem] border p-9" style={{ borderColor: ACCENT, background: ACCENT_SOFT }}>
              <span className="absolute -top-3 left-9 rounded-full px-3.5 py-1 text-[11px] font-bold text-white" style={{ background: ACCENT }}>Ekip Çalışması</span>
              <p className="text-[12.5px] font-bold uppercase tracking-wide" style={{ color: ACCENT_DARK }}>Hukuk Bürosu</p>
              <p className="mt-2.5 text-[30px] font-extrabold tracking-tighter text-zinc-950">Özel Fiyatlandırma</p>
              <p className="mt-4 text-[14px] text-zinc-600">Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.</p>
              <div className="my-6 border-t border-black/10" />
              <ul className="mb-7 flex flex-col gap-3">
                {['Tüm bireysel özellikler', 'Ekip içi dosya paylaşımı', 'Ortak içtihat havuzu', 'Kurucu ekiple özel destek'].map(item => (
                  <li key={item} className="flex items-center gap-2.5 text-[14px] text-zinc-800">
                    <CheckCircle2 size={16} strokeWidth={2.5} style={{ color: ACCENT_DARK }} />{item}
                  </li>
                ))}
              </ul>
              <a href="#iletisim" className="mt-auto rounded-full py-3.5 text-center text-[14.5px] font-bold text-white transition-colors" style={{ background: ACCENT }}>İletişime Geçin</a>
            </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>
          <h2 className="mb-12 text-center text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter text-zinc-950">Muhtemelen bunları soracaksınız</h2>
        </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: 'Belgeler yerel şifreli depolamada tutulur, yedekleme sizin kendi Google Drive hesabınıza yapılır. Başka kullanıcı veya üçüncü tarafla paylaşılmaz.' },
            { q: 'Yapay zeka yanlış bir şey söylerse sorumluluk kimde?', a: 'AyrisLegal karar organı değildir — analiz, taslak ve öneri üretir. Ürettiği emsal kararlar gerçek esas/karar numaralarıyla gelir, kaynağından doğrulanabilir. Nihai değerlendirme ve imza her zaman sizde kalır.' },
            { q: 'UYAP şifremi AyrisLegal ile paylaşmam gerekiyor mu?', a: 'Hayır. UYAP eklentisi tarayıcınızda zaten açık olan oturumu kullanır — kimlik bilgileriniz hiçbir zaman AyrisLegal sunucularına iletilmez ya da saklanmaz.' },
            { q: 'Büromdaki diğer avukatlarla paylaşabilir miyim?', a: 'Şu an platform bireysel avukat için tasarlandı. Ekip/büro paylaşımı yol haritamızda — Hukuk Bürosu planı için iletişime geçin.' },
          ].map(item => (
            <Reveal key={item.q}>
              <div className="py-6">
                <h3 className="flex items-start gap-2 text-[15.5px] font-bold text-zinc-900">
                  <ChevronRight size={17} strokeWidth={2.5} className="mt-0.5 shrink-0" style={{ color: ACCENT }} />
                  {item.q}
                </h3>
                <p className="mt-2 pl-[25px] text-[14px] leading-relaxed text-zinc-500">{item.a}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ══════════════════════════════ İLETİŞİM ═════════════════════════ */}
      <section id="iletisim" className="bg-zinc-50/70 py-20 md:py-28">
        <div className="mx-auto grid max-w-[1100px] grid-cols-1 gap-12 px-5 md:grid-cols-[1fr_1.2fr] md:px-16">
          <Reveal>
            <h2 className="text-[clamp(24px,3vw,30px)] font-extrabold tracking-tighter text-zinc-950">
              Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
            </h2>
            <p className="mt-4 text-[14.5px] leading-relaxed text-zinc-500">
              AyrisLegal yeni. Sahte ya da ödünç yorumlar yerine dürüst olmayı seçtik: platformu kurucu ekiple birlikte, doğrudan geri bildiriminizle şekillendiriyoruz.
            </p>
            <ul className="mt-7 flex flex-col gap-3">
              {['Formu doldurun', 'Kurucu ekipten biri sizi arar', '15 dakikalık canlı demoda dosyanızla test edersiniz'].map((step, i) => (
                <li key={step} className="flex items-center gap-3 text-[14px] text-zinc-600">
                  <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white" style={{ background: ACCENT }}>{i + 1}</span>
                  {step}
                </li>
              ))}
            </ul>
          </Reveal>
          <Reveal delay={0.08}>
            <ContactFormV2 />
          </Reveal>
        </div>
      </section>

      {/* ══════════════════════════════ 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-[13px] text-zinc-400 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-400 hover:text-zinc-600">Created by ayris.tech</a>
      </footer>
    </div>
  )
}