// trust.jsx
const TrustHero = () => (
  <section style={{paddingTop:140, paddingBottom:100, paddingLeft:'var(--site-pad)', paddingRight:'var(--site-pad)', background:'linear-gradient(180deg, var(--paper) 0%, var(--soft-sky) 100%)', textAlign:'center'}}>
    <div className="reveal" style={{maxWidth:1000, margin:'0 auto'}}>
      <div className="tag-pill" style={{marginBottom:32}}><span className="dot"></span>Trust & Privacy</div>
      <h1 className="display" style={{maxWidth:'14ch', margin:'0 auto'}}>Your data. <em>Your control.</em></h1>
      <p className="lead" style={{margin:'28px auto 0', textAlign:'center'}}>Built in Canada, for Canadian healthcare. Encrypted end to end. Never sold. Ever.</p>
    </div>
  </section>
);

const TrustPillars = () => (
  <section style={{padding:'clamp(80px, 14vh, 160px) var(--site-pad)', background:'var(--paper)'}}>
    <div style={{maxWidth:'var(--max-w)', margin:'0 auto', display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
      {[
        {tag:'Private', icon:'lock', title:'Private by design', body:'End-to-end encryption. Zero-knowledge architecture where it matters. We can\'t read what we don\'t need.'},
        {tag:'Canadian', icon:'maps_home_work', title:'Built for Canada', body:'Data stays in Canadian regions. PIPEDA & PHIPA compliant. Audited by Canadian firms.'},
        {tag:'Transparent', icon:'auto_awesome', title:'Transparent AI', body:'Every AI decision is logged and reviewable. Practitioners always sign. Never automated billing.'},
      ].map((p, i) => (
        <div key={i} className={`reveal delay-${i+1} surface`} style={{padding:32}}>
          <div className="center" style={{width:56, height:56, borderRadius:16, background:'var(--brand-tertiary)', color:'var(--brand-primary)', marginBottom:20}}>
            <span className="mi mi-fill" style={{fontSize:28}}>{p.icon}</span>
          </div>
          <div className="eyebrow" style={{marginBottom:8}}>{p.tag}</div>
          <h3 className="h3" style={{marginBottom:12}}>{p.title}</h3>
          <p style={{color:'var(--grey-70)', lineHeight:1.5}}>{p.body}</p>
        </div>
      ))}
    </div>
  </section>
);

const TrustCerts = () => (
  <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={{textAlign:'center', marginBottom:56}}>
        <div className="eyebrow">Compliance</div>
        <h2 className="h1 mt-16" style={{maxWidth:'20ch', margin:'16px auto 0'}}>Audited. Certified. <em>Verifiable.</em></h2>
      </div>
      <div className="reveal" style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
        {['PIPEDA','PHIPA','HIPAA-aligned','SOC 2 aligned','TELUS Health','Stripe Connect','Canadian-hosted','Encrypted at rest'].map((b, i) => (
          <div key={i} className="surface" style={{padding:'28px 20px', textAlign:'center'}}>
            <span className="mi" style={{fontSize:32, color:'var(--brand-primary)'}}>verified</span>
            <div style={{fontFamily:'var(--serif)', fontSize:18, fontWeight:500, color:'var(--ink)', marginTop:10}}>{b}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const TPage = () => { useReveal(); return (<div><Nav active="trust"/><TrustHero/><TrustPillars/><TrustCerts/><Footer/></div>); };
ReactDOM.createRoot(document.getElementById('root')).render(<TPage/>);