"use client";

import Link from 'next/link';

export default function StainingTerritory() {
  const regions = [
    {
      name: "Waterloo Region",
      cities: [
        { name: "Kitchener", primary: true, href: "https://vgfence.com/fence-staining-kitchener" },
        { name: "Waterloo", primary: true, href: "https://vgfence.com/fence-staining-waterloo" },
        { name: "Cambridge", primary: true, href: "https://vgfence.com/fence-staining-cambridge" },
        { name: "Ayr", href: "https://vgfence.com/fence-staining-ayr" },
        { name: "Breslau", href: "https://vgfence.com/fence-staining-breslau" },
        { name: "Elmira", href: "https://vgfence.com/fence-staining-elmira" },
        { name: "St. Jacobs", href: "https://vgfence.com/fence-staining-st-jacobs" },
        { name: "New Hamburg", href: "https://vgfence.com/fence-staining-new-hamburg" },
        { name: "Baden", href: "https://vgfence.com/fence-staining-baden" },
        { name: "Wellesley", href: "https://vgfence.com/fence-staining-wellesley" },
      ]
    },
    {
      name: "Guelph & Wellington",
      cities: [
        { name: "Guelph", primary: true, href: "https://vgfence.com/fence-staining-guelph" },
        { name: "Fergus", href: "https://vgfence.com/fence-staining-fergus" },
        { name: "Elora", href: "https://vgfence.com/fence-staining-elora" },
        { name: "Rockwood", href: "https://vgfence.com/fence-staining-rockwood" },
        { name: "Acton", href: "https://vgfence.com/fence-staining-acton" },
        { name: "Georgetown", href: "https://vgfence.com/fence-staining-georgetown" },
      ]
    },
    {
      name: "Halton & Hamilton",
      cities: [
        { name: "Hamilton", primary: true, href: "https://vgfence.com/fence-staining-hamilton" },
        { name: "Burlington", primary: true, href: "https://vgfence.com/fence-staining-burlington" },
        { name: "Milton", href: "https://vgfence.com/fence-staining-milton" },
        { name: "Oakville", href: "https://vgfence.com/fence-staining-oakville" },
        { name: "Stoney Creek", href: "https://vgfence.com/fence-staining-stoney-creek" },
        { name: "Grimsby", href: "https://vgfence.com/fence-staining-grimsby" },
        { name: "Brantford", href: "https://vgfence.com/fence-staining-brantford" },
        { name: "Paris", href: "https://vgfence.com/fence-staining-paris" },
      ]
    },
    {
      name: "GTA & Peel",
      cities: [
        { name: "Mississauga", primary: true, href: "https://vgfence.com/fence-staining-mississauga" },
        { name: "Brampton", primary: true, href: "https://vgfence.com/fence-staining-brampton" },
        { name: "Vaughan", href: "https://vgfence.com/fence-staining-vaughan" },
        { name: "Markham", href: "https://vgfence.com/fence-staining-markham" },
        { name: "Richmond Hill", href: "https://vgfence.com/fence-staining-richmond-hill" },
      ]
    },
    {
      name: "Oxford & Perth",
      cities: [
        { name: "Woodstock", primary: true, href: "https://vgfence.com/fence-staining-woodstock" },
        { name: "Stratford", primary: true, href: "https://vgfence.com/fence-staining-stratford" },
        { name: "Ingersoll" },
        { name: "Tillsonburg" },
        { name: "St. Marys" },
      ]
    },
    {
      name: "London & Elgin",
      cities: [
        { name: "London", primary: true, href: "https://vgfence.com/fence-staining-london-ontario" },
        { name: "St. Thomas" },
        { name: "Strathroy" },
        { name: "Komoka" },
      ]
    },
    {
      name: "Southwest Ontario",
      cities: [
        { name: "Windsor", primary: true },
        { name: "Chatham", primary: true },
        { name: "Leamington" },
        { name: "Sarnia" },
        { name: "Petrolia" },
      ]
    },
    {
      name: "Extended Service",
      cities: [
        { name: "Niagara Falls", primary: true },
        { name: "St. Catharines",},
        { name: "Welland" },
        { name: "Barrie", primary: true  },
        { name: "Owen Sound" },
        { name: "Collingwood" },
      ]
    },
  ];

  return (
    <section className="territory-service" id="territory">
      <div className="reveal">
        <div className="section-eyebrow text-white-50">Where we serve</div>
        <h2 className="sh sh-white">Wood staining services<br /><span>across Ontario.</span></h2>
        <p className="territory-intro">Staining services are based in KWC with coverage across Waterloo Region and surrounding communities. Expert Stain & Seal product supply covers 250km across Ontario.</p>
      </div>
      <div className="region-grid reveal">
        {regions.map((region, index) => (
          <div key={index} className="region-block">
            <div className="region-name">{region.name}</div>
            <ul className="region-cities">
              {region.cities.map((city, cIdx) => (
                <li key={cIdx} className={city.primary ? 'primary' : ''}>
                  {city.href ? (
                    <Link href={city.href} title={city.name}>{city.name}</Link>
                  ) : (
                    city.name
                  )}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}