// Browse page — search filter bar + results grid.

const BrowsePage = () => {
  const [zip, setZip]     = React.useState('94610');
  const [size, setSize]   = React.useState('20 YD³');
  const [project, setProject] = React.useState('Any project');
  const [sort, setSort]   = React.useState('Rating');
  const [verified, setVerified] = React.useState(false);

  let results = [...HAULERS];
  if (verified) results = results.filter(h => h.verified);
  if (size !== 'Any size') results = results.filter(h => h.sizes.some(s => s.size === size));
  if (sort === 'Rating') results.sort((a,b) => b.rating - a.rating);
  if (sort === 'Price')  results.sort((a,b) => a.priceFrom - b.priceFrom);
  if (sort === 'Reviews') results.sort((a,b) => b.reviews - a.reviews);

  return (
    <div>
      {/* Header / search */}
      <section style={{ padding: 'clamp(48px, 6vw, 72px) clamp(24px, 5vw, 64px) 40px', position:'relative', overflow:'hidden' }}>
        <div aria-hidden style={{
          position:'absolute', inset:0,
          background:'radial-gradient(ellipse 800px 400px at center top, rgba(63,122,77,0.15) 0%, transparent 60%)',
          pointerEvents:'none',
        }}/>
        <div style={{ position:'relative', maxWidth: 1312, margin: '0 auto' }}>
          <div style={{ marginBottom: 20 }}>
            <CCTrustPill size="sm">Early access · Onboarding haulers now</CCTrustPill>
          </div>
          <h1 style={{
            font:'700 clamp(40px, 6vw, 72px)/1 Anton, Oswald, sans-serif',
            textTransform:'uppercase', letterSpacing:'-0.3px',
            color:'#fff', margin:0,
          }}>
            Browse{' '}
            <span style={{
              background:'linear-gradient(180deg,#9EE5A8,#7BC57F)',
              WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent',
            }}>local haulers.</span>
          </h1>
          <p style={{
            font:'450 17px/1.5 Inter, system-ui, sans-serif',
            color: CC_T_SECONDARY, marginTop: 18, maxWidth: 620,
          }}>Filter by container size, project type, and location. Pricing is transparent — what you see is what the operator charges, no broker markup.</p>

          <div className="cc-browse-search" style={{
            marginTop: 36, background: CC_CARD, border: `1px solid ${CC_BORDER}`,
            borderRadius: 20, padding: 20,
            display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr auto', gap: 14, alignItems: 'end',
            boxShadow: CC_SHADOW_RESTING,
          }}>
            <CCInput label="Location" value={zip} onChange={e=>setZip(e.target.value)}
              icon={CCIcon.pin({ size:18, color: CC_SAGE })} placeholder="ZIP or city"/>
            <CCSelect label="Container size" value={size} onChange={e=>setSize(e.target.value)}
              options={['Any size','10 YD³','15 YD³','20 YD³','30 YD³','40 YD³']}/>
            <CCSelect label="Project type" value={project} onChange={e=>setProject(e.target.value)}
              options={['Any project','Home cleanout','Renovation','Roofing','Construction','Commercial','Yard waste']}/>
            <div><CCButtonAmber arrow={false}>Search</CCButtonAmber></div>
          </div>
        </div>
      </section>

      {/* Results */}
      <section style={{ padding: '0 clamp(24px, 5vw, 64px) clamp(64px, 8vw, 96px)' }}>
        <div style={{ maxWidth: 1312, margin: '0 auto' }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            alignItems: 'center', marginBottom: 24, gap: 16, flexWrap: 'wrap',
          }}>
            <div style={{
              font: '600 12px Inter, system-ui, sans-serif',
              letterSpacing: 1.6, textTransform: 'uppercase', color: CC_T_TERTIARY,
            }}>{HAULERS.length === 0 ? 'Pre-launch · Directory coming soon' : `${results.length} haulers · Sorted by ${sort.toLowerCase()}`}</div>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
              <button onClick={() => setVerified(v => !v)}
                style={{
                  background: verified ? 'rgba(123,197,127,0.12)' : 'transparent',
                  border: `1px solid ${verified ? CC_SAGE_BORDER : CC_BORDER}`,
                  color: verified ? CC_SAGE : CC_T_SECONDARY,
                  borderRadius: 9999, padding: '8px 16px',
                  font: '600 12px Inter, system-ui, sans-serif',
                  letterSpacing: 0.4, cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                }}>
                {CCIcon.verified({ size: 14, color: verified ? CC_SAGE : CC_T_SECONDARY })}
                Verified only
              </button>
              <span style={{ color: CC_BORDER, margin: '0 4px' }}>·</span>
              {['Rating','Price','Reviews'].map((t) => (
                <button key={t} onClick={() => setSort(t)}
                  style={{
                    background: sort === t ? '#0F2620' : 'transparent',
                    border: `1px solid ${sort === t ? CC_SAGE_BORDER : CC_BORDER}`,
                    color: sort === t ? CC_SAGE : CC_T_SECONDARY,
                    borderRadius: 9999, padding: '8px 16px',
                    font: '600 12px Inter, system-ui, sans-serif', letterSpacing: 0.4, cursor: 'pointer',
                  }}>{t}</button>
              ))}
            </div>
          </div>

          {results.length > 0 ? (
            <div className="cc-browse-grid" style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
            }}>
              {results.map(h => <CompanyCard key={h.id} h={h} />)}
            </div>
          ) : HAULERS.length === 0 ? (
            // Pre-launch empty state — no haulers have been onboarded yet
            <div style={{
              background: CC_CARD, border: `1px solid ${CC_BORDER}`,
              borderRadius: 20, padding: 'clamp(48px, 7vw, 80px) clamp(24px, 4vw, 48px)',
              textAlign: 'center', boxShadow: CC_SHADOW_RESTING,
            }}>
              <div style={{
                width: 64, height: 64, borderRadius: 16, margin: '0 auto 24px',
                background: 'rgba(123,197,127,0.10)', border: `1px solid ${CC_SAGE_BORDER}`,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                color: CC_SAGE,
              }}>{CCIcon.truck({ size: 28, color: CC_SAGE })}</div>
              <h2 style={{
                font: '700 clamp(24px, 3vw, 32px)/1.15 Anton, Oswald, sans-serif',
                textTransform: 'uppercase', letterSpacing: '-0.2px',
                color: '#fff', margin: '0 0 12px',
              }}>The directory is being built.</h2>
              <p style={{
                font: '450 16px/1.6 Inter, system-ui, sans-serif',
                color: CC_T_SECONDARY, maxWidth: 560, margin: '0 auto 28px',
              }}>
                We're onboarding the first local haulers now — and while we do, every quote request is matched by hand. Submit yours and we'll contact licensed haulers in your area directly.
              </p>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                <CCButtonAmber href="/quote" size="md">Request a quote</CCButtonAmber>
                <CCButtonGhost href="/for-haulers" size="md">Are you a hauler?</CCButtonGhost>
              </div>
            </div>
          ) : (
            // Filters too strict — haulers exist, just not with these filters
            <div style={{
              textAlign: 'center', padding: 80, color: CC_T_SECONDARY,
              border: `1px dashed ${CC_BORDER}`, borderRadius: 20,
            }}>No haulers match your filters. Try loosening them.</div>
          )}
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { BrowsePage });