"use client";

import { motion } from "framer-motion";
import { ChefHat, Leaf, Clock } from "lucide-react";

export default function Hero() {
  return (
    <section id="home" className="relative pt-24 pb-12 sm:pt-32 sm:pb-16 lg:pb-24 overflow-hidden bg-orange-50/30">
      {/* Background decoration */}
      <div className="absolute top-0 right-0 -translate-y-12 translate-x-1/3">
        <div className="w-96 h-96 bg-orange-200/50 rounded-full blur-3xl" />
      </div>
      <div className="absolute bottom-0 left-0 translate-y-1/3 -translate-x-1/3">
        <div className="w-96 h-96 bg-yellow-200/50 rounded-full blur-3xl" />
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div className="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"
          >
            <div className="inline-flex items-center px-4 py-2 rounded-full bg-orange-100 text-orange-600 font-medium text-sm mb-6">
              <span className="flex h-2 w-2 rounded-full bg-orange-500 mr-2"></span>
              #1 Homemade Tiffin Service in Noida
            </div>
            
            <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
              <span className="block mb-2">Deliciously Crafted,</span>
              <span className="block text-orange-500">Perfectly Homemade</span>
            </h1>
            
            <p className="mt-3 text-base text-gray-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
              Experience the taste of home with Hometiffino. We deliver fresh, healthy, and hygienic home-cooked meals right to your doorstep in Noida. 
            </p>
            
            <div className="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
              <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                <a
                  href="#plans"
                  className="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-orange-500 hover:bg-orange-600 shadow-lg shadow-orange-500/30 transition-all transform hover:-translate-y-0.5"
                >
                  View Menu & Plans
                </a>
                <a
                  href="#contact"
                  className="inline-flex items-center justify-center px-8 py-3 border-2 border-orange-200 text-base font-medium rounded-full text-orange-600 bg-transparent hover:bg-orange-50 transition-all"
                >
                  Contact Us
                </a>
              </div>
            </div>

            <div className="mt-10 grid grid-cols-3 gap-4 sm:gap-6 border-t border-gray-200 pt-8">
              <div className="flex flex-col items-center lg:items-start">
                <ChefHat className="h-6 w-6 text-orange-500 mb-2" />
                <span className="text-sm font-medium text-gray-900">100% Homemade</span>
              </div>
              <div className="flex flex-col items-center lg:items-start">
                <Leaf className="h-6 w-6 text-green-500 mb-2" />
                <span className="text-sm font-medium text-gray-900">Fresh Ingredients</span>
              </div>
              <div className="flex flex-col items-center lg:items-start">
                <Clock className="h-6 w-6 text-blue-500 mb-2" />
                <span className="text-sm font-medium text-gray-900">Timely Delivery</span>
              </div>
            </div>
          </motion.div>
          
          <motion.div 
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"
          >
            <div className="relative mx-auto w-full rounded-2xl shadow-xl lg:max-w-md overflow-hidden bg-white ring-1 ring-gray-200">
              {/* Fallback pattern if we don't have an image yet */}
              <div className="aspect-[4/3] bg-orange-100 flex items-center justify-center p-8">
                <div className="grid grid-cols-2 gap-4 w-full h-full">
                  <div className="bg-orange-200 rounded-xl rounded-tr-[4rem]"></div>
                  <div className="bg-orange-300 rounded-xl rounded-bl-[4rem]"></div>
                  <div className="bg-yellow-200 rounded-xl rounded-tr-[4rem]"></div>
                  <div className="bg-orange-400 rounded-xl rounded-bl-[4rem]"></div>
                </div>
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="bg-white/90 backdrop-blur px-6 py-4 rounded-2xl shadow-sm text-center">
                    <span className="text-2xl font-bold text-gray-900 block">Fresh Meals</span>
                    <span className="text-sm text-orange-600 font-medium">Delivered Daily</span>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}