/* AtollMap — stylized atoll chain. Hover/click to filter.
   Maldives: 20 admin atolls north→south. We draw organic blobs on a vertical SVG. */

const ATOLLS = [
  { id: 'HA',  name: 'Haa Alif',     side: 'L', y: 60,  size: 38, count: 142, hero: 'Ihavandhippolhu' },
  { id: 'HDh', name: 'Haa Dhaalu',   side: 'R', y: 100, size: 36, count: 168, hero: 'Hanimaadhoo' },
  { id: 'Sh',  name: 'Shaviyani',    side: 'L', y: 145, size: 34, count: 98,  hero: 'Funadhoo' },
  { id: 'N',   name: 'Noonu',        side: 'R', y: 195, size: 40, count: 211, hero: 'Manadhoo' },
  { id: 'R',   name: 'Raa',          side: 'L', y: 245, size: 42, count: 287, hero: 'Ifuru' },
  { id: 'B',   name: 'Baa',          side: 'R', y: 295, size: 44, count: 312, hero: 'Hanifaru Bay', highlight: true },
  { id: 'Lh',  name: 'Lhaviyani',    side: 'L', y: 340, size: 32, count: 124, hero: 'Naifaru' },
  { id: 'K',   name: "Kaafu · Malé", side: 'R', y: 390, size: 50, count: 524, hero: 'Malé · Hulhumalé', capital: true },
  { id: 'AA',  name: 'Alif Alif',    side: 'L', y: 440, size: 38, count: 198, hero: 'Rasdhoo · Mathiveri' },
  { id: 'ADh', name: 'Alif Dhaal',   side: 'R', y: 485, size: 40, count: 246, hero: 'Maamigili · Dhigurah' },
  { id: 'V',   name: 'Vaavu',        side: 'L', y: 530, size: 28, count: 67,  hero: 'Felidhoo' },
  { id: 'M',   name: 'Meemu',        side: 'R', y: 575, size: 30, count: 81,  hero: 'Muli' },
  { id: 'F',   name: 'Faafu',        side: 'L', y: 615, size: 26, count: 54,  hero: 'Magoodhoo' },
  { id: 'Dh',  name: 'Dhaalu',       side: 'R', y: 655, size: 30, count: 72,  hero: 'Kudahuvadhoo' },
  { id: 'Th',  name: 'Thaa',         side: 'L', y: 700, size: 32, count: 88,  hero: 'Veymandoo' },
  { id: 'L',   name: 'Laamu',        side: 'R', y: 745, size: 38, count: 142, hero: 'Gan · Yin Yang break' },
  { id: 'GA',  name: 'Gaafu Alif',   side: 'L', y: 800, size: 36, count: 119, hero: 'Villingili' },
  { id: 'GDh', name: 'Gaafu Dhaalu', side: 'R', y: 845, size: 38, count: 134, hero: 'Thinadhoo · Thudu kunaa' },
  { id: 'Gn',  name: 'Gnaviyani',    side: 'L', y: 895, size: 22, count: 42,  hero: 'Fuvahmulah' },
  { id: 'S',   name: 'Seenu · Addu', side: 'R', y: 945, size: 44, count: 218, hero: 'Hithadhoo · Gan' },
];

const SVG_WIDTH = 360;
const SVG_HEIGHT = 1010;
const CENTER = SVG_WIDTH / 2;

// Random-but-deterministic blob generator (uses atoll id)
function blobPath(cx, cy, r, seed) {
  const points = 8;
  let path = '';
  let s = 0;
  for (let i = 0; i < seed.length; i++) s += seed.charCodeAt(i);
  for (let i = 0; i < points; i++) {
    const angle = (i / points) * Math.PI * 2;
    const wobble = 0.6 + ((s * (i+1)) % 100) / 100 * 0.6;
    const x = cx + Math.cos(angle) * r * wobble;
    const y = cy + Math.sin(angle) * r * wobble * 0.85;
    path += i === 0 ? `M ${x.toFixed(1)} ${y.toFixed(1)}` : ` L ${x.toFixed(1)} ${y.toFixed(1)}`;
  }
  return path + ' Z';
}

const mapStyles = {
  outer: {
    display: 'grid',
    gridTemplateColumns: '1fr 380px',
    gap: 48,
    background: 'var(--lagoon-deep)',
    borderRadius: 24,
    padding: '40px 48px',
    color: 'var(--paper)',
    position: 'relative',
    overflow: 'hidden',
  },
  copy: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 540 },
  kicker: {
    fontFamily: 'var(--font-mono)', fontSize: 11,
    letterSpacing: '0.16em', textTransform: 'uppercase',
    color: 'var(--shallow)',
  },
  heading: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(36px, 4vw, 48px)',
    fontWeight: 700,
    lineHeight: 1.05,
    letterSpacing: '-0.02em',
    color: 'var(--paper)',
    margin: '12px 0 16px',
    textWrap: 'balance',
    fontVariationSettings: "'opsz' 144, 'SOFT' 50",
  },
  dek: {
    fontSize: 16, lineHeight: 1.55,
    color: 'var(--shallow-soft)',
    maxWidth: 460,
    textWrap: 'pretty',
  },
  panel: {
    background: 'rgba(255, 255, 255, 0.04)',
    border: '1px solid rgba(127, 183, 181, 0.2)',
    borderRadius: 16,
    padding: 24,
    marginTop: 24,
  },
  panelLabel: {
    fontFamily: 'var(--font-mono)', fontSize: 10,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'var(--shallow)',
    marginBottom: 8,
  },
  panelAtoll: {
    fontFamily: 'var(--font-display)',
    fontSize: 32, fontWeight: 700,
    color: 'var(--paper)',
    margin: '0 0 4px 0',
    letterSpacing: '-0.02em',
    fontVariationSettings: "'opsz' 144, 'SOFT' 50",
  },
  panelHero: { fontSize: 14, color: 'var(--shallow-soft)', marginBottom: 16 },
  panelStats: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 16,
    paddingTop: 16,
    borderTop: '1px solid rgba(127, 183, 181, 0.18)',
  },
  panelStat: { display: 'flex', flexDirection: 'column', gap: 4 },
  panelStatNum: {
    fontFamily: 'var(--font-display)',
    fontSize: 24, fontWeight: 700,
    color: 'var(--paper)',
    letterSpacing: '-0.01em',
    fontVariationSettings: "'opsz' 24",
  },
  panelStatLabel: {
    fontFamily: 'var(--font-mono)', fontSize: 10,
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: 'var(--shallow)',
  },
  svg: { width: '100%', height: 'auto', maxHeight: 600 },
  cta: { marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--coral)', fontWeight: 600, fontSize: 14 },
};

function AtollMap() {
  const [hovered, setHovered] = React.useState('B');
  const current = ATOLLS.find(a => a.id === hovered) || ATOLLS[5];
  return (
    <section style={mapStyles.outer} data-screen-label="Atoll Map">
      <div style={mapStyles.copy}>
        <div>
          <span style={mapStyles.kicker}>The Atlas — 26 atolls, one country</span>
          <h2 style={mapStyles.heading}>Browse Maldives the way it actually exists.</h2>
          <p style={mapStyles.dek}>
            Every listing on Malzive is geocoded to its atoll. Hover the chain to preview;
            click an atoll to filter the entire marketplace — stays, charters, hedhikaa, lacquerware,
            home bakers — to what reaches you on a real timeline.
          </p>
        </div>

        <div style={mapStyles.panel}>
          <div style={mapStyles.panelLabel}>Currently viewing</div>
          <h3 style={mapStyles.panelAtoll}>{current.name}</h3>
          <p style={mapStyles.panelHero}>Hero: {current.hero}</p>
          <div style={mapStyles.panelStats}>
            <div style={mapStyles.panelStat}>
              <span style={mapStyles.panelStatNum}>{current.count}</span>
              <span style={mapStyles.panelStatLabel}>Listings</span>
            </div>
            <div style={mapStyles.panelStat}>
              <span style={mapStyles.panelStatNum}>
                {current.id === 'K' ? '15min' : current.id === 'B' ? '35min' : current.id === 'S' ? '90min' : current.id === 'HA' ? '70min' : '45min'}
              </span>
              <span style={mapStyles.panelStatLabel}>From Malé</span>
            </div>
          </div>
          <a href={`prototype-browse.html?atoll=${current.id}`} style={mapStyles.cta}>
            Open {current.id} listings <Icon name="arrowUpRight" size={14}/>
          </a>
        </div>
      </div>

      <svg viewBox={`0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`} style={mapStyles.svg} aria-label="Maldives atolls">
        {/* Connecting reef line */}
        <path
          d={`M ${CENTER} 30 Q ${CENTER + 30} 250, ${CENTER} 500 Q ${CENTER - 40} 750, ${CENTER} 990`}
          fill="none" stroke="rgba(127, 183, 181, 0.18)" strokeWidth="1" strokeDasharray="2 4"
        />
        {/* Compass */}
        <g transform={`translate(${SVG_WIDTH - 40} 30)`}>
          <text fontFamily="var(--font-mono)" fontSize="10" fill="var(--shallow)" letterSpacing="0.14em" textAnchor="middle">N</text>
          <line x1="0" y1="6" x2="0" y2="22" stroke="rgba(127, 183, 181, 0.4)" strokeWidth="1"/>
        </g>
        {/* Equator marker */}
        <g>
          <line x1="20" y1="888" x2={SVG_WIDTH - 20} y2="888" stroke="rgba(226, 107, 63, 0.3)" strokeWidth="1" strokeDasharray="4 4"/>
          <text x={SVG_WIDTH - 22} y="884" fontFamily="var(--font-mono)" fontSize="9" fill="var(--coral-soft)" letterSpacing="0.14em" textAnchor="end">EQUATOR · 0°</text>
        </g>

        {ATOLLS.map(a => {
          const cx = a.side === 'L' ? CENTER - 60 + (Math.random() * 0) : CENTER + 50;
          const fixed_cx = a.side === 'L'
            ? CENTER - 25 - (a.size * 0.4)
            : CENTER + 25 + (a.size * 0.4);
          const isHover = hovered === a.id;
          const isCapital = a.capital;
          return (
            <g
              key={a.id}
              onMouseEnter={() => setHovered(a.id)}
              onClick={() => window.location.href = `prototype-browse.html?atoll=${a.id}`}
              style={{ cursor: 'pointer' }}
            >
              <path
                d={blobPath(fixed_cx, a.y, a.size / 2, a.id + a.name)}
                fill={isHover ? 'var(--coral)' : isCapital ? 'var(--shallow)' : 'rgba(127, 183, 181, 0.45)'}
                stroke={isHover ? 'var(--coral)' : 'rgba(127, 183, 181, 0.7)'}
                strokeWidth="1"
                style={{ transition: 'fill 200ms' }}
              />
              {/* Label */}
              <text
                x={a.side === 'L' ? fixed_cx - a.size / 2 - 8 : fixed_cx + a.size / 2 + 8}
                y={a.y + 3}
                fontFamily="var(--font-mono)"
                fontSize={isCapital ? 12 : 10}
                fill={isHover ? 'var(--coral-soft)' : isCapital ? 'var(--paper)' : 'var(--shallow-soft)'}
                fontWeight={isCapital ? 700 : 500}
                letterSpacing="0.1em"
                textAnchor={a.side === 'L' ? 'end' : 'start'}
                style={{ pointerEvents: 'none', textTransform: 'uppercase' }}
              >
                {a.id}
              </text>
              {/* Long name on hover */}
              {isHover && (
                <text
                  x={a.side === 'L' ? fixed_cx - a.size / 2 - 8 : fixed_cx + a.size / 2 + 8}
                  y={a.y + 16}
                  fontFamily="var(--font-ui)"
                  fontSize="11"
                  fill="var(--paper)"
                  fontWeight="500"
                  textAnchor={a.side === 'L' ? 'end' : 'start'}
                  style={{ pointerEvents: 'none' }}
                >
                  {a.name.replace(/^[A-Z]+ · /, '')}
                </text>
              )}
            </g>
          );
        })}
      </svg>
    </section>
  );
}

Object.assign(window, { AtollMap, ATOLLS });