'use client'

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

/* ─── Design system tokens (Industrial / Swiss Print) ─────────────────── */
const T = {
  bg:        '#F4F4F0',
  ink:       '#0A0A0A',
  inkSoft:   'rgba(10,10,10,0.6)',
  inkFaint:  'rgba(10,10,10,0.38)',
  red:       '#E61919',
  divider:   'rgba(10,10,10,0.16)',
  dividerHv: 'rgba(10,10,10,0.9)',
  fontHead:  '"Archivo", sans-serif',
  fontMono:  '"JetBrains Mono", monospace',
}

/* ─── Reveal animation ─────────────────────────────────────────────────── */
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: '-80px' })
  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 16 }}
      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
      transition={{ duration: 0.45, ease: 'easeOut', delay }}
      className={className}
    >
      {children}
    </motion.div>
  )
}

/* ─── Rail nav ──────────────────────────────────────────────────────────── */
const RAIL_ITEMS = [
  { id: '02', href: '#is-akisi' },
  { id: '03', href: '#farklilasim' },
  { id: '04', href: '#ozellikler' },
  { id: '05', href: '#fiyatlandirma' },
  { id: '06', href: '#guven' },
  { id: '07', href: '#iletisim' },
]

/* ─── Component ─────────────────────────────────────────────────────────── */
export default function HomePage() {
  return (
    <div style={{ background: T.bg, color: T.ink, fontFamily: T.fontMono, minHeight: '100vh', position: 'relative' }}>

      {/* ── Inline fonts + global rules ── */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
        * { box-sizing: border-box; border-radius: 0 !important; }
        body { margin: 0; }
        a { color: ${T.red}; }
        :focus-visible { outline: 2px solid ${T.red}; outline-offset: 2px; }
        ::selection { background: ${T.red}; color: #fff; }
        .rail-link { text-decoration: none; writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.14em; font-family: ${T.fontMono}; font-weight: 600; }
        .hr-line { height: 1px; border: 0; background: ${T.divider}; margin: 0; }
        .hr-line-hv { height: 2px; border: 0; background: ${T.ink}; margin: 0; }
        .doc-label { display: inline-flex; align-items: center; gap: 8px; font-family: ${T.fontMono}; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: ${T.ink}; }
        .doc-label .bullet { width: 7px; height: 7px; background: ${T.red}; flex-shrink: 0; }
        .btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: ${T.fontMono}; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: ${T.ink}; border: 2px solid ${T.ink}; padding: 14px 22px; transition: background .12s, color .12s; }
        .btn-solid:hover { background: ${T.red}; border-color: ${T.red}; }
        .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: ${T.fontMono}; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: ${T.ink}; background: transparent; border: 2px solid ${T.ink}; padding: 14px 22px; transition: background .12s, color .12s; }
        .btn-outline:hover { background: ${T.ink}; color: #fff; }
        .btn-solid-lg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: ${T.fontMono}; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: ${T.ink}; border: 2px solid ${T.ink}; padding: 16px; width: 100%; transition: background .12s; }
        .btn-solid-lg:hover { background: ${T.red}; border-color: ${T.red}; }
        .nav-link { color: ${T.ink}; text-decoration: none; font-size: 12px; font-family: ${T.fontMono}; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
        .nav-link:hover { color: ${T.red}; }
        .grid-1px { display: grid; background: ${T.divider}; gap: 1px; }
        .grid-cell { background: ${T.bg}; }
        .card-kicker { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: ${T.red}; font-family: ${T.fontMono}; font-weight: 700; }
        .card-title { font-family: ${T.fontHead}; font-weight: 900; font-size: 19px; line-height: 1.08; margin: 0; text-transform: uppercase; letter-spacing: -0.01em; }
        .card-body { margin: 0; font-size: 13px; opacity: 0.72; line-height: 1.55; font-family: ${T.fontMono}; }
        .field > label { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; color: ${T.inkSoft}; font-family: ${T.fontMono}; font-weight: 600; }
        .tag-outline { display: inline-flex; align-items: center; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid ${T.red}; color: ${T.red}; font-family: ${T.fontMono}; font-weight: 700; }
        .noise::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.025; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
        @media (max-width: 900px) { .rail-fixed { display: none !important; } .hero-badges { display: none !important; } .card-grid { grid-template-columns: 1fr !important; } }
        @media (max-width: 700px) { .hero-two-col { grid-template-columns: 1fr !important; } .contact-two-col { grid-template-columns: 1fr !important; } .stats-grid { grid-template-columns: repeat(2,1fr) !important; } }
      `}</style>

      <div className="noise" />

      {/* ── Left rail ── */}
      <div
        className="rail-fixed"
        style={{ position: 'fixed', left: '22px', top: 0, bottom: 0, width: '22px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '24px', zIndex: 20 }}
      >
        {RAIL_ITEMS.map(item => (
          <a key={item.id} href={item.href} className="rail-link" style={{ color: T.inkFaint }}
            onMouseEnter={e => { e.currentTarget.style.color = T.red }}
            onMouseLeave={e => { e.currentTarget.style.color = T.inkFaint }}
          >
            {item.id}
          </a>
        ))}
      </div>

      {/* ══════════════════════════════ NAV ═════════════════════════════ */}
      <nav style={{
        position: 'sticky', top: 0, zIndex: 30,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: '16px',
        padding: '18px clamp(20px,6vw,64px)',
        borderBottom: `2px solid ${T.ink}`,
        background: T.bg,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <img src="/logo.png" alt="AyrisLegal" style={{ height: '22px', width: 'auto', objectFit: 'contain' }} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '28px', flexWrap: 'wrap' }}>
          <a href="#farklilasim" className="nav-link">Farklılaşım</a>
          <a href="#ozellikler" className="nav-link">Özellikler</a>
          <a href="#fiyatlandirma" className="nav-link">Fiyatlandırma</a>
          <a href="#iletisim" className="btn-solid">Demo Talep Et</a>
        </div>
      </nav>

      {/* ══════════════════════════════ HERO ════════════════════════════ */}
      <section style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px) clamp(48px,7vw,72px)', position: 'relative' }}>
        <Reveal>
          <span className="doc-label" style={{ marginBottom: '28px' }}>
            <span className="bullet" />
            DOC-01 // DEĞER ÖNERMESİ
          </span>
        </Reveal>
        <div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,7fr) minmax(0,5fr)', gap: '48px', alignItems: 'start' }}>
          <div>
            <Reveal delay={0.04}>
              <h1 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(42px,7vw,88px)', lineHeight: 0.92, letterSpacing: '-0.03em', textTransform: 'uppercase', margin: 0 }}>
                <span style={{ display: 'block' }}>DOSYANIZI OKUR,</span>
                <span style={{ display: 'block' }}>SİZİNLE <span style={{ color: T.red }}>TARTIŞIR.</span></span>
              </h1>
            </Reveal>
            <Reveal delay={0.08}>
              <p style={{ fontSize: 'clamp(15px,1.4vw,17px)', lineHeight: 1.7, maxWidth: '54ch', margin: '28px 0 0', color: T.inkSoft }}>
                AyrisLegal, yüklediğiniz dava dosyasını analiz eden, içtihat bulan ve dilekçe taslağı çıkaran bir yapay zeka çalışma ortağı — pasif bir arama motoru değil, dosya üzerinde sizinle muhakeme eden bir meslektaş.
              </p>
            </Reveal>
            <Reveal delay={0.12}>
              <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginTop: '32px', alignItems: 'center' }}>
                <a href="#iletisim" className="btn-solid" style={{ fontSize: '13.5px', padding: '15px 26px' }}>Demo Talep Et</a>
                <a href="#farklilasim" className="btn-outline" style={{ fontSize: '13.5px', padding: '15px 26px' }}>Nasıl Çalışır ↓</a>
              </div>
              <p style={{ fontSize: '11.5px', letterSpacing: '0.05em', textTransform: 'uppercase', marginTop: '22px', color: T.inkFaint }}>
                &gt;&gt;&gt; Şu an erken erişim aşamasındayız — kurucu ekiple doğrudan görüşün.
              </p>
            </Reveal>
          </div>

          {/* Hero right: process log panel */}
          <Reveal delay={0.1}>
            <div style={{ border: `2px solid ${T.ink}`, background: '#fff' }}>
              <div style={{ borderBottom: `2px solid ${T.ink}`, padding: '10px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: '10.5px', letterSpacing: '0.12em', fontWeight: 700 }}>PROCESS LOG</span>
                <span style={{ fontSize: '10.5px', color: T.red, fontWeight: 700 }}>● LIVE</span>
              </div>
              <div style={{ padding: '18px', display: 'flex', flexDirection: 'column', gap: '2px' }}>
                {[
                  { t: '00:01', s: 'DOSYA YÜKLENDİ', done: true },
                  { t: '00:04', s: 'AI ANALİZ EDİYOR…', done: true },
                  { t: '00:09', s: 'ARGÜMAN DEĞERLENDİRMESİ', done: true },
                  { t: '00:13', s: 'EMSAL: YARGITAY 2024/1234', done: true },
                  { t: '00:21', s: 'DİLEKÇE TASLAĞI OLUŞTURULDU', done: true, final: true },
                ].map((row, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '9px 10px', background: row.final ? T.ink : 'transparent', color: row.final ? '#fff' : T.ink }}>
                    <span style={{ fontSize: '10.5px', opacity: row.final ? 0.7 : 0.4, flexShrink: 0 }}>[{row.t}]</span>
                    <span style={{ fontSize: '11.5px', letterSpacing: '0.03em', flex: 1 }}>{row.s}</span>
                    <span style={{ fontSize: '10px', color: row.final ? '#fff' : T.red, fontWeight: 700, flexShrink: 0 }}>{row.final ? 'OK' : '✓'}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ══════════════════════════════ STATS ═══════════════════════════ */}
      <section className="grid-1px stats-grid" style={{ maxWidth: '1280px', margin: '0 auto', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `2px solid ${T.ink}`, borderBottom: `2px solid ${T.ink}` }}>
        {[
          { value: '01',        label: 'SABİT FİYAT, TÜM AVUKATLARA' },
          { value: '40.000 ₺',  label: 'YILLIK, GİZLİ ÜCRET YOK' },
          { value: '5',          label: 'MAHKEME KAYNAĞI TEK EKRANDA' },
          { value: '7/24',      label: 'DOSYANIZLA ÇALIŞAN ORTAK' },
        ].map((s) => (
          <div key={s.label} className="grid-cell" style={{ padding: '30px 20px', textAlign: 'center' }}>
            <div style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(28px,3.6vw,40px)', letterSpacing: '-0.02em' }}>{s.value}</div>
            <div style={{ fontSize: '10.5px', marginTop: '8px', letterSpacing: '0.08em', color: T.inkSoft }}>{s.label}</div>
          </div>
        ))}
      </section>

      {/* ══════════════════════════════ PROBLEM ═════════════════════════ */}
      <section id="is-akisi" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,8vw,88px) clamp(20px,6vw,72px)' }}>
        <Reveal>
          <span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-02 // BUGÜNÜN İŞ AKIŞI</span>
          <h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 40px', letterSpacing: '-0.02em', textTransform: 'uppercase', maxWidth: '22ch' }}>
            Dosya, arama, şablon, tekrar.
          </h2>
        </Reveal>
        <div className="grid-1px" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', borderTop: `2px solid ${T.ink}` }}>
          <Reveal delay={0.03}>
            <div className="grid-cell" style={{ padding: '30px 28px' }}>
              <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, textDecoration: 'line-through', textDecorationThickness: '2px' }}>01 / BUGÜN</span>
              <p style={{ fontSize: '14px', lineHeight: 1.75, margin: '14px 0 0', color: T.inkSoft }}>
                Dosya incelemesi bir programda, içtihat araması ayrı bir siteye açılan sekmede, dilekçe taslağı eski bir Word şablonunda. Her adımda bağlam yeniden kurulur, saatler kaybolur.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.06}>
            <div className="grid-cell" style={{ padding: '30px 28px' }}>
              <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em' }}>02 / AYRISLEGAL İLE</span>
              <p style={{ fontSize: '14px', lineHeight: 1.75, margin: '14px 0 0', color: T.inkSoft }}>
                Tek bir çalışma alanı: dosyanızı yükleyin, AyrisLegal ile tartışın, içtihat bulun, dilekçe taslağı üretin — hepsi aynı ekranda, bağlamı hiç kaybetmeden.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ══════════════════════════════ DIFFERENTIATOR ══════════════════ */}
      <section id="farklilasim" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
        <Reveal>
          <span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-03 // TARTIŞMA ODAKLI YAPAY ZEKA</span>
        </Reveal>
        <div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '48px', alignItems: 'start', marginTop: '20px' }}>
          <Reveal delay={0.04}>
            <div>
              <h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(24px,2.8vw,36px)', margin: '0 0 18px', letterSpacing: '-0.02em', textTransform: 'uppercase', maxWidth: '16ch' }}>
                Bulmakla yetinmez, tartışır.
              </h2>
              <p style={{ fontSize: '14px', lineHeight: 1.75, margin: '0 0 16px', maxWidth: '46ch', color: T.inkSoft }}>
                Çoğu hukuk yazılımı özet çıkarır ya da anahtar kelimeyle arar. AyrisLegal dosyanızdaki argümanı okur, zayıf noktasını sorar, karşı görüş üretir, sizi ikna etmeye çalışır — ya da ikna olur.
              </p>
              <p style={{ fontSize: '11px', margin: 0, color: T.inkFaint, letterSpacing: '0.02em' }}>
                &gt;&gt;&gt; Aşağıdaki panel, bu tartışmanın nasıl göründüğünü gösteren temsili bir tasarımdır.
              </p>
            </div>
          </Reveal>

          {/* Chat simulation as terminal transcript */}
          <Reveal delay={0.08}>
            <div style={{ border: `2px solid ${T.ink}`, background: '#fff', padding: '20px', display: 'flex', flexDirection: 'column', gap: '2px', fontSize: '13px', lineHeight: 1.6 }}>
              <div style={{ padding: '12px 14px', borderBottom: `1px solid ${T.divider}` }}>
                <span style={{ color: T.inkFaint, fontSize: '10.5px', letterSpacing: '0.08em' }}>[AVUKAT]</span>
                <p style={{ margin: '6px 0 0' }}>Müvekkilin haklı olduğunu düşünüyorum, mülkiyet devri geçerli.</p>
              </div>
              <div style={{ padding: '12px 14px', borderBottom: `1px solid ${T.divider}`, background: 'rgba(230,25,25,0.04)' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span style={{ color: T.red, fontSize: '10.5px', letterSpacing: '0.08em', fontWeight: 700 }}>[AYRISLEGAL // İTİRAZ]</span>
                </span>
                <p style={{ margin: '6px 0 0' }}>Devir tarihinde tapuda şerh var — bu, iyi niyet iddianızı zayıflatabilir. Şerhin kaldırılış tarihini kontrol ettiniz mi?</p>
              </div>
              <div style={{ padding: '12px 14px' }}>
                <span style={{ color: T.inkFaint, fontSize: '10.5px', letterSpacing: '0.08em' }}>[AVUKAT]</span>
                <p style={{ margin: '6px 0 0' }}>Haklısınız — 3 emsal kararla bu noktayı destekleyelim.</p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ══════════════════════════════ FEATURES ════════════════════════ */}
      <section id="ozellikler" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
        <Reveal>
          <span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-04 // PLATFORM</span>
          <h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 14px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
            Bir avukatın ihtiyaç duyduğu şeyler.
          </h2>
          <p style={{ fontSize: '14px', lineHeight: 1.7, maxWidth: '58ch', margin: '0 0 8px', color: T.inkSoft }}>
            Dosyayı yükleyin — gerisini AyrisLegal üstlenir: okur, çapraz sorgular, strateji kurar, içtihat bulur, dilekçeyi yazar.
          </p>
        </Reveal>

        {/* — 04.1 Dosya Analizi — */}
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
            <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.1</span>
            <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>Dosya Analizi</span>
            <span style={{ flex: 1, height: '1px', background: T.divider }} />
          </div>
        </Reveal>
        <div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${T.divider}` }}>
          <Reveal>
            <div className="grid-cell card" style={{ gridColumn: 'span 2', padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">ÇELİŞKİ AVCISI 🚨</span>
              <h3 className="card-title" style={{ fontSize: '22px' }}>İfadeleri çapraz sorgular</h3>
              <p className="card-body">Özellikle ceza dosyalarında: müşteki, sanık ve tanıkların karakol, savcılık ve mahkeme aşamalarındaki beyanlarını karşılaştırır, çelişen ifadeleri kırmızı alarmla işaretler.</p>
            </div>
          </Reveal>
          <Reveal delay={0.03}>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">DOSYA ÖZETİ</span>
              <h3 className="card-title">Yüzlerce sayfayı tek raporda toplar</h3>
              <p className="card-body">Tüm iddia, savunma ve delilleri birleştirip olay örgüsü, yargılama süreci ve son durumu anlatan yapılandırılmış bir rapor çıkarır.</p>
            </div>
          </Reveal>
          <Reveal delay={0.06}>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">DOSYA RÖNTGENİ</span>
              <h3 className="card-title">Gözden kaçanı bulur</h3>
              <p className="card-body">Olası usul eksikliklerini, zamanaşımı risklerini ve toplanmamış delilleri tarar.</p>
            </div>
          </Reveal>
          <Reveal delay={0.09}>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">DAVA STRATEJİSİ</span>
              <h3 className="card-title">Yol haritası çıkarır</h3>
              <p className="card-body">Zayıf noktalar, karşı tarafın açıkları, usul hataları ve talep edilmesi gereken deliller için müvekkile özel strateji üretir.</p>
            </div>
          </Reveal>
          <Reveal delay={0.12}>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">MÜZAKERE VE ARABULUCULUK</span>
              <h3 className="card-title">Pazarlık marjını hesaplar</h3>
              <p className="card-body">Kazanma/kaybetme olasılığını, yargılama masrafı, süre ve riskleri değerlendirip arabuluculuk için en mantıklı marjı sunar.</p>
            </div>
          </Reveal>
        </div>

        {/* — 04.2 Otomasyon ve Araçlar — */}
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
            <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.2</span>
            <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>Otomasyon ve Araçlar</span>
            <span style={{ flex: 1, height: '1px', background: T.divider }} />
          </div>
        </Reveal>
        <div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)', border: `1px solid ${T.divider}` }}>
          <Reveal>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">TAKVİM &amp; SÜRELER</span>
              <h3 className="card-title">Kesin süreleri kaçırmazsınız</h3>
              <p className="card-body">Duruşma tarihlerini ve kesin süreleri (cevap dilekçesi, istinaf vb.) dosyadan tespit edip takvime işler ve takibini yapar.</p>
            </div>
          </Reveal>
          <Reveal delay={0.03}>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">DİLEKÇE HAZIRLAMA</span>
              <h3 className="card-title">Tek tıkla hazır taslak</h3>
              <p className="card-body">Süre tutum, mazeret ve vekaletname sunma dilekçelerini saniyeler içinde hazırlar; hepsi &quot;Dilekçeler&quot; sekmesinde arşivlenir ve anında düzenlenebilir.</p>
            </div>
          </Reveal>
        </div>

        {/* — 04.3 İnteraktif Yapay Zeka — */}
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
            <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.3</span>
            <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>İnteraktif Yapay Zeka</span>
            <span style={{ flex: 1, height: '1px', background: T.divider }} />
          </div>
        </Reveal>
        <div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${T.divider}` }}>
          <Reveal>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">AYRISLEGAL&apos;E SOR</span>
              <h3 className="card-title">Dosyaya özel sohbet</h3>
              <p className="card-body">&quot;İddianamede bahsedilen bıçak kime aitmiş?&quot; gibi dosyaya özel sorularınızı, tüm evrakların bağlamını bilen bir chat bot yanıtlar.</p>
            </div>
          </Reveal>
          <Reveal delay={0.03}>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">DİJİTAL STAJYER</span>
              <h3 className="card-title">Uzun soluklu görevler devreder</h3>
              <p className="card-body">Sanal bir hukuk stajyerine görev verir gibi, araştırma ve metin yazım görevlerini AyrisLegal&apos;a atayabilirsiniz.</p>
            </div>
          </Reveal>
          <Reveal delay={0.06}>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">SİMÜLATÖR</span>
              <h3 className="card-title">Duruşma provası yapar</h3>
              <p className="card-body">Mahkemeye çıkmadan önce yapay zeka &quot;Hakim&quot;, &quot;Savcı&quot; veya &quot;Karşı Taraf Avukatı&quot; rolüne girer; savunmanızı olası sorulara karşı önceden dener.</p>
            </div>
          </Reveal>
        </div>

        {/* — 04.4 İçtihat Araştırma — */}
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
            <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.4</span>
            <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>İçtihat Araştırma</span>
            <span style={{ flex: 1, height: '1px', background: T.divider }} />
          </div>
        </Reveal>
        <div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${T.divider}` }}>
          <Reveal>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">SEMANTİK EMSAL ARAMA</span>
              <h3 className="card-title">Anlamla arar, kelimeyle değil</h3>
              <p className="card-body">Anahtar kelime eşleşmesinin ötesinde, vektörel arama ile konuya en uygun Yargıtay, Danıştay ve BAM kararlarını getirir.</p>
            </div>
          </Reveal>
          <Reveal delay={0.03}>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">MAHKEME FİLTRELERİ</span>
              <h3 className="card-title">Kaynağa göre daraltır</h3>
              <p className="card-body">Aramaları Yargıtay, Bölge Adliye Mahkemesi, AYM gibi belirli kurumlara göre filtreler.</p>
            </div>
          </Reveal>
          <Reveal delay={0.06}>
            <div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <span className="card-kicker">HIZLI KOPYALAMA</span>
              <h3 className="card-title">Dilekçeye anında aktarır</h3>
              <p className="card-body">Okuma ekranındaki kararlar veya bölümler tek tıkla kopyalanıp dilekçelere entegre edilir.</p>
            </div>
          </Reveal>
        </div>

        {/* — 04.5 UYAP Entegrasyonu — */}
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
            <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.5</span>
            <span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>UYAP Entegrasyonu</span>
            <span style={{ flex: 1, height: '1px', background: T.divider }} />
          </div>
        </Reveal>
        <Reveal delay={0.03}>
          <div style={{ border: `1px solid ${T.divider}`, padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
            <span className="card-kicker">CHROME EKLENTİSİ</span>
            <h3 className="card-title" style={{ fontSize: '20px' }}>Manuel indir-yükle derdi yok</h3>
            <p className="card-body" style={{ maxWidth: '70ch' }}>
              AyrisLegal, bir web eklentisi aracılığıyla doğrudan UYAP portalıyla haberleşir: taraf bilgilerini, mahkeme bilgilerini, esas numarasını ve safahatı otomatik çeker.
              Evraklar UYAP üzerinden okunup doğrudan AyrisLegal&apos;a aktarılır; arka planda OCR ile içerikleri metne dönüştürülüp yapay zekanın analiz edebileceği hale getirilir.
            </p>
          </div>
        </Reveal>
      </section>

      {/* ══════════════════════════════ PRICING ═════════════════════════ */}
      <section id="fiyatlandirma" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
        <Reveal>
          <span className="doc-label" style={{ justifyContent: 'center', marginBottom: '20px', display: 'flex' }}><span className="bullet" />DOC-05 // FİYATLANDIRMA</span>
          <h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 40px', textAlign: 'center', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
            İhtiyacınıza uygun modeller.
          </h2>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '24px', maxWidth: '960px', margin: '0 auto' }}>

          {/* ── Bireysel ── */}
          <Reveal delay={0.05}>
            <div style={{ display: 'flex', border: `2px solid ${T.ink}`, height: '100%' }}>
              <div style={{ width: '32px', background: T.ink, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', padding: '20px 0' }}>
                {['01','02','03','04','05'].map(t => (
                  <span key={t} style={{ fontSize: '10px', color: '#fff', writingMode: 'vertical-rl', fontFamily: T.fontMono, fontWeight: 700 }}>{t}</span>
                ))}
              </div>
              <div style={{ flex: 1, padding: '36px 32px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
                <p style={{ margin: 0, fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(38px,4.6vw,50px)', lineHeight: 1, letterSpacing: '-0.02em' }}>40.000 ₺</p>
                <p style={{ margin: '8px 0 0', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', color: T.inkSoft }}>Bireysel Avukat / Yıl</p>
                <p style={{ fontSize: '13.5px', lineHeight: 1.65, margin: '18px auto 0', color: T.inkSoft }}>
                  Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.
                </p>
                <hr className="hr-line" style={{ margin: '22px 0' }} />
                <ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '11px', textAlign: 'left' }}>
                  {['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: '13px' }}>
                      <span style={{ color: T.red, fontWeight: 700, flexShrink: 0 }}>&gt;</span>
                      {item}
                    </li>
                  ))}
                </ul>
                <a href="#iletisim" className="btn-solid-lg" style={{ marginTop: '24px' }}>Demo Talep Et</a>
              </div>
            </div>
          </Reveal>

          {/* ── Büro ── */}
          <Reveal delay={0.1}>
            <div style={{ display: 'flex', border: `2px solid ${T.ink}`, height: '100%', position: 'relative' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, background: T.red, color: '#fff', fontSize: '10.5px', letterSpacing: '0.12em', textTransform: 'uppercase', textAlign: 'center', padding: '5px', fontFamily: T.fontMono, fontWeight: 700 }}>Ekip Çalışması</div>
              <div style={{ width: '32px', background: T.ink, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', padding: '38px 0 20px' }}>
                {['01','02','03','04','05'].map(t => (
                  <span key={t} style={{ fontSize: '10px', color: '#fff', writingMode: 'vertical-rl', fontFamily: T.fontMono, fontWeight: 700 }}>{t}</span>
                ))}
              </div>
              <div style={{ flex: 1, padding: '52px 32px 36px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
                <p style={{ margin: '4px 0 0', fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(28px,3.6vw,38px)', lineHeight: 1.1, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>Hukuk Bürosu</p>
                <p style={{ margin: '10px 0 0', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', color: T.inkSoft }}>Özel Fiyatlandırma</p>
                <p style={{ fontSize: '13.5px', lineHeight: 1.65, margin: '18px auto 0', color: T.inkSoft }}>
                  Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.
                </p>
                <hr className="hr-line" style={{ margin: '22px 0' }} />
                <ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '11px', textAlign: 'left' }}>
                  {['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: '13px' }}>
                      <span style={{ color: T.red, fontWeight: 700, flexShrink: 0 }}>&gt;</span>
                      {item}
                    </li>
                  ))}
                </ul>
                <a href="#iletisim" className="btn-solid-lg" style={{ marginTop: '24px', background: T.red, borderColor: T.red }}
                  onMouseEnter={e => (e.currentTarget.style.background = T.ink)}
                  onMouseLeave={e => (e.currentTarget.style.background = T.red)}
                >İletişime Geçin</a>
              </div>
            </div>
          </Reveal>

        </div>
      </section>

      {/* ══════════════════════════════ TRUST ═══════════════════════════ */}
      <section id="guven" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
        <Reveal>
          <span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-06 // GÜVEN VE VERİ GÜVENLİĞİ</span>
          <h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 14px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
            Dosyalarınız sizin kalır.
          </h2>
          <p style={{ fontSize: '13.5px', lineHeight: 1.7, maxWidth: '60ch', margin: '0 0 36px', color: T.inkSoft }}>
            Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal&apos;ı bu bilinçle kuruyoruz.
          </p>
        </Reveal>
        <div className="grid-1px" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', borderTop: `2px solid ${T.ink}`, borderBottom: `2px solid ${T.ink}` }}>
          {[
            { title: 'YEREL ŞİFRELİ SAKLAMA', desc: 'Lisans ve hassas veriler, işletim sisteminizin kendi güvenli depolama katmanıyla (Keychain / DPAPI) şifrelenir.' },
            { title: 'KENDİ GOOGLE DRIVE’INIZA YEDEKLEME', desc: 'Otomatik yedekleme bizim sunucularımıza değil, sizin kendi Drive hesabınıza yapılır — sadece siz erişebilirsiniz.' },
            { title: 'SADECE SİZİN ANALİZİNİZ İÇİN', desc: 'Yüklediğiniz belgeler başka kullanıcılarla veya üçüncü taraflarla paylaşılmaz.' },
            { title: 'SON KARAR HER ZAMAN SİZDE', desc: 'AyrisLegal bir karar organı değildir — analiz, taslak ve öneri üretir. Mesleki sorumluluk gereği tüm çıktılar imzadan önce sizin incelemenizden geçer.' },
          ].map((item, i) => (
            <Reveal key={item.title} delay={i * 0.05}>
              <div className="grid-cell" style={{ padding: '26px 24px' }}>
                <span style={{ fontSize: '20px', color: T.red, fontWeight: 700, fontFamily: T.fontMono }}>0{i + 1}</span>
                <h3 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: '16px', margin: '10px 0 8px', textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{item.title}</h3>
                <p style={{ fontSize: '13px', lineHeight: 1.6, margin: 0, color: T.inkSoft }}>{item.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ══════════════════════════════ FAQ ══════════════════════════════ */}
      <section id="sss" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
        <Reveal>
          <span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-06.5 // SIK SORULAN SORULAR</span>
          <h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 36px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
            Muhtemelen bunları soracaksınız.
          </h2>
        </Reveal>
        <div className="grid-1px" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', border: `1px solid ${T.divider}` }}>
          {[
            { q: 'Müvekkil dosyalarım nerede saklanıyor, kim görebilir?', a: 'Belgeler yerel şifreli depolamada tutulur, yedekleme bizim değil 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, ihtiyacınıza göre konuşalım.' },
          ].map((item) => (
            <Reveal key={item.q}>
              <div className="grid-cell" style={{ padding: '26px' }}>
                <h3 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: '15px', margin: '0 0 10px', letterSpacing: '-0.01em', lineHeight: 1.3 }}>{item.q}</h3>
                <p style={{ fontSize: '13px', lineHeight: 1.65, margin: 0, color: T.inkSoft }}>{item.a}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ══════════════════════════════ CONTACT ═════════════════════════ */}
      <section id="iletisim" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)' }}>
        <Reveal>
          <span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-07 // ERKEN ERİŞİM</span>
        </Reveal>
        <div className="contact-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '40px', marginTop: '20px' }}>
          <Reveal delay={0.04}>
            <div>
              <h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(22px,2.8vw,32px)', margin: '0 0 14px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
                Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
              </h2>
              <p style={{ fontSize: '13.5px', lineHeight: 1.7, margin: 0, color: T.inkSoft }}>
                AyrisLegal yeni. Sahte ya da ödünç yorumlar yerine dürüst olmayı seçtik: platformu kurucu ekiple birlikte, doğrudan geri bildiriminizle şekillendiriyoruz. Demo talep edin, ilk kullanan avukatlardan biri olun.
              </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: '13px', color: T.inkSoft }}>
                    <span style={{ color: T.red, fontWeight: 700, fontFamily: T.fontMono, flexShrink: 0 }}>0{i + 1}</span>
                    {step}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: '28px', display: 'flex', alignItems: 'center', gap: '14px' }}>
                <div style={{ width: '54px', height: '54px', border: `2px solid ${T.red}`, borderRadius: '50% !important', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: T.fontMono, fontSize: '8px', color: T.red, textAlign: 'center', lineHeight: 1.3, flexShrink: 0, textTransform: 'uppercase', transform: 'rotate(-8deg)', fontWeight: 700 }}>
                  <span style={{ letterSpacing: '0.14em' }}>VERIFIED</span>
                  <span style={{ letterSpacing: '0.14em' }}>FOUNDER</span>
                </div>
                <span style={{ fontSize: '11px', letterSpacing: '0.04em', color: T.inkFaint }}>KURUCU EKİP MÜHRÜ</span>
              </div>
            </div>
          </Reveal>
          <Reveal delay={0.08}>
            <ContactForm />
          </Reveal>
        </div>
      </section>

      {/* ══════════════════════════════ FOOTER ══════════════════════════ */}
      <footer style={{ maxWidth: '1280px', margin: '0 auto', padding: '24px clamp(20px,6vw,72px) 36px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px', fontSize: '11px', letterSpacing: '0.04em', color: T.inkFaint, borderTop: `2px solid ${T.ink}` }}>
        <span>AYRISLEGAL™ — AYRIS TECH&apos;İN BİR ÜRÜNÜDÜR.</span>
        <span>
          © {new Date().getFullYear()} AYRISLEGAL ·{' '}
          <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" style={{ color: T.inkFaint }}>
            CREATED BY AYRIS.TECH
          </a>
        </span>
      </footer>
    </div>
  )
}