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: 'Electrician in Aransas Pass, TX | Emergency & Residential Service',
  description: 'Licensed electrician serving Aransas Pass, Texas. 24/7 emergency electrical service, panel upgrades, wiring. Call (361) 885-0315.',
  openGraph: {
    title: 'Electrician in Aransas Pass, TX | Emergency & Residential Service',
    description: 'Licensed electrician serving Aransas Pass, Texas. 24/7 emergency electrical service, panel upgrades, wiring.',
    images: ['/og/aransas-pass-electrician-1200x630.jpg']
  }
};

const aransasPassFaq: QA[] = [
  {
    q: 'Do you provide electrical service in Aransas Pass?',
    a: 'Yes, we serve Aransas Pass and surrounding San Patricio County areas with complete electrical services including emergency repairs.'
  },
  {
    q: 'How far in advance should I schedule electrical work?',
    a: 'For non-emergency work, we typically schedule within 2-3 days. Emergency service is available 24/7 with same-day response.'
  },
  {
    q: 'Do you work on older homes in Aransas Pass?',
    a: 'Yes, we specialize in upgrading electrical systems in older homes, including panel upgrades and rewiring to meet current codes.'
  }
];

export default function AransasPassElectricianPage() {
  const locationSchema = {
    '@context': 'https://schema.org',
    '@type': 'Electrician',
    name: 'C & I Electrical Contractors - Aransas Pass',
    telephone: '+1-361-885-0315',
    address: {
      '@type': 'PostalAddress',
      streetAddress: '2801 S Port Ave',
      addressLocality: 'Corpus Christi',
      addressRegion: 'TX',
      postalCode: '78405',
      addressCountry: 'US'
    },
    areaServed: 'Aransas Pass, TX',
    url: 'https://www.cielectrical.com/aransas-pass/electrician'
  };

  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">Electrician Serving Aransas Pass, TX</h1>
            <p className="mt-4 text-lg">Reliable electrical services for Aransas Pass homes and businesses. <b>Licensed, insured, and ready to help</b> with all your electrical needs.</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 (361) 885-0315
              </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"
              >
                Free Quote
              </a>
            </div>
            <div className="mt-6 text-white/90 space-y-1">
              <p>✓ 24/7 emergency service available</p>
              <p>✓ Licensed Texas electrical contractor</p>
              <p>✓ Residential & commercial service</p>
            </div>
          </div>
          <div>
            <Image 
              src="/images/aransas-pass-electrician.jpg" 
              alt="Electrical service in Aransas Pass, Texas"
              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">Electrical Services in Aransas Pass</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              'Emergency Electrical Repairs',
              'Electrical Panel Upgrades',
              'Outlet & Switch Installation',
              'Lighting Installation',
              'Wiring & Rewiring',
              'Code Compliance Work'
            ].map((service, i) => (
              <div key={i} className="bg-white border rounded-lg p-6 shadow-card">
                <h3 className="font-semibold mb-2">{service}</h3>
                <p className="text-gray-600 text-sm">Professional electrical service you can trust</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 bg-brand-grayBg">
        <div className="mx-auto max-w-container px-4">
          <FAQ items={aransasPassFaq} />
        </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">Need an Electrician in Aransas Pass?</h2>
            <p className="mt-2 text-gray-700">
              Professional electrical service for Aransas Pass residents. Call for fast, reliable service.
            </p>
          </div>
          <div>
            <ContactForm compact />
          </div>
        </div>
      </section>

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