'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import {
  UtensilsCrossed, QrCode, Monitor, Building2, BarChart3,
  ChefHat, CreditCard, Code2, Package, Percent, Users, Heart,
  CalendarCheck, Wallet, Clock, MessageSquare, TrendingUp,
  ArrowRight, CheckCircle2, ShieldCheck, ChevronDown, Star,
  Menu, X, Zap, Settings,
} from 'lucide-react'
import { PLAN_FEATURES } from '@/lib/constants'

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------
interface Plan {
  id: string
  name: string
  slug: string
  description: string
  price: number
  yearlyPrice: number
  currency: string
  maxStores: number
  maxStaff: number
  maxMenuItems: number
  maxOrders: number
  features: string[]
  isActive: boolean
  sortOrder: number
  isPopular: boolean
}

// ---------------------------------------------------------------------------
// Icon map for dynamic rendering from PLAN_FEATURES
// ---------------------------------------------------------------------------
const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
  Monitor, ChefHat, BarChart3, QrCode, Building2, CreditCard, Code2,
  Package, Percent, Users, Heart, CalendarCheck, Wallet, Clock,
  MessageSquare, TrendingUp,
}

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
function formatCurrency(amount: number): string {
  return new Intl.NumberFormat('id-ID', {
    style: 'currency',
    currency: 'IDR',
    minimumFractionDigits: 0,
  }).format(amount)
}

function formatLimit(value: number, label: string): string {
  return value === 0 ? `Unlimited ${label}` : `${value} ${label}`
}

// ---------------------------------------------------------------------------
// Feature categories for Section 5
// ---------------------------------------------------------------------------
const FEATURE_CATEGORIES = [
  {
    title: 'Operasional',
    icon: Zap,
    keys: ['pos', 'kitchen_display', 'qr_menu'],
  },
  {
    title: 'Manajemen',
    icon: Settings,
    keys: ['multi_branch', 'attendance', 'inventory', 'expenses'],
  },
  {
    title: 'Pelanggan',
    icon: Users,
    keys: ['customers', 'reservations', 'feedback', 'loyalty', 'promos'],
  },
  {
    title: 'Analitik & Integrasi',
    icon: BarChart3,
    keys: ['reports', 'advanced_analytics', 'online_payment', 'api_access'],
  },
]

// ---------------------------------------------------------------------------
// Hero features data (Section 4)
// ---------------------------------------------------------------------------
const HERO_FEATURES = [
  {
    icon: QrCode,
    title: 'QR Menu Ordering',
    text: 'Pelanggan cukup scan QR code di meja untuk melihat menu digital dan langsung pesan dari HP mereka. Tidak perlu antri, tidak perlu tunggu pelayan.',
  },
  {
    icon: Monitor,
    title: 'POS System',
    text: 'Sistem kasir modern yang cepat dan mudah digunakan. Proses pesanan, terima pembayaran, dan cetak struk dalam hitungan detik.',
  },
  {
    icon: Building2,
    title: 'Multi Cabang',
    text: 'Kelola semua cabang dari satu dashboard. Pantau performa, bandingkan penjualan, dan kontrol inventori setiap lokasi.',
  },
  {
    icon: BarChart3,
    title: 'Laporan Real-time',
    text: 'Dashboard analitik lengkap dengan grafik pendapatan, menu terlaris, jam sibuk, dan tren penjualan yang selalu up-to-date.',
  },
]

// ---------------------------------------------------------------------------
// Testimonials
// ---------------------------------------------------------------------------
const TESTIMONIALS = [
  {
    quote: 'RestoMenu mengubah cara kami mengelola restoran. Order dari QR code sangat membantu saat jam sibuk.',
    name: 'Budi Santoso',
    restaurant: 'Warung Nasi Padang',
  },
  {
    quote: 'Fitur multi cabang memudahkan kami memantau 3 outlet sekaligus. Laporan keuangan juga sangat detail.',
    name: 'Siti Rahayu',
    restaurant: 'Kopi Kenangan',
  },
  {
    quote: 'Setup cepat dan support responsif. Dalam sehari restoran kami sudah bisa terima order digital.',
    name: 'Ahmad Wijaya',
    restaurant: 'Sate Pak Ahmad',
  },
]

// ---------------------------------------------------------------------------
// FAQ data
// ---------------------------------------------------------------------------
const FAQ_ITEMS = [
  {
    q: 'Apa itu RestoMenu?',
    a: 'RestoMenu adalah platform SaaS (Software as a Service) untuk manajemen restoran. Dengan RestoMenu, Anda bisa mengelola menu digital, menerima pesanan via QR code, mengelola kasir (POS), memantau keuangan, dan banyak lagi — semua dari satu dashboard.',
  },
  {
    q: 'Bagaimana cara memulai?',
    a: 'Cukup daftar akun gratis, setup menu dan meja restoran Anda, lalu generate QR code untuk setiap meja. Pelanggan tinggal scan dan langsung bisa order. Prosesnya kurang dari 5 menit.',
  },
  {
    q: 'Apakah bisa upgrade atau downgrade paket?',
    a: 'Ya, Anda bisa mengubah paket kapan saja dari dashboard. Upgrade langsung aktif setelah pembayaran, dan downgrade berlaku di periode berikutnya.',
  },
  {
    q: 'Apakah data saya aman?',
    a: 'Keamanan data adalah prioritas kami. Kami menggunakan enkripsi SSL, backup harian, dan server yang aman untuk melindungi semua data restoran Anda.',
  },
  {
    q: 'Metode pembayaran apa saja yang didukung?',
    a: 'Kami mendukung pembayaran via QRIS, transfer bank (BCA, BNI, BRI, Mandiri), e-wallet, dan kartu kredit/debit.',
  },
  {
    q: 'Apakah ada kontrak jangka panjang?',
    a: 'Tidak ada kontrak. Anda bisa berlangganan bulanan atau tahunan, dan bisa berhenti kapan saja tanpa biaya penalti.',
  },
]

// ===========================================================================
// Component
// ===========================================================================
export default function LandingPage() {
  const [plans, setPlans] = useState<Plan[]>([])
  const [loadingPlans, setLoadingPlans] = useState(true)
  const [isYearly, setIsYearly] = useState(false)
  const [openFaq, setOpenFaq] = useState<number | null>(null)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  useEffect(() => {
    fetch('/api/plans')
      .then((res) => res.json())
      .then((data) => {
        setPlans(data.plans?.filter((p: Plan) => p.isActive).sort((a: Plan, b: Plan) => a.sortOrder - b.sortOrder) ?? [])
      })
      .catch(() => setPlans([]))
      .finally(() => setLoadingPlans(false))
  }, [])

  return (
    <div className="min-h-screen bg-white">
      {/* ================================================================ */}
      {/* 1. Navbar                                                        */}
      {/* ================================================================ */}
      <nav className="sticky top-0 z-50 border-b border-gray-100 bg-white/70 backdrop-blur-lg">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between">
            {/* Brand */}
            <Link href="/" className="flex items-center gap-2">
              <UtensilsCrossed className="h-8 w-8 text-primary-600" />
              <span className="text-xl font-bold text-gray-900">RestoMenu</span>
            </Link>

            {/* Desktop nav */}
            <div className="hidden items-center gap-8 md:flex">
              <a href="#features" className="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">Fitur</a>
              <a href="#pricing" className="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">Harga</a>
              <Link href="/compare" className="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">Bandingkan Fitur</Link>
            </div>

            {/* Desktop CTA */}
            <div className="hidden items-center gap-3 md:flex">
              <Link href="/login" className="text-sm font-medium text-gray-600 hover:text-gray-900 px-4 py-2">
                Masuk
              </Link>
              <Link href="/register" className="btn-primary flex items-center gap-2 text-sm">
                Daftar Gratis <ArrowRight className="h-4 w-4" />
              </Link>
            </div>

            {/* Mobile hamburger */}
            <button
              className="inline-flex items-center justify-center rounded-lg p-2 text-gray-600 hover:bg-gray-100 md:hidden"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              aria-label="Toggle menu"
            >
              {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>

        {/* Mobile menu panel */}
        {mobileMenuOpen && (
          <div className="border-t border-gray-100 bg-white px-4 pb-4 pt-2 md:hidden">
            <div className="flex flex-col gap-3">
              <a href="#features" onClick={() => setMobileMenuOpen(false)} className="rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Fitur</a>
              <a href="#pricing" onClick={() => setMobileMenuOpen(false)} className="rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Harga</a>
              <Link href="/compare" className="rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Bandingkan Fitur</Link>
              <hr className="border-gray-100" />
              <Link href="/login" className="rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Masuk</Link>
              <Link href="/register" className="btn-primary text-center text-sm">Daftar Gratis</Link>
            </div>
          </div>
        )}
      </nav>

      {/* ================================================================ */}
      {/* 2. Hero Section                                                  */}
      {/* ================================================================ */}
      <section className="bg-gradient-to-br from-primary-50 via-white to-orange-50 pb-24 pt-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full bg-primary-100 px-4 py-1.5 text-sm font-medium text-primary-700">
            <ShieldCheck className="h-4 w-4" />
            Platform #1 Manajemen Restoran
          </div>

          <h1 className="mb-6 text-4xl font-bold leading-tight text-gray-900 sm:text-5xl md:text-6xl">
            Kelola Restoran Anda<br />
            <span className="text-primary-600">Lebih Mudah &amp; Modern</span>
          </h1>

          <p className="mx-auto mb-10 max-w-2xl text-lg text-gray-600 sm:text-xl">
            Platform SaaS lengkap dengan QR menu ordering, POS, manajemen multi-cabang, dan laporan keuangan real-time. Semua dalam satu aplikasi.
          </p>

          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Link href="/register" className="btn-primary flex items-center justify-center gap-2 px-8 py-3 text-lg">
              Mulai Gratis Sekarang <ArrowRight className="h-5 w-5" />
            </Link>
            <a href="#features" className="btn-secondary flex items-center justify-center gap-2 px-8 py-3 text-lg">
              Lihat Fitur
            </a>
          </div>

          <div className="mt-12 flex flex-wrap items-center justify-center gap-6 text-sm text-gray-500 sm:gap-8">
            <span className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500" /> Tanpa kartu kredit</span>
            <span className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500" /> Setup 5 menit</span>
            <span className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-green-500" /> Support 24/7</span>
          </div>
        </div>
      </section>

      {/* ================================================================ */}
      {/* 3. Stats Section                                                 */}
      {/* ================================================================ */}
      <section className="bg-gray-900 py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 gap-8 text-center md:grid-cols-4">
            {[
              { value: '500+', label: 'Restoran' },
              { value: '1.2K+', label: 'Cabang' },
              { value: '50K+', label: 'Order/hari' },
              { value: '99.9%', label: 'Uptime' },
            ].map((s) => (
              <div key={s.label}>
                <div className="text-3xl font-bold text-primary-400 sm:text-4xl">{s.value}</div>
                <div className="mt-1 text-gray-400">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ================================================================ */}
      {/* 4. Fitur Unggulan (alternating layout)                           */}
      {/* ================================================================ */}
      <section id="features" className="py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-3xl font-bold text-gray-900 md:text-4xl">Fitur Unggulan</h2>
            <p className="mx-auto max-w-2xl text-lg text-gray-600">Solusi lengkap untuk setiap kebutuhan restoran Anda</p>
          </div>

          <div className="space-y-24">
            {HERO_FEATURES.map((feat, idx) => {
              const Icon = feat.icon
              const isReversed = idx % 2 === 1
              return (
                <div key={feat.title} className={`flex flex-col items-center gap-12 lg:flex-row ${isReversed ? 'lg:flex-row-reverse' : ''}`}>
                  {/* Icon / illustration area */}
                  <div className="flex w-full items-center justify-center lg:w-1/2">
                    <div className="flex h-64 w-full max-w-md items-center justify-center rounded-2xl bg-gradient-to-br from-primary-50 to-orange-50 sm:h-72">
                      <Icon className="h-24 w-24 text-primary-500 sm:h-32 sm:w-32" />
                    </div>
                  </div>
                  {/* Text */}
                  <div className="w-full lg:w-1/2">
                    <h3 className="mb-4 text-2xl font-bold text-gray-900 sm:text-3xl">{feat.title}</h3>
                    <p className="text-lg leading-relaxed text-gray-600">{feat.text}</p>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* ================================================================ */}
      {/* 5. Semua Fitur (16 features grid)                                */}
      {/* ================================================================ */}
      <section className="bg-gray-50 py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-3xl font-bold text-gray-900 md:text-4xl">Semua Fitur yang Anda Butuhkan</h2>
            <p className="mx-auto max-w-2xl text-lg text-gray-600">16 fitur lengkap dalam satu platform</p>
          </div>

          <div className="space-y-16">
            {FEATURE_CATEGORIES.map((cat) => {
              const CatIcon = cat.icon
              return (
                <div key={cat.title}>
                  <div className="mb-6 flex items-center gap-2">
                    <CatIcon className="h-5 w-5 text-primary-600" />
                    <h3 className="text-lg font-semibold text-gray-900">{cat.title}</h3>
                  </div>
                  <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                    {cat.keys.map((key) => {
                      const feat = PLAN_FEATURES[key]
                      if (!feat) return null
                      const FeatIcon = ICON_MAP[feat.icon]
                      return (
                        <div key={key} className="card hover:shadow-md transition-shadow">
                          <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100">
                            {FeatIcon ? <FeatIcon className="h-5 w-5 text-primary-600" /> : null}
                          </div>
                          <h4 className="mb-1 font-semibold text-gray-900">{feat.label}</h4>
                          <p className="text-sm leading-relaxed text-gray-600">{feat.description}</p>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* ================================================================ */}
      {/* 6. Cara Kerjanya                                                 */}
      {/* ================================================================ */}
      <section className="bg-gray-50 py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-3xl font-bold text-gray-900 md:text-4xl">Mulai dalam 3 Langkah</h2>
          </div>
          <div className="grid gap-8 md:grid-cols-3">
            {[
              { step: '1', title: 'Daftar Gratis', desc: 'Buat akun gratis dalam 2 menit. Tidak perlu kartu kredit.' },
              { step: '2', title: 'Setup Restoran', desc: 'Tambahkan menu, meja, dan atur cabang restoran Anda.' },
              { step: '3', title: 'Mulai Terima Order', desc: 'Generate QR code, tempel di meja, dan pelanggan bisa langsung order.' },
            ].map((item) => (
              <div key={item.step} className="text-center">
                <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-600 text-2xl font-bold text-white">
                  {item.step}
                </div>
                <h3 className="mb-2 text-xl font-semibold text-gray-900">{item.title}</h3>
                <p className="text-gray-600">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ================================================================ */}
      {/* 7. Pricing Section                                               */}
      {/* ================================================================ */}
      <section id="pricing" className="py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-10 text-center">
            <h2 className="mb-4 text-3xl font-bold text-gray-900 md:text-4xl">Pilihan Paket</h2>
            <p className="mx-auto max-w-2xl text-lg text-gray-600">Mulai gratis, upgrade kapan saja sesuai kebutuhan.</p>
          </div>

          {/* Toggle */}
          <div className="mb-12 flex items-center justify-center gap-3">
            <span className={`text-sm font-medium ${!isYearly ? 'text-gray-900' : 'text-gray-500'}`}>Bulanan</span>
            <button
              onClick={() => setIsYearly(!isYearly)}
              className={`relative inline-flex h-7 w-12 items-center rounded-full transition-colors ${isYearly ? 'bg-primary-600' : 'bg-gray-300'}`}
              aria-label="Toggle yearly pricing"
            >
              <span className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform ${isYearly ? 'translate-x-6' : 'translate-x-1'}`} />
            </button>
            <span className={`text-sm font-medium ${isYearly ? 'text-gray-900' : 'text-gray-500'}`}>Tahunan</span>
            {isYearly && <span className="badge bg-green-100 text-green-700 text-xs ml-1">Hemat 2 bulan</span>}
          </div>

          {loadingPlans ? (
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
              {[...Array(4)].map((_, i) => (
                <div key={i} className="animate-pulse rounded-2xl border border-gray-200 p-8">
                  <div className="mb-4 h-6 w-24 rounded bg-gray-200" />
                  <div className="mb-6 h-10 w-32 rounded bg-gray-200" />
                  <div className="space-y-3">
                    {[...Array(5)].map((_, j) => <div key={j} className="h-4 w-full rounded bg-gray-100" />)}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
              {plans.map((plan) => {
                const displayPrice = isYearly ? plan.yearlyPrice / 12 : plan.price
                const isPopular = plan.isPopular
                return (
                  <div
                    key={plan.id}
                    className={`relative rounded-2xl border p-8 transition-shadow hover:shadow-lg ${
                      isPopular
                        ? 'scale-[1.02] border-primary-500 ring-2 ring-primary-500 shadow-md'
                        : 'border-gray-200'
                    }`}
                  >
                    {isPopular && (
                      <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                        <span className="badge bg-primary-600 text-white px-3 py-1 text-xs">Populer</span>
                      </div>
                    )}
                    <h3 className="mb-1 text-xl font-semibold text-gray-900">{plan.name}</h3>
                    <p className="mb-4 text-sm text-gray-500">{plan.description}</p>

                    <div className="mb-6">
                      <span className="text-3xl font-bold text-gray-900">
                        {plan.price === 0 ? 'Gratis' : formatCurrency(displayPrice)}
                      </span>
                      {plan.price > 0 && <span className="text-sm text-gray-500"> /bulan</span>}
                      {plan.price > 0 && isYearly && (
                        <div className="mt-1 text-xs text-gray-400">
                          {formatCurrency(plan.yearlyPrice)} /tahun
                        </div>
                      )}
                    </div>

                    {/* Limits */}
                    <div className="mb-5 space-y-1 text-sm text-gray-600">
                      <div>{formatLimit(plan.maxStores, 'Cabang')}</div>
                      <div>{formatLimit(plan.maxStaff, 'Staff')}</div>
                      <div>{formatLimit(plan.maxMenuItems, 'Menu')}</div>
                      <div>{formatLimit(plan.maxOrders, 'Pesanan/bln')}</div>
                    </div>

                    {/* Feature checkmarks */}
                    <ul className="mb-6 space-y-2">
                      {plan.features.slice(0, 5).map((fKey) => {
                        const feat = PLAN_FEATURES[fKey]
                        return feat ? (
                          <li key={fKey} className="flex items-start gap-2 text-sm text-gray-700">
                            <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
                            {feat.label}
                          </li>
                        ) : null
                      })}
                      {plan.features.length > 5 && (
                        <li className="text-sm font-medium text-primary-600">
                          + {plan.features.length - 5} fitur lainnya
                        </li>
                      )}
                    </ul>

                    <Link
                      href="/register"
                      className={`block w-full rounded-lg py-2.5 text-center text-sm font-medium transition-colors ${
                        isPopular
                          ? 'bg-primary-600 text-white hover:bg-primary-700'
                          : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
                      }`}
                    >
                      {plan.price === 0 ? 'Mulai Gratis' : 'Mulai Sekarang'}
                    </Link>
                  </div>
                )
              })}
            </div>
          )}

          <div className="mt-10 text-center">
            <Link href="/compare" className="inline-flex items-center gap-1 text-sm font-medium text-primary-600 hover:text-primary-700">
              Bandingkan semua fitur <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* ================================================================ */}
      {/* 8. Testimonials                                                  */}
      {/* ================================================================ */}
      <section className="bg-gray-50 py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-3xl font-bold text-gray-900 md:text-4xl">Dipercaya Ratusan Restoran</h2>
          </div>
          <div className="grid gap-8 md:grid-cols-3">
            {TESTIMONIALS.map((t) => (
              <div key={t.name} className="card flex flex-col">
                <div className="mb-4 flex gap-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  ))}
                </div>
                <p className="mb-6 flex-1 text-gray-600 leading-relaxed">&ldquo;{t.quote}&rdquo;</p>
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 text-sm font-bold text-primary-700">
                    {t.name.charAt(0)}
                  </div>
                  <div>
                    <div className="text-sm font-semibold text-gray-900">{t.name}</div>
                    <div className="text-xs text-gray-500">{t.restaurant}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ================================================================ */}
      {/* 9. FAQ Section                                                   */}
      {/* ================================================================ */}
      <section className="py-24">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-3xl font-bold text-gray-900 md:text-4xl">Pertanyaan yang Sering Ditanyakan</h2>
          </div>
          <div className="divide-y divide-gray-200">
            {FAQ_ITEMS.map((item, idx) => {
              const isOpen = openFaq === idx
              return (
                <div key={idx}>
                  <button
                    className="flex w-full items-center justify-between py-5 text-left"
                    onClick={() => setOpenFaq(isOpen ? null : idx)}
                    aria-expanded={isOpen}
                  >
                    <span className="text-base font-medium text-gray-900 pr-4">{item.q}</span>
                    <ChevronDown className={`h-5 w-5 flex-shrink-0 text-gray-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
                  </button>
                  <div
                    className={`overflow-hidden transition-all duration-200 ${isOpen ? 'max-h-96 pb-5' : 'max-h-0'}`}
                  >
                    <p className="text-gray-600 leading-relaxed">{item.a}</p>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* ================================================================ */}
      {/* 10. Final CTA                                                    */}
      {/* ================================================================ */}
      <section className="bg-primary-600 py-24">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="mb-6 text-3xl font-bold text-white md:text-4xl">
            Siap Modernisasi Restoran Anda?
          </h2>
          <p className="mb-10 text-xl text-primary-100">
            Bergabung dengan ratusan restoran yang sudah menggunakan RestoMenu.
          </p>
          <Link
            href="/register"
            className="inline-flex items-center gap-2 rounded-lg bg-white px-8 py-4 text-lg font-semibold text-primary-600 transition-colors hover:bg-primary-50"
          >
            Daftar Gratis Sekarang <ArrowRight className="h-5 w-5" />
          </Link>
        </div>
      </section>

      {/* ================================================================ */}
      {/* 11. Footer                                                       */}
      {/* ================================================================ */}
      <footer className="bg-gray-900 py-16 text-gray-400">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
            {/* Brand */}
            <div>
              <div className="mb-4 flex items-center gap-2">
                <UtensilsCrossed className="h-7 w-7 text-primary-500" />
                <span className="text-lg font-bold text-white">RestoMenu</span>
              </div>
              <p className="text-sm leading-relaxed">
                Platform SaaS lengkap untuk manajemen restoran modern. QR menu, POS, multi-cabang, dan laporan keuangan dalam satu aplikasi.
              </p>
            </div>

            {/* Produk */}
            <div>
              <h4 className="mb-4 font-semibold text-white">Produk</h4>
              <ul className="space-y-2 text-sm">
                <li><a href="#features" className="transition-colors hover:text-white">Fitur</a></li>
                <li><a href="#pricing" className="transition-colors hover:text-white">Harga</a></li>
                <li><Link href="/compare" className="transition-colors hover:text-white">Bandingkan Fitur</Link></li>
              </ul>
            </div>

            {/* Informasi */}
            <div>
              <h4 className="mb-4 font-semibold text-white">Informasi</h4>
              <ul className="space-y-2 text-sm">
                <li><Link href="/p/contact" className="transition-colors hover:text-white">Kontak</Link></li>
                <li><Link href="/p/privacy-policy" className="transition-colors hover:text-white">Privasi</Link></li>
                <li><Link href="/p/terms-and-conditions" className="transition-colors hover:text-white">Syarat &amp; Ketentuan</Link></li>
                <li><Link href="/p/refund-policy" className="transition-colors hover:text-white">Refund</Link></li>
              </ul>
            </div>

            {/* Akun */}
            <div>
              <h4 className="mb-4 font-semibold text-white">Akun</h4>
              <ul className="space-y-2 text-sm">
                <li><Link href="/login" className="transition-colors hover:text-white">Masuk</Link></li>
                <li><Link href="/register" className="transition-colors hover:text-white">Daftar</Link></li>
              </ul>
            </div>
          </div>

          <div className="mt-12 border-t border-gray-800 pt-8 text-center text-sm">
            <p>&copy; 2024 RestoMenu. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}