ci-electrical/web/app/contact/page.tsx

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

export const metadata: Metadata = {
  title: 'Contact | Free Quote for Electrical Services in Corpus Christi',
  description: 'Get your free electrical service quote. Licensed electricians in Corpus Christi. Call (361) 885-0315 or request online quote.',
  openGraph: {
    title: 'Contact | Free Quote for Electrical Services in Corpus Christi',
    description: 'Get your free electrical service quote. Licensed electricians in Corpus Christi.',
    images: ['/og/contact-1200x630.jpg']
  }
};

export default function Contact() {
  return (
    <>
      {/* HERO */}
      <section className="bg-gradient-to-br from-brand-dark to-slate-800 text-white">
        <div className="container-custom py-24 text-center">
          <h1 className="font-heading font-bold text-4xl md:text-5xl mb-6 leading-tight">
            Get Your Free Electrical Quote
          </h1>
          <p className="text-xl text-gray-300 mb-8 max-w-prose mx-auto">
            Call now for 24/7 emergency service or fill out the form below for a detailed project quote.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a 
              href={`tel:${site.business.phoneRaw}`}
              className="btn-primary"
            >
              Call Now — 24/7 Emergency
            </a>
            <a 
              href="#form"
              className="btn-secondary"
            >
              Request Free Quote
            </a>
          </div>
        </div>
      </section>

      {/* CONTACT FORM & INFO */}
      <section className="py-24 bg-white" id="form">
        <div className="container-custom">
          <div className="grid md:grid-cols-3 gap-12">
            <div className="md:col-span-2">
              <h2 className="font-heading font-bold text-3xl mb-6">Request Your Free Quote</h2>
              <p className="text-gray-700 mb-8 font-body">
                Fill out the form below and we'll call you within <strong>15-30 minutes</strong> during business hours with your free estimate.
              </p>
              <ContactForm />
            </div>

            <aside aria-label="Contact information" className="space-y-6">
              <div className="card bg-brand-danger text-white">
                <h3 className="font-heading font-semibold text-lg mb-3">Emergency Service</h3>
                <p className="mb-4 text-gray-200">Electrical emergency? Don't wait — call now!</p>
                <a 
                  href={`tel:${site.business.phoneRaw}`}
                  className="inline-flex min-h-[48px] items-center justify-center rounded-card bg-white text-brand-danger px-6 py-3 font-semibold w-full hover:bg-gray-100 transition-colors"
                >
                  Call Emergency Line
                </a>
              </div>

              <div className="card">
                <h3 className="font-heading font-semibold text-lg mb-3">Contact Details</h3>
                <div className="space-y-2 text-sm text-gray-600">
                  <p><strong>Phone:</strong> {site.business.phone}</p>
                  <p><strong>Email:</strong> {site.business.email}</p>
                  <p><strong>Address:</strong> {site.business.address}</p>
                  <p><strong>Hours:</strong> Mon-Fri 7AM–5PM</p>
                  <p><strong>Emergency:</strong> Available 24/7</p>
                </div>
              </div>

              <div className="card">
                <h3 className="font-heading font-semibold text-lg mb-3">Service Areas</h3>
                <ul className="text-sm space-y-1 text-gray-600">
                  <li>• Corpus Christi</li>
                  <li>• Flour Bluff</li>
                  <li>• Portland, TX</li>
                  <li>• Aransas Pass</li>
                  <li>• Rockport</li>
                  <li>• Robstown</li>
                </ul>
              </div>

              <div className="card bg-brand-lightGreen border-brand-green">
                <h3 className="font-heading font-semibold text-lg mb-3">Why Choose Us?</h3>
                <ul className="text-sm space-y-2 text-gray-700">
                  <li>✓ Licensed & insured TECL ####</li>
                  <li>✓ 19+ years in business</li>
                  <li>✓ A+ BBB rating</li>
                  <li>✓ Free estimates</li>
                  <li>✓ 1-year warranty on labor</li>
                  <li>✓ Same-day service available</li>
                </ul>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* BUSINESS INFO */}
      <section className="py-24 bg-brand-surface">
        <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">Licensed & Insured Electricians</h2>
              <p className="text-gray-700 mb-6 font-body">
                C & I Electrical Contractors has been serving the Corpus Christi area since 2005. We're fully licensed, 
                insured, and committed to providing safe, code-compliant electrical work.
              </p>
              <div className="space-y-2 text-sm text-gray-600">
                <p><strong>License:</strong> Texas Electrical Contractor TECL ####</p>
                <p><strong>Insurance:</strong> General liability & workers' compensation</p>
                <p><strong>Bonded:</strong> Yes, for your protection</p>
                <p><strong>Warranties:</strong> 1-year labor, manufacturer parts warranty</p>
              </div>
            </div>
            <div className="card">
              <h3 className="font-heading font-semibold text-lg mb-4">Find Us</h3>
              <address className="text-gray-700 not-italic mb-4">
                <strong>C & I Electrical Contractors</strong><br/>
                2801 S Port Ave<br/>
                Corpus Christi, TX 78405
              </address>
              <div className="text-sm text-gray-600">
                <p>Centrally located to serve all of Corpus Christi and surrounding areas including 
                Flour Bluff, Portland, Aransas Pass, and Rockport.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}