// UK map — interactive regions. Hover/tap a region to see stats.
// Simplified silhouette of UK + Ireland (Channel Islands & IoM as chips).

const mapStyles = {
  wrap:{padding:"120px 40px", background:"var(--ink)", color:"#fff", position:"relative", overflow:"hidden"},
  inner:{maxWidth:1360, margin:"0 auto", display:"grid", gridTemplateColumns:"1fr 1fr", gap:80, alignItems:"center"},
  kicker:{fontFamily:'"JetBrains Mono",monospace', fontSize:12, letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--teal)", marginBottom:20},
  h2:{fontSize:"clamp(40px, 5vw, 72px)", lineHeight:1.0, letterSpacing:"-0.03em", fontWeight:700, margin:"0 0 32px"},
  p:{fontSize:16, lineHeight:1.55, color:"rgba(255,255,255,0.7)", maxWidth:460, margin:"0 0 32px"},
  regionList:{display:"grid", gridTemplateColumns:"1fr 1fr", gap:0, border:"1px solid rgba(255,255,255,0.12)", borderRadius:16, overflow:"hidden"},
  regionRow:active => ({
    padding:"18px 20px", display:"flex", justifyContent:"space-between", alignItems:"center",
    background: active?"rgba(156,116,235,0.12)":"transparent",
    borderRight:"1px solid rgba(255,255,255,0.08)",
    borderBottom:"1px solid rgba(255,255,255,0.08)",
    fontSize:14, cursor:"pointer", transition:"background .15s"
  }),
  regionName:{fontWeight:500},
  regionCount:{fontFamily:'"JetBrains Mono",monospace', fontSize:12, color:"var(--teal)"},
  svgWrap:{position:"relative"},
  tooltip:{position:"absolute", pointerEvents:"none", padding:"10px 14px", background:"#fff", color:"var(--ink)", borderRadius:8, fontSize:12, fontWeight:600, boxShadow:"0 8px 30px rgba(0,0,0,0.3)", whiteSpace:"nowrap", transform:"translate(-50%,-130%)"}
};

const REGIONS = [
  { id:"scotland", name:"Scotland", quotes:"3,421", cx:280, cy:130 },
  { id:"ni", name:"Northern Ireland", quotes:"892", cx:165, cy:240 },
  { id:"northern-england", name:"Northern England", quotes:"6,102", cx:295, cy:285 },
  { id:"wales", name:"Wales", quotes:"1,447", cx:225, cy:390 },
  { id:"midlands", name:"Midlands", quotes:"5,884", cx:330, cy:380 },
  { id:"london", name:"London & SE", quotes:"9,211", cx:395, cy:455 },
  { id:"southwest", name:"South West", quotes:"2,336", cx:255, cy:475 },
  { id:"ci-iom", name:"CI / Isle of Man", quotes:"218", cx:380, cy:540 },
];

function UKMap(){
  const [active, setActive] = React.useState("london");
  const [hover, setHover] = React.useState(null);
  const svgRef = React.useRef();
  const [tip, setTip] = React.useState(null);

  return (
    <section id="territories" style={mapStyles.wrap}>
      <div style={mapStyles.inner}>
        <div>
          <div style={mapStyles.kicker}>Where we trade</div>
          <h2 style={mapStyles.h2}>UK, Channel Islands<br/>& Isle of Man.</h2>
          <p style={mapStyles.p}>
            England, Scotland, Wales, Northern Ireland, the Channel Islands and the Isle of Man.
            Premises-based cover wherever your clients trade — with territorial limits for products liability reaching worldwide, excluding USA & Canada.
          </p>
          <div style={mapStyles.regionList}>
            {REGIONS.map(r => (
              <div key={r.id}
                style={mapStyles.regionRow(active===r.id)}
                onMouseEnter={()=>setActive(r.id)}>
                <span style={mapStyles.regionName}>{r.name}</span>
                <span style={mapStyles.regionCount}>{r.quotes}</span>
              </div>
            ))}
          </div>
          <div style={{marginTop:16, fontSize:12, fontFamily:'"JetBrains Mono",monospace', opacity:0.45, letterSpacing:"0.1em"}}>
            ◉ QUOTES PLACED — LAST 30 DAYS · ILLUSTRATIVE
          </div>
        </div>

        <div style={mapStyles.svgWrap}>
          {/* Stylised UK silhouette — simplified polygons */}
          <svg ref={svgRef} viewBox="0 0 500 560" width="100%" style={{maxWidth:520, margin:"0 auto", display:"block"}}>
            <defs>
              <radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
                <stop offset="0%" stopColor="var(--lilac)" stopOpacity="0.8"/>
                <stop offset="100%" stopColor="var(--lilac)" stopOpacity="0"/>
              </radialGradient>
              <filter id="soft"><feGaussianBlur stdDeviation="1"/></filter>
            </defs>

            {/* Background grid */}
            <g opacity="0.08" stroke="#fff" strokeWidth="0.5">
              {Array.from({length:11}, (_,i) => <line key={"h"+i} x1="0" y1={i*56} x2="500" y2={i*56}/>)}
              {Array.from({length:11}, (_,i) => <line key={"v"+i} x1={i*50} y1="0" x2={i*50} y2="560"/>)}
            </g>

            {/* Republic of Ireland (lighter — for context, not a trading territory) */}
            <path d="
              M 132,214
              L 152,210 L 172,214 L 188,222 L 198,234
              L 200,250 L 192,262 L 180,272 L 172,288
              L 168,308 L 158,326 L 142,338 L 122,344
              L 100,342 L 78,336 L 62,322 L 54,302
              L 58,282 L 68,266 L 58,250 L 70,234
              L 90,224 L 110,218 Z"
              fill="rgba(255,255,255,0.025)" stroke="rgba(255,255,255,0.2)" strokeWidth="1" strokeLinejoin="round"/>

            {/* Northern Ireland — sits on the NE of the Irish landmass */}
            <path d="
              M 156,214 L 176,210 L 194,216 L 204,228
              L 206,244 L 198,258 L 184,266 L 168,266
              L 156,258 L 150,246 L 152,228 Z"
              fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.5)" strokeWidth="1.1" strokeLinejoin="round"/>

            {/* Great Britain — clockwise from Cape Wrath (NW Scotland tip).
                Hits the iconic landmarks: Aberdeen bulge, Firth of Forth,
                Flamborough Head, The Wash indent, East Anglia (Norfolk)
                bulge, Thames Estuary, Dover, South Coast, Cornwall tip
                (Land's End), Bristol Channel, Pembrokeshire (W Wales),
                Cardigan Bay, Lleyn Peninsula, North Wales, Mersey,
                Cumbria, Solway Firth, Galloway, Mull of Kintyre, Highlands. */}
            <path d="
              M 272,58
              L 296,52 L 322,60
              L 326,82 L 322,98 L 338,112 L 342,132
              L 332,150 L 320,162
              L 312,176 L 326,188 L 338,196
              L 354,222 L 366,250
              L 368,278 L 380,298
              L 396,316 L 384,332 L 402,344
              L 410,370
              L 388,382 L 408,388
              L 432,392 L 452,404 L 458,424 L 456,442
              L 446,456 L 432,468
              L 416,474
              L 408,484 L 424,490
              L 436,498 L 442,508
              L 424,512 L 402,514 L 380,516 L 358,514
              L 338,512 L 318,514 L 302,516
              L 286,518 L 268,520 L 248,524
              L 226,530 L 200,532 L 176,528
              L 154,520 L 138,508
              L 152,498 L 172,486 L 192,476
              L 214,466 L 234,460 L 252,456
              L 268,448 L 278,438
              L 264,434 L 244,432 L 220,434
              L 198,432 L 178,426 L 162,418
              L 152,406
              L 162,392 L 178,382
              L 184,370 L 174,364
              L 158,358 L 148,354
              L 162,344 L 184,338
              L 208,336 L 232,336 L 254,338
              L 256,330 L 246,326 L 236,318
              L 234,304 L 240,290
              L 244,278 L 232,272
              L 222,260 L 226,246
              L 234,238 L 220,228
              L 206,234 L 198,248
              L 206,232 L 220,218 L 230,206
              L 232,192
              L 220,194 L 218,180
              L 226,166 L 220,154
              L 232,138 L 224,124
              L 234,108 L 226,94
              L 240,80 L 256,68 L 272,58 Z"
              fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.6)" strokeWidth="1.3" strokeLinejoin="round" strokeLinecap="round"/>

            {/* Outer Hebrides */}
            <path d="M198,116 L204,108 L208,122 L204,136 L198,142 Z" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.3)" strokeWidth="0.9"/>
            <path d="M188,148 L193,142 L196,156 L191,162 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.25)" strokeWidth="0.8"/>

            {/* Skye */}
            <path d="M212,128 L222,124 L220,140 L210,142 Z" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.3)" strokeWidth="0.9"/>

            {/* Orkney */}
            <circle cx="298" cy="40" r="2.4" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.3)" strokeWidth="0.8"/>
            <circle cx="306" cy="44" r="1.8" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.3)" strokeWidth="0.8"/>
            <circle cx="290" cy="46" r="1.6" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.3)" strokeWidth="0.8"/>

            {/* Shetland — inset */}
            <g transform="translate(420,40)">
              <rect x="-2" y="-4" width="40" height="56" rx="3" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="0.6" strokeDasharray="2 2"/>
              <path d="M14,4 L20,2 L24,12 L22,24 L26,34 L20,42 L14,38 L12,28 L16,18 Z" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.32)" strokeWidth="0.8"/>
            </g>

            {/* Isle of Man */}
            <ellipse cx="222" cy="282" rx="6" ry="9" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.4)" strokeWidth="1"/>

            {/* Anglesey */}
            <ellipse cx="200" cy="340" rx="8" ry="5" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.32)" strokeWidth="0.9"/>

            {/* Isle of Wight */}
            <ellipse cx="356" cy="514" rx="9" ry="4" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.32)" strokeWidth="0.9"/>

            {/* Channel Islands — Jersey & Guernsey */}
            <circle cx="370" cy="538" r="4" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.36)" strokeWidth="1"/>
            <circle cx="384" cy="544" r="3" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.36)" strokeWidth="1"/>

            {/* Region markers */}
            {REGIONS.map(r => {
              const a = active===r.id;
              return (
                <g key={r.id}
                   onMouseEnter={e => { setActive(r.id); setTip({x:r.cx, y:r.cy, name:r.name, q:r.quotes}); }}
                   onMouseLeave={() => setTip(null)}
                   style={{cursor:"pointer"}}>
                  {a && <circle cx={r.cx} cy={r.cy} r="36" fill="url(#glow)"/>}
                  <circle cx={r.cx} cy={r.cy} r={a?9:6} fill={a?"var(--teal)":"var(--lilac)"}
                    style={{transition:"r .2s", filter: a?"drop-shadow(0 0 8px var(--teal))":"none"}}/>
                  <circle cx={r.cx} cy={r.cy} r={a?18:10} fill="none" stroke={a?"var(--teal)":"rgba(156,116,235,0.4)"} strokeWidth="1"
                    style={{transition:"r .2s"}}>
                    {a && <animate attributeName="r" values="10;24;10" dur="2s" repeatCount="indefinite"/>}
                    {a && <animate attributeName="opacity" values="1;0;1" dur="2s" repeatCount="indefinite"/>}
                  </circle>
                </g>
              );
            })}
          </svg>
          {tip && (
            <div style={{...mapStyles.tooltip, left: (tip.x/500)*100+"%", top:(tip.y/560)*100+"%"}}>
              {tip.name} · <span style={{color:"var(--accent)"}}>{tip.q}</span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

window.UKMap = UKMap;