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: 'EV Charger Installation Corpus Christi | Tesla, Ford, GM Compatible',
  description: 'Professional EV charging station installation. Level 2 NEMA 14-50, Tesla Wall Connector, universal chargers. Licensed, permitted, inspected.',
  openGraph: {
    title: 'EV Charger Installation Corpus Christi | Tesla, Ford, GM Compatible',
    description: 'Professional EV charging station installation. Level 2 NEMA 14-50, Tesla Wall Connector, universal chargers.',
    images: ['/og/ev-charger-install-1200x630.jpg']
  }
};

const evFaq: QA[] = [
  {
    q: 'What type of EV charger should I install?',
    a: 'Level 2 (240V) chargers are most common for homes. We recommend NEMA 14-50 outlets for flexibility or hardwired units for dedicated vehicles.'
  },
  {
    q: 'Do I need permits for EV charger installation?',
    a: 'Yes, EV charger installations require electrical permits in Corpus Christi. We handle all permits and coordinate inspections.'
  },
  {
    q: 'Can my electrical panel handle an EV charger?',
    a: 'We perform a load calculation to ensure your panel can support the additional 40-50 amp circuit required for Level 2 charging.'
  },
  {
    q: 'How long does installation take?',
    a: 'Most residential EV charger installations take 4-6 hours, depending on distance from panel and installation complexity.'
  }
];

export default function EVChargerInstallPage() {
  const serviceSchema = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: 'EV Charger Installation',
    description: 'Professional electric vehicle charging station installation in Corpus Christi, TX',
    provider: {
      '@type': 'LocalBusiness',
      name: 'C & I Electrical Contractors',
      telephone: '+1-361-885-0315'
    },
    serviceType: 'Electric Vehicle Charger Installation',
    areaServed: ['Corpus Christi', 'Flour Bluff', 'Portland', 'Aransas Pass', 'Rockport']
  };

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: evFaq.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">EV Charger Installation in Corpus Christi</h1>
            <p className="mt-4 text-lg">Drive electric with confidence. Professional <b>Level 2 charging station installation</b> for Tesla, Ford, GM, and all EV brands.</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"
              >
                Get EV Install Quote
              </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"
              >
                Free Consultation
              </a>
            </div>
            <div className="mt-4 text-white/90">
              <p>✓ Tesla & universal compatibility</p>
              <p>✓ Load calculations included</p>
              <p>✓ Permits & inspection handled</p>
              <p>✓ Indoor & outdoor installations</p>
            </div>
          </div>
          <div>
            <Image 
              src="/images/ev_ready.png" 
              alt="Tesla Wall Connector installation in Corpus Christi garage"
              width={600}
              height={400}
              sizes="(max-width: 768px) 100vw, 50vw"
              className="rounded-lg"
            />
          </div>
        </div>
      </section>

      {/* CHARGER OPTIONS */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-container px-4">
          <h2 className="text-2xl font-semibold mb-8">EV Charging Solutions</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                title: 'NEMA 14-50 Outlet',
                price: 'Starting at $650',
                features: ['Most flexible option', 'Works with any portable charger', '40-50 amp circuit', 'Indoor/outdoor rated'],
                bestFor: 'Multiple EV brands'
              },
              {
                title: 'Tesla Wall Connector',
                price: 'Starting at $850',
                features: ['Hardwired installation', 'Up to 48 amp charging', 'Built-in cable management', 'Wi-Fi connectivity'],
                bestFor: 'Tesla owners',
                popular: true
              },
              {
                title: 'Universal Level 2 Charger',
                price: 'Starting at $950',
                features: ['Works with all EVs', 'Smart charging features', 'App connectivity', 'Built-in cable'],
                bestFor: 'Future-proofing'
              }
            ].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-2">{option.price}</p>
                <p className="text-sm text-gray-600 mb-4">Best for: {option.bestFor}</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>

      {/* INSTALLATION 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">Professional Installation Process</h2>
          <div className="grid md:grid-cols-5 gap-6">
            {[
              { step: '1', title: 'Site Survey', desc: 'Evaluate installation location and electrical capacity' },
              { step: '2', title: 'Load Calc', desc: 'Calculate electrical load to ensure safe installation' },
              { step: '3', title: 'Permits', desc: 'Pull required electrical permits from the city' },
              { step: '4', title: 'Install', desc: 'Professional installation with quality materials' },
              { step: '5', title: 'Inspect', desc: 'Final inspection and testing for safe operation' }
            ].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 className="mt-12 bg-white rounded-lg p-8 text-center">
            <h3 className="text-xl font-semibold mb-4">Why Choose Professional Installation?</h3>
            <div className="grid md:grid-cols-3 gap-6 text-sm">
              <div>
                <h4 className="font-semibold mb-2">Safety First</h4>
                <p className="text-gray-600">Proper grounding, GFCI protection, and code compliance for safe charging</p>
              </div>
              <div>
                <h4 className="font-semibold mb-2">Warranty Protection</h4>
                <p className="text-gray-600">Professional installation protects manufacturer warranties</p>
              </div>
              <div>
                <h4 className="font-semibold mb-2">Optimal Performance</h4>
                <p className="text-gray-600">Proper installation ensures maximum charging speed and efficiency</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* EV COMPATIBILITY */}
      <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">We Install Chargers for All EV Brands</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 text-center">
            {[
              'Tesla Model S/3/X/Y',
              'Ford Mustang Mach-E',
              'Ford Lightning F-150',
              'Chevy Bolt/Volt',
              'BMW i3/i4/iX',
              'Audi e-tron',
              'Mercedes EQS/EQC',
              'Nissan Leaf',
              'Hyundai Ioniq',
              'Kia EV6',
              'Rivian R1T/R1S',
              'VW ID.4'
            ].map((brand, i) => (
              <div key={i} className="p-4 bg-gray-50 rounded-lg">
                <p className="text-sm font-medium">{brand}</p>
              </div>
            ))}
          </div>
          
          <div className="mt-8 text-center">
            <p className="text-gray-600">Don't see your EV? We install chargers for all electric vehicles with standard J1772 or Tesla connectors.</p>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 bg-brand-grayBg">
        <div className="mx-auto max-w-container px-4">
          <FAQ items={evFaq} />
        </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 Charge at Home?</h2>
            <p className="mt-2 text-gray-700">
              Get a free consultation and quote for your EV charging station installation. We handle everything from permits to inspection.
            </p>
            <div className="mt-4 space-y-2">
              <p className="text-sm text-gray-600">✓ Free site evaluation</p>
              <p className="text-sm text-gray-600">✓ All permits included</p>
              <p className="text-sm text-gray-600">✓ Professional installation</p>
              <p className="text-sm text-gray-600">✓ 1-year warranty</p>
            </div>
            <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) }} 
      />
    </>
  );
}