initial

web/app/portland-tx/electrician/page.tsx

@@ -0,0 +1,286 @@
+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 Portland, TX | Licensed & Insured',
+  description: 'Trusted electrician serving Portland, Texas. 24/7 emergency service, panel upgrades, lighting installation. Call (361) 885-0315.',
+  openGraph: {
+    title: 'Electrician in Portland, TX | Licensed & Insured',
+    description: 'Trusted electrician serving Portland, Texas. 24/7 emergency service, panel upgrades, lighting installation.',
+    images: ['/og/portland-tx-electrician-1200x630.jpg']
+  }
+};
+
+const portlandFaq: QA[] = [
+  {
+    q: 'Do you service Portland, TX residents?',
+    a: 'Yes, we provide comprehensive electrical services to Portland, Texas residents including emergency repairs, installations, and upgrades.'
+  },
+  {
+    q: 'How quickly can you respond to Portland emergency calls?',
+    a: 'We typically respond to Portland electrical emergencies within 45-60 minutes, available 24/7 including weekends.'
+  },
+  {
+    q: 'Do you handle electrical permits in Portland?',
+    a: 'Yes, we handle all necessary permits and coordinate inspections with the City of Portland for electrical work.'
+  }
+];
+
+export default function PortlandElectricianPage() {
+  const locationSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'Electrician',
+    name: 'C & I Electrical Contractors - Portland',
+    telephone: '+1-361-885-0315',
+    address: {
+      '@type': 'PostalAddress',
+      streetAddress: '2801 S Port Ave',
+      addressLocality: 'Corpus Christi',
+      addressRegion: 'TX',
+      postalCode: '78405',
+      addressCountry: 'US'
+    },
+    areaServed: 'Portland, TX',
+    url: 'https://www.cielectrical.com/portland-tx/electrician',
+    serviceArea: {
+      '@type': 'GeoCircle',
+      geoMidpoint: {
+        '@type': 'GeoCoordinates',
+        latitude: 27.8767,
+        longitude: -97.3244
+      },
+      geoRadius: '20'
+    }
+  };
+
+  const faqSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: portlandFaq.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">Licensed Electrician Serving Portland, TX</h1>
+            <p className="mt-4 text-lg">Professional electrical services for Portland residents and businesses. <b>Emergency repairs, panel upgrades, and installations</b> you can trust.</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 Portland Electrician
+              </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 Estimate
+              </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">Licensed</div>
+                <div className="text-white/80">TECL ####</div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-brand-green">Insured</div>
+                <div className="text-white/80">Full Coverage</div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-brand-green">Local</div>
+                <div className="text-white/80">Since 2005</div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <Image 
+              src="/images/portland-tx-electrician.jpg" 
+              alt="Professional electrician working on residential electrical system in Portland, Texas"
+              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 Portland Chooses C & I Electrical</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">Safety First</h3>
+              <p className="text-gray-600">All work meets Texas electrical codes. We prioritize safety for your family and property with proper installation and testing.</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">Fair Pricing</h3>
+              <p className="text-gray-600">Transparent, upfront pricing with no hidden fees. We provide detailed estimates before starting any work.</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">Quality Work</h3>
+              <p className="text-gray-600">Professional installation using quality materials. All work backed by our warranty and guaranteed to pass inspection.</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">Complete Electrical Services for Portland</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            {[
+              {
+                title: 'Emergency Service',
+                desc: '24/7 emergency electrical repairs, power restoration, safety hazards',
+                icon: '🚨'
+              },
+              {
+                title: 'Panel & Service Upgrades',
+                desc: 'Electrical panel upgrades, service entrance, capacity increases',
+                icon: '⚡'
+              },
+              {
+                title: 'Residential Wiring',
+                desc: 'New circuits, rewiring, outlet installation, switch upgrades',
+                icon: '🏡'
+              },
+              {
+                title: 'Lighting Solutions',
+                desc: 'Interior/exterior lighting, ceiling fans, LED conversions',
+                icon: '💡'
+              },
+              {
+                title: 'Commercial Electrical',
+                desc: 'Business electrical work, tenant improvements, maintenance',
+                icon: '🏢'
+              },
+              {
+                title: 'Code & Safety',
+                desc: 'Code compliance, safety inspections, permit coordination',
+                icon: '✅'
+              }
+            ].map((service, i) => (
+              <div key={i} className="bg-white rounded-lg p-6 shadow-card">
+                <div className="flex items-start gap-4">
+                  <span className="text-3xl">{service.icon}</span>
+                  <div>
+                    <h3 className="font-semibold text-lg mb-2">{service.title}</h3>
+                    <p className="text-gray-600">{service.desc}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="py-16 bg-white">
+        <div className="mx-auto max-w-container px-4">
+          <FAQ items={portlandFaq} />
+        </div>
+      </section>
+
+      {/* SERVICE AREA */}
+      <section className="py-16 bg-brand-grayBg">
+        <div className="mx-auto max-w-container px-4 text-center">
+          <h2 className="text-2xl font-semibold mb-8">Proudly Serving Portland & Surrounding Areas</h2>
+          <div className="grid md:grid-cols-4 gap-4 mb-12">
+            {[
+              'Portland, TX',
+              'Gregory, TX',
+              'Ingleside, TX',
+              'Taft, TX'
+            ].map((area, i) => (
+              <div key={i} className="bg-white rounded-lg p-4 shadow-card">
+                <p className="font-medium">{area}</p>
+              </div>
+            ))}
+          </div>
+          
+          <div className="bg-white rounded-lg p-8">
+            <h3 className="text-xl font-semibold mb-4">Business Information</h3>
+            <div className="grid md:grid-cols-3 gap-8 text-left">
+              <div>
+                <h4 className="font-semibold mb-2">Licensed & Insured</h4>
+                <p className="text-gray-600">Texas Electrical Contractor License TECL ####</p>
+                <p className="text-gray-600">Full liability and workers' compensation insurance</p>
+              </div>
+              <div>
+                <h4 className="font-semibold mb-2">Contact Information</h4>
+                <p className="text-gray-600">Phone: (361) 885-0315</p>
+                <p className="text-gray-600">Email: info@cielectrical.com</p>
+                <p className="text-gray-600">Available 24/7 for emergencies</p>
+              </div>
+              <div>
+                <h4 className="font-semibold mb-2">Service Hours</h4>
+                <p className="text-gray-600">Regular: Mon-Fri 7AM-5PM</p>
+                <p className="text-gray-600">Emergency: 24/7/365</p>
+                <p className="text-gray-600">Free estimates available</p>
+              </div>
+            </div>
+          </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">Ready to Solve Your Electrical Problem?</h2>
+            <p className="mt-2 text-gray-700">
+              Get professional electrical service from Portland's trusted electricians. Emergency service available 24/7.
+            </p>
+            <ul className="mt-4 space-y-2 text-sm text-gray-600">
+              <li>✓ Licensed & insured</li>
+              <li>✓ Free estimates</li>
+              <li>✓ Warranty on all work</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="location-schema" 
+        type="application/ld+json" 
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(locationSchema) }} 
+      />
+      <Script 
+        id="faq-schema" 
+        type="application/ld+json" 
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }} 
+      />
+    </>
+  );
+}