/* Hero right-side visual — abstract operational territory map.
   Premium B2B treatment: looks like an internal coverage panel,
   not a marketing illustration. */
function TerritoryMap() {
  return (
    <div style={{
      position: 'relative',
      display: 'grid',
      gap: 12,
    }}>
      {/* Floating tab labels above the panel */}
      <div style={{
        display: 'flex',
        gap: 6,
        fontSize: 11,
        fontWeight: 700,
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        color: 'var(--fg-subtle)',
        paddingLeft: 4,
      }}>
        <span style={{ color: 'var(--pmhoa-blue)' }}>● Coverage map</span>
        <span style={{ marginLeft: 'auto', color: 'var(--fg-subtle)' }}>Internal view · sample</span>
      </div>

      <div className="op-card">
        <div className="op-card__header">
          <div className="op-card__title">
            <span className="op-card__dot"></span>
            Territory Coverage · Sacramento Metro
          </div>
          <div className="op-card__meta">Updated 2 min ago</div>
        </div>

        {/* Map SVG */}
        <div style={{ position: 'relative', background: '#f7faff', borderBottom: '1px solid var(--border)' }}>
          <MapSVG />
        </div>

        {/* ZIP coverage table */}
        <div style={{ padding: '14px 18px 18px', display: 'grid', gap: 8 }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '56px 1fr 70px 60px',
            gap: 10,
            fontSize: 11,
            fontWeight: 700,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            color: 'var(--fg-subtle)',
            paddingBottom: 6,
            borderBottom: '1px solid var(--border)',
          }}>
            <span>ZIP</span>
            <span>Decision-makers</span>
            <span style={{ textAlign: 'right' }}>Doors</span>
            <span style={{ textAlign: 'right' }}>Status</span>
          </div>
          <ZipRow zip="95814" name="Capitol Heights PM" doors="1,840" status="warm" />
          <ZipRow zip="95816" name="Midtown Property Group" doors="2,210" status="active" />
          <ZipRow zip="95821" name="Arden Realty Partners" doors="3,540" status="cold" />
          <ZipRow zip="95825" name="Sierra HOA Mgmt" doors="1,290" status="warm" />
        </div>

        {/* Footer mini-stats */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          borderTop: '1px solid var(--border)',
          background: 'var(--bg-subtle)',
        }}>
          <MiniStat label="ZIPs covered" value="17" />
          <MiniStat label="PMs mapped" value="84" />
          <MiniStat label="Doors" value="48.6k" />
        </div>
      </div>
    </div>
  );
}

function ZipRow({ zip, name, doors, status }) {
  const styles = {
    active: { bg: 'rgba(31,157,106,0.10)', dot: 'var(--success)', label: 'Active' },
    warm:   { bg: 'rgba(217,144,35,0.10)', dot: 'var(--warning)', label: 'Warm' },
    cold:   { bg: 'rgba(107,120,134,0.10)', dot: 'var(--fg-subtle)', label: 'Cold' },
  }[status];
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '56px 1fr 70px 60px',
      gap: 10,
      alignItems: 'center',
      fontSize: 13,
      paddingTop: 4,
    }}>
      <span className="tnum mono" style={{ fontSize: 12, color: 'var(--fg-muted)', fontWeight: 600 }}>{zip}</span>
      <span style={{ fontWeight: 600, color: 'var(--fg)', letterSpacing: '-0.005em' }}>{name}</span>
      <span className="tnum" style={{ textAlign: 'right', color: 'var(--fg-muted)', fontWeight: 600 }}>{doors}</span>
      <span style={{
        textAlign: 'right',
        fontSize: 11,
        fontWeight: 700,
        letterSpacing: '0.04em',
        textTransform: 'uppercase',
        color: styles.dot,
      }}>{styles.label}</span>
    </div>
  );
}

function MiniStat({ label, value }) {
  return (
    <div style={{ padding: '14px 16px', borderRight: '1px solid var(--border)' }}>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>{label}</div>
      <div className="tnum" style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', marginTop: 2 }}>{value}</div>
    </div>
  );
}

function MapSVG() {
  // Hand-placed abstract ZIP zones + building dots
  // Layout: 5 zones with irregular polygons; building clusters; connecting lines
  return (
    <svg viewBox="0 0 520 360" width="100%" preserveAspectRatio="xMidYMid meet" style={{ display: 'block' }}>
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(18,144,207,0.06)" strokeWidth="1" />
        </pattern>
        <radialGradient id="zoneActive" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(31,157,106,0.22)" />
          <stop offset="100%" stopColor="rgba(31,157,106,0.0)" />
        </radialGradient>
        <radialGradient id="zoneWarm" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(217,144,35,0.22)" />
          <stop offset="100%" stopColor="rgba(217,144,35,0.0)" />
        </radialGradient>
        <radialGradient id="zoneBlue" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(18,144,207,0.22)" />
          <stop offset="100%" stopColor="rgba(18,144,207,0.0)" />
        </radialGradient>
      </defs>

      {/* Background grid */}
      <rect width="520" height="360" fill="url(#grid)" />

      {/* ZIP zones (irregular polygons with dashed borders) */}
      <g opacity="0.95">
        {/* Zone A */}
        <polygon
          points="60,60 200,40 250,110 220,180 100,200 50,140"
          fill="rgba(18,144,207,0.06)"
          stroke="rgba(18,144,207,0.35)"
          strokeWidth="1"
          strokeDasharray="3 3"
        />
        <text x="130" y="120" fontFamily="Proxima Nova" fontSize="10" fontWeight="700" fill="rgba(8,64,93,0.55)" letterSpacing="0.12em">95816</text>

        {/* Zone B */}
        <polygon
          points="250,110 380,90 420,200 340,240 220,180"
          fill="rgba(18,144,207,0.06)"
          stroke="rgba(18,144,207,0.35)"
          strokeWidth="1"
          strokeDasharray="3 3"
        />
        <text x="320" y="170" fontFamily="Proxima Nova" fontSize="10" fontWeight="700" fill="rgba(8,64,93,0.55)" letterSpacing="0.12em">95814</text>

        {/* Zone C */}
        <polygon
          points="380,90 480,80 490,200 420,200"
          fill="rgba(18,144,207,0.06)"
          stroke="rgba(18,144,207,0.35)"
          strokeWidth="1"
          strokeDasharray="3 3"
        />
        <text x="425" y="145" fontFamily="Proxima Nova" fontSize="10" fontWeight="700" fill="rgba(8,64,93,0.55)" letterSpacing="0.12em">95821</text>

        {/* Zone D (bottom) */}
        <polygon
          points="100,200 220,180 340,240 320,310 140,310 60,260"
          fill="rgba(18,144,207,0.06)"
          stroke="rgba(18,144,207,0.35)"
          strokeWidth="1"
          strokeDasharray="3 3"
        />
        <text x="200" y="265" fontFamily="Proxima Nova" fontSize="10" fontWeight="700" fill="rgba(8,64,93,0.55)" letterSpacing="0.12em">95825</text>

        {/* Zone E */}
        <polygon
          points="340,240 420,200 490,200 470,290 360,310 320,310"
          fill="rgba(18,144,207,0.06)"
          stroke="rgba(18,144,207,0.35)"
          strokeWidth="1"
          strokeDasharray="3 3"
        />
        <text x="400" y="265" fontFamily="Proxima Nova" fontSize="10" fontWeight="700" fill="rgba(8,64,93,0.55)" letterSpacing="0.12em">95826</text>
      </g>

      {/* Hot zone glow */}
      <circle cx="300" cy="170" r="80" fill="url(#zoneActive)" />
      <circle cx="140" cy="120" r="70" fill="url(#zoneWarm)" />
      <circle cx="200" cy="260" r="70" fill="url(#zoneBlue)" />

      {/* Connection lines (fine, suggesting routing) */}
      <g stroke="rgba(18,144,207,0.3)" strokeWidth="1" fill="none" strokeDasharray="2 4">
        <path d="M 130 130 Q 220 100 300 170" />
        <path d="M 300 170 Q 360 220 200 260" />
        <path d="M 200 260 Q 280 280 420 250" />
        <path d="M 420 130 Q 380 200 300 170" />
      </g>

      {/* Building clusters — small squares grouped per zone */}
      <BuildingCluster cx={130} cy={120} pattern="warm" />
      <BuildingCluster cx={300} cy={170} pattern="active" />
      <BuildingCluster cx={420} cy={130} pattern="cold" />
      <BuildingCluster cx={200} cy={260} pattern="warm" />
      <BuildingCluster cx={400} cy={260} pattern="cold" />

      {/* Compass / scale */}
      <g transform="translate(20,20)" opacity="0.7">
        <rect x="0" y="0" width="60" height="18" rx="3" fill="white" stroke="var(--border)" />
        <text x="6" y="12" fontFamily="Proxima Nova" fontSize="9" fontWeight="700" fill="var(--fg-muted)" letterSpacing="0.08em">2 MILES</text>
        <line x1="32" y1="9" x2="56" y2="9" stroke="var(--fg-subtle)" strokeWidth="1.5" />
      </g>
    </svg>
  );
}

function BuildingCluster({ cx, cy, pattern }) {
  // Pattern controls fill colors of the building squares
  const colors = {
    active: ['#1f9d6a', '#1f9d6a', '#88C3EB', '#1290CF', '#1290CF'],
    warm:   ['#D99023', '#1290CF', '#88C3EB', '#88C3EB', '#1290CF'],
    cold:   ['#94a1b1', '#94a1b1', '#88C3EB', '#94a1b1', '#1290CF'],
  }[pattern];

  // 5 buildings in a small cluster
  const positions = [
    { dx: -16, dy: -8, w: 11, h: 14 },
    { dx: -4,  dy: -14, w: 10, h: 18 },
    { dx: 8,   dy: -10, w: 12, h: 14 },
    { dx: -12, dy: 6,  w: 13, h: 11 },
    { dx: 4,   dy: 8,  w: 10, h: 9 },
  ];
  return (
    <g>
      {positions.map((p, i) => (
        <rect
          key={i}
          x={cx + p.dx}
          y={cy + p.dy}
          width={p.w}
          height={p.h}
          rx="1.5"
          fill={colors[i]}
          opacity="0.88"
        />
      ))}
      {/* Pin dot at center */}
      <circle cx={cx} cy={cy} r="2.5" fill="white" stroke="var(--pmhoa-blue)" strokeWidth="1.5" />
    </g>
  );
}

window.TerritoryMap = TerritoryMap;