// 04 · Search Results

function ScreenSearch({ onNav }) {
  const C = window.V4;
  const [q, setQ] = React.useState('Diljit');
  const allEvents = window.DESI_EVENTS;
  const results = q.trim()
    ? allEvents.filter(e => (e.artist + ' ' + e.title + ' ' + e.city).toLowerCase().includes(q.toLowerCase()))
    : [];

  const recent = ['Arijit Singh', 'Holi Berlin', 'Garba Frankfurt', 'Karan Aujla'];
  const trending = ['Diljit Dosanjh', 'Shreya Ghoshal', 'AP Dhillon', 'Bollywood night', 'Sufi qawwali'];
  const artists = ['Diljit Dosanjh', 'Arijit Singh', 'Shreya Ghoshal', 'Sunidhi Chauhan'];
  const venues = ['Mercedes-Benz Arena, Berlin', 'Festhalle Frankfurt', 'Olympiahalle Munich'];

  return (
    <div data-screen-label="04 Search" style={{ background: C.bg, minHeight: '100vh' }}>
      <V4TopNav onNav={onNav} transparent={false}/>

      {/* Big search hero */}
      <div style={{ background: C.plumDeep, color: '#fff', padding: '60px 0 50px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 60% 70% at 30% 50%, rgba(229,69,88,0.15), transparent 60%)',
        }}/>
        <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', padding: '0 40px' }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11.5,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: C.pink, marginBottom: 14, fontWeight: 600,
          }}>Search Desipass</div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 400,
            letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 32px',
          }}>
            Find your <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.pink }}>next show.</em>
          </h1>
          <div style={{
            display: 'flex', alignItems: 'center', height: 72, padding: '0 6px 0 24px',
            background: '#fff', borderRadius: 99, color: C.ink,
            boxShadow: '0 30px 80px -20px rgba(0,0,0,0.5)',
          }}>
            <V4Icon name="search" size={20}/>
            <input
              autoFocus value={q} onChange={e => setQ(e.target.value)}
              placeholder="Search artists, venues, cities, dates…"
              style={{
                flex: 1, border: 0, background: 'transparent', outline: 'none',
                padding: '0 18px', fontSize: 18, color: C.ink,
              }}
            />
            {q && <button onClick={() => setQ('')} style={{
              width: 32, height: 32, borderRadius: 99, border: 0,
              background: C.bgAlt, marginRight: 8, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><V4Icon name="close" size={14}/></button>}
            <button style={{
              height: 56, padding: '0 28px', borderRadius: 99,
              background: C.red, color: '#fff', border: 0,
              fontSize: 15, fontWeight: 600, cursor: 'pointer',
            }}>Search</button>
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 22, fontSize: 12.5, color: 'rgba(255,255,255,0.6)' }}>
            <span>Tip:</span>
            {['"Diljit Berlin"', '"this weekend"', '"under €50"', '"Garba near me"'].map(t => (
              <button key={t} onClick={() => setQ(t.replace(/"/g, ''))} style={{
                background: 'transparent', border: 0, color: 'rgba(255,255,255,0.85)',
                fontFamily: 'var(--font-mono)', fontSize: 12, cursor: 'pointer',
              }}>{t}</button>
            ))}
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '50px 40px 80px' }}>
        {q.trim() === '' ? (
          // Discovery state
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 50 }}>
            <SearchPanel title="Recent searches">
              {recent.map(r => (
                <button key={r} onClick={() => setQ(r)} style={searchRow(C)}>
                  <V4Icon name="clock" size={14}/> <span>{r}</span>
                  <V4Icon name="arrowUR" size={13} style={{ marginLeft: 'auto', opacity: 0.4 }}/>
                </button>
              ))}
            </SearchPanel>
            <SearchPanel title="Trending searches">
              {trending.map(r => (
                <button key={r} onClick={() => setQ(r)} style={searchRow(C)}>
                  <V4Icon name="sparkle" size={14}/> <span>{r}</span>
                  <V4Icon name="arrowUR" size={13} style={{ marginLeft: 'auto', opacity: 0.4 }}/>
                </button>
              ))}
            </SearchPanel>
          </div>
        ) : results.length === 0 ? (
          // Zero state
          <div style={{
            padding: '80px 40px', textAlign: 'center',
            background: C.paper, borderRadius: 20, border: `1px solid ${C.line}`,
          }}>
            <div style={{ fontSize: 48, marginBottom: 16 }}>🔍</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 500, margin: '0 0 12px' }}>
              No matches for <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>"{q}"</em>
            </h2>
            <p style={{ fontSize: 15, color: C.ink2, maxWidth: 440, margin: '0 auto 28px' }}>
              Try a different artist, city or relax your dates. Or set an alert and we'll ping you when something fits.
            </p>
            <div style={{ display: 'inline-flex', gap: 10 }}>
              <button style={btnPrimary(C)}>Set alert for "{q}" <V4Icon name="arrow" size={13}/></button>
              <button style={btnGhost(C)} onClick={() => setQ('')}>Clear search</button>
            </div>
          </div>
        ) : (
          // Results
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, margin: 0 }}>
                {results.length} result{results.length===1?'':'s'} for <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>"{q}"</em>
              </h2>
              <button style={{
                background: 'none', border: 0, color: C.ink2, fontSize: 13,
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
              }}><V4Icon name="filter" size={14}/> Filters</button>
            </div>

            {/* Sectioned results */}
            <ResultsSection title="Events" count={results.length}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
                {results.map(e => <V4EventCard key={e.id} event={e} onNav={onNav}/>)}
              </div>
            </ResultsSection>

            <ResultsSection title="Artists" count={artists.length}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
                {artists.map(a => (
                  <div key={a} style={{
                    display: 'flex', alignItems: 'center', gap: 14, padding: 16,
                    background: '#fff', borderRadius: 14, border: `1px solid ${C.line}`,
                    cursor: 'pointer',
                  }}>
                    <div style={{
                      width: 56, height: 56, borderRadius: 99,
                      background: C.gradient,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      color: '#fff', fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500,
                    }}>{a.split(' ').map(w => w[0]).join('').slice(0,2)}</div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500 }}>{a}</div>
                      <div style={{ fontSize: 12, color: C.ink3, marginTop: 2 }}>3 upcoming · 12k followers</div>
                    </div>
                  </div>
                ))}
              </div>
            </ResultsSection>

            <ResultsSection title="Venues" count={venues.length}>
              {venues.map(v => (
                <div key={v} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '14px 18px', background: '#fff', borderRadius: 12,
                  border: `1px solid ${C.line}`, marginBottom: 10, cursor: 'pointer',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                    <V4Icon name="pin" size={18}/> <span style={{ fontWeight: 500 }}>{v}</span>
                  </div>
                  <span style={{ fontSize: 12, color: C.ink3 }}>4 upcoming events <V4Icon name="cheR" size={12}/></span>
                </div>
              ))}
            </ResultsSection>
          </>
        )}
      </div>

      <V4Footer/>
    </div>
  );
}

function SearchPanel({ title, children }) {
  const C = window.V4;
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: C.ink3, marginBottom: 14, fontWeight: 600,
      }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {children}
      </div>
    </div>
  );
}

function ResultsSection({ title, count, children }) {
  const C = window.V4;
  return (
    <div style={{ marginBottom: 56 }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 22,
        paddingBottom: 14, borderBottom: `1px solid ${C.line}`,
      }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, margin: 0 }}>{title}</h3>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: C.ink3 }}>{count}</span>
        <button style={{ marginLeft: 'auto', background: 'none', border: 0, color: C.red, fontSize: 12.5, fontWeight: 600, cursor: 'pointer' }}>See all <V4Icon name="arrow" size={11}/></button>
      </div>
      {children}
    </div>
  );
}

function searchRow(C) {
  return {
    width: '100%', display: 'flex', alignItems: 'center', gap: 12,
    padding: '14px 16px', background: '#fff', borderRadius: 10,
    border: `1px solid ${C.line}`, fontSize: 14, color: C.ink,
    cursor: 'pointer', textAlign: 'left',
  };
}
function btnPrimary(C) {
  return {
    height: 48, padding: '0 22px', borderRadius: 99, border: 0,
    background: C.ink, color: '#fff', fontSize: 14, fontWeight: 600,
    cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8,
  };
}
function btnGhost(C) {
  return {
    height: 48, padding: '0 22px', borderRadius: 99,
    background: 'transparent', color: C.ink, border: `1px solid ${C.line}`,
    fontSize: 14, fontWeight: 600, cursor: 'pointer',
  };
}