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

export const metadata: Metadata = {
  title: 'Residential Electrician | Corpus Christi Home Electrical Services',
  description: 'Licensed residential electrician in Corpus Christi. Panel upgrades, rewiring, outlet installation, lighting. Safe, code-compliant work. Call (361) 885-0315.',
  openGraph: {
    title: 'Residential Electrician | Corpus Christi Home Electrical Services',
    description: 'Licensed residential electrician in Corpus Christi. Panel upgrades, rewiring, outlet installation, lighting.',
    images: ['/og/residential-electrician-1200x630.jpg']
  }
};

const residentialFaq: QA[] = [
  {
    q: 'What residential electrical services do you offer?',
    a: 'We provide complete home electrical services including panel upgrades, rewiring, outlet installation, lighting, ceiling fans, and emergency repairs.'
  },
  {
    q: 'Do you work on older homes?',
    a: 'Yes, we specialize in upgrading electrical systems in older Corpus Christi homes, bringing them up to current safety codes.'
  },
  {
    q: 'How much does residential electrical work cost?',
    a: 'Costs vary by project complexity. We provide free estimates with upfront pricing. Most service calls start around $150.'
  },
  {
    q: 'Do you offer financing for large projects?',
    a: 'Yes, we offer financing options for larger residential projects like panel upgrades and whole-home rewiring.'
  }
];

export default function Residential() {
  return (
    <>
      {/* HERO */}
      <section className="bg-gradient-to-br from-brand-dark to-slate-800 text-white">
        <div className="container-custom py-24 grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h1 className="font-heading font-bold text-4xl md:text-5xl mb-6 leading-tight">
              Residential Electricians in Corpus Christi, TX
            </h1>
            <p className="text-xl text-gray-300 mb-8 max-w-prose">
              Trusted by Corpus Christi homeowners for over <strong className="text-brand-green">19 years</strong>. Safe, code-compliant repairs and upgrades for your home.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 mb-8">
              <a 
                href="tel:+13618850315"
                className="btn-primary text-center"
              >
                Call for Home Service
              </a>
              <a 
                href="#quote-form"
                className="btn-secondary text-center"
              >
                Free Home Estimate
              </a>
            </div>
            <TrustStrip />
          </div>
          <div>
            <Image 
              src="/images/residential.png" 
              alt="Residential electrician working on home electrical panel in Corpus Christi"
              width={600}
              height={400}
              sizes="(max-width: 768px) 100vw, 50vw"
              priority
              className="rounded-card shadow-2xl"
            />
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="py-24 bg-white">
        <div className="container-custom">
          <h2 className="font-heading font-bold text-3xl text-center mb-12">Home Electrical Services</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                title: 'Electrical Panel Upgrades',
                desc: '100A to 200A service upgrades, AFCI/GFCI protection, modern safety features',
                link: '/corpus-christi/panel-upgrades',
                icon: '⚡',
                bgColor: 'bg-brand-lightBlue'
              },
              {
                title: 'Home Rewiring',
                desc: 'Full or partial rewiring, knob & tube replacement, aluminum wire replacement',
                price: 'Starting at $3,500',
                icon: '🔌',
                bgColor: 'bg-brand-lightOrange'
              },
              {
                title: 'Outlet Installation',
                desc: 'GFCI outlets, USB outlets, dedicated appliance circuits, outdoor outlets',
                price: 'Starting at $150',
                icon: '🔋',
                bgColor: 'bg-brand-lightGreen'
              },
              {
                title: 'Lighting Installation',
                desc: 'Recessed lighting, chandeliers, under-cabinet lighting, outdoor lighting',
                price: 'Starting at $200',
                icon: '💡',
                bgColor: 'bg-brand-lightOrange'
              },
              {
                title: 'Ceiling Fan Installation',
                desc: 'New fan installation, fan replacement, electrical box upgrades',
                price: 'Starting at $250',
                icon: '🌀',
                bgColor: 'bg-brand-lightPurple'
              },
              {
                title: 'Emergency Repairs',
                desc: 'Power outages, hot outlets, tripped breakers, electrical hazards',
                link: '/corpus-christi/emergency-electrician',
                icon: '🚨',
                bgColor: 'bg-brand-lightOrange'
              },
              {
                title: 'EV Charging Stations',
                desc: 'Tesla Wall Connector, NEMA 14-50 outlets, Level 2 charger installation',
                link: '/corpus-christi/ev-charger-install',
                icon: '🔋',
                bgColor: 'bg-brand-lightGreen'
              },
              {
                title: 'Smart Home Wiring',
                desc: 'Smart switch installation, home automation, low-voltage wiring',
                price: 'Custom quote',
                icon: '🏠',
                bgColor: 'bg-brand-lightBlue'
              },
              {
                title: 'Safety Inspections',
                desc: 'Home electrical inspections, insurance requirements, code compliance',
                price: 'Starting at $200',
                icon: '✅',
                bgColor: 'bg-brand-lightGreen'
              }
            ].map((service, i) => (
              <div key={i} className="card group hover:shadow-lg transition-all duration-200">
                <div className="flex items-start gap-4">
                  <div className={`w-12 h-12 ${service.bgColor} rounded-full flex items-center justify-center flex-shrink-0`}>
                    <span className="text-2xl">{service.icon}</span>
                  </div>
                  <div>
                    <h3 className="font-heading font-semibold text-lg mb-2 group-hover:text-brand-green transition-colors">
                      {service.title}
                    </h3>
                    <p className="text-gray-600 text-sm mb-3">{service.desc}</p>
                    {service.price && (
                      <p className="text-brand-green font-semibold text-sm mb-2">{service.price}</p>
                    )}
                    {service.link && (
                      <a href={service.link} className="text-brand-green text-sm font-medium hover:underline">
                        Learn more →
                      </a>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHY CHOOSE US */}
      <section className="py-24 bg-brand-surface">
        <div className="container-custom">
          <h2 className="font-heading font-bold text-3xl text-center mb-12">Why Homeowners Choose C & I Electrical</h2>
          <div className="grid md:grid-cols-4 gap-8">
            {[
              {
                title: 'Licensed & Insured',
                desc: 'Texas electrical contractor license with full insurance coverage',
                icon: '🛡️'
              },
              {
                title: 'Code Compliant',
                desc: 'All work meets or exceeds current electrical codes and safety standards',
                icon: '✅'
              },
              {
                title: 'Warranty Backed',
                desc: '1-year warranty on labor, manufacturer warranty on all parts',
                icon: '🔒'
              },
              {
                title: 'Clean & Professional',
                desc: 'Respect your home with clean work areas and professional service',
                icon: '✨'
              }
            ].map((benefit, i) => (
              <div key={i} className="card text-center">
                <div className="text-4xl mb-4">{benefit.icon}</div>
                <h3 className="font-heading font-semibold text-lg mb-2">{benefit.title}</h3>
                <p className="text-gray-600 text-sm">{benefit.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

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

      {/* CTA */}
      <section className="py-24 bg-brand-dark text-white">
        <div className="container-custom">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="font-heading font-bold text-3xl mb-6">Ready for Safe, Professional Electrical Work?</h2>
              <p className="text-xl text-gray-300 mb-8">
                Get a free estimate for your home electrical project. We provide upfront pricing with no surprises.
              </p>
              <div className="space-y-3 text-sm text-gray-300 mb-8">
                <p className="flex items-center gap-2">
                  <span className="text-brand-green">✓</span>
                  Licensed Texas electrical contractor
                </p>
                <p className="flex items-center gap-2">
                  <span className="text-brand-green">✓</span>
                  Free estimates on all projects
                </p>
                <p className="flex items-center gap-2">
                  <span className="text-brand-green">✓</span>
                  Same-day service available
                </p>
                <p className="flex items-center gap-2">
                  <span className="text-brand-green">✓</span>
                  Financing options available
                </p>
              </div>
              <p className="text-xl font-semibold">Call: (361) 885-0315</p>
            </div>
            <div id="quote-form">
              <ContactForm variant="dark" />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}