import type { Metadata } from 'next';
import ReviewsGrid from '@/components/ReviewsGrid';

export const metadata: Metadata = {
  title: 'Customer Reviews | C & I Electrical Contractors Corpus Christi',
  description: 'Read reviews from 200+ satisfied customers in Corpus Christi. 4.9/5 rating. Licensed electricians with 19+ years of experience.',
  openGraph: {
    title: 'Customer Reviews | C & I Electrical Contractors Corpus Christi',
    description: 'Read reviews from 200+ satisfied customers in Corpus Christi. 4.9/5 rating.',
    images: ['/og/reviews-electrician-1200x630.jpg']
  }
};

export default function Reviews() {
  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">
            Customer Reviews
          </h1>
          <p className="text-xl text-gray-300 mb-12 max-w-prose">
            from 200+ Corpus Christi reviews — 4.9/5
          </p>
        </div>
      </section>

      {/* REVIEWS GRID */}
      <section className="py-24 bg-white">
        <div className="container-custom">
          <ReviewsGrid />
        </div>
      </section>
    </>
  );
}