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: 'Electrical Diagnostics Corpus Christi | Troubleshooting & Testing',
  description: 'Professional electrical diagnostics and troubleshooting in Corpus Christi. Circuit testing, load analysis, safety inspections. Call (361) 885-0315.',
  openGraph: {
    title: 'Electrical Diagnostics Corpus Christi | Troubleshooting & Testing',
    description: 'Professional electrical diagnostics and troubleshooting in Corpus Christi. Circuit testing, load analysis, safety inspections.',
    images: ['/og/electrical-diagnostics-1200x630.jpg']
  }
};

const diagnosticsFaq: QA[] = [
  {
    q: 'What electrical diagnostic services do you offer?',
    a: 'We provide comprehensive electrical diagnostics including circuit testing, load analysis, voltage testing, ground fault detection, arc fault testing, and thermal imaging inspections.'
  },
  {
    q: 'How do you diagnose electrical problems?',
    a: 'We use advanced diagnostic equipment including multimeters, circuit testers, thermal cameras, and specialized tools to identify electrical issues safely and accurately.'
  },
  {
    q: 'Can you diagnose electrical problems without turning off power?',
    a: 'Some diagnostics can be performed with power on, but for safety and accuracy, we often need to isolate circuits. We coordinate with you to minimize disruption.'
  },
  {
    q: 'Do you provide written diagnostic reports?',
    a: 'Yes, we provide detailed written reports including findings, recommendations, and repair options with photos and technical specifications.'
  }
];

export default function ElectricalDiagnosticsPage() {
  const serviceSchema = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: 'Electrical Diagnostics',
    description: 'Professional electrical diagnostics and troubleshooting in Corpus Christi, TX',
    provider: {
      '@type': 'LocalBusiness',
      name: 'C & I Electrical Contractors',
      telephone: '+1-361-885-0315'
    },
    serviceType: 'Electrical Diagnostic Service',
    areaServed: ['Corpus Christi', 'Flour Bluff', 'Portland', 'Aransas Pass', 'Rockport']
  };

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: diagnosticsFaq.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">Electrical Diagnostics in Corpus Christi</h1>
            <p className="mt-4 text-lg">Professional electrical troubleshooting and diagnostic services. <b>Advanced testing equipment</b> to identify and solve electrical problems quickly and safely.</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"
              >
                Schedule Diagnostics
              </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 Free Quote
              </a>
            </div>
            <div className="mt-4 text-white/90">
              <p>✓ Advanced diagnostic equipment</p>
              <p>✓ Licensed electrical technicians</p>
              <p>✓ Detailed written reports</p>
              <p>✓ Same-day service available</p>
            </div>
          </div>
          <div>
            <Image 
              src="/images/diagnostics.png" 
              alt="Professional electrical diagnostics and testing in Corpus Christi"
              width={600}
              height={400}
              sizes="(max-width: 768px) 100vw, 50vw"
              className="rounded-lg"
            />
          </div>
        </div>
      </section>

      {/* DIAGNOSTIC SERVICES */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8">Comprehensive Electrical Diagnostic Services</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                title: 'Circuit Testing',
                description: 'Comprehensive testing of electrical circuits for proper operation and safety',
                services: ['Voltage testing', 'Current measurement', 'Continuity testing', 'Ground fault detection']
              },
              {
                title: 'Load Analysis',
                description: 'Analysis of electrical load distribution and capacity assessment',
                services: ['Load calculations', 'Demand analysis', 'Capacity planning', 'Overload detection']
              },
              {
                title: 'Thermal Imaging',
                description: 'Infrared thermal imaging to detect hot spots and electrical problems',
                services: ['Hot spot detection', 'Overheating components', 'Connection issues', 'Preventive maintenance']
              },
              {
                title: 'Arc Fault Testing',
                description: 'Detection and analysis of dangerous arc faults in electrical systems',
                services: ['Arc fault detection', 'AFCI testing', 'Safety assessment', 'Code compliance']
              },
              {
                title: 'Ground Fault Testing',
                description: 'Testing of ground fault protection and electrical grounding systems',
                services: ['GFCI testing', 'Ground resistance', 'Ground fault detection', 'Safety verification']
              },
              {
                title: 'Voltage Analysis',
                description: 'Comprehensive voltage testing and power quality analysis',
                services: ['Voltage measurement', 'Power quality', 'Voltage drop analysis', 'Stability testing']
              }
            ].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.services.map((item, j) => (
                    <li key={j}>• {item}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DIAGNOSTIC EQUIPMENT */}
      <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">Advanced Diagnostic Equipment</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              {
                title: 'Digital Multimeters',
                desc: 'High-precision voltage, current, and resistance measurement'
              },
              {
                title: 'Thermal Cameras',
                desc: 'Infrared imaging to detect overheating electrical components'
              },
              {
                title: 'Circuit Testers',
                desc: 'Advanced circuit testing and fault detection equipment'
              },
              {
                title: 'Load Analyzers',
                desc: 'Professional load analysis and power quality testing'
              }
            ].map((equipment, i) => (
              <div key={i} 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="font-semibold mb-2">{equipment.title}</h3>
                <p className="text-gray-600 text-sm">{equipment.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* COMMON PROBLEMS */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8">Common Electrical Problems We Diagnose</h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-6">
              {[
                {
                  title: 'Flickering Lights',
                  desc: 'Diagnose causes including loose connections, voltage fluctuations, or circuit overloads'
                },
                {
                  title: 'Frequent Breaker Trips',
                  desc: 'Identify overloaded circuits, short circuits, or faulty electrical components'
                },
                {
                  title: 'Hot Outlets or Switches',
                  desc: 'Detect dangerous overheating caused by loose connections or overloaded circuits'
                },
                {
                  title: 'Electrical Shocks',
                  desc: 'Find ground faults, improper grounding, or damaged electrical insulation'
                },
                {
                  title: 'High Energy Bills',
                  desc: 'Analyze electrical efficiency and identify energy-wasting electrical problems'
                },
                {
                  title: 'Power Quality Issues',
                  desc: 'Diagnose voltage fluctuations, harmonics, and power factor problems'
                }
              ].map((problem, i) => (
                <div key={i} className="flex gap-4">
                  <div className="w-8 h-8 bg-brand-red text-white rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">
                    !
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg">{problem.title}</h3>
                    <p className="text-gray-600">{problem.desc}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="bg-brand-grayBg rounded-lg p-6">
              <h3 className="text-xl font-semibold mb-4">Diagnostic Process</h3>
              <div className="space-y-4">
                {[
                  { step: '1', title: 'Initial Assessment', desc: 'Visual inspection and problem identification' },
                  { step: '2', title: 'Equipment Setup', desc: 'Set up appropriate diagnostic equipment' },
                  { step: '3', title: 'Testing', desc: 'Perform comprehensive electrical testing' },
                  { step: '4', title: 'Analysis', desc: 'Analyze results and identify root causes' },
                  { step: '5', title: 'Report', desc: 'Provide detailed written report with recommendations' }
                ].map((item) => (
                  <div key={item.step} className="flex gap-4">
                    <div className="w-8 h-8 bg-brand-green text-black rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">
                      {item.step}
                    </div>
                    <div>
                      <h4 className="font-semibold">{item.title}</h4>
                      <p className="text-gray-600 text-sm">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* DIAGNOSTIC REPORTS */}
      <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">Comprehensive Diagnostic Reports</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                title: 'Detailed Findings',
                desc: 'Comprehensive analysis of all electrical issues found during diagnostics'
              },
              {
                title: 'Safety Assessment',
                desc: 'Evaluation of electrical safety hazards and code compliance issues'
              },
              {
                title: 'Repair Recommendations',
                desc: 'Prioritized list of recommended repairs with cost estimates'
              }
            ].map((report, i) => (
              <div key={i} 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="font-semibold mb-2">{report.title}</h3>
                <p className="text-gray-600">{report.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <FAQ items={diagnosticsFaq} />
        </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 Professional Electrical Diagnostics?</h2>
            <p className="mt-2 text-gray-700">
              Get accurate diagnosis of your electrical problems with our advanced testing equipment and experienced technicians.
            </p>
            <ul className="mt-4 space-y-2 text-sm text-gray-600">
              <li>✓ Advanced diagnostic equipment</li>
              <li>✓ Licensed technicians</li>
              <li>✓ Detailed written reports</li>
              <li>✓ Same-day service available</li>
            </ul>
            <p className="mt-4 text-lg font-semibold">Call: (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) }} 
      />
    </>
  );
}