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 Panel Upgrade Corpus Christi | 100A to 200A Service',
  description: 'Upgrade old electrical panels to meet modern power demands. Licensed electricians handle permits, inspections. Call (361) 885-0315 for free estimate.',
  openGraph: {
    title: 'Electrical Panel Upgrade Corpus Christi | 100A to 200A Service',
    description: 'Upgrade old electrical panels to meet modern power demands. Licensed electricians handle permits, inspections.',
    images: ['/og/panel-upgrade-1200x630.jpg']
  }
};

const panelFaq: QA[] = [
  {
    q: 'How do I know if I need a panel upgrade?',
    a: 'Signs include frequent breaker trips, flickering lights, hot outlets, burning smell, or if your panel is over 20 years old. We provide free assessments.'
  },
  {
    q: 'Do I need permits for a panel upgrade?',
    a: 'Yes, electrical panel upgrades require permits in Corpus Christi. We handle all permits and coordinate inspections.'
  },
  {
    q: 'How long does a panel upgrade take?',
    a: 'Most residential panel upgrades take 6-8 hours. We coordinate with CPS Energy for temporary power disconnection.'
  },
  {
    q: 'What\'s included in the upgrade cost?',
    a: 'New panel, breakers, permits, inspection coordination, code compliance updates, and 1-year warranty on labor.'
  }
];

export default function PanelUpgradePage() {
  const serviceSchema = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: 'Electrical Panel Upgrade',
    description: 'Professional electrical panel upgrades from 100A to 200A service in Corpus Christi, TX',
    provider: {
      '@type': 'LocalBusiness',
      name: 'C & I Electrical Contractors',
      telephone: '+1-361-885-0315'
    },
    serviceType: 'Electrical Panel Installation',
    areaServed: ['Corpus Christi', 'Flour Bluff', 'Portland', 'Aransas Pass', 'Rockport']
  };

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: panelFaq.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 Panel Upgrades in Corpus Christi</h1>
            <p className="mt-4 text-lg">Is your electrical panel keeping up with modern power demands? Upgrade from <b>100A to 200A service</b> with AFCI/GFCI protection.</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 for Free Assessment
              </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 Quote
              </a>
            </div>
            <div className="mt-4 text-white/90">
              <p>✓ We handle permits & inspections</p>
              <p>✓ Code compliant installation</p>
              <p>✓ Same-day service available</p>
              <p>✓ 1-year warranty on labor</p>
            </div>
          </div>
          <div>
            <Image 
              src="/images/panel_upgrade.png" 
              alt="Modern 200A electrical panel installation in Corpus Christi home"
              width={600}
              height={400}
              sizes="(max-width: 768px) 100vw, 50vw"
              className="rounded-lg"
            />
          </div>
        </div>
      </section>

      {/* SIGNS YOU NEED UPGRADE */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8">Signs You Need a Panel Upgrade</h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-6">
              {[
                {
                  title: 'Frequent Breaker Trips',
                  desc: 'Breakers constantly tripping indicate your panel can\'t handle current electrical load'
                },
                {
                  title: 'Flickering Lights',
                  desc: 'Lights dimming when appliances start up suggests insufficient power capacity'
                },
                {
                  title: 'Hot Outlets or Switches',
                  desc: 'Overheating components are dangerous and indicate electrical overload'
                },
                {
                  title: 'Burning Smell',
                  desc: 'Electrical burning odors require immediate professional attention'
                },
                {
                  title: 'Old Panel Age',
                  desc: 'Panels over 20 years old may not meet current electrical codes'
                },
                {
                  title: 'Insufficient Outlets',
                  desc: 'Relying on extension cords indicates need for more circuits'
                }
              ].map((sign, 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">{sign.title}</h3>
                    <p className="text-gray-600">{sign.desc}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="bg-brand-grayBg rounded-lg p-6">
              <h3 className="text-xl font-semibold mb-4">Free Panel Assessment</h3>
              <p className="text-gray-700 mb-4">
                Not sure if you need an upgrade? Our licensed electricians provide free assessments to evaluate your electrical panel's condition and capacity.
              </p>
              <ul className="text-sm text-gray-600 space-y-2 mb-6">
                <li>• Load calculation analysis</li>
                <li>• Safety inspection</li>
                <li>• Code compliance check</li>
                <li>• Detailed written estimate</li>
              </ul>
              <a 
                href="tel:+13618850315"
                className="inline-flex min-h-[48px] items-center justify-center rounded-lg bg-brand-green px-4 py-3 text-black font-semibold w-full"
              >
                Schedule Free Assessment
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* UPGRADE 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 Panel Upgrade Process</h2>
          <div className="grid md:grid-cols-5 gap-6">
            {[
              { step: '1', title: 'Assessment', desc: 'Free evaluation of current panel and electrical needs' },
              { step: '2', title: 'Permits', desc: 'We pull all required city permits for you' },
              { step: '3', title: 'Installation', desc: 'Professional installation with minimal downtime' },
              { step: '4', title: 'Inspection', desc: 'City inspection coordination and approval' },
              { step: '5', title: 'Testing', desc: 'Complete system testing and warranty documentation' }
            ].map((item) => (
              <div key={item.step} className="text-center">
                <div className="w-12 h-12 mx-auto mb-4 bg-brand-green text-black 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>

      {/* PANEL TYPES */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8">Panel Upgrade Options</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                title: '100A to 150A Upgrade',
                price: 'Starting at $2,200',
                features: ['Suitable for smaller homes', '20-24 circuit capacity', 'Standard GFCI protection', 'Permits included']
              },
              {
                title: '100A to 200A Upgrade',
                price: 'Starting at $2,800',
                features: ['Most popular choice', '40-42 circuit capacity', 'AFCI/GFCI protection', 'Future expansion ready'],
                popular: true
              },
              {
                title: '200A to 400A Upgrade',
                price: 'Custom Quote',
                features: ['Large homes/shops', 'Maximum capacity', 'Smart panel options', 'EV charging ready']
              }
            ].map((option, i) => (
              <div key={i} className={`rounded-lg p-6 border-2 ${option.popular ? 'border-brand-green bg-green-50' : 'border-gray-200 bg-white'}`}>
                {option.popular && (
                  <div className="text-center mb-4">
                    <span className="inline-block px-3 py-1 bg-brand-green text-black text-sm font-semibold rounded-full">
                      Most Popular
                    </span>
                  </div>
                )}
                <h3 className="text-xl font-semibold mb-2">{option.title}</h3>
                <p className="text-2xl font-bold text-brand-green mb-4">{option.price}</p>
                <ul className="space-y-2 mb-6">
                  {option.features.map((feature, j) => (
                    <li key={j} className="flex items-center gap-2 text-sm">
                      <span className="text-brand-green">✓</span>
                      {feature}
                    </li>
                  ))}
                </ul>
                <a 
                  href="/contact"
                  className="inline-flex min-h-[48px] items-center justify-center rounded-lg bg-brand-green px-4 py-3 text-black font-semibold w-full"
                >
                  Get Quote
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <FAQ items={panelFaq} />
        </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">Ready to Upgrade Your Electrical Panel?</h2>
            <p className="mt-2 text-gray-700">
              Get a free assessment and detailed quote. We handle permits, installation, and inspection coordination.
            </p>
            <p className="mt-4 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) }} 
      />
    </>
  );
}