'use client'

import { useRef, useState } from 'react'
import { motion, useInView } from 'framer-motion'
import ContactFormV2 from '@/components/contact-form-v2'

/* ─── Design tokens (Modern SaaS / warm & rounded) ─────────────────────── */
const T = {
  bg:        '#FFFFFF',
  bgSoft:    '#FFF8F1',
  ink:       '#0B1220',
  inkSoft:   'rgba(11,18,32,0.62)',
  inkFaint:  'rgba(11,18,32,0.42)',
  orange:    '#F2600C',
  orangeDark:'#D94E00',
  orangeSoft:'#FFEDD9',
  navy:      '#16223D',
  navySoft:  '#EEF2FB',
  green:     '#0F9D6E',
  greenSoft: '#E4F7EF',
  border:    'rgba(11,18,32,0.08)',
  fontHead:  '"Archivo", sans-serif',
}

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: 18 }}
      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 18 }}
      transition={{ duration: 0.5, ease: 'easeOut', delay }}
      className={className}
    >
      {children}
    </motion.div>
  )
}

/* ─── Mock "browser window" chrome wrapper ─────────────────────────────── */
function BrowserFrame({ children, width = '100%' }: { children: React.ReactNode; width?: string }) {
  return (
    <div style={{ width, borderRadius: '18px', overflow: 'hidden', background: '#fff', border: `1px solid ${T.border}`, boxShadow: '0 30px 70px -20px rgba(11,18,32,0.25)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '12px 16px', background: '#F4F5F7', borderBottom: `1px solid ${T.border}` }}>
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F57' }} />
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FEBC2E' }} />
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28C840' }} />
        <span style={{ flex: 1, textAlign: 'center', fontSize: '12px', color: T.inkFaint, fontWeight: 500 }}>ayrislegal.com</span>
      </div>
      <div style={{ background: '#fff' }}>{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 style={{ background: T.bg, color: T.ink, fontFamily: '"Archivo", ui-sans-serif, system-ui, sans-serif', minHeight: '100vh' }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');
        * { box-sizing: border-box; }
        body { margin: 0; }
        a { color: inherit; }
        :focus-visible { outline: 2px solid ${T.orange}; outline-offset: 2px; }
        ::selection { background: ${T.orangeSoft}; color: ${T.ink}; }
        .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 15px; color: #fff; background: ${T.orange}; border: none; border-radius: 999px; padding: 15px 28px; transition: background .15s, transform .1s; }
        .btn-primary:hover { background: ${T.orangeDark}; transform: translateY(-1px); }
        .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 15px; color: ${T.ink}; background: #fff; border: 1.5px solid ${T.border}; border-radius: 999px; padding: 15px 28px; transition: border-color .15s, background .15s; }
        .btn-outline:hover { border-color: ${T.ink}; background: ${T.navySoft}; }
        .nav-link { color: ${T.inkSoft}; text-decoration: none; font-size: 14.5px; font-weight: 600; transition: color .15s; }
        .nav-link:hover { color: ${T.ink}; }
        .pill-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: ${T.orangeSoft}; color: ${T.orangeDark}; }
        .feature-card { border-radius: 20px; border: 1px solid ${T.border}; background: #fff; padding: 28px; transition: box-shadow .2s, transform .2s; }
        .feature-card:hover { box-shadow: 0 20px 50px -20px rgba(11,18,32,0.18); transform: translateY(-3px); }
        .soon-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: ${T.navySoft}; color: ${T.navy}; }
        @media (max-width: 900px) { .nav-links { display: none !important; } .split-2col { grid-template-columns: 1fr !important; } }
        @media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr !important; } .grid-2 { grid-template-columns: 1fr !important; } .grid-4 { grid-template-columns: repeat(2,1fr) !important; } }
      `}</style>

      {/* ══════════════════════════════ NAV ═════════════════════════════ */}
      <nav style={{ position: 'sticky', top: 0, zIndex: 30, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', padding: '16px clamp(20px,6vw,64px)', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', borderBottom: `1px solid ${T.border}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <img src="/logo.png" alt="AyrisLegal" style={{ height: '26px', width: 'auto', objectFit: 'contain' }} />
        </div>
        <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
          {NAV_LINKS.map(l => <a key={l.href} href={l.href} className="nav-link">{l.label}</a>)}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <a href="#iletisim" className="btn-outline" style={{ padding: '10px 20px', fontSize: '14px' }}>Giriş Yap</a>
          <a href="#iletisim" className="btn-primary" style={{ padding: '10px 22px', fontSize: '14px' }}>Ücretsiz Deneyin →</a>
        </div>
      </nav>

      {/* ══════════════════════════════ HERO ════════════════════════════ */}
      <section style={{
        position: 'relative', overflow: 'hidden',
        background: `radial-gradient(circle at 30% 0%, ${T.orangeSoft} 0%, ${T.bg} 55%)`,
      }}>
        <div style={{ maxWidth: '900px', margin: '0 auto', padding: 'clamp(64px,10vw,120px) clamp(20px,6vw,72px) clamp(48px,7vw,72px)', textAlign: 'center', position: 'relative' }}>
          <Reveal>
            <span className="pill-badge">✨ Avukatlar için yapay zeka destekli hukuki asistan</span>
          </Reveal>
          <Reveal delay={0.06}>
            <h1 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(36px,6.5vw,64px)', lineHeight: 1.08, letterSpacing: '-0.02em', margin: '24px 0 0' }}>
              Hukuk Pratiğinde<br />
              <span style={{ color: T.orange }}>Yapay Zeka Devrimi</span>
            </h1>
          </Reveal>
          <Reveal delay={0.12}>
            <p style={{ fontSize: 'clamp(16px,2vw,19px)', lineHeight: 1.6, color: T.inkSoft, maxWidth: '58ch', margin: '24px auto 0' }}>
              Dava dosyalarınızla sohbet edin, saniyeler içinde dilekçe taslağı oluşturun ve içtihat taraması yapın. AyrisLegal, modern hukukçunun güç kaynağı.
            </p>
          </Reveal>
          <Reveal delay={0.18}>
            <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', justifyContent: 'center', marginTop: '36px' }}>
              <a href="#iletisim" className="btn-primary">Ücretsiz Deneyin →</a>
              <a href="#tanisin" className="btn-outline">Nasıl Çalışır?</a>
            </div>
          </Reveal>
          <Reveal delay={0.22}>
            <p style={{ fontSize: '13px', color: T.inkFaint, marginTop: '20px' }}>
              Kredi kartı gerekmez · Kurucu ekiple birebir demo
            </p>
          </Reveal>
        </div>

        {/* Hero mockup */}
        <Reveal delay={0.2}>
          <div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px) clamp(48px,8vw,96px)' }}>
            <BrowserFrame>
              <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: '360px' }}>
                <div style={{ background: T.navySoft, padding: '20px 16px', borderRight: `1px solid ${T.border}`, display: 'flex', flexDirection: 'column', gap: '6px' }}>
                  {['📊 Kontrol Merkezi', '📁 Davalar', '📄 Dilekçe', '🔍 İçtihat', '💬 Chat'].map((item, i) => (
                    <div key={item} style={{ padding: '10px 12px', borderRadius: '10px', fontSize: '13px', fontWeight: 600, background: i === 1 ? '#fff' : 'transparent', color: i === 1 ? T.orange : T.inkSoft, boxShadow: i === 1 ? '0 2px 8px rgba(11,18,32,0.08)' : 'none' }}>
                      {item}
                    </div>
                  ))}
                </div>
                <div style={{ padding: '24px' }}>
                  <div style={{ fontSize: '12px', color: T.inkFaint, fontWeight: 600, marginBottom: '14px' }}>KİRA TESPİT DAVASI · DOSYA DETAYI</div>
                  {[
                    { name: 'Bilirkişi Raporu - Kira Tespiti', date: '15.01.2026', tag: 'diğer' },
                    { name: '2024/100 Esas Tensip Tutanağı', date: '10.01.2026', tag: 'tutanak' },
                    { name: 'Kira Sözleşmesi', date: '10.01.2026', tag: 'diğer' },
                  ].map(row => (
                    <div key={row.name} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', borderRadius: '12px', border: `1px solid ${T.border}`, marginBottom: '8px' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                        <span style={{ width: 8, height: 8, borderRadius: '50%', background: T.green }} />
                        <span style={{ fontSize: '13.5px', fontWeight: 600 }}>{row.name}</span>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                        <span style={{ fontSize: '12px', color: T.inkFaint }}>{row.date}</span>
                        <span style={{ fontSize: '11px', fontWeight: 700, padding: '3px 10px', borderRadius: '999px', background: T.orangeSoft, color: T.orangeDark }}>{row.tag}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </BrowserFrame>
          </div>
        </Reveal>
      </section>

      {/* ══════════════════════════════ STATS ═══════════════════════════ */}
      <section style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px) clamp(48px,7vw,72px)' }}>
        <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '16px' }}>
          {[
            { 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} style={{ borderRadius: '18px', border: `1px solid ${T.border}`, padding: '22px 16px', textAlign: 'center' }}>
              <div style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '28px', color: T.orange }}>{s.value}</div>
              <div style={{ fontSize: '12.5px', color: T.inkSoft, marginTop: '6px', lineHeight: 1.4 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ══════════════════════════════ TANIŞIN — alternating feature showcase ══════════════ */}
      <section id="tanisin" style={{ maxWidth: '1200px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 'clamp(48px,8vw,80px)' }}>
            <h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(28px,4vw,42px)', margin: '0 0 12px', letterSpacing: '-0.02em' }}>AyrisLegal ile Tanışın</h2>
            <p style={{ fontSize: '16px', color: T.inkSoft }}>Modern hukukçunun ihtiyaç duyduğu tüm araçlar, tek bir platformda</p>
          </div>
        </Reveal>

        {/* 01 — Dava Dosyası Yönetimi */}
        <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
          <Reveal>
            <div>
              <span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>01</span>
              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Dava Dosyası Yönetimi</h3>
              <p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
                Belgelerinizi yükleyin, yapay zeka saniyeler içinde okuyup analiz etsin. Dosyanın tarafları, UYAP bilgileri ve genel durumu tek ekranda.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.08}>
            <BrowserFrame>
              <div style={{ padding: '20px' }}>
                <div style={{ fontSize: '12px', fontWeight: 700, color: T.inkFaint, marginBottom: '12px' }}>GENEL BAKIŞ</div>
                {['Genel Bakış', 'Belgeler', 'İçtihat Arama', 'Dilekçeler', 'Chat'].map((t, i) => (
                  <div key={t} style={{ display: 'inline-block', fontSize: '12px', fontWeight: 600, padding: '6px 12px', borderRadius: '999px', marginRight: '6px', marginBottom: '14px', background: i === 0 ? T.orange : T.navySoft, color: i === 0 ? '#fff' : T.inkSoft }}>{t}</div>
                ))}
                <div style={{ borderRadius: '14px', border: `1px solid ${T.border}`, padding: '16px', background: T.bgSoft }}>
                  <div style={{ fontSize: '13px', fontWeight: 700, marginBottom: '8px' }}>Taraflar</div>
                  <div style={{ fontSize: '12.5px', color: T.inkSoft, lineHeight: 1.8 }}>
                    Davacı: Elif Yılmaz<br />Davalı: Mehmet Kaya<br />Mahkeme: Ankara 33. Sulh Hukuk Mahkemesi
                  </div>
                </div>
              </div>
            </BrowserFrame>
          </Reveal>
        </div>

        {/* 02 — Akıllı Analizler */}
        <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
          <Reveal className="order-2" delay={0.08}>
            <BrowserFrame>
              <div style={{ padding: '20px' }}>
                <div style={{ fontSize: '13px', fontWeight: 700, marginBottom: '12px' }}>⚡ Dava Stratejisi</div>
                <ul style={{ margin: 0, padding: '0 0 0 18px', fontSize: '12.5px', color: T.inkSoft, lineHeight: 1.9 }}>
                  <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 style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', marginTop: '16px' }}>
                  <div style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '12px', background: T.greenSoft }}>
                    <div style={{ fontSize: '11px', fontWeight: 700, color: T.green, marginBottom: '4px' }}>✓ MEVCUT DELİLLER</div>
                    <div style={{ fontSize: '11.5px', color: T.inkSoft }}>Temmuz 2026 emsal ilanları</div>
                  </div>
                  <div style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '12px', background: '#FEF2F2' }}>
                    <div style={{ fontSize: '11px', fontWeight: 700, color: '#DC2626', marginBottom: '4px' }}>✕ EKSİK DELİLLER</div>
                    <div style={{ fontSize: '11.5px', color: T.inkSoft }}>Güncel emsal kira ilanı</div>
                  </div>
                </div>
              </div>
            </BrowserFrame>
          </Reveal>
          <Reveal>
            <div>
              <span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>02</span>
              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Dosya İçerisinde Akıllı Analizler</h3>
              <p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: '0 0 16px' }}>
                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 style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                {['🚨 Çelişki Avcısı', '📋 Dosya Özeti', '🔎 Dosya Röntgeni', '⚖️ Müzakere'].map(t => (
                  <span key={t} className="pill-badge" style={{ background: T.navySoft, color: T.navy }}>{t}</span>
                ))}
              </div>
            </div>
          </Reveal>
        </div>

        {/* 03 — İçtihat Arama ve Raporlama */}
        <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
          <Reveal>
            <div>
              <span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>03</span>
              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>İçtihat Arama ve Raporlama</h3>
              <p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
                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>
            </div>
          </Reveal>
          <Reveal delay={0.08}>
            <BrowserFrame>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: '300px' }}>
                <div style={{ padding: '16px', borderRight: `1px solid ${T.border}` }}>
                  <div style={{ fontSize: '11px', fontWeight: 700, color: T.inkFaint, marginBottom: '10px' }}>SONUÇLAR (50)</div>
                  {[
                    { court: 'YARGITAY', chamber: 'Ceza Genel Kurulu', esas: '2020/165', karar: '2021/273', date: '10.06.2021' },
                    { court: 'YARGITAY', chamber: '1. Ceza Dairesi', esas: '2023/5798', karar: '2023/5821', date: '02.10.2023' },
                  ].map((r) => (
                    <div key={r.esas} style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '10px 12px', marginBottom: '8px' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}>
                        <span style={{ fontSize: '9px', fontWeight: 700, padding: '2px 7px', borderRadius: '999px', background: T.orangeSoft, color: T.orangeDark }}>{r.court}</span>
                        <span style={{ fontSize: '10.5px', color: T.inkFaint }}>{r.chamber}</span>
                      </div>
                      <div style={{ fontSize: '12.5px', fontWeight: 700 }}>E. {r.esas} - K. {r.karar}</div>
                    </div>
                  ))}
                </div>
                <div style={{ padding: '16px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12.5px', fontWeight: 700, marginBottom: '10px' }}>✨ AyrisLegal İçtihat Raporu</div>
                  <div style={{ fontSize: '11.5px', color: T.inkSoft, lineHeight: 1.7 }}>
                    <b style={{ color: T.ink }}>1. Alaka Puanı ve Durum</b><br />
                    Sunulan 48 karardan yaklaşık 15 tanesi doğrudan uyuşmazlığın esasına ilişkindir…
                  </div>
                </div>
              </div>
            </BrowserFrame>
          </Reveal>
        </div>

        {/* 04 — Dilekçe */}
        <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center' }}>
          <Reveal className="order-2" delay={0.08}>
            <BrowserFrame>
              <div style={{ padding: '20px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '14px' }}>
                  <span style={{ fontSize: '11px', fontWeight: 700, padding: '4px 10px', borderRadius: '999px', background: T.greenSoft, color: T.green }}>✓ Dilekçe Oluşturma Tamamlandı</span>
                </div>
                <div style={{ fontSize: '12px', color: T.inkSoft, lineHeight: 1.8, borderRadius: '12px', border: `1px solid ${T.border}`, padding: '14px', background: T.bgSoft }}>
                  <b style={{ color: T.ink }}>SONUÇ VE İSTEM:</b> Yukarıda arz ve izah edilen ve Sayın Dairenizce re&apos;sen gözetilecek nedenlerle davalı tarafın usul ve yasaya aykırı istinaf başvurusunun reddine karar verilmesini saygılarımızla arz ve talep ederiz.
                </div>
              </div>
            </BrowserFrame>
          </Reveal>
          <Reveal>
            <div>
              <span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>04</span>
              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Yapay Zeka Destekli Dilekçe Oluşturma</h3>
              <p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
                Süre tutum, mazeret ve vekaletname sunma dilekçelerini tek tıkla saniyeler içinde hazırlar. Dava dosyanızdaki belgeler ve içtihat araştırmaları ışığında, olaya uygun profesyonel dilekçeler oluşturun.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ══════════════════════════════ BÜRO / OFİS DASHBOARD ═══════════════ */}
      <section style={{ background: T.bgSoft, padding: 'clamp(48px,8vw,96px) 0' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
          <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: '56px', alignItems: 'center' }}>
            <Reveal>
              <div>
                <span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>05</span>
                <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Tüm Büro İhtiyaçlarınız Tek Platformda</h3>
                <p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
                  Dava yönetiminden dilekçe hazırlamaya, içtihat aramasından UYAP entegrasyonuna kadar — bizzat mahkemeye gidip duruşmaya girmek dışında her şey burada.
                </p>
              </div>
            </Reveal>
            <Reveal delay={0.08}>
              <BrowserFrame>
                <div style={{ padding: '20px' }}>
                  <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '10px' }}>
                    {[
                      { icon: '📁', label: 'Evrak Yönetimi', color: T.orangeSoft, fg: T.orangeDark },
                      { icon: '📄', label: 'Dilekçe Sistemi', color: T.navySoft, fg: T.navy },
                      { icon: '🔍', label: 'İçtihat Arama', color: T.greenSoft, fg: T.green },
                      { icon: '👥', label: 'Ekip Paylaşımı', color: '#F3E8FF', fg: '#7E22CE', soon: true },
                      { icon: '🎓', label: 'Dijital Stajyer', color: '#FEF9C3', fg: '#A16207' },
                      { icon: '💬', label: 'AyrisLegal Chat', color: '#FFE4E6', fg: '#BE123C' },
                    ].map(c => (
                      <div key={c.label} style={{ borderRadius: '14px', padding: '14px 10px', background: c.color, textAlign: 'center' }}>
                        <div style={{ fontSize: '20px', marginBottom: '6px' }}>{c.icon}</div>
                        <div style={{ fontSize: '11.5px', fontWeight: 700, color: c.fg }}>{c.label}</div>
                        {c.soon && <div style={{ fontSize: '9px', fontWeight: 700, marginTop: '4px', color: c.fg, opacity: 0.7 }}>YAKINDA</div>}
                      </div>
                    ))}
                  </div>
                </div>
              </BrowserFrame>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════ ÜÇ KART — Sohbet / Dilekçe / UYAP ═══════ */}
      <section style={{ maxWidth: '1200px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: '20px', marginBottom: '20px' }}>
          <Reveal>
            <div style={{ borderRadius: '24px', padding: '36px', background: `linear-gradient(135deg, ${T.orange}, ${T.orangeDark})`, color: '#fff', height: '100%' }}>
              <div style={{ fontSize: '26px', marginBottom: '14px' }}>💬</div>
              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '24px', margin: '0 0 12px' }}>Dosyalarınızla Sohbet Edin</h3>
              <p style={{ fontSize: '14.5px', lineHeight: 1.7, opacity: 0.92, margin: '0 0 18px', maxWidth: '48ch' }}>
                Dava dosyalarınızı AyrisLegal&apos;a yükleyin, sizin için hepsini saniyeler içinde okuyup analiz etsin, hazırlamasını isteyeceğiniz dilekçelerinizi Türk hukuk sistemine özel eğitilmiş yapay zekasıyla hazırlasın.
              </p>
              <span style={{ display: 'inline-flex', fontSize: '12.5px', fontWeight: 700, padding: '8px 16px', borderRadius: '999px', background: 'rgba(255,255,255,0.2)' }}>🌐 Türk Hukukuna Özel Yapay Zeka</span>
            </div>
          </Reveal>
          <Reveal delay={0.06}>
            <div className="feature-card" style={{ height: '100%' }}>
              <div style={{ fontSize: '24px', marginBottom: '14px' }}>📝</div>
              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '20px', margin: '0 0 10px' }}>Dilekçe Asistanı</h3>
              <p style={{ fontSize: '14px', lineHeight: 1.65, color: T.inkSoft, margin: 0 }}>
                Dava dosyanızdaki belgeleri, analizleri ve içtihat araştırmalarını bağlam olarak ekleyin, eşi benzeri olmayan profesyonellikte dilekçeler hazırlayın.
              </p>
            </div>
          </Reveal>
        </div>
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '20px' }}>
          <Reveal>
            <div className="feature-card">
              <div style={{ fontSize: '24px', marginBottom: '14px' }}>⚖️</div>
              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>Akıllı İçtihat Arama</h3>
              <p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
                Sizin için en alakalı sonuçları bulur, okur, aramanızla alakalı kararları belirler ve bunlarla kapsamlı bir içtihat raporu oluşturur.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.06}>
            <div className="feature-card">
              <div style={{ fontSize: '24px', marginBottom: '14px' }}>📂</div>
              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>UDF &amp; PDF Desteği</h3>
              <p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: '0 0 12px' }}>
                UYAP formatındaki (UDF) dosyalarınızı doğrudan yükleyin. Otomatik OCR ve sınıflandırma.
              </p>
              <span className="pill-badge" style={{ background: T.navySoft, color: T.navy, fontSize: '11.5px' }}>🧩 UYAP Chrome Eklentisi</span>
            </div>
          </Reveal>
          <Reveal delay={0.12}>
            <div className="feature-card">
              <div style={{ fontSize: '24px', marginBottom: '14px' }}>🎯</div>
              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>Dava Stratejisi ve Simülatör</h3>
              <p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
                Mahkemeye çıkmadan önce yapay zekanın &quot;Hakim&quot;, &quot;Savcı&quot; ya da &quot;Karşı Taraf Avukatı&quot; rolüne girdiği bir simülasyonla savunmanızı önceden deneyimleyin.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ══════════════════════════════ GÜVEN ═══════════════════════════ */}
      <section style={{ background: T.navy, color: '#fff', padding: 'clamp(48px,8vw,96px) 0' }}>
        <div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
          <Reveal>
            <div style={{ textAlign: 'center', marginBottom: '48px' }}>
              <h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', margin: '0 0 12px' }}>Dosyalarınız Sizin Kalır</h2>
              <p style={{ fontSize: '15px', color: 'rgba(255,255,255,0.65)', maxWidth: '60ch', margin: '0 auto' }}>
                Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal&apos;ı bu bilinçle kuruyoruz.
              </p>
            </div>
          </Reveal>
          <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '16px' }}>
            {[
              { icon: '🔒', title: 'Yerel Şifreli Saklama', desc: 'Hassas veriler işletim sisteminizin kendi güvenli katmanıyla şifrelenir.' },
              { icon: '☁️', title: 'Kendi Drive’ınıza Yedekleme', desc: 'Yedekleme bizim sunucularımıza değil, sizin Drive hesabınıza yapılır.' },
              { icon: '🚫', title: 'Sadece Sizin Analiziniz', desc: 'Belgeleriniz başka kullanıcılarla paylaşılmaz.' },
              { icon: '✅', 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 style={{ borderRadius: '18px', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', padding: '22px' }}>
                  <div style={{ fontSize: '22px', marginBottom: '12px' }}>{item.icon}</div>
                  <h3 style={{ fontFamily: T.fontHead, fontWeight: 700, fontSize: '14.5px', margin: '0 0 8px' }}>{item.title}</h3>
                  <p style={{ fontSize: '12.5px', lineHeight: 1.6, color: 'rgba(255,255,255,0.6)', margin: 0 }}>{item.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════ FİYATLANDIRMA ═══════════════════ */}
      <section id="fiyatlandirma" style={{ maxWidth: '1100px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: '20px' }}>
            <h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', margin: '0 0 12px' }}>İhtiyacınıza Uygun Modeller</h2>
            <p style={{ fontSize: '15px', color: T.inkSoft }}>Basit, şeffaf fiyatlandırma — gizli ücret yok.</p>
          </div>
        </Reveal>
        <Reveal delay={0.05}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '36px' }}>
            <div style={{ display: 'inline-flex', padding: '4px', borderRadius: '999px', background: T.navySoft, gap: '4px' }}>
              <button onClick={() => setPricingYearly(true)} style={{ border: 'none', cursor: 'pointer', padding: '9px 18px', borderRadius: '999px', fontSize: '13.5px', fontWeight: 700, background: pricingYearly ? '#fff' : 'transparent', color: pricingYearly ? T.ink : T.inkSoft, boxShadow: pricingYearly ? '0 2px 8px rgba(11,18,32,0.1)' : 'none' }}>Yıllık</button>
              <button onClick={() => setPricingYearly(false)} style={{ border: 'none', cursor: 'pointer', padding: '9px 18px', borderRadius: '999px', fontSize: '13.5px', fontWeight: 700, background: !pricingYearly ? '#fff' : 'transparent', color: !pricingYearly ? T.ink : T.inkSoft, boxShadow: !pricingYearly ? '0 2px 8px rgba(11,18,32,0.1)' : 'none' }}>Aylık bilgi al</button>
            </div>
          </div>
        </Reveal>
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '24px' }}>
          <Reveal delay={0.08}>
            <div style={{ borderRadius: '24px', border: `1.5px solid ${T.border}`, padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column' }}>
              <p style={{ margin: 0, fontSize: '13px', fontWeight: 700, color: T.orange }}>BİREYSEL AVUKAT</p>
              <p style={{ margin: '10px 0 0', fontFamily: T.fontHead, fontWeight: 800, fontSize: '44px' }}>{pricingYearly ? '40.000 ₺' : 'Bilgi Al'}<span style={{ fontSize: '15px', fontWeight: 500, color: T.inkFaint }}>{pricingYearly ? ' / yıl' : ''}</span></p>
              <p style={{ fontSize: '14px', color: T.inkSoft, margin: '16px 0 0' }}>Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.</p>
              <div style={{ borderTop: `1px solid ${T.border}`, margin: '24px 0' }} />
              <ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px' }}>
                {['Sınırsız dosya analizi', 'AI tartışma ortağı', 'İçtihat arama', 'Dilekçe taslağı üretimi'].map(item => (
                  <li key={item} style={{ display: 'flex', gap: '10px', fontSize: '14px', alignItems: 'center' }}>
                    <span style={{ color: T.green, fontWeight: 800 }}>✓</span>{item}
                  </li>
                ))}
              </ul>
              <a href="#iletisim" className="btn-outline" style={{ marginTop: 'auto', width: '100%' }}>Ücretsiz Deneyin</a>
            </div>
          </Reveal>
          <Reveal delay={0.14}>
            <div style={{ borderRadius: '24px', border: `1.5px solid ${T.orange}`, padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative', background: T.orangeSoft }}>
              <span style={{ position: 'absolute', top: '-12px', left: '32px', fontSize: '11px', fontWeight: 700, padding: '5px 14px', borderRadius: '999px', background: T.orange, color: '#fff' }}>Ekip Çalışması</span>
              <p style={{ margin: 0, fontSize: '13px', fontWeight: 700, color: T.orangeDark }}>HUKUK BÜROSU</p>
              <p style={{ margin: '10px 0 0', fontFamily: T.fontHead, fontWeight: 800, fontSize: '32px' }}>Özel Fiyatlandırma</p>
              <p style={{ fontSize: '14px', color: T.inkSoft, margin: '16px 0 0' }}>Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.</p>
              <div style={{ borderTop: `1px solid rgba(11,18,32,0.15)`, margin: '24px 0' }} />
              <ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px' }}>
                {['Tüm bireysel özellikler', 'Ekip içi dosya paylaşımı', 'Ortak içtihat havuzu', 'Kurucu ekiple özel destek'].map(item => (
                  <li key={item} style={{ display: 'flex', gap: '10px', fontSize: '14px', alignItems: 'center' }}>
                    <span style={{ color: T.orangeDark, fontWeight: 800 }}>✓</span>{item}
                  </li>
                ))}
              </ul>
              <a href="#iletisim" className="btn-primary" style={{ marginTop: 'auto', width: '100%' }}>İletişime Geçin</a>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ══════════════════════════════ SSS ══════════════════════════════ */}
      <section id="sss" style={{ maxWidth: '1000px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
        <Reveal>
          <h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', textAlign: 'center', margin: '0 0 40px' }}>Muhtemelen Bunları Soracaksınız</h2>
        </Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
          {[
            { 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 style={{ borderRadius: '18px', border: `1px solid ${T.border}`, padding: '22px 24px' }}>
                <h3 style={{ fontFamily: T.fontHead, fontWeight: 700, fontSize: '16px', margin: '0 0 8px' }}>{item.q}</h3>
                <p style={{ fontSize: '14px', lineHeight: 1.65, color: T.inkSoft, margin: 0 }}>{item.a}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ══════════════════════════════ İLETİŞİM ═════════════════════════ */}
      <section id="iletisim" style={{ background: T.bgSoft, padding: 'clamp(48px,8vw,96px) 0' }}>
        <div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
          <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: '48px', alignItems: 'start' }}>
            <Reveal>
              <div>
                <h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(24px,3vw,32px)', margin: '0 0 14px' }}>
                  Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
                </h2>
                <p style={{ fontSize: '14.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
                  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 style={{ listStyle: 'none', margin: '26px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
                  {['Formu doldurun', 'Kurucu ekipten biri sizi arar', '15 dakikalık canlı demoda dosyanızla test edersiniz'].map((step, i) => (
                    <li key={step} style={{ display: 'flex', gap: '10px', fontSize: '14px', color: T.inkSoft, alignItems: 'center' }}>
                      <span style={{ width: 22, height: 22, borderRadius: '50%', background: T.orange, color: '#fff', fontSize: '11px', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{i + 1}</span>
                      {step}
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
            <Reveal delay={0.08}>
              <ContactFormV2 />
            </Reveal>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════ FOOTER ═══════════════════════════ */}
      <footer style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px clamp(20px,6vw,72px)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px', fontSize: '13px', color: T.inkFaint, borderTop: `1px solid ${T.border}` }}>
        <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" style={{ color: T.inkFaint }}>Created by ayris.tech</a>
      </footer>
    </div>
  )
}