initial

web/app/corpus-christi/panel-upgrades/page.tsx

@@ -0,0 +1,283 @@
+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) }} 
+      />
+    </>
+  );
+}