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 Flour Bluff, TX | 24/7 Emergency Service',
  description: 'Licensed electrician serving Flour Bluff, Texas. Emergency repairs, panel upgrades, lighting. Fast response times. Call (361) 885-0315.',
  openGraph: {
    title: 'Electrician in Flour Bluff, TX | 24/7 Emergency Service',
    description: 'Licensed electrician serving Flour Bluff, Texas. Emergency repairs, panel upgrades, lighting. Fast response times.',
    images: ['/og/flour-bluff-electrician-1200x630.jpg']
  }
};

const flourBluffFaq: QA[] = [
  {
    q: 'Do you provide emergency electrical service in Flour Bluff?',
    a: 'Yes, we offer 24/7 emergency electrical service throughout Flour Bluff with typical response times under 60 minutes.'
  },
  {
    q: 'Are you licensed to work in Flour Bluff?',
    a: 'Yes, we\'re licensed Texas electrical contractors (TECL ####) and fully insured to work throughout Nueces County including Flour Bluff.'
  },
  {
    q: 'What electrical services do you offer in Flour Bluff?',
    a: 'We provide complete electrical services including emergency repairs, panel upgrades, lighting installation, outlet installation, and code compliance work.'
  }
];

export default function FlourBluffElectricianPage() {
  const locationSchema = {
    '@context': 'https://schema.org',
    '@type': 'Electrician',
    name: 'C & I Electrical Contractors - Flour Bluff',
    telephone: '+1-361-885-0315',
    address: {
      '@type': 'PostalAddress',
      streetAddress: '2801 S Port Ave',
      addressLocality: 'Corpus Christi',
      addressRegion: 'TX',
      postalCode: '78405',
      addressCountry: 'US'
    },
    areaServed: 'Flour Bluff, TX',
    url: 'https://www.cielectrical.com/flour-bluff/electrician',
    serviceArea: {
      '@type': 'GeoCircle',
      geoMidpoint: {
        '@type': 'GeoCoordinates',
        latitude: 27.6648,
        longitude: -97.2316
      },
      geoRadius: '15'
    }
  };

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: flourBluffFaq.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">Trusted Electrician in Flour Bluff, TX</h1>
            <p className="mt-4 text-lg">Serving Flour Bluff residents with <b>reliable electrical services since 2005</b>. Emergency repairs, panel upgrades, and more.</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 — 24/7
              </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 grid grid-cols-3 gap-4 text-sm">
              <div className="text-center">
                <div className="text-2xl font-bold text-brand-green">24/7</div>
                <div className="text-white/80">Emergency Service</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-brand-green">&lt;60min</div>
                <div className="text-white/80">Average Response</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-brand-green">19+</div>
                <div className="text-white/80">Years Experience</div>
              </div>
            </div>
          </div>
          <div>
            <Image 
              src="/images/flour-bluff-electrician.jpg" 
              alt="Licensed electrician working in Flour Bluff, Texas home"
              width={600}
              height={400}
              sizes="(max-width: 768px) 100vw, 50vw"
              className="rounded-lg"
            />
          </div>
        </div>
      </section>

      {/* KEY BENEFITS */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8 text-center">Why Flour Bluff Residents 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">Local Knowledge</h3>
              <p className="text-gray-600">We know Flour Bluff homes and common electrical issues in the area. From older homes near the water to newer developments.</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">Fast Response</h3>
              <p className="text-gray-600">Close proximity means faster response times for Flour Bluff emergency calls. We're typically on-site within 45 minutes.</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">Code Compliant</h3>
              <p className="text-gray-600">All work meets or exceeds Texas electrical codes. We handle permits and inspections for your peace of mind.</p>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="py-16 bg-brand-grayBg">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8">Electrical Services in Flour Bluff</h2>
          <div className="grid md:grid-cols-2 gap-6">
            {[
              {
                title: 'Emergency Electrical Repair',
                desc: 'Power outages, tripped breakers, hot outlets, electrical hazards',
                link: '/corpus-christi/emergency-electrician'
              },
              {
                title: 'Panel Upgrades',
                desc: '100A to 200A service upgrades, AFCI/GFCI installation',
                link: '/corpus-christi/panel-upgrades'
              },
              {
                title: 'Lighting Installation',
                desc: 'Indoor/outdoor lighting, ceiling fans, LED retrofits',
                link: '/residential'
              },
              {
                title: 'Outlet & Switch Work',
                desc: 'GFCI outlets, USB outlets, dimmer switches, new circuits',
                link: '/residential'
              },
              {
                title: 'EV Charging Stations',
                desc: 'Tesla Wall Connector, NEMA 14-50 outlets, Level 2 chargers',
                link: '/corpus-christi/ev-charger-install'
              },
              {
                title: 'Safety Inspections',
                desc: 'Home electrical inspections, code compliance, insurance requirements',
                link: '/residential'
              }
            ].map((service, i) => (
              <a 
                key={i} 
                href={service.link}
                className="bg-white rounded-lg p-6 shadow-card hover:shadow-md transition-shadow"
              >
                <h3 className="font-semibold text-lg mb-2">{service.title}</h3>
                <p className="text-gray-600">{service.desc}</p>
                <span className="text-brand-green text-sm font-medium mt-2 inline-block">Learn more →</span>
              </a>
            ))}
          </div>
        </div>
      </section>

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

      {/* CONTACT INFO */}
      <section className="py-16 bg-brand-dark text-white">
        <div className="mx-auto max-w-container px-4 text-center">
          <h2 className="text-2xl font-semibold mb-4">Serving Flour Bluff & Surrounding Areas</h2>
          <p className="text-white/90 mb-8">Licensed, insured, and ready to help with all your electrical needs.</p>
          
          <div className="grid md:grid-cols-3 gap-8 mb-12">
            <div>
              <h3 className="font-semibold mb-2">Address</h3>
              <p className="text-white/80">2801 S Port Ave<br/>Corpus Christi, TX 78405</p>
            </div>
            <div>
              <h3 className="font-semibold mb-2">Phone</h3>
              <p className="text-white/80">(361) 885-0315</p>
            </div>
            <div>
              <h3 className="font-semibold mb-2">Hours</h3>
              <p className="text-white/80">24/7 Emergency<br/>Mon-Fri 7AM-5PM Regular</p>
            </div>
          </div>
          
          <div className="flex flex-wrap justify-center gap-4">
            <a 
              href="/residential"
              className="inline-flex min-h-[48px] items-center justify-center rounded-lg bg-brand-green px-4 py-3 text-black font-semibold"
            >
              Residential Services
            </a>
            <a 
              href="/commercial"
              className="inline-flex min-h-[48px] items-center justify-center rounded-lg border border-brand-orange text-brand-orange px-4 py-3 font-semibold"
            >
              Commercial Services
            </a>
          </div>
        </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 Flour Bluff?</h2>
            <p className="mt-2 text-gray-700">
              Get fast, professional electrical service from your local Flour Bluff electricians. Call now or request a free quote.
            </p>
            <p className="mt-4 font-semibold">Call: (361) 885-0315</p>
          </div>
          <div>
            <ContactForm compact />
          </div>
        </div>
      </section>

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