import Link from 'next/link';

export default function Territory() {
  const cities = [
    { type: 'home', name: 'Kitchener · Waterloo · Cambridge', sub: 'Home base — priority service area', dist: '0km', link: null },
    { type: 'near', name: 'Guelph', sub: 'High residential & commercial growth', dist: '~30km', link: "https://vgfence.com/fence-supply-guelph" },
    { type: 'near', name: 'Brantford', sub: 'Contractors, builders, industrial', dist: '~50km', link: "https://vgfence.com/fence-supply-brantford" },
    { type: 'near', name: 'Hamilton', sub: 'Industrial, commercial, property managers', dist: '~75km', link: "https://vgfence.com/fence-supply-hamilton" },
    { type: 'home', name: 'Toronto / GTA', sub: 'Commercial builders, developers, high volume', dist: '~110km', link: "https://vgfence.com/fence-supply-toronto" },
    { type: 'home', name: 'London', sub: 'Large market, residential & commercial', dist: '~120km', link: "https://vgfence.com/fence-supply-london-ontario" },
    { type: 'far', name: 'Windsor', sub: 'Southwest Ontario hub', dist: '~230km', link: "https://vgfence.com/fence-supply-windsor" },
    { type: 'far', name: 'Barrie', sub: 'Extended service area', dist: '~160km', link: "https://vgfence.com/fence-supply-barrie" },
    { type: 'far', name: 'Niagara · Owen Sound', sub: 'Delivery available', dist: '~150–175km', link: null },
  ];

  return (
    <section className="territory-section" id="territory">
      <div className="reveal">
        <div className="section-eyebrow">Service territory</div>
        <h2 className="sh">Based in <span>KWC.</span><br />Delivering everywhere.</h2>
      </div>

      <div className="territory-layout">
        <div className="map-card reveal">
          <div className="radius-label">250km radius</div>
          <svg viewBox="0 0 500 360" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%' }}>
            <rect width="500" height="360" fill="#EEF3F8" rx="8" />
            <circle cx="250" cy="190" r="165" fill="none" stroke="#1B3A6B" strokeWidth="1.5" strokeDasharray="8 5" opacity=".25" />
            <circle cx="250" cy="190" r="110" fill="none" stroke="#1B3A6B" strokeWidth="1" strokeDasharray="4 4" opacity=".15" />
            <circle cx="250" cy="190" r="55" fill="#1B3A6B" opacity=".06" />
            <circle cx="250" cy="190" r="10" fill="#E8572A" />
            <circle cx="250" cy="190" r="5" fill="white" />
            <circle cx="250" cy="190" r="22" fill="none" stroke="#E8572A" strokeWidth="1.5" opacity=".4" />
            <text x="250" y="218" textAnchor="middle" fontSize="11" fontWeight="700" fill="#0F2444" fontFamily="'Barlow Condensed',sans-serif" letterSpacing="1">KWC</text>
            
            <circle cx="320" cy="148" r="5" fill="#1B3A6B" opacity=".75" />
            <text x="330" y="144" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Guelph</text>
            <text x="330" y="155" fontSize="9" fill="#888" fontFamily="sans-serif">~30km</text>

            <circle cx="350" cy="185" r="5" fill="#1B3A6B" opacity=".75" />
            <text x="360" y="181" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Hamilton</text>
            <text x="360" y="192" fontSize="9" fill="#888" fontFamily="sans-serif">~75km</text>

            <circle cx="390" cy="158" r="7" fill="#E8572A" opacity=".85" />
            <text x="400" y="154" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Toronto / GTA</text>
            <text x="400" y="165" fontSize="9" fill="#888" fontFamily="sans-serif">~110km</text>

            <circle cx="320" cy="230" r="5" fill="#1B3A6B" opacity=".75" />
            <text x="330" y="227" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Brantford</text>
            <text x="330" y="238" fontSize="9" fill="#888" fontFamily="sans-serif">~50km</text>

            <circle cx="185" cy="228" r="5" fill="#1B3A6B" opacity=".75" />
            <text x="100" y="225" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Stratford</text>
            <text x="100" y="236" fontSize="9" fill="#888" fontFamily="sans-serif">~45km</text>

            <circle cx="142" cy="190" r="7" fill="#E8572A" opacity=".85" />
            <text x="55" y="186" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">London</text>
            <text x="55" y="197" fontSize="9" fill="#888" fontFamily="sans-serif">~120km</text>

            <circle cx="195" cy="142" r="5" fill="#1B3A6B" opacity=".6" />
            <text x="115" y="138" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Owen Sound</text>
            <text x="115" y="149" fontSize="9" fill="#888" fontFamily="sans-serif">~175km</text>

            <circle cx="248" cy="105" r="5" fill="#1B3A6B" opacity=".6" />
            <text x="257" y="100" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Barrie</text>
            <text x="257" y="111" fontSize="9" fill="#888" fontFamily="sans-serif">~160km</text>

            <circle cx="375" cy="235" r="5" fill="#1B3A6B" opacity=".6" />
            <text x="385" y="232" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Niagara</text>
            <text x="385" y="243" fontSize="9" fill="#888" fontFamily="sans-serif">~150km</text>

            <circle cx="88" cy="190" r="6" fill="#E8572A" opacity=".8" />
            <text x="22" y="186" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Windsor</text>
            <text x="22" y="197" fontSize="9" fill="#888" fontFamily="sans-serif">~230km</text>

            <circle cx="30" cy="330" r="5" fill="#E8572A" />
            <text x="40" y="334" fontSize="9" fill="#666" fontFamily="sans-serif">Major hub</text>
            <circle cx="105" cy="330" r="4" fill="#1B3A6B" opacity=".7" />
            <text x="115" y="334" fontSize="9" fill="#666" fontFamily="sans-serif">Regional city</text>
            <line x1="195" y1="330" x2="220" y2="330" stroke="#1B3A6B" strokeWidth="1.5" strokeDasharray="6 4" opacity=".35" />
            <text x="226" y="334" fontSize="9" fill="#666" fontFamily="sans-serif">250km radius</text>
          </svg>
        </div>

        <div className="city-list reveal">
          <div className="home-base-pill">📍 Home base: Kitchener · Waterloo · Cambridge</div>
          {cities.map((city, index) => (
            city.link ? (
              <Link key={index} href={city.link}>
                <div className="city-item">
                  <div className={`city-dot ${city.type}`}></div>
                  <div className="city-info">
                    <div className="city-name-txt">{city.name}</div>
                    <div className="city-sub-txt">{city.sub}</div>
                  </div>
                  <div className="city-dist-badge">{city.dist}</div>
                </div>
              </Link>
            ) : (
              <div key={index} className="city-item no-link">
                <div className={`city-dot ${city.type}`}></div>
                <div className="city-info">
                  <div className="city-name-txt">{city.name}</div>
                  <div className="city-sub-txt">{city.sub}</div>
                </div>
                <div className="city-dist-badge">{city.dist}</div>
              </div>
            )
          ))}
        </div>
      </div>
    </section>
  );
}