Untitled

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Phone, MapPin } from "lucide-react";
import { motion } from "framer-motion";

export default function GokulKathiyawadiWebsite() {
  return (
    <div className="min-h-screen bg-orange-50 text-gray-800">
      {/* Header */}
      <header className="bg-red-900 text-white p-6 shadow-lg">
        <div className="max-w-6xl mx-auto flex justify-between items-center">
          <h1 className="text-2xl md:text-3xl font-bold">Gokul Kathiyawadi Hotel</h1>
          <Button className="bg-yellow-500 text-black hover:bg-yellow-400 rounded-2xl">
            Order Now
          </Button>
        </div>
      </header>

      {/* Hero Section */}
      <section className="text-center py-16 px-6 bg-gradient-to-r from-red-800 to-red-600 text-white">
        <motion.h2
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-4xl md:text-5xl font-bold mb-4"
        >
          Authentic Kathiyawadi Taste
        </motion.h2>
        <p className="text-lg md:text-xl max-w-2xl mx-auto">
          Enjoy traditional Gujarati & Kathiyawadi dishes made with love and
          authentic spices.
        </p>
      </section>

      {/* Menu Section */}
      <section className="py-16 px-6 max-w-6xl mx-auto">
        <h3 className="text-3xl font-bold text-center mb-10">Popular Dishes</h3>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {[
            { name: "Kathiyawadi Thali", price: "₹250" },
            { name: "Sev Tameta", price: "₹120" },
            { name: "Lasaniya Bataka", price: "₹130" },
            { name: "Gujarati Dal & Rice", price: "₹150" },
          ].map((item, index) => (
            <motion.div
              key={index}
              whileHover={{ scale: 1.05 }}
              className="rounded-2xl"
            >
              <Card className="rounded-2xl shadow-md">
                <CardContent className="p-6 text-center">
                  <h4 className="text-xl font-semibold mb-2">{item.name}</h4>
                  <p className="text-red-700 font-bold">{item.price}</p>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </section>

      {/* Contact Section */}
      <section className="bg-white py-16 px-6">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-3xl font-bold mb-6">Visit Us</h3>
          <p className="flex justify-center items-center gap-2 mb-3">
            <MapPin /> Modasa Bypass Rd, Bajkot, Gujarat
          </p>
          <p className="flex justify-center items-center gap-2 mb-6">
            <Phone /> 099788 68069
          </p>
          <Button className="bg-red-800 hover:bg-red-700 rounded-2xl px-6 py-3">
            Get Directions
          </Button>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-red-900 text-white text-center p-4">
        © 2026 Gokul Kathiyawadi Hotel | All Rights Reserved
      </footer>
    </div>
  );
}