// provideros.jsx — ProviderOS clinic page

const POHero = () => (
  <section style={{
    position:'relative', paddingTop:140, paddingBottom:100,
    paddingLeft:'var(--site-pad)', paddingRight:'var(--site-pad)',
    background:'linear-gradient(160deg, var(--ink) 0%, #2a3563 60%, var(--brand-primary) 100%)',
    backgroundColor:'var(--ink)',
    color:'white', overflow:'hidden',
  }}>
    <div style={{position:'absolute', inset:0,
      background:'radial-gradient(ellipse at top right, rgba(105,196,216,0.20), transparent 50%), radial-gradient(ellipse at bottom left, rgba(254,240,207,0.12), transparent 50%)'
    }}></div>
    <div className="dot-grid" style={{position:'absolute', inset:0, opacity:0.05}}></div>
    <div style={{maxWidth:'var(--max-w)', margin:'0 auto', position:'relative'}}>
      <div className="reveal text-center">
        <div className="tag-pill" style={{background:'rgba(255,255,255,0.08)', borderColor:'rgba(255,255,255,0.16)', color:'rgba(255,255,255,0.9)', marginBottom:32}}>
          <span className="dot" style={{background:'var(--mark-cyan)'}}></span>
          ProviderOS · The AI-Native Operating System
        </div>
      </div>
      <h1 className="display reveal delay-1 text-center" style={{color:'white', maxWidth:'14ch', margin:'0 auto'}}>
        Leave outdated processes <em style={{color:'var(--mark-cyan)'}}>behind.</em>
      </h1>
      <p className="lead reveal delay-2 text-center" style={{color:'rgba(255,255,255,0.7)', margin:'28px auto 0', textAlign:'center'}}>
        Prepare faster. Document smarter. Get paid sooner.
      </p>
      <div className="reveal delay-3" style={{display:'flex', justifyContent:'center', gap:14, marginTop:36, flexWrap:'wrap'}}>
        <a href="/demo" className="btn btn-cyan" style={{padding:'18px 28px', fontSize:16}}>
          See ProviderOS in Action <span className="arrow">→</span>
        </a>
        <a href="/founding" className="btn btn-ghost" style={{color:'white'}}>Founding Clinic Offer</a>
      </div>

      {/* Big dashboard mock */}
      <div className="reveal delay-4" style={{marginTop:80, position:'relative'}}>
        <div className="surface" style={{padding:14, background:'white'}}>
          <div className="row gap-8" style={{alignItems:'center', padding:'4px 8px 12px'}}>
            <div className="row gap-8">
              <div style={{width:10, height:10, borderRadius:'50%', background:'#FF5F57'}}></div>
              <div style={{width:10, height:10, borderRadius:'50%', background:'#FEBC2E'}}></div>
              <div style={{width:10, height:10, borderRadius:'50%', background:'#28C840'}}></div>
            </div>
            <div style={{flex:1}}/>
            <div style={{fontSize:11, color:'var(--grey-60)', fontWeight:600}}>step-up.synced.app</div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'220px 1fr', gap:12}}>
            <div style={{background:'var(--paper-2)', borderRadius:14, padding:14}}>
              <div style={{fontSize:11, fontWeight:700, color:'var(--brand-primary)', marginBottom:14}}>Step Up Clinic</div>
              {['Dashboard','Schedule','Patients','Staff','Charts','Claims','Reports','Settings'].map((n, i) => (
                <div key={i} className="row gap-12" style={{alignItems:'center', padding:'8px 10px', borderRadius:10, background: i === 0 ? 'var(--nav-active-bg)' : 'transparent', marginBottom:2}}>
                  <span className="mi mi-fill" style={{fontSize:16, color: i === 0 ? 'var(--brand-primary)' : 'var(--grey-60)'}}>
                    {['space_dashboard','event','people','badge','assignment','paid','insert_chart','settings'][i]}
                  </span>
                  <span style={{fontSize:12, fontWeight: i === 0 ? 700 : 500, color: i === 0 ? 'var(--brand-primary)' : 'var(--grey-70)'}}>{n}</span>
                </div>
              ))}
            </div>
            <div style={{padding:'6px 14px 14px'}}>
              <div className="row" style={{justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
                <div>
                  <div style={{fontFamily:'var(--serif)', fontSize:22, fontWeight:600, color:'var(--ink)'}}>Today</div>
                  <div style={{fontSize:11, color:'var(--grey-60)'}}>Tuesday, October 28 · Mount Pleasant</div>
                </div>
                <div className="tag-pill"><span className="dot"/>32 appointments</div>
              </div>
              <div className="row gap-12" style={{marginBottom:12}}>
                {[
                  {l:'Revenue',v:'$4,820',d:'+12%',tone:'var(--soft-mint)'},
                  {l:'New patients',v:'6',d:'3 pending',tone:'var(--soft-pink)'},
                  {l:'Claims clean rate',v:'98%',d:'+4 pts',tone:'var(--soft-sky)'},
                  {l:'Avg note time',v:'1m 12s',d:'-66%',tone:'var(--brand-tertiary)'},
                ].map((s, i) => (
                  <div key={i} style={{flex:1, padding:12, borderRadius:12, background:s.tone}}>
                    <div style={{fontSize:9, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--grey-70)'}}>{s.l}</div>
                    <div style={{fontFamily:'var(--serif)', fontSize:20, fontWeight:600, marginTop:4}}>{s.v}</div>
                    <div style={{fontSize:10, color:'#1a7a3d', marginTop:2, fontWeight:600}}>{s.d}</div>
                  </div>
                ))}
              </div>
              <div style={{padding:12, borderRadius:12, background:'var(--grey-5)'}}>
                {[
                  {t:'9:30',n:'Jade Tang',s:'60-min Physio · Dr. Okafor',l:'Paid', tone:'var(--soft-mint)'},
                  {t:'10:00',n:'Miguel Ramos',s:'Massage · R. Chen',l:'Arrived', tone:'var(--soft-sky)'},
                  {t:'10:45',n:'Priya Ahluwalia',s:'Intake · Dr. Okafor',l:'Pending', tone:'var(--brand-tertiary)'},
                  {t:'11:30',n:'Wes Bautista',s:'Acupuncture · L. Park',l:'Confirmed', tone:'white'},
                ].map((a, i) => (
                  <div key={i} className="row gap-12" style={{alignItems:'center', padding:'8px 4px', borderTop: i?'1px solid var(--grey-10)':'none'}}>
                    <div style={{fontSize:11, fontWeight:700, color:'var(--brand-primary)', width:42}}>{a.t}</div>
                    <div className="col flex-1" style={{minWidth:0}}>
                      <div style={{fontSize:12, fontWeight:600}}>{a.n}</div>
                      <div style={{fontSize:11, color:'var(--grey-60)'}}>{a.s}</div>
                    </div>
                    <div style={{padding:'3px 10px', borderRadius:99, background:a.tone, fontSize:10, fontWeight:600, border: a.tone==='white'?'1px solid var(--grey-10)':'none'}}>{a.l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
        {/* float ai card */}
        <div className="surface" style={{position:'absolute', right:-20, top:60, padding:16, width:240, animation:'float-mid 6s ease-in-out infinite'}}>
          <div className="row gap-8" style={{alignItems:'center', marginBottom:8}}>
            <span className="mi mi-fill" style={{fontSize:18, color:'var(--brand-primary)'}}>auto_awesome</span>
            <div style={{fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--brand-primary)'}}>AI brief</div>
          </div>
          <div style={{fontSize:12, color:'var(--grey-80)', lineHeight:1.5}}>Jade has improved 40% since last visit. Ready to progress to dynamic phase.</div>
        </div>
      </div>
    </div>
  </section>
);

const POPain = () => (
  <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--paper)'}}>
    <div style={{maxWidth:1100, margin:'0 auto'}}>
      <div className="eyebrow reveal text-center" style={{marginBottom:32}}>The Pain</div>
      {[
        'Your front desk is in one system.',
        'Your practitioners are documenting in another.',
        'Your biller is manually chasing claim fields.',
        'Your reporting lives in three different places.',
      ].map((line, i) => (
        <div key={i} className={`reveal delay-${i+1}`} style={{
          fontFamily:'var(--serif)',
          fontSize:`clamp(24px, ${4.4 - i*0.4}vw, ${64 - i*6}px)`,
          lineHeight:1.15, letterSpacing:'-0.02em', textAlign:'center',
          maxWidth:'24ch', margin: i ? '24px auto 0' : '0 auto',
          color: `rgba(11,18,40,${1 - i*0.18})`, fontWeight:400,
        }}>{line}</div>
      ))}
      <div className="reveal delay-5" style={{textAlign:'center', marginTop:64}}>
        <div className="tag-pill" style={{background:'var(--brand-primary)', color:'white', borderColor:'transparent', padding:'12px 22px', fontSize:14}}>
          <span className="dot" style={{background:'var(--mark-cyan)'}}></span>
          ProviderOS replaces all of it.
        </div>
      </div>
    </div>
  </section>
);

const POOutcomes = () => (
  <section 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={{maxWidth:800, marginBottom:64}}>
        <div className="eyebrow">What changes</div>
        <h2 className="h1 mt-16">Three outcomes.<br/><em>One platform.</em></h2>
      </div>
      {[
        {n:'01', title:'Prepare in minutes', body:'AI Patient Snapshot. Everything your team needs before the visit — without digging.', mock:'snapshot', tone:'var(--soft-mint)'},
        {n:'02', title:'Documentation that writes itself', body:'SOAP Copilot drafts the note. Practitioners review and approve. Done.', mock:'soap', tone:'var(--soft-sky)'},
        {n:'03', title:'Claims that pass the first time', body:'Claims Preflight catches errors before submission. Fewer denials. Faster payment.', mock:'claim', tone:'var(--brand-tertiary)'},
      ].map((c, i) => (
        <div key={i} className="reveal" style={{
          display:'grid', gridTemplateColumns: i % 2 ? '1fr 1.1fr' : '1.1fr 1fr', gap:60, alignItems:'center',
          padding:'56px 0', borderTop: i ? '1px solid rgba(11,18,40,0.08)' : 'none',
        }}>
          <div style={{order: i % 2 ? 2 : 1}}>
            <div style={{fontFamily:'var(--serif)', fontSize:64, fontWeight:500, lineHeight:1, color:'var(--brand-primary)', opacity:0.3, marginBottom:16}}>{c.n}</div>
            <h3 className="h2" style={{marginBottom:16, maxWidth:'18ch'}}>{c.title}</h3>
            <p className="lead">{c.body}</p>
          </div>
          <div style={{order: i % 2 ? 1 : 2}}>
            <ClinicMock kind={c.mock} tone={c.tone}/>
          </div>
        </div>
      ))}
    </div>
  </section>
);

const PODifferentiator = () => (
  <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--ink)', color:'white', position:'relative', overflow:'hidden'}}>
    <div style={{position:'absolute', inset:0, background:'radial-gradient(ellipse at center, rgba(105,196,216,0.12), transparent 60%)'}}></div>
    <div className="reveal" style={{maxWidth:1100, margin:'0 auto', position:'relative'}}>
      <h2 className="h1 text-center" style={{color:'white', maxWidth:'20ch', margin:'0 auto'}}>
        Other platforms <span style={{color:'rgba(255,255,255,0.4)'}}>added AI.</span><br/>
        We <em style={{color:'var(--mark-cyan)'}}>built from it.</em>
      </h2>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32, marginTop:80}}>
        <div className="reveal delay-1" style={{padding:32, borderRadius:24, background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.08)'}}>
          <div className="eyebrow" style={{color:'rgba(255,255,255,0.4)'}}>Legacy</div>
          <div style={{fontFamily:'var(--serif)', fontSize:28, fontWeight:500, marginTop:12}}>AI bolted on top.</div>
          <div style={{display:'grid', gap:12, marginTop:24}}>
            {['Old EMR','+ AI plugin','+ Billing tool','+ Reporting'].map((b, i) => (
              <div key={i} style={{padding:'12px 16px', borderRadius:12, background:'rgba(255,255,255,0.06)', fontSize:13, color:'rgba(255,255,255,0.7)', fontFamily:'ui-monospace, monospace'}}>{b}</div>
            ))}
          </div>
        </div>
        <div className="reveal delay-2" style={{padding:32, borderRadius:24, background:'linear-gradient(160deg, rgba(105,196,216,0.18), rgba(105,196,216,0.05))', border:'1px solid rgba(105,196,216,0.3)', position:'relative', overflow:'hidden'}}>
          <div className="eyebrow" style={{color:'var(--mark-cyan)', opacity:1}}>ProviderOS</div>
          <div style={{fontFamily:'var(--serif)', fontSize:28, fontWeight:500, marginTop:12}}>AI as the foundation.</div>
          <div style={{position:'relative', marginTop:24, padding:'14px 16px', borderRadius:12, background:'linear-gradient(135deg, var(--mark-cyan), var(--brand-secondary))', color:'var(--ink)', fontWeight:600, fontSize:14}}>
            One platform · One brain
            <div style={{fontSize:11, fontWeight:500, opacity:0.7, marginTop:4}}>Schedule, charts, claims, reporting — all reasoning together.</div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginTop:8}}>
            {['Schedule','Charts','Claims','Reporting'].map((b, i) => (
              <div key={i} style={{padding:'10px 12px', borderRadius:10, background:'rgba(255,255,255,0.08)', fontSize:12, color:'white', fontWeight:500, textAlign:'center'}}>{b}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const POEqualizer = () => (
  <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--warm-cream)'}}>
    <div className="reveal text-center" style={{maxWidth:900, margin:'0 auto'}}>
      <h2 className="display" style={{maxWidth:'14ch', margin:'0 auto', fontSize:'clamp(48px, 8vw, 120px)'}}>
        Small clinic. <em>Enterprise intelligence.</em>
      </h2>
      <p className="lead" style={{margin:'32px auto 0'}}>
        You don't need a bigger team. You need a smarter system.
      </p>
    </div>
  </section>
);

const POFounding = () => (
  <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--paper)'}}>
    <div className="reveal" style={{maxWidth:1100, margin:'0 auto'}}>
      <div style={{
        background:'linear-gradient(160deg, var(--brand-primary) 0%, #2a3563 100%)',
        borderRadius:32, padding:'clamp(48px, 7vw, 80px)',
        color:'white', position:'relative', overflow:'hidden',
      }}>
        <div style={{position:'absolute', top:-100, right:-100, width:400, height:400, borderRadius:'50%', background:'radial-gradient(circle, rgba(105,196,216,0.4) 0%, transparent 70%)', filter:'blur(20px)'}}></div>
        <div style={{position:'relative'}}>
          <div className="tag-pill" style={{background:'rgba(255,255,255,0.08)', borderColor:'rgba(255,255,255,0.16)', color:'var(--mark-cyan)', marginBottom:28}}>
            <span className="dot" style={{background:'var(--mark-cyan)'}}></span>
            Founding clinic offer · Limited cohort
          </div>
          <h2 className="h1" style={{color:'white', maxWidth:'18ch'}}>Join the founding clinics building the <em style={{color:'var(--mark-cyan)'}}>next era</em> of practice management.</h2>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16, marginTop:48}}>
            {[
              {icon:'lock', title:'Locked pricing', body:'Founding rate, kept for life.'},
              {icon:'campaign', title:'Co-marketing', body:'We build with your story.'},
              {icon:'forum', title:'Direct product access', body:'Shape the roadmap. Talk to us weekly.'},
            ].map((p, i) => (
              <div key={i} style={{padding:24, borderRadius:20, background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.1)'}}>
                <span className="mi" style={{fontSize:28, color:'var(--mark-cyan)'}}>{p.icon}</span>
                <div style={{fontWeight:700, fontSize:15, marginTop:14}}>{p.title}</div>
                <div style={{fontSize:13, color:'rgba(255,255,255,0.65)', marginTop:4}}>{p.body}</div>
              </div>
            ))}
          </div>
          <div style={{marginTop:40}}>
            <a href="/founding" className="btn btn-cyan" style={{padding:'18px 28px', fontSize:16}}>
              Apply for Founding Access <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const PODemo = () => (
  <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--paper-2)', textAlign:'center', position:'relative', overflow:'hidden'}}>
    <div className="reveal" style={{maxWidth:900, margin:'0 auto'}}>
      <h2 className="h1" style={{maxWidth:'18ch', margin:'0 auto'}}>See what your clinic <em>looks like</em> on ProviderOS.</h2>
      <p className="lead" style={{margin:'24px auto 40px'}}>A 30-minute walkthrough, built around your practice.</p>
      <a href="/demo" className="btn btn-primary" style={{padding:'18px 28px', fontSize:16}}>
        Book Your Walkthrough <span className="arrow">→</span>
      </a>
      <div style={{fontSize:12, color:'var(--grey-60)', marginTop:16}}>Scheduled within 24 hours. No slides. Just the platform.</div>
    </div>
  </section>
);

const POPage = () => {
  useReveal();
  useParallax();
  return (
    <div>
      <Nav active="provideros"/>
      <POHero/>
      <POPain/>
      <POOutcomes/>
      <PODifferentiator/>
      <POEqualizer/>
      <POFounding/>
      <PODemo/>
      <Footer/>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<POPage/>);