// home.jsx — Synced homepage (consumer-first, audience toggle)

const HeroPatient = () => {
  return (
    <section style={{
      position:'relative',
      paddingTop: 140,
      paddingBottom: 40,
      paddingLeft: 'var(--site-pad)',
      paddingRight: 'var(--site-pad)',
      overflow:'hidden',
      background:'linear-gradient(180deg, var(--paper) 0%, var(--paper) 50%, var(--warm-cream) 100%)',
    }}>
      {/* decorative blobs */}
      <div className="blob" style={{
        width:520, height:520, top:-120, right:-120,
        background:'radial-gradient(circle, var(--soft-pink) 0%, transparent 70%)'
      }} data-parallax="-0.05"></div>
      <div className="blob" style={{
        width:380, height:380, bottom:-80, left:-80,
        background:'radial-gradient(circle, var(--soft-sky) 0%, transparent 70%)'
      }} data-parallax="0.04"></div>

      <div style={{maxWidth:'var(--max-w)', margin:'0 auto', position:'relative'}}>
        <div className="reveal" style={{display:'flex', justifyContent:'center', marginBottom:24}}>
          <div className="tag-pill" style={{background:'white', boxShadow:'0 2px 8px rgba(11,18,40,0.04)'}}>
            <span className="dot" style={{animation:'pulse-ring 1.8s ease-out infinite', background:'var(--mark-cyan)'}}></span>
            Now in beta across Toronto, Vancouver & Calgary
          </div>
        </div>

        <h1 className="display reveal text-center" style={{maxWidth:'14ch', margin:'0 auto'}}>
          Your health,<br/>finally <em>in&nbsp;sync.</em>
        </h1>
        <p className="lead reveal delay-1 text-center" style={{margin:'28px auto 0', textAlign:'center'}}>
          Know what's covered before you go. Book in seconds.<br/>
          Keep every visit in one place.
        </p>

        <div className="reveal delay-2" style={{display:'flex', justifyContent:'center', gap:14, marginTop:36, flexWrap:'wrap'}}>
          <a href="#download" className="btn btn-primary" style={{padding:'18px 28px', fontSize:16}}>
            <span className="mi" style={{fontSize:20}}>download</span>
            Find Care — Get the App
          </a>
          <a href="/provideros" className="btn btn-ghost" style={{padding:'18px 4px', fontSize:15}}>
            Running a clinic? Explore ProviderOS <span className="arrow">→</span>
          </a>
        </div>

        {/* Floating product visual */}
        <div className="reveal delay-3" style={{
          marginTop: 80,
          position:'relative',
          height: 460,
          maxWidth: 980,
          marginLeft:'auto', marginRight:'auto',
        }}>
          {/* phone frame backdrop */}
          <div style={{
            position:'absolute', left:'50%', top:30, transform:'translateX(-50%)',
            width: 280, height: 580,
            borderRadius: 44,
            background:'linear-gradient(160deg, var(--ink) 0%, #2a3563 100%)',
            boxShadow:'0 40px 80px -20px rgba(11,18,40,0.45), 0 12px 24px rgba(11,18,40,0.18)',
            padding: 8,
            zIndex:1,
          }}>
            <div style={{
              width:'100%', height:'100%', borderRadius:36, overflow:'hidden',
              background:'linear-gradient(180deg, #fff 0%, var(--warm-cream) 100%)',
              padding:'56px 18px 18px',
              display:'flex', flexDirection:'column', gap:14,
            }}>
              <div style={{fontSize:11, fontWeight:600, color:'var(--grey-60)', letterSpacing:'0.06em', textTransform:'uppercase'}}>Tuesday, Oct 28</div>
              <div style={{fontFamily:'var(--serif)', fontSize:26, fontWeight:500, lineHeight:1.05, letterSpacing:'-0.01em'}}>Good morning,<br/>Maya.</div>
              <div className="surface" style={{padding:14, marginTop:8}}>
                <div style={{fontSize:10, fontWeight:600, color:'#1a7a3d', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:6}}>Today · 10:30 AM</div>
                <div style={{fontSize:13, fontWeight:600, marginBottom:2}}>Massage Therapy</div>
                <div style={{fontSize:11, color:'var(--grey-60)'}}>R. Chen, RMT · Mt Pleasant</div>
                <div style={{height:1, background:'var(--grey-10)', margin:'10px 0'}}></div>
                <div className="row" style={{justifyContent:'space-between', alignItems:'center'}}>
                  <div style={{fontSize:11, color:'var(--grey-60)'}}>Your cost</div>
                  <div style={{fontSize:14, fontWeight:700, color:'#1a7a3d'}}>$0.00</div>
                </div>
              </div>
              <div className="surface" style={{padding:14}}>
                <div style={{fontSize:11, fontWeight:600, color:'var(--grey-60)', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom:8}}>Coverage · Sun Life</div>
                <div style={{height:6, borderRadius:99, background:'var(--grey-5)', overflow:'hidden'}}>
                  <div style={{width:'62%', height:'100%', borderRadius:99, background:'linear-gradient(90deg, var(--mark-cyan), var(--brand-secondary))'}}></div>
                </div>
                <div className="row" style={{justifyContent:'space-between', fontSize:11, color:'var(--grey-60)', marginTop:6}}>
                  <span>$190 left</span>
                  <span style={{color:'var(--ink)', fontWeight:600}}>Massage</span>
                </div>
              </div>
            </div>
          </div>

          {/* floating cards */}
          <div style={{
            position:'absolute', left:'4%', top:60, zIndex:3,
            animation:'float-slow 6s ease-in-out infinite',
          }}>
            <AppointmentCard/>
          </div>
          <div style={{
            position:'absolute', right:'2%', top:120, zIndex:3,
            animation:'float-mid 7s ease-in-out infinite',
          }}>
            <CoverageCard/>
          </div>
          <div style={{
            position:'absolute', right:'8%', bottom:-10, zIndex:3,
            animation:'float-slow 8s ease-in-out infinite',
            animationDelay:'.5s',
          }}>
            <ProviderCard/>
          </div>
        </div>
      </div>
    </section>
  );
};

const HeroClinic = () => (
  <section style={{
    position:'relative',
    paddingTop: 140, paddingBottom: 80,
    paddingLeft: 'var(--site-pad)', paddingRight: 'var(--site-pad)',
    overflow:'hidden',
    background: 'linear-gradient(160deg, var(--ink) 0%, #2a3563 60%, var(--brand-primary) 100%)',
    backgroundColor: 'var(--ink)',
    color: 'white',
  }}>
    <div style={{
      position:'absolute', inset:0,
      background:'radial-gradient(ellipse at top right, rgba(105,196,216,0.18), transparent 50%), radial-gradient(ellipse at bottom left, rgba(254,240,207,0.10), transparent 50%)',
      pointerEvents:'none',
    }}></div>
    <div style={{maxWidth:'var(--max-w)', margin:'0 auto', position:'relative', display:'grid', gridTemplateColumns:'1.05fr 1fr', gap:60, alignItems:'center'}}>
      <div className="reveal">
        <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:28}}>
          <span className="dot"></span>
          ProviderOS · For clinics
        </div>
        <h1 className="display" style={{color:'white', fontSize:'clamp(44px, 7.6vw, 108px)'}}>
          Run your clinic <em style={{color:'var(--mark-cyan)'}}>like it's 2026.</em>
        </h1>
        <p className="lead" style={{color:'rgba(255,255,255,0.7)', marginTop:24, maxWidth:'52ch'}}>
          Prepare faster. Document smarter. Get paid sooner.<br/>
          The AI-native operating system for modern clinics.
        </p>
        <div className="row gap-12 mt-32" style={{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>
      </div>

      {/* dashboard mock */}
      <div className="reveal delay-2" style={{position:'relative'}}>
        <div className="surface" style={{
          padding: 18, background:'white',
          transform:'perspective(1400px) rotateY(-8deg) rotateX(4deg)',
          boxShadow:'0 60px 120px -30px rgba(0,0,0,0.55)',
        }}>
          <div className="row gap-8" style={{alignItems:'center', marginBottom:14}}>
            <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>
            <div style={{fontSize:11, color:'var(--grey-60)', fontWeight:600}}>step-up.synced.app</div>
          </div>
          <div className="row gap-12" style={{marginBottom:12}}>
            {[
              {label:'Appointments', val:'32', tone:'var(--soft-sky)'},
              {label:'Revenue', val:'$4,820', tone:'var(--soft-mint)'},
              {label:'New Patients', val:'6', tone:'var(--brand-tertiary)'},
            ].map((s, i) => (
              <div key={i} style={{flex:1, padding:14, borderRadius:14, background:s.tone}}>
                <div style={{fontSize:10, fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--grey-70)'}}>{s.label}</div>
                <div style={{fontFamily:'var(--serif)', fontSize:24, fontWeight:600, color:'var(--ink)', marginTop:4}}>{s.val}</div>
              </div>
            ))}
          </div>
          <div style={{padding:14, borderRadius:14, background:'var(--grey-5)'}}>
            <div className="row" style={{justifyContent:'space-between', alignItems:'center', marginBottom:10}}>
              <div style={{fontSize:12, fontWeight:700, color:'var(--brand-primary)'}}>Today's Schedule</div>
              <div style={{fontSize:11, color:'var(--grey-60)'}}>Tue, Oct 28</div>
            </div>
            {[
              {t:'9:30', n:'Jade Tang', s:'60-min Physio', tone:'var(--soft-mint)', l:'Paid'},
              {t:'10:00', n:'Miguel Ramos', s:'Massage', tone:'var(--soft-sky)', l:'Arrived'},
              {t:'10:45', n:'Priya A.', s:'Intake · Chiro', tone:'var(--brand-tertiary)', l:'Pending'},
            ].map((a, i) => (
              <div key={i} className="row gap-12" style={{alignItems:'center', padding:'8px 0', 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 8px', borderRadius:99, background:a.tone, fontSize:10, fontWeight:600}}>{a.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* floating callout */}
        <div className="surface" style={{
          position:'absolute', left:-30, bottom:-30, padding:14, width:230,
          animation:'float-slow 6s ease-in-out infinite',
        }}>
          <div className="row gap-8" style={{alignItems:'center', marginBottom:6}}>
            <div className="center" style={{width:24, height:24, borderRadius:8, background:'var(--soft-mint)', color:'#1a7a3d'}}>
              <span className="mi mi-fill" style={{fontSize:14}}>auto_awesome</span>
            </div>
            <div style={{fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'#1a7a3d'}}>SOAP Copilot</div>
          </div>
          <div style={{fontSize:12, color:'var(--ink)', lineHeight:1.4}}>Note drafted in 4 seconds. Ready for your review.</div>
        </div>
      </div>
    </div>
  </section>
);

// Problem section — same for both audiences but with different copy
const ProblemPatient = () => (
  <section style={{padding:'clamp(72px, 12vh, 140px) var(--site-pad)', background:'var(--paper)'}}>
    <div style={{maxWidth:1100, margin:'0 auto'}}>
      <div className="eyebrow reveal" style={{textAlign:'center', marginBottom:32}}>The Problem</div>
      <div className="reveal delay-1" style={{
        fontFamily:'var(--serif)', fontSize:'clamp(28px, 4vw, 56px)', lineHeight:1.15,
        letterSpacing:'-0.015em', textAlign:'center', maxWidth:'24ch', margin:'0 auto',
        color:'var(--ink)', fontWeight:400,
      }}>
        Healthcare shouldn't mean <em style={{color:'var(--brand-primary)'}}>five calls</em> to book one appointment.
      </div>
      <div className="reveal delay-2" style={{
        fontFamily:'var(--serif)', fontSize:'clamp(24px, 3.4vw, 44px)', lineHeight:1.2,
        letterSpacing:'-0.015em', textAlign:'center', maxWidth:'30ch', margin:'40px auto 0',
        color:'var(--grey-60)', fontWeight:400,
      }}>
        It shouldn't mean guessing what your insurance covers.
      </div>
      <div className="reveal delay-3" style={{
        fontFamily:'var(--serif)', fontSize:'clamp(22px, 3vw, 38px)', lineHeight:1.25,
        letterSpacing:'-0.015em', textAlign:'center', maxWidth:'30ch', margin:'40px auto 0',
        color:'var(--grey-40)', fontWeight:400,
      }}>
        It shouldn't mean losing receipts and starting over every time.
      </div>
      <div className="reveal delay-4" style={{textAlign:'center', marginTop:64}}>
        <div className="tag-pill" style={{background:'var(--brand-primary)', color:'white', borderColor:'transparent', padding:'10px 18px', fontSize:13}}>
          <span className="dot" style={{background:'var(--mark-cyan)'}}></span>
          This is what fixes that.
        </div>
      </div>
    </div>
  </section>
);

const ProblemClinic = () => (
  <section style={{padding:'clamp(72px, 12vh, 140px) var(--site-pad)', background:'var(--paper)'}}>
    <div style={{maxWidth:1100, margin:'0 auto'}}>
      <div className="eyebrow reveal" style={{textAlign:'center', 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(22px, ${3.6 - i*0.3}vw, ${48 - i*4}px)`,
          lineHeight:1.2, letterSpacing:'-0.015em', textAlign:'center',
          maxWidth:'30ch', margin: i ? '24px auto 0' : '0 auto',
          color: i === 0 ? 'var(--ink)' : `rgba(11,18,40,${0.85 - i*0.15})`, fontWeight:400,
        }}>{line}</div>
      ))}
      <div className="reveal delay-5" style={{textAlign:'center', marginTop:56}}>
        <div className="tag-pill" style={{background:'var(--brand-primary)', color:'white', borderColor:'transparent', padding:'10px 18px', fontSize:13}}>
          <span className="dot" style={{background:'var(--mark-cyan)'}}></span>
          ProviderOS replaces all of it.
        </div>
      </div>
    </div>
  </section>
);

// Patient features — coverage feature given more weight
const PatientFeatures = () => (
  <section style={{padding:'clamp(72px, 12vh, 140px) var(--site-pad)', background:'var(--warm-cream)'}}>
    <div style={{maxWidth:'var(--max-w)', margin:'0 auto'}}>
      <div className="reveal" style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:24, marginBottom:60}}>
        <div>
          <div className="eyebrow">What you get</div>
          <h2 className="h1 mt-16" style={{maxWidth:'18ch'}}>Everything you wish <em>healthcare did already.</em></h2>
        </div>
        <a href="/patients" className="btn btn-secondary">See all features <span className="arrow">→</span></a>
      </div>

      {/* Hero feature: coverage */}
      <div className="reveal delay-1" style={{
        background:'linear-gradient(135deg, white 0%, var(--soft-sky) 100%)',
        borderRadius: 32, padding: 'clamp(32px, 5vw, 64px)',
        marginBottom: 24, position:'relative', overflow:'hidden',
        boxShadow:'0 20px 60px rgba(11,18,40,0.06)',
      }}>
        <div style={{position:'absolute', top:-80, right:-80, width:300, height:300, borderRadius:'50%', background:'radial-gradient(circle, var(--mark-cyan) 0%, transparent 70%)', opacity:0.25}}></div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center', position:'relative'}}>
          <div>
            <div className="tag-pill" style={{marginBottom:24, background:'white'}}>
              <span className="mi" style={{fontSize:14, color:'var(--brand-primary)'}}>verified</span>
              The coverage difference
            </div>
            <h3 className="h2" style={{marginBottom:20}}>No coverage <em>surprises.</em></h3>
            <p className="lead" style={{marginBottom:0}}>
              See your out-of-pocket before you book — not after. We check your insurance in real time, so the price you see is the price you pay.
            </p>
          </div>
          <div style={{position:'relative', minHeight: 300, display:'flex', justifyContent:'center', alignItems:'center'}}>
            <div style={{position:'absolute', transform:'translate(-30px, -20px) rotate(-4deg)', animation:'float-slow 7s ease-in-out infinite'}}>
              <CoverageCard/>
            </div>
            <div style={{position:'absolute', transform:'translate(80px, 60px) rotate(3deg)', animation:'float-mid 8s ease-in-out infinite', animationDelay:'.4s'}}>
              <div className="surface" style={{padding:14, width:200}}>
                <div style={{fontSize:10, fontWeight:600, color:'var(--grey-60)', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom:8}}>Manulife · Physio</div>
                <div className="row" style={{justifyContent:'space-between', alignItems:'baseline'}}>
                  <span style={{fontSize:11, color:'var(--grey-60)'}}>Co-pay</span>
                  <span style={{fontSize:18, fontWeight:700}}>$0</span>
                </div>
                <div className="row" style={{justifyContent:'space-between', alignItems:'baseline', marginTop:6}}>
                  <span style={{fontSize:11, color:'var(--grey-60)'}}>You pay</span>
                  <span style={{fontSize:14, fontWeight:600, color:'#1a7a3d'}}>Direct billed</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 3 supporting features */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
        {[
          {icon:'search', tone:'var(--soft-pink)', title:'Find the right provider', body:'Search by discipline, coverage, and availability.'},
          {icon:'event_available', tone:'var(--soft-mint)', title:'Book in seconds', body:'Real-time availability. Two taps. Done.'},
          {icon:'folder_open', tone:'var(--soft-lavender)', title:'Everything in one place', body:'Receipts, recaps, records — always with you.'},
        ].map((f, i) => (
          <div key={i} className={`reveal delay-${i+2}`} style={{
            background:'white', borderRadius: 24, padding:32,
            boxShadow:'0 8px 30px rgba(11,18,40,0.04)',
            transition:'transform .4s, box-shadow .4s',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 20px 50px rgba(11,18,40,0.10)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 8px 30px rgba(11,18,40,0.04)'; }}
          >
            <div className="center" style={{width:52, height:52, borderRadius:16, background:f.tone, marginBottom:20, color:'var(--brand-primary)'}}>
              <span className="mi mi-fill" style={{fontSize:26}}>{f.icon}</span>
            </div>
            <h3 className="h3" style={{marginBottom:10}}>{f.title}</h3>
            <p style={{color:'var(--grey-60)', margin:0, lineHeight:1.5}}>{f.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// Clinic features (3 outcomes)
const ClinicFeatures = () => (
  <section style={{padding:'clamp(72px, 12vh, 140px) 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 things <em>start working</em> on day one.</h2>
      </div>

      {[
        {n:'01', title:'Prepare in minutes', body:'AI Patient Snapshot. Everything your team needs before the visit — without digging.', tone:'var(--soft-mint)', icon:'visibility', mock: 'snapshot'},
        {n:'02', title:'Documentation that writes itself', body:'SOAP Copilot drafts the note. Practitioners review and approve. Done.', tone:'var(--soft-sky)', icon:'edit_note', mock: 'soap'},
        {n:'03', title:'Claims that pass the first time', body:'Claims Preflight catches errors before submission. Fewer denials. Faster payment.', tone:'var(--brand-tertiary)', icon:'paid', mock: 'claim'},
      ].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, position:'relative'}}>
            <ClinicMock kind={c.mock} tone={c.tone} icon={c.icon}/>
          </div>
        </div>
      ))}
    </div>
  </section>
);

// ClinicMock is provided globally from shared.jsx

// The Fork
const Fork = () => (
  <section style={{padding:'clamp(72px, 12vh, 140px) var(--site-pad)', background:'var(--ink)', color:'white', position:'relative', overflow:'hidden'}}>
    <div style={{position:'absolute', inset:0, background:'radial-gradient(circle at 20% 30%, rgba(105,196,216,0.15), transparent 40%), radial-gradient(circle at 80% 70%, rgba(254,240,207,0.10), transparent 40%)'}}></div>
    <div className="reveal" style={{maxWidth:'var(--max-w)', margin:'0 auto', position:'relative'}}>
      <div className="eyebrow" style={{color:'rgba(255,255,255,0.5)', textAlign:'center', marginBottom:32}}>Choose your path</div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
        <a href="/patients" className="fork-card" style={{
          background:'linear-gradient(160deg, var(--warm-cream) 0%, white 100%)',
          color:'var(--ink)',
          padding:'clamp(32px, 5vw, 60px)',
          borderRadius: 32, position:'relative', overflow:'hidden',
          transition:'transform .4s cubic-bezier(.2,.8,.2,1)',
        }} onMouseEnter={e => e.currentTarget.style.transform='translateY(-6px)'} onMouseLeave={e => e.currentTarget.style.transform=''}>
          <div className="eyebrow" style={{color:'var(--brand-primary)', opacity:1}}>For Patients</div>
          <div style={{fontFamily:'var(--serif)', fontSize:'clamp(28px, 3.6vw, 48px)', fontWeight:500, lineHeight:1.05, marginTop:20, letterSpacing:'-0.02em'}}>
            Your health, finally <em style={{color:'var(--brand-primary)', fontStyle:'italic', fontWeight:400}}>in&nbsp;sync.</em>
          </div>
          <div className="row gap-8" style={{alignItems:'center', marginTop:28, color:'var(--brand-primary)', fontWeight:600}}>
            Find Care <span className="arrow">→</span>
          </div>
        </a>
        <a href="/provideros" className="fork-card" style={{
          background:'linear-gradient(160deg, var(--brand-primary) 0%, #2a3563 100%)',
          color:'white',
          padding:'clamp(32px, 5vw, 60px)',
          borderRadius: 32, position:'relative', overflow:'hidden',
          transition:'transform .4s cubic-bezier(.2,.8,.2,1)',
          border:'1px solid rgba(255,255,255,0.08)',
        }} onMouseEnter={e => e.currentTarget.style.transform='translateY(-6px)'} onMouseLeave={e => e.currentTarget.style.transform=''}>
          <div className="eyebrow" style={{color:'var(--mark-cyan)', opacity:1}}>ProviderOS</div>
          <div style={{fontFamily:'var(--serif)', fontSize:'clamp(28px, 3.6vw, 48px)', fontWeight:500, lineHeight:1.05, marginTop:20, letterSpacing:'-0.02em'}}>
            The AI-Native <em style={{color:'var(--mark-cyan)', fontStyle:'italic', fontWeight:400}}>Operating&nbsp;System.</em>
          </div>
          <p style={{color:'rgba(255,255,255,0.7)', marginTop:20, lineHeight:1.5, maxWidth:'40ch'}}>Leave outdated processes behind. Enter the new era.</p>
          <div className="row gap-8" style={{alignItems:'center', marginTop:28, color:'var(--mark-cyan)', fontWeight:600}}>
            Explore for clinics <span className="arrow">→</span>
          </div>
        </a>
      </div>
    </div>
  </section>
);

// Trust strip
const TrustStrip = () => (
  <section style={{padding:'clamp(72px, 12vh, 140px) var(--site-pad)', background:'var(--paper)'}}>
    <div className="reveal" style={{maxWidth:1100, margin:'0 auto', textAlign:'center'}}>
      <div className="eyebrow">Trust</div>
      <h2 className="h1 mt-16" style={{maxWidth:'18ch', margin:'16px auto 0'}}>Your data. <em>Your control.</em></h2>
      <div className="row gap-24" style={{justifyContent:'center', marginTop:56, flexWrap:'wrap'}}>
        {[
          {icon:'lock', label:'Private by design'},
          {icon:'maps_home_work', label:'Built for Canada'},
          {icon:'auto_awesome', label:'Transparent AI'},
        ].map((p, i) => (
          <div key={i} className="row gap-12" style={{alignItems:'center', padding:'14px 22px', background:'white', borderRadius:99, boxShadow:'0 4px 14px rgba(11,18,40,0.05)'}}>
            <span className="mi" style={{fontSize:20, color:'var(--brand-primary)'}}>{p.icon}</span>
            <span style={{fontWeight:600, fontSize:14}}>{p.label}</span>
          </div>
        ))}
      </div>
      <div className="mt-32">
        <a href="/trust" className="btn btn-ghost">Learn how we protect your data <span className="arrow">→</span></a>
      </div>
    </div>
  </section>
);

// Closing CTA
const Close = ({ audience }) => {
  if (audience === 'clinic') {
    return (
      <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'linear-gradient(160deg, var(--ink) 0%, var(--brand-primary) 100%)', backgroundColor:'var(--ink)', color:'white', textAlign:'center', position:'relative', overflow:'hidden'}}>
        <div className="blob" style={{width:600, height:600, top:'-30%', left:'50%', transform:'translateX(-50%)', background:'radial-gradient(circle, rgba(105,196,216,0.3) 0%, transparent 60%)'}}></div>
        <div className="reveal" style={{maxWidth:900, margin:'0 auto', position:'relative'}}>
          <h2 className="h1" style={{color:'white', maxWidth:'18ch', margin:'0 auto'}}>Ready to <em style={{color:'var(--mark-cyan)'}}>rewrite</em> how your clinic runs?</h2>
          <p className="lead" style={{color:'rgba(255,255,255,0.7)', margin:'24px auto 40px'}}>A 30-minute walkthrough, built around your practice. No slides — just the platform.</p>
          <a href="/demo" className="btn btn-cyan" style={{padding:'18px 30px', fontSize:16}}>
            Book Your Walkthrough <span className="arrow">→</span>
          </a>
          <div style={{fontSize:12, color:'rgba(255,255,255,0.4)', marginTop:16}}>Scheduled within 24 hours.</div>
        </div>
      </section>
    );
  }
  return (
    <section id="download" style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'linear-gradient(160deg, var(--warm-cream) 0%, var(--soft-pink) 100%)', textAlign:'center', position:'relative', overflow:'hidden', scrollMarginTop:80}}>
      <div className="reveal" style={{maxWidth:900, margin:'0 auto', position:'relative'}}>
        <h2 className="h1" style={{maxWidth:'16ch', 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. Free from healthcare headaches.</p>
        <div className="row gap-12" style={{justifyContent:'center', flexWrap:'wrap'}}>
          <a href="#download" 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="#download" 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>
  );
};

// Testimonials
const Testimonials = () => (
  <section style={{padding:'clamp(72px, 12vh, 140px) var(--site-pad)', background:'var(--paper)'}}>
    <div style={{maxWidth:'var(--max-w)', margin:'0 auto'}}>
      <div className="reveal" style={{textAlign:'center', marginBottom:56}}>
        <div className="eyebrow">Founding clinics</div>
        <h2 className="h1 mt-16" style={{maxWidth:'20ch', margin:'16px auto 0'}}>Built with <em>clinics like yours.</em></h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
        {[
          {q: 'We cut admin time by half in the first month. Practitioners actually leave on time now.', name:'Dr. Amara Okafor', role:'Owner · Step Up Clinic', tone:'var(--soft-mint)'},
          {q: 'Claims used to bounce twice a week. Since Synced, we’ve had three rejections in six months.', name:'Riya Mehta', role:'Office Manager · Mosaic Health', tone:'var(--brand-tertiary)'},
          {q: 'I thought the AI snapshot was a gimmick. I open it before every patient now.', name:'Lucas Park, RAc', role:'Lead Practitioner · Stillwater', tone:'var(--soft-sky)'},
        ].map((t, i) => (
          <div key={i} className={`reveal delay-${i+1} surface`} style={{padding:32, background:'white'}}>
            <div style={{fontFamily:'var(--serif)', fontSize:64, fontWeight:500, color:'var(--brand-primary)', opacity:0.2, lineHeight:0.6}}>"</div>
            <p style={{fontFamily:'var(--serif)', fontSize:20, lineHeight:1.4, fontWeight:400, letterSpacing:'-0.005em', color:'var(--ink)', margin:'12px 0 28px'}}>{t.q}</p>
            <div className="row gap-12" style={{alignItems:'center'}}>
              <div className="center" style={{width:42, height:42, borderRadius:'50%', background:t.tone, fontWeight:600, fontSize:14, color:'var(--brand-primary)'}}>{t.name.split(' ').map(n => n[0]).slice(0, 2).join('')}</div>
              <div>
                <div style={{fontWeight:600, fontSize:14}}>{t.name}</div>
                <div style={{fontSize:12, color:'var(--grey-60)'}}>{t.role}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Marquee = () => (
  <section
    aria-label="Insurance and payment partners"
    style={{padding:'40px 0', background:'var(--paper)', borderTop:'1px solid var(--grey-10)', borderBottom:'1px solid var(--grey-10)'}}
  >
    <div className="marquee">
      {[0, 1].map((copy) => (
        <div key={copy} className="marquee-track" aria-hidden={copy === 1 || undefined}>
          {INSURER_LOGOS.map((b) => (
            <img
              key={`${copy}-${b.name}`}
              src={b.src}
              alt={copy === 0 ? b.name : ''}
              className={`marquee-logo${b.tall ? ' is-tall' : ''}`}
            />
          ))}
        </div>
      ))}
    </div>
  </section>
);

// MAIN
const Home = () => {
  const [audience, setAudience] = useState('patient');
  useReveal();
  useParallax();

  // re-trigger reveals on toggle
  useEffect(() => {
    requestAnimationFrame(() => {
      document.querySelectorAll('.reveal').forEach(el => el.classList.remove('in'));
      const obs = new IntersectionObserver((entries) => {
        entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); obs.unobserve(e.target); }});
      }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
      document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    });
  }, [audience]);

  return (
    <div>
      <Nav active="home" audience={audience}/>
      <div style={{
        position:'fixed', top:88, left:'50%', transform:'translateX(-50%)',
        zIndex:50,
      }}>
        <AudienceToggle value={audience} onChange={setAudience}/>
      </div>

      {audience === 'patient' ? <HeroPatient/> : <HeroClinic/>}
      <Marquee/>
      {audience === 'patient' ? <ProblemPatient/> : <ProblemClinic/>}
      {audience === 'patient' ? <PatientFeatures/> : <ClinicFeatures/>}
      <Fork/>
      <Testimonials/>
      <TrustStrip/>
      <Close audience={audience}/>
      <Footer/>
    </div>
  );
};

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