import type { Metadata } from 'next';
import Script from 'next/script';
import Image from 'next/image';
import FAQ, { QA } from '@/components/FAQ';
import ContactForm from '@/components/ContactForm';

export const metadata: Metadata = {
  title: 'Residential Electrician Corpus Christi | Home Electrical Services',
  description: 'Professional residential electrical services in Corpus Christi. Wiring, lighting, panel upgrades, safety inspections. Licensed & insured. Call (361) 885-0315.',
  openGraph: {
    title: 'Residential Electrician Corpus Christi | Home Electrical Services',
    description: 'Professional residential electrical services in Corpus Christi. Wiring, lighting, panel upgrades, safety inspections.',
    images: ['/og/residential-electrician-1200x630.jpg']
  }
};

const residentialFaq: QA[] = [
  {
    q: 'What residential electrical services do you offer?',
    a: 'We provide complete residential electrical services including wiring, lighting, panel upgrades, outlet installation, ceiling fans, safety inspections, and emergency repairs.'
  },
  {
    q: 'Do you handle electrical permits for residential work?',
    a: 'Yes, we handle all necessary permits and coordinate inspections with the City of Corpus Christi for residential electrical work.'
  },
  {
    q: 'How quickly can you respond to residential electrical emergencies?',
    a: 'We respond to residential electrical emergencies within 60 minutes in Corpus Christi, available 24/7 including weekends and holidays.'
  },
  {
    q: 'Do you offer free estimates for residential work?',
    a: 'Yes, we provide free estimates for all residential electrical work. We\'ll assess your needs and provide detailed pricing before starting any work.'
  }
];

export default function ResidentialElectricianPage() {
  const serviceSchema = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: 'Residential Electrical Services',
    description: 'Professional residential electrical services in Corpus Christi, TX',
    provider: {
      '@type': 'LocalBusiness',
      name: 'C & I Electrical Contractors',
      telephone: '+1-361-885-0315'
    },
    serviceType: 'Residential Electrical Service',
    areaServed: ['Corpus Christi', 'Flour Bluff', 'Portland', 'Aransas Pass', 'Rockport']
  };

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: residentialFaq.map(({q, a}) => ({
      '@type': 'Question',
      name: q,
      acceptedAnswer: {
        '@type': 'Answer',
        text: a
      }
    }))
  };

  return (
    <>
      {/* HERO */}
      <section className="bg-brand-dark text-white">
        <div className="mx-auto max-w-container px-4 py-16 grid md:grid-cols-2 gap-8 items-center">
          <div>
            <h1 className="text-3xl md:text-4xl font-bold">Residential Electrician in Corpus Christi</h1>
            <p className="mt-4 text-lg">Professional electrical services for your home. From <b>wiring and lighting to panel upgrades and safety inspections</b>, we keep your family safe and comfortable.</p>
            <div className="mt-6 flex gap-3">
              <a 
                href="tel:+13618850315"
                className="inline-flex min-h-[48px] items-center justify-center rounded-lg bg-brand-green px-6 py-3 text-black font-semibold"
              >
                Call for Free Estimate
              </a>
              <a 
                href="/contact"
                className="inline-flex min-h-[48px] items-center justify-center rounded-lg border border-brand-orange text-brand-orange px-6 py-3 font-semibold"
              >
                Schedule Service
              </a>
            </div>
            <div className="mt-4 text-white/90">
              <p>✓ Licensed & insured residential electricians</p>
              <p>✓ Free estimates & upfront pricing</p>
              <p>✓ Same-day service available</p>
              <p>✓ 1-year warranty on all work</p>
            </div>
          </div>
          <div>
            <Image 
              src="/images/residential.png" 
              alt="Professional residential electrician working in Corpus Christi home"
              width={600}
              height={400}
              sizes="(max-width: 768px) 100vw, 50vw"
              className="rounded-lg"
            />
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8">Complete Residential Electrical Services</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                title: 'Electrical Wiring',
                description: 'New wiring, rewiring, circuit installation, and electrical system upgrades',
                services: ['New construction wiring', 'Rewiring old homes', 'Circuit installation', 'GFCI/AFCI protection']
              },
              {
                title: 'Lighting Installation',
                description: 'Interior and exterior lighting, ceiling fans, and smart lighting systems',
                services: ['Recessed lighting', 'Ceiling fan installation', 'Exterior lighting', 'LED upgrades']
              },
              {
                title: 'Outlet & Switch Installation',
                description: 'New outlets, switches, USB outlets, and electrical device installation',
                services: ['USB outlets', 'Smart switches', 'GFCI outlets', 'Outlet upgrades']
              },
              {
                title: 'Panel Upgrades',
                description: 'Electrical panel upgrades from 100A to 200A service capacity',
                services: ['100A to 200A upgrades', 'New panel installation', 'Breaker replacement', 'Load calculations']
              },
              {
                title: 'Safety Inspections',
                description: 'Electrical safety inspections and code compliance assessments',
                services: ['Home safety inspections', 'Code compliance', 'Hazard identification', 'Safety recommendations']
              },
              {
                title: 'Emergency Repairs',
                description: '24/7 emergency electrical repairs and troubleshooting',
                services: ['Power outages', 'Hot outlets', 'Electrical fires', 'Storm damage']
              }
            ].map((service, i) => (
              <div key={i} className="bg-white border rounded-lg p-6 shadow-card">
                <h3 className="font-semibold text-lg mb-2">{service.title}</h3>
                <p className="text-gray-600 mb-3">{service.description}</p>
                <ul className="text-sm text-gray-500 space-y-1">
                  {service.services.map((item, j) => (
                    <li key={j}>• {item}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHY CHOOSE US */}
      <section className="py-16 bg-brand-grayBg">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8 text-center">Why Corpus Christi Homeowners Choose Us</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-16 h-16 mx-auto mb-4 bg-brand-green rounded-full flex items-center justify-center">
                <span className="text-2xl text-black">🛡️</span>
              </div>
              <h3 className="text-lg font-semibold mb-2">Safety First</h3>
              <p className="text-gray-600">All work meets Texas electrical codes. We prioritize safety for your family with proper installation and testing.</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 mx-auto mb-4 bg-brand-green rounded-full flex items-center justify-center">
                <span className="text-2xl text-black">💰</span>
              </div>
              <h3 className="text-lg font-semibold mb-2">Fair Pricing</h3>
              <p className="text-gray-600">Transparent, upfront pricing with no hidden fees. We provide detailed estimates before starting any work.</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 mx-auto mb-4 bg-brand-green rounded-full flex items-center justify-center">
                <span className="text-2xl text-black">🔧</span>
              </div>
              <h3 className="text-lg font-semibold mb-2">Quality Work</h3>
              <p className="text-gray-600">Professional installation using quality materials. All work backed by our warranty and guaranteed to pass inspection.</p>
            </div>
          </div>
        </div>
      </section>

      {/* COMMON PROJECTS */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8">Common Residential Projects</h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-6">
              {[
                {
                  title: 'Kitchen Remodeling',
                  desc: 'Electrical work for kitchen renovations including new outlets, lighting, and appliance circuits'
                },
                {
                  title: 'Bathroom Upgrades',
                  desc: 'GFCI outlets, lighting, exhaust fans, and electrical safety upgrades for bathrooms'
                },
                {
                  title: 'Garage Electrical',
                  desc: 'Garage outlets, lighting, EV charger installation, and workshop electrical needs'
                },
                {
                  title: 'Outdoor Lighting',
                  desc: 'Landscape lighting, security lighting, and outdoor electrical installations'
                },
                {
                  title: 'Smart Home Integration',
                  desc: 'Smart switches, outlets, lighting controls, and home automation electrical work'
                },
                {
                  title: 'Electrical Troubleshooting',
                  desc: 'Diagnosis and repair of electrical problems, flickering lights, and circuit issues'
                }
              ].map((project, i) => (
                <div key={i} className="flex gap-4">
                  <div className="w-8 h-8 bg-brand-green text-black rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">
                    ✓
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg">{project.title}</h3>
                    <p className="text-gray-600">{project.desc}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="bg-brand-grayBg rounded-lg p-6">
              <h3 className="text-xl font-semibold mb-4">Free Home Electrical Assessment</h3>
              <p className="text-gray-700 mb-4">
                Not sure what electrical work your home needs? Our licensed electricians provide free assessments to evaluate your electrical system.
              </p>
              <ul className="text-sm text-gray-600 space-y-2 mb-6">
                <li>• Safety inspection</li>
                <li>• Code compliance check</li>
                <li>• Upgrade recommendations</li>
                <li>• Detailed written estimate</li>
              </ul>
              <a 
                href="tel:+13618850315"
                className="inline-flex min-h-[48px] items-center justify-center rounded-lg bg-brand-green px-4 py-3 text-black font-semibold w-full"
              >
                Schedule Free Assessment
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 bg-brand-grayBg">
        <div className="mx-auto max-w-container px-4">
          <FAQ items={residentialFaq} />
        </div>
      </section>

      {/* CTA */}
      <section className="bg-gray-50">
        <div className="mx-auto max-w-container px-4 py-16 grid md:grid-cols-2 gap-8 items-center">
          <div>
            <h2 className="text-2xl font-semibold">Ready to Upgrade Your Home's Electrical System?</h2>
            <p className="mt-2 text-gray-700">
              Get professional residential electrical service from Corpus Christi's trusted electricians. Free estimates and same-day service available.
            </p>
            <ul className="mt-4 space-y-2 text-sm text-gray-600">
              <li>✓ Licensed & insured</li>
              <li>✓ Free estimates</li>
              <li>✓ Warranty on all work</li>
              <li>✓ Emergency service available</li>
            </ul>
            <p className="mt-4 text-lg font-semibold">Call: (361) 885-0315</p>
          </div>
          <div>
            <ContactForm compact />
          </div>
        </div>
      </section>

      <Script 
        id="service-schema" 
        type="application/ld+json" 
        dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceSchema) }} 
      />
      <Script 
        id="faq-schema" 
        type="application/ld+json" 
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }} 
      />
    </>
  );
}