// ServiceMap.jsx — Section H
// Stylized NJ map. Each county is a polygon; launch counties are filled red.
// Hover shows a tooltip with the town count and a link.

const COUNTIES = [
  // Launch (filled)
  { id:'bergen',    name:'Bergen',    launch:true,  towns:70, points:'120,10 178,8 184,42 130,46' },
  { id:'morris',    name:'Morris',    launch:true,  towns:39, points:'75,42 124,46 124,90 78,90' },
  { id:'essex',     name:'Essex',     launch:true,  towns:22, points:'128,48 168,50 170,86 130,90' },
  { id:'hudson',    name:'Hudson',    launch:true,  towns:12, points:'174,48 192,50 192,90 176,90' },
  { id:'union',     name:'Union',     launch:true,  towns:21, points:'128,94 170,94 168,118 130,118' },
  { id:'somerset',  name:'Somerset',  launch:true,  towns:21, points:'80,96 124,94 124,128 84,130' },
  { id:'middlesex', name:'Middlesex', launch:true,  towns:25, points:'128,122 170,120 168,156 130,158' },
  // Non-launch (light)
  { id:'sussex',    name:'Sussex',    launch:false, points:'20,18 70,12 78,40 30,50' },
  { id:'warren',    name:'Warren',    launch:false, points:'20,55 60,52 70,90 30,92' },
  { id:'hunterdon', name:'Hunterdon', launch:false, points:'32,96 68,94 78,132 38,134' },
  { id:'passaic',   name:'Passaic',   launch:false, points:'80,12 118,10 122,46 78,42' },
  { id:'mercer',    name:'Mercer',    launch:false, points:'80,134 124,134 130,168 90,170' },
  { id:'monmouth',  name:'Monmouth',  launch:false, points:'128,162 170,160 174,200 132,206' },
  { id:'ocean',     name:'Ocean',     launch:false, points:'130,208 176,205 168,260 132,262' },
  { id:'burlington',name:'Burlington',launch:false, points:'40,138 86,138 124,170 122,230 60,224' },
  { id:'camden',    name:'Camden',    launch:false, points:'42,228 88,232 100,266 50,266' },
  { id:'gloucester',name:'Gloucester',launch:false, points:'18,236 44,234 52,272 22,272' },
  { id:'salem',     name:'Salem',     launch:false, points:'2,260 30,264 28,300 4,296' },
  { id:'cumberland',name:'Cumberland',launch:false, points:'34,278 86,278 80,314 38,314' },
  { id:'atlantic',  name:'Atlantic',  launch:false, points:'90,236 130,232 130,288 96,294' },
  { id:'cape-may',  name:'Cape May',  launch:false, points:'90,300 122,294 118,336 96,336' },
];

const ServiceMap = () => {
  const [hover, setHover] = React.useState(null);

  return (
    <section style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.white }}>
      <div style={{ maxWidth:1200, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(32px, 5vw, 80px)', alignItems:'center' }}
           className="grid-2">
        <div>
          <div className="eyebrow" style={{ marginBottom:8 }}>Service area</div>
          <h2 style={{ margin:'0 0 20px' }}>Catering across NJ</h2>
          <p style={{ fontSize:17, color: T.ink, lineHeight:1.6, margin:'0 0 28px', maxWidth:480 }}>
            Seven launch counties, 200+ towns, every venue type from FDU lecture halls to corporate campuses. Hover the map to see town count.
          </p>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:'8px 24px', maxWidth: 360 }}>
            {COUNTIES.filter(c => c.launch).map(c => (
              <div key={c.id}
                   onMouseEnter={() => setHover(c.id)}
                   onMouseLeave={() => setHover(null)}
                   style={{ display:'flex', alignItems:'center', gap:8, padding:'6px 4px', cursor:'pointer',
                            background: hover === c.id ? T.skyTint : 'transparent', borderRadius:6, transition:'background .15s' }}>
                <span style={{ width:8, height:8, borderRadius:2, background: T.teal }} />
                <span style={{ fontSize:14, color: T.ink, fontWeight:500 }}>{c.name}</span>
                <span style={{ fontSize:12, color: T.inkSoft, marginLeft:'auto' }} className="numeral">{c.towns} towns</span>
              </div>
            ))}
          </div>
          <p style={{ marginTop:32, color: T.inkSoft, fontSize:14, lineHeight:1.6 }}>
            Don't see your area? We travel statewide for events of 100+. <a href="#" style={{ color: T.teal, fontWeight:600 }}>Contact us →</a>
          </p>
        </div>
        <div style={{ position:'relative' }}>
          <svg viewBox="0 0 220 360" style={{ width:'100%', maxWidth:420, display:'block', margin:'auto' }}>
            {COUNTIES.map(c => {
              const isHover = hover === c.id;
              const fill = c.launch
                ? (isHover ? T.sky : T.teal)
                : (isHover ? T.skyTint : T.border);
              return (
                <polygon key={c.id} points={c.points}
                  fill={fill}
                  stroke={c.launch ? T.white : '#D1D5DB'}
                  strokeWidth={c.launch ? 1.5 : 1}
                  style={{ transition:'fill .15s', cursor:'pointer' }}
                  onMouseEnter={() => setHover(c.id)}
                  onMouseLeave={() => setHover(null)} />
              );
            })}
          </svg>
          {hover && (
            <div style={{
              position:'absolute', left:'50%', bottom:-12, transform:'translateX(-50%)',
              background: T.navy, color: T.white,
              padding:'8px 14px', borderRadius:8, fontSize:13, whiteSpace:'nowrap',
              boxShadow:'0 8px 24px rgba(9,33,79,.20)',
            }}>
              {COUNTIES.find(c => c.id === hover)?.name}
              {COUNTIES.find(c => c.id === hover)?.launch && (
                <> · <span className="numeral">{COUNTIES.find(c => c.id === hover)?.towns}</span> towns · <a href="#" style={{ color: T.sky, marginLeft:6, borderBottom:'none' }}>View options →</a></>
              )}
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ServiceMap });