// Home page — Destination Dentistry, with map-first hero
const Home = ({ navigate }) => {
  const featured = window.DTR_DATA.destinations;
  const combos = window.DTR_DATA.featuredCombos;
  const recentReviews = window.DTR_DATA.reviews.slice(0,3);
  const tj = featured.find(d => d.id === 'tijuana');
  const procRC = window.DTR_DATA.procedures.find(p => p.id === 'root-canal');

  // Postcards collage uses our SVG art
  const postcards = [
    { id:'cancun', label:'Cancún', sub:'Crowns + cenotes' },
    { id:'bangkok', label:'Bangkok', sub:'Implants + temples' },
    { id:'budapest', label:'Budapest', sub:'Veneers + thermal baths' },
    { id:'tijuana', label:'Tijuana', sub:'Walk across. Save 70%.' },
  ];

  return (
    <main>
      {/* HERO */}
      <section style={{position:'relative',overflow:'hidden',paddingBottom:80,borderBottom:'1px solid var(--silver-200)'}}>
        {/* Decorative soft color washes */}
        <div style={{position:'absolute',top:-160,right:-200,width:560,height:560,background:'radial-gradient(circle, rgba(194,94,58,0.18) 0%, transparent 60%)',pointerEvents:'none'}}></div>
        <div style={{position:'absolute',top:80,left:-160,width:480,height:480,background:'radial-gradient(circle, rgba(46,111,142,0.14) 0%, transparent 60%)',pointerEvents:'none'}}></div>

        <div className="page" style={{padding:'56px 40px 0',position:'relative'}}>
          <div style={{display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:64,alignItems:'flex-start'}}>
            {/* LEFT: copy */}
            <div>
              <div style={{display:'flex',gap:10,marginBottom:24,alignItems:'center'}}>
                <span className="pill" style={{background:'linear-gradient(180deg,#FFFFFF 0%,#ECEEF1 100%)',color:'var(--ink)'}}>
                  <span style={{width:6,height:6,borderRadius:999,background:'var(--moss)',boxShadow:'0 0 6px var(--moss)'}}></span>2,847 verified reviews
                </span>
                <span className="pill">Vol. III · Spring 2026</span>
              </div>
              <h1 style={{fontSize:104,lineHeight:0.92,letterSpacing:'-0.03em',margin:'0 0 24px',fontWeight:400}}>
                Destination<br/>
                <span style={{fontStyle:'italic',background:'linear-gradient(120deg, #C25E3A 0%, #C44569 50%, #2E6F8E 100%)',WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text'}}>Dentistry.</span>
              </h1>
              <p className="lead" style={{maxWidth:540,fontSize:22,lineHeight:1.4,color:'var(--fg-2)',margin:'0 0 28px'}}>
                Independent reviews of dentists, clinics and the trips around them — written by patients who flew, drove or walked across a border. Travel and dentistry, on the same itinerary.
              </p>
              <div style={{display:'flex',gap:10,flexWrap:'wrap',marginBottom:36}}>
                <button className="btn btn-accent" onClick={()=>navigate('search')}>Pick a destination <span style={{fontFamily:'var(--font-mono)'}}>→</span></button>
                <button className="btn btn-ghost" onClick={()=>navigate('math')}>Run the numbers</button>
              </div>
              <div style={{paddingTop:28,borderTop:'1px solid var(--silver-200)',display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:24}}>
                {[['$8,420','avg. saved'],['4.7','clinic rating'],['47','vetted clinics'],['5','destinations']].map(([n,l]) => (
                  <div key={l}>
                    <div style={{fontFamily:'var(--font-serif)',fontSize:32,lineHeight:1,letterSpacing:'-0.02em'}}>{n}</div>
                    <div className="num-eyebrow" style={{marginTop:6}}>{l}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* RIGHT: postcard collage */}
            <div style={{position:'relative',height:560}}>
              {/* big postcard - bangkok */}
              <a href="#" onClick={(e)=>{e.preventDefault();navigate('destination','bangkok');}} style={{position:'absolute',top:0,right:30,width:300,height:380,borderRadius:14,overflow:'hidden',boxShadow:'var(--shadow-pop)',border:'8px solid white',transform:'rotate(3deg)',transition:'transform 240ms ease, box-shadow 240ms ease',cursor:'pointer',textDecoration:'none',color:'inherit',display:'block'}} onMouseEnter={e=>{e.currentTarget.style.transform='rotate(0deg) translateY(-4px)';}} onMouseLeave={e=>{e.currentTarget.style.transform='rotate(3deg)';}}>
                <DestinationArt id="bangkok" height={300}/>
                <div style={{padding:'12px 14px',background:'white'}}>
                  <div className="num-eyebrow" style={{marginBottom:4}}>Postcard from</div>
                  <div style={{fontFamily:'var(--font-serif)',fontSize:22,letterSpacing:'-0.01em'}}>Bangkok, TH</div>
                  <div style={{fontSize:13,color:'var(--fg-2)',marginTop:2}}>All-on-4 + 14 days at the Mandarin Oriental.</div>
                </div>
              </a>

              {/* smaller postcard - cancun */}
              <a href="#" onClick={(e)=>{e.preventDefault();navigate('destination','cancun');}} style={{position:'absolute',top:200,left:0,width:230,height:280,borderRadius:14,overflow:'hidden',boxShadow:'var(--shadow-pop)',border:'8px solid white',transform:'rotate(-5deg)',transition:'transform 240ms ease',cursor:'pointer',textDecoration:'none',color:'inherit',display:'block',zIndex:2}} onMouseEnter={e=>{e.currentTarget.style.transform='rotate(0deg) translateY(-4px)';}} onMouseLeave={e=>{e.currentTarget.style.transform='rotate(-5deg)';}}>
                <DestinationArt id="cancun" height={200}/>
                <div style={{padding:'10px 12px',background:'white'}}>
                  <div className="num-eyebrow" style={{marginBottom:4}}>Postcard from</div>
                  <div style={{fontFamily:'var(--font-serif)',fontSize:18,letterSpacing:'-0.01em'}}>Cancún, MX</div>
                </div>
              </a>

              {/* clinical photo - small */}
              <a href="#" onClick={(e)=>{e.preventDefault();navigate('clinic','sani-dental-tijuana');}} style={{position:'absolute',top:30,left:60,width:180,height:200,borderRadius:14,overflow:'hidden',boxShadow:'var(--shadow-card)',border:'8px solid white',transform:'rotate(-8deg)',transition:'transform 240ms ease',cursor:'pointer',textDecoration:'none',color:'inherit',display:'block'}} onMouseEnter={e=>{e.currentTarget.style.transform='rotate(-3deg) translateY(-4px)';}} onMouseLeave={e=>{e.currentTarget.style.transform='rotate(-8deg)';}}>
                <DestinationArt id="clinic-modern" height={140}/>
                <div style={{padding:'8px 10px',background:'white'}}>
                  <div className="num-eyebrow" style={{marginBottom:2,fontSize:9}}>The chair</div>
                  <div style={{fontFamily:'var(--font-serif)',fontSize:14,letterSpacing:'-0.01em'}}>Sani Dental, Zona Río</div>
                </div>
              </a>

              {/* stamp */}
              <div style={{position:'absolute',bottom:80,right:0,width:90,height:90,borderRadius:8,background:'linear-gradient(180deg, #C25E3A 0%, #A6492B 100%)',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',color:'white',transform:'rotate(8deg)',boxShadow:'var(--shadow-card)',border:'2px dashed rgba(255,255,255,0.5)'}}>
                <div style={{fontFamily:'var(--font-mono)',fontSize:8,letterSpacing:'0.15em',opacity:0.9}}>EST.</div>
                <div style={{fontFamily:'var(--font-serif)',fontSize:24,lineHeight:1,letterSpacing:'-0.02em'}}>2024</div>
                <div style={{fontFamily:'var(--font-mono)',fontSize:7,letterSpacing:'0.12em',marginTop:4,opacity:0.9,textAlign:'center'}}>VERIFIED<br/>TRIP REPORTS</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* THE ATLAS — clickable destination map */}
      <section className="page" style={{padding:'80px 40px 40px',position:'relative'}}>
        <SectionHead num="01" eyebrow="The atlas" title="Where do you want to go?" lead="Five live destinations on three continents. Click a pin to see clinics, prices and trip reports from patients who've already been."/>
        <DestinationMap navigate={navigate} destinations={featured}/>

        {/* Country quick-jump cards */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:16,marginTop:24}}>
          {featured.map(d => (
            <button key={d.id} onClick={()=>navigate('destination',d.id)} className="card" style={{padding:'18px 20px',textAlign:'left',cursor:'pointer'}}>
              <div className="num-eyebrow" style={{marginBottom:6}}>{d.region}</div>
              <div style={{fontFamily:'var(--font-serif)',fontSize:20,letterSpacing:'-0.01em',marginBottom:10}}>{d.name}</div>
              <div style={{display:'flex',justifyContent:'space-between',fontFamily:'var(--font-mono)',fontSize:11,color:'var(--silver-600)'}}>
                <span style={{color:'var(--moss)'}}>−{d.avgSavings}%</span>
                <span>{d.clinicCount} clinics</span>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* THE MATH */}
      <section className="page" style={{padding:'72px 40px 56px'}}>
        <SectionHead num="02" eyebrow="The math" title="Two columns. Receipts on both." lead="Every clinic listing on this site comes with the actual all-in cost — procedure, flight, hotel, food. Nothing hidden. The savings are what's left when everything's on the page." action={<button className="btn btn-ghost btn-sm" onClick={()=>navigate('math')}>Open the calculator <span style={{fontFamily:'var(--font-mono)'}}>→</span></button>}/>
        <Ledger procedure={procRC} destination={tj}/>
      </section>

      {/* DESTINATIONS — postcard grid */}
      <section style={{background:'linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.6) 60%, transparent 100%)',padding:'72px 0'}}>
        <div className="page" style={{padding:'0 40px'}}>
          <SectionHead num="03" eyebrow="The destinations" title="Five places. Five vacations. Same dental work." lead="A postcard rack of vetted destinations across the Americas, Europe and Asia."/>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
            {featured.map(d => <DestinationCard key={d.id} d={d} navigate={navigate}/>)}
          </div>
        </div>
      </section>

      {/* CURATED COMBOS */}
      <section className="page" style={{padding:'72px 40px'}}>
        <SectionHead num="04" eyebrow="Curated combos" title="Procedure + trip, ledger-balanced." lead="Hand-picked clinic + itinerary combinations where the math works."/>
        <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:20}}>
          {combos.map((c,i) => {
            const dest = featured.find(d => d.id === c.destinationId);
            return (
              <a key={c.id} href="#" onClick={(e)=>{e.preventDefault();navigate('destination',c.destinationId);}} style={{textDecoration:'none',color:'var(--ink)'}}>
                <article className="card" style={{padding:0,display:'grid',gridTemplateColumns:'220px 1fr',overflow:'hidden'}}>
                  <DestinationArt id={dest.art} height={220}/>
                  <div style={{padding:'24px 26px',display:'flex',flexDirection:'column',justifyContent:'space-between'}}>
                    <div>
                      <div className="num-eyebrow" style={{marginBottom:8}}>0{i+1} · {c.vibe}</div>
                      <div style={{fontFamily:'var(--font-serif)',fontSize:23,lineHeight:1.15,letterSpacing:'-0.015em',marginBottom:10}}>{c.title}</div>
                    </div>
                    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,paddingTop:14,borderTop:'1px solid var(--silver-200)',fontFamily:'var(--font-mono)',fontSize:12}}>
                      <div>
                        <span style={{color:'var(--silver-500)',textTransform:'uppercase',letterSpacing:'0.08em',fontSize:10}}>US price</span>
                        <div style={{fontSize:18,color:'var(--ink)',textDecoration:'line-through',textDecorationColor:'var(--rust)',textDecorationThickness:1.5}}>{fmtUSD(c.usPrice)}</div>
                      </div>
                      <div>
                        <span style={{color:'var(--silver-500)',textTransform:'uppercase',letterSpacing:'0.08em',fontSize:10}}>All-in abroad</span>
                        <div style={{fontSize:18,color:'var(--moss)'}}>{fmtUSD(c.totalAbroad)}</div>
                      </div>
                    </div>
                  </div>
                </article>
              </a>
            );
          })}
        </div>
      </section>

      {/* TRIP REPORTS + Latest crossings ticker */}
      <section style={{background:'linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%)',padding:'72px 0',borderTop:'1px solid var(--silver-200)',borderBottom:'1px solid var(--silver-200)'}}>
        <div className="page" style={{padding:'0 40px'}}>
          <SectionHead num="05" eyebrow="From the road" title="Trip reports & latest crossings." lead="Real patients, real receipts, freshly logged." action={<button className="btn btn-ghost btn-sm" onClick={()=>navigate('forum')}>All trip reports →</button>}/>

          <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:32,alignItems:'flex-start'}}>
            {/* Recent reviews */}
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16}}>
              {recentReviews.map(r => <TripReportCard key={r.id} r={r} navigate={navigate}/>)}
            </div>
            {/* Live ticker */}
            <div className="glass-dark" style={{padding:'24px 26px'}}>
              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16}}>
                <span className="num-eyebrow" style={{color:'var(--silver-300)'}}>Latest crossings</span>
                <span style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--moss)'}}>● LIVE</span>
              </div>
              <ul style={{listStyle:'none',padding:0,margin:0,fontSize:14,lineHeight:1.5,color:'var(--ivory)'}}>
                {[
                  ['2 min ago','Marcus B. crossed at PedWest','+ saved $2,520'],
                  ['28 min','Janet T. landed in BKK','+ All-on-4 begins'],
                  ['1 hr','Diane R. checked into Bruma','+ wine country'],
                  ['2 hr','Robert K. landed in BUD','+ implant restore'],
                  ['4 hr','Linda H. submitted CR review','+ saved $9,420'],
                ].map((r,i) => (
                  <li key={i} style={{display:'grid',gridTemplateColumns:'auto 1fr',columnGap:14,padding:'10px 0',borderTop: i ? '1px dashed rgba(244,241,234,0.18)' : 'none'}}>
                    <span style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--silver-400)',letterSpacing:'0.08em',textTransform:'uppercase'}}>{r[0]}</span>
                    <div>
                      <div>{r[1]}</div>
                      <div style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--moss)',marginTop:2}}>{r[2]}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* CONCIERGE PULL-QUOTE */}
      <section style={{background:'linear-gradient(180deg, #2A2D33 0%, #131519 100%)',color:'var(--ivory)',padding:'96px 0',position:'relative',overflow:'hidden'}}>
        <div style={{position:'absolute',inset:0,background:'radial-gradient(800px 400px at 80% 0%, rgba(194,94,58,0.18), transparent 60%)',pointerEvents:'none'}}></div>
        <div className="page" style={{padding:'0 40px',display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:80,alignItems:'center',position:'relative'}}>
          <div>
            <div className="num-eyebrow" style={{color:'var(--silver-400)',marginBottom:24}}>06 · The concierge layer</div>
            <h2 style={{fontSize:56,lineHeight:1.02,letterSpacing:'-0.025em',color:'var(--ivory)',margin:'0 0 24px'}}>Fernando met me at the border.</h2>
            <p style={{fontSize:18,color:'var(--silver-300)',lineHeight:1.6,marginBottom:28}}>
              Border-crossing escorts. Spouse companions. Translators. Recovery food delivery. The infrastructure around the chair — reviewable, like everything else.
            </p>
            <button className="btn btn-ghost" onClick={()=>navigate('concierges')}>Browse 18 vetted concierges →</button>
          </div>
          <blockquote style={{margin:0,fontFamily:'var(--font-serif)',fontSize:30,lineHeight:1.3,letterSpacing:'-0.01em',color:'var(--ivory)',borderLeft:'2px solid var(--terracotta)',paddingLeft:32}}>
            "Fernando held a sign with my name. He'd been there since 7:30. Walked me 14 minutes to the clinic, paid for nothing on the way, didn't let a single tout get within ten feet of me. The $80 a day was worth more than the procedure."
            <footer style={{marginTop:24,fontFamily:'var(--font-mono)',fontSize:12,color:'var(--silver-400)',textTransform:'uppercase',letterSpacing:'0.1em'}}>— Marcus B., San Diego · March 2026</footer>
          </blockquote>
        </div>
      </section>

      {/* COMMUNITY */}
      <section className="page" style={{padding:'96px 40px'}}>
        <SectionHead num="07" eyebrow="The community" title="Where the trip reports get cross-examined." lead="A board, not a comments section. Patients, mods, and the occasional concierge — answering each other's questions in public." action={<button className="btn btn-ghost btn-sm" onClick={()=>navigate('forum')}>Open the board →</button>}/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
          {window.DTR_DATA.forumThreads.slice(0,4).map((t,i) => (
            <a key={t.id} href="#" onClick={(e)=>{e.preventDefault();navigate('thread',t.id);}} className="card" style={{padding:'22px 24px',textDecoration:'none',color:'var(--ink)'}}>
              <div style={{display:'flex',justifyContent:'space-between',marginBottom:10}}>
                <span className="tag tag-signal">{t.category}</span>
                <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--silver-500)'}}>↑ {t.upvotes} · {t.replies} replies</span>
              </div>
              <div style={{fontFamily:'var(--font-serif)',fontSize:21,lineHeight:1.2,letterSpacing:'-0.015em',marginBottom:8}}>{t.pinned && <span style={{color:'var(--terracotta)',marginRight:6}}>📌</span>}{t.title}</div>
              <div style={{fontSize:14,color:'var(--fg-2)',lineHeight:1.5,marginBottom:12}}>{t.excerpt}</div>
              <div className="num-eyebrow">u/{t.author} · {t.age}</div>
            </a>
          ))}
        </div>
      </section>
    </main>
  );
};

window.Home = Home;