const {Button,Badge,StepItem}=window.VedutaDesignSystem_f6874f;
const TIER_SLUGS=['database','concie-agent','scout','owner'];
const TIER_DETAIL=[
 {n:'01',name:'Curated Database',tag:'We did the research. You reap the rewards.',price:'$250/year',note:'monthly increments on an annual contract · 10% off paid up front',
  story:'The Veduta Curated Database is the portfolio itself: fifteen cities of personally vetted properties, restaurants, and experiences, refreshed every six months. It\u2019s $250 a year — payable in monthly increments on an annual contract, with 10% off if you pay cash up front.',
  feats:['Curated properties across 15 cities','Search by mood — Electric, Culture, Coast, Quiet','Guides updated every six months','Direct booking','Exclusive Community Events'],cta:'Get Access'},
 {n:'02',name:'The Concie-agent',tag:'Tell us where and when. We handle everything else.',price:'$50/month',note:'or $600/yr concierge reservation · + 20% on travel we book',featured:true,
  story:'A travel agent and a concierge in one. We book all of your travel using our partnership discounts and charge 20% on top as our fee, while the $600-a-year (or $50-a-month) concierge reservation holds our team\u2019s time for you — before the trip and during it.',
  feats:['Everything in the Curated Database','All travel booked at partnership discounts','A concierge while you travel, not just before','Full itinerary, iterated with you','Our team\u2019s time, reserved for you'],cta:'Get Started'},
 {n:'03',name:'The Scout',tag:'We go first. Everything is perfect before you arrive.',price:'$5,000+',note:'per trip · 100% bespoke',
  story:'The Scout is 100% bespoke, built entirely on your travel designs and wishes. Our job is to make whatever you (legally) want to do possible and easy: we travel ahead of you, walk every step of the plan in person, and stay on call while you\u2019re there.',
  feats:['Everything in the Concie-agent','Built entirely on your designs and wishes','Advance scouting of your exact itinerary','On-the-ground preparation before arrival','Real-time trip management','Optional travel companion'],cta:'Inquire'},
 {n:'04',name:'The Owner',tag:'Travel to your own places.',price:'$35,000+',note:'investment · accredited investors only',
  story:'The portfolio\u2019s best properties, owned in tenths. Twenty-one days a year in a place that\u2019s yours, rental income intended to offset the carrying costs, and reservations booked six months in advance via our proprietary digital platform. Owners must be accredited investors and meet the financial parameters set by local regulators. Every property is offered separately under its own legal agreement and documents; nothing here is an offer or a guarantee.',
  feats:['Fractional ownership — 1 of 10 shares','21 usage days per year','Rental income intended to offset costs','Potential for appreciation','Professional management','Reservations booked 6 months in advance on our proprietary platform','Separate legal agreement and documents per property'],cta:'Learn About Ownership'}
];
function MembershipPage({onNavigate,section}){
  const refs=React.useRef([]);
  const goTo=i=>{const el=refs.current[i];if(el)window.scrollTo({top:el.getBoundingClientRect().top+window.scrollY-70,behavior:'smooth'});};
  React.useEffect(()=>{
    const i=TIER_SLUGS.indexOf(section);
    if(i<0)return;
    const t=setTimeout(()=>goTo(i),120);
    return ()=>clearTimeout(t);
  },[section]);
  const rows=[
    ['Curated property portfolio','✓','✓','✓','✓'],
    ['Guides updated every 6 months','✓','✓','✓','✓'],
    ['Direct booking','✓','✓','✓','✓'],
    ['Exclusive Community Events','✓','✓','✓','✓'],
    ['Travel booked at partnership discounts','—','✓','✓','✓'],
    ['Concierge during travel','—','✓','✓','✓'],
    ['Full itinerary with iterations','—','✓','✓','✓'],
    ['100% bespoke trip design','—','—','✓','✓'],
    ['Advance scouting & real-time management','—','—','✓','✓'],
    ['Fractional ownership & equity','—','—','—','✓'],
    ['Usage days per year','—','—','—','21']
  ];
  const faqs=[
    ['How does the Curated Database work?','It’s $250 a year, updated every six months. Pay in monthly increments on an annual contract, or take 10% off by paying cash up front.'],
    ['What does the Concie-agent actually cost?','We book all of your travel using our partnership discounts, then charge 20% on top as our fee. A $600/year (or $50/month) concierge reservation holds our team’s time for you. You see the math before anything is booked.'],
    ['Is The Scout per trip or annual?','Per trip, from $5,000, and 100% bespoke — scoped entirely to your designs, destination, and dates. One invoice, no surprises.'],
    ['How does ownership work?','Each Owner property is split ten ways. You get 21 usage days a year, with reservations booked six months in advance on our proprietary platform. Owners must be accredited investors and meet the financial parameters set by local regulators. Every property is offered separately with its own legal agreement, diligence, and financial documents; nothing on this site is an offer or a guarantee. The Ownership page has the full picture.'],
    ['Can I switch tiers?','Any time. Most members start with the Database and move up after the first trip.']
  ];
  const [open,setOpen]=React.useState(0);
  const th={fontFamily:'var(--font-sans)',fontSize:'11px',letterSpacing:'0.2em',textTransform:'uppercase',fontWeight:500,color:'var(--navy)',padding:'14px 16px',textAlign:'center',borderBottom:'2px solid var(--gold)'};
  return <div>
    <div className="page-hero" style={{padding:'190px 48px 110px',position:'relative',overflow:'hidden',background:'var(--navy-deep)',textAlign:'center'}}>
      <img src="assets/cities/chicago/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,.8) 0%,rgba(27,42,74,.55) 50%,rgba(19,31,56,.9) 100%)'}}></div>
      <div style={{position:'relative',maxWidth:'720px',margin:'0 auto'}}>
        <div style={{fontSize:'12px',letterSpacing:'0.28em',textTransform:'uppercase',color:'var(--gold)',fontWeight:500,marginBottom:'20px'}}>Membership</div>
        <h1 style={{margin:0,fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'var(--text-hero)',color:'var(--text-on-dark)'}}>Your trip. Your terms.</h1>
        <p style={{margin:'24px auto 0',maxWidth:'520px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'18px',lineHeight:'var(--leading-body)',color:'rgba(245,241,232,.75)'}}>Four ways in — from the Curated Database to owning a piece of the portfolio.</p>
      </div>
      <VCredit id="chicago"/>
    </div>
    <div style={{background:'var(--cream)',borderBottom:'1px solid var(--border-subtle)',padding:'0 48px'}}>
      <div style={{maxWidth:'var(--content-max)',margin:'0 auto',display:'flex',justifyContent:'center',flexWrap:'wrap'}}>
        {TIER_DETAIL.map((t,i)=><a key={t.n} href="#" onClick={e=>{e.preventDefault();goTo(i);}} style={{display:'flex',alignItems:'baseline',gap:'10px',padding:'20px 26px',textDecoration:'none',borderBottom:'2px solid transparent'}}>
          <span style={{fontFamily:'var(--font-serif)',fontSize:'20px',color:'var(--gold)'}}>{t.n}</span>
          <span style={{fontFamily:'var(--font-sans)',fontSize:'12px',letterSpacing:'0.16em',textTransform:'uppercase',fontWeight:500,color:'var(--navy)'}}>{t.name}</span>
        </a>)}
      </div>
    </div>
    {TIER_DETAIL.map((t,i)=>{
      const dark=!!t.featured;
      return <section key={t.n} ref={el=>refs.current[i]=el} style={{background:dark?'var(--navy)':i%2?'var(--cream-warm)':'var(--cream)',padding:'96px 48px'}}>
        <div style={{maxWidth:'var(--content-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:'40px 72px',alignItems:'center'}}>
          <div>
            <div style={{display:'flex',alignItems:'baseline',gap:'18px'}}>
              <span style={{fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'96px',lineHeight:1,color:dark?'var(--gold)':'var(--gold)',opacity:dark?1:.55}}>{t.n}</span>
              {t.featured&&<span style={{background:'var(--gold)',color:'var(--navy)',fontFamily:'var(--font-sans)',fontSize:'10px',fontWeight:500,letterSpacing:'0.2em',textTransform:'uppercase',padding:'6px 14px',borderRadius:'var(--radius-pill)'}}>Most Popular</span>}
            </div>
            <h2 style={{margin:'10px 0 6px',fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'44px',color:dark?'var(--text-on-dark)':'var(--navy)'}}>{t.name}</h2>
            <div style={{fontFamily:'var(--font-serif)',fontStyle:'italic',fontWeight:300,fontSize:'20px',color:dark?'var(--gold)':'var(--terracotta)'}}>{t.tag}</div>
            <p style={{margin:'20px 0 26px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'16.5px',lineHeight:'var(--leading-body)',color:dark?'rgba(245,241,232,.8)':'var(--text-body)',maxWidth:'480px'}}>{t.story}</p>
            <div style={{display:'flex',alignItems:'baseline',gap:'12px',marginBottom:'26px'}}>
              <span style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'34px',color:'var(--gold)'}}>{t.price}</span>
              <span style={{fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'13px',color:dark?'var(--text-on-dark-muted)':'var(--text-muted)'}}>{t.note}</span>
            </div>
            <Button variant={dark?'primary':'outlineDark'} onClick={()=>onNavigate&&onNavigate(i===3?'Ownership':'Apply:'+TIER_SLUGS[i])}>{t.cta}</Button>
          </div>
          <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column'}}>
            {t.feats.map(f=><li key={f} style={{display:'flex',gap:'14px',alignItems:'baseline',padding:'14px 2px',borderBottom:'1px solid '+(dark?'rgba(245,241,232,.12)':'var(--border-subtle)'),fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'15.5px',lineHeight:1.5,color:dark?'var(--text-on-dark)':'var(--text-body)'}}>
              <span style={{color:'var(--gold)',fontFamily:'var(--font-serif)'}}>·</span>{f}</li>)}
          </ul>
        </div>
      </section>;
    })}
    <VSection label="Who We Accept" headline="Membership is a fit, not a fee" intro="Every request is reviewed by a person, and we decline the ones that aren't a fit. Money doesn't change the answer. Here's what does.">
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:'0 56px',maxWidth:'980px'}}>
        {[['You love travel','Not the airport part. The being-there part. You plan trips for fun even when you have nowhere to be.'],
          ['You love the arts','Architecture, food, painting, music. The portfolio is composed like a picture, and you notice.'],
          ['You embrace other cultures','When you\u2019re in someone else\u2019s country, you\u2019re in their space. You arrive curious and you adapt to them.'],
          ['You respect beautiful things','Our properties are decorated with care. Members treat them, and everything in them, like their own.'],
          ['You come to have fun','Great nights, long dinners, real laughter. Never destructive, never disrespectful, to anyone or anything.']].map(([t,d])=>
        <div key={t} style={{borderBottom:'1px solid var(--border-subtle)',padding:'22px 2px'}}>
          <div style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'23px',color:'var(--navy)'}}>{t}</div>
          <p style={{margin:'8px 0 0',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'15px',lineHeight:'var(--leading-body)',color:'var(--text-body)'}}>{d}</p>
        </div>)}
      </div>
    </VSection>
    <VSection bg="var(--cream-warm)" label="How It Works" headline="The membership process">
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))',gap:'40px 48px'}}>
        <StepItem number={1} title="Join the waitlist">Founding access opens to the waitlist first. No commitment, no card.</StepItem>
        <StepItem number={2} title="Request an invitation">A short introduction: how you travel, what you love, where you’ve been happiest.</StepItem>
        <StepItem number={3} title="A real review">A person reads every request. Some become a conversation. Not everyone is admitted, and that’s the point.</StepItem>
        <StepItem number={4} title="Welcome to the club">Pick your tier, book your first city, and meet the people you’ll be celebrating with.</StepItem>
      </div>
    </VSection>
    <VSection label="Side by Side" headline="What each tier includes">
      <div style={{overflowX:'auto'}}>
      <table style={{width:'100%',borderCollapse:'collapse',background:'var(--surface-card)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-md)'}}>
        <thead><tr><th style={{...th,textAlign:'left'}}></th><th style={th}>Database</th><th style={{...th,color:'var(--gold)'}}>Concie-agent</th><th style={th}>The Scout</th><th style={th}>The Owner</th></tr></thead>
        <tbody>{rows.map(([f,...cols],i)=><tr key={f} style={{background:i%2?'var(--cream)':'transparent'}}>
          <td style={{fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'14.5px',color:'var(--text-body)',padding:'12px 16px'}}>{f}</td>
          {cols.map((c,j)=><td key={j} style={{textAlign:'center',padding:'12px 16px',fontFamily:'var(--font-sans)',fontSize:'14px',color:c==='—'?'var(--text-muted)':j===1?'var(--gold)':'var(--navy)',fontWeight:c==='✓'?500:300}}>{c}</td>)}
        </tr>)}</tbody>
      </table>
      </div>
    </VSection>
    <VSection bg="var(--cream-warm)" label="Questions" headline="Before you ask" narrow>
      <div style={{display:'flex',flexDirection:'column',gap:'2px'}}>
        {faqs.map(([q,a],i)=><div key={q} style={{borderBottom:'1px solid var(--border-subtle)'}}>
          <div onClick={()=>setOpen(open===i?-1:i)} style={{cursor:'pointer',display:'flex',justifyContent:'space-between',alignItems:'center',padding:'20px 4px'}}>
            <span style={{fontFamily:'var(--font-serif)',fontSize:'21px',color:'var(--navy)'}}>{q}</span>
            <span style={{color:'var(--gold)',fontSize:'20px',fontFamily:'var(--font-serif)'}}>{open===i?'–':'+'}</span>
          </div>
          {open===i&&<p style={{margin:'0 0 22px',padding:'0 4px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'15.5px',lineHeight:'var(--leading-body)',color:'var(--text-body)',maxWidth:'560px'}}>{a}</p>}
        </div>)}
      </div>
      <div style={{marginTop:'52px',textAlign:'center'}}><Button size="lg" onClick={()=>onNavigate&&onNavigate('Apply')}>Request an Invitation</Button>
      <div style={{marginTop:'14px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'13px',color:'var(--text-muted)'}}>Launching Spring 2027 — requests are reviewed in the order received.</div></div>
    </VSection>
    <VSection bg="var(--grad-hero)" dark center headline="Founding members go first" intro="Waitlist members get early access to every tier and pricing locked for life.">
      <VWaitlist/>
    </VSection>
  </div>;
}
window.MembershipPage=MembershipPage;