import type { Metadata } from "next";
import { Search, Gauge, Smartphone, TrendingUp, Lock, FileText } from "lucide-react";
import { AuditForm } from "@/components/audit-form";
import { buildMetadata } from "@/lib/seo";

export async function generateMetadata(): Promise<Metadata> {
  return buildMetadata("/site-analizi", {
    title: "Ücretsiz Site Analizi",
    description:
      "Web sitenizin SEO, hız, mobil uyumluluk ve dönüşüm performansını ölçen ücretsiz analiz raporu. 24 saat içinde e-postanıza.",
  });
}

const CHECKS = [
  {
    icon: Gauge,
    title: "Sayfa hızı (Core Web Vitals)",
    description: "LCP, INP, CLS skorları + iyileştirme önerileri.",
  },
  {
    icon: Smartphone,
    title: "Mobil uyumluluk",
    description: "Mobile-friendly testi + responsive sorunları.",
  },
  {
    icon: TrendingUp,
    title: "SEO temelleri",
    description: "Meta etiketler, schema, sitemap, internal linking analizi.",
  },
  {
    icon: Lock,
    title: "Güvenlik & SSL",
    description: "HTTPS, güvenlik başlıkları, açık güvenlik açıkları taraması.",
  },
  {
    icon: FileText,
    title: "İçerik kalitesi",
    description: "Heading yapısı, alt text, içerik uzunluğu, okunabilirlik.",
  },
  {
    icon: Search,
    title: "Rakip karşılaştırması",
    description: "Sektörünüzdeki 2-3 rakiple anahtar metriklerin kıyaslanması.",
  },
];

export default function AuditPage() {
  return (
    <>
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 hero-grid opacity-50" aria-hidden />
        <div className="absolute -right-32 top-1/2 -z-0 size-[420px] -translate-y-1/2 rounded-full bg-gradient-to-br from-[var(--sky)]/20 to-transparent blur-3xl" aria-hidden />

        <div className="relative mx-auto grid max-w-7xl items-start gap-12 px-6 py-20 lg:grid-cols-[1.1fr_1fr]">
          <div>
            <span className="inline-flex items-center gap-2 rounded-full border border-[var(--sky)]/30 bg-[var(--sky-50)] px-3 py-1 text-xs font-medium text-[var(--sky-600)]">
              ✦ Ücretsiz — taahhüt yok
            </span>
            <h1 className="mt-5 text-4xl font-bold leading-tight tracking-tight text-[var(--navy)] sm:text-5xl">
              Web sitenizin <span className="gradient-text">satış kapasitesini</span> 24 saatte ölçelim
            </h1>
            <p className="mt-5 max-w-xl text-lg leading-relaxed text-[var(--muted)]">
              Mevcut sitenizin SEO, hız, mobil uyumluluk ve dönüşüm
              performansını analiz edip, neyin daha çok müşteri getireceğini
              net bir raporla gösteriyoruz.
            </p>

            <ul className="mt-8 space-y-2.5 text-sm text-[var(--foreground)]">
              <li className="flex items-start gap-2">
                <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--sky-50)] text-xs text-[var(--sky-600)]">
                  ✓
                </span>
                Sitenizin Google'da neden yeterince görünmediği
              </li>
              <li className="flex items-start gap-2">
                <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--sky-50)] text-xs text-[var(--sky-600)]">
                  ✓
                </span>
                Ziyaretçi neden müşteriye dönüşmüyor — somut nedenler
              </li>
              <li className="flex items-start gap-2">
                <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--sky-50)] text-xs text-[var(--sky-600)]">
                  ✓
                </span>
                Rakiplerinize göre hangi alanlarda gerideniz
              </li>
              <li className="flex items-start gap-2">
                <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--sky-50)] text-xs text-[var(--sky-600)]">
                  ✓
                </span>
                Öncelikli iyileştirme listesi (etki/efor matrisli)
              </li>
            </ul>
          </div>

          <div className="rounded-2xl border border-[var(--border)] bg-white p-6 shadow-xl shadow-[var(--navy)]/5 sm:p-8">
            <AuditForm />
          </div>
        </div>
      </section>

      <section className="border-y border-[var(--border)] bg-[var(--navy-50)]/40 py-20">
        <div className="mx-auto max-w-7xl px-6">
          <h2 className="text-2xl font-bold text-[var(--navy)] sm:text-3xl">
            Raporda neler var?
          </h2>
          <p className="mt-2 max-w-2xl text-sm text-[var(--muted)]">
            Otomatik araç çıktısı değil — uzmanlarımızın değerlendirdiği,
            önceliklendirilmiş ve eyleme dökülebilir bir doküman.
          </p>

          <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {CHECKS.map((c) => {
              const Icon = c.icon;
              return (
                <div
                  key={c.title}
                  className="rounded-2xl border border-[var(--border)] bg-white p-6"
                >
                  <div className="flex size-11 items-center justify-center rounded-xl bg-[var(--navy-50)] text-[var(--navy)]">
                    <Icon className="size-5" />
                  </div>
                  <h3 className="mt-4 text-base font-semibold text-[var(--navy)]">
                    {c.title}
                  </h3>
                  <p className="mt-1 text-sm leading-relaxed text-[var(--muted)]">
                    {c.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}