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

const HomePage = () => {
  return (
    <div className="min-h-screen bg-gray-100">
      {/* Header Section */}
      <header className="bg-red-600 text-white py-4 shadow-lg">
        <div className="container mx-auto flex justify-between items-center px-4">
          <h1 className="text-2xl font-bold">Swift Extinguishers</h1>
          <nav>
            <ul className="flex space-x-4">
              <li><a href="#products" className="hover:underline">Products</a></li>
              <li><a href="#about" className="hover:underline">About Us</a></li>
              <li><a href="#contact" className="hover:underline">Contact</a></li>
            </ul>
          </nav>
        </div>
      </header>

      {/* Hero Section */}
      <motion.section
        className="bg-red-500 text-white py-20"
        initial={{ opacity: 0, y: -50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
      >
        <div className="container mx-auto text-center px-4">
          <h2 className="text-4xl font-bold">Your Safety, Our Priority</h2>
          <p className="mt-4 text-lg">Providing top-notch fire safety solutions in Punjab, Pakistan.</p>
          <Button className="mt-6 bg-white text-red-600 hover:bg-gray-200">Explore Products</Button>
        </div>
      </motion.section>

      {/* Products Section */}
      <section id="products" className="py-16 container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-8">Our Products</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {["Fire Extinguisher A", "Fire Extinguisher B", "Fire Extinguisher C"].map((product, index) => (
            <Card key={index} className="bg-white shadow-lg">
              <CardContent>
                <h3 className="text-xl font-bold mb-2">{product}</h3>
                <p>High-quality fire extinguishers for every need.</p>
                <Button className="mt-4 bg-red-600 text-white hover:bg-red-700">Learn More</Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* About Us Section */}
      <section id="about" className="bg-gray-200 py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">About Us</h2>
          <p className="text-lg max-w-2xl mx-auto">
            Swift Extinguishers is dedicated to providing reliable and efficient fire safety equipment. 
            With years of experience, we serve both commercial and residential customers across Punjab, Pakistan.
          </p>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-16 container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-8">Contact Us</h2>
        <form className="max-w-xl mx-auto bg-white p-6 rounded shadow-md">
          <div className="mb-4">
            <label className="block text-sm font-medium mb-2">Name</label>
            <input type="text" className="w-full border-gray-300 rounded p-2" placeholder="Your Name" />
          </div>
          <div className="mb-4">
            <label className="block text-sm font-medium mb-2">Email</label>
            <input type="email" className="w-full border-gray-300 rounded p-2" placeholder="Your Email" />
          </div>
          <div className="mb-4">
            <label className="block text-sm font-medium mb-2">Message</label>
            <textarea className="w-full border-gray-300 rounded p-2" rows="4" placeholder="Your Message"></textarea>
          </div>
          <Button type="submit" className="bg-red-600 text-white w-full hover:bg-red-700">Send Message</Button>
        </form>
      </section>

      {/* Footer Section */}
      <footer className="bg-gray-800 text-white py-6">
        <div className="container mx-auto text-center px-4">
          <p>&copy; 2025 Swift Extinguishers. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default HomePage;