/* Créapeiron maison — global dealers / private partners.
   Self-contained dotted world map (no external assets): land dots are
   computed by point-in-polygon over rough continent outlines; dealer pins
   share the same equirectangular projection so they sit correctly. */

const MAP_W = 1000, MAP_H = 480;
const proj = (lon, lat) => ({ x: ((lon + 180) / 360) * MAP_W, y: ((90 - lat) / 180) * MAP_H });

/* Rough continent outlines [lon,lat] — abstract by design (luxury dotted map). */
const LAND = [
  /* North America */
  [[-168,66],[-150,70],[-125,70],[-95,72],[-80,68],[-64,60],[-56,51],[-66,44],[-70,41],[-75,35],[-81,25],[-90,29],[-97,26],[-105,22],[-110,30],[-120,34],[-124,40],[-128,50],[-140,59],[-160,60],[-168,66]],
  /* Central America */
  [[-105,22],[-92,18],[-83,10],[-78,8],[-83,14],[-92,16],[-101,18],[-105,22]],
  /* South America */
  [[-80,8],[-72,11],[-62,10],[-50,0],[-44,-2],[-35,-6],[-38,-14],[-48,-24],[-58,-34],[-65,-42],[-72,-50],[-75,-52],[-71,-44],[-71,-30],[-76,-16],[-80,-6],[-81,2],[-80,8]],
  /* Europe */
  [[-10,44],[-9,38],[-2,36],[6,38],[13,40],[18,40],[24,41],[28,45],[30,50],[26,55],[22,59],[14,62],[8,60],[4,52],[-2,49],[-5,48],[-10,44]],
  /* Scandinavia top */
  [[10,60],[18,62],[24,66],[28,70],[20,70],[12,64],[10,60]],
  /* UK / Ireland */
  [[-8,52],[-5,50],[-2,51],[-1,54],[-3,57],[-6,57],[-8,55],[-8,52]],
  /* Africa */
  [[-16,16],[-16,24],[-6,33],[10,37],[20,32],[32,31],[35,24],[43,12],[51,12],[42,2],[40,-8],[40,-18],[35,-24],[28,-32],[20,-34],[16,-28],[12,-16],[9,-2],[5,5],[-8,5],[-16,16]],
  /* Madagascar */
  [[44,-13],[50,-16],[49,-24],[45,-25],[43,-20],[44,-13]],
  /* Asia (main mass) */
  [[28,45],[40,48],[55,52],[70,55],[88,56],[105,58],[125,60],[140,62],[160,64],[178,66],[170,60],[150,58],[140,50],[135,44],[122,40],[122,32],[120,24],[110,20],[100,12],[95,18],[88,22],[80,12],[77,8],[73,18],[68,24],[60,25],[52,29],[44,38],[36,40],[28,45]],
  /* Arabian peninsula fill */
  [[36,30],[48,30],[58,24],[52,16],[44,13],[38,22],[36,30]],
  /* Southeast Asia / Indonesia */
  [[96,6],[104,2],[112,-2],[120,-4],[128,-2],[124,-8],[112,-8],[102,-4],[96,2],[96,6]],
  [[118,-2],[130,-1],[140,-4],[150,-8],[142,-9],[130,-6],[118,-2]],
  /* Japan */
  [[130,33],[136,35],[140,38],[142,42],[140,44],[136,40],[132,35],[130,33]],
  /* Australia */
  [[114,-22],[122,-18],[131,-12],[142,-11],[150,-22],[153,-28],[148,-38],[140,-38],[131,-32],[123,-34],[115,-34],[113,-26],[114,-22]],
  /* New Zealand */
  [[167,-44],[172,-41],[174,-37],[176,-40],[171,-45],[167,-46],[167,-44]],
];

function pointInPoly(x, y, poly) {
  let inside = false;
  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
    const xi = poly[i][0], yi = poly[i][1], xj = poly[j][0], yj = poly[j][1];
    if (((yi > y) !== (yj > y)) && (x < ((xj - xi) * (y - yi)) / (yj - yi) + xi)) inside = !inside;
  }
  return inside;
}

const DEALERS = [
  { id: 'brno', city: 'Brno', country: 'Czech Republic', name: 'Créapeiron Atelier', region: 'Europe', lon: 16.61, lat: 49.20, home: true, covers: 'The maison · by appointment' },
  { id: 'jpreuni', city: 'Uherský Brod', country: 'Czech Republic', name: 'J&P Reuni s.r.o.', region: 'Europe', lon: 17.63, lat: 49.03, covers: 'France · Germany · Austria · Poland · Hungary · Romania · Slovenia · Albania' },
  { id: 'hytec', city: 'Amsterdam', country: 'Netherlands', name: 'HY5.TECH B.V.', region: 'Europe', lon: 4.90, lat: 52.37, covers: 'Netherlands · Belgium · Luxembourg · Turkey' },
  { id: 'arabian', city: 'Riyadh', country: 'Saudi Arabia', name: 'Arabian Hunter', region: 'Middle East', lon: 46.68, lat: 24.71, covers: 'Saudi Arabia' },
  { id: 'sniperqa', city: 'Doha', country: 'Qatar', name: 'Sniper Qatar', region: 'Middle East', lon: 51.53, lat: 25.29, covers: 'Qatar' },
  { id: 'alshaboos', city: 'Kuwait City', country: 'Kuwait', name: 'Saeid Alshaboos', region: 'Middle East', lon: 47.98, lat: 29.38, covers: 'Kuwait · United Arab Emirates' },
  { id: 'czcustom', city: 'Mesa, AZ', country: 'United States', name: 'Ghost Products · CZ Custom', region: 'Americas', lon: -111.83, lat: 33.42, covers: 'United States' },
];
const REGIONS = ['Europe', 'Middle East', 'Americas'];

function DealerMap() {
  const [active, setActive] = React.useState(null);

  const dots = React.useMemo(() => {
    const out = [];
    const step = 11; // px between dots
    for (let py = step; py < MAP_H; py += step) {
      for (let px = step; px < MAP_W; px += step) {
        const lon = (px / MAP_W) * 360 - 180;
        const lat = 90 - (py / MAP_H) * 180;
        for (let k = 0; k < LAND.length; k++) {
          if (pointInPoly(lon, lat, LAND[k])) { out.push([px, py]); break; }
        }
      }
    }
    return out;
  }, []);

  const WIDE = { maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 var(--gutter)' };

  return (
    <section id="dealers" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0', borderTop: '1px solid var(--border-hairline)' }}>
      <div style={WIDE}>
        <div data-reveal style={{ marginBottom: 'var(--sp-8)', display: 'grid', gridTemplateColumns: '1.5fr 1fr', alignItems: 'flex-end', gap: 'var(--sp-7)' }} className="cp-dealers-head">
          <div>
            <CPDealerEyebrow />
            <h2 style={{ margin: '24px 0 0', fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 'var(--fs-display-2)', lineHeight: 1.06, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>
              Where ELYSIEN is received.
            </h2>
          </div>
          <p style={{ margin: 0, maxWidth: '36ch', fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 'var(--fs-body-sm)', lineHeight: 1.7, color: 'var(--text-secondary)' }}>
            A small circle of private partners across the world. Each viewing is by appointment, in confidence.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 'var(--sp-8)', alignItems: 'start' }} className="cp-dealers">
          {/* MAP */}
          <div data-reveal style={{ position: 'relative', background: 'var(--surface-void)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--r-md)', padding: '18px', overflow: 'hidden' }}>
            <svg viewBox={`0 0 ${MAP_W} ${MAP_H}`} style={{ width: '100%', height: 'auto', display: 'block', overflow: 'visible' }}>
              {dots.map(([x, y], i) => (
                <circle key={i} cx={x} cy={y} r={1.4} fill="var(--cp-steel-400)" opacity="0.32" />
              ))}
              {DEALERS.map((d) => {
                const p = proj(d.lon, d.lat);
                const on = active === d.id;
                const col = d.home ? 'var(--cp-gold-glow)' : 'var(--cp-champagne)';
                return (
                  <g key={d.id} style={{ cursor: 'pointer' }}
                     onMouseEnter={() => setActive(d.id)} onMouseLeave={() => setActive(null)}>
                    <circle cx={p.x} cy={p.y} r={on ? 16 : 11} fill={col} opacity={on ? 0.22 : 0.12}
                            style={{ transition: 'r .4s var(--ease-cinema), opacity .4s' }} />
                    <circle cx={p.x} cy={p.y} r={d.home ? 4.5 : 3.6} fill={col}
                            stroke="var(--surface-void)" strokeWidth="1.2" />
                    {d.home && <circle cx={p.x} cy={p.y} r={8} fill="none" stroke={col} strokeWidth="1" opacity="0.5" />}
                    {on && (
                      <g style={{ pointerEvents: 'none' }}>
                        <line x1={p.x} y1={p.y} x2={p.x} y2={p.y - 26} stroke={col} strokeWidth="0.8" opacity="0.6" />
                        <text x={p.x} y={p.y - 32} textAnchor="middle"
                              style={{ fontFamily: 'var(--font-display)', fontSize: '15px', letterSpacing: '2px', textTransform: 'uppercase', fill: 'var(--cp-stone)' }}>{d.city}</text>
                      </g>
                    )}
                  </g>
                );
              })}
            </svg>
            <div style={{ position: 'absolute', left: '24px', bottom: '20px', display: 'flex', gap: '20px', alignItems: 'center' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', fontFamily: 'var(--font-display)', fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
                <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: 'var(--cp-gold-glow)' }} />Atelier
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', fontFamily: 'var(--font-display)', fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
                <span style={{ width: '7px', height: '7px', borderRadius: '50%', background: 'var(--cp-champagne)' }} />Private partner
              </span>
            </div>
          </div>

          {/* LIST */}
          <div data-reveal style={{ display: 'flex', flexDirection: 'column', gap: 'var(--sp-6)' }}>
            {REGIONS.map((region) => (
              <div key={region}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '14px' }}>
                  <span style={{ width: '24px', height: '1px', background: 'var(--accent)' }} />
                  <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>{region}</h3>
                </div>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
                  {DEALERS.filter((d) => d.region === region).map((d) => {
                    const on = active === d.id;
                    return (
                      <li key={d.id}
                          onMouseEnter={() => setActive(d.id)} onMouseLeave={() => setActive(null)}
                          style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: '16px', padding: '11px 10px', margin: '0 -10px', borderRadius: 'var(--r-sm)', cursor: 'default', background: on ? 'var(--surface-card)' : 'transparent', transition: 'background .35s var(--ease-cinema)' }}>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '3px' }}>
                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '9px', fontFamily: 'var(--font-body)', fontWeight: 400, fontSize: 'var(--fs-body-sm)', color: on ? 'var(--text-primary)' : 'var(--text-secondary)', transition: 'color .35s' }}>
                            {d.home && <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: 'var(--cp-gold-glow)' }} />}
                            {d.name}
                          </span>
                          <span style={{ fontFamily: 'var(--font-display)', fontSize: '10px', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{d.city} · {d.country}</span>
                          {d.covers && <span style={{ fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: '11px', lineHeight: 1.5, color: on ? 'var(--text-secondary)' : 'var(--text-muted)', transition: 'color .35s' }}>{d.covers}</span>}
                        </div>
                      </li>
                    );
                  })}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CPDealerEyebrow() {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: '14px' }}>
      <span style={{ width: '36px', height: '1px', background: 'var(--accent)' }} />
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-eyebrow)', letterSpacing: 'var(--ls-wider)', color: 'var(--text-accent)' }}>09</span>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-eyebrow)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>Dealers &amp; Maisons</span>
    </div>
  );
}

window.DealerMap = DealerMap;