'use client';
import Image from 'next/image';
import TrustStrip from '@/components/TrustStrip';
import ServiceCards from '@/components/ServiceCards';
import FAQ, { QA } from '@/components/FAQ';
import ContactForm from '@/components/ContactForm';
import { track } from '@/lib/analytics';
import { useVariant } from '@/lib/ab';

const faq: QA[] = [
  {
    q: 'Do you offer 24/7 emergency service?',
    a: 'Yes—dispatch evenings/weekends; average response under 60 minutes.'
  },
  {
    q: 'What areas do you serve?',
    a: 'Corpus Christi, Flour Bluff, Portland, Aransas Pass, Rockport.'
  },
  {
    q: 'Are you licensed and insured?',
    a: 'Yes—Texas electrical contractor TECL ####; liability & workers\' comp.'
  },
  {
    q: 'Do you handle permits and inspections?',
    a: 'Yes. We pull permits and pass final inspection.'
  },
  {
    q: 'What warranty do you provide?',
    a: '1-year labor; manufacturer warranty on parts.'
  },
];

export default function Home() {
  const { variant: abVariant, mounted } = useVariant();

  return (
    <>
      {/* HERO */}
      <section className="bg-gradient-dark text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-brand-dark/90 to-slate-800/90"></div>
        <div className="container-custom py-32 grid md:grid-cols-12 gap-12 items-center relative z-10">
          {/* Left Column */}
          <div className="md:col-span-6 animate-slide-up">
            {/* Eyebrow pill */}
            <div className="inline-flex items-center gap-2 bg-gradient-to-r from-red-500 to-red-600 px-6 py-3 rounded-full text-sm font-bold mb-8 shadow-lg">
              <span className="text-lg">⚡</span>
              24/7 Emergency Available Now
            </div>
            
            {/* H1 */}
            <h1 className="font-heading font-extrabold text-5xl md:text-6xl mb-8 leading-tight">
              24/7 Emergency Electricians in{' '}
              <span className="text-gradient">Corpus Christi</span>
            </h1>
            
            {/* Subcopy */}
            <p className="text-xl text-gray-300 mb-10 max-w-prose leading-relaxed">
              Licensed & insured. Code-compliant fixes with{' '}
              <strong className="text-gradient font-bold">under-60-minute</strong> average response.
            </p>
            
            {/* Primary CTAs */}
            <div className="flex flex-col sm:flex-row gap-6 mb-10">
              <a 
                href="tel:+13618850315" 
                onClick={() => mounted && track('cta_click', { cta: 'call_now_hero', variant: abVariant })}
                className="btn-primary btn-lg text-center"
              >
                📞 Call Now — 24/7
              </a>
              <a 
                href="#quote-form" 
                onClick={() => mounted && track('cta_click', { cta: 'quote_hero', variant: abVariant })}
                className="btn-outline btn-lg text-center"
              >
                Get My Free Quote
              </a>
            </div>
            
            {/* Trust row */}
            <div className="flex flex-wrap items-center gap-8 text-sm text-gray-300">
              <span className="flex items-center gap-2">
                <span className="text-yellow-400 text-lg">⭐⭐⭐⭐⭐</span>
                <span className="font-semibold">4.9 Rating (200+ locals)</span>
              </span>
              <span className="hidden sm:inline text-gray-500">•</span>
              <span className="font-semibold">A+ BBB</span>
              <span className="hidden sm:inline text-gray-500">•</span>
              <span className="font-semibold">19+ Years</span>
            </div>
          </div>
          
          {/* Right Column */}
          <div className="md:col-span-6 animate-scale-in">
            <div className="relative">
              <div className="absolute -inset-4 bg-gradient-to-r from-brand-green/20 to-green-600/20 rounded-3xl blur-xl"></div>
              <Image 
                src="/images/banner.png" 
                alt="Professional electrical services in Corpus Christi - licensed electricians at work" 
                width={600} 
                height={450} 
                sizes="(max-width: 768px) 100vw, 50vw" 
                priority 
                className="rounded-3xl shadow-2xl relative z-10"
              />
            </div>
          </div>
        </div>
      </section>

      {/* TRUST STRIP */}
      <TrustStrip />

      {/* SERVICES */}
      <ServiceCards />

      {/* COVERAGE / LOCAL MAP */}
      <section className="py-32 bg-white">
        <div className="container-custom">
          <div className="grid md:grid-cols-2 gap-16 items-center">
            {/* Map Placeholder */}
            <div className="relative animate-fade-in">
              <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-3xl h-96 relative overflow-hidden shadow-xl flex items-center justify-center">
                <div className="text-center">
                  <div className="text-6xl mb-4">🗺️</div>
                  <h3 className="font-semibold text-gray-800 mb-2">Service Coverage Area</h3>
                  <p className="text-gray-600">Interactive map coming soon</p>
                </div>
              </div>
            </div>
            
            {/* Coverage Info */}
            <div className="animate-slide-up">
              <h2 className="font-heading font-bold text-4xl md:text-5xl mb-8 text-gradient">
                Serving Corpus Christi & Nearby
              </h2>
              <p className="text-xl text-gray-600 mb-10 leading-relaxed">
                We provide comprehensive electrical services throughout the greater Corpus Christi area with rapid response times.
              </p>
              <div className="grid grid-cols-2 gap-6">
                <ul className="space-y-4">
                  <li className="flex items-center gap-3">
                    <span className="w-3 h-3 bg-gradient-to-r from-brand-green to-green-600 rounded-full"></span>
                    <span className="font-semibold text-gray-800">Flour Bluff</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <span className="w-3 h-3 bg-gradient-to-r from-brand-green to-green-600 rounded-full"></span>
                    <span className="font-semibold text-gray-800">Portland</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <span className="w-3 h-3 bg-gradient-to-r from-brand-green to-green-600 rounded-full"></span>
                    <span className="font-semibold text-gray-800">Aransas Pass</span>
                  </li>
                </ul>
                <ul className="space-y-4">
                  <li className="flex items-center gap-3">
                    <span className="w-3 h-3 bg-gradient-to-r from-brand-green to-green-600 rounded-full"></span>
                    <span className="font-semibold text-gray-800">Rockport</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <span className="w-3 h-3 bg-gradient-to-r from-brand-green to-green-600 rounded-full"></span>
                    <span className="font-semibold text-gray-800">Calallen</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <span className="w-3 h-3 bg-gradient-to-r from-brand-green to-green-600 rounded-full"></span>
                    <span className="font-semibold text-gray-800">Robstown</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* LEAD BLOCK */}
      <section className="py-32 bg-gradient-dark text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-brand-dark/95 to-slate-800/95"></div>
        <div className="container-custom text-center relative z-10">
          <h2 className="font-heading font-bold text-4xl md:text-5xl mb-8 text-gradient">
            Ready to solve your electrical problem?
          </h2>
          
          <div className="grid md:grid-cols-3 gap-8 mb-16">
            <div className="flex items-center justify-center gap-4 p-6 rounded-2xl bg-white/10 backdrop-blur-sm">
              <span className="text-3xl">📍</span>
              <div className="text-left">
                <p className="font-bold text-lg">2801 S Port Ave</p>
                <p className="text-gray-300">Corpus Christi, TX 78405</p>
              </div>
            </div>
            <div className="flex items-center justify-center gap-4 p-6 rounded-2xl bg-white/10 backdrop-blur-sm">
              <span className="text-3xl">📞</span>
              <div className="text-left">
                <p className="font-bold text-lg">(361) 885-0315</p>
                <p className="text-gray-300">24/7 Emergency</p>
              </div>
            </div>
            <div className="flex items-center justify-center gap-4 p-6 rounded-2xl bg-white/10 backdrop-blur-sm">
              <span className="text-3xl">✉️</span>
              <div className="text-left">
                <p className="font-bold text-lg">info@cielectrical.com</p>
                <p className="text-gray-300">Mon-Fri 7AM-5PM</p>
              </div>
            </div>
          </div>
          
          <div className="flex flex-col sm:flex-row gap-6 justify-center">
            <a href="tel:+13618850315" className="btn-primary btn-lg">
              Call Now
            </a>
            <a href="#quote-form" className="btn-outline btn-lg">
              Get Free Quote
            </a>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <FAQ items={faq} />

      {/* CONTACT FORM */}
      <div id="quote-form">
        <ContactForm compact />
      </div>
    </>
  );
}