import site from '@/content/site.json';

export default function Footer() {
  const s = site.business;
  return (
    <footer className="bg-brand-dark text-white" role="contentinfo">
      <div className="container-custom py-16">
        <div className="grid md:grid-cols-4 gap-8">
                            {/* Company */}
                  <div>
                    <h3 className="font-heading font-semibold text-lg mb-4">Company</h3>
                    <ul className="space-y-2 text-sm">
                      <li><a href="/about" className="hover:text-brand-green transition-colors">About</a></li>
                      <li><a href="/reviews" className="hover:text-brand-green transition-colors">Reviews</a></li>
                      <li><a href="/contact" className="hover:text-brand-green transition-colors">Contact</a></li>
                    </ul>
                  </div>

          {/* Our Services */}
          <div>
            <h3 className="font-heading font-semibold text-lg mb-4">Our Services</h3>
            <ul className="space-y-2 text-sm">
              <li><a href="/corpus-christi/emergency-electrician" className="hover:text-brand-green transition-colors">Emergency Repair</a></li>
              <li><a href="/corpus-christi/panel-upgrades" className="hover:text-brand-green transition-colors">Panel Upgrades</a></li>
              <li><a href="/corpus-christi/ev-charger-install" className="hover:text-brand-green transition-colors">EV Charging</a></li>
              <li><a href="/residential" className="hover:text-brand-green transition-colors">Residential</a></li>
              <li><a href="/commercial" className="hover:text-brand-green transition-colors">Commercial</a></li>
              <li><a href="/corpus-christi/lighting-retrofits" className="hover:text-brand-green transition-colors">Lighting & Fixtures</a></li>
            </ul>
          </div>

          {/* Service Areas */}
          <div>
            <h3 className="font-heading font-semibold text-lg mb-4">Service Areas</h3>
            <ul className="space-y-2 text-sm">
              <li>Corpus Christi</li>
              <li>Flour Bluff</li>
              <li>Portland</li>
              <li>Aransas Pass</li>
              <li>Rockport</li>
              <li>Calallen</li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h3 className="font-heading font-semibold text-lg mb-4">Contact</h3>
            <div className="space-y-2 text-sm">
              <p>{s.address}</p>
              <p><a href={`tel:${s.phoneRaw}`} className="hover:text-brand-green transition-colors">{s.phone}</a></p>
              <p><a href={`mailto:${s.email}`} className="hover:text-brand-green transition-colors">{s.email}</a></p>
              <p>Mon-Fri 7AM-5PM<br/>24/7 Emergency</p>
            </div>
          </div>
        </div>

        {/* Bottom line */}
        <div className="border-t border-gray-700 mt-12 pt-8 text-center text-sm text-gray-400">
          © 2024 C & I Electrical Contractors · Licensed & Insured · TX License TECL ####
        </div>
      </div>
    </footer>
  );
}