import React from 'react';
import { Link } from 'react-router-dom';
import { locationData } from '../src/data/seoData';

const cityLocations = locationData.filter(loc =>
    loc.slug.startsWith('locations/it-support-')
);

const AreasWeServe: React.FC = () => {
    return (
        <section className="py-24 px-6 bg-gray-50 dark:bg-white/5 mx-auto text-center border-t border-gray-200 dark:border-white/10">
            <div className="max-w-4xl mx-auto">
                <h2 className="font-display text-3xl md:text-4xl font-bold mb-6 text-gray-900 dark:text-white">
                    Areas We Serve – Local IT Support Across the Coastal Bend
                </h2>
                <p className="text-xl text-gray-600 dark:text-gray-300 mb-12 leading-relaxed">
                    We provide professional IT support and IT services for businesses throughout Corpus Christi and the surrounding Coastal Bend area.
                    Our team supports local companies with outsourced IT services and help desk solutions, delivered remotely or on-site when needed.
                </p>

                <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-12">
                    {cityLocations.map((loc) => (
                        <Link
                            key={loc.slug}
                            to={`/${loc.slug}`}
                            className="p-4 bg-white dark:bg-white/10 rounded-lg shadow-sm hover:shadow-md transition-all text-gray-800 dark:text-gray-200 font-medium hover:text-black dark:hover:text-white"
                        >
                            {loc.city}
                        </Link>
                    ))}
                </div>

                <p className="text-lg text-gray-600 dark:text-gray-400">
                    Not sure if your location is covered? <Link to="/contact" className="underline hover:text-black dark:hover:text-white transition-colors">Contact us today</Link> to discuss your IT needs.
                </p>
                <div className="mt-6">
                    <Link to="/locations" className="text-sm text-gray-500 hover:text-gray-800 dark:hover:text-gray-300 transition-colors">
                        View all service areas →
                    </Link>
                </div>
            </div>
        </section>
    );
};

export default AreasWeServe;