import React, { useEffect } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import SEO from '../../components/SEO';
import CTA from '../../components/CTA';
import { locationData } from '../data/seoData';

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

const LocationsPage: React.FC = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <>
      <SEO
        title="IT Support Service Areas - Corpus Christi & Coastal Bend, TX"
        description="Bay Area IT provides IT support and IT services throughout the Coastal Bend. View all cities we serve in the Corpus Christi area."
        keywords={['IT support Corpus Christi', 'IT services Coastal Bend', 'local IT support Texas']}
        canonicalUrl="https://bayareait.services/locations"
      />

      <div className="min-h-screen bg-background-light dark:bg-background-dark pt-20">
        <section className="py-20 px-6 border-b border-gray-200 dark:border-white/10">
          <div className="max-w-4xl mx-auto text-center">
            <span className="text-xs font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-500 mb-3 block">
              Service Areas
            </span>
            <h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white tracking-tight">
              IT Support Across the{' '}
              <span className="text-gray-400 dark:text-gray-500">Coastal Bend</span>
            </h1>
            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed">
              We provide professional IT support and managed IT services for businesses
              throughout Corpus Christi and the surrounding area. Remote-first, on-site
              when needed.
            </p>
          </div>
        </section>

        <section className="py-20 px-6">
          <div className="max-w-5xl mx-auto">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {cityLocations.map((loc, i) => (
                <motion.div
                  key={loc.slug}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.4, delay: i * 0.07 }}
                >
                  <Link
                    to={`/${loc.slug}`}
                    className="group block p-8 bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl hover:border-gray-400 dark:hover:border-white/30 hover:shadow-xl transition-all duration-300"
                  >
                    <div className="flex items-center justify-between mb-4">
                      <span className="material-symbols-outlined text-3xl text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                        location_on
                      </span>
                      <span className="material-symbols-outlined text-sm text-gray-400 dark:text-gray-600 group-hover:text-gray-700 dark:group-hover:text-white group-hover:translate-x-1 transition-all duration-200">
                        arrow_forward
                      </span>
                    </div>
                    <h2 className="font-display text-xl font-bold text-gray-900 dark:text-white mb-2">
                      {loc.city}
                    </h2>
                    <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
                      {loc.description}
                    </p>
                  </Link>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        <section className="py-16 px-6 bg-gray-50 dark:bg-white/5 border-t border-gray-200 dark:border-white/10">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="font-display text-2xl md:text-3xl font-bold mb-4 text-gray-900 dark:text-white">
              Based in Corpus Christi. Serving the Region.
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-8 leading-relaxed">
              Our team is locally based with over 30 years supporting Coastal Bend businesses.
              Most issues are resolved remotely for speed. On-site support is available across
              all cities we serve.
            </p>
            <p className="text-gray-500 dark:text-gray-400">
              Not seeing your city?{' '}
              <Link to="/contact" className="text-gray-900 dark:text-white font-medium underline hover:no-underline transition-all">
                Contact us
              </Link>{' '}
              and we may still be able to help.
            </p>
          </div>
        </section>

        <CTA />
      </div>
    </>
  );
};

export default LocationsPage;
