// about.jsx
const AHero = () => (
  <section style={{paddingTop:140, paddingBottom:80, paddingLeft:'var(--site-pad)', paddingRight:'var(--site-pad)', background:'linear-gradient(180deg, var(--paper) 0%, var(--warm-cream) 100%)'}}>
    <div className="reveal" style={{maxWidth:1100, margin:'0 auto', textAlign:'center'}}>
      <div className="tag-pill" style={{marginBottom:24}}><span className="dot"></span>About Synced</div>
      <h1 className="display" style={{maxWidth:'18ch', margin:'0 auto'}}>We're rebuilding healthcare from <em>both sides.</em></h1>
      <p className="lead" style={{margin:'28px auto 0', textAlign:'center', maxWidth:'52ch'}}>One product for patients. One for clinics. Built so they finally talk to each other.</p>
    </div>
  </section>
);

const AStory = () => (
  <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--paper)'}}>
    <div style={{maxWidth:780, margin:'0 auto'}}>
      <div className="reveal eyebrow text-center" style={{marginBottom:32}}>Why we exist</div>
      <div className="reveal delay-1" style={{fontFamily:'var(--serif)', fontSize:'clamp(24px, 3vw, 36px)', lineHeight:1.4, fontWeight:400, letterSpacing:'-0.01em', color:'var(--ink)'}}>
        Healthcare in Canada is everywhere except where you need it. Receipts in shoeboxes. Coverage you can't read. Clinic owners who didn't sign up to be IT departments.
      </div>
      <div className="reveal delay-2" style={{fontFamily:'var(--serif)', fontSize:'clamp(24px, 3vw, 36px)', lineHeight:1.4, fontWeight:400, letterSpacing:'-0.01em', color:'var(--grey-60)', marginTop:32}}>
        We're building the operating system that makes the whole thing feel like one place.
      </div>
    </div>
  </section>
);

const AValues = () => (
  <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:48}}>
        <div className="eyebrow">What we believe</div>
        <h2 className="h1 mt-16">Four <em>principles.</em></h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
        {[
          {n:'01', t:'Patients aren\'t the product', b:'Free for patients. Always. We make money from clinics, never from selling data.'},
          {n:'02', t:'Practitioners always sign', b:'AI drafts. Humans approve. We don\'t automate decisions that affect people\'s care.'},
          {n:'03', t:'Built for Canada first', b:'Provincial coverage rules. PIPEDA & PHIPA. Data hosted here. No exceptions.'},
          {n:'04', t:'Transparent or it doesn\'t ship', b:'Every AI suggestion shows its work. Every fee is visible. Every audit is public.'},
        ].map((v, i) => (
          <div key={i} className={`reveal delay-${i+1}`} style={{padding:36, background:'white', borderRadius:24, boxShadow:'0 4px 20px rgba(11,18,40,0.04)'}}>
            <div style={{fontFamily:'var(--serif)', fontSize:42, fontWeight:500, color:'var(--brand-primary)', opacity:0.3, lineHeight:1}}>{v.n}</div>
            <h3 className="h3 mt-16" style={{marginBottom:10}}>{v.t}</h3>
            <p style={{color:'var(--grey-70)', lineHeight:1.5, margin:0}}>{v.b}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/*
const ATeam = () => (
  <section 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:48}}>
        <div className="eyebrow">The team</div>
        <h2 className="h1 mt-16">Practitioners, engineers, <em>operators.</em></h2>
        <p className="lead mt-24">Built by people who've worked the front desk, signed the SOAP note, and chased the claim.</p>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20}}>
        {[
          {n:'Dr. Amara Okafor', r:'Co-founder · Clinical', tone:'var(--soft-pink)'},
          {n:'Marcus Lee', r:'Co-founder · Engineering', tone:'var(--soft-sky)'},
          {n:'Riya Mehta', r:'Head of Product', tone:'var(--soft-mint)'},
          {n:'Jasper Chen', r:'Head of AI', tone:'var(--brand-tertiary)'},
        ].map((p, i) => (
          <div key={i} className={`reveal delay-${i+1} surface`} style={{padding:24}}>
            <div style={{aspectRatio:'1/1', borderRadius:16, background:p.tone, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--serif)', fontSize:48, fontWeight:500, color:'var(--brand-primary)', marginBottom:14}}>{p.n.split(' ').map(x=>x[0]).slice(0,2).join('')}</div>
            <div style={{fontWeight:600, fontSize:15}}>{p.n}</div>
            <div style={{fontSize:13, color:'var(--grey-60)'}}>{p.r}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);
*/

const APage = () => { useReveal(); return (<div><Nav active="about"/><AHero/><AStory/><AValues/>{/* <ATeam/> */}<Footer/></div>); };
ReactDOM.createRoot(document.getElementById('root')).render(<APage/>);