// Search/Browse, Math, Concierges pages
const SearchPage = ({ navigate }) => {
  const [proc, setProc] = React.useState('any');
  const [region, setRegion] = React.useState('all');
  const [budget, setBudget] = React.useState(15000);
  const [vibe, setVibe] = React.useState('any');
  const { destinations, clinics, procedures } = window.DTR_DATA;

  const filteredClinics = React.useMemo(() => {
    return clinics.filter(c => {
      const dest = destinations.find(d => d.id === c.destinationId);
      if (region !== 'all' && dest.country !== region) return false;
      if (proc !== 'any') {
        const procName = procedures.find(p => p.id === proc).name;
        const has = c.priceList.some(([n]) => n.toLowerCase().includes(procName.toLowerCase().split(' ')[0]));
        if (!has) return false;
      }
      return true;
    });
  }, [proc, region, budget, vibe]);

  return (
    <main className="page" style={{padding:'48px 40px 96px'}}>
      <div style={{marginBottom:32}}>
        <div className="num-eyebrow">Browse</div>
        <h1 style={{fontSize:64,letterSpacing:'-0.025em',lineHeight:1,margin:'10px 0 16px'}}>Find your trip.</h1>
        <p className="lead" style={{maxWidth:680,margin:0}}>Filter by procedure, region, budget and what you want to do when you're not in the chair.</p>
      </div>

      {/* Filter bar */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4, 1fr) auto',gap:0,border:'1px solid var(--ink)',marginBottom:32}}>
        {[
          ['Procedure', proc, setProc, [['any','Any procedure'],...procedures.map(p=>[p.id,p.name])]],
          ['Region', region, setRegion, [['all','Anywhere'],['Mexico','Mexico'],['Costa Rica','Costa Rica'],['Hungary','Hungary'],['Thailand','Thailand']]],
          ['Trip vibe', vibe, setVibe, [['any','Any'],['wine','Wine country'],['beach','Beach'],['city','City + culture'],['nature','Nature']]],
        ].map(([label, val, setter, opts], i) => (
          <div key={label} style={{padding:'14px 18px',borderRight:'1px solid var(--line)'}}>
            <div className="label">{label}</div>
            <select value={val} onChange={e=>setter(e.target.value)} style={{border:'none',background:'transparent',fontFamily:'var(--font-serif)',fontSize:18,padding:0,width:'100%',outline:'none'}}>
              {opts.map(([k,l]) => <option key={k} value={k}>{l}</option>)}
            </select>
          </div>
        ))}
        <div style={{padding:'14px 18px',borderRight:'1px solid var(--line)'}}>
          <div className="label">Total budget</div>
          <div style={{fontFamily:'var(--font-serif)',fontSize:18}}>${budget.toLocaleString()}</div>
          <input type="range" min="500" max="50000" step="500" value={budget} onChange={e=>setBudget(+e.target.value)} style={{width:'100%',marginTop:4}}/>
        </div>
        <button className="btn" style={{borderRadius:0,border:'none'}} onClick={()=>{}}>Search →</button>
      </div>

      {/* Results header */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:24,paddingBottom:14,borderBottom:'1px solid var(--ink)'}}>
        <h3 style={{margin:0,fontSize:22}}>{filteredClinics.length} clinics match</h3>
        <div style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--fg-3)'}}>Sort: Most reviewed · Best math · Distance</div>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:16}}>
        {filteredClinics.map(c => <ClinicCard key={c.id} c={c} navigate={navigate}/>)}
      </div>

      <div style={{marginTop:48,padding:'48px',background:'var(--bg-sunken)',border:'1px solid var(--line)'}}>
        <div className="num-eyebrow" style={{marginBottom:8}}>Don't see your destination?</div>
        <h3 style={{margin:'0 0 12px',fontSize:30}}>We're rolling out across the world.</h3>
        <p style={{maxWidth:540,fontSize:17,color:'var(--fg-2)',marginBottom:18}}>Los Algodones, Cartagena, Istanbul, Phuket and Medellín are next. Drop your email — we'll tell you when reviews go live.</p>
        <div style={{display:'flex',gap:8,maxWidth:480}}>
          <input className="input" placeholder="you@email.com"/>
          <button className="btn">Notify me →</button>
        </div>
      </div>
    </main>
  );
};

const MathPage = ({ navigate }) => {
  const { destinations, procedures } = window.DTR_DATA;
  const [procId, setProcId] = React.useState('all-on-4');
  const [destId, setDestId] = React.useState('bangkok');
  const [origin, setOrigin] = React.useState('San Diego, CA');
  const [travelers, setTravelers] = React.useState(2);
  const proc = procedures.find(p => p.id === procId);
  const dest = destinations.find(d => d.id === destId);

  return (
    <main className="page" style={{padding:'48px 40px 96px'}}>
      <div style={{marginBottom:36}}>
        <div className="num-eyebrow">The Math</div>
        <h1 style={{fontSize:72,letterSpacing:'-0.025em',lineHeight:0.98,margin:'10px 0 16px'}}>The receipts, side-by-side.</h1>
        <p className="lead" style={{maxWidth:680,margin:0}}>The same procedure in your hometown vs. the all-in cost of getting it done abroad — flight, hotel, food, the works.</p>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 2fr',gap:32}}>
        <div className="card" style={{padding:24,position:'sticky',top:120,alignSelf:'start'}}>
          <div className="num-eyebrow" style={{marginBottom:18}}>Configure</div>
          <div style={{marginBottom:18}}>
            <label className="label">Procedure</label>
            <select className="select" value={procId} onChange={e=>setProcId(e.target.value)}>
              {procedures.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
          </div>
          <div style={{marginBottom:18}}>
            <label className="label">Destination</label>
            <select className="select" value={destId} onChange={e=>setDestId(e.target.value)}>
              {destinations.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
            </select>
          </div>
          <div style={{marginBottom:18}}>
            <label className="label">Departing from</label>
            <input className="input" value={origin} onChange={e=>setOrigin(e.target.value)}/>
          </div>
          <div style={{marginBottom:18}}>
            <label className="label">Travelers</label>
            <div style={{display:'flex',gap:6}}>
              {[1,2,3,4].map(n => (
                <button key={n} onClick={()=>setTravelers(n)} style={{flex:1,padding:'10px 0',border:'1px solid var(--ink)',background:travelers===n?'var(--ink)':'transparent',color:travelers===n?'var(--ivory)':'var(--ink)',fontFamily:'var(--font-serif)',fontSize:16,cursor:'pointer'}}>{n}</button>
              ))}
            </div>
            <p style={{fontSize:13,color:'var(--fg-3)',margin:'8px 0 0'}}>Spouse along? Itemize their hotel + food too — it's still cheaper.</p>
          </div>
          <button className="btn" style={{width:'100%',justifyContent:'center'}} onClick={()=>navigate('destination',destId)}>See clinics in {dest.name} →</button>
        </div>

        <div>
          <Ledger procedure={proc} destination={dest}/>
          <div style={{marginTop:32,padding:'28px',border:'1px solid var(--line)',background:'var(--paper)'}}>
            <div className="num-eyebrow" style={{marginBottom:14}}>What's included in the abroad number</div>
            <ul className="arrow-list" style={{fontSize:15,color:'var(--fg-2)'}}>
              <li>Procedure: average of the 6 most-reviewed clinics in {dest.name}.</li>
              <li>Flight: {dest.flightHrs} from a US hub. Premium Economy on long-haul; coach on short.</li>
              <li>Hotel: 3-star, on or near the clinic, including recovery nights.</li>
              <li>Food + ground transport + ONE excursion (the wine, the temple, the cenote).</li>
              <li>Built from {dest.reviewCount.toLocaleString()} verified trip reports.</li>
            </ul>
          </div>
          <div style={{marginTop:32,display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16}}>
            {[
              ['$420','median airfare savings vs. published'],
              ['$58','median nightly hotel'],
              ['7 days','median trip length'],
            ].map(([n,l]) => (
              <div key={l} className="card" style={{padding:'18px 20px'}}>
                <div style={{fontFamily:'var(--font-serif)',fontSize:30,letterSpacing:'-0.01em',lineHeight:1}}>{n}</div>
                <div className="num-eyebrow" style={{marginTop:8}}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
};

const ConciergesPage = ({ navigate }) => {
  const { concierges, destinations } = window.DTR_DATA;
  return (
    <main className="page" style={{padding:'48px 40px 96px'}}>
      <div style={{marginBottom:36}}>
        <div className="num-eyebrow">The handlers</div>
        <h1 style={{fontSize:64,letterSpacing:'-0.025em',lineHeight:1,margin:'10px 0 16px'}}>Concierges, rated.</h1>
        <p className="lead" style={{maxWidth:720,margin:0}}>Border-crossing escorts. Spouse companions. Translators. Recovery-suite food delivery. The infrastructure around the procedure — reviewable, like everything else.</p>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:20}}>
        {concierges.map(c => {
          const dest = destinations.find(d => d.id === c.destinationId);
          return (
            <article key={c.id} className="card" style={{padding:'26px 28px'}}>
              <div style={{display:'flex',gap:18,alignItems:'flex-start'}}>
                <div style={{width:64,height:64,borderRadius:999,background:'var(--bone)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-mono)',fontSize:18,flexShrink:0}}>
                  {c.name.split(' ').map(n=>n[0]).join('')}
                </div>
                <div style={{flex:1}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                    <h3 style={{margin:0,fontSize:24,letterSpacing:'-0.01em'}}>{c.name}</h3>
                    <div style={{fontFamily:'var(--font-mono)',fontSize:14}}>{c.rate}</div>
                  </div>
                  <div className="num-eyebrow" style={{marginTop:4}}>{dest.name} · {c.service}</div>
                  <p style={{fontSize:15,color:'var(--fg-2)',margin:'12px 0 14px',lineHeight:1.5}}>{c.blurb}</p>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',paddingTop:12,borderTop:'1px solid var(--line)'}}>
                    <span><Stars value={c.rating} size={12}/> <span style={{fontFamily:'var(--font-mono)',fontSize:12,marginLeft:8,color:'var(--fg-3)'}}>{c.rating} · {c.reviews} reviews</span></span>
                    <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-3)'}}>{c.languages.join(' · ')}</span>
                  </div>
                </div>
              </div>
            </article>
          );
        })}
      </div>
    </main>
  );
};

window.SearchPage = SearchPage;
window.MathPage = MathPage;
window.ConciergesPage = ConciergesPage;