import type { Metadata } from 'next';
import Image from 'next/image';
import FAQ, { QA } from '@/components/FAQ';
import ContactForm from '@/components/ContactForm';

export const metadata: Metadata = {
  title: 'Commercial Electrical Services | Corpus Christi Business Electrical',
  description: 'Commercial electrical services in Corpus Christi. Tenant build-outs, lighting retrofits, service upgrades, maintenance programs. Call (361) 885-0315.',
  openGraph: {
    title: 'Commercial Electrical Services | Corpus Christi Business Electrical',
    description: 'Commercial electrical services in Corpus Christi. Tenant build-outs, lighting retrofits, service upgrades, maintenance programs.',
    images: ['/og/commercial-electrician-1200x630.jpg']
  }
};

const commercialFaq: QA[] = [
  {
    q: 'What commercial electrical services do you offer?',
    a: 'We provide complete commercial electrical solutions including tenant build-outs, lighting retrofits, service upgrades, maintenance programs, and emergency repairs.'
  },
  {
    q: 'Do you work after hours to minimize business disruption?',
    a: 'Yes, we offer after-hours and weekend service to minimize downtime for your business operations.'
  },
  {
    q: 'Can you handle large commercial projects?',
    a: 'Yes, we have experience with projects of all sizes, from small retail build-outs to large warehouse installations.'
  },
  {
    q: 'Do you provide maintenance contracts?',
    a: 'Yes, we offer comprehensive maintenance programs including scheduled inspections, thermal imaging, and emergency repair service.'
  }
];

export default function Commercial() {
  return (
    <>
      {/* HERO */}
      <section className="bg-gradient-to-br from-brand-dark to-slate-800 text-white">
        <div className="container-custom py-24 grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h1 className="font-heading font-bold text-4xl md:text-5xl mb-6 leading-tight">
              Commercial Electrical Services for Corpus Christi Businesses
            </h1>
            <p className="text-xl text-gray-300 mb-8 max-w-prose">
              Minimize downtime with code-compliant installs, retrofits, and maintenance. After-hours and emergency service available.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 mb-8">
              <a 
                href="tel:+13618850315"
                className="btn-primary text-center"
              >
                Call Now — 24/7 Emergency Help
              </a>
              <a 
                href="#quote-form"
                className="btn-secondary text-center"
              >
                Request Project Quote
              </a>
            </div>
            <div className="flex flex-wrap items-center gap-6 text-sm text-gray-300">
              <span className="flex items-center gap-1">
                <span className="text-yellow-400">⭐⭐⭐⭐⭐</span>
                <span>4.9 Rating (200+ reviews)</span>
              </span>
              <span>•</span>
              <span>A+ BBB</span>
              <span>•</span>
              <span>19+ Years</span>
            </div>
          </div>
          <div>
            <Image 
              src="/images/commercial.png" 
              alt="Commercial electrician working on business electrical system in Corpus Christi"
              width={600}
              height={400}
              sizes="(max-width: 768px) 100vw, 50vw"
              priority
              className="rounded-card shadow-2xl"
            />
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="py-24 bg-white">
        <div className="container-custom">
          <h2 className="font-heading font-bold text-3xl text-center mb-12">Complete Commercial Electrical Solutions</h2>
          <div className="grid md:grid-cols-2 gap-8">
            {[
              {
                title: 'Tenant Build-Outs',
                items: ['Power distribution design', 'Lighting layout & installation', 'Data/communication wiring', 'Code compliance & permitting'],
                icon: '🏢',
                bgColor: 'bg-brand-lightBlue'
              },
              {
                title: 'Lighting Retrofits',
                items: ['LED conversion & rebates', 'Emergency lighting systems', 'Occupancy sensors', 'Energy usage analysis'],
                icon: '💡',
                bgColor: 'bg-brand-lightOrange'
              },
              {
                title: 'Service Upgrades',
                items: ['Main service upgrades', 'Distribution panels', 'Load calculations', 'Power quality analysis'],
                icon: '⚡',
                bgColor: 'bg-brand-lightGreen'
              },
              {
                title: 'Maintenance Programs',
                items: ['Scheduled inspections', 'Thermal imaging', 'Emergency repair service', 'Compliance documentation'],
                icon: '🔄',
                bgColor: 'bg-brand-lightPurple'
              }
            ].map((service, i) => (
              <div key={i} className="card group hover:shadow-lg transition-all duration-200">
                <div className="flex items-start gap-4">
                  <div className={`w-12 h-12 ${service.bgColor} rounded-full flex items-center justify-center flex-shrink-0`}>
                    <span className="text-2xl">{service.icon}</span>
                  </div>
                  <div>
                    <h3 className="font-heading font-semibold text-lg mb-3 group-hover:text-brand-green transition-colors">
                      {service.title}
                    </h3>
                    <ul className="space-y-2 text-sm text-gray-600">
                      {service.items.map((item, j) => (
                        <li key={j} className="flex items-center gap-2">
                          <span className="w-1.5 h-1.5 bg-brand-green rounded-full"></span>
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* INDUSTRIES */}
      <section className="py-24 bg-brand-surface">
        <div className="container-custom">
          <h2 className="font-heading font-bold text-3xl text-center mb-12">Industries We Serve</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              { name: 'Office Buildings', icon: '🏢', desc: 'Modern office spaces with efficient lighting and power systems' },
              { name: 'Retail Stores', icon: '🛍️', desc: 'Point-of-sale systems, display lighting, and security' },
              { name: 'Restaurants', icon: '🍽️', desc: 'Commercial kitchens, dining areas, and outdoor spaces' },
              { name: 'Schools', icon: '🎓', desc: 'Educational facilities with safety and accessibility compliance' },
              { name: 'Medical Facilities', icon: '🏥', desc: 'Healthcare environments with critical power systems' },
              { name: 'Warehouses', icon: '🏭', desc: 'Industrial spaces with heavy equipment and automation' }
            ].map((industry, i) => (
              <div key={i} className="card text-center">
                <div className="text-4xl mb-4">{industry.icon}</div>
                <h3 className="font-heading font-semibold text-lg mb-2">{industry.name}</h3>
                <p className="text-gray-600 text-sm">{industry.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <FAQ items={commercialFaq} />

      {/* CTA */}
      <section className="py-24 bg-brand-dark text-white">
        <div className="container-custom">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="font-heading font-bold text-3xl mb-6">Ready to Power Your Business?</h2>
              <p className="text-xl text-gray-300 mb-8">
                Get a free consultation for your commercial electrical project. We provide detailed estimates and flexible scheduling.
              </p>
              <div className="space-y-3 text-sm text-gray-300 mb-8">
                <p className="flex items-center gap-2">
                  <span className="text-brand-green">✓</span>
                  Licensed commercial electrical contractor
                </p>
                <p className="flex items-center gap-2">
                  <span className="text-brand-green">✓</span>
                  After-hours and weekend service
                </p>
                <p className="flex items-center gap-2">
                  <span className="text-brand-green">✓</span>
                  Emergency repair response
                </p>
                <p className="flex items-center gap-2">
                  <span className="text-brand-green">✓</span>
                  Maintenance programs available
                </p>
              </div>
              <p className="text-xl font-semibold">Call: (361) 885-0315</p>
            </div>
            <div id="quote-form">
              <ContactForm variant="dark" />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}