import type { Metadata } from 'next'
import Link from 'next/link'
import Image from 'next/image'
import { ArrowLeft, ShieldCheck, Lock, Sparkles, CheckCircle2, Clock } from 'lucide-react'
import ContactForm from '@/components/contact-form'

export const metadata: Metadata = {
  title: 'Demo Talep Edin | AyrisLegal',
  description: 'AyrisLegal kurucu ekibiyle 15 dakikalık birebir canlı demo planlayın. Dava dosyası analizi, çelişki tespiti ve içtihat arama yeteneklerini kendi çalışma pratiğinizde test edin.',
}

export default async function ContactPage({
  params,
}: {
  params: Promise<{ locale: string }>
}) {
  const { locale } = await params

  return (
    <div className="min-h-[100dvh] bg-white text-zinc-900 flex flex-col justify-between">
      {/* ══════════════════════════════ TOP NAV ═════════════════════════════ */}
      <header className="sticky top-0 z-30 border-b border-zinc-100 bg-white/90 px-5 py-4 backdrop-blur-md md:px-16">
        <div className="mx-auto flex max-w-[1400px] items-center justify-between">
          <Link href={`/${locale}`} className="flex items-center gap-2 group">
            <Image src="/logo.png" alt="AyrisLegal" width={120} height={24} className="h-6 w-auto object-contain" priority />
          </Link>
          <Link
            href={`/${locale}`}
            className="inline-flex items-center gap-1.5 text-sm font-semibold text-zinc-600 transition-colors hover:text-zinc-950"
          >
            <ArrowLeft size={15} strokeWidth={2} aria-hidden="true" />
            Ana Sayfaya Dön
          </Link>
        </div>
      </header>

      {/* ══════════════════════════════ MAIN CONTENT ════════════════════════ */}
      <main className="mx-auto w-full max-w-[1280px] px-5 py-12 md:px-16 md:py-20 flex-1">
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-[1.1fr_1fr] lg:gap-16 items-start">
          {/* Sol Kolon: Değer Önerisi ve Güven Taahhütleri */}
          <div>
            <span className="inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-[13px] font-semibold bg-[#FDEEEC] text-[#B8140F]">
              <Sparkles size={14} strokeWidth={2.5} aria-hidden="true" /> Birebir Kurucu Demosu
            </span>
            <h1 className="mt-5 text-[clamp(32px,4.5vw,52px)] font-extrabold leading-[1.08] tracking-tight text-zinc-950">
              Kendi dava dosyalarınızla{' '}
              <span className="text-[#E61919]">15 dakikada</span> test edin.
            </h1>
            <p className="mt-5 max-w-[50ch] text-base leading-relaxed text-zinc-600">
              AyrisLegal genel bir sohbet botu değil; dava dosyalarındaki tanık ve bilirkişi çelişkilerini yakalayan aktif bir düşünce ortağıdır. Formu doldurun, kurucu ekiple canlı demoda büronuza özel ihtiyaçları birlikte inceleyelim.
            </p>

            {/* Adım Adım Süreç */}
            <div className="mt-10 space-y-6 border-t border-zinc-100 pt-8">
              <div className="flex items-start gap-4">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-zinc-100 text-zinc-900 font-bold text-sm font-mono">
                  1
                </div>
                <div>
                  <h2 className="text-sm font-bold text-zinc-900">15 Dakikalık Canlı Demo</h2>
                  <p className="mt-1 text-sm leading-relaxed text-zinc-600">
                    Büronuzun baktığı temel dava türlerine (Kira, Ticaret, İş, Ceza) göre dosya analizi ve çelişki tespitini canlı olarak gösteriyoruz.
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-zinc-100 text-zinc-900 font-bold text-sm font-mono">
                  2
                </div>
                <div>
                  <h2 className="text-sm font-bold text-zinc-900">Pilot Erişim Kurulumu</h2>
                  <p className="mt-1 text-sm leading-relaxed text-zinc-600">
                    Masaüstü (Electron) ve Mobil (Expo) uygulamalarımıza pilot erişim yetkisi tanımlanır.
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-zinc-100 text-zinc-900 font-bold text-sm font-mono">
                  3
                </div>
                <div>
                  <h2 className="text-sm font-bold text-zinc-900">Doğrudan Mühendislik Desteği</h2>
                  <p className="mt-1 text-sm leading-relaxed text-zinc-600">
                    Pilot sürecinde karşılaştığınız her özel format veya içtihat gereksinimi için doğrudan kurucu ekiple iletişimde kalırsınız.
                  </p>
                </div>
              </div>
            </div>

            {/* Güven Güvencesi */}
            <div className="mt-10 rounded-2xl border border-zinc-200/80 bg-zinc-50/80 p-5 flex items-start gap-3.5">
              <ShieldCheck size={20} className="text-zinc-900 shrink-0 mt-0.5" aria-hidden="true" />
              <div className="text-xs leading-relaxed text-zinc-600">
                <span className="font-bold text-zinc-900 block mb-0.5">Sıkı Veri Mahremiyeti:</span>
                Dosyalarınız kamuya açık yapay zekâ modellerini eğitmek amacıyla kullanılmaz. Yerel şifreli çalışma prensibi esastır.
              </div>
            </div>
          </div>

          {/* Sağ Kolon: Form */}
          <div className="w-full lg:sticky lg:top-24">
            <ContactForm />
          </div>
        </div>
      </main>

      {/* ══════════════════════════════ FOOTER ══════════════════════════════ */}
      <footer className="border-t border-zinc-100 bg-white py-8 px-5 md:px-16 text-center text-xs text-zinc-500">
        <div className="mx-auto flex max-w-[1400px] flex-col items-center justify-between gap-3 sm:flex-row">
          <span>© {new Date().getFullYear()} AyrisLegal. Tüm hakları saklıdır.</span>
          <a
            href="https://ayris.tech"
            target="_blank"
            rel="noopener noreferrer"
            className="font-medium text-zinc-700 underline-offset-4 hover:underline"
          >
            Created by ayris.tech
          </a>
        </div>
      </footer>
    </div>
  )
}