/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect, useRef } from 'react';
import { motion, useScroll, useSpring, AnimatePresence } from 'motion/react';
import { 
  Phone, 
  MessageCircle, 
  Mail, 
  Facebook, 
  Instagram, 
  Linkedin, 
  Twitter, 
  Droplets, 
  Wrench, 
  CheckCircle2, 
  Star, 
  MapPin, 
  Clock, 
  Menu, 
  X,
  ChevronRight,
  ExternalLink
} from 'lucide-react';
import { BUSINESS_INFO, SERVICES, PORTFOLIO, BLOGS, REVIEWS, getPlumberImage } from './constants';

// --- Components ---

const GlassCard = ({ children, className = "" }: { children: React.ReactNode, className?: string }) => (
  <motion.div 
    whileHover={{ y: -5, scale: 1.02 }}
    className={`backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl overflow-hidden shadow-xl ${className}`}
  >
    {children}
  </motion.div>
);

const SectionTitle = ({ title, subtitle }: { title: string, subtitle?: string }) => (
  <div className="text-center mb-16">
    <motion.h2 
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      className="text-4xl md:text-5xl font-bold text-white mb-4 drop-shadow-lg"
    >
      {title}
    </motion.h2>
    {subtitle && (
      <motion.p 
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ delay: 0.1 }}
        className="text-xl text-blue-100 font-medium"
      >
        {subtitle}
      </motion.p>
    )}
    <div className="w-24 h-1 bg-blue-500 mx-auto mt-6 rounded-full" />
  </div>
);

const FloatingTools = () => {
  const tools = [Wrench, Droplets, Wrench, Droplets];
  return (
    <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden opacity-20">
      {tools.map((Icon, i) => (
        <motion.div
          key={i}
          initial={{ x: Math.random() * 100 + "%", y: "110%" }}
          animate={{ 
            y: "-10%",
            rotate: 360,
            x: (Math.random() * 100) + "%"
          }}
          transition={{ 
            duration: 15 + Math.random() * 10, 
            repeat: Infinity, 
            ease: "linear",
            delay: i * 3
          }}
          className="absolute text-blue-400"
        >
          <Icon size={48 + Math.random() * 48} />
        </motion.div>
      ))}
    </div>
  );
};

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  });

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
      setIsMenuOpen(false);
    }
  };

  return (
    <div className="relative min-h-screen bg-slate-900 text-slate-100 font-sans selection:bg-blue-500 selection:text-white">
      {/* Background Image Overlay */}
      <div 
        className="fixed inset-0 z-[-1] opacity-30 bg-cover bg-center bg-no-repeat"
        style={{ backgroundImage: `url(${getPlumberImage(0)})` }}
      />
      <div className="fixed inset-0 z-[-1] bg-gradient-to-b from-slate-900/80 via-slate-900/40 to-slate-900/90 pointer-events-none" />
      
      <FloatingTools />
      
      {/* Progress Bar */}
      <motion.div className="fixed top-0 left-0 right-0 h-1 bg-blue-500 origin-left z-50" style={{ scaleX }} />

      {/* Navbar */}
      <nav className={`fixed top-0 w-full z-40 transition-all duration-300 ${scrolled ? 'bg-slate-900/80 backdrop-blur-lg py-3 shadow-lg' : 'bg-transparent py-6'}`}>
        <div className="container mx-auto px-6 flex justify-between items-center">
          <motion.div 
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            className="flex items-center gap-2 cursor-pointer"
            onClick={() => scrollToSection('hero')}
          >
            <div className="bg-blue-600 p-2 rounded-lg">
              <Wrench className="text-white" size={24} />
            </div>
            <span className="text-2xl font-bold tracking-tighter text-white">
              {BUSINESS_INFO.name}
            </span>
          </motion.div>

          {/* Desktop Menu */}
          <div className="hidden md:flex items-center gap-8">
            {['Services', 'Portfolio', 'Reviews', 'Blog', 'Contact'].map((item) => (
              <button 
                key={item}
                onClick={() => scrollToSection(item.toLowerCase())}
                className="text-sm font-semibold hover:text-blue-400 transition-colors uppercase tracking-widest"
              >
                {item}
              </button>
            ))}
            <a 
              href={`tel:${BUSINESS_INFO.phone}`}
              className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-bold transition-all flex items-center gap-2 shadow-lg shadow-blue-600/20"
            >
              <Phone size={18} /> Call Now
            </a>
          </div>

          {/* Mobile Menu Toggle */}
          <button className="md:hidden text-white" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X size={32} /> : <Menu size={32} />}
          </button>
        </div>
      </nav>

      {/* Mobile Menu Overlay */}
      <AnimatePresence>
        {isMenuOpen && (
          <motion.div 
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="fixed inset-0 z-30 bg-slate-900/95 backdrop-blur-xl flex flex-col items-center justify-center gap-8 md:hidden"
          >
            {['Services', 'Portfolio', 'Reviews', 'Blog', 'Contact'].map((item) => (
              <button 
                key={item}
                onClick={() => scrollToSection(item.toLowerCase())}
                className="text-2xl font-bold hover:text-blue-400 transition-colors"
              >
                {item}
              </button>
            ))}
            <div className="flex flex-col gap-4 w-full px-12">
              <a 
                href={`tel:${BUSINESS_INFO.phone}`}
                className="bg-blue-600 text-white py-4 rounded-xl font-bold text-center flex items-center justify-center gap-2"
              >
                <Phone size={20} /> Call Now
              </a>
              <a 
                href={`https://wa.me/${BUSINESS_INFO.whatsapp}`}
                className="bg-green-600 text-white py-4 rounded-xl font-bold text-center flex items-center justify-center gap-2"
              >
                <MessageCircle size={20} /> WhatsApp
              </a>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Hero Section */}
      <section id="hero" className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
        <div 
          className="absolute inset-0 z-0 bg-cover bg-center"
          style={{ backgroundImage: `url(${getPlumberImage(0)})` }}
        >
          <div className="absolute inset-0 bg-slate-900/60 backdrop-blur-[2px]" />
        </div>
        
        <div className="container mx-auto px-6 relative z-10 text-center">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8 }}
          >
            <span className="inline-block px-4 py-1.5 rounded-full bg-blue-600/20 border border-blue-500/30 text-blue-400 font-bold text-sm uppercase tracking-widest mb-6">
              {BUSINESS_INFO.serviceArea}
            </span>
            <h1 className="text-5xl md:text-8xl font-black text-white mb-6 leading-tight drop-shadow-2xl">
              Fast & Reliable <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">
                Plumbing Services
              </span> <br />
              Across Bangalore
            </h1>
            <p className="text-xl md:text-2xl text-blue-100 mb-12 max-w-3xl mx-auto font-medium leading-relaxed">
              Available 24/7 for All Plumbing Problems – Small or Big. <br />
              <span className="text-blue-400">Professional, Trustworthy, and Affordable.</span>
            </p>

            <div className="flex flex-col md:flex-row items-center justify-center gap-6 mb-12">
              <motion.a 
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                href={`tel:${BUSINESS_INFO.phone}`}
                className="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-10 py-5 rounded-2xl font-black text-xl flex items-center justify-center gap-3 shadow-2xl shadow-blue-600/40"
              >
                <Phone size={28} /> Call Now
              </motion.a>
              <motion.a 
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                href={`https://wa.me/${BUSINESS_INFO.whatsapp}`}
                className="w-full md:w-auto bg-green-600 hover:bg-green-700 text-white px-10 py-5 rounded-2xl font-black text-xl flex items-center justify-center gap-3 shadow-2xl shadow-green-600/40"
              >
                <MessageCircle size={28} /> WhatsApp
              </motion.a>
            </div>

            <p className="text-slate-300 font-medium italic">
              "Customers can call or WhatsApp anytime for free consultation or to ask any plumbing questions."
            </p>
          </motion.div>
        </div>

        {/* Scroll Indicator */}
        <motion.div 
          animate={{ y: [0, 10, 0] }}
          transition={{ repeat: Infinity, duration: 2 }}
          className="absolute bottom-10 left-1/2 -translate-x-1/2 text-white/50"
        >
          <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center pt-2">
            <div className="w-1 h-2 bg-white rounded-full" />
          </div>
        </motion.div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-24 relative">
        <div className="container mx-auto px-6">
          <SectionTitle 
            title={BUSINESS_INFO.serviceArea} 
            subtitle="Comprehensive plumbing solutions for every need, delivered by experts." 
          />
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {SERVICES.map((service, i) => (
              <GlassCard key={i} className="group">
                <div className="p-8">
                  <div className="bg-blue-600/20 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-600 transition-colors duration-300">
                    <Droplets className="text-blue-400 group-hover:text-white" size={32} />
                  </div>
                  <h3 className="text-2xl font-bold text-white mb-4">{service.title}</h3>
                  <p className="text-slate-300 mb-6 leading-relaxed">{service.description}</p>
                </div>
                <div className="h-48 overflow-hidden">
                  <img 
                    src={service.img} 
                    alt={service.title} 
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                    referrerPolicy="no-referrer"
                  />
                </div>
              </GlassCard>
            ))}
          </div>
        </div>
      </section>

      {/* Portfolio Section */}
      <section id="portfolio" className="py-24 bg-slate-900/50 relative">
        <div className="container mx-auto px-6">
          <SectionTitle 
            title="Our Recent Work" 
            subtitle="Real problems solved for real customers across Bangalore." 
          />

          <div className="space-y-16">
            {PORTFOLIO.map((project, i) => (
              <motion.div 
                key={i}
                initial={{ opacity: 0, x: i % 2 === 0 ? -50 : 50 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                className={`flex flex-col ${i % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'} gap-12 items-center`}
              >
                <div className="w-full lg:w-1/2">
                  <GlassCard className="!p-0 aspect-video">
                    <img 
                      src={project.img} 
                      alt={project.area} 
                      className="w-full h-full object-cover"
                      referrerPolicy="no-referrer"
                    />
                  </GlassCard>
                </div>
                <div className="w-full lg:w-1/2 space-y-6">
                  <div className="flex items-center gap-2 text-blue-400 font-bold text-xl">
                    <MapPin size={24} /> {project.area}
                  </div>
                  <h3 className="text-3xl font-bold text-white">Problem: {project.problem}</h3>
                  <div className="space-y-4 text-slate-300">
                    <p><strong className="text-white">Work Done:</strong> {project.work}</p>
                    <p><strong className="text-white">Before & After:</strong> {project.beforeAfter}</p>
                    <div className="bg-green-600/20 border border-green-500/30 p-4 rounded-xl flex items-start gap-3">
                      <CheckCircle2 className="text-green-500 shrink-0 mt-1" size={20} />
                      <p><strong className="text-green-400">Result:</strong> {project.result}</p>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Reviews Section */}
      <section id="reviews" className="py-24 relative overflow-hidden">
        <div className="container mx-auto px-6">
          <SectionTitle 
            title="Customer Reviews" 
            subtitle="4.8/5 from 50+ Happy Customers in Bangalore" 
          />

          <div className="flex flex-wrap justify-center gap-4 mb-12">
            <div className="flex items-center gap-1 bg-white/5 px-6 py-3 rounded-full border border-white/10">
              {[1, 2, 3, 4, 5].map(s => <Star key={s} size={20} className="fill-yellow-500 text-yellow-500" />)}
              <span className="ml-2 font-bold text-xl">4.8 Overall Rating</span>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {REVIEWS.slice(0, 9).map((review, i) => (
              <GlassCard key={i} className="p-8">
                <div className="flex justify-between items-start mb-4">
                  <div>
                    <h4 className="font-bold text-white text-lg">{review.name}</h4>
                    <p className="text-blue-400 text-sm flex items-center gap-1">
                      <MapPin size={14} /> {review.area}
                    </p>
                  </div>
                  <div className="flex gap-0.5">
                    {Array.from({ length: review.rating }).map((_, i) => (
                      <Star key={i} size={16} className="fill-yellow-500 text-yellow-500" />
                    ))}
                  </div>
                </div>
                <p className="text-slate-300 italic leading-relaxed">"{review.text}"</p>
              </GlassCard>
            ))}
          </div>
          
          <div className="mt-12 text-center">
            <p className="text-slate-400 font-medium">+41 more reviews from satisfied customers across Bangalore</p>
          </div>
        </div>
      </section>

      {/* Blog Section */}
      <section id="blog" className="py-24 bg-slate-900/50 relative">
        <div className="container mx-auto px-6">
          <SectionTitle 
            title="Plumbing Tips & Insights" 
            subtitle="Stay informed with our latest articles on home maintenance." 
          />

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {BLOGS.map((blog, i) => (
              <GlassCard key={i} className="group cursor-pointer">
                <div 
                  className="h-48 bg-cover bg-center relative"
                  style={{ backgroundImage: `url(${blog.img})` }}
                >
                  <div className="absolute inset-0 bg-slate-900/40 group-hover:bg-slate-900/20 transition-colors" />
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-bold text-white mb-3 group-hover:text-blue-400 transition-colors">
                    {blog.title}
                  </h3>
                  <p className="text-slate-400 text-sm mb-4">{blog.excerpt}</p>
                  <div className="flex items-center gap-2 text-blue-400 font-bold text-sm">
                    Read More <ChevronRight size={16} />
                  </div>
                </div>
              </GlassCard>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-24 relative">
        <div className="container mx-auto px-6">
          <SectionTitle title="Get In Touch" subtitle="We're ready to help you 24/7." />

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div className="space-y-8">
              <GlassCard className="p-8">
                <h3 className="text-2xl font-bold text-white mb-8">Contact Information</h3>
                <div className="space-y-6">
                  <a href={`tel:${BUSINESS_INFO.phone}`} className="flex items-center gap-4 group">
                    <div className="bg-blue-600 p-4 rounded-xl group-hover:scale-110 transition-transform">
                      <Phone className="text-white" size={24} />
                    </div>
                    <div>
                      <p className="text-slate-400 text-sm">Call Us Anytime</p>
                      <p className="text-white font-bold text-xl">{BUSINESS_INFO.phone}</p>
                    </div>
                  </a>
                  <a href={`https://wa.me/${BUSINESS_INFO.whatsapp}`} className="flex items-center gap-4 group">
                    <div className="bg-green-600 p-4 rounded-xl group-hover:scale-110 transition-transform">
                      <MessageCircle className="text-white" size={24} />
                    </div>
                    <div>
                      <p className="text-slate-400 text-sm">WhatsApp Chat</p>
                      <p className="text-white font-bold text-xl">{BUSINESS_INFO.whatsapp}</p>
                    </div>
                  </a>
                  <a href={`mailto:${BUSINESS_INFO.email}`} className="flex items-center gap-4 group">
                    <div className="bg-red-600 p-4 rounded-xl group-hover:scale-110 transition-transform">
                      <Mail className="text-white" size={24} />
                    </div>
                    <div>
                      <p className="text-slate-400 text-sm">Email Us</p>
                      <p className="text-white font-bold text-xl">{BUSINESS_INFO.email}</p>
                    </div>
                  </a>
                  <div className="flex items-center gap-4">
                    <div className="bg-slate-700 p-4 rounded-xl">
                      <MapPin className="text-white" size={24} />
                    </div>
                    <div>
                      <p className="text-slate-400 text-sm">Service Area</p>
                      <p className="text-white font-bold text-xl">All Over Bangalore</p>
                    </div>
                  </div>
                </div>

                <div className="mt-12 pt-12 border-t border-white/10">
                  <h4 className="text-white font-bold mb-6">Follow Us</h4>
                  <div className="flex gap-4">
                    {[
                      { icon: Facebook, link: BUSINESS_INFO.socials.facebook, color: 'bg-blue-600' },
                      { icon: Instagram, link: BUSINESS_INFO.socials.instagram, color: 'bg-pink-600' },
                      { icon: Linkedin, link: BUSINESS_INFO.socials.linkedin, color: 'bg-blue-700' },
                      { icon: Twitter, link: BUSINESS_INFO.socials.twitter, color: 'bg-sky-500' }
                    ].map((social, i) => (
                      <motion.a 
                        key={i}
                        whileHover={{ y: -5 }}
                        href={social.link}
                        target="_blank"
                        rel="noopener noreferrer"
                        className={`${social.color} p-3 rounded-lg text-white shadow-lg`}
                      >
                        <social.icon size={20} />
                      </motion.a>
                    ))}
                  </div>
                </div>
              </GlassCard>
            </div>

            <div className="h-full min-h-[400px]">
              <GlassCard className="h-full !p-0">
                <iframe 
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d248849.886539092!2d77.4908522!3d12.9538477!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1670c9b44e6d%3A0xf8dfad368510213f!2sBengaluru%2C%20Karnataka!5e0!3m2!1sen!2sin!4v1709450000000!5m2!1sen!2sin" 
                  width="100%" 
                  height="100%" 
                  style={{ border: 0 }} 
                  allowFullScreen 
                  loading="lazy" 
                  referrerPolicy="no-referrer-when-downgrade"
                  className="grayscale invert opacity-80"
                />
              </GlassCard>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 relative overflow-hidden border-t border-white/10">
        <div 
          className="absolute inset-0 z-0 opacity-10 bg-cover bg-center"
          style={{ backgroundImage: `url(${getPlumberImage(11)})` }}
        />
        <div className="container mx-auto px-6 relative z-10">
          <div className="flex flex-col md:flex-row justify-between items-center gap-8">
            <div className="text-center md:text-left">
              <div className="flex items-center justify-center md:justify-start gap-2 mb-4">
                <Wrench className="text-blue-500" size={28} />
                <span className="text-2xl font-bold text-white">{BUSINESS_INFO.name}</span>
              </div>
              <p className="text-slate-400">{BUSINESS_INFO.serviceArea}</p>
            </div>

            <div className="flex gap-6">
              <a href={BUSINESS_INFO.socials.facebook} className="text-slate-400 hover:text-white transition-colors"><Facebook size={24} /></a>
              <a href={BUSINESS_INFO.socials.instagram} className="text-slate-400 hover:text-white transition-colors"><Instagram size={24} /></a>
              <a href={BUSINESS_INFO.socials.linkedin} className="text-slate-400 hover:text-white transition-colors"><Linkedin size={24} /></a>
              <a href={BUSINESS_INFO.socials.twitter} className="text-slate-400 hover:text-white transition-colors"><Twitter size={24} /></a>
            </div>

            <div className="text-center md:text-right">
              <p className="text-slate-400">© {new Date().getFullYear()} {BUSINESS_INFO.name}. All rights reserved.</p>
              <p className="text-slate-500 text-sm mt-2">Designed for Excellence in Bangalore</p>
            </div>
          </div>
        </div>
      </footer>

      {/* Sticky Mobile Bar */}
      <div className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-slate-900/90 backdrop-blur-xl border-t border-white/10 p-4 flex gap-4">
        <a 
          href={`tel:${BUSINESS_INFO.phone}`}
          className="flex-1 bg-blue-600 text-white py-3 rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-blue-600/20"
        >
          <Phone size={20} /> Direct Call
        </a>
        <a 
          href={`https://wa.me/${BUSINESS_INFO.whatsapp}`}
          className="flex-1 bg-green-600 text-white py-3 rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-green-600/20"
        >
          <MessageCircle size={20} /> WhatsApp
        </a>
      </div>
    </div>
  );
}