/* SearchBar.jsx — luxury floating search, mobile-first, connected to booking */

function SearchBar() {
  const today = new Date().toISOString().slice(0, 10);
  const inThreeDays = new Date(Date.now() + 3 * 86400000).toISOString().slice(0, 10);
  const inWeek = new Date(Date.now() + 7 * 86400000).toISOString().slice(0, 10);

  const [neighborhood, setNeighborhood] = React.useState('all');
  const [checkIn, setCheckIn] = React.useState(inThreeDays);
  const [checkOut, setCheckOut] = React.useState(inWeek);
  const [guests, setGuests] = React.useState(2);

  function handleSearch(e) {
    e.preventDefault();
    const params = new URLSearchParams({
      neighborhood, checkIn, checkOut, guests: String(guests),
    });
    window.location.href = `booking.html?${params.toString()}`;
  }

  return (
    <div className="container" style={{
      position: 'relative', zIndex: 5, marginTop: -36, marginBottom: 0,
    }}>
      <style>{`
        .sb-wrap {
          background: #fff;
          border-radius: 20px;
          border: 1px solid var(--line);
          padding: 10px;
          display: grid;
          grid-template-columns: 1fr;
          gap: 4px;
          box-shadow: 0 16px 48px rgba(15,42,66,0.10), 0 2px 8px rgba(15,42,66,0.04);
          transition: box-shadow 320ms var(--ease-novus), transform 320ms var(--ease-novus);
          max-width: 100%;
        }
        .sb-wrap:hover {
          box-shadow: 0 20px 56px rgba(15,42,66,0.14), 0 4px 12px rgba(15,42,66,0.06);
        }
        @media (min-width: 768px) {
          .sb-wrap {
            border-radius: 999px;
            grid-template-columns: minmax(0,1.2fr) 1px minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,0.9fr) auto;
            align-items: center;
            padding: 8px 8px 8px 0;
            gap: 0;
          }
        }
        .sb-field {
          display: flex;
          flex-direction: column;
          padding: 12px 18px;
          border-radius: 14px;
          cursor: pointer;
          transition: background 200ms var(--ease-novus);
          min-width: 0;
        }
        @media (min-width: 768px) {
          .sb-field { border-radius: 999px; padding: 10px 22px; }
        }
        .sb-field:hover, .sb-field:focus-within {
          background: var(--sand-50);
        }
        .sb-field-label {
          font-size: 10px; font-weight: 600;
          letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--ink-500);
          margin-bottom: 4px;
        }
        .sb-field-input {
          border: 0; outline: none; background: transparent;
          padding: 0;
          font-size: 14px;
          color: var(--navy-900);
          font-family: var(--font-text);
          width: 100%;
          cursor: pointer;
          min-height: 22px;
          appearance: none;
          -webkit-appearance: none;
        }
        .sb-divider {
          width: 100%;
          height: 1px;
          background: var(--line);
        }
        @media (min-width: 768px) {
          .sb-divider {
            width: 1px;
            height: 32px;
            justify-self: center;
          }
        }
        .sb-submit {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 14px;
          background: var(--navy-900);
          color: #fff;
          border: 0;
          border-radius: 14px;
          font-size: 14px;
          font-weight: 500;
          letter-spacing: 0.02em;
          cursor: pointer;
          transition: all 280ms var(--ease-novus);
          min-height: 52px;
          margin-top: 4px;
          font-family: var(--font-text);
        }
        @media (min-width: 768px) {
          .sb-submit {
            border-radius: 999px;
            padding: 14px 24px;
            margin: 0;
            min-height: 56px;
          }
        }
        .sb-submit:hover {
          background: var(--navy-700);
          transform: translateY(-1px);
          box-shadow: 0 8px 22px rgba(15,42,66,0.18);
        }
        .sb-submit:active { transform: translateY(0); }
      `}</style>

      <form className="sb-wrap fade-up" onSubmit={handleSearch}>
        <label className="sb-field">
          <span className="sb-field-label">Where</span>
          <select className="sb-field-input" value={neighborhood}
            onChange={e => setNeighborhood(e.target.value)}>
            <option value="all">Anywhere in Miami</option>
            <option value="Treasure Island">Treasure Island</option>
            <option value="Miami Beach">Miami Beach</option>
            <option value="Biscayne Bay">Biscayne Bay</option>
            <option value="Brickell">Brickell</option>
            <option value="Design District">Design District</option>
          </select>
        </label>
        <div className="sb-divider"></div>

        <label className="sb-field">
          <span className="sb-field-label">Check-in</span>
          <input type="date" className="sb-field-input" value={checkIn}
            min={today} onChange={e => setCheckIn(e.target.value)} />
        </label>
        <div className="sb-divider"></div>

        <label className="sb-field">
          <span className="sb-field-label">Check-out</span>
          <input type="date" className="sb-field-input" value={checkOut}
            min={checkIn} onChange={e => setCheckOut(e.target.value)} />
        </label>
        <div className="sb-divider"></div>

        <label className="sb-field">
          <span className="sb-field-label">Guests</span>
          <select className="sb-field-input" value={guests}
            onChange={e => setGuests(parseInt(e.target.value))}>
            {[1,2,3,4,5,6,7,8,9,10,11,12].map(n => (
              <option key={n} value={n}>{n} guest{n !== 1 ? 's' : ''}</option>
            ))}
          </select>
        </label>

        <button type="submit" className="sb-submit">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>
          <span>Search</span>
        </button>
      </form>
    </div>
  );
}

window.SearchBar = SearchBar;