import React, { useState, useEffect } from 'react';
import { Menu, X, ChevronRight, Code, Paintbrush, Globe, Users, Mail, Phone, MapPin, Check, ArrowRight } from 'lucide-react';

const Website = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('home');
  const [isVisible, setIsVisible] = useState({});
  const [hoveredCard, setHoveredCard] = useState(null);

  const getAnimationClass = (elementId) => {
    return isVisible[elementId] ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10';
  };

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          setIsVisible(prev => ({
            ...prev,
            [entry.target.id]: entry.isIntersecting
          }));
        });
      },
      { threshold: 0.1 }
    );

    document.querySelectorAll('[data-animate]').forEach((element) => {
      observer.observe(element);
    });

    return () => observer.disconnect();
  }, []);

  const projects = [
    {
      title: "The Bageecha Farm",
      description: "A serene farmhouse website showcasing luxury stays",
      domain: "thebageechafarm.com",
      type: "Hospitality"
    },
    {
      title: "SNTS Group",
      description: "Tour and travel website offering comprehensive solutions",
      domain: "sntsgroup.com",
      type: "Travel"
    },
    {
      title: "RK Rayco",
      description: "Portfolio website for a leading construction company",
      domain: "rkrayco.com",
      type: "Construction"
    }
  ];

  const pricingPlans = [
    {
      name: "Basic",
      price: "₹19,999",
      features: ["5 Pages Website", "Responsive Design", "Contact Form", "Basic SEO"],
      popular: false
    },
    {
      name: "Professional",
      price: "₹39,999",
      features: ["10 Pages Website", "Advanced Features", "Complete SEO", "3 Months Support"],
      popular: true
    },
    {
      name: "Enterprise",
      price: "Custom",
      features: ["Unlimited Pages", "Custom Features", "Priority Support", "12 Months Support"],
      popular: false
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
      {/* Navbar */}
      <nav className="fixed w-full top-0 z-50 bg-white/90 shadow-lg">
        <div className="container mx-auto px-4 py-4">
          <div className="flex justify-between items-center">
            <div className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
              PROBILD
            </div>
            <div className="hidden md:flex space-x-8">
              {['Home', 'About', 'Services', 'Portfolio', 'Pricing'].map(item => (
                <button key={item} className="text-gray-600 hover:text-purple-600">
                  {item}
                </button>
              ))}
            </div>
            <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
              {isMenuOpen ? <X /> : <Menu />}
            </button>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4">
        <div className="container mx-auto text-center">
          <h1 data-animate id="hero-title" className={`text-5xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent transition-all duration-1000 ${getAnimationClass('hero-title')}`}>
            Welcome to PROBILD
          </h1>
          <p className="text-xl text-gray-600 mb-8">
            A Professional Website Development Company
          </p>
          <button className="bg-gradient-to-r from-purple-600 to-blue-500 text-white px-8 py-3 rounded-full">
            Get Started
          </button>
        </div>
      </section>

      {/* Portfolio Section */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Our Portfolio</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {projects.map((project, index) => (
              <div key={index} className="bg-white rounded-lg shadow-lg hover:shadow-xl transition-all duration-300">
                <div className="h-48 bg-gradient-to-br from-purple-500 to-blue-500"></div>
                <div className="p-6">
                  <h3 className="text-xl font-semibold mb-2">{project.title}</h3>
                  <p className="text-gray-600 mb-4">{project.description}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-purple-600">{project.type}</span>
                    <a href={`https://${project.domain}`} className="text-blue-500 hover:text-blue-600 flex items-center">
                      Visit <ChevronRight className="w-4 h-4 ml-1" />
                    </a>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Pricing Plans</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {pricingPlans.map((plan, index) => (
              <div 
                key={index}
                className={`relative bg-white rounded-lg shadow-lg ${plan.popular ? 'scale-105' : ''}`}
                onMouseEnter={() => setHoveredCard(index)}
                onMouseLeave={() => setHoveredCard(null)}
              >
                {plan.popular && (
                  <div className="absolute top-0 right-0 bg-gradient-to-r from-purple-600 to-blue-500 text-white px-4 py-1 rounded-bl-lg">
                    Popular
                  </div>
                )}
                <div className="p-6">
                  <h3 className="text-2xl font-bold text-center mb-4">{plan.name}</h3>
                  <div className="text-center mb-6">
                    <span className="text-4xl font-bold">{plan.price}</span>
                  </div>
                  <ul className="space-y-4 mb-8">
                    {plan.features.map((feature, i) => (
                      <li key={i} className="flex items-center space-x-2">
                        <Check className="w-5 h-5 text-green-500" />
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <button className={`w-full py-3 rounded-lg ${plan.popular ? 'bg-gradient-to-r from-purple-600 to-blue-500 text-white' : 'bg-gray-100 hover:bg-gray-200'}`}>
                    Get Started
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Get in Touch</h2>
          <div className="max-w-4xl mx-auto">
            <div className="grid md:grid-cols-2 gap-8">
              <div className="space-y-4">
                <div className="flex items-center space-x-4">
                  <Mail className="w-6 h-6 text-purple-600" />
                  <span>contact@probild.in</span>
                </div>
                <div className="flex items-center space-x-4">
                  <Phone className="w-6 h-6 text-purple-600" />
                  <span>+91 1234567890</span>
                </div>
              </div>
              <form className="space-y-4">
                <input type="text" placeholder="Your Name" className="w-full px-4 py-2 rounded-lg border" />
                <input type="email" placeholder="Your Email" className="w-full px-4 py-2 rounded-lg border" />
                <textarea placeholder="Message" rows="4" className="w-full px-4 py-2 rounded-lg border"></textarea>
                <button className="w-full bg-gradient-to-r from-purple-600 to-blue-500 text-white px-6 py-3 rounded-lg">
                  Send Message
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Website;