function Membership({onBook}){
  const {Button,Badge,Tabs}=window.VosTrainingClubDesignSystem_09863c;
  const [billing,setBilling]=React.useState('Maand');
  const fmt=cents=>(cents/100).toFixed(2).replace('.',',');
  const plans=[
    {name:'Basic toegang',priceCents:2750,feat:['24/7 toegang tot de studio','Vrij trainen, eigen tempo','Inclusief app & rooster'],flame:false},
    {name:'Persoonlijke begeleiding',priceCents:6500,feat:['Gestructureerd trainingsschema','Loggen & voortgang in de app','Metingen en doelrealisatie','Train in je eigen tijd'],flame:true},
    {name:'Personal Training',priceCents:18000,feat:['1-op-1 begeleiding, flexibel ingepland','Coaching op houding & techniek','Snelste doelrealisatie','1x per week samen personal training'],flame:false}
  ];
  return (
    <section id='membership' className='vw-section vw-section--raised'>
      <div className='vw-section__head vw-center'>
        <div className='vw-overline'>Lidmaatschap</div>
        <h2 className='vw-h2'>Simpel. Persoonlijk.<br/>Geen gedoe.</h2>
        <div style={{marginTop:24,display:'flex',justifyContent:'center'}}><Tabs items={['Maand','Jaar']} value={billing} onChange={setBilling}/></div>
        {billing==='Jaar' && <p style={{marginTop:12,fontSize:'.85rem',color:'var(--text-muted)'}}>10% korting, jaarlijks vooraf te voldoen.</p>}
      </div>
      <div className='vw-grid3'>
        {plans.map((p,i)=>{
          const isYear=billing==='Jaar';
          const cents=isYear?Math.round(p.priceCents*12*0.9):p.priceCents;
          const per=isYear?'jaar':'mnd';
          return (
          <div key={i} className={'vw-plan'+(p.flame?' vw-plan--flame':'')}>
            {p.flame && <div className='vw-plan__badge'><Badge variant='flame'>Populair</Badge></div>
            }
            <div className='vw-plan__name'>{p.name}</div>
            <div className='vw-plan__price'><span className='vw-plan__cur'>&euro;</span>{fmt(cents)}<span className='vw-plan__per'>/{per}</span></div>
            <ul className='vw-plan__feat'>{p.feat.map((f,j)=>(<li key={j}>{f}</li>))}</ul>
            <Button variant={p.flame?'primary':'secondary'} onClick={onBook} style={{width:'100%'}}>Kies {p.name}</Button>
          </div>
          );
        })}
      </div>
    </section>
  );
}
window.Membership=Membership;