export default function Territory() {
  return (
    <section className="territory-section" id="territory">
      <div className="section-eyebrow">Service territory</div>
      <h2 className="section-h2">Based in <span>KWC.</span><br />Delivering everywhere.</h2>
      <div className="territory-layout">
        <div className="territory-map-wrap">
          <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="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>
          <div className="footer-territory" style={{ marginBottom: '24px' }}>📍 Home base: Kitchener · Waterloo · Cambridge</div>
          <div className="city-list">
            {[
              { type: 'home', name: 'Kitchener · Waterloo · Cambridge', sub: 'Home base — priority service area', dist: '0km' },
              { type: 'near', name: 'Guelph', sub: 'High residential & commercial growth', dist: '~30km' },
              { type: 'near', name: 'Brantford', sub: 'Contractors, builders, industrial', dist: '~50km' },
              { type: 'near', name: 'Hamilton', sub: 'Industrial, commercial, property managers', dist: '~75km' },
              { type: 'home', name: 'Toronto / GTA', sub: 'Commercial builders, developers, high volume', dist: '~110km' },
              { type: 'home', name: 'London', sub: 'Large market, residential & commercial', dist: '~120km' },
              { type: 'far', name: 'Niagara · Barrie · Owen Sound', sub: 'Extended delivery available', dist: '~150–175km' },
            ].map((city, index) => (
              <div key={index} 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>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}