"use client";

import React from 'react';
import Link from 'next/link';

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

const ChainLinkTerritory = () => {
  return (
    <section className="territory" id="territory">
      <div className="reveal">
        <div className="section-eyebrow text-white-50">Where we deliver</div>
        <h2 className="sh sh-white">Chain link fence supply<br /><span>across Ontario.</span></h2>
        <p className="territory-intro">We deliver chain link fence materials to contractors and builders across a 250km radius from our Kitchener–Waterloo base. Below are the communities we serve — if you don't see your town, contact us.</p>
      </div>

      <div className="region-grid reveal">
        {regions.map((region, i) => (
          <div key={i} className="region-block">
            <div className="region-name">{region.name}</div>
            <ul className="region-cities">
              {region.cities.map((city, j) => (
                <li key={j} className={region.primary.includes(j) ? 'primary' : ''}>
                  {city.link ? (
                    <Link href={city.link}>{city.name}</Link>
                  ) : (
                    city.name
                  )}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
};

export default ChainLinkTerritory;