const {Badge,DestinationCard,SeasonalCard}=window.VedutaDesignSystem_f6874f;
function DestinationsPage({onOpenCity,onNavigate}){
  const [filter,setFilter]=React.useState(null);
  const moods=['Electric','Culture','Quiet','Professional','Coast','Retreat','Adventure'];
  const cities=window.VEDUTA_CITIES.filter(([c,s,tags])=>!filter||tags.includes(filter));
  const seasonals=window.VEDUTA_SEASONALS.filter(([e,c])=>!filter||(window.VEDUTA_CITY_DETAIL[c]&&window.VEDUTA_CITY_DETAIL[c].tags.includes(filter)));
  return <div>
    <div className="page-hero" style={{padding:'170px 48px 90px',position:'relative',overflow:'hidden',background:'var(--navy-deep)',textAlign:'center'}}>
      <img src="assets/cities/prague/hero.jpg" alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',animation:'vedKen 45s ease-in-out infinite alternate'}}/>
      <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(19,31,56,.78) 0%,rgba(27,42,74,.52) 50%,rgba(19,31,56,.88) 100%)'}}></div>
      <div style={{position:'relative'}}>
      <div style={{fontSize:'12px',letterSpacing:'0.28em',textTransform:'uppercase',color:'var(--gold)',fontWeight:500,marginBottom:'18px'}}>The Portfolio</div>
      <h1 style={{margin:0,fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'var(--text-h1)',color:'var(--text-on-dark)'}}>Fifteen cities, zero research required</h1>
      </div>
      <VCredit id="prague"/>
    </div>
    <VSection style={{paddingTop:'64px'}}>
      <div style={{display:'flex',gap:'10px',flexWrap:'wrap',marginBottom:'36px'}}>
        {moods.map(m=><span key={m} onClick={()=>setFilter(filter===m?null:m)} style={{cursor:'pointer',opacity:!filter||filter===m?1:.35,transition:'opacity var(--dur-fast) var(--ease-out)'}}><Badge mood={m}/></span>)}
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(200px,1fr))',gap:'18px'}}>
        {cities.map(([city,slug,tags])=><div key={city} onClick={()=>onOpenCity(city)} style={{cursor:'pointer'}}><DestinationCard city={city} gradient={slug} img={'assets/cities/'+slug+'/hero.jpg'} tags={tags}/></div>)}
      </div>
      {seasonals.length>0&&<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(170px,1fr))',gap:'18px',marginTop:'24px'}}>
        {seasonals.map(([e,c,s,se,slug])=><div key={c} onClick={()=>onOpenCity(c)} style={{cursor:'pointer'}}><VSeasonalCard emoji={e} city={c} subtitle={s} season={se} img={'assets/cities/'+slug+'/hero.jpg'}/></div>)}
      </div>}
      <VUpsell tier="01" name="Curated Database" line="The full portfolio, updated every six months. $250/year." cta="Compare Tiers" onNavigate={onNavigate} style={{marginTop:'40px'}}/>
    </VSection>
    <VSection bg="var(--grad-hero)" dark center headline="Fifteen cities, one waitlist" intro="Founding members get first access and locked-in pricing when we launch.">
      <VWaitlist/>
    </VSection>
  </div>;
}
window.DestinationsPage=DestinationsPage;