import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Mail, Phone, Lock, Laptop } from "lucide-react";
import { motion } from "framer-motion";

export default function Home() {
  return (
    <main className="min-h-screen bg-gray-100 text-gray-800">
      {/* Header */}
      <header className="bg-white shadow p-4 flex justify-between items-center">
        <div className="flex items-center gap-2">
          <Laptop className="text-blue-600" size={32} />
          <h1 className="text-xl font-bold text-blue-600">licence.host</h1>
        </div>
        <nav className="hidden md:flex gap-4">
          <a href="#services" className="hover:text-blue-600">Services</a>
          <a href="#pricing" className="hover:text-blue-600">Pricing</a>
          <a href="#faq" className="hover:text-blue-600">FAQ</a>
          <a href="#contact" className="hover:text-blue-600">Contact</a>
        </nav>
        <Button className="hidden md:block">Login</Button>
      </header>

      {/* Hero Section */}
      <section className="p-10 text-center bg-gradient-to-r from-blue-600 to-indigo-600 text-white">
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
          <h2 className="text-4xl font-bold mb-4">Your Trusted License Provider</h2>
          <p className="text-lg mb-6 max-w-xl mx-auto">We provide genuine software licenses with instant delivery and secure payment options.</p>
          <Button size="lg" className="bg-white text-blue-600 hover:bg-gray-200">Explore Services</Button>
        </motion.div>
      </section>

      {/* Services */}
      <section id="services" className="p-10 bg-white">
        <h3 className="text-2xl font-semibold mb-6 text-center">Our Services</h3>
        <div className="grid md:grid-cols-3 gap-6">
          {['Windows License', 'Office Activation', 'Antivirus Protection'].map((title, i) => (
            <Card key={i} className="shadow-md">
              <CardContent className="p-6 text-center">
                <h4 className="text-xl font-bold mb-2">{title}</h4>
                <p className="text-gray-600">High-quality genuine license keys for your software needs.</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="p-10 bg-gray-50">
        <h3 className="text-2xl font-semibold mb-6 text-center">Pricing Plans</h3>
        <div className="grid md:grid-cols-3 gap-6">
          {['Basic', 'Pro', 'Enterprise'].map((plan, i) => (
            <Card key={i} className="shadow-md">
              <CardContent className="p-6 text-center">
                <h4 className="text-xl font-bold mb-2">{plan}</h4>
                <p className="text-gray-600 mb-4">Perfect for {plan === 'Basic' ? 'individuals' : plan === 'Pro' ? 'small businesses' : 'large enterprises'}.</p>
                <p className="text-2xl font-bold mb-4">${(i + 1) * 10}.00</p>
                <Button>Buy Now</Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="p-10 bg-white">
        <h3 className="text-2xl font-semibold mb-6 text-center">Frequently Asked Questions</h3>
        <div className="max-w-2xl mx-auto space-y-4">
          <div>
            <h5 className="font-semibold">How fast do I receive my license?</h5>
            <p className="text-gray-600">Most licenses are delivered instantly to your email after payment.</p>
          </div>
          <div>
            <h5 className="font-semibold">Is your software genuine?</h5>
            <p className="text-gray-600">Yes, all licenses are 100% genuine and verified with the provider.</p>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="p-10 bg-gray-50">
        <h3 className="text-2xl font-semibold mb-6 text-center">Contact Us</h3>
        <form className="max-w-2xl mx-auto grid gap-4">
          <Input placeholder="Your Name" />
          <Input placeholder="Email Address" type="email" icon={<Mail />} />
          <Input placeholder="Phone Number" type="tel" icon={<Phone />} />
          <Input placeholder="Your Message" className="h-32" />
          <Button type="submit">Send Message</Button>
        </form>
      </section>

      {/* Footer */}
      <footer className="text-center text-sm p-6 text-gray-500">
        &copy; {new Date().getFullYear()} licence.host — All rights reserved.
      </footer>
    </main>
  );
}