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 Rockport, TX | Licensed Electrical Services',
  description: 'Trusted electrician serving Rockport, Texas. Emergency electrical repairs, panel upgrades, residential & commercial. Call (361) 885-0315.',
  openGraph: {
    title: 'Electrician in Rockport, TX | Licensed Electrical Services',
    description: 'Trusted electrician serving Rockport, Texas. Emergency electrical repairs, panel upgrades, residential & commercial.',
    images: ['/og/rockport-electrician-1200x630.jpg']
  }
};

const rockportFaq: QA[] = [
  {
    q: 'Do you service Rockport area homes and businesses?',
    a: 'Yes, we provide complete electrical services to Rockport, Texas including emergency repairs, installations, and maintenance.'
  },
  {
    q: 'Are you familiar with coastal electrical challenges?',
    a: 'Yes, we understand the unique electrical challenges in coastal areas like Rockport including salt air corrosion and storm damage issues.'
  },
  {
    q: 'Do you offer storm damage electrical repairs?',
    a: 'Yes, we provide emergency electrical repairs for storm damage and work with insurance companies for covered repairs.'
  }
];

export default function RockportElectricianPage() {
  const locationSchema = {
    '@context': 'https://schema.org',
    '@type': 'Electrician',
    name: 'C & I Electrical Contractors - Rockport',
    telephone: '+1-361-885-0315',
    address: {
      '@type': 'PostalAddress',
      streetAddress: '2801 S Port Ave',
      addressLocality: 'Corpus Christi',
      addressRegion: 'TX',
      postalCode: '78405',
      addressCountry: 'US'
    },
    areaServed: 'Rockport, TX',
    url: 'https://www.cielectrical.com/rockport/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">Licensed Electrician in Rockport, TX</h1>
            <p className="mt-4 text-lg">Serving Rockport with professional electrical services. <b>Storm damage repairs, panel upgrades, and emergency service</b> available 24/7.</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 Now
              </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"
              >
                Get Estimate
              </a>
            </div>
            <div className="mt-6 text-white/90 space-y-1">
              <p>✓ Storm damage specialists</p>
              <p>✓ Coastal electrical experience</p>
              <p>✓ Insurance work welcome</p>
            </div>
          </div>
          <div>
            <Image 
              src="/images/rockport-electrician.jpg" 
              alt="Electrical services in Rockport, Texas coastal area"
              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">Rockport Electrical Services</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              'Storm Damage Repairs',
              'Emergency Electrical Service',
              'Panel Upgrades & Installation',
              'Residential Wiring',
              'Commercial Electrical',
              'Coastal-Rated Installations'
            ].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">Expert service for Rockport area</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 bg-brand-grayBg">
        <div className="mx-auto max-w-container px-4">
          <FAQ items={rockportFaq} />
        </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">Rockport Electrical Solutions</h2>
            <p className="mt-2 text-gray-700">
              Professional electrical service for Rockport homes and businesses. Emergency service available.
            </p>
          </div>
          <div>
            <ContactForm compact />
          </div>
        </div>
      </section>

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