import type { Metadata } from 'next';
import CTASection from '@/components/CTASection';
import site from '@/content/site.json';

export const metadata: Metadata = {
  title: 'About C & I Electrical Contractors | Corpus Christi Electrician',
  description: 'Learn about C & I Electrical Contractors, serving Corpus Christi since 2005. Licensed, insured, and committed to safety and quality electrical work.',
  openGraph: {
    title: 'About C & I Electrical Contractors | Corpus Christi Electrician',
    description: 'Learn about C & I Electrical Contractors, serving Corpus Christi since 2005. Licensed, insured, and committed to safety and quality electrical work.',
    images: ['/og/about-electrician-1200x630.jpg']
  }
};

export default function About() {
  return (
    <>
      {/* HERO */}
      <section className="bg-gradient-to-br from-brand-dark to-slate-800 text-white">
        <div className="container-custom py-24">
          <div className="inline-flex items-center gap-2 bg-brand-danger px-4 py-2 rounded-full text-sm font-semibold mb-6 text-black">
            <span>⚡</span>
            24/7 Emergency Electrician • Average response under 60 minutes in Corpus Christi
          </div>
          <h1 className="font-heading font-bold text-4xl md:text-5xl mb-6 leading-tight">
            About C & I Electrical Contractors
          </h1>
          <p className="text-xl text-gray-300 mb-12 max-w-prose">
            Serving Corpus Christi with reliable electrical solutions since 2005. Licensed, insured, and committed to safety and quality.
          </p>
          
          {/* Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <Stat n="19+" label="Years in Business" />
            <Stat n="1000+" label="Projects Completed" />
            <Stat n="100%" label="Licensed & Insured" />
            <Stat n="24/7" label="Emergency Service" />
          </div>
        </div>
      </section>

      {/* STORY */}
      <section className="py-24 bg-white">
        <div className="container-custom">
          <div className="grid md:grid-cols-3 gap-12">
            <div className="md:col-span-2 space-y-6">
              <h2 className="font-heading font-bold text-3xl">Our Story</h2>
              <div className="space-y-4 text-gray-700 font-body">
                <p>
                  C & I Electrical Contractors was founded by Henry Del Llano in 2005 with a simple mission: provide reliable, high-quality electrical services to the Corpus Christi community.
                </p>
                <p>
                  What started as a small residential service has grown into a trusted contractor serving both residential and commercial clients throughout the greater Corpus Christi area.
                </p>
                <p>
                  Today, we continue to uphold the same values that made us successful: safety first, quality work, reliable service, and a commitment to our community.
                </p>
              </div>
            </div>
            <div className="card">
              <h3 className="font-heading font-semibold text-lg mb-3">Licensed & Insured</h3>
              <p className="text-gray-600 text-sm">
                Fully licensed electrical contractor in Texas with general liability and workers comp.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* VALUES */}
      <section className="py-24 bg-brand-surface">
        <div className="container-custom">
          <h2 className="font-heading font-bold text-3xl text-center mb-12">Our Values</h2>
          <div className="grid md:grid-cols-4 gap-8">
            {[
              {
                title: 'Safety First',
                desc: 'Every job starts with a safety assessment.',
                icon: '🛡️'
              },
              {
                title: 'Quality Work',
                desc: 'Code-compliant electrical work done right the first time.',
                icon: '✅'
              },
              {
                title: 'Reliable Service',
                desc: 'On time, clearly explained options, no surprises.',
                icon: '⏰'
              },
              {
                title: 'Community Focused',
                desc: 'Proud to serve Corpus Christi.',
                icon: '🏠'
              }
            ].map((value, i) => (
              <div key={i} className="card text-center">
                <div className="text-4xl mb-4">{value.icon}</div>
                <h3 className="font-heading font-semibold text-lg mb-2">{value.title}</h3>
                <p className="text-gray-600 text-sm">{value.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24 bg-brand-dark text-white">
        <div className="container-custom text-center">
          <h2 className="font-heading font-bold text-3xl mb-6">Ready to Work With Us?</h2>
          <p className="text-xl text-gray-300 mb-8 max-w-prose mx-auto">
            Experience the difference of safety, quality, and customer satisfaction.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="tel:+13618850315" className="btn-primary">
              Call Now
            </a>
            <a href="/contact" className="btn-secondary">
              Get Free Quote
            </a>
          </div>
        </div>
      </section>
    </>
  );
}

function Stat({ n, label }: { n: string; label: string }) {
  return (
    <div className="card bg-white/10 border-white/20 text-center">
      <div className="text-3xl font-bold text-black mb-2">{n}</div>
      <div className="text-sm text-black">{label}</div>
    </div>
  );
}