'use client';

import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Sparkles,
  ArrowRight,
  QrCode,
  Smartphone,
  BarChart3,
  CreditCard,
  ChefHat,
  Zap,
  Star,
  Menu,
  X,
  ShoppingBag,
  UtensilsCrossed,
} from 'lucide-react';
import { useState } from 'react';
import { cn } from '@/lib/utils';

function Navbar() {
  const [open, setOpen] = useState(false);
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 border-b border-zinc-200/50 bg-white/80 backdrop-blur-xl dark:border-zinc-800/50 dark:bg-zinc-950/80">
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6">
        <Link href="/" className="flex items-center gap-2.5">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500 shadow-sm">
            <Sparkles className="h-4 w-4 text-white" />
          </div>
          <span className="text-lg font-bold tracking-tight">
            Scan<span className="text-emerald-600">Menu</span>
          </span>
        </Link>

        <div className="hidden items-center gap-8 md:flex">
          <a href="#features" className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors">Features</a>
          <Link href="/pricing" className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors">Pricing</Link>
          <Link href="/restaurant/the-garden-kitchen" className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors">Demo Menu</Link>
        </div>

        <div className="hidden items-center gap-3 md:flex">
          <Link href="/login"><Button variant="ghost" size="sm">Sign In</Button></Link>
          <Link href="/register"><Button variant="primary" size="sm">Get Started Free <ArrowRight className="h-3.5 w-3.5" /></Button></Link>
        </div>

        <button onClick={() => setOpen(!open)} className="md:hidden rounded-lg p-2 hover:bg-zinc-100">
          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>
      </div>

      {open && (
        <div className="border-t border-zinc-200 bg-white p-4 md:hidden dark:border-zinc-800 dark:bg-zinc-950">
          <div className="space-y-2">
            <a href="#features" className="block rounded-lg px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-50">Features</a>
            <Link href="/pricing" className="block rounded-lg px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-50">Pricing</Link>
            <Link href="/restaurant/the-garden-kitchen" className="block rounded-lg px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-50">Demo Menu</Link>
            <div className="pt-2 space-y-2 border-t border-zinc-100">
              <Link href="/login"><Button variant="outline" className="w-full">Sign In</Button></Link>
              <Link href="/register"><Button variant="primary" className="w-full">Get Started Free</Button></Link>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
}

const features = [
  { icon: QrCode, title: 'QR Code Menus', description: 'Generate unique QR codes for each table. Customers scan and browse your menu instantly — no app needed.' },
  { icon: Smartphone, title: 'Mobile-First Design', description: 'Beautiful, responsive menus optimized for every screen size. Your menu looks amazing on any device.' },
  { icon: ShoppingBag, title: 'Online Ordering', description: 'Accept dine-in, takeaway, and delivery orders directly. No commissions, no middlemen.' },
  { icon: ChefHat, title: 'Kitchen Dashboard', description: 'Real-time order management for your staff. Track, prepare, and fulfill orders efficiently.' },
  { icon: BarChart3, title: 'Smart Analytics', description: 'Understand your business with detailed insights on revenue, popular items, and peak hours.' },
  { icon: CreditCard, title: 'Integrated Payments', description: 'Accept payments seamlessly with Stripe. Subscriptions, invoicing, and billing made simple.' },
];

const stats = [
  { value: '10K+', label: 'Restaurants' },
  { value: '2.5M', label: 'Orders Processed' },
  { value: '4.9★', label: 'Average Rating' },
  { value: '32%', label: 'Revenue Increase' },
];

const testimonials = [
  { name: 'Maria Santos', role: 'Owner, Bella Cucina', text: 'ScanMenu completely transformed how we handle orders. Our customers love the simplicity, and we\'ve seen a 32% increase in average order value.' },
  { name: 'David Park', role: 'Manager, Seoul Kitchen', text: 'The QR code ordering eliminated wait times. We now serve 40% more tables during peak hours. The analytics are incredibly useful.' },
  { name: 'Sophie Laurent', role: 'Owner, Le Petit Bistro', text: 'Setting up was incredibly easy. Within an hour, we had our entire menu digitized with beautiful product pages and QR codes printed.' },
];

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-white dark:bg-zinc-950">
      <Navbar />

      {/* Hero */}
      <section className="relative overflow-hidden pt-32 pb-20 sm:pt-40 sm:pb-28">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-emerald-100/50 via-transparent to-transparent dark:from-emerald-900/10" />
        <div className="relative mx-auto max-w-6xl px-4 sm:px-6">
          <div className="text-center">
            <Badge variant="outline" className="mb-6 gap-1.5 rounded-full py-1.5 pl-1.5 pr-3 text-sm">
              <span className="rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] font-bold text-white">NEW</span>
              Real-time order tracking is here
            </Badge>

            <h1 className="mx-auto max-w-4xl text-4xl font-bold tracking-tight text-zinc-900 sm:text-6xl lg:text-7xl dark:text-white">
              Your restaurant menu,{' '}
              <span className="bg-gradient-to-r from-emerald-600 to-cyan-500 bg-clip-text text-transparent">
                reinvented
              </span>
            </h1>

            <p className="mx-auto mt-6 max-w-2xl text-lg text-zinc-600 sm:text-xl dark:text-zinc-400">
              Create stunning digital menus, generate QR codes, and let customers order instantly — 
              all without installing an app. Start in under 5 minutes.
            </p>

            <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
              <Link href="/register">
                <Button variant="primary" size="xl" className="w-full sm:w-auto shadow-lg shadow-emerald-500/20">
                  Start Free Trial <ArrowRight className="h-4 w-4" />
                </Button>
              </Link>
              <Link href="/restaurant/the-garden-kitchen">
                <Button variant="outline" size="xl" className="w-full sm:w-auto">
                  <Smartphone className="h-4 w-4" /> View Demo Menu
                </Button>
              </Link>
            </div>

            <p className="mt-4 text-sm text-zinc-500">No credit card required • Free 14-day trial • Cancel anytime</p>
          </div>

          {/* Dashboard Preview */}
          <div className="mt-16 sm:mt-20">
            <div className="relative rounded-2xl border border-zinc-200/60 bg-zinc-900 p-2 shadow-2xl shadow-zinc-900/20 ring-1 ring-zinc-900/5 sm:rounded-3xl sm:p-3">
              <div className="flex items-center gap-1.5 px-3 pb-2">
                <div className="h-3 w-3 rounded-full bg-red-400" />
                <div className="h-3 w-3 rounded-full bg-amber-400" />
                <div className="h-3 w-3 rounded-full bg-emerald-400" />
                <span className="ml-3 text-xs text-zinc-500">scanmenu.app/dashboard</span>
              </div>
              <div className="overflow-hidden rounded-xl bg-zinc-50 dark:bg-zinc-800">
                <div className="grid grid-cols-4 gap-3 p-4">
                  {[
                    { label: 'Revenue', value: '$12,845', change: '+12.5%', color: 'text-emerald-600' },
                    { label: 'Orders', value: '347', change: '+8.2%', color: 'text-blue-600' },
                    { label: 'Avg. Order', value: '$37.02', change: '+3.1%', color: 'text-violet-600' },
                    { label: 'Active Tables', value: '5/8', change: '3 free', color: 'text-amber-600' },
                  ].map((stat) => (
                    <div key={stat.label} className="rounded-xl bg-white p-3 shadow-sm dark:bg-zinc-700">
                      <p className="text-[10px] font-medium text-zinc-500">{stat.label}</p>
                      <p className="mt-1 text-lg font-bold text-zinc-900 dark:text-white">{stat.value}</p>
                      <p className={cn('text-[10px] font-medium', stat.color)}>{stat.change}</p>
                    </div>
                  ))}
                </div>
                <div className="px-4 pb-4">
                  <div className="flex h-32 items-end gap-[3px] rounded-xl bg-white p-3 shadow-sm dark:bg-zinc-700">
                    {Array.from({ length: 30 }).map((_, i) => (
                      <div
                        key={i}
                        className="flex-1 rounded-t-sm bg-emerald-500/80"
                        style={{ height: `${30 + Math.random() * 70}%` }}
                      />
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="border-y border-zinc-200 bg-zinc-50 py-12 dark:border-zinc-800 dark:bg-zinc-900/50">
        <div className="mx-auto max-w-6xl px-4 sm:px-6">
          <div className="grid grid-cols-2 gap-8 sm:grid-cols-4">
            {stats.map((stat) => (
              <div key={stat.label} className="text-center">
                <p className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">{stat.value}</p>
                <p className="mt-1 text-sm font-medium text-zinc-500">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section id="features" className="py-20 sm:py-28">
        <div className="mx-auto max-w-6xl px-4 sm:px-6">
          <div className="text-center">
            <Badge variant="outline" className="mb-4">Features</Badge>
            <h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
              Everything you need to go digital
            </h2>
            <p className="mx-auto mt-4 max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">
              From menu creation to order management, ScanMenu has you covered with powerful tools designed for modern restaurants.
            </p>
          </div>

          <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {features.map((feature) => (
              <div key={feature.title} className="group rounded-2xl border border-zinc-200/60 bg-white p-6 transition-all hover:border-zinc-300 hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700">
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 transition-colors group-hover:bg-emerald-100 dark:bg-emerald-900/30 dark:group-hover:bg-emerald-900/50">
                  <feature.icon className="h-6 w-6" />
                </div>
                <h3 className="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">{feature.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-zinc-500">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="border-y border-zinc-200 bg-zinc-50 py-20 sm:py-28 dark:border-zinc-800 dark:bg-zinc-900/50">
        <div className="mx-auto max-w-6xl px-4 sm:px-6">
          <div className="text-center">
            <Badge variant="outline" className="mb-4">How It Works</Badge>
            <h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
              Up and running in minutes
            </h2>
          </div>

          <div className="mt-16 grid gap-8 sm:grid-cols-3">
            {[
              { step: 1, icon: ChefHat, title: 'Create Your Menu', description: 'Add your restaurant, create categories, and upload your products with images, prices, and options.' },
              { step: 2, icon: QrCode, title: 'Generate QR Codes', description: 'Create unique QR codes for each table or for takeaway/delivery. Print and display them in your restaurant.' },
              { step: 3, icon: Zap, title: 'Start Receiving Orders', description: 'Customers scan, browse, and order instantly. Manage everything from your real-time dashboard.' },
            ].map((item) => (
              <div key={item.step} className="relative text-center">
                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500 to-cyan-500 text-white shadow-lg shadow-emerald-500/30">
                  <item.icon className="h-7 w-7" />
                </div>
                <h3 className="mt-6 text-lg font-semibold text-zinc-900 dark:text-zinc-100">{item.title}</h3>
                <p className="mt-2 text-sm text-zinc-500">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 sm:py-28">
        <div className="mx-auto max-w-6xl px-4 sm:px-6">
          <div className="text-center">
            <Badge variant="outline" className="mb-4">Testimonials</Badge>
            <h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
              Loved by restaurant owners
            </h2>
          </div>

          <div className="mt-16 grid gap-6 sm:grid-cols-3">
            {testimonials.map((t) => (
              <div key={t.name} className="rounded-2xl border border-zinc-200/60 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
                <div className="flex gap-0.5">
                  {[1, 2, 3, 4, 5].map((i) => (
                    <Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
                  ))}
                </div>
                <p className="mt-4 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">&ldquo;{t.text}&rdquo;</p>
                <div className="mt-4 flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 text-xs font-bold text-white">
                    {t.name.split(' ').map((n) => n[0]).join('')}
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{t.name}</p>
                    <p className="text-xs text-zinc-500">{t.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="border-t border-zinc-200 dark:border-zinc-800">
        <div className="mx-auto max-w-6xl px-4 py-20 sm:px-6 sm:py-28">
          <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-zinc-900 via-zinc-800 to-zinc-900 px-8 py-16 text-center shadow-2xl sm:px-16 dark:from-zinc-800 dark:via-zinc-900 dark:to-zinc-800">
            <div className="relative">
              <h2 className="text-3xl font-bold text-white sm:text-4xl">
                Ready to transform your restaurant?
              </h2>
              <p className="mx-auto mt-4 max-w-xl text-lg text-zinc-400">
                Join thousands of restaurants using ScanMenu to increase revenue, reduce wait times, and delight customers.
              </p>
              <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
                <Link href="/register">
                  <Button variant="primary" size="xl" className="w-full sm:w-auto">
                    Start Free Trial <ArrowRight className="h-4 w-4" />
                  </Button>
                </Link>
                <Link href="/restaurant/the-garden-kitchen">
                  <Button variant="outline" size="xl" className="w-full border-zinc-700 text-white hover:bg-zinc-800 hover:text-white sm:w-auto">
                    View Live Demo
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900/50">
        <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
          <div className="grid gap-8 sm:grid-cols-4">
            <div>
              <Link href="/" className="flex items-center gap-2">
                <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500">
                  <Sparkles className="h-3.5 w-3.5 text-white" />
                </div>
                <span className="text-base font-bold">Scan<span className="text-emerald-600">Menu</span></span>
              </Link>
              <p className="mt-3 text-sm text-zinc-500">Digital menus and QR ordering for modern restaurants.</p>
            </div>
            <div>
              <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Product</h4>
              <div className="mt-3 space-y-2 text-sm text-zinc-500">
                <p className="hover:text-zinc-700 cursor-pointer">Features</p>
                <p className="hover:text-zinc-700 cursor-pointer">Pricing</p>
                <p className="hover:text-zinc-700 cursor-pointer">Demo</p>
                <p className="hover:text-zinc-700 cursor-pointer">Changelog</p>
              </div>
            </div>
            <div>
              <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Company</h4>
              <div className="mt-3 space-y-2 text-sm text-zinc-500">
                <p className="hover:text-zinc-700 cursor-pointer">About</p>
                <p className="hover:text-zinc-700 cursor-pointer">Blog</p>
                <p className="hover:text-zinc-700 cursor-pointer">Careers</p>
                <p className="hover:text-zinc-700 cursor-pointer">Contact</p>
              </div>
            </div>
            <div>
              <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Legal</h4>
              <div className="mt-3 space-y-2 text-sm text-zinc-500">
                <p className="hover:text-zinc-700 cursor-pointer">Privacy</p>
                <p className="hover:text-zinc-700 cursor-pointer">Terms</p>
                <p className="hover:text-zinc-700 cursor-pointer">Security</p>
              </div>
            </div>
          </div>
          <div className="mt-8 border-t border-zinc-200 pt-8 text-center text-sm text-zinc-400 dark:border-zinc-800">
            &copy; 2025 ScanMenu. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  );
}