import type { Metadata } from "next";
import Link from "next/link";
import { THEME_PRESETS } from "@/lib/theme";
import { AyrisFooterBadge } from "@/components/AyrisFooterBadge";

export const metadata: Metadata = {
  title: "Menulio | AI Destekli Yeni Nesil QR Menü Platformu",
  description:
    "Restoran menünüzün fotoğrafını çekin, yapay zeka saniyeler içinde dijitalleştirsin. 5 lüks şablon, anında açılan mobil web menüsü ve dinamik QR kodlar.",
};

export default function HomePage() {
  return (
    <div className="min-h-screen bg-stone-950 text-stone-100 selection:bg-amber-500 selection:text-stone-950 font-sans">
      {/* Navigation */}
      <header className="border-b border-stone-800/80 bg-stone-950/75 backdrop-blur-xl sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-amber-400 via-amber-600 to-amber-800 flex items-center justify-center font-black text-xl text-stone-950 shadow-lg shadow-amber-500/20">
              M
            </div>
            <span className="font-extrabold text-2xl tracking-tight bg-gradient-to-r from-amber-200 via-amber-400 to-amber-500 bg-clip-text text-transparent">
              MENULIO
            </span>
          </div>

          <nav className="hidden md:flex items-center gap-8 text-sm font-medium text-stone-300">
            <Link href="#features" className="hover:text-amber-400 transition-colors">
              Özellikler
            </Link>
            <Link href="#templates" className="hover:text-amber-400 transition-colors">
              Şablonlar (5 Tema)
            </Link>
            <Link href="#how-it-works" className="hover:text-amber-400 transition-colors">
              Nasıl Çalışır?
            </Link>
            <Link href="/templates" className="hover:text-amber-400 transition-colors">
              Canlı Demo
            </Link>
          </nav>

          <div className="flex items-center gap-4">
            <Link
              href="/demo"
              className="px-5 py-2.5 rounded-xl text-xs font-bold text-stone-200 bg-stone-900 hover:bg-stone-800 border border-stone-800 transition-all active:scale-95"
            >
              Menü Demosu Gör
            </Link>
            <Link
              href="/templates"
              className="px-5 py-2.5 rounded-xl text-xs font-bold text-stone-950 bg-gradient-to-r from-amber-400 to-amber-500 hover:from-amber-300 hover:to-amber-400 transition-all shadow-lg shadow-amber-500/25 active:scale-95"
            >
              Şablonları İncele →
            </Link>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative pt-24 pb-32 overflow-hidden px-6">
        {/* Glow Effects */}
        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-amber-500/10 rounded-full blur-[140px] pointer-events-none" />
        <div className="absolute top-1/3 left-1/4 w-[400px] h-[400px] bg-blue-500/10 rounded-full blur-[120px] pointer-events-none" />

        <div className="max-w-5xl mx-auto text-center space-y-8 relative z-10">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-500/10 border border-amber-500/25 text-amber-400 text-xs font-bold tracking-wide animate-fade-in">
            <span>✨</span> YAPAY ZEKA DESTEKLİ DİJİTAL QR MENÜ SAAS
          </div>

          <h1 className="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1] text-stone-100">
            Menünüzün Fotoğrafını Çekin,{" "}
            <span className="bg-gradient-to-r from-amber-300 via-amber-400 to-amber-600 bg-clip-text text-transparent">
              AI Saniyeler İçinde Dijitalleştirsin.
            </span>
          </h1>

          <p className="text-lg sm:text-xl text-stone-400 max-w-3xl mx-auto leading-relaxed">
            Menulio ile restoranınızın basılı menüsünü cep telefonunuzdan fotoğraflayın. Vision AI tüm
            kategorileri, ürünleri ve fiyatları anında tanısın; 5 lüks şablondan birini seçip hemen
            masalarınıza QR koyun.
          </p>

          {/* Call to Actions */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
            <Link
              href="/templates"
              className="w-full sm:w-auto px-8 py-4 rounded-2xl font-bold text-stone-950 bg-gradient-to-r from-amber-400 via-amber-500 to-amber-600 hover:opacity-95 transition-all shadow-xl shadow-amber-500/25 text-base flex items-center justify-center gap-2"
            >
              <span>🌟</span> Canlı Şablonları Test Edin
            </Link>

            <Link
              href="/demo"
              className="w-full sm:w-auto px-8 py-4 rounded-2xl font-bold text-stone-200 bg-stone-900/90 hover:bg-stone-800 border border-stone-800 transition-all text-base flex items-center justify-center gap-2"
            >
              <span>📱</span> Canlı Demo Menüyü Aç
            </Link>
          </div>

          {/* Social Proof Stats */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 pt-16 border-t border-stone-800/80 max-w-4xl mx-auto text-left sm:text-center">
            <div>
              <div className="text-3xl sm:text-4xl font-black text-amber-400">10 sn</div>
              <div className="text-xs text-stone-400 mt-1">AI ile Menü Çıkarma</div>
            </div>
            <div>
              <div className="text-3xl sm:text-4xl font-black text-white">5 Adet</div>
              <div className="text-xs text-stone-400 mt-1">Özel Tasarım Şablonu</div>
            </div>
            <div>
              <div className="text-3xl sm:text-4xl font-black text-amber-400">%100</div>
              <div className="text-xs text-stone-400 mt-1">Dinamik QR (Yeniden Basılmaz)</div>
            </div>
            <div>
              <div className="text-3xl sm:text-4xl font-black text-white">&lt;0.5 sn</div>
              <div className="text-xs text-stone-400 mt-1">Mobil Açılış Hızı</div>
            </div>
          </div>
        </div>
      </section>

      {/* 5 Menu Templates Showcase Section */}
      <section id="templates" className="py-24 bg-stone-900/50 border-y border-stone-800/80 px-6">
        <div className="max-w-7xl mx-auto space-y-16">
          <div className="text-center max-w-3xl mx-auto space-y-4">
            <span className="text-amber-400 text-xs font-bold uppercase tracking-wider">
              TEMALAR & TASARIM ŞABLONLARI
            </span>
            <h2 className="text-3xl sm:text-5xl font-extrabold tracking-tight">
              Her Restoran Konseptine Özel 5 Şablon
            </h2>
            <p className="text-stone-400 text-sm sm:text-base">
              Fine dining'den gurme burgerciye, gece kulübünden butik kahveciye kadar tek tıkla şablon
              değiştirin. Menü verileriniz bozulmadan sunum katmanı anında güncellenir.
            </p>
          </div>

          {/* 5 Template Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Object.values(THEME_PRESETS).map((preset) => (
              <div
                key={preset.key}
                className="rounded-3xl border border-stone-800 bg-stone-900/80 p-6 flex flex-col justify-between hover:border-amber-500/50 transition-all group shadow-xl"
              >
                <div className="space-y-4">
                  {/* Theme Header with Accent Color Dot */}
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div
                        className="w-5 h-5 rounded-full shadow-md"
                        style={{ backgroundColor: preset.config.primaryColor }}
                      />
                      <h3 className="text-xl font-bold text-white group-hover:text-amber-300 transition-colors">
                        {preset.name}
                      </h3>
                    </div>
                    <span className="text-[10px] font-bold px-2.5 py-1 rounded-full bg-stone-800 text-stone-300 border border-stone-700">
                      {preset.fontFamily.toUpperCase()}
                    </span>
                  </div>

                  {/* Theme Description */}
                  <p className="text-xs text-stone-400 leading-relaxed">
                    {preset.key === "elegant" && "Fine dining restoranlar, şarap evleri ve lüks mekanlar için altın & krem tonlarında zarif mizanpaj."}
                    {preset.key === "modern" && "Kafeler, burgerciler ve fast-casual mekanlar için canlı mavi safir tonları ve hızlı arama odaklı ızgara düzeni."}
                    {preset.key === "dark" && "Gece kulüpleri, kokteyl barlar ve steakhouse'lar için obsidian siyahı ve kehribar parıltılı lüks mod."}
                    {preset.key === "minimal" && "Butik kahveciler, fırınlar ve üçüncü nesil mekanlar için bol boşluklu sakin Nordic tipografi."}
                    {preset.key === "classic" && "Geleneksel brasserie'ler, meyhaneler ve trattoria'lar için Toskana bordo ve sıcak rustik doku."}
                  </p>

                  {/* Visual Preview Box */}
                  <div
                    className="h-32 rounded-2xl p-4 flex flex-col justify-between border shadow-inner relative overflow-hidden"
                    style={{
                      backgroundColor: preset.config.background,
                      borderColor: preset.cardBorder,
                    }}
                  >
                    <div className="flex items-center justify-between">
                      <div className="h-3 w-20 rounded bg-stone-400/40" />
                      <div
                        className="h-4 w-12 rounded-full"
                        style={{ backgroundColor: preset.config.primaryColor }}
                      />
                    </div>
                    <div
                      className="p-2.5 rounded-xl border flex items-center justify-between"
                      style={{
                        backgroundColor: preset.cardBg,
                        borderColor: preset.cardBorder,
                      }}
                    >
                      <div className="space-y-1">
                        <div
                          className="h-2.5 w-24 rounded font-bold text-[10px]"
                          style={{ color: preset.textPrimary }}
                        >
                          Trüflü Burrata
                        </div>
                        <div className="h-2 w-16 rounded bg-stone-300/30" />
                      </div>
                      <div
                        className="text-xs font-black"
                        style={{ color: preset.config.primaryColor }}
                      >
                        ₺420
                      </div>
                    </div>
                  </div>
                </div>

                <div className="pt-6 mt-4 border-t border-stone-800/80">
                  <Link
                    href={`/templates?theme=${preset.key}`}
                    className="w-full py-2.5 rounded-xl text-xs font-bold text-center block bg-stone-800 hover:bg-stone-700 text-stone-100 transition-all border border-stone-700"
                  >
                    {preset.name} Önizle →
                  </Link>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center pt-4">
            <Link
              href="/templates"
              className="inline-flex items-center gap-2 px-8 py-4 rounded-2xl font-bold text-stone-950 bg-amber-400 hover:bg-amber-300 shadow-xl shadow-amber-400/20 text-sm transition-all"
            >
              <span>📱</span> Tüm Şablonları Cihaz Simülatöründe Canlı Dene
            </Link>
          </div>
        </div>
      </section>

      {/* How It Works Section */}
      <section id="how-it-works" className="py-24 px-6 max-w-7xl mx-auto space-y-16">
        <div className="text-center max-w-2xl mx-auto space-y-4">
          <span className="text-amber-400 text-xs font-bold uppercase tracking-wider">
            KOLAY ENTEGRASYON
          </span>
          <h2 className="text-3xl sm:text-5xl font-extrabold tracking-tight">
            3 Kolay Adımda Masanızda
          </h2>
          <p className="text-stone-400 text-sm sm:text-base">
            Saatlerce menü girmeye son. Tek yapmanız gereken cep telefonunuzla fotoğraf çekmek.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Step 1 */}
          <div className="rounded-3xl border border-stone-800 bg-stone-900/60 p-8 space-y-4 relative">
            <div className="w-12 h-12 rounded-2xl bg-amber-500/10 border border-amber-500/30 text-amber-400 flex items-center justify-center font-black text-xl">
              1
            </div>
            <h3 className="text-xl font-bold text-white">Menü Fotoğrafını Çekin</h3>
            <p className="text-stone-400 text-sm leading-relaxed">
              Mevcut basılı menünüzün, broşürünüzün veya tahtanızın fotoğrafını Menulio mobil uygulamasıyla çekin.
            </p>
          </div>

          {/* Step 2 */}
          <div className="rounded-3xl border border-stone-800 bg-stone-900/60 p-8 space-y-4 relative">
            <div className="w-12 h-12 rounded-2xl bg-amber-500/10 border border-amber-500/30 text-amber-400 flex items-center justify-center font-black text-xl">
              2
            </div>
            <h3 className="text-xl font-bold text-white">AI Ayıklasın & Onaylayın</h3>
            <p className="text-stone-400 text-sm leading-relaxed">
              Vision AI tüm kategorileri, ürünleri ve fiyatları saniyeler içinde çıkarır. İnceleyin, istediğiniz temayı seçin.
            </p>
          </div>

          {/* Step 3 */}
          <div className="rounded-3xl border border-stone-800 bg-stone-900/60 p-8 space-y-4 relative">
            <div className="w-12 h-12 rounded-2xl bg-amber-500/10 border border-amber-500/30 text-amber-400 flex items-center justify-center font-black text-xl">
              3
            </div>
            <h3 className="text-xl font-bold text-white">QR Kodunuzu Masaya Koyun</h3>
            <p className="text-stone-400 text-sm leading-relaxed">
              Müşterileriniz uygulama indirmeden saniyeler içinde menüyü açsın. Fiyat değiştiğinde asla yeni QR basmayın.
            </p>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-stone-800/80 bg-stone-950 py-12 px-6">
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6 text-xs text-stone-500 mb-8">
          <div className="flex items-center gap-3">
            <span className="font-bold text-stone-300 text-sm tracking-wider">MENULIO</span>
            <span>•</span>
            <span>© {new Date().getFullYear()} Tüm hakları saklıdır.</span>
          </div>

          <div className="flex items-center gap-6">
            <Link href="/templates" className="hover:text-stone-300 transition-colors">
              Şablonlar
            </Link>
            <Link href="/demo" className="hover:text-stone-300 transition-colors">
              Canlı Demo
            </Link>
            <Link href="/demo?theme=dark" className="hover:text-stone-300 transition-colors">
              Dark Tema
            </Link>
          </div>
        </div>

        <AyrisFooterBadge />
      </footer>
    </div>
  );
}