// pickup-map.jsx — stylised map of St. Vincent with pickup pins

const MAP_PINS = [
  { id: "kingstown", x: 38, y: 78, name: "Kingstown Office", sub: "Bay Street · main office", featured: true },
  { id: "aia", x: 60, y: 76, name: "AIA Airport", sub: "Argyle International", featured: true },
  { id: "ferry", x: 36, y: 82, name: "Ferry Terminal", sub: "Cruise & ferry port" },
  { id: "la-vue", x: 32, y: 76, name: "La Vue Hotel", sub: "Cane Garden" },
  { id: "haddon", x: 35, y: 73, name: "Haddon Hotel", sub: "McKies Hill" },
  { id: "alexandrina", x: 40, y: 75, name: "Hotel Alexandrina", sub: "Kingstown" },
  { id: "grenadine-house", x: 42, y: 73, name: "Grenadine House", sub: "Kingstown" },
  { id: "saphire", x: 44, y: 74, name: "Saphire Apt", sub: "Kingstown" },
  { id: "greek-cottage", x: 46, y: 71, name: "Greek Cottage", sub: "Kingstown Hill" },
  { id: "holiday-inn", x: 50, y: 78, name: "Holiday Inn", sub: "Arnos Vale" },
  { id: "royal-bliss", x: 52, y: 76, name: "Royal Bliss Apt", sub: "Arnos Vale" },
  { id: "myahs", x: 56, y: 80, name: "Myah's Suite", sub: "Calliaqua" },
  { id: "blue-lagoon", x: 58, y: 82, name: "Blue Lagoon Marina", sub: "Calliaqua" },
  { id: "sunset", x: 54, y: 81, name: "Sun Set Shores", sub: "Villa Beach" },
  { id: "beachcombers", x: 56, y: 83, name: "Beachcombers", sub: "Villa Beach" },
  { id: "sandals", x: 24, y: 65, name: "Sandals Resort", sub: "Buccament Bay" },
  { id: "abnb", x: 48, y: 60, name: "ABnB", sub: "Custom address — anywhere" },
];

const PickupMap = () => {
  const [hover, setHover] = React.useState(null);
  const [active, setActive] = React.useState("kingstown");

  return (
    <div className="pickup-map-wrap">
      <div className="pickup-map">
        <svg viewBox="0 0 100 130" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" style={{width:"100%", height:"100%", display:"block"}}>
          <defs>
            <linearGradient id="seaG" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#cdf3f0" />
              <stop offset="100%" stopColor="#7fdbd1" />
            </linearGradient>
            <linearGradient id="islandG" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#0a807a" />
              <stop offset="100%" stopColor="#0a6764" />
            </linearGradient>
            <pattern id="dots" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
              <circle cx="2" cy="2" r="0.4" fill="#0fa098" opacity="0.18" />
            </pattern>
          </defs>

          {/* sea */}
          <rect width="100" height="130" fill="url(#seaG)" />
          <rect width="100" height="130" fill="url(#dots)" />

          {/* faint compass ring */}
          <circle cx="80" cy="20" r="9" fill="none" stroke="#0fa098" strokeWidth="0.3" opacity="0.4" />
          <text x="80" y="13" textAnchor="middle" fontSize="3" fill="#0a6764" fontWeight="700">N</text>
          <line x1="80" y1="14" x2="80" y2="11" stroke="#0a6764" strokeWidth="0.4" />

          {/* St. Vincent island shape — stylised */}
          <path d="
            M 50 18
            C 56 19, 60 24, 62 30
            C 65 36, 68 42, 67 50
            C 66 58, 62 64, 60 70
            C 64 73, 66 78, 64 84
            C 62 90, 56 93, 52 96
            C 48 99, 42 100, 38 98
            C 32 95, 26 90, 22 84
            C 18 78, 16 70, 18 62
            C 20 54, 24 46, 28 38
            C 32 30, 38 22, 44 19
            C 47 17, 49 17, 50 18 Z
          " fill="url(#islandG)" stroke="#08524f" strokeWidth="0.4" />

          {/* La Soufrière volcano marker (north) */}
          <g transform="translate(40 30)">
            <path d="M-3 4 L0 -3 L3 4 Z" fill="#3a2418" opacity="0.6" />
            <path d="M-1.5 0 L0 -3 L1.5 0 Z" fill="#fbf6ee" opacity="0.7" />
          </g>
          <text x="44" y="32" fontSize="2.2" fill="#fbf6ee" opacity="0.7">La Soufrière</text>

          {/* coastal road */}
          <path d="
            M 50 18
            C 56 19, 60 24, 62 30
            C 65 36, 68 42, 67 50
            C 66 58, 62 64, 60 70
            C 64 73, 66 78, 64 84
            C 62 90, 56 93, 52 96
            C 48 99, 42 100, 38 98
            C 32 95, 26 90, 22 84
            C 18 78, 16 70, 18 62
            C 20 54, 24 46, 28 38
            C 32 30, 38 22, 44 19
            C 47 17, 49 17, 50 18 Z
          " fill="none" stroke="#ffd23f" strokeWidth="0.35" strokeDasharray="0.6 0.6" opacity="0.7" />

          {/* sea labels */}
          <text x="6" y="50" fontSize="2.2" fill="#0a6764" opacity="0.55" letterSpacing="0.3">CARIBBEAN  SEA</text>
          <text x="78" y="60" fontSize="2.2" fill="#0a6764" opacity="0.55" letterSpacing="0.3">ATLANTIC</text>

          {/* Bequia hint south */}
          <ellipse cx="40" cy="115" rx="6" ry="2.5" fill="#0a807a" opacity="0.5" />
          <text x="40" y="121" fontSize="2.2" fill="#0a6764" opacity="0.6" textAnchor="middle">Bequia →</text>

          {/* pins */}
          {MAP_PINS.map(p => {
            const isActive = active === p.id;
            const isHover = hover === p.id;
            return (
              <g key={p.id}
                style={{cursor:"pointer"}}
                onMouseEnter={() => setHover(p.id)}
                onMouseLeave={() => setHover(null)}
                onClick={() => setActive(p.id)}>
                {(isActive || isHover) && <circle cx={p.x} cy={p.y} r="3" fill="#ff6b4a" opacity="0.25" />}
                <circle cx={p.x} cy={p.y} r={p.featured ? 1.6 : 1.1} fill={isActive ? "#ff6b4a" : (p.featured ? "#f5b800" : "white")} stroke="#15303f" strokeWidth="0.3" />
              </g>
            );
          })}
        </svg>

        {/* hovering tooltip */}
        {hover && (() => {
          const p = MAP_PINS.find(x => x.id === hover);
          return (
            <div className="map-tooltip" style={{left: `${p.x}%`, top: `${(p.y/130)*100}%`}}>
              <div style={{fontWeight:600, fontSize:13}}>{p.name}</div>
              <div style={{fontSize:11, color:"var(--ink-500)"}}>{p.sub}</div>
            </div>
          );
        })()}
      </div>

      <div className="map-list">
        <div style={{fontSize:11, fontWeight:600, letterSpacing:"0.08em", textTransform:"uppercase", color:"var(--ink-500)", marginBottom:10}}>{MAP_PINS.length} pickup points</div>
        <div className="map-list-scroll">
          {MAP_PINS.map(p => (
            <div key={p.id} className={`map-list-item ${active === p.id ? "is-active" : ""}`} onClick={() => setActive(p.id)}>
              <div className={`map-list-dot ${p.featured ? "featured" : ""} ${active === p.id ? "active" : ""}`}></div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontWeight:600, fontSize:13, lineHeight:1.2}}>{p.name}</div>
                <div style={{fontSize:11, color:"var(--ink-500)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{p.sub}</div>
              </div>
              {p.featured && <span className="map-list-badge">Branch</span>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.PickupMap = PickupMap;