// Hero variant: search-first (alternative to chat-first)
const { useState: useStateS } = React;

function HeroSearch() {
  const [zone, setZone] = useStateS('Luque');
  const [budget, setBudget] = useStateS(60);
  const [type, setType] = useStateS('Terreno');

  const results = [
    { id: 1, name: 'Surubi\'í · Lote 42', price: 58400, sqm: 121, match: 96 },
    { id: 2, name: 'Laguna Grande · Lote 08', price: 49000, sqm: 108, match: 89 },
    { id: 3, name: 'San Bernardino · Lote 17', price: 72000, sqm: 152, match: 78 },
  ];

  return (
    <div className="prop-card" style={{ padding: 0 }}>
      <div style={{ padding: '18px 20px', borderBottom: '1px solid var(--line-2)' }}>
        <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>
          Buscador inteligente
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {['Terreno', 'Casa', 'Departamento'].map(t => (
            <button
              key={t}
              onClick={() => setType(t)}
              style={{
                padding: '6px 12px', borderRadius: 999,
                border: '1px solid ' + (type === t ? 'var(--ink)' : 'var(--line)'),
                background: type === t ? 'var(--ink)' : 'transparent',
                color: type === t ? 'var(--bg)' : 'var(--ink-2)',
                fontSize: 13
              }}
            >{t}</button>
          ))}
        </div>
      </div>

      <div style={{ padding: '18px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, borderBottom: '1px solid var(--line-2)' }}>
        <div>
          <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>Zona</div>
          <input
            value={zone}
            onChange={e => setZone(e.target.value)}
            style={{
              width: '100%', padding: '8px 0', marginTop: 4,
              background: 'transparent', border: 0, borderBottom: '1px solid var(--line)',
              fontFamily: 'var(--f-display)', fontSize: 22, color: 'var(--ink)', outline: 'none'
            }}
          />
        </div>
        <div>
          <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>Presupuesto (USD k)</div>
          <div style={{ fontFamily: 'var(--f-display)', fontSize: 22, color: 'var(--ink)', padding: '8px 0', borderBottom: '1px solid var(--line)' }}>
            Hasta US$ {budget}k
          </div>
          <input
            type="range" min={20} max={200} value={budget}
            onChange={e => setBudget(+e.target.value)}
            style={{ width: '100%', marginTop: 8, accentColor: 'var(--accent)' }}
          />
        </div>
      </div>

      <div style={{ padding: '14px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          {results.length} coincidencias · ordenadas por IA
        </div>
        {results.map(r => (
          <div key={r.id} style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '10px 12px', border: '1px solid var(--line-2)', borderRadius: 10,
            background: 'var(--bg)'
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 8,
              background: 'repeating-linear-gradient(45deg, var(--bg-2) 0 4px, var(--line-2) 4px 5px)',
              border: '1px solid var(--line)', flexShrink: 0
            }}></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--f-display)', fontSize: 16, letterSpacing: '-0.01em' }}>{r.name}</div>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>
                US$ {r.price.toLocaleString()} · {r.sqm} USD/m²
              </div>
            </div>
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2
            }}>
              <div style={{ fontFamily: 'var(--f-display)', fontSize: 20, color: 'var(--accent)' }}>{r.match}</div>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>MATCH</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.HeroSearch = HeroSearch;