'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import {
  UtensilsCrossed,
  Car,
  ArrowRight,
  ShieldCheck,
  Star,
  MapPin,
  Search,
  Clock,
  ShoppingBag,
  Compass,
  Sparkles,
  Plane,
  Building,
  Navigation
} from 'lucide-react';

export default function LandingPage() {
  const [activeTab, setActiveTab] = useState<'food' | 'cab'>('food');

  return (
    <div className="relative min-h-[90vh] bg-white text-neutral-900 bg-map-pattern">

      {/* Hero Section matching ReadyCab Layout */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-10 pb-16 lg:pt-16 lg:pb-24">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">

          {/* Left Column: Hero Text & Metrics */}
          <div className="lg:col-span-6 space-y-6">

            {/* Pill Badge matching ReadyCab */}
            <div className="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-neutral-100 px-4 py-1.5 text-xs font-semibold text-neutral-800">
              <span>Premium Super-App Service</span>
            </div>

            {/* Main Headline */}
            <h1 className="text-4xl sm:text-6xl font-black tracking-tight text-black leading-[1.1]">
              Your journey,{' '}
              <span className="relative inline-block underline decoration-black decoration-4 underline-offset-8">
                elevated
              </span>
            </h1>

            {/* Subheading */}
            <p className="text-base sm:text-lg text-neutral-600 leading-relaxed max-w-xl">
              Experience seamless food delivery from top-tier gourmet restaurants and comfortable on-demand cab rides with one unified account. Available 24/7 across 50+ cities.
            </p>

            {/* Action Buttons */}
            <div className="flex flex-wrap items-center gap-3 pt-2">
              <a
                href="/food"
                className="inline-flex items-center justify-center gap-2 rounded-full bg-black text-white px-7 py-3.5 text-sm font-semibold hover:bg-neutral-800 transition-all shadow-sm hover:scale-[1.02]"
              >
                <UtensilsCrossed className="h-4 w-4" />
                <span>Order Food Delivery</span>
                <ArrowRight className="h-4 w-4" />
              </a>

              <a
                href="/cab"
                className="inline-flex items-center justify-center gap-2 rounded-full bg-white text-black border border-neutral-300 px-7 py-3.5 text-sm font-semibold hover:bg-neutral-50 transition-all shadow-sm hover:scale-[1.02]"
              >
                <Car className="h-4 w-4" />
                <span>Book a Cab Ride</span>
                <ArrowRight className="h-4 w-4" />
              </a>
            </div>

            {/* Metrics matching ReadyCab stats */}
            <div className="grid grid-cols-3 gap-6 pt-8 border-t border-neutral-200/80 max-w-md">
              <div>
                <div className="text-2xl sm:text-3xl font-extrabold text-black">10M+</div>
                <div className="text-xs text-neutral-500 font-medium mt-0.5">Orders & Rides</div>
              </div>
              <div>
                <div className="text-2xl sm:text-3xl font-extrabold text-black flex items-center gap-1">
                  4.8 <Star className="h-4 w-4 fill-amber-400 text-amber-400" />
                </div>
                <div className="text-xs text-neutral-500 font-medium mt-0.5">Average rating</div>
              </div>
              <div>
                <div className="text-2xl sm:text-3xl font-extrabold text-black">50+</div>
                <div className="text-xs text-neutral-500 font-medium mt-0.5">Cities</div>
              </div>
            </div>

          </div>

          {/* Right Column: Interactive Card matching ReadyCab Booking Card */}
          <div className="lg:col-span-6">
            <div className="rounded-3xl border border-neutral-200/90 bg-white p-6 sm:p-8 shadow-xl">

              <h2 className="text-2xl font-bold text-black mb-6">
                Choose your experience
              </h2>

              {/* Service Mode Selector Tab matching ReadyCab */}
              <div className="text-xs font-semibold uppercase tracking-wider text-neutral-500 mb-2">
                Select service mode
              </div>
              <div className="grid grid-cols-2 rounded-xl bg-neutral-100 p-1 mb-6 border border-neutral-200/60">
                <button
                  type="button"
                  onClick={() => setActiveTab('food')}
                  className={`flex items-center justify-center gap-2 py-3 rounded-lg text-sm font-bold transition-all ${activeTab === 'food'
                      ? 'bg-black text-white shadow-sm'
                      : 'text-neutral-600 hover:text-black'
                    }`}
                >
                  <UtensilsCrossed className="h-4 w-4" />
                  Food Delivery
                </button>
                <button
                  type="button"
                  onClick={() => setActiveTab('cab')}
                  className={`flex items-center justify-center gap-2 py-3 rounded-lg text-sm font-bold transition-all ${activeTab === 'cab'
                      ? 'bg-black text-white shadow-sm'
                      : 'text-neutral-600 hover:text-black'
                    }`}
                >
                  <Car className="h-4 w-4" />
                  Cab Booking
                </button>
              </div>

              {/* Service Categories Grid */}
              <div className="text-xs font-semibold uppercase tracking-wider text-neutral-500 mb-2">
                {activeTab === 'food' ? 'Popular Food Categories' : 'Select trip type'}
              </div>

              {activeTab === 'food' ? (
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5 mb-6">
                  <a href="/food" className="flex flex-col items-center justify-center p-3.5 rounded-2xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 transition-all text-center group">
                    <UtensilsCrossed className="h-5 w-5 text-black mb-1.5 group-hover:scale-110 transition-transform" />
                    <span className="text-xs font-bold text-black">Delivery</span>
                  </a>
                  <a href="/food" className="flex flex-col items-center justify-center p-3.5 rounded-2xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 transition-all text-center group">
                    <Building className="h-5 w-5 text-black mb-1.5 group-hover:scale-110 transition-transform" />
                    <span className="text-xs font-bold text-black">Dining</span>
                  </a>
                  <a href="/food" className="flex flex-col items-center justify-center p-3.5 rounded-2xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 transition-all text-center group">
                    <ShoppingBag className="h-5 w-5 text-black mb-1.5 group-hover:scale-110 transition-transform" />
                    <span className="text-xs font-bold text-black">Grocery</span>
                  </a>
                  <a href="/food" className="flex flex-col items-center justify-center p-3.5 rounded-2xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 transition-all text-center group">
                    <Sparkles className="h-5 w-5 text-black mb-1.5 group-hover:scale-110 transition-transform" />
                    <span className="text-xs font-bold text-black">Catering</span>
                  </a>
                </div>
              ) : (
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5 mb-6">
                  <a href="/cab" className="flex flex-col items-center justify-center p-3.5 rounded-2xl bg-black text-white shadow-sm transition-all text-center">
                    <Car className="h-5 w-5 mb-1.5" />
                    <span className="text-xs font-bold">Local</span>
                  </a>
                  <a href="/cab" className="flex flex-col items-center justify-center p-3.5 rounded-2xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 transition-all text-center group">
                    <Compass className="h-5 w-5 text-black mb-1.5 group-hover:scale-110 transition-transform" />
                    <span className="text-xs font-bold text-black">Intercity</span>
                  </a>
                  <a href="/cab" className="flex flex-col items-center justify-center p-3.5 rounded-2xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 transition-all text-center group">
                    <Clock className="h-5 w-5 text-black mb-1.5 group-hover:scale-110 transition-transform" />
                    <span className="text-xs font-bold text-black">Hourly</span>
                  </a>
                  <a href="/cab" className="flex flex-col items-center justify-center p-3.5 rounded-2xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 transition-all text-center group">
                    <Plane className="h-5 w-5 text-black mb-1.5 group-hover:scale-110 transition-transform" />
                    <span className="text-xs font-bold text-black">Airport</span>
                  </a>
                </div>
              )}

              {/* Input Fields matching ReadyCab input boxes */}
              <div className="space-y-3 mb-6">
                {activeTab === 'food' ? (
                  <div className="flex items-center gap-3 rounded-2xl bg-neutral-50 border border-neutral-200/80 p-3.5">
                    <Search className="h-5 w-5 text-neutral-500 flex-shrink-0" />
                    <input
                      type="text"
                      placeholder="Search for restaurants, cuisines, or a dish..."
                      className="w-full bg-transparent text-sm text-black placeholder-neutral-400 focus:outline-none"
                    />
                  </div>
                ) : (
                  <>
                    <div className="flex items-center gap-3 rounded-2xl bg-neutral-50 border border-neutral-200/80 p-3.5">
                      <div className="h-2.5 w-2.5 rounded-full bg-emerald-500 flex-shrink-0"></div>
                      <input
                        type="text"
                        placeholder="Pickup location"
                        className="w-full bg-transparent text-sm text-black placeholder-neutral-400 focus:outline-none"
                      />
                    </div>
                    <div className="flex items-center gap-3 rounded-2xl bg-neutral-50 border border-neutral-200/80 p-3.5">
                      <div className="h-2.5 w-2.5 rounded-full bg-black flex-shrink-0"></div>
                      <input
                        type="text"
                        placeholder="Drop location"
                        className="w-full bg-transparent text-sm text-black placeholder-neutral-400 focus:outline-none"
                      />
                    </div>
                  </>
                )}
              </div>

              {/* Bottom Launch Button matching ReadyCab */}
              {activeTab === 'food' ? (
                <a
                  href="/food"
                  className="flex items-center justify-center gap-2 w-full rounded-2xl bg-black text-white py-4 text-sm font-bold hover:bg-neutral-800 transition-all shadow-md"
                >
                  <UtensilsCrossed className="h-4 w-4" />
                  <span>Launch ReadyEats Food Platform</span>
                  <ArrowRight className="h-4 w-4" />
                </a>
              ) : (
                <a
                  href="/cab"
                  className="flex items-center justify-center gap-2 w-full rounded-2xl bg-black text-white py-4 text-sm font-bold hover:bg-neutral-800 transition-all shadow-md"
                >
                  <Car className="h-4 w-4" />
                  <span>Launch ReadyCab Platform</span>
                  <ArrowRight className="h-4 w-4" />
                </a>
              )}

            </div>
          </div>

        </div>
      </section>

      {/* Feature Section with Clean Light Cards */}
      <section className="border-t border-neutral-200/80 bg-neutral-50/60 py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-2xl mx-auto mb-12">
            <h3 className="text-2xl sm:text-3xl font-black text-black tracking-tight">
              One Unified Account. Infinite Possibilities.
            </h3>
            <p className="text-sm text-neutral-600 mt-2">
              Switch effortlessly between food cravings and city rides with shared login credentials.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">

            <div className="rounded-2xl border border-neutral-200/80 bg-white p-6 shadow-sm">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 text-black mb-4">
                <UtensilsCrossed className="h-6 w-6" />
              </div>
              <h4 className="text-base font-bold text-black mb-1">ReadyEats Delivery</h4>
              <p className="text-xs text-neutral-600 leading-relaxed">
                Order from hundreds of top-rated restaurants, fast grocery essentials, and hot meals delivered in minutes.
              </p>
            </div>

            <div className="rounded-2xl border border-neutral-200/80 bg-white p-6 shadow-sm">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 text-black mb-4">
                <Car className="h-6 w-6" />
              </div>
              <h4 className="text-base font-bold text-black mb-1">ReadyCab Rides</h4>
              <p className="text-xs text-neutral-600 leading-relaxed">
                Hail city rides, outstation cabs, and airport transfers with verified chauffeurs and upfront transparent pricing.
              </p>
            </div>

            <div className="rounded-2xl border border-neutral-200/80 bg-white p-6 shadow-sm">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 text-black mb-4">
                <ShieldCheck className="h-6 w-6" />
              </div>
              <h4 className="text-base font-bold text-black mb-1">Single Sign-On Security</h4>
              <p className="text-xs text-neutral-600 leading-relaxed">
                Authenticate once via phone OTP and seamlessly access both microfrontends without re-authenticating.
              </p>
            </div>

          </div>
        </div>
      </section>

    </div>
  );
}