// patients.jsx — consumer deep-dive

const PHero = () => (
  <section style={{position:'relative', paddingTop:140, paddingBottom:80, paddingLeft:'var(--site-pad)', paddingRight:'var(--site-pad)', overflow:'hidden', background:'linear-gradient(180deg, var(--paper) 0%, var(--soft-pink) 100%)'}}>
    <div className="blob" style={{width:500, height:500, top:-100, left:-100, background:'radial-gradient(circle, var(--soft-sky) 0%, transparent 70%)'}}></div>
    <div style={{maxWidth:'var(--max-w)', margin:'0 auto', position:'relative', display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:60, alignItems:'center'}}>
      <div className="reveal">
        <div className="tag-pill" style={{marginBottom:24}}>
          <span className="dot"></span>
          For Patients
        </div>
        <h1 className="display" style={{fontSize:'clamp(48px, 8vw, 110px)'}}>Care that <em>shows up</em> for&nbsp;you.</h1>
        <p className="lead mt-24" style={{maxWidth:'40ch'}}>One app for finding providers, checking coverage, booking visits, and keeping every record in one place.</p>
        <div className="row gap-12 mt-32" style={{flexWrap:'wrap'}}>
          <a href="#download" className="btn btn-primary" style={{padding:'18px 28px', fontSize:16}}>Download the App <span className="arrow">→</span></a>
          <a href="#how" className="btn btn-ghost">See how it works</a>
        </div>
      </div>
      <div className="reveal delay-2" style={{position:'relative', height:520}}>
        <div style={{position:'absolute', left:'50%', top:0, transform:'translateX(-50%)', width:280, height:520, borderRadius:44, background:'linear-gradient(160deg, var(--ink), #2a3563)', padding:8, boxShadow:'0 40px 80px -20px rgba(11,18,40,0.45)'}}>
          <div style={{width:'100%', height:'100%', borderRadius:36, background:'linear-gradient(180deg, white, var(--warm-cream))', padding:'56px 16px 16px', display:'flex', flexDirection:'column', gap:12}}>
            <div style={{fontFamily:'var(--serif)', fontSize:24, fontWeight:500, lineHeight:1.05}}>Find care</div>
            <div className="surface" style={{padding:12}}>
              <div className="row gap-10" style={{alignItems:'center'}}>
                <span className="mi" style={{fontSize:18, color:'var(--grey-60)'}}>search</span>
                <div style={{fontSize:12, color:'var(--grey-60)'}}>Massage near me · covered</div>
              </div>
            </div>
            <div className="surface" style={{padding:12}}>
              <div style={{fontSize:10, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'#1a7a3d'}}>3 covered providers</div>
              <div style={{fontSize:13, fontWeight:600, marginTop:4}}>R. Chen, RMT</div>
              <div style={{fontSize:11, color:'var(--grey-60)'}}>Tue 10:30 · $0 to you</div>
            </div>
            <div className="surface" style={{padding:12, background:'var(--brand-primary)', color:'white'}}>
              <div style={{fontSize:11, fontWeight:600}}>Tap to book</div>
            </div>
          </div>
        </div>
        <div className="surface" style={{position:'absolute', right:0, top:60, padding:14, width:200, animation:'float-mid 6s ease-in-out infinite'}}>
          <div style={{fontSize:10, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--grey-60)', marginBottom:6}}>Coverage</div>
          <div style={{height:6, borderRadius:99, background:'var(--grey-5)', overflow:'hidden'}}><div style={{width:'62%', height:'100%', background:'linear-gradient(90deg, var(--mark-cyan), var(--brand-secondary))'}}></div></div>
          <div style={{fontSize:11, color:'#1a7a3d', fontWeight:600, marginTop:6}}>$190 left · Massage</div>
        </div>
      </div>
    </div>
  </section>
);

const PFeatures = () => {
  const features = [
    {tag:'Discover', title:'Find the right provider', body:'Search by discipline, coverage, and availability. Filter by what your insurance actually pays for.', tone:'var(--soft-pink)', icon:'search'},
    {tag:'Coverage', title:'No surprises at checkout', body:'See your out-of-pocket before you book. We check your insurance in real time.', tone:'var(--soft-sky)', icon:'verified', big:true},
    {tag:'Book', title:'Real-time availability', body:'Two taps. Done. No phone tag. No "we\u2019ll call you back."', tone:'var(--soft-mint)', icon:'event_available'},
    {tag:'Records', title:'Receipts, recaps, records', body:'Every visit, every receipt, every note — kept together. Always with you.', tone:'var(--soft-lavender)', icon:'folder_open'},
    {tag:'Reminders', title:'Never miss a visit', body:'Smart reminders that learn your routine. Reschedule with one tap.', tone:'var(--brand-tertiary)', icon:'notifications_active'},
    {tag:'Family', title:'Your whole household', body:'Manage care for kids, parents, partners — all in one place.', tone:'var(--soft-pink)', icon:'family_restroom'},
  ];
  return (
    <section id="how" style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--paper)'}}>
      <div style={{maxWidth:'var(--max-w)', margin:'0 auto'}}>
        <div className="reveal" style={{maxWidth:800, marginBottom:64}}>
          <div className="eyebrow">What's in the app</div>
          <h2 className="h1 mt-16">Everything <em>under one tap.</em></h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:20}}>
          {features.map((f, i) => (
            <div key={i} className={`reveal delay-${(i%5)+1}`} style={{
              gridColumn: f.big ? 'span 6' : 'span 3',
              padding:32, borderRadius:24,
              background: f.big ? `linear-gradient(135deg, white, ${f.tone})` : 'white',
              boxShadow:'0 8px 30px rgba(11,18,40,0.04)',
              transition:'transform .4s, box-shadow .4s',
              minHeight: f.big ? 280 : 240,
              position:'relative', overflow:'hidden',
            }}
            onMouseEnter={e => e.currentTarget.style.transform='translateY(-4px)'}
            onMouseLeave={e => e.currentTarget.style.transform=''}>
              <div className="center" style={{width:48, height:48, borderRadius:14, background:f.tone, color:'var(--brand-primary)', marginBottom:18}}>
                <span className="mi mi-fill" style={{fontSize:24}}>{f.icon}</span>
              </div>
              <div className="eyebrow" style={{marginBottom:8}}>{f.tag}</div>
              <h3 className={f.big ? 'h2' : 'h3'} style={{marginBottom:10, maxWidth: f.big ? '20ch' : '18ch'}}>{f.title}</h3>
              <p style={{color:'var(--grey-60)', margin:0, lineHeight:1.5, maxWidth: f.big ? '52ch' : 'none'}}>{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const PHow = () => (
  <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--warm-cream)'}}>
    <div style={{maxWidth:'var(--max-w)', margin:'0 auto'}}>
      <div className="reveal text-center" style={{marginBottom:72}}>
        <div className="eyebrow">How it works</div>
        <h2 className="h1 mt-16" style={{maxWidth:'18ch', margin:'16px auto 0'}}>Three steps. <em>That's it.</em></h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:32}}>
        {[
          {n:'01', title:'Connect your coverage', body:'One-time link to your insurance. Takes 30 seconds.'},
          {n:'02', title:'Find what fits', body:'Browse covered providers near you. Sort by next available.'},
          {n:'03', title:'Book and go', body:'Confirm in two taps. Walk in knowing exactly what you owe.'},
        ].map((s, i) => (
          <div key={i} className={`reveal delay-${i+1}`}>
            <div style={{fontFamily:'var(--serif)', fontSize:80, fontWeight:500, color:'var(--brand-primary)', opacity:0.25, lineHeight:1}}>{s.n}</div>
            <h3 className="h3 mt-16" style={{marginBottom:12}}>{s.title}</h3>
            <p style={{color:'var(--grey-70)', lineHeight:1.5}}>{s.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const PCoverage = () => (
  <section id="coverage" style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--paper-2)'}}>
    <div style={{maxWidth:'var(--max-w)', margin:'0 auto'}}>
      <div className="reveal" style={{textAlign:'center', marginBottom:48}}>
        <div className="eyebrow">Insurance partners</div>
        <h2 className="h1 mt-16" style={{maxWidth:'20ch', margin:'16px auto 0'}}>We work with <em>your plan.</em></h2>
      </div>
      <div className="reveal" style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
        {['Sun Life','Manulife','Green Shield','Blue Cross','Canada Life','Desjardins','Equitable Life','TELUS Health'].map((b, i) => (
          <div key={i} className="surface" style={{padding:'24px 20px', textAlign:'center', fontFamily:'var(--serif)', fontSize:20, fontWeight:500, color:'var(--brand-primary)', letterSpacing:'-0.01em'}}>{b}</div>
        ))}
      </div>
    </div>
  </section>
);

const PClose = () => (
  <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'linear-gradient(160deg, var(--warm-cream) 0%, var(--soft-pink) 100%)', textAlign:'center'}}>
    <div className="reveal" style={{maxWidth:900, margin:'0 auto'}}>
      <h2 className="h1" style={{maxWidth:'14ch', margin:'0 auto'}}>Get your health <em>in&nbsp;sync.</em></h2>
      <p className="lead" style={{margin:'24px auto 40px'}}>Free to download. Free to use.</p>
      <div className="row gap-12" style={{justifyContent:'center', flexWrap:'wrap'}}>
        <a href="#" className="btn btn-primary" style={{padding:'18px 28px', fontSize:16}}>
          <img src="/assets/apple-logo.svg" alt="" width={22} height={22} style={{flexShrink:0}} />
          App Store
        </a>
        <a href="#" className="btn btn-primary" style={{padding:'18px 28px', fontSize:16}}>
          <img src="/assets/google-play-logo.svg" alt="" width={22} height={22} style={{flexShrink:0}} />
          Google Play
        </a>
      </div>
    </div>
  </section>
);

const PPage = () => {
  useReveal(); useParallax();
  return (<div><Nav active="patients"/><PHero/><PFeatures/><PHow/><PCoverage/><PClose/><Footer/></div>);
};
ReactDOM.createRoot(document.getElementById('root')).render(<PPage/>);