import Link from "next/link";
import Image from "next/image";
import { ArrowRight, Zap, Shield, Home as HomeIcon, Factory, HardHat, CheckCircle2, Star, Clock, MapPin, Phone } from "lucide-react";
import ReviewCarousel from "@/components/ReviewCarousel";
import HeroCarousel from "@/components/HeroCarousel";
import FAQSection from "@/components/FAQSection";

export default function Home() {
  return (
    <>
      {/* HERO SECTION */}
      <section className="relative min-h-[85vh] flex items-center bg-[color:var(--bg-dark)] -mt-20 pt-20 isolate z-20">
        {/* Background Elements Container - Handles Overflow Clipping */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none -z-10">
          <div className="absolute inset-0 bg-[url('/images/hero-bg.png')] bg-cover bg-center opacity-10 mix-blend-overlay"></div>
          <div className="absolute inset-0 bg-gradient-to-r from-[color:var(--bg-dark)] via-[color:var(--bg-dark)]/95 to-transparent"></div>
          {/* Decorative shapes */}
          <div className="absolute top-0 right-0 w-1/2 h-full bg-[color:var(--brand)]/5 -skew-x-12 transform origin-top-right"></div>
        </div>

        <div className="container mx-auto px-6 relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="max-w-2xl lg:ml-16">
              <div className="inline-block bg-white/5 backdrop-blur border border-white/10 px-4 py-1 rounded mb-6 mt-8">
                <span className="text-[color:var(--brand)] font-bold text-sm tracking-widest uppercase">• Serving Corpus Christi Since 1969</span>
              </div>
              <h1 className="text-5xl md:text-7xl font-bold text-white font-display leading-[1.1] mb-4">
                Powering Your <br />
                <span className="text-[color:var(--brand)]">World Safely.</span>
              </h1>
              <p className="text-2xl md:text-3xl text-[color:var(--brand)] font-bold italic mb-6">Quality Counts</p>
              <div className="flex items-center gap-4 mb-6 border-l-4 border-[color:var(--brand)] pl-6">
                <p className="text-lg text-gray-300 max-w-lg leading-relaxed">
                  Budd Electric Co. delivers elite residential and commercial electrical solutions. Trusted for over 50 years to keep the Coastal Bend connected and secure.
                </p>
              </div>
              <p className="text-base text-gray-400 italic mb-8 max-w-lg">
                No project is too large or too small for Budd Electric Co.
              </p>

              <div className="flex flex-wrap gap-4">
                <Link href="/contact-us" className="bg-[color:var(--brand)] text-white px-8 py-4 font-bold uppercase tracking-widest hover:bg-[color:var(--brand-strong)] transition rounded shadow-[0_0_20px_rgba(239,68,68,0.3)] flex items-center gap-2">
                  Schedule Service <ArrowRight size={20} />
                </Link>
                <Link href="/electrical-services" className="border border-white/20 text-white px-8 py-4 font-bold uppercase tracking-widest hover:bg-white/5 transition rounded flex items-center gap-2">
                  Our Services <ArrowRight size={20} className="rotate-90" />
                </Link>
              </div>

              <div className="mt-12 mb-16 flex flex-wrap items-center gap-4 md:gap-8 text-sm font-medium text-gray-400">
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="text-[color:var(--brand)]" size={18} />
                  <span>Licensed & Insured</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="text-[color:var(--brand)]" size={18} />
                  <span>24/7 Emergency Support</span>
                </div>
              </div>
            </div>

            <div className="relative hidden lg:block">
              <HeroCarousel />
            </div>
          </div>
        </div>
      </section>

      {/* REVIEW CAROUSEL */}
      <ReviewCarousel />

      {/* SERVICES PREVIEW */}
      <section className="py-24 bg-white relative">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="text-center max-w-2xl mx-auto mb-16">
            <h2 className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Our Expertise</h2>
            <h3 className="text-4xl font-bold text-[color:var(--ink)] font-display">Comprehensive Electrical Solutions</h3>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {/* Card 1 */}
            <div className="group bg-gray-50 border border-gray-100 rounded-lg overflow-hidden hover:shadow-2xl transition duration-300 relative">
              <div className="h-2 bg-[color:var(--brand)] w-0 group-hover:w-full transition-all duration-500"></div>
              <div className="p-8">
                <div className="w-14 h-14 bg-white text-[color:var(--brand)] rounded flex items-center justify-center mb-6 shadow-sm border border-gray-100 group-hover:scale-110 transition">
                  <HomeIcon size={28} />
                </div>
                <h4 className="text-xl font-bold text-[color:var(--ink)] mb-3 font-display">Residential</h4>
                <p className="text-gray-500 mb-6 line-clamp-3">
                  Complete home electrical services including safety inspections, repairs, lighting, and fan installations.
                </p>
                <Link href="/electrical-services" className="text-[color:var(--brand)] font-bold uppercase text-xs tracking-widest hover:underline">Learn More</Link>
              </div>
            </div>

            {/* Card 2 */}
            <div className="group bg-[color:var(--bg-dark)] text-white rounded-lg overflow-hidden shadow-2xl hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] transition duration-300 relative transform md:-translate-y-4">
              <div className="h-2 bg-[color:var(--brand)] w-0 group-hover:w-full transition-all duration-500"></div>
              <div className="absolute top-0 right-0 p-4 opacity-10">
                <Zap size={100} />
              </div>
              <div className="p-8 relative z-10">
                <div className="w-14 h-14 bg-[color:var(--brand)] text-white rounded flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition">
                  <Factory size={28} />
                </div>
                <h4 className="text-xl font-bold text-white mb-3 font-display">Commercial</h4>
                <p className="text-gray-400 mb-6">
                  Reliable power for your business. New construction, maintenance, and industrial-grade solutions.
                </p>
                <Link href="/electrical-services" className="text-white font-bold uppercase text-xs tracking-widest hover:text-[color:var(--brand)] transition">Learn More</Link>
              </div>
            </div>

            {/* Card 3 */}
            <div className="group bg-gray-50 border border-gray-100 rounded-lg overflow-hidden hover:shadow-2xl transition duration-300 relative">
              <div className="h-2 bg-[color:var(--brand)] w-0 group-hover:w-full transition-all duration-500"></div>
              <div className="p-8">
                <div className="w-14 h-14 bg-white text-[color:var(--brand)] rounded flex items-center justify-center mb-6 shadow-sm border border-gray-100 group-hover:scale-110 transition">
                  <Zap size={28} />
                </div>
                <h4 className="text-xl font-bold text-[color:var(--ink)] mb-3 font-display">Generators</h4>
                <p className="text-gray-500 mb-6 line-clamp-3">
                  Authorized Kohler dealer. Keep your lights on when the grid goes down with standby power.
                </p>
                <Link href="/electrical-services" className="text-[color:var(--brand)] font-bold uppercase text-xs tracking-widest hover:underline">Learn More</Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ABOUT SECTION */}
      <section className="bg-[color:var(--surface)] py-24 overflow-hidden">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div className="relative">
              {/* Abstract bg shape */}
              <div className="absolute -left-20 -top-20 w-64 h-64 bg-[color:var(--brand)]/10 rounded-full blur-3xl"></div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-4 pt-12">
                  <div className="relative w-full h-48 rounded shadow-lg overflow-hidden">
                    <Image
                      src="/images/residential.png"
                      alt="Service Van"
                      fill
                      sizes="(max-width: 768px) 50vw, 25vw"
                      className="object-cover"
                      loading="lazy"
                    />
                  </div>
                  <div className="bg-[color:var(--ink)] p-6 rounded shadow-lg text-white">
                    <p className="font-bold text-2xl font-display">10k+</p>
                    <p className="text-xs text-gray-400 uppercase tracking-wider">Projects Done</p>
                  </div>
                </div>
                <div className="space-y-4">
                  <div className="bg-[color:var(--brand)] p-6 rounded shadow-lg text-white text-center">
                    <Shield size={32} className="mx-auto mb-2" />
                    <p className="font-bold">TECL #17007</p>
                  </div>
                  <div className="relative w-full h-64 rounded shadow-lg overflow-hidden">
                    <Image
                      src="/images/commercial.png"
                      alt="Electrician Team"
                      fill
                      sizes="(max-width: 768px) 50vw, 25vw"
                      className="object-cover"
                      loading="lazy"
                    />
                  </div>
                </div>
              </div>
            </div>

            <div>
              <h2 className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Who We Are</h2>
              <h3 className="text-4xl font-bold text-[color:var(--ink)] font-display mb-6">A Family Legacy of Excellence</h3>
              <p className="text-lg text-[color:var(--muted)] mb-6 leading-relaxed">
                For over half a century, Budd Electric Co. has been the standard-bearer for quality electrical work in the Coastal Bend. As a family-owned business, we don't just fix wires; we build trust.
              </p>
              <ul className="space-y-4 mb-8">
                <li className="flex items-center gap-3 text-[color:var(--ink)] font-medium">
                  <CheckCircle2 size={20} className="text-[color:var(--brand)]" />
                  Licensed Master Electricians
                </li>
                <li className="flex items-center gap-3 text-[color:var(--ink)] font-medium">
                  <CheckCircle2 size={20} className="text-[color:var(--brand)]" />
                  Residential & Commercial Specialists
                </li>
                <li className="flex items-center gap-3 text-[color:var(--ink)] font-medium">
                  <CheckCircle2 size={20} className="text-[color:var(--brand)]" />
                  Honest, Transparent Pricing
                </li>
              </ul>
              <Link href="/about-us" className="inline-flex items-center gap-2 text-[color:var(--ink)] font-bold border-b-2 border-[color:var(--brand)] pb-1 hover:text-[color:var(--brand)] transition">
                Read Our Story <ArrowRight size={18} />
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURE / GALLERY STRIP */}
      <section className="py-24 bg-white" >
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl font-bold text-[color:var(--ink)] font-display">Featured Projects</h2>
            <p className="text-[color:var(--muted)] mt-4">Delivering power to the most demanding residential and commercial environments.</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              { src: "/images/gallery-1.png", alt: "Electrical Project 1 - System Upgrade" },
              { src: "/images/gallery-2.png", alt: "Electrical Project 2 - System Upgrade" },
              { src: "/images/gallery-3.png", alt: "Electrical Project 3 - System Upgrade" }
            ].map((item, i) => (
              <div key={i} className="group relative aspect-[4/3] overflow-hidden rounded shadow-lg">
                <Image
                  src={item.src}
                  alt={item.alt}
                  fill
                  sizes="(max-width: 768px) 100vw, 33vw"
                  className="object-cover transition duration-700 group-hover:scale-110"
                  loading="lazy"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-8">
                  <p className="text-[color:var(--brand)] font-bold text-sm uppercase tracking-widest mb-1">Project 0{i + 1}</p>
                  <h4 className="text-white font-bold text-xl">System Upgrade</h4>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-16 text-center">
            <Link href="/photo-gallery" className="inline-block border-b-2 border-[color:var(--brand)] pb-1 text-[color:var(--ink)] font-bold uppercase tracking-widest hover:text-[color:var(--brand)] transition-colors">View Full Gallery</Link>
          </div>
        </div>
      </section >

      {/* FAQ SECTION */}
      <FAQSection />

      {/* CTA SECTION - Simplified compared to original because footer is now Contact heavy */}
      {/* CTA SECTION - Simplified compared to original because footer is now Contact heavy */}
      <section className="bg-[color:var(--brand)] py-20" >
        <div className="mx-auto max-w-7xl px-6 lg:px-8 flex flex-col lg:flex-row items-center justify-between gap-10 text-white">
          <div>
            <h2 className="text-3xl font-bold font-display sm:text-4xl text-white">Need a licensed electrician?</h2>
            <p className="mt-4 text-white/80 max-w-xl">
              Call Budd Electric Co. at (361) 855-2255 for a complimentary electrical repair consultation or free quote.
            </p>
          </div>
          <Link
            href="/contact-us"
            className="rounded-none bg-white px-8 py-4 text-sm font-bold text-[color:var(--brand)] shadow-lg transition hover:bg-gray-100 uppercase tracking-widest"
          >
            Call (361) 855-2255
          </Link>
        </div>
      </section >
    </>
  );
}