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';
import { track } from '@/lib/analytics';

export const metadata: Metadata = {
  title: '24/7 Emergency Electrician Corpus Christi | Under 60-Min Response',
  description: 'Power outage? Hot outlet? No lights? Licensed emergency electrician available 24/7 in Corpus Christi. Call (361) 885-0315 for same-day service.',
  openGraph: {
    title: '24/7 Emergency Electrician Corpus Christi | Under 60-Min Response',
    description: 'Power outage? Hot outlet? No lights? Licensed emergency electrician available 24/7 in Corpus Christi.',
    images: ['/og/emergency-electrician-1200x630.jpg']
  }
};

const emergencyFaq: QA[] = [
  {
    q: 'What qualifies as an electrical emergency?',
    a: 'Power outages, hot outlets, burning smells, sparking, exposed wires, breakers that won\'t reset, or any electrical safety hazard requiring immediate attention.'
  },
  {
    q: 'How quickly can you respond to emergencies?',
    a: 'Our average response time is under 60 minutes in Corpus Christi. We\'re available 24/7 including weekends and holidays.'
  },
  {
    q: 'Do you charge extra for emergency calls?',
    a: 'Emergency service calls have a premium fee, but we provide upfront pricing before starting work. No surprises.'
  },
  {
    q: 'Can you diagnose electrical problems over the phone?',
    a: 'We can provide basic safety guidance over the phone, but electrical issues require in-person diagnosis for safety and accuracy.'
  }
];

export default function EmergencyElectricianPage() {
  const serviceSchema = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: '24/7 Emergency Electrician',
    description: 'Fast emergency electrical repairs and troubleshooting in Corpus Christi, TX',
    provider: {
      '@type': 'LocalBusiness',
      name: 'C & I Electrical Contractors',
      telephone: '+1-361-885-0315'
    },
    serviceType: 'Emergency Electrical Service',
    areaServed: ['Corpus Christi', 'Flour Bluff', 'Portland', 'Aransas Pass', 'Rockport'],
    availableChannel: {
      '@type': 'ServiceChannel',
      servicePhone: '+1-361-885-0315',
      availableLanguage: 'English'
    }
  };

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

  return (
    <>
      {/* HERO */}
      <section className="bg-black 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">24/7 Emergency Electrician in Corpus Christi</h1>
            <p className="mt-4 text-lg">Power outage? Hot outlets? Sparking? We respond to electrical emergencies <b>24/7 with under-60-minute average response time</b>.</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-white px-6 py-3 text-black font-semibold"
              >
                Call Emergency Line Now
              </a>
            </div>
            <div className="mt-4 text-white/90">
              <p>✓ Licensed & Insured TECL ####</p>
              <p>✓ Available nights, weekends & holidays</p>
              <p>✓ Safety-first approach</p>
              <p>✓ Upfront pricing before work begins</p>
            </div>
          </div>
          <div>
            <Image 
              src="/images/emergency_repair.png" 
              alt="Emergency electrician responding to electrical outage in Corpus Christi"
              width={600}
              height={400}
              sizes="(max-width: 768px) 100vw, 50vw"
              className="rounded-lg"
            />
          </div>
        </div>
      </section>

      {/* EMERGENCY SERVICES */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8">Emergency Electrical Issues We Handle</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                title: 'Power Outages',
                description: 'Diagnose and restore power to homes and businesses',
                issues: ['Tripped main breaker', 'Damaged service entrance', 'Meter base problems']
              },
              {
                title: 'Hot Outlets & Switches',
                description: 'Address dangerous overheating electrical components',
                issues: ['Loose connections', 'Overloaded circuits', 'Faulty wiring']
              },
              {
                title: 'Electrical Fires',
                description: 'Immediate response to electrical fire hazards',
                issues: ['Sparking outlets', 'Burning smell', 'Arc faults']
              },
              {
                title: 'Storm Damage',
                description: 'Repair electrical systems damaged by weather',
                issues: ['Lightning damage', 'Flood damage', 'Wind damage']
              },
              {
                title: 'Exposed Wiring',
                description: 'Secure dangerous exposed electrical wires',
                issues: ['Damaged conduit', 'Rodent damage', 'Construction damage']
              },
              {
                title: 'Circuit Breaker Issues',
                description: 'Fix breakers that won\'t reset or stay on',
                issues: ['Faulty breakers', 'Panel problems', 'Ground faults']
              }
            ].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.issues.map((issue, j) => (
                    <li key={j}>• {issue}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* RESPONSE PROCESS */}
      <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">Our Emergency Response Process</h2>
          <div className="grid md:grid-cols-4 gap-6">
            {[
              { step: '1', title: 'Call Us', desc: 'Describe your emergency and location' },
              { step: '2', title: 'Dispatch', desc: 'Technician dispatched within minutes' },
              { step: '3', title: 'Arrive', desc: 'On-site typically under 60 minutes' },
              { step: '4', title: 'Fix', desc: 'Safe, code-compliant repair with warranty' }
            ].map((item) => (
              <div key={item.step} className="text-center">
                <div className="w-12 h-12 mx-auto mb-4 bg-brand-red text-white rounded-full flex items-center justify-center text-xl font-bold">
                  {item.step}
                </div>
                <h3 className="font-semibold mb-2">{item.title}</h3>
                <p className="text-gray-600 text-sm">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <FAQ items={emergencyFaq} />
        </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 text-red-600">Don't Wait — Electrical Problems Get Worse</h2>
            <p className="mt-2 text-gray-700">
              Electrical emergencies require immediate professional attention. Our licensed electricians are standing by 24/7 to help.
            </p>
            <p className="mt-4 font-semibold">Call now: (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) }} 
      />
    </>
  );
}