'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';
import Link from 'next/link';

const features = [
  {
    category: "POS",
    title: "Smart POS System",
    description: "Running your restaurant is now easier with a multi-functional POS system. It helps you manage every part of the counter experience.",
    points: [
      "Lightning-fast billing",
      "Dine-in, takeaway & delivery support",
      "Split bills & multiple payment methods",
      "Real-time sales reports"
    ],
    image: "https://images.unsplash.com/photo-1556742044-3c52d6e88c62?q=80&w=2070",
    link: "/features/pos-management" 
  },
  {
    category: "Order Management",
    title: "Order Management",
    description: "Ensure every order is tracked, updated, and handled swiftly. No delays. No mistakes. Just smooth operations.",
    points: [
      "Track all orders in one dashboard",
      "Kitchen display integration",
      "Reduce human errors",
      "Improve preparation time"
    ],
    image: "https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?q=80&w=2070",
    link: "/features/order-management"
  },
  {
    category: "Table & Reservation",
    title: "Table & Reservation Management",
    description: "Take charge of your floor’s seating and reservations with a smart, easy-to-use system that saves time and increases efficiency.",
    points: [
      "Digital table layout",
      "Pre-booking system",
      "Walk-in management",
      "Reduce waiting chaos"
    ],
    image: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2070",
    link: "/features/table-reservation"
  },
  {
    category: "QR Code Menu",
    title: "QR Code Menu",
    description: "Simplify your ordering process and watch your sales grow with our effective QR code menu features.",
    points: [
      "Contactless digital menu",
      "Easy updates",
      "No reprinting costs",
      "Faster ordering experience"
    ],
    image: "https://images.unsplash.com/photo-1513151233558-d860c5398176?q=80&w=2144",
    link: "/features/qr-code-menu"
  },
  {
    category: "Inventory Management",
    title: "Inventory Management",
    description: "Maximize efficiency with a system that simplifies the complexities of inventory management.",
    points: [
      "Real-time stock tracking",
      "Low-stock alerts",
      "Ingredient-level tracking",
      "Reduce wastage & theft"
    ],
    image: "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?q=80&w=2074",
    link: "/features/inventory-management" 
  },
  {
    category: "Multi-Branch Control",
    title: "Multi-Branch Control",
    description: "Manage your restaurant empire from a single location with centralized branch management tools.",
    points: [
      "Manage multiple outlets from one dashboard",
      "Centralized reporting",
      "Branch performance comparison"
    ],
    image: "https://images.unsplash.com/photo-1546241072-48010ad2862c?q=80&w=1974",
    link: "/features/multi-menu-management" 
  },
  {
    category: "Promotions",
    title: "Marketing & Promotions",
    description: "Boost your sales with targeted marketing campaigns and automated promotional tools designed for restaurants.",
    points: [
      "Create custom discount codes",
      "Schedule happy hour deals",
      "Automated SMS/Email marketing",
      "Track campaign performance"
    ],
    image: "https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=2074",
    link: "/features/promotions"
  },
  {
    category: "Website & Ordering",
    title: "Website & Online Ordering",
    description: "Take direct orders from your own branded website and reduce dependency on expensive third-party apps.",
    points: [
      "Custom branded restaurant website",
      "Direct commission-free ordering",
      "Real-time menu sync",
      "Mobile-optimized experience"
    ],
    image: "https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&w=2072",
    link: "/features/restaurant-website"
  },
  {
    category: "Business Dashboard",
    title: "Advanced Business Dashboard",
    description: "Make data-driven decisions with a comprehensive dashboard that gives you a 360-degree view of your business.",
    points: [
      "Real-time revenue tracking",
      "Sales trends & analytics",
      "Staff performance metrics",
      "Exportable financial reports"
    ],
    image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2026",
    link: "/features/business-dashboard"
  }
];

const FeaturesSection = () => {
  return (
    <section id="features" className="py-24 px-6 bg-white relative overflow-hidden">
      {/* Decorative Background Elements */}
      <div className="absolute top-0 left-0 w-full h-full pointer-events-none opacity-10">
         <div className="absolute top-20 left-10 w-64 h-64 bg-red-600/10 blur-[100px] rounded-full"></div>
         <div className="absolute bottom-20 right-10 w-96 h-96 bg-red-800/10 blur-[120px] rounded-full"></div>
      </div>

      <div className="max-w-7xl mx-auto relative z-10">
        
        {/* Section Header */}
        <motion.div 
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="text-center mb-20 max-w-5xl mx-auto"
        >
          <span className="text-red-500 font-script text-3xl md:text-4xl mb-4 block italic">The Complete Restaurant Toolkit</span>
          <h2 className="text-2xl md:text-3xl lg:text-4xl font-extrabold text-black mb-4 leading-tight uppercase">
            Reimagine Restaurant Management
          </h2>
          <h2 className="text-2xl md:text-3xl lg:text-4xl font-extrabold text-red-600 mb-8 leading-tight uppercase">
            with Powerful Features
          </h2>
          <p className="text-gray-600 text-lg md:text-xl max-w-3xl mx-auto">
            Our restaurant management platform offers powerful tools to automate operations, improve workflows, and ensure a better dining experience for your customers.
          </p>
        </motion.div>

        {/* Features List */}
        <div className="flex flex-col gap-24">
          {features.map((feature, index) => (
            <motion.div 
              key={index} 
              initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.8, delay: 0.1 }}
              className={`flex flex-col lg:flex-row items-center gap-10 ${index % 2 !== 0 ? 'lg:flex-row-reverse' : ''}`}
            >
              
              {/* Image Side */}
              <div className="w-full lg:w-1/2 relative group">
                <div className="absolute -inset-6 bg-red-600/10 rounded-[4rem] blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
                <div className="relative h-[450px] w-full rounded-[4rem] rounded-tr-2xl rounded-bl-2xl overflow-hidden border-2 border-zinc-200 bg-white shadow-xl transition-all duration-500 group-hover:shadow-2xl group-hover:-translate-y-2">
                   {/* Placeholder image overlay */}
                   <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent z-10"></div>
                   <Image 
                     src={feature.image} 
                     alt={feature.title} 
                     fill 
                     className="object-cover transition-transform duration-1000 group-hover:scale-110"
                   />
                   
                   {/* Corner Decorations */}
                   <div className="absolute top-4 left-4 z-20">
                      <div className="grid grid-cols-3 gap-1">
                        {[...Array(9)].map((_, i) => (
                           <div key={i} className="w-1 h-1 bg-white/50 rounded-full"></div>
                        ))}
                      </div>
                   </div>
                </div>
              </div>

              {/* Text Side */}
              <div className="w-full lg:w-1/2">
                <div className="bg-zinc-50 border border-zinc-100 p-8 md:p-12 rounded-3xl hover:border-red-600/30 transition-colors duration-300">
                  <span className="text-red-600 font-bold tracking-wider text-sm uppercase mb-3 block">{feature.category}</span>
                  <h3 className="text-3xl font-bold text-zinc-900 mb-4">
                    {feature.title}
                  </h3>
                  
                  <p className="text-gray-600 mb-8 leading-relaxed">
                    {feature.description}
                  </p>

                  <ul className="space-y-4 mb-8">
                    {feature.points.map((point, i) => (
                      <motion.li 
                        initial={{ opacity: 0, x: -10 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        viewport={{ once: true }}
                        transition={{ delay: 0.3 + (i * 0.1) }}
                        key={i} 
                        className="flex items-start gap-3 group/item"
                      >
                        <span className="mt-1.5 w-2 h-2 rounded-full bg-red-600 group-hover/item:scale-150 transition-transform"></span>
                        <span className="text-gray-700 text-sm md:text-base">{point}</span>
                      </motion.li>
                    ))}
                  </ul>

                  <Link href={feature.link} className="inline-block bg-red-600 text-white px-8 py-3 rounded-full font-bold hover:bg-red-700 transition-all shadow-lg shadow-red-600/20 transform hover:-translate-y-1">
                    Get Started Now
                  </Link>
                </div>
              </div>

            </motion.div>
          ))}
        </div>

      </div>
    </section>
  );
};

export default FeaturesSection;