// pricing.jsx
const PrHero = () => (
  <section style={{paddingTop:140, paddingBottom:60, paddingLeft:'var(--site-pad)', paddingRight:'var(--site-pad)', background:'var(--paper)', textAlign:'center'}}>
    <div className="reveal" style={{maxWidth:900, margin:'0 auto'}}>
      <div className="tag-pill" style={{marginBottom:24}}><span className="dot"></span>Pricing</div>
      <h1 className="display" style={{maxWidth:'14ch', margin:'0 auto', fontSize:'clamp(56px, 9vw, 130px)'}}>Free for you. <em>Fair to clinics.</em></h1>
      <p className="lead" style={{margin:'28px auto 0', textAlign:'center'}}>Patients pay nothing. Clinics pay one simple rate.</p>
    </div>
  </section>
);

const PrPlans = () => (
  <section style={{padding:'60px var(--site-pad) clamp(80px, 14vh, 160px)', background:'var(--paper)'}}>
    <div style={{maxWidth:1100, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24}}>
      {[
        {name:'Patient', price:'$0', sub:'forever', features:['Find covered providers','Real-time coverage check','In-app booking','All records in one place','Family profiles'], cta:'Download the App', dark:false, accent:'var(--soft-pink)'},
        {name:'Clinic', price:'$99', sub:'per practitioner / month', features:['Everything in ProviderOS','AI Patient Snapshot','SOAP Copilot','Claims Preflight','TELUS Health integration','Stripe payments','Up to 3 locations'], cta:'Start Free Trial', dark:true, featured:true, accent:'var(--mark-cyan)'},
        {name:'Enterprise', price:'Custom', sub:'multi-location & ownership groups', features:['Custom contract','Volume pricing','Dedicated CSM','SAML SSO','Custom integrations','Priority support'], cta:'Contact Sales', dark:false, accent:'var(--brand-tertiary)'},
      ].map((plan, i) => (
        <div key={i} className={`reveal delay-${i+1}`} style={{
          padding:36, borderRadius:24,
          background: plan.dark ? 'linear-gradient(160deg, var(--brand-primary), #2a3563)' : 'white',
          color: plan.dark ? 'white' : 'var(--ink)',
          boxShadow: plan.featured ? '0 30px 60px rgba(28,38,74,0.25)' : '0 8px 30px rgba(11,18,40,0.05)',
          transform: plan.featured ? 'translateY(-12px)' : 'none',
          position:'relative',
          border: plan.dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--grey-10)',
        }}>
          {plan.featured && <div className="tag-pill" style={{position:'absolute', top:-14, left:'50%', transform:'translateX(-50%)', background:'var(--mark-cyan)', borderColor:'transparent', color:'var(--ink)', fontSize:11}}>Most popular</div>}
          <div className="eyebrow" style={{color: plan.dark ? plan.accent : 'var(--brand-primary)', opacity:1}}>{plan.name}</div>
          <div style={{display:'flex', alignItems:'baseline', gap:8, marginTop:14}}>
            <div style={{fontFamily:'var(--serif)', fontSize:56, fontWeight:500, lineHeight:1, letterSpacing:'-0.02em'}}>{plan.price}</div>
            <div style={{fontSize:13, color: plan.dark ? 'rgba(255,255,255,0.6)' : 'var(--grey-60)'}}>{plan.sub}</div>
          </div>
          <div style={{height:1, background: plan.dark ? 'rgba(255,255,255,0.1)' : 'var(--grey-10)', margin:'28px 0'}}/>
          <ul style={{listStyle:'none', padding:0, margin:'0 0 32px', display:'flex', flexDirection:'column', gap:12}}>
            {plan.features.map((f, j) => (
              <li key={j} className="row gap-12" style={{alignItems:'center'}}>
                <span className="mi" style={{fontSize:18, color: plan.dark ? plan.accent : 'var(--brand-primary)'}}>check</span>
                <span style={{fontSize:14}}>{f}</span>
              </li>
            ))}
          </ul>
          <a href={plan.name === 'Clinic' ? '/demo' : (plan.name === 'Patient' ? '/#download' : '/demo')} className={`btn ${plan.dark ? 'btn-cyan' : 'btn-primary'}`} style={{width:'100%', justifyContent:'center', padding:'14px 22px'}}>{plan.cta} <span className="arrow">→</span></a>
        </div>
      ))}
    </div>
  </section>
);

const PrFAQ = () => (
  <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--paper-2)'}}>
    <div style={{maxWidth:900, margin:'0 auto'}}>
      <div className="reveal text-center" style={{marginBottom:48}}>
        <div className="eyebrow">FAQ</div>
        <h2 className="h1 mt-16">Quick <em>answers.</em></h2>
      </div>
      {[
        {q:'Is it really free for patients?', a:'Yes. Always. No upgrade tier, no premium features held back.'},
        {q:'How does Synced make money?', a:'Clinics pay a flat monthly fee per practitioner. That\'s it.'},
        {q:'What about credit card fees?', a:'Standard Stripe rates apply on payments. We don\'t take a cut.'},
        {q:'Is there a free trial for clinics?', a:'30 days. Full access. No card required to start.'},
      ].map((f, i) => (
        <details key={i} className="reveal" style={{padding:'24px 28px', background:'white', borderRadius:16, marginBottom:12, boxShadow:'0 2px 10px rgba(11,18,40,0.04)', cursor:'pointer'}}>
          <summary style={{fontFamily:'var(--serif)', fontSize:22, fontWeight:500, listStyle:'none'}}>{f.q}</summary>
          <p style={{marginTop:12, color:'var(--grey-70)', lineHeight:1.6}}>{f.a}</p>
        </details>
      ))}
    </div>
  </section>
);

const PrPage = () => { useReveal(); return (<div><Nav active="pricing"/><PrHero/><PrPlans/><PrFAQ/><Footer/></div>); };
ReactDOM.createRoot(document.getElementById('root')).render(<PrPage/>);