// Interactive Markets Map — FL / GA / SC coastal corridor
const Markets = () => {
  const [activeRegion, setActiveRegion] = React.useState('naples');

  const regions = {
    naples: {
      name: 'Naples · Marco Island',
      state: 'Florida',
      office: 'Regional Office',
      coords: '26.14°N · 81.79°W',
      projects: 4,
      markets: ['Naples', 'Marco Island', 'Bonita Springs', 'Fort Myers Beach'],
      blurb: 'Southwest Florida resort corridor. Hurricane-rated coastal envelope, CCCL permitting, luxury brand PIPs.',
    },
    sarasota: {
      name: 'Sarasota · Tampa Bay',
      state: 'Florida',
      coords: '27.34°N · 82.53°W',
      projects: 3,
      markets: ['Sarasota', 'Siesta Key', 'Longboat Key', 'St. Pete Beach', 'Clearwater'],
      blurb: 'Gulf Coast barrier-island boutique market. V-zone foundations, beach-club buildouts.',
    },
    miami: {
      name: 'Miami · Keys',
      state: 'Florida',
      coords: '25.76°N · 80.19°W',
      projects: 2,
      markets: ['Miami Beach', 'Key Largo', 'Islamorada', 'Key West'],
      blurb: 'Flag-brand high-rise PIPs, overwater permitting, seagrass mitigation, resort repositioning.',
    },
    savannah: {
      name: 'Savannah · Golden Isles',
      state: 'Georgia',
      office: 'Headquarters',
      coords: '32.08°N · 81.09°W',
      projects: 5,
      markets: ['Savannah', 'Tybee Island', 'St. Simons', 'Jekyll Island', 'Sea Island'],
      blurb: 'Home office since 2006. Historic-district expertise, coastal permitting depth, marina complexes.',
    },
    hiltonhead: {
      name: 'Hilton Head · Kiawah',
      state: 'South Carolina',
      office: 'Regional Office',
      coords: '32.22°N · 80.75°W',
      projects: 6,
      markets: ['Hilton Head', 'Bluffton', 'Kiawah Island', 'Seabrook Island'],
      blurb: 'Private resort communities, gated-club amenity buildouts, soft-brand conversions.',
    },
    charleston: {
      name: 'Charleston',
      state: 'South Carolina',
      coords: '32.78°N · 79.93°W',
      projects: 4,
      markets: ['Charleston Historic District', 'Isle of Palms', 'Sullivan\'s Island', 'Folly Beach'],
      blurb: 'Historic-preservation PIPs, boutique hotel renovations, Battery-proximate permitting.',
    },
  };

  const r = regions[activeRegion];

  // Approximate positions on a stylized SE-coast map (% x, % y)
  const pins = {
    savannah:    { x: 62, y: 46, label: 'Savannah, GA' },
    hiltonhead:  { x: 64, y: 50, label: 'Hilton Head, SC' },
    charleston:  { x: 66, y: 40, label: 'Charleston, SC' },
    naples:      { x: 53, y: 87, label: 'Naples, FL' },
    sarasota:    { x: 50, y: 78, label: 'Sarasota, FL' },
    miami:       { x: 66, y: 89, label: 'Miami / Keys, FL' },
  };

  return (
    <section id="markets" style={{ background: 'var(--bone-100)', padding: 'var(--sp-10) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--page-pad-x)' }}>
        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'end', marginBottom: 96, paddingBottom: 32, borderBottom: '1px solid rgba(10,22,40,0.15)' }}>
          <div className="eyebrow">── (05) · Markets · Southeast Coastal Corridor</div>
          <h2 style={{ fontSize: 'var(--fs-4xl)', lineHeight: 1, letterSpacing: '-0.025em' }}>
            Where the work<br /><em style={{ fontStyle: 'italic', color: 'var(--brass-500)' }}>happens.</em>
          </h2>
        </div>

        <div className="mkt-grid" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'start' }}>
          {/* Map */}
          <div className="mkt-map" style={{ position: 'relative', aspectRatio: '1 / 1.1', background: 'var(--navy-900)', overflow: 'hidden' }}>
            {/* Stylized coastline SVG */}
            <svg viewBox="0 0 100 110" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} preserveAspectRatio="none">
              <defs>
                <pattern id="grid" width="4" height="4" patternUnits="userSpaceOnUse">
                  <path d="M 4 0 L 0 0 0 4" fill="none" stroke="rgba(242,237,228,0.04)" strokeWidth="0.2"/>
                </pattern>
              </defs>
              <rect width="100" height="110" fill="url(#grid)" />

              {/* Ocean line — Atlantic + Gulf */}
              <path
                d="M 72 30 Q 68 38, 64 44 Q 62 50, 60 58 Q 58 66, 58 74 Q 60 82, 64 88 Q 68 94, 72 98 L 72 100 L 40 100 L 40 94 Q 42 88, 44 82 Q 46 75, 48 68 Q 46 60, 44 52 Q 46 44, 50 38 L 50 30 Z"
                fill="rgba(107,139,168,0.08)"
                stroke="rgba(139,165,191,0.4)"
                strokeWidth="0.3"
              />

              {/* State lines */}
              <line x1="40" y1="68" x2="72" y2="68" stroke="rgba(242,237,228,0.12)" strokeWidth="0.2" strokeDasharray="0.6 0.6" />
              <line x1="40" y1="44" x2="72" y2="44" stroke="rgba(242,237,228,0.12)" strokeWidth="0.2" strokeDasharray="0.6 0.6" />

              {/* State labels */}
              <text x="46" y="36" fill="rgba(242,237,228,0.3)" fontSize="2.2" fontFamily="monospace" letterSpacing="0.3">SC</text>
              <text x="46" y="58" fill="rgba(242,237,228,0.3)" fontSize="2.2" fontFamily="monospace" letterSpacing="0.3">GA</text>
              <text x="46" y="82" fill="rgba(242,237,228,0.3)" fontSize="2.2" fontFamily="monospace" letterSpacing="0.3">FL</text>
            </svg>

            {/* Pins */}
            {Object.entries(pins).map(([key, p]) => {
              const active = activeRegion === key;
              return (
                <button
                  key={key}
                  onMouseEnter={() => setActiveRegion(key)}
                  onClick={() => setActiveRegion(key)}
                  style={{
                    position: 'absolute',
                    left: `${p.x}%`,
                    top: `${p.y}%`,
                    transform: 'translate(-50%, -50%)',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 10,
                  }}
                >
                  <span
                    style={{
                      display: 'block',
                      width: active ? 16 : 9,
                      height: active ? 16 : 9,
                      borderRadius: '50%',
                      background: active ? 'var(--brass-500)' : 'var(--bone-100)',
                      boxShadow: active ? '0 0 0 6px rgba(184,151,90,0.25)' : '0 0 0 2px rgba(242,237,228,0.2)',
                      transition: 'all 0.3s',
                    }}
                  />
                  <span
                    className="mono"
                    style={{
                      fontSize: 10,
                      color: active ? 'var(--brass-400)' : 'rgba(242,237,228,0.7)',
                      letterSpacing: '0.1em',
                      whiteSpace: 'nowrap',
                      transition: 'color 0.3s',
                    }}
                  >
                    {p.label}
                  </span>
                </button>
              );
            })}

            {/* Map corner annotations */}
            <div style={{ position: 'absolute', top: 20, left: 24, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(242,237,228,0.5)', letterSpacing: '0.12em' }}>
              SE COASTAL CORRIDOR<br/>
              <span style={{ opacity: 0.6 }}>1,420 mi of Atlantic + Gulf shoreline</span>
            </div>
            <div style={{ position: 'absolute', bottom: 20, right: 24, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(242,237,228,0.5)', letterSpacing: '0.12em', textAlign: 'right' }}>
              24 active markets<br/>
              <span style={{ opacity: 0.6 }}>3 offices · FL · GA · SC</span>
            </div>
          </div>

          {/* Region detail */}
          <div className="mkt-detail" style={{ position: 'sticky', top: 120 }}>
            <div className="mono" style={{ color: 'var(--brass-600)', fontSize: 10, marginBottom: 12 }}>
              {r.state} {r.office && `· ${r.office}`}
            </div>
            <h3 style={{ fontSize: 'var(--fs-3xl)', letterSpacing: '-0.02em', marginBottom: 16 }}>
              {r.name}
            </h3>
            <div className="mono" style={{ color: 'var(--ink-500)', fontSize: 11, marginBottom: 32 }}>
              {r.coords}
            </div>

            <p style={{ fontSize: 'var(--fs-lg)', color: 'var(--ink-700)', lineHeight: 1.55, marginBottom: 40, maxWidth: '44ch' }}>
              {r.blurb}
            </p>

            <div className="mkt-stats" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, paddingTop: 24, borderTop: '1px solid rgba(10,22,40,0.15)' }}>
              <div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-500)', marginBottom: 8 }}>Active projects</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-3xl)', lineHeight: 1 }}>
                  {String(r.projects).padStart(2, '0')}
                </div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-500)', marginBottom: 8 }}>Sub-markets</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {r.markets.map(m => (
                    <span key={m} style={{ fontSize: 12, padding: '4px 8px', border: '1px solid rgba(10,22,40,0.18)', color: 'var(--ink-700)' }}>
                      {m}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Markets = Markets;