// Destination, Clinic, Review, Forum, Thread, Write, Account pages

const DestinationPage = ({ id, navigate }) => {
  const { destinations, clinics, reviews, procedures, featuredCombos } = window.DTR_DATA;
  const d = destinations.find(x => x.id === id);
  const localClinics = clinics.filter(c => c.destinationId === id);
  const localReviews = reviews.filter(r => r.destinationId === id);
  const proc = procedures.find(p => p.id === d.procedures.includes('Root canal') ? 'root-canal' : 'implant');
  const procRef = procedures.find(p => p.id === 'root-canal');

  return (
    <main>
      {/* Hero with destination art */}
      <section style={{position:'relative',borderBottom:'1px solid var(--ink)'}}>
        <DestinationArt id={d.art} height={420}/>
        <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg, rgba(11,13,12,0) 30%, rgba(11,13,12,0.55) 100%)'}}></div>
        <div className="page" style={{position:'absolute',bottom:36,left:0,right:0,padding:'0 40px',color:'var(--ivory)'}}>
          <div style={{fontFamily:'var(--font-mono)',fontSize:12,letterSpacing:'0.12em',textTransform:'uppercase',opacity:0.85,marginBottom:14}}>Destination · {d.region}</div>
          <h1 style={{fontSize:88,lineHeight:0.96,letterSpacing:'-0.025em',margin:'0 0 12px',color:'var(--ivory)'}}>{d.name}.</h1>
          <p style={{fontSize:24,maxWidth:760,margin:0,lineHeight:1.35,fontStyle:'italic'}}>{d.tagline}</p>
        </div>
      </section>

      {/* Quick facts strip */}
      <section style={{borderBottom:'1px solid var(--ink)',background:'var(--paper)'}}>
        <div className="page" style={{padding:'24px 40px',display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:32,fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'0.08em',textTransform:'uppercase'}}>
          {[
            ['Avg. savings', `${d.avgSavings}%`],
            ['Travel', d.flightHrs],
            ['From', d.nearestUSCity],
            ['Clinics', d.clinicCount],
            ['Reviews', d.reviewCount.toLocaleString()],
            ['Now', d.nowText],
          ].map(([l,v]) => (
            <div key={l}>
              <div style={{color:'var(--fg-3)',marginBottom:6}}>{l}</div>
              <div style={{fontFamily:'var(--font-serif)',fontSize:18,letterSpacing:'-0.01em',color:'var(--ink)',textTransform:'none'}}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      <div className="page" style={{padding:'64px 40px',display:'grid',gridTemplateColumns:'2fr 1fr',gap:64}}>
        <div>
          <div className="num-eyebrow" style={{marginBottom:8}}>About {d.name}</div>
          <p style={{fontSize:22,lineHeight:1.5,color:'var(--fg-2)',maxWidth:'none'}}>{d.blurb}</p>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:0,marginTop:32,border:'1px solid var(--line)'}}>
            {d.pairsWith.map((p,i) => (
              <div key={p} style={{padding:'20px 22px',borderRight: i<2 ? '1px solid var(--line)' : 'none'}}>
                <div className="num-eyebrow">0{i+1} · Pairs with</div>
                <div style={{fontFamily:'var(--font-serif)',fontSize:20,marginTop:8,letterSpacing:'-0.01em'}}>{p}</div>
              </div>
            ))}
          </div>

          <h2 style={{fontSize:42,letterSpacing:'-0.02em',margin:'72px 0 24px',paddingBottom:14,borderBottom:'1px solid var(--ink)'}}>The math, here</h2>
          <Ledger procedure={procRef} destination={d}/>

          <h2 style={{fontSize:42,letterSpacing:'-0.02em',margin:'72px 0 24px',paddingBottom:14,borderBottom:'1px solid var(--ink)'}}>{localClinics.length} vetted clinics</h2>
          <div style={{display:'flex',flexDirection:'column',gap:16}}>
            {localClinics.map(c => <ClinicCard key={c.id} c={c} navigate={navigate} showDest={false}/>)}
          </div>

          {localReviews.length > 0 && (
            <>
              <h2 style={{fontSize:42,letterSpacing:'-0.02em',margin:'72px 0 24px',paddingBottom:14,borderBottom:'1px solid var(--ink)'}}>Trip reports from {d.name}</h2>
              <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:20}}>
                {localReviews.map(r => <TripReportCard key={r.id} r={r} navigate={navigate}/>)}
              </div>
            </>
          )}
        </div>

        {/* Sidebar */}
        <aside style={{position:'sticky',top:120,alignSelf:'start'}}>
          <div className="card" style={{padding:24,marginBottom:20}}>
            <div className="num-eyebrow" style={{marginBottom:12}}>Plan a trip</div>
            <button className="btn" style={{width:'100%',justifyContent:'center',marginBottom:10}} onClick={()=>navigate('math')}>Run the math →</button>
            <button className="btn btn-ghost" style={{width:'100%',justifyContent:'center'}} onClick={()=>navigate('write')}>Share your trip</button>
          </div>
          <div className="card" style={{padding:24,marginBottom:20}}>
            <div className="num-eyebrow" style={{marginBottom:14}}>What patients pay (median)</div>
            <ul style={{listStyle:'none',padding:0,margin:0,fontSize:15}}>
              {d.procedures.map((p,i) => {
                const procRef = procedures.find(pr => pr.name.toLowerCase().includes(p.toLowerCase().split(' ')[0]));
                return (
                  <li key={p} style={{display:'flex',justifyContent:'space-between',padding:'10px 0',borderTop: i ? '1px dashed var(--line)' : 'none'}}>
                    <span>{p}</span>
                    <span style={{fontFamily:'var(--font-mono)'}}>{procRef ? fmtUSD(procRef.abroadAvg) : '—'}</span>
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="card" style={{padding:24}}>
            <div className="num-eyebrow" style={{marginBottom:14}}>Concierges here</div>
            {window.DTR_DATA.concierges.filter(c => c.destinationId === id).map(c => (
              <div key={c.id} style={{padding:'14px 0',borderTop:'1px solid var(--line)'}}>
                <div style={{fontFamily:'var(--font-serif)',fontSize:17}}>{c.name}</div>
                <div style={{fontSize:13,color:'var(--fg-2)',marginBottom:6}}>{c.service}</div>
                <div style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-3)'}}>{c.rate} · ⭐ {c.rating}</div>
              </div>
            ))}
            <button className="btn btn-ghost btn-sm" style={{width:'100%',justifyContent:'center',marginTop:14}} onClick={()=>navigate('concierges')}>All concierges →</button>
          </div>
        </aside>
      </div>
    </main>
  );
};

const ClinicPage = ({ id, navigate }) => {
  const { clinics, destinations, reviews } = window.DTR_DATA;
  const c = clinics.find(x => x.id === id);
  const dest = destinations.find(d => d.id === c.destinationId);
  const clinicReviews = reviews.filter(r => r.clinicId === id);
  const ratingDims = [['Procedure quality','quality'],['Communication','communication'],['Pricing transparency','transparency'],['Cleanliness','cleanliness'],['Border / airport logistics','logistics'],['Aftercare','aftercare'],['Concierge support','concierge'],['Proximity to attractions','proximity']];
  const avgDim = (dim) => {
    const vals = clinicReviews.map(r => r.ratings?.[dim] || 0).filter(Boolean);
    return vals.length ? vals.reduce((a,b)=>a+b,0)/vals.length : 0;
  };

  return (
    <main className="page" style={{padding:'40px 40px 96px'}}>
      <nav style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--fg-3)',marginBottom:18}}>
        <a href="#" onClick={(e)=>{e.preventDefault();navigate('home');}} style={{color:'inherit'}}>Home</a> · <a href="#" onClick={(e)=>{e.preventDefault();navigate('destination',dest.id);}} style={{color:'inherit'}}>{dest.name}</a> · <span style={{color:'var(--ink)'}}>{c.name}</span>
      </nav>

      <div style={{display:'grid',gridTemplateColumns:'1.3fr 1fr',gap:48,marginBottom:48}}>
        <div>
          <div className="num-eyebrow" style={{marginBottom:8}}>Clinic · {dest.name}</div>
          <h1 style={{fontSize:60,letterSpacing:'-0.025em',lineHeight:1,margin:'0 0 16px'}}>{c.name}</h1>
          <p style={{fontSize:18,color:'var(--fg-2)',lineHeight:1.5,margin:'0 0 20px'}}>{c.blurb}</p>
          <div style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:20}}>
            {c.accreditations.map(a => <span key={a} className="tag tag-moss"><span className="tag-dot"></span>{a}</span>)}
          </div>
          <div style={{display:'flex',gap:24,alignItems:'baseline',padding:'18px 0',borderTop:'1px solid var(--ink)',borderBottom:'1px solid var(--line)'}}>
            <div>
              <span style={{fontFamily:'var(--font-serif)',fontSize:42,letterSpacing:'-0.02em'}}>{c.rating}</span>
              <span style={{marginLeft:10}}><Stars value={c.rating}/></span>
            </div>
            <div className="num-eyebrow">{c.reviewCount} verified reviews</div>
            <div style={{marginLeft:'auto',display:'flex',gap:10}}>
              <button className="btn btn-ghost btn-sm">Save trip</button>
              <button className="btn btn-sm" onClick={()=>navigate('write')}>Write a review →</button>
            </div>
          </div>
        </div>
        <div>
          <DestinationArt id={c.photos?.[0] || dest.art} height={300}/>
        </div>
      </div>

      {/* Three-col detail */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:0,border:'1px solid var(--ink)',marginBottom:64}}>
        <div style={{padding:'24px 26px',borderRight:'1px solid var(--line)'}}>
          <div className="num-eyebrow">01 · Lead dentist</div>
          <h3 style={{fontSize:22,margin:'10px 0 8px',letterSpacing:'-0.01em'}}>{c.leadDentist}</h3>
          <p style={{fontSize:14,color:'var(--fg-2)',lineHeight:1.55,margin:0}}>{c.leadDentistBio}</p>
        </div>
        <div style={{padding:'24px 26px',borderRight:'1px solid var(--line)'}}>
          <div className="num-eyebrow">02 · The clinic</div>
          <ul className="arrow-list" style={{fontSize:14,marginTop:10}}>
            <li>{c.yearsInBusiness} years in operation</li>
            <li>Languages: {c.languages.join(', ')}</li>
            <li>Specialties: {c.specialties.join(', ')}</li>
            <li>{c.address}</li>
          </ul>
        </div>
        <div style={{padding:'24px 26px'}}>
          <div className="num-eyebrow">03 · Proximity</div>
          <ul style={{listStyle:'none',padding:0,margin:'12px 0 0',fontSize:14}}>
            {c.proximity.map(([place,time]) => (
              <li key={place} style={{display:'flex',justifyContent:'space-between',padding:'7px 0',borderTop:'1px dashed var(--line)'}}>
                <span>{place}</span>
                <span style={{fontFamily:'var(--font-mono)',color:'var(--fg-2)'}}>{time}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:48}}>
        <div>
          <h2 style={{fontSize:36,letterSpacing:'-0.02em',margin:'0 0 24px',paddingBottom:14,borderBottom:'1px solid var(--ink)'}}>Patients rated this clinic</h2>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:0,border:'1px solid var(--line)',marginBottom:48}}>
            {ratingDims.map(([label,key],i) => {
              const v = avgDim(key);
              return (
                <div key={key} style={{padding:'14px 18px',borderRight: i%2===0 ? '1px solid var(--line)' : 'none',borderBottom: i<6 ? '1px solid var(--line)' : 'none'}}>
                  <div style={{display:'flex',justifyContent:'space-between',marginBottom:6}}>
                    <span style={{fontSize:14}}>{label}</span>
                    <span style={{fontFamily:'var(--font-mono)',fontSize:13}}>{v.toFixed(1)}</span>
                  </div>
                  <div style={{height:3,background:'var(--bone)'}}>
                    <div style={{height:'100%',width:`${(v/5)*100}%`,background:'var(--terracotta)'}}></div>
                  </div>
                </div>
              );
            })}
          </div>

          <h2 style={{fontSize:36,letterSpacing:'-0.02em',margin:'0 0 24px',paddingBottom:14,borderBottom:'1px solid var(--ink)'}}>{clinicReviews.length} trip reports</h2>
          <div style={{display:'flex',flexDirection:'column',gap:20}}>
            {clinicReviews.map(r => <TripReportCard key={r.id} r={r} navigate={navigate}/>)}
          </div>
        </div>
        <aside>
          <div className="card" style={{padding:24,position:'sticky',top:120}}>
            <div className="num-eyebrow" style={{marginBottom:14}}>Price list (in writing)</div>
            <ul style={{listStyle:'none',padding:0,margin:0,fontSize:15}}>
              {c.priceList.map(([n,p],i) => (
                <li key={n} style={{display:'flex',justifyContent:'space-between',padding:'10px 0',borderTop: i ? '1px dashed var(--line)' : 'none'}}>
                  <span>{n}</span>
                  <span style={{fontFamily:'var(--font-mono)'}}>{fmtUSD(p)}</span>
                </li>
              ))}
            </ul>
            <button className="btn" style={{width:'100%',justifyContent:'center',marginTop:18}}>Request a quote →</button>
            <p style={{fontSize:12,color:'var(--fg-3)',margin:'12px 0 0',textAlign:'center'}}>No lead-gen kickbacks. Goes straight to clinic.</p>
          </div>
        </aside>
      </div>
    </main>
  );
};

const ReviewPage = ({ id, navigate }) => {
  const { reviews, clinics, destinations } = window.DTR_DATA;
  const r = reviews.find(x => x.id === id);
  const c = clinics.find(x => x.id === r.clinicId);
  const d = destinations.find(x => x.id === r.destinationId);

  return (
    <main className="page" style={{padding:'40px 40px 96px',maxWidth:920}}>
      <nav style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--fg-3)',marginBottom:24}}>
        <a href="#" onClick={(e)=>{e.preventDefault();navigate('home');}} style={{color:'inherit'}}>Home</a> · <a href="#" onClick={(e)=>{e.preventDefault();navigate('destination',d.id);}} style={{color:'inherit'}}>{d.name}</a> · <a href="#" onClick={(e)=>{e.preventDefault();navigate('clinic',c.id);}} style={{color:'inherit'}}>{c.name.split('·')[0].trim()}</a>
      </nav>

      <div className="num-eyebrow" style={{marginBottom:14}}>Trip report · {r.date}</div>
      <h1 style={{fontSize:60,letterSpacing:'-0.025em',lineHeight:1,margin:'0 0 24px'}}>"{r.title}"</h1>

      <div style={{display:'flex',alignItems:'center',gap:16,paddingBottom:20,borderBottom:'1px solid var(--ink)',marginBottom:32}}>
        <span className="avatar" style={{width:48,height:48,fontSize:16}}>{r.initials}</span>
        <div style={{flex:1}}>
          <div style={{fontFamily:'var(--font-serif)',fontSize:18}}>{r.author}</div>
          <div className="num-eyebrow">{r.location} · {r.travelers} traveler{r.travelers>1?'s':''} · {r.nights} nights</div>
        </div>
        <div style={{textAlign:'right'}}>
          <Stars value={r.overall}/>
          <div className="num-eyebrow" style={{marginTop:4}}>↑ {r.helpful} helpful</div>
        </div>
      </div>

      {/* Receipt block */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:0,border:'1px solid var(--ink)',marginBottom:40}}>
        <div style={{padding:'18px 22px',borderRight:'1px solid var(--line)'}}>
          <div className="num-eyebrow">Procedure</div>
          <div style={{fontFamily:'var(--font-serif)',fontSize:20,marginTop:6}}>{r.procedure}</div>
        </div>
        <div style={{padding:'18px 22px',borderRight:'1px solid var(--line)'}}>
          <div className="num-eyebrow">Spent abroad</div>
          <div style={{fontFamily:'var(--font-serif)',fontSize:28,marginTop:6,letterSpacing:'-0.01em'}}>{fmtUSD(r.spent)}</div>
        </div>
        <div style={{padding:'18px 22px',background:'var(--ink)',color:'var(--ivory)'}}>
          <div className="num-eyebrow" style={{color:'var(--graphite-300)'}}>Saved vs. home</div>
          <div style={{fontFamily:'var(--font-serif)',fontSize:28,marginTop:6,letterSpacing:'-0.01em',color:'var(--ivory)'}}>{fmtUSD(r.wouldHaveSpent - r.spent)}</div>
        </div>
      </div>

      <div style={{fontSize:19,lineHeight:1.7,color:'var(--ink)',whiteSpace:'pre-wrap',maxWidth:'none'}}>
        {r.body.split('\n\n').map((p,i) => <p key={i} style={{margin:'0 0 24px',maxWidth:'none'}}>{p}</p>)}
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24,marginTop:40}}>
        <div className="card" style={{padding:24}}>
          <div className="num-eyebrow" style={{color:'var(--moss)',marginBottom:12}}>What worked</div>
          <ul className="arrow-list" style={{fontSize:15}}>
            {r.pros.map(p => <li key={p}>{p}</li>)}
          </ul>
        </div>
        <div className="card" style={{padding:24}}>
          <div className="num-eyebrow" style={{color:'var(--rust)',marginBottom:12}}>What to know</div>
          <ul className="arrow-list" style={{fontSize:15}}>
            {r.cons.map(p => <li key={p}>{p}</li>)}
          </ul>
        </div>
      </div>

      <div style={{display:'flex',gap:12,marginTop:40,paddingTop:24,borderTop:'1px solid var(--ink)'}}>
        <button className="btn btn-ghost btn-sm">↑ Helpful ({r.helpful})</button>
        <button className="btn btn-ghost btn-sm">Save trip</button>
        <button className="btn btn-ghost btn-sm">Share</button>
        <button className="btn btn-ghost btn-sm" style={{marginLeft:'auto'}}>Report</button>
      </div>
    </main>
  );
};

const ForumPage = ({ navigate }) => {
  const { forumThreads, destinations } = window.DTR_DATA;
  const [filter, setFilter] = React.useState('all');
  const cats = ['all','Trip reports','Logistics','Concierges','Aftercare','Trip planning','Medical'];
  return (
    <main className="page" style={{padding:'48px 40px 96px'}}>
      <div style={{display:'grid',gridTemplateColumns:'1fr auto',gap:32,alignItems:'flex-end',marginBottom:36}}>
        <div>
          <div className="num-eyebrow">The community</div>
          <h1 style={{fontSize:64,letterSpacing:'-0.025em',lineHeight:1,margin:'10px 0 12px'}}>The board.</h1>
          <p className="lead" style={{maxWidth:600,margin:0}}>Patients, mods, the occasional concierge. Long-form trip reports and the questions people ask before they book.</p>
        </div>
        <button className="btn" onClick={()=>navigate('write')}>+ New thread</button>
      </div>

      <div style={{display:'flex',gap:0,marginBottom:24,borderBottom:'1px solid var(--ink)'}}>
        {cats.map(c => (
          <button key={c} onClick={()=>setFilter(c)} style={{border:'none',background:'none',padding:'12px 20px',fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',cursor:'pointer',color: filter===c ? 'var(--ink)' : 'var(--fg-3)',borderBottom: filter===c ? '2px solid var(--ink)' : '2px solid transparent',marginBottom:-1}}>
            {c}
          </button>
        ))}
      </div>

      <div style={{border:'1px solid var(--ink)'}}>
        {forumThreads.filter(t => filter==='all' || t.category===filter).map((t,i) => {
          const dest = destinations.find(d => d.id === t.destinationId);
          return (
            <a key={t.id} href="#" onClick={(e)=>{e.preventDefault();navigate('thread',t.id);}} style={{display:'grid',gridTemplateColumns:'60px 1fr auto',gap:20,padding:'22px 24px',textDecoration:'none',color:'var(--ink)',borderTop: i ? '1px solid var(--line)' : 'none'}}>
              <div style={{textAlign:'center'}}>
                <div style={{fontFamily:'var(--font-mono)',fontSize:18}}>↑</div>
                <div style={{fontFamily:'var(--font-mono)',fontSize:15,marginTop:4}}>{t.upvotes}</div>
              </div>
              <div>
                <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:8}}>
                  {t.pinned && <span style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--terracotta)'}}>📌 PINNED</span>}
                  <span className="tag tag-signal">{t.category}</span>
                  {dest && <span className="num-eyebrow">{dest.name}</span>}
                </div>
                <div style={{fontFamily:'var(--font-serif)',fontSize:22,letterSpacing:'-0.01em',lineHeight:1.2,marginBottom:6}}>{t.title}</div>
                <div style={{fontSize:14,color:'var(--fg-2)',marginBottom:8}}>{t.excerpt}</div>
                <div className="num-eyebrow">u/{t.author} · {t.age} · {t.replies} replies</div>
              </div>
              <div style={{alignSelf:'center',fontFamily:'var(--font-mono)',fontSize:18,color:'var(--fg-3)'}}>→</div>
            </a>
          );
        })}
      </div>
    </main>
  );
};

const ThreadPage = ({ id, navigate }) => {
  const { forumThreads, destinations } = window.DTR_DATA;
  const t = forumThreads.find(x => x.id === id);
  const dest = t.destinationId ? destinations.find(d => d.id === t.destinationId) : null;
  const replies = [
    { author: 'tampa_janet', age: '4 hr ago', upvotes: 38, body: "I did All-on-4 with BIDH last month and they were firm on 10 days. The reason is the second prosthetic check-in is on day 7-8 — they want a 48hr observation buffer after that. Worth it. The premium-economy flight home was rough enough at day 10." },
    { author: 'mod_team', age: '3 hr ago', upvotes: 22, body: "Mod note: BIDH's official guidance has been 10 days since 2023 (we have it in the data room). Some other Bangkok clinics still say 7. We default to clinic guidance — if your clinic says 10, do 10." },
    { author: 'desert_runner', age: '2 hr ago', upvotes: 9, body: "Counterpoint — I flew home day 8 and was fine. But I'd already been to Bangkok three times. I knew the territory. First-timer? Stay 10." },
    { author: 'fernando_tj', age: '1 hr ago', upvotes: 14, body: "Concierge perspective: the airline matters. Lie-flat seat = day 7 might work. Premium economy = day 9-10. Standard economy = don't even think about it before day 10." },
  ];
  return (
    <main className="page" style={{padding:'40px 40px 96px',maxWidth:920}}>
      <nav style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--fg-3)',marginBottom:24}}>
        <a href="#" onClick={(e)=>{e.preventDefault();navigate('forum');}} style={{color:'inherit'}}>Community</a> · <span>{t.category}</span> {dest && <> · <a href="#" onClick={(e)=>{e.preventDefault();navigate('destination',dest.id);}} style={{color:'inherit'}}>{dest.name}</a></>}
      </nav>

      <div style={{display:'flex',gap:10,marginBottom:14}}>
        {t.pinned && <span style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--terracotta)'}}>📌 PINNED</span>}
        <span className="tag tag-signal">{t.category}</span>
      </div>
      <h1 style={{fontSize:48,letterSpacing:'-0.025em',lineHeight:1.05,margin:'0 0 16px'}}>{t.title}</h1>
      <div className="num-eyebrow" style={{marginBottom:24}}>Posted by u/{t.author} · {t.age} · {t.replies} replies</div>

      <div className="card" style={{padding:'24px 28px',marginBottom:32}}>
        <p style={{fontSize:18,lineHeight:1.6,margin:0,maxWidth:'none'}}>{t.excerpt} I ran the numbers across three options. Drove from Phoenix to San Diego (5.5 hr, $90 gas), walked across at PedWest, taxi to clinic. Compared to PHX→TIJ direct ($318 r/t with bag). Compared to PHX→SAN flight + Lyft to PedWest ($240 + $80 in rides).</p>
        <p style={{fontSize:18,lineHeight:1.6,margin:'16px 0 0',maxWidth:'none'}}>Winner: drive. Worst: PHX→TIJ direct (the airport taxi situation in TJ is rough if you don't speak Spanish). Posting full math in next reply.</p>
        <div style={{marginTop:18,paddingTop:14,borderTop:'1px solid var(--line)',display:'flex',gap:10}}>
          <button className="btn btn-ghost btn-sm">↑ {t.upvotes}</button>
          <button className="btn btn-ghost btn-sm">Reply</button>
          <button className="btn btn-ghost btn-sm">Save</button>
          <button className="btn btn-ghost btn-sm">Share</button>
        </div>
      </div>

      <h3 style={{fontSize:24,margin:'0 0 20px',paddingBottom:10,borderBottom:'1px solid var(--ink)'}}>{replies.length} replies</h3>
      <div style={{display:'flex',flexDirection:'column',gap:16}}>
        {replies.map((r,i) => (
          <div key={i} style={{display:'grid',gridTemplateColumns:'48px 1fr',gap:16,padding:'18px 22px',border:'1px solid var(--line)',background:'var(--paper)'}}>
            <div style={{textAlign:'center'}}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:14}}>↑</div>
              <div style={{fontFamily:'var(--font-mono)',fontSize:13,marginTop:2}}>{r.upvotes}</div>
            </div>
            <div>
              <div className="num-eyebrow" style={{marginBottom:8}}>u/{r.author} · {r.age}</div>
              <p style={{fontSize:16,lineHeight:1.6,margin:0,maxWidth:'none'}}>{r.body}</p>
            </div>
          </div>
        ))}
      </div>

      <div style={{marginTop:32,padding:24,border:'1px solid var(--ink)'}}>
        <div className="num-eyebrow" style={{marginBottom:12}}>Add a reply</div>
        <textarea className="textarea" rows="4" placeholder="Share your experience..."></textarea>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:12}}>
          <span style={{fontSize:13,color:'var(--fg-3)'}}>Be specific. Bring receipts. The community is verifying as you write.</span>
          <button className="btn btn-sm">Post reply →</button>
        </div>
      </div>
    </main>
  );
};

const WritePage = ({ navigate }) => {
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({destination:'tijuana',clinic:'sani-dental-tijuana',procedure:'Root canal + crown',spent:580,wouldHaveSpent:3100,nights:2,travelers:1,title:'',body:'',ratings:{quality:5,communication:5,transparency:5,cleanliness:5,logistics:4,aftercare:5,concierge:5,proximity:5}});
  const { destinations, clinics } = window.DTR_DATA;

  return (
    <main className="page" style={{padding:'48px 40px 96px',maxWidth:920}}>
      <div className="num-eyebrow" style={{marginBottom:12}}>Write a trip report · Step {step} of 4</div>
      <h1 style={{fontSize:56,letterSpacing:'-0.025em',lineHeight:1,margin:'0 0 32px'}}>Tell the next patient.</h1>

      {/* Step indicator */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,border:'1px solid var(--ink)',marginBottom:32}}>
        {['The trip','The receipts','The story','The ratings'].map((s,i) => (
          <button key={s} onClick={()=>setStep(i+1)} style={{padding:'14px 18px',border:'none',borderRight: i<3 ? '1px solid var(--line)' : 'none',background: step===i+1 ? 'var(--ink)' : 'var(--paper)',color: step===i+1 ? 'var(--ivory)' : 'var(--ink)',fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',cursor:'pointer',textAlign:'left'}}>
            <div style={{color: step===i+1 ? 'var(--graphite-300)' : 'var(--fg-3)'}}>0{i+1}</div>
            <div style={{fontFamily:'var(--font-serif)',fontSize:16,marginTop:4,letterSpacing:0,textTransform:'none'}}>{s}</div>
          </button>
        ))}
      </div>

      {step===1 && (
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
          <div><label className="label">Destination</label><select className="select" value={data.destination} onChange={e=>setData({...data,destination:e.target.value})}>{destinations.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}</select></div>
          <div><label className="label">Clinic</label><select className="select" value={data.clinic} onChange={e=>setData({...data,clinic:e.target.value})}>{clinics.filter(c=>c.destinationId===data.destination).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}</select></div>
          <div><label className="label">Procedure</label><input className="input" value={data.procedure} onChange={e=>setData({...data,procedure:e.target.value})}/></div>
          <div><label className="label">Travelers</label><input className="input" type="number" value={data.travelers} onChange={e=>setData({...data,travelers:+e.target.value})}/></div>
          <div><label className="label">Nights on the ground</label><input className="input" type="number" value={data.nights} onChange={e=>setData({...data,nights:+e.target.value})}/></div>
        </div>
      )}
      {step===2 && (
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
          <div>
            <label className="label">What you spent (all-in, USD)</label>
            <input className="input" type="number" value={data.spent} onChange={e=>setData({...data,spent:+e.target.value})}/>
            <p style={{fontSize:13,color:'var(--fg-3)',margin:'8px 0 0'}}>Procedure + flight + hotel + food + ground.</p>
          </div>
          <div>
            <label className="label">What you'd have spent at home</label>
            <input className="input" type="number" value={data.wouldHaveSpent} onChange={e=>setData({...data,wouldHaveSpent:+e.target.value})}/>
            <p style={{fontSize:13,color:'var(--fg-3)',margin:'8px 0 0'}}>Best US quote you got. We don't publish without it.</p>
          </div>
          <div style={{gridColumn:'span 2',background:'var(--ink)',color:'var(--ivory)',padding:'24px 28px',marginTop:8}}>
            <div className="num-eyebrow" style={{color:'var(--graphite-300)'}}>You saved</div>
            <div style={{fontSize:60,fontFamily:'var(--font-serif)',letterSpacing:'-0.025em',lineHeight:1,marginTop:6}}>{fmtUSD(Math.max(0,data.wouldHaveSpent-data.spent))}</div>
            <p style={{fontSize:14,color:'var(--graphite-300)',margin:'10px 0 0',maxWidth:'none'}}>This is the number that goes in the headline of your review.</p>
          </div>
        </div>
      )}
      {step===3 && (
        <div>
          <label className="label">Headline (the punchy one-liner)</label>
          <input className="input" placeholder='e.g. "Fernando met me at the border. Worth every dollar."' value={data.title} onChange={e=>setData({...data,title:e.target.value})}/>
          <label className="label" style={{marginTop:18}}>The story</label>
          <textarea className="textarea" rows="14" placeholder="What happened, day by day. Include the border crossing, the concierge if you had one, the recovery. Bring receipts." value={data.body} onChange={e=>setData({...data,body:e.target.value})}></textarea>
          <p style={{fontSize:13,color:'var(--fg-3)',marginTop:8}}>Trip reports without specific details get held in mod review. Names, times, prices.</p>
        </div>
      )}
      {step===4 && (
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:0,border:'1px solid var(--line)'}}>
          {[['Procedure quality','quality'],['Communication / English','communication'],['Pricing transparency','transparency'],['Cleanliness','cleanliness'],['Border / airport logistics','logistics'],['Aftercare','aftercare'],['Concierge support','concierge'],['Proximity to attractions','proximity']].map(([label,key],i) => (
            <div key={key} style={{padding:'16px 20px',borderRight: i%2===0 ? '1px solid var(--line)' : 'none',borderBottom: i<6 ? '1px solid var(--line)' : 'none'}}>
              <div className="label" style={{marginBottom:8}}>{label}</div>
              <div style={{display:'flex',gap:6}}>
                {[1,2,3,4,5].map(n => (
                  <button key={n} onClick={()=>setData({...data,ratings:{...data.ratings,[key]:n}})} style={{flex:1,padding:'8px 0',border:'1px solid var(--ink)',background: data.ratings[key]>=n ? 'var(--terracotta)' : 'transparent',color: data.ratings[key]>=n ? 'var(--ivory)' : 'var(--ink)',fontFamily:'var(--font-mono)',fontSize:12,cursor:'pointer'}}>{n}★</button>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}

      <div style={{display:'flex',gap:12,marginTop:32,paddingTop:24,borderTop:'1px solid var(--ink)'}}>
        {step>1 && <button className="btn btn-ghost" onClick={()=>setStep(step-1)}>← Back</button>}
        <div style={{flex:1}}></div>
        {step<4 && <button className="btn" onClick={()=>setStep(step+1)}>Next →</button>}
        {step===4 && <button className="btn" onClick={()=>{alert('Trip report submitted for mod review.');navigate('account');}}>Submit for review →</button>}
      </div>
    </main>
  );
};

const AccountPage = ({ navigate }) => {
  return (
    <main className="page" style={{padding:'48px 40px 96px'}}>
      <div style={{display:'flex',alignItems:'center',gap:24,paddingBottom:24,borderBottom:'1px solid var(--ink)',marginBottom:32}}>
        <span className="avatar" style={{width:80,height:80,fontSize:24}}>JD</span>
        <div style={{flex:1}}>
          <div className="num-eyebrow">Member since 2025 · 4 trips · 2 reviews</div>
          <h1 style={{margin:'8px 0 0',fontSize:48,letterSpacing:'-0.02em'}}>Jordan Diaz</h1>
        </div>
        <button className="btn btn-ghost btn-sm">Edit profile</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16,marginBottom:48}}>
        {[['$11,420','total saved across 4 trips'],['2','reviews published'],['18','helpful votes received'],['3','saved trips']].map(([n,l]) => (
          <div key={l} className="card" style={{padding:'20px 22px'}}>
            <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>

      <h2 style={{fontSize:32,margin:'0 0 20px',paddingBottom:14,borderBottom:'1px solid var(--ink)'}}>Saved trips</h2>
      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:16,marginBottom:48}}>
        {window.DTR_DATA.featuredCombos.slice(0,3).map((c,i) => {
          const dest = window.DTR_DATA.destinations.find(d => d.id === c.destinationId);
          return (
            <a key={c.id} href="#" onClick={(e)=>{e.preventDefault();navigate('destination',c.destinationId);}} className="card" style={{padding:0,display:'grid',gridTemplateColumns:'140px 1fr',textDecoration:'none',color:'var(--ink)'}}>
              <DestinationArt id={dest.art} height={140}/>
              <div style={{padding:'16px 18px'}}>
                <div className="num-eyebrow" style={{marginBottom:6}}>Saved · {i+1} week ago</div>
                <div style={{fontFamily:'var(--font-serif)',fontSize:18,letterSpacing:'-0.01em',marginBottom:6}}>{c.title}</div>
                <div style={{fontFamily:'var(--font-mono)',fontSize:12,color:'var(--moss)'}}>Saves {fmtUSD(c.savings)}</div>
              </div>
            </a>
          );
        })}
      </div>

      <h2 style={{fontSize:32,margin:'0 0 20px',paddingBottom:14,borderBottom:'1px solid var(--ink)'}}>Your trip reports</h2>
      <div style={{display:'flex',flexDirection:'column',gap:16}}>
        {window.DTR_DATA.reviews.slice(0,2).map(r => <TripReportCard key={r.id} r={r} navigate={navigate}/>)}
      </div>
    </main>
  );
};

window.DestinationPage = DestinationPage;
window.ClinicPage = ClinicPage;
window.ReviewPage = ReviewPage;
window.ForumPage = ForumPage;
window.ThreadPage = ThreadPage;
window.WritePage = WritePage;
window.AccountPage = AccountPage;