// How it Works, Pricing, About, Contact/Demo

function HowItWorks() {
  const [step, setStep] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const steps = [
  ['01', 'Download & sign up', 'Care workers create a free Credz wallet in under 5 minutes. ID-verified via phone + email.'],
  ['02', 'Upload credentials', 'Snap a photo. OCR extracts fields. You confirm. Credz queues primary-source verification.'],
  ['03', 'Get verified', 'We cross-check with issuing bodies. Most credentials verify in under 24 hours.'],
  ['04', 'Connect a facility', 'Scan a QR, or paste a Credz invite link. The home sees your full verified wallet, live.'],
  ['05', 'Stay in sync, forever', '60 / 30 / 7-day expiry alerts. Auto-re-verification on renewal. No more chasing.']];

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setStep((s) => (s + 1) % steps.length), 4000);
    return () => clearInterval(id);
  }, [paused]);

  return (
    <div className="wf-page wf">
      <Chrome url="credz.health/how-it-works" />
      <Nav active="How it Works" />

      <div className="wf-section hero" style={{ textAlign: 'center', paddingBottom: 24 }}>
        <Eyebrow>How it works</Eyebrow>
        <h1 className="wf-h1" style={{ marginTop: 18, marginBottom: 18, maxWidth: 820, margin: '18px auto' }}>
          Your compliance,<br /><span style={{ color: WF.accent }}>simplified.</span>
        </h1>
        <p className="wf-sub" style={{ maxWidth: 560, margin: '0 auto 12px' }}>
          From your first upload to your first shift, in five calm steps.
        </p>
        <div className="wf-note" style={{ textAlign: 'center' }}>auto-advances every 4s · click any step to jump</div>
      </div>

      {/* Animated 5-step stage */}
      <div className="wf-section" style={{ paddingTop: 0, paddingBottom: 48 }}
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
        <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 56, alignItems: 'flex-start' }}>
          {/* Left rail — step list */}
          <div>
            {steps.map(([n, t, d], i) =>
            <div key={n} onClick={() => setStep(i)}
            style={{
              padding: '18px 20px', borderLeft: `2px solid ${step === i ? WF.accent : WF.line2}`,
              background: step === i ? WF.accentSoft : 'transparent', cursor: 'pointer',
              transition: 'all .25s', position: 'relative'
            }}>
                <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div className="wf-display" style={{ fontSize: 22, color: step === i ? WF.accent : WF.ink3, fontWeight: 500, transition: 'color .25s' }}>{n}</div>
                  <div style={{ flex: 1 }}>
                    <div className="wf-h4" style={{ fontSize: 16, marginBottom: step === i ? 6 : 0 }}>{t}</div>
                    <div style={{
                    maxHeight: step === i ? 80 : 0, opacity: step === i ? 1 : 0,
                    overflow: 'hidden', transition: 'max-height .35s ease, opacity .25s'
                  }}>
                      <div className="wf-body" style={{ fontSize: 13 }}>{d}</div>
                    </div>
                  </div>
                </div>
                {step === i && !paused &&
              <div style={{ position: 'absolute', left: -2, bottom: 0, width: 2, height: 0, background: WF.accent, animation: 'hiwTick 4s linear forwards' }} />
              }
              </div>
            )}
          </div>

          {/* Right — animated stage */}
          <div style={{ position: 'sticky', top: 24, display: 'flex', justifyContent: 'center' }}>
            <HIWStage step={step} />
          </div>
        </div>
      </div>

      {/* CTA */}
      <div className="wf-section" style={{ background: WF.ink, color: 'white', textAlign: 'center' }}>
        <h2 className="wf-h2" style={{ color: 'white', marginBottom: 14 }}>Ready for a faster path?</h2>
        <Btn variant="accent" size="lg">Join the Credz Side</Btn>
      </div>

      <Footer />

      <style>{`
        @keyframes hiwTick { from { height: 0 } to { height: 100% } }
        @keyframes hiwFade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
        @keyframes hiwPulse { 0%, 100% { transform: scale(1); opacity: .6 } 50% { transform: scale(1.08); opacity: 1 } }
        @keyframes hiwSlideIn { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: translateX(0) } }
        @keyframes hiwScan { 0% { top: 0 } 100% { top: 100% } }
        @keyframes hiwCheck { from { stroke-dashoffset: 30 } to { stroke-dashoffset: 0 } }
        @keyframes hiwBar { from { width: 0 } to { width: var(--w, 100%) } }
        .hiw-stage-card { animation: hiwFade .45s ease both; }
      `}</style>
    </div>);

}

// ─── Animated stage that swaps its scene per step ───
function HIWStage({ step }) {
  return (
    <div style={{
      width: 520, height: 560, borderRadius: 28, background: WF.paper,
      border: `1px solid ${WF.line2}`, boxShadow: '0 28px 70px rgba(0,0,0,.10)',
      padding: 28, position: 'relative', overflow: 'hidden'
    }} key={step} className="hiw-stage-card">
      {step === 0 && <HIWStep1 />}
      {step === 1 && <HIWStep2 />}
      {step === 2 && <HIWStep3 />}
      {step === 3 && <HIWStep4 />}
      {step === 4 && <HIWStep5 />}
    </div>);

}

// Step 1 — Download & sign up: phone with sign-up form
function HIWStep1() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', justifyContent: 'center' }}>
      <div style={{ width: 240, height: 480, borderRadius: 36, background: WF.ink, padding: 10, boxShadow: '0 18px 40px rgba(0,0,0,.20)' }}>
        <div style={{ width: '100%', height: '100%', borderRadius: 28, background: WF.paper, padding: 22, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
            <div style={{ width: 56, height: 56, borderRadius: 14, background: WF.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 600, fontSize: 22 }}>C</div>
          </div>
          <div style={{ fontSize: 18, fontWeight: 600, textAlign: 'center', marginBottom: 6 }}>Welcome to Credz</div>
          <div style={{ fontSize: 12, color: WF.ink3, textAlign: 'center', marginBottom: 24 }}>Your verified credential wallet</div>
          {[
          { label: 'Full name', v: 'Julian Thorne' },
          { label: 'Email', v: 'julian@email.com' },
          { label: 'Phone', v: '+1 (416) 555-0182' }].
          map((f, i) =>
          <div key={f.label} style={{ marginBottom: 12, animation: `hiwFade .4s ${i * 0.15}s both` }}>
              <div style={{ fontSize: 10, color: WF.ink3, textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 4 }}>{f.label}</div>
              <div style={{ padding: '8px 10px', background: WF.fill, borderRadius: 6, fontSize: 12, border: `1px solid ${WF.line2}` }}>{f.v}</div>
            </div>
          )}
          <div style={{ marginTop: 'auto', padding: '10px 0', background: WF.accent, color: 'white', borderRadius: 10, textAlign: 'center', fontSize: 13, fontWeight: 600 }}>Create my Credz Wallet</div>
        </div>
      </div>
    </div>);

}

// Step 2 — Upload credentials: scan animation
function HIWStep2() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'center', gap: 20 }}>
      <div style={{ textAlign: 'center' }}>
        <div className="wf-h4" style={{ marginBottom: 4 }}>Upload your credential</div>
        <div className="wf-small">OCR extracts fields automatically</div>
      </div>
      {/* Document scan area */}
      <div style={{ position: 'relative', height: 220, background: WF.fill, borderRadius: 14, border: `2px dashed ${WF.line}`, padding: 20, overflow: 'hidden' }}>
        <div style={{ background: WF.paper, borderRadius: 8, padding: 16, height: '100%', boxShadow: '0 4px 12px rgba(0,0,0,.06)' }}>
          <div style={{ fontSize: 10, color: WF.ink3, textTransform: 'uppercase', letterSpacing: '.06em' }}>RN License — Ontario</div>
          <div style={{ fontSize: 18, fontWeight: 600, marginTop: 4 }}>Julian Thorne</div>
          <div style={{ fontSize: 11, color: WF.ink2, marginTop: 8 }}>License #: 178432</div>
          <div style={{ fontSize: 11, color: WF.ink2 }}>Issued: 2022-03-15</div>
          <div style={{ fontSize: 11, color: WF.ink2 }}>Expires: 2026-03-15</div>
          <div style={{ marginTop: 8, height: 32, background: WF.fill2, borderRadius: 4 }} />
        </div>
        {/* Scan line */}
        <div style={{ position: 'absolute', left: 20, right: 20, height: 2, background: `linear-gradient(90deg, transparent, ${WF.accent}, transparent)`, boxShadow: `0 0 12px ${WF.accent}`, animation: 'hiwScan 2s ease-in-out infinite' }} />
      </div>
      {/* Extracted fields */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
        ['Name', 'Julian Thorne'],
        ['License #', '178432'],
        ['Expires', '2026-03-15']].
        map(([k, v], i) =>
        <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 12px', background: WF.okSoft, borderRadius: 8, fontSize: 12, animation: `hiwSlideIn .35s ${0.4 + i * 0.2}s both` }}>
            <span style={{ color: WF.ink3 }}>{k}</span>
            <span style={{ fontWeight: 600 }}>{v} <span style={{ color: WF.ok }}>✓</span></span>
          </div>
        )}
      </div>
    </div>);

}

// Step 3 — Get verified: live cross-check with issuer
function HIWStep3() {
  const checks = [
  ['College of Nurses of Ontario', 'License #178432', 'verified'],
  ['Heart & Stroke Foundation', 'CPR-C 2024', 'verified'],
  ['Credz Background Service', 'Police Check', 'verifying']];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'center', gap: 18 }}>
      <div style={{ textAlign: 'center' }}>
        <div className="wf-h4" style={{ marginBottom: 4 }}>Primary-source verification</div>
        <div className="wf-small">Cross-checking with issuing bodies in real time</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {checks.map(([source, doc, status], i) =>
        <div key={source} style={{
          padding: 16, background: WF.paper, borderRadius: 12, border: `1px solid ${WF.line2}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          animation: `hiwSlideIn .4s ${i * 0.4}s both`
        }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{source}</div>
              <div style={{ fontSize: 11, color: WF.ink3, marginTop: 2 }}>{doc}</div>
            </div>
            {status === 'verified' ?
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, color: WF.ok }}>
                <svg width="16" height="16" viewBox="0 0 16 16">
                  <circle cx="8" cy="8" r="7" fill={WF.ok} />
                  <path d="M4.5 8 L7 10.5 L11.5 5.5" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                Verified
              </div> :

          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, color: WF.warn }}>
                <div style={{ width: 12, height: 12, borderRadius: 6, background: WF.warn, animation: 'hiwPulse 1.2s ease-in-out infinite' }} />
                Verifying…
              </div>
          }
          </div>
        )}
      </div>
      <div style={{ marginTop: 'auto', padding: '12px 16px', background: WF.okSoft, borderRadius: 10, textAlign: 'center', fontSize: 12, color: WF.ok, fontWeight: 600 }}>
        ✓ Most credentials verified in under 24 hours
      </div>
    </div>);

}

// Step 4 — Connect a facility: QR scan from phone → home dashboard
function HIWStep4() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'center', gap: 16 }}>
      <div style={{ textAlign: 'center' }}>
        <div className="wf-h4" style={{ marginBottom: 4 }}>Connect with a facility</div>
        <div className="wf-small">Scan QR or paste an invite link</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        {/* Mini phone with QR */}
        <div style={{ width: 160, padding: 12, background: WF.ink, borderRadius: 22, boxShadow: '0 12px 28px rgba(0,0,0,.18)' }}>
          <div style={{ background: WF.paper, borderRadius: 16, padding: 14, textAlign: 'center' }}>
            <div style={{ fontSize: 9, color: WF.ink3, marginBottom: 6, textTransform: 'uppercase', letterSpacing: '.06em' }}>Share my Credz</div>
            <div style={{ width: 120, height: 120, margin: '0 auto', background: WF.ink, borderRadius: 8, display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 1, padding: 6 }}>
              {Array.from({ length: 64 }).map((_, i) =>
              <div key={i} style={{ background: Math.random() > 0.5 ? 'white' : WF.ink, borderRadius: 1 }} />
              )}
            </div>
            <div style={{ fontSize: 10, fontWeight: 600, marginTop: 8 }}>Julian Thorne</div>
          </div>
        </div>
        {/* Animated arrow */}
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <div style={{ height: 2, width: '100%', background: `linear-gradient(90deg, transparent, ${WF.accent}, transparent)`, position: 'relative' }}>
            <div style={{ position: 'absolute', top: -3, left: '50%', width: 8, height: 8, borderRadius: 4, background: WF.accent, transform: 'translateX(-50%)', animation: 'hiwPulse 1.2s ease-in-out infinite' }} />
          </div>
        </div>
        {/* Home dashboard mini */}
        <div style={{ flex: '0 0 200px', padding: 14, background: WF.paper, borderRadius: 12, border: `1px solid ${WF.line2}`, boxShadow: '0 8px 20px rgba(0,0,0,.08)' }}>
          <div style={{ fontSize: 9, color: WF.ink3, textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 6 }}>Maple Grove · live</div>
          <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>+ New care worker linked</div>
          <div style={{ padding: 8, background: WF.okSoft, borderRadius: 6, fontSize: 11, marginBottom: 6 }}>
            <div style={{ fontWeight: 600 }}>Julian Thorne · RN</div>
            <div style={{ color: WF.ok, marginTop: 2 }}>✓ 18/18 docs verified</div>
          </div>
          <div style={{ fontSize: 10, color: WF.ink3 }}>Wallet shared in real time</div>
        </div>
      </div>
      <div style={{ marginTop: 'auto', padding: '10px 14px', background: WF.accentSoft, color: WF.accent, borderRadius: 10, textAlign: 'center', fontSize: 12, fontWeight: 600 }}>
        Home sees your full verified wallet — instantly
      </div>
    </div>);

}

// Step 5 — Stay in sync: expiry timeline with alerts
function HIWStep5() {
  const items = [
  ['CPR-C', 'Renews in 60 days', 'ok', 100],
  ['RN License', 'Renews in 30 days', 'warn', 80],
  ['TB Skin Test', 'Renewed', 'ok', 100],
  ['Police Check', 'Re-verified today', 'ok', 100]];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'center', gap: 16 }}>
      <div style={{ textAlign: 'center' }}>
        <div className="wf-h4" style={{ marginBottom: 4 }}>Stay in sync, forever</div>
        <div className="wf-small">60 / 30 / 7-day alerts. Auto-re-verification.</div>
      </div>
      {/* Timeline cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(([t, sub, tone, w], i) => {
          const c = tone === 'ok' ? { bg: WF.okSoft, fg: WF.ok, bar: WF.ok } : { bg: WF.warnSoft, fg: WF.warn, bar: WF.warn };
          return (
            <div key={t} style={{ padding: 12, background: WF.paper, borderRadius: 10, border: `1px solid ${WF.line2}`, animation: `hiwSlideIn .35s ${i * 0.18}s both` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                <div style={{ fontSize: 12, fontWeight: 600 }}>{t}</div>
                <div style={{ fontSize: 10, padding: '2px 8px', background: c.bg, color: c.fg, borderRadius: 4, fontWeight: 600 }}>{sub}</div>
              </div>
              <div style={{ height: 4, background: WF.fill, borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ height: '100%', background: c.bar, borderRadius: 2, '--w': w + '%', animation: `hiwBar .8s ${0.2 + i * 0.18}s both ease-out` }} />
              </div>
            </div>);

        })}
      </div>
      {/* Notification toast */}
      <div style={{ marginTop: 'auto', padding: 14, background: WF.ink, color: 'white', borderRadius: 12, display: 'flex', gap: 12, alignItems: 'center', animation: 'hiwSlideIn .5s 1.2s both' }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: WF.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>🔔</div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 600 }}>Heads up — RN License expires in 30 days</div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,.6)', marginTop: 2 }}>Tap to renew · Maple Grove notified</div>
        </div>
      </div>
    </div>);

}

function Pricing() {
  const [audience, setAudience] = React.useState('care');
  const [period, setPeriod] = React.useState('monthly');

  const audiences = [
  { id: 'care', label: 'Care Workers', sub: 'Always free. Forever.' },
  { id: 'facility', label: 'Facilities', sub: 'Long-term care, retirement homes' },
  { id: 'agency', label: 'Agencies', sub: 'Staffing & healthcare networks' }];


  const plansByAudience = {
    care: [
    {
      name: 'Credz Wallet',
      price: 'Free',
      priceSub: 'forever',
      sub: 'Everything a care worker needs to stay compliant.',
      bullets: [
      'Unlimited credential uploads',
      'Primary-source verification',
      '60 / 30 / 7-day expiry alerts',
      'Unlimited facility shares',
      'Full PDF export',
      'QR + invite link sharing'],

      cta: 'Download the app'
    }],

    facility: [
    {
      name: 'Starter',
      price: period === 'monthly' ? '$9' : '$7',
      priceSub: '/ seat / month',
      sub: 'For single-site homes up to 100 staff.',
      bullets: [
      'AI-based document scanning & verification',
      'Compliance dashboard',
      'Primary-source verification',
      'Agency linkage',
      '1-click audit reports',
      'Automated expiry workflows',
      'Role-based permissions',
      'Email support'],

      cta: 'Start 14-day trial',
      featured: true
    },
    {
      name: 'Enterprise',
      price: 'Custom',
      sub: 'For networks of multiple homes.',
      bullets: [
      'Everything in Starter',
      'Human document verification',
      'Home, region & organization-level dashboards',
      'Policy sign-offs',
      'In-person transfer & onboarding',
      'Multi-site rollups',
      'Inter-facility sync',
      'Dedicated success manager'],

      cta: 'Talk to sales'
    }],

    agency: [
    {
      name: 'Bench',
      price: period === 'monthly' ? '$12' : '$9',
      priceSub: '/ seat / month',
      sub: 'For boutique agencies under 100 workers.',
      bullets: [
      'Active pipeline dashboard',
      'Pre-verified worker profiles',
      '1-click home approval flow',
      'Bulk credential uploads',
      'Standard support'],

      cta: 'Start 14-day trial',
      featured: true
    },
    {
      name: 'Scale',
      price: 'Custom',
      sub: 'For national agencies, 500+ workers.',
      bullets: [
      'Everything in Bench',
      'White-label worker app',
      'Inter-facility wallet sync',
      'API + payroll integrations',
      'Dedicated success manager',
      'Custom SLAs & DPA',
      'SSO + SCIM provisioning',
      'Quarterly business reviews'],

      cta: 'Talk to sales'
    }]

  };

  const plans = plansByAudience[audience];
  const showBilling = audience !== 'care';

  return (
    <div className="wf-page wf">
      <Chrome url="credz.health/pricing" />
      <Nav active="Pricing" />

      <div className="wf-section hero" style={{ textAlign: 'center', paddingBottom: 24 }}>
        <Eyebrow>Pricing</Eyebrow>
        <h1 className="wf-h1" style={{ marginTop: 18, marginBottom: 18, maxWidth: 760, margin: '18px auto' }}>
          Simple. Honest.<br /><span style={{ color: WF.accent }}>Always free for the frontline.</span>
        </h1>
        <p className="wf-sub" style={{ maxWidth: 520, margin: '0 auto 8px' }}>
          Facilities and agencies pay per seat. Care workers never pay a dollar, ever.
        </p>
      </div>

      {/* Audience tabs */}
      <div className="wf-section" style={{ paddingTop: 0, paddingBottom: 24 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, maxWidth: 820, margin: '0 auto' }}>
          {audiences.map((a) => {
            const active = audience === a.id;
            return (
              <div key={a.id} onClick={() => setAudience(a.id)}
              style={{
                padding: '18px 20px', borderRadius: 14, cursor: 'pointer',
                background: active ? WF.ink : WF.paper,
                color: active ? 'white' : WF.ink,
                border: `1px solid ${active ? WF.ink : WF.line2}`,
                boxShadow: active ? '0 10px 24px rgba(0,0,0,.12)' : 'none',
                transition: 'all .2s', textAlign: 'center'
              }}>
                <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 4 }}>{a.label}</div>
                <div style={{ fontSize: 12, color: active ? 'rgba(255,255,255,.65)' : WF.ink3 }}>{a.sub}</div>
              </div>);

          })}
        </div>

        {/* Billing toggle (only for paid audiences) */}
        {showBilling &&
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 28 }}>
            <div style={{ display: 'inline-flex', padding: 4, background: WF.fill, borderRadius: 999, border: `1px solid ${WF.line2}` }}>
              {[['monthly', 'Monthly'], ['annual', 'Annual · save 22%']].map(([k, l]) =>
            <button key={k} onClick={() => setPeriod(k)} style={{
              padding: '8px 18px', borderRadius: 999, border: 'none',
              background: period === k ? WF.paper : 'transparent',
              color: period === k ? WF.ink : WF.ink2, fontSize: 13, fontWeight: 500, cursor: 'pointer',
              boxShadow: period === k ? '0 1px 3px rgba(0,0,0,.08)' : 'none'
            }}>{l}</button>
            )}
            </div>
          </div>
        }
      </div>

      {/* Plans */}
      <div className="wf-section" style={{ paddingTop: 12 }}>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${plans.length}, 1fr)`, gap: 20, maxWidth: plans.length === 1 ? 400 : plans.length === 2 ? 820 : '100%', margin: '0 auto' }}>
          {plans.map((p) => {
            const feat = p.featured;
            return (
              <div key={p.name} className="wf-card" style={{
                padding: 32, borderRadius: 20,
                background: feat ? WF.ink : WF.paper,
                color: feat ? 'white' : WF.ink,
                border: feat ? `1px solid ${WF.ink}` : `1px solid ${WF.line2}`,
                boxShadow: feat ? '0 18px 48px rgba(0,0,0,.12)' : 'none',
                transform: feat ? 'translateY(-8px)' : 'none'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                  <div className="wf-h4" style={{ color: feat ? 'white' : WF.ink }}>{p.name}</div>
                  {feat && <Chip tone="accent">Most popular</Chip>}
                </div>
                <p style={{ fontSize: 14, color: feat ? 'rgba(255,255,255,.7)' : WF.ink2, marginBottom: 20, minHeight: 36 }}>{p.sub}</p>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 24 }}>
                  <div className="wf-display" style={{ fontSize: 48, fontWeight: 600, letterSpacing: '-0.02em', color: feat ? 'white' : WF.ink }}>{p.price}</div>
                  {p.priceSub && <div style={{ fontSize: 14, color: feat ? 'rgba(255,255,255,.6)' : WF.ink3 }}>{p.priceSub}</div>}
                </div>
                <Btn variant={feat ? 'accent' : 'primary'} style={{ width: '100%', marginBottom: 24, ...(feat ? {} : { background: WF.fill, color: WF.ink, borderColor: WF.line }) }}>{p.cta}</Btn>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, paddingTop: 20, borderTop: `1px solid ${feat ? 'rgba(255,255,255,.15)' : WF.line2}` }}>
                  {p.bullets.map((b) =>
                  <div key={b} style={{ display: 'flex', gap: 10, fontSize: 14, color: feat ? 'rgba(255,255,255,.85)' : WF.ink2 }}>
                      <div style={{ color: feat ? '#64d08a' : WF.ok, flexShrink: 0 }}>✓</div>{b}
                    </div>
                  )}
                </div>
              </div>);

          })}
        </div>
      </div>

      <div className="wf-section" style={{ textAlign: 'center' }}>
        <h2 className="wf-h3" style={{ marginBottom: 14 }}>Still have questions?</h2>
        <Btn variant="accent">Talk to sales</Btn>
      </div>

      <Footer />
    </div>);

}

function AboutUs() {
  return (
    <div className="wf-page wf">
      <Chrome url="credz.health/about" />
      <Nav active="About" />

      <div className="wf-section hero" style={{ textAlign: 'center' }}>
        <Eyebrow>About Credz</Eyebrow>
        <h1 className="wf-h1" style={{ marginTop: 18, marginBottom: 18, maxWidth: 840, margin: '18px auto', color: "rgb(0, 0, 0)" }}>
          Canadian Security.<br />Canadian Standards.<br /><span style={{ color: '#d52b1e' }}></span>
        </h1>
        <p className="wf-sub" style={{ maxWidth: 580, margin: '0 auto' }}>We empower Canadian healthcare professionals and administrators with modern Canadian credential management and compliance.

        </p>
      </div>

      {/* Canadian roots */}
      <div className="wf-section">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <Eyebrow>Made in Canada</Eyebrow>
            <h2 className="wf-h2" style={{ marginTop: 14, marginBottom: 16 }}>
              Built by Canadians.<br />For Canadians.
            </h2>
            <p className="wf-body" style={{ fontSize: 16, marginBottom: 16, maxWidth: 480 }}>
              Credz is proudly founded, engineered and operated in Canada — every line of code, every server, every support ticket. We were built from the ground up for the rigour of the Canadian healthcare system, not retrofitted from an American product.
            </p>
            <p className="wf-body" style={{ fontSize: 16, maxWidth: 480 }}>
              We speak fluent CNO, CLPNO, BCCNM, CARNA, OCSWSSW, PHIPA and PIPEDA — and every provincial body in between.
            </p>
            <div style={{ display: 'flex', gap: 20, marginTop: 24, flexWrap: 'wrap' }}>
              {[
              [<MapleLeafIcon key="leaf" />, 'Incorporated in Canada'],
              [<CloudIcon key="cloud" />, 'Hosted on AWS Canada'],
              [<SupportIcon key="support" />, 'Support team · Toronto']].
              map(([i, t]) =>
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: WF.ink2 }}>
                  {i}{t}
                </div>
              )}
            </div>
          </div>
          <div className="wf-card" style={{ padding: 48, overflow: 'hidden', background: 'white', aspectRatio: '4 / 3', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', border: `1px solid ${WF.line2}` }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ display: 'inline-block', padding: 4, background: 'white', borderRadius: 8, boxShadow: '0 8px 24px rgba(0,0,0,.12)' }}>
                <CanadaFlag width={260} />
              </div>
              <div className="wf-display" style={{ fontSize: 30, fontWeight: 600, marginTop: 28, letterSpacing: '-0.02em', color: WF.ink }}>Made in Canada.</div>
              <div className="wf-small" style={{ marginTop: 6, color: WF.ink2 }}>Your data never leaves home.</div>

              {/* Trust pills */}
              <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 20, flexWrap: 'wrap' }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', background: WF.fill, borderRadius: 999, fontSize: 11, fontWeight: 500, color: WF.ink2 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: WF.ok }}></span>
                  PIPEDA
                </div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', background: WF.fill, borderRadius: 999, fontSize: 11, fontWeight: 500, color: WF.ink2 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: WF.ok }}></span>
                  AWS Canada
                </div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', background: WF.fill, borderRadius: 999, fontSize: 11, fontWeight: 500, color: WF.ink2 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: WF.ok }}></span>
                  SOC 2 Type II
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Security & Privacy section */}
      <div className="wf-section" style={{ background: WF.ink, color: 'white' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <Eyebrow color="#8ab4f8">Security &amp; Privacy</Eyebrow>
          <h2 className="wf-h2" style={{ marginTop: 14, marginBottom: 18, color: 'white', maxWidth: 860, margin: '14px auto 18px' }}>
            Security You Can Trust.<br />
            <span style={{ color: WF.accent }}>Privacy You Can Verify.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,.72)', lineHeight: 1.55, maxWidth: 720, margin: '0 auto' }}>
            At Credz, we aren't just managing documents — we're protecting the professional identities of healthcare heroes and the legal integrity of the facilities that employ them. Our platform is engineered to exceed the most stringent Canadian and international data protection standards.
          </p>
        </div>

        {/* 5 pillars */}
        <div style={{ fontSize: 13, textTransform: 'uppercase', letterSpacing: '.1em', color: 'rgba(255,255,255,.55)', fontWeight: 600, marginBottom: 24, textAlign: 'center' }}>
          Our Security Pillars
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 16 }}>
          {[
          [<MapleLeafIcon key="i" size={28} />, '100% Canadian Data Residency', 'Your data never leaves Canadian soil. We utilize AWS Canada (Central) regions to ensure full compliance with PHIPA (Ontario) and PIPEDA federal mandates.'],
          [<LockIcon key="i" size={28} />, 'Bank-Grade Encryption', 'All sensitive documents are protected by AES-256 at-rest encryption and forced TLS 1.2+ in-transit. Your information is unreadable to anyone — including us — without authorized access.'],
          [<MagnifierIcon key="i" size={28} />, 'Primary Source Integrity', 'We don\'t just "store" files — we verify them. By syncing directly with provincial registries like the CNO and HSCPOA, we ensure every credential is authentic, active, and audit-ready in real time.']].
          map(([ico, t, d]) =>
          <div key={t} style={{ padding: 24, background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.08)', borderRadius: 14, color: 'rgba(255,255,255,.85)' }}>
              <div style={{ marginBottom: 14, color: WF.accent }}>{ico}</div>
              <div className="wf-h4" style={{ color: 'white', marginBottom: 8, fontSize: 18 }}>{t}</div>
              <p style={{ fontSize: 14, color: 'rgba(255,255,255,.7)', lineHeight: 1.55 }}>{d}</p>
            </div>
          )}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginBottom: 48 }}>
          {[
          [<HandshakeIcon key="i" size={28} />, 'Total Sovereignty &amp; Consent', 'We operate on a "Zero-Knowledge" philosophy. Care providers maintain absolute ownership of their digital wallet, and access is only granted to organizations through an explicit, time-stamped "Digital Handshake."'],
          [<ChartIcon key="i" size={28} />, 'Continuous Compliance Monitoring', 'Security isn\'t a one-time event. Credz utilizes automated compliance engines to maintain continuous alignment with SOC 2 and HIPAA frameworks, featuring real-time audit logging for every document interaction.']].
          map(([ico, t, d]) =>
          <div key={t} style={{ padding: 24, background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.08)', borderRadius: 14, color: 'rgba(255,255,255,.85)' }}>
              <div style={{ marginBottom: 14, color: WF.accent }}>{ico}</div>
              <div className="wf-h4" style={{ color: 'white', marginBottom: 8, fontSize: 18 }} dangerouslySetInnerHTML={{ __html: t }} />
              <p style={{ fontSize: 14, color: 'rgba(255,255,255,.7)', lineHeight: 1.55 }}>{d}</p>
            </div>
          )}
        </div>

        {/* Mission quote */}
        <div style={{ padding: '40px 32px', background: 'rgba(255,255,255,.03)', borderRadius: 18, border: '1px solid rgba(255,255,255,.08)', textAlign: 'center', marginBottom: 48 }}>
          <div style={{ fontSize: 44, lineHeight: 1, color: WF.accent, marginBottom: 8 }}>"</div>
          <p className="wf-display" style={{ fontSize: 26, fontWeight: 400, letterSpacing: '-0.01em', lineHeight: 1.4, maxWidth: 820, margin: '0 auto', color: 'white' }}>Our mission is to replace the vulnerability and time waste of paper files and spreadsheets with a secure, digital nervous system that protects both the provider and the patient with verified credentials and compliance.

          </p>
        </div>

        {/* Trust badges */}
        <div style={{ fontSize: 13, textTransform: 'uppercase', letterSpacing: '.1em', color: 'rgba(255,255,255,.55)', fontWeight: 600, marginBottom: 20, textAlign: 'center' }}>
          Compliant &amp; certified
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
          [<MapleLeafIcon key="i" size={26} />, 'PHIPA Compliant', 'Ontario Health Privacy'],
          [<ShieldIcon key="i" size={26} />, 'SOC 2 Type II', 'Enterprise Security Audit'],
          [<LockIcon key="i" size={26} />, 'AES-256 Encrypted', 'Military-Grade Protection']].
          map(([ico, t, sub]) =>
          <div key={t} style={{ padding: '20px 24px', background: 'white', color: WF.ink, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 48, height: 48, borderRadius: 10, background: WF.accentSoft, color: WF.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{ico}</div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>{t}</div>
                <div className="wf-small" style={{ fontSize: 12 }}>{sub}</div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* CTA band */}
      <div className="wf-section">
        <div className="wf-card fill" style={{ padding: 48, textAlign: 'center' }}>
          <h2 className="wf-h3" style={{ marginBottom: 10 }}>Ready to modernise your compliance?</h2>
          <p className="wf-body" style={{ marginBottom: 20, maxWidth: 480, margin: '0 auto 20px' }}>
            Join leading Canadian healthcare facilities who have already reclaimed their time with Credz.
          </p>
          <Btn variant="accent" size="lg">Sign up</Btn>
        </div>
      </div>

      <Footer />
    </div>);

}

function Contact() {
  return (
    <div className="wf-page wf">
      <Chrome url="credz.health/contact" />
      <Nav active="" />

      <div className="wf-section hero" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <Eyebrow>Book a demo</Eyebrow>
          <h1 className="wf-h1" style={{ marginTop: 18, marginBottom: 18, fontSize: 56 }}>
            See Credz on your<br />facility's data.
          </h1>
          <p className="wf-sub" style={{ marginBottom: 32, maxWidth: 460 }}>
            A 20-minute walkthrough tailored to your homes, your staff ratios, and your regulator.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {[
            ['⚡', 'Same-week setup', 'Most facilities go live within 5 business days.'],
            ['🇨🇦', 'Canadian data only', 'PIPEDA &amp; PHIPA, hosted in Canada.'],
            ['📞', 'Real humans', 'Every facility gets a dedicated onboarding lead.']].
            map(([i, t, d]) =>
            <div key={t} style={{ display: 'flex', gap: 14 }}>
                <div style={{ fontSize: 20 }}>{i}</div>
                <div>
                  <div style={{ fontWeight: 500, fontSize: 15 }}>{t}</div>
                  <div className="wf-small" dangerouslySetInnerHTML={{ __html: d }} />
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="wf-card" style={{ padding: 32 }}>
          <div style={{ display: 'flex', gap: 4, padding: 4, background: WF.fill, borderRadius: 999, marginBottom: 24 }}>
            {['I run a facility', 'I run an agency', 'I\'m a care worker'].map((l, i) =>
            <button key={l} style={{
              flex: 1, padding: '8px 12px', borderRadius: 999, border: 'none',
              background: i === 0 ? WF.paper : 'transparent',
              color: i === 0 ? WF.ink : WF.ink2, fontSize: 12, fontWeight: 500,
              cursor: 'pointer',
              boxShadow: i === 0 ? '0 1px 3px rgba(0,0,0,.06)' : 'none'
            }}>{l}</button>
            )}
          </div>
          <div className="wf-h4" style={{ marginBottom: 6 }}>Tell us about your facility.</div>
          <div className="wf-small" style={{ marginBottom: 24 }}>We'll reach out within 1 business day.</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
            ['Full name', 'Alex Mitchell'],
            ['Work email', 'alex@ridgewoodcare.ca'],
            ['Facility / organization', 'Ridgewood Retirement'],
            ['Number of staff', '50–200'],
            ['Province', 'Ontario']].
            map(([l, ph]) =>
            <div key={l}>
                <div className="wf-small" style={{ marginBottom: 4 }}>{l}</div>
                <div style={{ border: `1px solid ${WF.line}`, borderRadius: 8, padding: '10px 12px', fontSize: 14, color: WF.ink3, background: WF.paper }}>{ph}</div>
              </div>
            )}
            <div>
              <div className="wf-small" style={{ marginBottom: 4 }}>What's your biggest compliance headache?</div>
              <div style={{ border: `1px solid ${WF.line}`, borderRadius: 8, padding: '10px 12px', fontSize: 14, color: WF.ink3, background: WF.paper, minHeight: 72 }}>
                Tell us anything (optional)
              </div>
            </div>
          </div>
          <Btn variant="accent" size="lg" style={{ width: '100%', marginTop: 20 }}>Request a demo</Btn>
          <div className="wf-small" style={{ textAlign: 'center', marginTop: 12 }}>
            By submitting, you agree to our <span style={{ textDecoration: 'underline' }}>Privacy Policy</span>.
          </div>
        </div>
      </div>

      {/* Other ways to reach us */}
      <div className="wf-section" style={{ background: WF.fill }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {[
          ['General', 'hello@credz.health', 'Anything that doesn\'t fit a form.'],
          ['Support', 'support@credz.health', 'Logged-in users: help from inside the app.'],
          ['Media', 'press@credz.health', 'Partnerships, press, and brand requests.']].
          map(([h, email, d]) =>
          <div key={h} className="wf-card" style={{ padding: 28 }}>
              <div className="wf-h4" style={{ marginBottom: 6 }}>{h}</div>
              <div style={{ fontFamily: WF.mono, fontSize: 13, color: WF.accent, marginBottom: 10 }}>{email}</div>
              <p className="wf-body" style={{ fontSize: 13 }}>{d}</p>
            </div>
          )}
        </div>
      </div>

      <Footer />
    </div>);

}

function CanadaFlag({ width = 80 }) {
  // 1:2 aspect ratio per official spec
  const h = width / 2;
  return (
    <img
      src="uploads/Flag_of_Canada.png"
      alt="Canadian flag"
      width={width}
      height={h}
      style={{ display: 'block', borderRadius: 4, boxShadow: '0 2px 8px rgba(0,0,0,.08)', objectFit: 'cover' }} />);


}

function MapleLeafIcon({ size = 18 }) {
  // Apple-style line-icon maple leaf (matches CloudIcon / SupportIcon stroke)
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 3 L13.1 6.6 L15.8 5.8 L14.7 8.5 L17.8 9.1 L15.9 10.9 L16.6 12.7 L14.2 12.1 L13.9 14.6 L12 13.7 L10.1 14.6 L9.8 12.1 L7.4 12.7 L8.1 10.9 L6.2 9.1 L9.3 8.5 L8.2 5.8 L10.9 6.6 Z" />
      <path d="M12 13.7 L12 21" />
    </svg>);

}

function CloudIcon({ size = 18 }) {
  // Apple-style cloud with check, line icon
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M7 17.5h10.5a3.5 3.5 0 0 0 .5-6.97A5.5 5.5 0 0 0 7.4 9.5 4 4 0 0 0 7 17.5Z" />
      <path d="M9.5 13.5l1.7 1.7L14.5 11.8" />
    </svg>);

}

function SupportIcon({ size = 18 }) {
  // Apple-style headset
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M4 13a8 8 0 0 1 16 0" />
      <rect x="3" y="13" width="4" height="6" rx="1.5" />
      <rect x="17" y="13" width="4" height="6" rx="1.5" />
      <path d="M20 19v.5a2.5 2.5 0 0 1-2.5 2.5H14" />
    </svg>);

}

function LockIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="4" y="10" width="16" height="11" rx="2.5" />
      <path d="M8 10V7a4 4 0 1 1 8 0v3" />
      <circle cx="12" cy="15.5" r="1.2" fill="currentColor" />
    </svg>);

}

function MagnifierIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="11" cy="11" r="6" />
      <path d="M16 16l4 4" />
      <path d="M9 10l1.6 1.6L13.5 8.5" />
    </svg>);

}

function HandshakeIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M3 11l4-4 3 1 2-1 4 1 5 4-2 2-3-2-4 4-2-1-2 2-2-2 3-3" />
      <path d="M14 8l-2 2" />
    </svg>);

}

function ChartIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M4 19h17" />
      <path d="M4 19V5" />
      <rect x="7" y="12" width="3" height="5" rx="0.5" />
      <rect x="12" y="9" width="3" height="8" rx="0.5" />
      <rect x="17" y="6" width="3" height="11" rx="0.5" />
      <path d="M7 9l4-4 4 2 4-4" strokeDasharray="0" />
    </svg>);

}

function ShieldIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 3 L20 6 V12 C20 16.5 16.5 20 12 21.5 C7.5 20 4 16.5 4 12 V6 Z" />
      <path d="M9 12.5 L11 14.5 L15.5 10" />
    </svg>);

}

function KeyIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="8" cy="14" r="4" />
      <path d="M11 12 L20 4" />
      <path d="M17 7 L19.5 9.5" />
      <path d="M14.5 9.5 L17 12" />
    </svg>);

}

Object.assign(window, { HowItWorks, Pricing, AboutUs, Contact, HIWStage, HIWStep1, HIWStep2, HIWStep3, HIWStep4, HIWStep5, CanadaFlag, MapleLeafIcon, CloudIcon, SupportIcon, LockIcon, MagnifierIcon, HandshakeIcon, ChartIcon, ShieldIcon, KeyIcon });