function NeighborhoodTab({ deal, update }) {
  const mapRef = React.useRef(null);
  const mapObj = React.useRef(null);
  const n = deal.neighborhood || {};
  const p = deal.property;
  const [loading, setLoading] = React.useState(false);
  const [driveTo, setDriveTo] = React.useState('Downtown Atlanta, GA');
  const hasLatLon = p.lat && p.lon;
  const googleKey = getApiKey('google');
  const svUrl = hasLatLon ? streetViewEmbedUrl(p.lat, p.lon) : '';

  // Mount / update Leaflet map
  React.useEffect(() => {
    if (!hasLatLon || !window.L || !mapRef.current) return;
    if (!mapObj.current) {
      mapObj.current = window.L.map(mapRef.current, { scrollWheelZoom: false, attributionControl: false }).setView([p.lat, p.lon], 15);
      window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(mapObj.current);
      mapObj.current.__marker = window.L.marker([p.lat, p.lon]).addTo(mapObj.current);
    } else {
      mapObj.current.setView([p.lat, p.lon], 15);
      mapObj.current.__marker.setLatLng([p.lat, p.lon]);
    }
    setTimeout(() => mapObj.current && mapObj.current.invalidateSize(), 200);
  }, [p.lat, p.lon]);

  const analyze = async () => {
    setLoading(true);
    let lat = p.lat, lon = p.lon;
    const addr = [p.address, p.city, p.state, p.zip].filter(Boolean).join(', ');
    if (!lat) { const g = await geocode(addr); if (g.ok) { lat = g.lat; lon = g.lon; update({ property: { ...p, lat, lon } }); } }
    const patch = { ...n, lat, lon };
    const [flood, drive] = await Promise.all([
      floodZone(lat, lon),
      driveTime(lat, lon, driveTo),
    ]);
    if (flood.ok) { patch.floodZone = flood.zone; patch.floodSub = flood.subtype; }
    if (drive.ok) { patch.drives = [{ to: driveTo, minutes: drive.minutes, miles: drive.miles }, ...(n.drives || []).filter((d) => d.to !== driveTo)].slice(0, 5); }
    update({ neighborhood: patch });
    setLoading(false);
  };

  const addDrive = async () => {
    if (!driveTo.trim() || !p.lat) return;
    setLoading(true);
    const d = await driveTime(p.lat, p.lon, driveTo);
    if (d.ok) update({ neighborhood: { ...n, drives: [{ to: driveTo, minutes: d.minutes, miles: d.miles }, ...(n.drives || []).filter((x) => x.to !== driveTo)].slice(0, 5) } });
    setLoading(false);
  };

  const floodRisk = (z) => {
    if (!z) return { t: '—', c: 'sample' };
    if (/^(A|V)/.test(z)) return { t: 'High risk', c: 'warn-pill' };
    if (z === 'X' || /X/.test(z)) return { t: 'Minimal risk', c: 'live' };
    return { t: z, c: 'sample' };
  };
  const fr = floodRisk(n.floodZone);

  const KeyGate = ({ name, keyId, children }) => {
    const has = !!getApiKey(keyId);
    if (has) return children;
    return (
      <div className="gate">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
        <div>Add a <b>{name}</b> API key in <b>Settings</b> to enable live {name} data.</div>
      </div>
    );
  };

  return (
    <div>
      <div className="comps-head">
        <div>
          <h2 className="tab-title">Neighborhood &amp; Location</h2>
          <div className="tab-desc">{hasLatLon ? p.address + ', ' + p.city + ', ' + p.state : 'Run Auto-fill on the Summary tab, or analyze below.'}</div>
        </div>
        <button className="btn primary" onClick={analyze} disabled={loading}>
          {loading ? <span className="spin"></span> : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg>}
          {loading ? 'Analyzing…' : 'Analyze location'}
        </button>
      </div>

      <div className="nb-grid">
        <div className="card nb-map-card">
          <div className="card-head"><h3>Map</h3><span className="src-pill live">OpenStreetMap</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            {hasLatLon ? <div ref={mapRef} className="nb-map"></div>
              : <div className="nb-empty">Analyze a location to load the interactive map.</div>}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Street View</h3><span className={'src-pill ' + (googleKey ? 'live' : 'sample')}>{googleKey ? 'Google' : 'Needs key'}</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            {svUrl ? <iframe title="Street View" className="nb-sv" src={svUrl} loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen></iframe>
              : <div className="nb-empty">{hasLatLon ? <KeyGate name="Google Maps" keyId="google"><span /></KeyGate> : 'Analyze a location first.'}</div>}
          </div>
        </div>
      </div>

      <div className="nb-stats">
        <div className="card nb-stat">
          <div className="nb-stat-h">Flood Zone <span className={'src-pill ' + fr.c}>{fr.t}</span></div>
          <div className="nb-stat-v">{n.floodZone || '—'}</div>
          <div className="nb-stat-s">{n.floodSub || 'FEMA National Flood Hazard Layer'}</div>
        </div>
        <div className="card nb-stat">
          <div className="nb-stat-h">Walk Score <span className="src-pill sample">Needs key</span></div>
          <KeyGate name="Walk Score" keyId="walkscore"><div className="nb-stat-v">{n.walkScore || '—'}</div></KeyGate>
        </div>
        <div className="card nb-stat">
          <div className="nb-stat-h">Schools <span className="src-pill sample">Needs key</span></div>
          <KeyGate name="GreatSchools" keyId="greatschools"><div className="nb-stat-v">{(n.schools && n.schools.length) || '—'}</div></KeyGate>
        </div>
        <div className="card nb-stat">
          <div className="nb-stat-h">Crime Index <span className="src-pill sample">Needs key</span></div>
          <KeyGate name="crime data" keyId="walkscore"><div className="nb-stat-v">{n.crime || '—'}</div></KeyGate>
        </div>
      </div>

      <div className="card" style={{ marginTop: 16 }}>
        <div className="card-head"><h3>Drive Times</h3><span className="src-pill live">LocationIQ</span></div>
        <div className="card-body">
          <div className="drive-add">
            <input className="set-input" value={driveTo} onChange={(e) => setDriveTo(e.target.value)} placeholder="Employer, downtown, airport…" onKeyDown={(e) => e.key === 'Enter' && addDrive()} />
            <button className="btn" onClick={addDrive} disabled={loading || !p.lat}>Add</button>
          </div>
          {(n.drives && n.drives.length) ? (
            <div className="drive-list">
              {n.drives.map((d, i) => (
                <div className="drive-item" key={i}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 17h14M6 17l1.5-5h9L18 17M7 12l1-4h8l1 4" /><circle cx="7.5" cy="17.5" r="1.5" /><circle cx="16.5" cy="17.5" r="1.5" /></svg>
                  <span className="dr-to">{d.to}</span>
                  <span className="dr-time">{d.minutes} min</span>
                  <span className="dr-mi">{d.miles} mi</span>
                </div>
              ))}
            </div>
          ) : <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>Analyze a location, then add destinations to compute live drive times.</div>}
        </div>
      </div>

      <AIMarketAnalysis deal={deal} />

      <div className="card" style={{ marginTop: 16 }}>
        <div className="card-head"><h3>HOA</h3></div><div className="card-body">
          <div className="field-stack">
            <div className="fs-row"><label>HOA dues<small>No public API — enter manually; flows into Holding Costs</small></label><MoneyInput value={deal.holding.hoaMonthly} onChange={(v) => update({ holding: { ...deal.holding, hoaMonthly: v } })} /></div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.NeighborhoodTab = NeighborhoodTab;