'use client'

import React, { useState } from 'react'
import Image from 'next/image'
import { 
  ArrowUpRight, Zap, RefreshCw, Clock, Target, Truck, Coffee, Cloud, 
  UtensilsCrossed, ChefHat, Gem, Users, Store, Beer, Flame, 
  Pizza, Sandwich, IceCream, Wine, Soup, Beef, Utensils, 
  ChevronLeft, ChevronRight, Layers 
} from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
import Link from 'next/link'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import Testimonials from '@/components/Testimonials'

const RESTAURANT_TYPES = [
  {
    label: "Fast Food",
    icon: Zap,
    description: "Handle high-volume orders with lightning-fast billing, instant kitchen sync, and peak-hour performance optimization.",
    angle: 0,
    href: "/restaurant-types/fast-food",
  },
  {
    label: "Food Truck",
    icon: Truck,
    description: "Run your food truck from anywhere with a mobile-ready POS, simplified menu control, and real-time sales tracking.",
    angle: 45,
    href: "/restaurant-types/food-truck",
  },
  {
    label: "Cafe & Bistro",
    icon: Coffee,
    description: "Deliver smooth table service, quick counter billing, and loyalty-ready customer management in one compact system.",
    angle: 90,
    href: "/restaurant-types/cafe-bistro",
  },
  {
    label: "Ghost Kitchen",
    icon: Cloud,
    description: "Centralize delivery orders, manage multiple platforms, and optimize kitchen workflows for delivery-first operations.",
    angle: 135,
    href: "/restaurant-types/ghost-kitchen",
  },
  {
    label: "Full Service",
    icon: UtensilsCrossed,
    description: "Coordinate front-of-house and kitchen operations seamlessly with reservations, table control, and staff synchronization.",
    angle: 180,
    href: "/restaurant-types/full-service",
  },
  {
    label: "Bakery",
    icon: ChefHat,
    description: "Track daily inventory, manage batch production, and streamline pre-orders with precision and efficiency.",
    angle: 225,
    href: "/restaurant-types/bakery",
  },
  {
    label: "Fine Dine",
    icon: Gem,
    description: "Elevate premium dining with reservation accuracy, table layout control, and detailed performance analytics.",
    angle: 270,
    href: "/restaurant-types/fine-dine",
  },
  {
    label: "Family Style",
    icon: Users,
    description: "Manage large group dining, shared tables, and flexible seating arrangements without operational confusion.",
    angle: 315,
    href: "/restaurant-types/family-style",
  },
  {
    label: "Fast Casual",
    icon: Flame,
    description: "Combine speed with quality service. Our POS handles unique workflows for restaurants that bridge the gap between fast food and fine dining.",
    href: "/restaurant-types/fast-casual",
  },
  {
    label: "Diner",
    icon: Store,
    description: "Classic desk service meets modern tech. Manage high-turnover seating, complicated breakfast orders, and multi-staff coordination with ease.",
    href: "/restaurant-types/diner",
  },
  {
    label: "Pub",
    icon: Beer,
    description: "Built for busy bars and pubs. Track open tabs, manage age-restricted items, and handle lightning-fast counter rounds flawlessly.",
    href: "/restaurant-types/pub",
  },
  {
    label: "Italian / Pizza",
    icon: Pizza,
    description: "Specialized for modifiers and toppings. Manage ingredient inventory, delivery zones, and custom modifiers with ease.",
    href: "/restaurant-types/italian-pizza",
  },
  {
    label: "Steakhouse",
    icon: Beef,
    description: "Focus on precision. Manage specific meat aging, cooking temperatures, and premium wine pairings for high-ticket service.",
    href: "/restaurant-types/steakhouse",
  },
  {
    label: "Seafood",
    icon: Utensils,
    description: "Handle fresh catch inventory, fluctuating market pricing, and seasonal menu changes with our flexible management system.",
    href: "/restaurant-types/seafood",
  },
  {
    label: "Buffet",
    icon: Layers,
    description: "Optimized for self-service or staff-assisted buffets. Track wastage, manage entry payments, and monitor kitchen refill rates.",
    href: "/restaurant-types/buffet",
  },
  {
    label: "Bistro",
    icon: Wine,
    description: "Small plates, big impact. Manage cozy seating layouts, rotating wine lists, and intimate guest experiences efficiently.",
    href: "/restaurant-types/bistro",
  },
  {
    label: "Cafeteria",
    icon: Soup,
    description: "Built for institutional or corporate cafeterias. Handle meal plans, quick-tap payments, and large-scale bulk ordering.",
    href: "/restaurant-types/cafeteria",
  },
  {
    label: "Teppanyaki",
    icon: Flame,
    description: "Experience-led dining. Sync chef stations with POS orders and manage theater-style seating arrangements.",
    href: "/restaurant-types/teppanyaki",
  },
  {
    label: "Contemporary Casual",
    icon: Zap,
    description: "Modern tech for modern dining. Integrated QR ordering, mobile payments, and tableside service for trend-setting restaurants.",
    href: "/restaurant-types/contemporary-casual",
  },
  {
    label: "Buffet",
    icon: UtensilsCrossed,
    description: "Manage large scale dining with ticket entry systems, kitchen replenishment notifications, and wastage tracking.",
    href: "/restaurant-types/buffet",
  },
  {
    label: "Ghost Restaurant",
    icon: Cloud,
    description: "Virtual brands, real profits. Manage multiple digital storefronts from one kitchen and sync with all major delivery apps.",
    href: "/restaurant-types/ghost-restaurant",
  },
  {
    label: "Delivery Only",
    icon: Truck,
    description: "Focus on the fleet. Optimize dispatching, track delivery times, and manage third-party integration from a single order screen.",
    href: "/restaurant-types/delivery-only",
  },
  {
    label: "Concession",
    icon: Sandwich,
    description: "Built for stadiums and events. Handle extreme peak waves with offline-readiness and high-speed tap-to-pay processing.",
    href: "/restaurant-types/concession",
  },
  {
    label: "Ice Cream Shop",
    icon: IceCream,
    description: "Cold treats, hot sales. Manage complex modifier chains, seasonal flavors, and high-frequency transactions with ease.",
    href: "/restaurant-types/ice-cream-shop",
  },
]

const HERO_IMAGES = [
  {
    src: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=800",
    alt: "Fine Dining",
    label: "Full Service"
  },
  {
    src: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&q=80&w=800",
    alt: "Fast Food",
    label: "Fast Food"
  },
  {
    src: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&q=80&w=800",
    alt: "Cafe Bistro",
    label: "Cafe & Bistro"
  },
  {
    src: "https://images.unsplash.com/photo-1567521464027-f127ff144326?auto=format&fit=crop&q=80&w=800",
    alt: "Ghost Kitchen",
    label: "Ghost Kitchen"
  }
]

const SEO_TAGS = [
  "Menumium Restaurant Software for Every Type of Restaurant",
  "Smart Operations With Menumium Restaurant Software Features",
  "Manage Orders to Operations with Menumium"
]

const RESTAURANT_TYPE_EMOJIS: Record<string, string> = {
  "Fast Food": "🍟",
  "Food Truck": "🚚",
  "Cafe & Bistro": "☕",
  "Ghost Kitchen": "🧑‍🍳",
  "Full Service": "🍽️",
  "Bakery": "🥐",
  "Fine Dine": "🛎️",
  "Family Style": "🧑‍🤝‍🧑",
}

const RestaurantTypesPage = () => {
  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)
  const [hoveredCardIdx, setHoveredCardIdx] = useState<number | null>(null)
  const [currentPage, setCurrentPage] = useState(0)
  const [direction, setDirection] = useState(1) // 1 for next, -1 for previous
  const itemsPerPage = 8
  const totalPages = Math.ceil(RESTAURANT_TYPES.length / itemsPerPage)

  const nextPage = () => {
    setDirection(1)
    setCurrentPage((prev) => (prev + 1) % totalPages)
  }

  const prevPage = () => {
    setDirection(-1)
    setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages)
  }

  const currentItems = RESTAURANT_TYPES.slice(
    currentPage * itemsPerPage,
    (currentPage + 1) * itemsPerPage
  )

  const diagramItems = RESTAURANT_TYPES.slice(0, 8)

  return (
    <div className="min-h-screen bg-black font-sans selection:bg-red-600 selection:text-white">
      <Navbar />

      <main>

        {/* ─── HERO SECTION ─────────────────────────────────────────────── */}
        <section className="relative min-h-screen flex items-center pt-28 pb-16 px-6 overflow-hidden">

          {/* Background noise/grid */}
          <div className="absolute inset-0 z-0">
            <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff06_1px,transparent_1px),linear-gradient(to_bottom,#ffffff06_1px,transparent_1px)] bg-size-[64px_64px]" />
            <div className="absolute top-0 left-0 w-150 h-150 bg-red-600/10 rounded-full blur-[120px] -translate-x-1/3 -translate-y-1/3" />
            <div className="absolute bottom-0 right-0 w-100 h-100 bg-red-900/10 rounded-full blur-[100px] translate-x-1/4 translate-y-1/4" />
          </div>

          <div className="relative z-10 max-w-7xl mx-auto w-full grid lg:grid-cols-2 gap-12 xl:gap-20 items-center">

            {/* LEFT — Typography */}
            <div className="flex flex-col gap-7">

              {/* Badge */}
              <motion.div
                initial={{ opacity: 0, y: 16 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                className="flex items-center gap-2 w-fit"
              >
                <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
                <span className="text-red-500 font-bold tracking-[0.22em] uppercase text-xs">
                  YOUR RESTAURANT’S BEST PARTNER
                </span>
              </motion.div>

              {/* Heading */}
              <motion.h1
                initial={{ opacity: 0, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.1 }}
                className="text-[clamp(2.6rem,6vw,5.5rem)] font-black text-white leading-[1.02] tracking-tight"
              >
                All-In-One
                <br />
                Solution For
                <br />
                <span className="text-red-600   font-light">Every Type</span>
                <br />
                of Restaurant
              </motion.h1>

              {/* Description */}
              <motion.p
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.2 }}
                className="text-base lg:text-lg text-gray-400 leading-relaxed max-w-lg font-medium"
              >
                One powerful platform built to handle orders, billing, reservations, kitchen coordination, inventory, and analytics — all in one seamless system. Dine360 simplifies operations so you can focus on delivering exceptional dining experiences.
              </motion.p>

              {/* CTAs */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.3 }}
                className="flex flex-col sm:flex-row gap-3"
              >
                <Link
                  href="/contact"
                  className="inline-flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-full font-bold text-base transition-all shadow-lg shadow-red-600/25 active:scale-95"
                >
                  Start Free Now →
                </Link>
                <Link
                  href="/contact"
                  className="inline-flex items-center justify-center gap-2 border border-white/20 hover:border-white/50 text-white px-8 py-4 rounded-full font-bold text-base transition-all hover:bg-white/5 active:scale-95"
                >
                  Book a Demo
                </Link>
              </motion.div>

              {/* SEO Tag Pills */}
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.7, delay: 0.5 }}
                className="flex flex-wrap gap-2 pt-2"
              >
                {SEO_TAGS.map((tag, i) => (
                  <span
                    key={i}
                    className="text-[10px] font-semibold text-gray-500 border border-white/8 px-3 py-1.5 rounded-full bg-white/3 leading-tight"
                  >
                    {tag}
                  </span>
                ))}
              </motion.div>
            </div>

            {/* RIGHT — Image Grid */}
            <div className="relative grid grid-cols-2 gap-3 h-130 lg:h-140">
              {/* Col 1 — tall + short */}
              <div className="flex flex-col gap-3">
                <motion.div
                  initial={{ opacity: 0, y: 30 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.7, delay: 0.2 }}
                  className="relative flex-2 rounded-2xl overflow-hidden border border-white/8 group"
                >
                  <Image
                    src={HERO_IMAGES[0].src}
                    alt={HERO_IMAGES[0].alt}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/10 to-transparent" />
                  <div className="absolute bottom-3 left-3 flex items-center gap-1.5">
                    <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
                    <span className="text-white text-[11px] font-bold tracking-wide">{HERO_IMAGES[0].label}</span>
                  </div>
                </motion.div>
                <motion.div
                  initial={{ opacity: 0, y: 30 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.7, delay: 0.35 }}
                  className="relative flex-1 rounded-2xl overflow-hidden border border-white/8 group"
                >
                  <Image
                    src={HERO_IMAGES[1].src}
                    alt={HERO_IMAGES[1].alt}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/10 to-transparent" />
                  <div className="absolute bottom-3 left-3 flex items-center gap-1.5">
                    <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
                    <span className="text-white text-[11px] font-bold tracking-wide">{HERO_IMAGES[1].label}</span>
                  </div>
                </motion.div>
              </div>

              {/* Col 2 — short + tall (offset) */}
              <div className="flex flex-col gap-3 pt-10">
                <motion.div
                  initial={{ opacity: 0, y: 30 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.7, delay: 0.45 }}
                  className="relative flex-1 rounded-2xl overflow-hidden border border-white/8 group"
                >
                  <Image
                    src={HERO_IMAGES[2].src}
                    alt={HERO_IMAGES[2].alt}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/10 to-transparent" />
                  <div className="absolute bottom-3 left-3 flex items-center gap-1.5">
                    <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
                    <span className="text-white text-[11px] font-bold tracking-wide">{HERO_IMAGES[2].label}</span>
                  </div>
                </motion.div>
                <motion.div
                  initial={{ opacity: 0, y: 30 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.7, delay: 0.55 }}
                  className="relative flex-2 rounded-2xl overflow-hidden border border-white/8 group"
                >
                  <Image
                    src={HERO_IMAGES[3].src}
                    alt={HERO_IMAGES[3].alt}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/10 to-transparent" />
                  <div className="absolute bottom-3 left-3 flex items-center gap-1.5">
                    <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
                    <span className="text-white text-[11px] font-bold tracking-wide">{HERO_IMAGES[3].label}</span>
                  </div>
                </motion.div>
              </div>

              {/* Floating stat badge */}
              <motion.div
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5, delay: 0.8 }}
                className="absolute -left-4 bottom-16 bg-red-600 text-white px-4 py-3 rounded-2xl shadow-2xl shadow-red-600/40 z-10"
              >
                <p className="text-[10px] font-bold opacity-80 uppercase tracking-wide">Restaurants Served</p>
                <p className="text-2xl font-black leading-tight">2,460+</p>
              </motion.div>
            </div>

          </div>
        </section>

        {/* ─── PERFORMANCE JOURNEY ───────────────────────────────────── */}
        <section className="py-20 px-4 sm:px-6 lg:px-8 bg-white text-zinc-900">
          <div className="max-w-5xl mx-auto">
          <div className="text-center mb-16">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="text-red-600 font-bold uppercase tracking-[0.2em] text-[10px] mb-3"
            >
              DINE360 PERFORMANCE
            </motion.div>
            <motion.h2
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="text-3xl md:text-4xl font-black text-zinc-900 mb-4"
            >
              The Performance Journey
            </motion.h2>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
              className="text-zinc-600 max-w-2xl mx-auto text-sm leading-relaxed"
            >
              Transforming restaurant operations with intelligent automation and real-time control. Dine360 is built to increase speed, accuracy, and operational efficiency at every stage of service.
            </motion.p>
          </div>

          <div className="relative max-w-4xl mx-auto">

            {/* Step 1: Left */}
            <div className="flex flex-col md:flex-row items-center relative">
              <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-black rounded-l-[100px] z-0" />
              <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
                <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg border border-zinc-100">
                  <Image src="https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&q=80&w=800" alt="Fast Processing" fill className="object-cover" />
                </div>
              </div>
              <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
                <div className="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center text-red-600 mb-4">
                  <Zap className="w-5 h-5" />
                </div>
                <h3 className="text-xl font-bold text-zinc-900 mb-3">3X Faster Order Processing</h3>
                <p className="text-zinc-600 text-sm leading-relaxed font-medium">
                  Accelerate billing, kitchen coordination, and service delivery with an optimized order flow. Dine360 reduces processing time so your team serves more customers without increasing pressure.
                </p>
              </div>
            </div>

            {/* Step 2: Right */}
            <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-black rounded-r-[100px] z-0" />
              <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
                <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg border border-zinc-100">
                  <Image src="https://images.unsplash.com/photo-1556742044-3c52d6e88c62?auto=format&fit=crop&q=80&w=800" alt="Order Syncing" fill className="object-cover" />
                </div>
              </div>
              <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
                <div className="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center text-red-600 mb-4">
                  <RefreshCw className="w-5 h-5" />
                </div>
                <h3 className="text-xl font-bold text-zinc-900 mb-3">Instant Order Syncing</h3>
                <p className="text-zinc-600 text-sm leading-relaxed font-medium">
                  Eliminate communication gaps between counter, kitchen, and delivery. Orders are updated in real time across all connected devices — ensuring everyone works from the same source of truth.
                </p>
              </div>
            </div>

            {/* Step 3: Left */}
            <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
              <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-black rounded-l-[100px] z-0" />
              <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
                <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg border border-zinc-100">
                  <Image src="https://images.unsplash.com/photo-1556745753-b2904692b3cd?auto=format&fit=crop&q=80&w=800" alt="Zero Delays" fill className="object-cover" />
                </div>
              </div>
              <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
                <div className="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center text-red-600 mb-4">
                  <Clock className="w-5 h-5" />
                </div>
                <h3 className="text-xl font-bold text-zinc-900 mb-3">Zero Order Delays</h3>
                <p className="text-zinc-600 text-sm leading-relaxed font-medium">
                  Keep service running smoothly even during peak hours. Smart queue management and live status tracking prevent bottlenecks before they happen.
                </p>
              </div>
            </div>

            {/* Step 4: Right */}
            <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-black rounded-r-[100px] z-0" />
              <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
                <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg border border-zinc-100">
                  <Image src="https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?auto=format&fit=crop&q=80&w=800" alt="Order Accuracy" fill className="object-cover" />
                </div>
              </div>
              <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
                <div className="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center text-red-600 mb-4">
                  <Target className="w-5 h-5" />
                </div>
                <h3 className="text-xl font-bold text-zinc-900 mb-3">100% Order Accuracy</h3>
                <p className="text-zinc-600 text-sm leading-relaxed font-medium">
                  Reduce costly mistakes with live validation, confirmation prompts, and structured order workflows. Deliver exactly what was ordered — every single time.
                </p>
              </div>
            </div>

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

        {/* ─── RESTAURANT TYPES RADIAL ──────────────────────────────────── */}
        <section className="py-32 px-4 sm:px-6 lg:px-8 overflow-hidden">
          <div className="max-w-7xl mx-auto">

            {/* Header */}
            <div className="text-center mb-16">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                className="text-zinc-500 font-bold uppercase tracking-[0.2em] text-[10px] mb-3"
              >
                DINE360 FOR EVERYONE
              </motion.div>
              <motion.h2
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                className="text-4xl md:text-5xl font-black text-white mb-4"
              >
                Built for All Restaurant Types
              </motion.h2>
              <motion.p
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.1 }}
                className="text-zinc-400 max-w-xl mx-auto text-sm leading-relaxed"
              >
                No matter your service style or scale, Dine360 adapts to your operations — delivering speed, control, and growth across every format.
              </motion.p>
            </div>

            {/* Radial Diagram */}
            <motion.div
              initial={{ opacity: 0, scale: 0.92 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="flex items-center justify-center"
            >
              <div className="relative w-210 h-210 max-w-[min(840px,92vw)] max-h-[min(840px,92vw)]">

                {/* SVG dashed lines — start from inner circle edge so nothing drawn inside */}
                <svg
                  className="absolute inset-0 w-full h-full pointer-events-none"
                  viewBox="0 0 580 580"
                >
                  {diagramItems.map((type, idx) => {
                    const angle = type.angle ?? (idx * (360 / diagramItems.length))
                    const rad = (angle * Math.PI) / 180
                    const r = 210
                    const rInner = 90
                    const x1 = 290 + rInner * Math.sin(rad)
                    const y1 = 290 - rInner * Math.cos(rad)
                    const x2 = 290 + r * Math.sin(rad)
                    const y2 = 290 - r * Math.cos(rad)
                    const isHovered = hoveredIdx === idx
                    const anyHovered = hoveredIdx !== null
                    return (
                      <line
                        key={idx}
                        x1={x1} y1={y1}
                        x2={x2} y2={y2}
                        stroke="#dc2626"
                        strokeWidth={1.2}
                        strokeDasharray="5 5"
                        opacity={anyHovered ? (isHovered ? 0.7 : 0.1) : 0.7}
                        style={{ transition: 'opacity 0.4s' }}
                      />
                    )
                  })}
                </svg>

                {/* Center Circle */}
                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                  <div
                    className="w-72 h-72 rounded-full border-2 border-red-600 flex flex-col items-center justify-center text-center px-7 overflow-hidden"
                    style={{ background: 'radial-gradient(circle, rgba(220,38,38,0.08) 0%, transparent 70%)' }}
                  >
                    <AnimatePresence mode="wait">
                      {hoveredIdx === null ? (
                        <motion.div
                          key="default"
                          initial={{ opacity: 0, y: 6 }}
                          animate={{ opacity: 1, y: 0 }}
                          exit={{ opacity: 0, y: -6 }}
                          transition={{ duration: 0.22 }}
                          className="flex flex-col items-center gap-3"
                        >
                          <span className="text-red-500 font-black uppercase tracking-[0.25em] text-[11px]">DINE360</span>
                          <span className="text-white font-black text-lg leading-tight">Built for Every Restaurant Model</span>
                          <span className="text-gray-300 text-xs leading-relaxed max-w-[200px] font-medium">
                            One system. Unlimited possibilities. From small independent outlets to multi-branch operations, Dine360 powers modern restaurant performance.
                          </span>
                        </motion.div>
                      ) : (
                        <motion.div
                          key={`hovered-${hoveredIdx}`}
                          initial={{ opacity: 0, y: 6 }}
                          animate={{ opacity: 1, y: 0 }}
                          exit={{ opacity: 0, y: -6 }}
                          transition={{ duration: 0.22 }}
                          className="flex flex-col items-center gap-2"
                        >
                          <span className="text-red-500 font-black uppercase tracking-[0.18em] text-[10px]">
                            {diagramItems[hoveredIdx].label}
                          </span>
                          <span className="text-white text-sm leading-snug font-semibold">
                            {diagramItems[hoveredIdx].description}
                          </span>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                </div>

                {/* Nodes */}
                {diagramItems.map((type, idx) => {
                  const angle = type.angle ?? (idx * (360 / diagramItems.length))
                  const rad = (angle * Math.PI) / 180
                  const r = 210
                  const cx = 290 + r * Math.sin(rad)
                  const cy = 290 - r * Math.cos(rad)
                  const isHovered = hoveredIdx === idx
                  const anyHovered = hoveredIdx !== null
                  return (
                    <Link
                      key={idx}
                      href={type.href}
                      className="absolute flex flex-col items-center gap-2 cursor-pointer"
                      style={{
                        left: `${(cx / 580) * 100}%`,
                        top: `${(cy / 580) * 100}%`,
                        transform: 'translate(-50%, -50%)',
                      }}
                      onMouseEnter={() => setHoveredIdx(idx)}
                      onMouseLeave={() => setHoveredIdx(null)}
                    >
                      <div
                        className="w-16 h-16 rounded-full border flex items-center justify-center transition-all duration-300"
                        style={{
                          background: isHovered ? '#dc2626' : '#18181b',
                          borderColor: isHovered ? '#dc2626' : anyHovered ? '#3f3f46' : '#3f3f46',
                          transform: isHovered ? 'scale(1.15)' : 'scale(1)',
                          opacity: anyHovered && !isHovered ? 0.4 : 1,
                          boxShadow: isHovered ? '0 0 24px rgba(220,38,38,0.5)' : 'none',
                        }}
                      >
                        <type.icon
                          className="w-7 h-7 transition-colors duration-300"
                          style={{ color: isHovered ? '#fff' : '#a1a1aa' }}
                        />
                      </div>
                      <span
                        className="text-xs font-bold uppercase tracking-widest whitespace-nowrap transition-all duration-300"
                        style={{
                          color: isHovered ? '#ffffff' : anyHovered ? '#52525b' : '#e4e4e7',
                        }}
                      >
                        {type.label}
                      </span>
                    </Link>
                  )
                })}

              </div>
            </motion.div>

          </div>
        </section>

        {/* ─── RESTAURANT TYPES CARD GRID ─────────────────────────────── */}
        <section className="py-20 sm:py-24 px-4 sm:px-6 lg:px-8 bg-white border-t border-white/5 relative">
          {/* Subtle noise pattern for texture */}
          <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)', backgroundSize: '16px 16px' }}></div>

          <div className="max-w-7xl mx-auto relative z-10">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, amount: 0.2 }}
              transition={{ duration: 0.45 }}
              className="mb-12 text-center"
            >
              <p className="text-red-600 font-bold uppercase tracking-[0.3em] text-[11px] mb-3">Explore All Models</p>
              <h3 className="text-black text-3xl sm:text-4xl md:text-5xl font-black mb-6">Designed For Every Scale</h3>
              <div className="flex items-center justify-center gap-6">
                <button 
                  onClick={prevPage}
                  className="group relative flex items-center justify-center w-14 h-14 transition-all active:scale-95"
                  aria-label="Previous Page"
                >
                  <div className="absolute inset-0 rounded-2xl border border-black/50 bg-white shadow-sm group-hover:border-red-600 transition-colors" />
                  <div className="absolute inset-0 rounded-2xl bg-red-600 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-90 group-hover:scale-100" />
                  <ChevronLeft className="relative w-6 h-6 text-black group-hover:text-white transition-colors" />
                </button>

                <div className="flex gap-2 bg-black/5 px-4 py-3 rounded-2xl">
                  {[...Array(totalPages)].map((_, i) => (
                    <button
                      key={i}
                      onClick={() => setCurrentPage(i)}
                      className={`h-2 rounded-full transition-all duration-300 ${
                        currentPage === i ? 'w-8 bg-red-600 shadow-sm shadow-red-600/30' : 'w-2 bg-black/20 hover:bg-black/40'
                      }`}
                    />
                  ))}
                </div>

                <button 
                  onClick={nextPage}
                  className="group relative flex items-center justify-center w-14 h-14 transition-all active:scale-95"
                  aria-label="Next Page"
                >
                  <div className="absolute inset-0 rounded-2xl border border-black/50 bg-white shadow-sm group-hover:border-red-600 transition-colors" />
                  <div className="absolute inset-0 rounded-2xl bg-red-600 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-90 group-hover:scale-100" />
                  <ChevronRight className="relative w-6 h-6 text-black group-hover:text-white transition-colors" />
                </button>
              </div>
            </motion.div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 perspective-[2000px]">
              <AnimatePresence mode="wait">
                <motion.div
                  key={currentPage}
                  className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 col-span-full"
                  style={{ transformStyle: 'preserve-3d' }}
                >
                  {currentItems.map((type, idx) => {
                    const isHovered = hoveredCardIdx === idx

                    return (
                      <motion.div
                        key={type.label}
                        initial={{ opacity: 0, rotateY: 180 * direction, scale: 0.8 }}
                        animate={{ 
                          opacity: 1, 
                          rotateY: 0,
                          scale: 1,
                          transition: { 
                            delay: direction === 1 ? idx * 0.1 : (7 - idx) * 0.1, 
                            duration: 0.7, 
                            ease: [0.34, 1.56, 0.64, 1] 
                          }
                        }}
                        exit={{ 
                          opacity: 0, 
                          rotateY: -180 * direction,
                          scale: 0.8,
                          transition: { 
                            delay: direction === 1 ? (7 - idx) * 0.05 : idx * 0.05, 
                            duration: 0.5 
                          } 
                        }}
                        whileHover={{ y: -8 }}
                        className="h-full"
                        style={{ transformStyle: 'preserve-3d', backfaceVisibility: 'hidden' }}
                      >
                        <Link
                          href={type.href}
                          className="group block rounded-3xl border transition-all duration-500 relative overflow-hidden h-full p-7"
                          style={{
                            backgroundColor: isHovered ? '#ffffff' : '#111111',
                            borderColor: isHovered ? '#dc2626' : 'rgba(255,255,255,0.05)',
                            boxShadow: isHovered ? '0 30px 60px -12px rgba(220,38,38,0.2)' : '0 10px 30px -10px rgba(0,0,0,0.5)',
                          }}
                          onMouseEnter={() => setHoveredCardIdx(idx)}
                          onMouseLeave={() => setHoveredCardIdx(null)}
                        >
                          {/* Hover Accent Line */}
                          <div className={`absolute top-0 left-0 w-full h-1.5 bg-red-600 transition-transform duration-500 ${isHovered ? 'translate-y-0' : '-translate-y-full'}`} />

                          <div 
                            className={`w-14 h-14 rounded-2xl border flex items-center justify-center mb-6 transition-all duration-500 relative z-10 ${
                              isHovered 
                                ? 'bg-red-600 border-red-600 text-white shadow-lg shadow-red-600/30 rotate-12' 
                                : 'bg-red-600/10 border-red-900/20 text-red-500'
                            }`}
                          >
                            <type.icon aria-hidden="true" className="w-7 h-7" />
                          </div>

                          <h4 className={`text-2xl font-black mb-3 leading-tight relative z-10 transition-colors duration-300 ${
                            isHovered ? 'text-zinc-900' : 'text-white'
                          }`}>
                            {type.label}
                          </h4>
                          
                          <p className={`text-sm leading-relaxed mb-8 relative z-10 transition-colors duration-300 ${
                            isHovered ? 'text-zinc-600' : 'text-zinc-400'
                          }`}>
                            {type.description}
                          </p>

                          <div className="mt-auto flex items-center justify-between relative z-10">
                            <span
                              className={`text-xs font-black uppercase tracking-wider flex items-center gap-1 transition-colors duration-300 ${
                                isHovered ? 'text-red-600' : 'text-white/40'
                              }`}
                            >
                              Learn More <ArrowUpRight className="w-3.5 h-3.5" />
                            </span>
                          </div>
                        </Link>
                      </motion.div>
                    )
                  })}
                </motion.div>
              </AnimatePresence>
            </div>
          </div>
        </section>

        {/* ─── TESTIMONIALS ─────────────────────────────────────────────── */}
        <Testimonials />

      </main>

      <Footer />
    </div>
  )
}

export default RestaurantTypesPage
