/* ── Hero — live London map ────────────────────────────────────────────
   A schematic London map (Thames, parks, road grid, area labels) with
   scattered service pins. Most are static (resolved/scheduled); a
   handful pulse in accent green to show what's live right now. Three
   floating callout cards surface the kind of jobs running through the
   platform — Roy en route, Tariq on site, coffee delivery arrived.
─────────────────────────────────────────────────────────────────── */

function HeroVisual() {
  // Pins scattered across central London. x/y are %-positions inside
  // the container. State drives the colour + whether it pulses.
  const PINS = [
    // Live (accent green, pulsing) — building activity that's happening now
    { x: 26, y: 36, state: 'live' },
    { x: 58, y: 42, state: 'live' },
    { x: 70, y: 28, state: 'live' },
    { x: 36, y: 64, state: 'live' },
    { x: 78, y: 56, state: 'live' },

    // On-site (amber) — operative arrived but not finished
    { x: 48, y: 50, state: 'site' },
    { x: 64, y: 70, state: 'site' },

    // Resolved / scheduled (neutral) — quiet portfolio activity
    { x: 32, y: 22, state: 'done' },
    { x: 42, y: 28, state: 'done' },
    { x: 56, y: 22, state: 'done' },
    { x: 72, y: 38, state: 'done' },
    { x: 84, y: 30, state: 'done' },
    { x: 22, y: 48, state: 'done' },
    { x: 38, y: 44, state: 'done' },
    { x: 30, y: 58, state: 'done' },
    { x: 52, y: 62, state: 'done' },
    { x: 60, y: 56, state: 'done' },
    { x: 74, y: 62, state: 'done' },
    { x: 84, y: 50, state: 'done' },
    { x: 46, y: 76, state: 'done' },
    { x: 56, y: 80, state: 'done' },
    { x: 72, y: 82, state: 'done' },
    { x: 86, y: 72, state: 'done' },
    { x: 30, y: 76, state: 'done' },
    { x: 20, y: 66, state: 'done' },
    { x: 88, y: 40, state: 'done' },
  ];

  // Callouts pinned to fixed corner positions so they never overlap.
  // 6 total — mix of live dispatch, compliance warnings, AI insights,
  // completed PPM and F&B delivery — to show the breadth of services
  // running through the platform.
  const CALLOUTS = [
    {
      pos: { top: '5%', left: '4%' },
      state: 'live',
      title: 'Roy en route · 6 min',
      sub: 'Lift 2 · Marlow & Finch',
    },
    {
      pos: { top: '15%', right: '4%' },
      state: 'live',
      title: 'Cleaning shift live',
      sub: 'Thirty-Three EC1 · 8 staff · 19:00',
    },
    {
      pos: { top: '30%', left: '4%' },
      state: 'done',
      title: 'PAT test passed',
      sub: '142 assets · Westhall E1 · clear',
    },
    {
      pos: { top: '50%', left: '4%' },
      state: 'ai',
      title: 'AI · Recurring HVAC fault',
      sub: 'Hyperion W1 · 3rd report in 30d',
    },
    {
      pos: { top: '40%', right: '4%' },
      state: 'site',
      title: 'Tariq on site · HVAC',
      sub: 'Tower 9 · zone B warm',
    },
    {
      pos: { bottom: '6%', left: '4%' },
      state: 'done',
      title: 'PPM complete · boiler',
      sub: 'St Anselm · next due in 90d',
    },
    {
      pos: { bottom: '6%', right: '4%' },
      state: 'live',
      title: 'F&B delivery · 24 boxes',
      sub: 'Greycote SW1 · arrived 09:12',
    },
  ];

  return (
    <div className="hv-map">
      <style>{HV_STYLE}</style>

      {/* ── Map background ── */}
      <svg className="hv-map-bg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice">
        {/* Paper tint */}
        <rect width="600" height="400" fill="oklch(96.5% 0.008 90)" />

        {/* Park / green spaces */}
        <g fill="oklch(92% 0.04 145)" opacity="0.55">
          <ellipse cx="170" cy="170" rx="58" ry="30" />
          <ellipse cx="280" cy="140" rx="40" ry="22" />
          <ellipse cx="450" cy="190" rx="44" ry="26" />
          <ellipse cx="100" cy="310" rx="42" ry="24" />
          <ellipse cx="520" cy="340" rx="36" ry="20" />
        </g>

        {/* River Thames — gentle east-flowing curve */}
        <path
          d="M -20 270 Q 80 258 160 274 Q 245 295 325 268 Q 405 244 485 262 Q 555 275 620 258"
          stroke="oklch(86% 0.06 220)"
          strokeWidth="18"
          fill="none"
          opacity="0.85"
        />
        <path
          d="M -20 270 Q 80 258 160 274 Q 245 295 325 268 Q 405 244 485 262 Q 555 275 620 258"
          stroke="oklch(91% 0.04 220)"
          strokeWidth="11"
          fill="none"
        />

        {/* Road network — subtle, curved */}
        <g stroke="oklch(90% 0.005 80)" strokeWidth="1.4" fill="none" strokeLinecap="round" opacity="0.6">
          <path d="M 0 110 Q 200 102 600 122" />
          <path d="M 0 200 Q 260 195 600 215" />
          <path d="M 0 340 Q 220 335 600 348" />
          <path d="M 100 0 Q 108 200 102 400" />
          <path d="M 240 0 Q 245 200 250 400" />
          <path d="M 380 0 Q 375 200 388 400" />
          <path d="M 500 0 Q 506 200 512 400" />
        </g>

        {/* Area labels — subtle, mono, lowercase-ish */}
        <g fill="oklch(54% 0.005 80)" fontFamily="ui-monospace, 'SF Mono', monospace" fontSize="9.5" opacity="0.55" letterSpacing="0.1em">
          <text x="200" y="90" textAnchor="middle">CAMDEN</text>
          <text x="195" y="240" textAnchor="middle">WESTMINSTER</text>
          <text x="395" y="220" textAnchor="middle">CITY</text>
          <text x="460" y="340" textAnchor="middle">SOUTHWARK</text>
          <text x="100" y="350" textAnchor="middle">BATTERSEA</text>
          <text x="535" y="195" textAnchor="middle">SHOREDITCH</text>
        </g>
      </svg>

      {/* ── Pins ── */}
      {PINS.map((p, i) => (
        <span
          key={i}
          className={'hv-pin hv-pin-' + p.state}
          style={{
            top: `${p.y}%`,
            left: `${p.x}%`,
            animationDelay: `${(i % 6) * 0.35}s`,
          }}
        >
          {p.state === 'live' && <span className="hv-pin-pulse" />}
          <span className="hv-pin-dot" />
        </span>
      ))}

      {/* ── Callouts ── */}
      {CALLOUTS.map((c, i) => (
        <div
          key={`c${i}`}
          className={'hv-callout hv-callout-' + c.state}
          style={c.pos}
        >
          {c.state === 'ai' ? (
            <svg
              className="hv-callout-sparkle"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M10 3.2c.1-.27.49-.27.6 0l1.3 3.45a3 3 0 0 0 1.75 1.75l3.45 1.3c.27.1.27.49 0 .6l-3.45 1.3a3 3 0 0 0-1.75 1.75l-1.3 3.45a.32.32 0 0 1-.6 0l-1.3-3.45a3 3 0 0 0-1.75-1.75l-3.45-1.3a.32.32 0 0 1 0-.6l3.45-1.3a3 3 0 0 0 1.75-1.75l1.3-3.45Z" />
              <path d="M18 14.4c.06-.16.29-.16.35 0l.66 1.74a1.5 1.5 0 0 0 .87.87l1.74.66a.19.19 0 0 1 0 .35l-1.74.66a1.5 1.5 0 0 0-.87.87l-.66 1.74a.19.19 0 0 1-.35 0l-.66-1.74a1.5 1.5 0 0 0-.87-.87l-1.74-.66a.19.19 0 0 1 0-.35l1.74-.66a1.5 1.5 0 0 0 .87-.87l.66-1.74Z" />
            </svg>
          ) : (
            <span className={'hv-callout-dot hv-callout-dot-' + c.state} />
          )}
          <div className="hv-callout-text">
            <div className="hv-callout-title">{c.title}</div>
            <div className="hv-callout-sub">{c.sub}</div>
          </div>
        </div>
      ))}

      {/* ── Live counter — top-right chip ── */}
      <div className="hv-counter">
        <span className="hv-counter-live">
          <span className="live-dot" />
          47 live now
        </span>
        <span className="hv-counter-sep" />
        <span className="hv-counter-meta">186 jobs today</span>
      </div>
    </div>
  );
}

const HV_STYLE = `
  .hv-map {
    position: relative;
    width: 100%;
    min-height: 520px;
    height: 100%;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 56px -28px rgb(0 0 0 / 0.22), 0 4px 12px -4px rgb(0 0 0 / 0.06);
    font-family: var(--sans);
  }
  @media (max-width: 900px) {
    .hv-map { aspect-ratio: 4 / 3; min-height: 0; height: auto; }
  }
  .hv-map-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ── Pins ── */
  .hv-pin {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .hv-pin-dot {
    position: absolute;
    border-radius: 50%;
    z-index: 2;
  }
  .hv-pin-live .hv-pin-dot {
    width: 9px;
    height: 9px;
    top: 1.5px;
    left: 1.5px;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--paper);
  }
  .hv-pin-site .hv-pin-dot {
    width: 8px;
    height: 8px;
    top: 2px;
    left: 2px;
    background: oklch(65% 0.15 65);
    box-shadow: 0 0 0 1.5px var(--paper);
  }
  .hv-pin-done .hv-pin-dot {
    width: 6px;
    height: 6px;
    top: 3px;
    left: 3px;
    background: oklch(54% 0.005 240);
    opacity: 0.55;
  }

  .hv-pin-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.5;
    animation: hvPulse 2.4s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
    z-index: 1;
  }
  @keyframes hvPulse {
    0%   { transform: scale(0.4); opacity: 0.5; }
    80%  { opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
  }
  :root[data-motion='off'] .hv-pin-pulse { animation: none; opacity: 0.25; }

  /* ── Callouts ── */
  .hv-callout {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px 9px 11px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 16px 28px -16px rgb(0 0 0 / 0.22), 0 4px 8px -4px rgb(0 0 0 / 0.08);
    z-index: 3;
    max-width: 230px;
  }
  .hv-callout-text { min-width: 0; }
  .hv-callout-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .hv-callout-dot-live {
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 24%, transparent);
  }
  .hv-callout-dot-site {
    background: oklch(65% 0.15 65);
    box-shadow: 0 0 0 3px color-mix(in oklch, oklch(65% 0.15 65) 24%, transparent);
  }
  .hv-callout-dot-warn {
    background: oklch(58% 0.18 30);
    box-shadow: 0 0 0 3px color-mix(in oklch, oklch(58% 0.18 30) 22%, transparent);
  }
  .hv-callout-dot-done {
    background: oklch(54% 0.005 240);
    opacity: 0.55;
  }
  .hv-callout-dot-ai {
    background: oklch(45% 0.18 290);
    box-shadow: 0 0 0 3px color-mix(in oklch, oklch(45% 0.18 290) 22%, transparent);
  }
  .hv-callout-sparkle {
    width: 16px;
    height: 16px;
    color: oklch(45% 0.18 290);
    flex-shrink: 0;
  }
  /* Subtle accent tint on warn callout cards */
  .hv-callout-warn {
    border-color: color-mix(in oklch, oklch(58% 0.18 30) 28%, transparent);
  }

  .hv-callout-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hv-callout-sub {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Live counter chip ── */
  .hv-counter {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 14px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink-2);
    box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.12);
    z-index: 3;
  }
  .hv-counter-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--accent-ink);
  }
  .hv-counter-sep {
    width: 1px;
    height: 12px;
    background: var(--rule);
  }
  .hv-counter-meta {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  /* ── Tighter callouts on smaller screens ── */
  @media (max-width: 740px) {
    .hv-callout {
      padding: 7px 10px 7px 9px;
      max-width: 160px;
    }
    .hv-callout-title { font-size: 11.5px; }
    .hv-callout-sub { font-size: 10.5px; }
    .hv-counter { padding: 6px 12px; font-size: 11px; }
  }
`;

window.HeroVisual = HeroVisual;