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) }} 
      />
    </>
  );
}