// Landing page — 3 directions
// A) Product-first, hero with phone
// B) Problem-first, narrative
// C) Split audience (care workers vs facilities vs agencies)

function LandingA() {
  return (
    <div className="wf-page wf">
      <Chrome />
      <Nav active="" />

      {/* Hero — product-first with phone mockup */}
      <div className="wf-section hero" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 48, alignItems: 'center', position: 'relative' }}>
        <div>
          <Eyebrow>Healthcare Compliance &amp; Credentialing</Eyebrow>
          <h1 className="wf-h1" style={{ marginTop: 16, marginBottom: 18 }}>
            Never worry about<br />compliance. Ever again.
          </h1>
          <p className="wf-sub" style={{ maxWidth: 480, marginBottom: 28 }}>
            The digital passport for care workers. One secure wallet for every credential — verified, tamper-proof, and shareable with any home or agency in a single tap.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <Btn variant="accent" size="lg">Sign up — I'm a care worker</Btn>
            <Btn size="lg">Sign up — I'm a facility</Btn>
          </div>
          <div style={{ display: 'flex', gap: 20, marginTop: 28, alignItems: 'center' }}>
            <div className="wf-small">Download the app</div>
            <Placeholder label="App Store" w={120} h={36} radius={8} />
            <Placeholder label="Google Play" w={120} h={36} radius={8} />
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <HeroWalletPhone />
        </div>
      </div>

      {/* Stats bar */}
      <div className="wf-section tight" style={{ background: WF.fill, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, margin: '0 48px', borderRadius: 24 }}>
        {[
        ['12 hrs', 'saved per hire'],
        ['99.4%', 'compliance rate'],
        ['<30 sec', 'share a Credz wallet'],
        ['∞ trees', 'saved by switching to Credz']].
        map(([n, l]) =>
        <div key={l}>
            <div className="wf-display" style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em' }}>{n}</div>
            <div className="wf-small" style={{ marginTop: 6 }}>{l}</div>
          </div>
        )}
      </div>

      {/* Three-audience row */}
      <div className="wf-section">
        <AudienceTabsSection />
      </div>

      {/* ROI Calculator */}
      <div className="wf-section">
        <ROICalculator />
      </div>

      {/* Three-audience row */}
      <div className="wf-section">
        <Eyebrow>Connect in one click</Eyebrow>
        <h2 className="wf-h2" style={{ marginTop: 12, marginBottom: 10, maxWidth: 760 }}>
          Two ways to link. Zero emails, zero attachments.
        </h2>
        <p className="wf-sub" style={{ maxWidth: 580, marginBottom: 32 }}>
          Care workers send a QR or link. Homes search by Credz ID. Either way, the connection takes one tap.
        </p>
        <ShareFlowDemo />
      </div>

      {/* Feature block — bento */}
      <div className="wf-section" style={{ background: WF.fill2 }}>
        <h2 className="wf-h2" style={{ marginBottom: 40, maxWidth: 640 }}>
          A career in your pocket.<br />A facility that sleeps well.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: 'repeat(2, 240px)', gap: 16 }}>
          <div className="wf-card" style={{ gridColumn: 'span 2', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <Chip tone="accent">Instant</Chip>
              <div className="wf-h3" style={{ marginTop: 12 }}>One-tap upload.</div>
              <p className="wf-body" style={{ marginTop: 8, maxWidth: 320 }}>Snap a photo. Credz extracts, verifies and files it.</p>
            </div>
            <OneTapUploadAnim />
          </div>
          <div className="wf-card" style={{ gridColumn: 'span 2', background: WF.ink, color: 'white', border: 'none', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <Chip tone="accent">Always-on</Chip>
              <div className="wf-h3" style={{ marginTop: 12, color: 'white' }}>Smart expiry alerts.</div>
              <p style={{ marginTop: 8, color: 'rgba(255,255,255,.7)', fontSize: 15, lineHeight: 1.5 }}>Get notified 60, 30 and 7 days before a document expires — automatically.</p>
            </div>
            <ExpiryAlertsAnim />
          </div>
          <div className="wf-card">
            <Chip tone="accent">Portable</Chip>
            <div className="wf-h4" style={{ marginTop: 12 }}>Instant transfers</div>
            <p className="wf-body" style={{ marginTop: 8, fontSize: 14 }}>Share your full binder with a new home in seconds.</p>
          </div>
          <div className="wf-card">
            <Chip tone="accent">Sovereign</Chip>
            <div className="wf-h4" style={{ marginTop: 12 }}>You own it</div>
            <p className="wf-body" style={{ marginTop: 8, fontSize: 14 }}>Canadian data residency. Worker-owned records.</p>
          </div>
          <div className="wf-card" style={{ gridColumn: 'span 2', background: WF.accentSoft, border: 'none' }}>
            <Chip tone="accent">Audit-Ready</Chip>
            <div className="wf-h3" style={{ marginTop: 12 }}>Inspection in one click.</div>
            <p className="wf-body" style={{ marginTop: 8 }}>When the regulator knocks, pull a facility-wide compliance report instantly.</p>
          </div>
        </div>
      </div>

      {/* Testimonial / quote */}
      <div className="wf-section" style={{ textAlign: 'center' }}>
        <div style={{ fontSize: 48, color: WF.line, lineHeight: 1 }}></div>
        <p className="wf-display" style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.012em', maxWidth: 820, margin: '8px auto 24px', lineHeight: 1.25 }}>
          Credz cuts onboarding timelines from days to to minutes.  Stop chasing paperwork and start providing care.
        </p>
        <div className="wf-small"></div>
      </div>

      {/* Two starting lines CTA */}
      <div className="wf-section">
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <Eyebrow>Built for everyone in the chain</Eyebrow>
          <h2 className="wf-h2" style={{ marginTop: 12, maxWidth: 720, margin: '12px auto 0' }}>
            One platform. Two starting lines.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <div className="wf-card fill" style={{ padding: 40 }}>
            <Eyebrow>For care workers</Eyebrow>
            <h3 className="wf-h3" style={{ marginTop: 10, marginBottom: 10 }}>Your career. Your control.</h3>
            <p className="wf-body" style={{ marginBottom: 24, maxWidth: 340 }}>Free, forever. Download the app and build your Credz wallet in under 5 minutes.</p>
            <div style={{ display: 'flex', gap: 10 }}>
              <Btn variant="primary">Sign up free</Btn>
              <Btn variant="ghost">Download app →</Btn>
            </div>
          </div>
          <div className="wf-card" style={{ padding: 40, background: WF.accent, color: 'white', border: 'none' }}>
            <Eyebrow color="rgba(255,255,255,.7)">For facilities &amp; agencies</Eyebrow>
            <h3 className="wf-h3" style={{ marginTop: 10, marginBottom: 10, color: 'white' }}>Every shift, audit-ready.</h3>
            <p style={{ marginBottom: 24, maxWidth: 340, color: 'rgba(255,255,255,.85)', fontSize: 15, lineHeight: 1.55 }}>14-day trial, no credit card. See your whole workforce in one dashboard.</p>
            <div style={{ display: 'flex', gap: 10 }}>
              <Btn style={{ background: 'white', color: WF.accent, borderColor: 'white' }}>Book a demo</Btn>
              <Btn style={{ background: 'transparent', color: 'white', borderColor: 'rgba(255,255,255,.4)' }}>Sign up →</Btn>
            </div>
          </div>
        </div>
      </div>

      {/* Big CTA */}
      <div className="wf-section" style={{ background: WF.ink, color: 'white', textAlign: 'center' }}>
        <h2 className="wf-h2" style={{ color: 'white', marginBottom: 14 }}>Ready for the faster path?</h2>
        <p style={{ color: 'rgba(255,255,255,.7)', maxWidth: 520, margin: '0 auto 28px', fontSize: 18, lineHeight: 1.5 }}>
          Join the war against binders and spreadsheets.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12 }}>
          <Btn variant="accent" size="lg">Get started free</Btn>
          <Btn size="lg" style={{ background: 'transparent', color: 'white', borderColor: 'rgba(255,255,255,.3)' }}>Book a demo</Btn>
        </div>
      </div>

      <Footer />
    </div>);

}

// ──── Direction B: Problem-first, editorial narrative ────
// ──── AudienceTabsSection: extracted from old LandingC ────
function AudienceTabsSection() {
  const [tab, setTab] = React.useState('workers');
  const tabs = {
    workers: {
      eyebrow: 'For Care Workers',
      h: 'Your credentials. Always in your pocket.',
      sub: 'One app for every license, test, and certificate. Share with any home in a tap.',
      cta: ['Download the app', 'How it works →'],
      bullets: [
      ['Apple Wallet-style binder', 'All docs, one swipe away'],
      ['Expiry alerts, 60/30/7 days out', 'Never miss a renewal'],
      ['One-tap sharing', 'Any facility, any time'],
      ['You own your data', 'Take it with you, forever']],

      mock: 'phone — wallet view'
    },
    facilities: {
      eyebrow: 'For Facilities',
      h: 'Every shift. Audit-ready.',
      sub: 'Real-time compliance across your whole workforce. Stop chasing expired TB tests.',
      cta: ['Secure my facility', 'Book a demo →'],
      bullets: [
      ['Live compliance dashboard', 'Every worker, one screen'],
      ['Automated inspections', 'Pull a regulator-ready report in one click'],
      ['Frictionless onboarding', 'New hires verified in 48 hours'],
      ['Canadian data residency', 'PIPEDA &amp; PHIPA aligned']],

      mock: 'dashboard — compliance grid'
    },
    agencies: {
      eyebrow: 'For Agencies',
      h: 'Place staff anywhere. Instantly.',
      sub: 'Your bench becomes portable. Verify once, deploy everywhere.',
      cta: ['For agencies', 'Talk to sales →'],
      bullets: [
      ['Shared talent pool', 'Move staff between homes in minutes'],
      ['Inter-facility sync', 'Credentials flow with the worker'],
      ['Bulk verification', 'Onboard 50+ at a time'],
      ['White-labeled worker app', 'Your brand on their wallet']],

      mock: 'pipeline — agency view'
    }
  };
  const t = tabs[tab];
  return (
    <div className="wf-section">
      <div style={{ textAlign: 'center', marginBottom: 32 }}>
        <Eyebrow>Built for everyone in the chain</Eyebrow>
        <h2 className="wf-h2" style={{ marginTop: 12, maxWidth: 720, margin: '12px auto 0' }}>
          One platform. Three perspectives.
        </h2>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
        <div style={{ display: 'inline-flex', padding: 4, background: WF.fill, borderRadius: 999, border: `1px solid ${WF.line2}` }}>
          {[['workers', 'Care Workers'], ['facilities', 'Facilities'], ['agencies', 'Agencies']].map(([k, l]) =>
          <button key={k} onClick={() => setTab(k)} style={{
            padding: '10px 24px', borderRadius: 999, border: 'none',
            background: tab === k ? WF.paper : 'transparent',
            color: tab === k ? WF.ink : WF.ink2,
            fontSize: 14, fontWeight: 500, cursor: 'pointer',
            boxShadow: tab === k ? '0 1px 3px rgba(0,0,0,.08)' : 'none',
            transition: 'all .15s'
          }}>{l}</button>
          )}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <h2 className="wf-h2" style={{ marginTop: 14, marginBottom: 18 }}>{t.h}</h2>
          <p className="wf-sub" style={{ marginBottom: 32, maxWidth: 460 }}>{t.sub}</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 32 }}>
            {t.bullets.map(([b, d]) =>
            <div key={b} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 20, height: 20, borderRadius: 10, background: WF.accentSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', color: WF.accent, fontSize: 11, fontWeight: 700, marginTop: 2 }}>✓</div>
                <div>
                  <div style={{ fontWeight: 500, fontSize: 15 }}>{b}</div>
                  <div className="wf-small" style={{ marginTop: 2 }} dangerouslySetInnerHTML={{ __html: d }} />
                </div>
              </div>
            )}
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <Btn variant="accent">{t.cta[0]}</Btn>
            <Btn variant="ghost">{t.cta[1]}</Btn>
          </div>
        </div>
        <AudienceMock tab={tab} />
      </div>
    </div>);

}

// ──── AudienceMock: 3 distinct visual mocks for the audience tabs
function AudienceMock({ tab }) {
  if (tab === 'workers') return <AudienceMockWorker />;
  if (tab === 'facilities') return <AudienceMockFacility />;
  return <AudienceMockAgency />;
}

function AudienceMockWorker() {
  return (
    <div style={{
      height: 440, background: 'linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%)',
      borderRadius: 36, padding: 20, display: 'flex', flexDirection: 'column',
      boxShadow: '0 30px 80px rgba(0,0,0,.18), inset 0 0 0 8px rgba(255,255,255,.04)',
      position: 'relative', overflow: 'hidden'
    }}>
      {/* phone notch */}
      <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 110, height: 26, background: '#000', borderRadius: 14 }} />
      <div style={{ color: 'rgba(255,255,255,.5)', fontSize: 11, textAlign: 'right', marginBottom: 18, marginTop: 4 }}>9:41</div>
      <div style={{ color: 'white', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em' }}>Credz Wallet</div>
      <div style={{ color: 'rgba(255,255,255,.55)', fontSize: 12, marginBottom: 20 }}>Avery Mitchell · RN</div>

      {/* compliance ring */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 14, background: 'rgba(48,209,88,.14)', border: '1px solid rgba(48,209,88,.3)', borderRadius: 14, marginBottom: 20 }}>
        <div style={{ position: 'relative', width: 52, height: 52 }}>
          <svg viewBox="0 0 52 52" style={{ width: 52, height: 52, transform: 'rotate(-90deg)' }}>
            <circle cx="26" cy="26" r="22" fill="none" stroke="rgba(255,255,255,.1)" strokeWidth="4" />
            <circle cx="26" cy="26" r="22" fill="none" stroke="#30d158" strokeWidth="4" strokeDasharray={`${2 * Math.PI * 22}`} strokeDashoffset="0" strokeLinecap="round">
              <animate attributeName="stroke-dashoffset" from={`${2 * Math.PI * 22}`} to="0" dur="1.2s" fill="freeze" />
            </circle>
          </svg>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#30d158', fontWeight: 700, fontSize: 12 }}>100%</div>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ color: 'white', fontSize: 13, fontWeight: 600 }}>Fully compliant</div>
          <div style={{ color: 'rgba(255,255,255,.55)', fontSize: 11 }}>18 of 18 documents verified</div>
        </div>
      </div>

      {/* doc cards stack */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
        {[
        ['RN License', 'CNO · #A12 453', '#30d158', '✓'],
        ['CPR Certification', 'Canadian Red Cross', '#30d158', '✓'],
        ['TB Skin Test', 'Updated Mar 2026', '#ffd60a', '60d'],
        ['Vulnerable Sector Check', 'OPP · Jul 2025', '#30d158', '✓']].
        map(([t, sub, color, badge], i) =>
        <div key={t} style={{
          display: 'flex', alignItems: 'center', gap: 10, padding: 10,
          background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.08)', borderRadius: 10,
          animation: 'fadeIn .4s ease-out both', animationDelay: `${0.2 + i * 0.1}s`
        }}>
            <div style={{ width: 28, height: 36, background: 'rgba(255,255,255,.1)', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13 }}>📄</div>
            <div style={{ flex: 1 }}>
              <div style={{ color: 'white', fontSize: 12, fontWeight: 500 }}>{t}</div>
              <div style={{ color: 'rgba(255,255,255,.5)', fontSize: 10 }}>{sub}</div>
            </div>
            <div style={{
            padding: '3px 8px', borderRadius: 999, background: `${color}22`,
            color, fontSize: 10, fontWeight: 700, letterSpacing: '.04em'
          }}>{badge}</div>
          </div>
        )}
      </div>

      {/* share button */}
      <button style={{
        marginTop: 14, padding: '12px', border: 'none', borderRadius: 14,
        background: '#0a84ff', color: 'white', fontSize: 14, fontWeight: 600, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8
      }}>
        <span style={{ fontSize: 14 }}>⇪</span> Share with a home
      </button>
    </div>);

}

function AudienceMockFacility() {
  const WFref = typeof WF !== 'undefined' ? WF : { paper: '#fff', line: '#e5e5e7', ink: '#1d1d1f', ink2: '#6e6e73', accent: '#0a84ff', accentSoft: '#e6f0ff', fill: '#f5f5f7' };
  const rows = [
  ['Avery M.', 'RN', 100, 'ok', 18, 18],
  ['Priya S.', 'PSW', 100, 'ok', 12, 12],
  ['Marcus T.', 'LPN', 94, 'warn', 17, 18],
  ['Jamal B.', 'RN', 100, 'ok', 18, 18],
  ['Chen L.', 'PSW', 82, 'bad', 10, 12],
  ['Rena V.', 'LPN', 100, 'ok', 18, 18]];

  return (
    <div style={{
      height: 440, background: 'white', border: `1px solid ${WFref.line}`, borderRadius: 14,
      boxShadow: '0 30px 80px rgba(0,0,0,.08)', padding: 20, display: 'flex', flexDirection: 'column',
      overflow: 'hidden'
    }}>
      {/* Top bar */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '.08em', color: WFref.ink2, textTransform: 'uppercase', fontWeight: 600 }}>Credz · Compliance Dashboard</div>
          <div style={{ fontSize: 15, fontWeight: 600, color: WFref.ink, marginTop: 2 }}>Maple Grove Retirement</div>
        </div>
        <div style={{ padding: '4px 10px', background: 'rgba(48,209,88,.12)', color: '#1a8754', borderRadius: 999, fontSize: 11, fontWeight: 600 }}>● Live</div>
      </div>

      {/* Stat tiles */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 16 }}>
        {[
        ['142', 'Compliant', '#1a8754', '#e6f4ec'],
        ['12', 'Expiring', '#b5651d', '#fbf1e4'],
        ['3', 'Expired', '#b4232c', '#f6e3e4']].
        map(([n, l, c, bg]) =>
        <div key={l} style={{ background: bg, border: `1px solid ${c}22`, padding: 12, borderRadius: 10 }}>
            <div style={{ fontSize: 22, fontWeight: 700, color: c, letterSpacing: '-0.01em' }}>{n}</div>
            <div style={{ fontSize: 11, color: c, marginTop: 2, fontWeight: 500 }}>{l}</div>
          </div>
        )}
      </div>

      {/* Chart */}
      <div style={{ background: WFref.fill, borderRadius: 10, padding: '10px 12px', marginBottom: 12, position: 'relative', height: 72 }}>
        <div style={{ fontSize: 10, color: WFref.ink2, fontWeight: 600, letterSpacing: '.04em', textTransform: 'uppercase' }}>30-day compliance</div>
        <svg viewBox="0 0 240 42" style={{ width: '100%', height: 42, marginTop: 4 }} preserveAspectRatio="none">
          <defs>
            <linearGradient id="wfchart" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="#30d158" stopOpacity=".35" />
              <stop offset="100%" stopColor="#30d158" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d="M0,32 L20,28 L40,30 L60,22 L80,24 L100,18 L120,20 L140,14 L160,16 L180,10 L200,12 L220,6 L240,4 L240,42 L0,42 Z" fill="url(#wfchart)" />
          <path d="M0,32 L20,28 L40,30 L60,22 L80,24 L100,18 L120,20 L140,14 L160,16 L180,10 L200,12 L220,6 L240,4" fill="none" stroke="#30d158" strokeWidth="1.5" />
        </svg>
      </div>

      {/* Worker rows */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1, overflow: 'hidden' }}>
        {rows.map(([name, role, pct, status, done, total], i) => {
          const c = status === 'ok' ? '#30d158' : status === 'warn' ? '#ffd60a' : '#ff6b6b';
          return (
            <div key={name} style={{
              display: 'grid', gridTemplateColumns: '28px 1fr 60px 80px 40px', gap: 10, alignItems: 'center',
              padding: '6px 8px', borderRadius: 6,
              background: i % 2 === 0 ? WFref.fill : 'transparent',
              animation: 'fadeIn .4s ease-out both', animationDelay: `${0.3 + i * 0.08}s`
            }}>
              <div style={{ width: 22, height: 22, borderRadius: '50%', background: WFref.accentSoft, color: WFref.accent, fontSize: 9, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {name.split(' ').map((x) => x[0]).join('')}
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 500, color: WFref.ink }}>{name}</div>
                <div style={{ fontSize: 9, color: WFref.ink2 }}>{role}</div>
              </div>
              <div style={{ height: 4, background: WFref.line, borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: `${pct}%`, height: '100%', background: c, animation: 'wfBarFill 1s ease-out both', animationDelay: `${0.4 + i * 0.08}s` }} />
              </div>
              <div style={{ fontSize: 10, color: WFref.ink2, textAlign: 'right' }}>{done}/{total} docs</div>
              <div style={{ fontSize: 10, fontWeight: 700, color: c, textAlign: 'right' }}>{pct}%</div>
            </div>);

        })}
      </div>
    </div>);

}

function AudienceMockAgency() {
  const WFref = typeof WF !== 'undefined' ? WF : { paper: '#fff', line: '#e5e5e7', ink: '#1d1d1f', ink2: '#6e6e73', accent: '#0a84ff', accentSoft: '#e6f0ff', fill: '#f5f5f7', fill2: '#fafaf7' };
  const workers = [
  { name: 'Avery M.', role: 'RN', status: 'deployed', place: 'Maple Grove' },
  { name: 'Priya S.', role: 'PSW', status: 'available' },
  { name: 'Marcus T.', role: 'LPN', status: 'deployed', place: 'Rosewood Hall' },
  { name: 'Jamal B.', role: 'RN', status: 'available' },
  { name: 'Chen L.', role: 'PSW', status: 'deployed', place: 'Cedar Park' },
  { name: 'Rena V.', role: 'LPN', status: 'available' }];

  return (
    <div style={{
      height: 440, background: 'white', border: `1px solid ${WFref.line}`, borderRadius: 14,
      boxShadow: '0 30px 80px rgba(0,0,0,.08)', padding: 20,
      display: 'flex', flexDirection: 'column', overflow: 'hidden'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '.08em', color: WFref.ink2, textTransform: 'uppercase', fontWeight: 600 }}>Credz · Agency View</div>
          <div style={{ fontSize: 15, fontWeight: 600, color: WFref.ink, marginTop: 2 }}>NorthStar Staffing</div>
        </div>
        <button style={{ padding: '6px 12px', borderRadius: 8, border: `1px solid ${WFref.line}`, background: 'white', fontSize: 11, fontWeight: 500, color: WFref.ink, cursor: 'pointer' }}>
          + Deploy
        </button>
      </div>

      {/* two columns: Available / Deployed */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, flex: 1, overflow: 'hidden' }}>
        {[['Available', 'available', '#0a84ff'], ['Deployed', 'deployed', '#30d158']].map(([label, key, color]) => {
          const list = workers.filter((w) => w.status === key);
          return (
            <div key={key} style={{ background: WFref.fill, borderRadius: 10, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '2px 4px' }}>
                <div style={{ fontSize: 10, letterSpacing: '.08em', color: WFref.ink2, fontWeight: 700, textTransform: 'uppercase' }}>{label}</div>
                <div style={{ fontSize: 10, fontWeight: 700, color }}>{list.length}</div>
              </div>
              {list.map((w, i) =>
              <div key={w.name} style={{
                padding: 10, background: 'white', border: `1px solid ${WFref.line}`, borderRadius: 8,
                animation: 'wfToastIn .4s ease-out both', animationDelay: `${0.2 + i * 0.1}s`,
                display: 'flex', flexDirection: 'column', gap: 4
              }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div style={{ width: 24, height: 24, borderRadius: '50%', background: WFref.accentSoft, color: WFref.accent, fontSize: 9, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      {w.name.split(' ').map((x) => x[0]).join('')}
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 11, fontWeight: 500, color: WFref.ink }}>{w.name}</div>
                      <div style={{ fontSize: 9, color: WFref.ink2 }}>{w.role} · ✓ Credz Verified</div>
                    </div>
                  </div>
                  {w.place ?
                <div style={{ padding: '3px 6px', background: 'rgba(48,209,88,.12)', color: '#1a8754', fontSize: 9, fontWeight: 600, borderRadius: 4, display: 'inline-block', alignSelf: 'flex-start' }}>
                      → {w.place}
                    </div> :

                <div style={{ padding: '3px 6px', background: WFref.accentSoft, color: WFref.accent, fontSize: 9, fontWeight: 600, borderRadius: 4, display: 'inline-block', alignSelf: 'flex-start' }}>
                      Ready to deploy
                    </div>
                }
                </div>
              )}
            </div>);

        })}
      </div>

      {/* bottom bar */}
      <div style={{ marginTop: 12, padding: 10, background: '#1d1d1f', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ fontSize: 14 }}>⇄</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, color: 'white', fontWeight: 500 }}>Credentials sync across homes automatically</div>
          <div style={{ fontSize: 9, color: 'rgba(255,255,255,.55)' }}>Verify once, deploy anywhere — no repeat onboarding.</div>
        </div>
      </div>
    </div>);

}

// ──── ShareFlowDemo: two animated flow tabs ────
function ShareFlowDemo() {
  const [mode, setMode] = React.useState('worker');
  const [step, setStep] = React.useState(0);
  const maxStep = 4;
  React.useEffect(() => {
    const id = setInterval(() => setStep((s) => (s + 1) % (maxStep + 1)), 1800);
    return () => clearInterval(id);
  }, [mode, maxStep]);
  React.useEffect(() => {setStep(0);}, [mode]);

  return (
    <div>
      <div style={{ display: 'inline-flex', padding: 4, background: WF.fill, borderRadius: 999, border: `1px solid ${WF.line2}`, marginBottom: 24 }}>
        {[['worker', 'Worker shares a link'], ['home', 'Home looks up a Credz ID']].map(([k, l]) =>
        <button key={k} onClick={() => setMode(k)} style={{
          padding: '9px 20px', borderRadius: 999, border: 'none',
          background: mode === k ? WF.paper : 'transparent',
          color: mode === k ? WF.ink : WF.ink2, fontSize: 13, fontWeight: 500, cursor: 'pointer',
          boxShadow: mode === k ? '0 1px 3px rgba(0,0,0,.08)' : 'none'
        }}>{l}</button>
        )}
      </div>

      {mode === 'worker' ? <WorkerShareFlow step={step} /> : <HomeLookupFlow step={step} />}

      <div className="wf-note" style={{ marginTop: 16 }}>auto-advances every 1.8s · built as a scripted scroll animation in the real site</div>
    </div>);

}

function WorkerShareFlow({ step }) {
  // step 0: worker taps share → shows QR + link
  // step 1: home receives prompt
  // step 2: home taps "Link My Credz Wallet with Home" (spinner)
  // step 3: worker sees Success confirmation on phone
  // step 4: linked — home wallet view
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 1fr', gap: 24, alignItems: 'center' }}>
      {/* WORKER phone */}
      <div className="wf-card" style={{ padding: 24, background: WF.fill2 }}>
        <div className="wf-small" style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 4, background: WF.accent }} />
          Julian · Credz app
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div className="wf-phone">
            <div className="screen">
              {step >= 3 ?
              <div style={{ padding: 16, textAlign: 'center', display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
                  <div style={{ width: 56, height: 56, borderRadius: 28, background: WF.okSoft, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px', color: WF.ok, fontSize: 26, fontWeight: 600 }}>✓</div>
                  <div className="wf-h4" style={{ fontSize: 15, marginBottom: 8 }}>Success.</div>
                  <p className="wf-small" style={{ lineHeight: 1.45, padding: '0 12px' }}>Maple Grove can now see your wallet.</p>
                  <div style={{ marginTop: 16, padding: '8px 12px', background: WF.fill, borderRadius: 8, fontSize: 11, color: WF.ink2, margin: '16px 14px 0' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                      <span>Linked</span><span style={{ fontWeight: 600, color: WF.ink }}>Just now</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span>Shared</span><span style={{ fontWeight: 600, color: WF.ink }}>18 / 18 docs</span>
                    </div>
                  </div>
                </div> :

              <div style={{ padding: 16, textAlign: 'center' }}>
                  <Placeholder label="" w={54} h={54} radius={27} style={{ margin: '8px auto 8px' }} />
                  <div style={{ fontWeight: 600, fontSize: 14 }}>Julian Thorne, RN</div>
                  <div className="wf-small" style={{ marginTop: 2, marginBottom: 14 }}>CREDZ ID · C0122-54276</div>
                  <div style={{
                  width: 132, height: 132, margin: '0 auto 12px',
                  background: `repeating-conic-gradient(${WF.ink} 0 25%, ${WF.paper} 0 50%)`,
                  borderRadius: 12, border: `6px solid ${WF.paper}`, boxShadow: `0 0 0 1px ${WF.line2}`,
                  transition: 'transform .4s', transform: step >= 1 ? 'scale(.96)' : 'scale(1)',
                  opacity: step >= 1 ? 0.5 : 1
                }} />
                  <div className="wf-small" style={{ marginBottom: 10 }}>
                    {step === 0 ? 'Tap to share' : step === 1 ? 'Sending…' : 'Shared with Maple Grove'}
                  </div>
                  <div style={{
                  padding: '8px 12px', borderRadius: 999, background: step >= 1 ? WF.okSoft : WF.accent,
                  color: step >= 1 ? WF.ok : 'white', fontSize: 12, fontWeight: 500,
                  transition: 'all .3s'
                }}>
                    {step === 0 ? 'Share my Credz →' : step === 1 ? '• • •' : '✓ Link sent'}
                  </div>
                </div>
              }
            </div>
          </div>
        </div>
      </div>

      {/* Arrow */}
      <FlowArrow active={step >= 1} />

      {/* HOME prompt */}
      <div className="wf-card" style={{ padding: 24, position: 'relative', minHeight: 380 }}>
        <div className="wf-small" style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 4, background: step >= 1 ? WF.ok : WF.line }} />
          Maple Grove · Admin browser
        </div>
        {step < 1 &&
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 320, color: WF.ink3, fontSize: 13 }}>
            Waiting for a Credz link…
          </div>
        }
        {step === 1 &&
        <div className="wf-card" style={{ padding: 20, background: WF.paper, boxShadow: '0 12px 32px rgba(0,0,0,.08)', animation: 'fadeIn .3s' }}>
            <Chip tone="accent">New Credz invite</Chip>
            <div className="wf-h4" style={{ marginTop: 10, marginBottom: 6 }}>Julian Thorne, RN</div>
            <p className="wf-small" style={{ marginBottom: 14 }}>wants to link their verified Credz wallet with Maple Grove Long-Term Care.</p>
            <div style={{ display: 'flex', gap: 8 }}>
              <div style={{ padding: '10px 14px', background: WF.accent, color: 'white', borderRadius: 999, fontSize: 13, fontWeight: 500 }}>
                Link My Credz Wallet with Home
              </div>
              <div style={{ padding: '10px 14px', background: WF.fill, color: WF.ink2, borderRadius: 999, fontSize: 13 }}>Later</div>
            </div>
          </div>
        }
        {step === 2 &&
        <div className="wf-card" style={{ padding: 20, background: WF.paper, boxShadow: '0 12px 32px rgba(0,0,0,.08)', textAlign: 'center' }}>
            <div style={{ width: 48, height: 48, borderRadius: 24, background: WF.accentSoft, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
              <div style={{
              width: 22, height: 22, borderRadius: 11, border: `2.5px solid ${WF.accent}`,
              borderTopColor: 'transparent', animation: 'spin 1s linear infinite'
            }} />
            </div>
            <div className="wf-h4">Linking wallet…</div>
            <p className="wf-small" style={{ marginTop: 6 }}>Pulling 18 verified documents</p>
          </div>
        }
        {step >= 3 &&
        <div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', padding: 14, background: WF.okSoft, borderRadius: 10, marginBottom: 10 }}>
              <Placeholder label="" w={36} h={36} radius={18} />
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>Julian Thorne</div>
                <div style={{ color: WF.ok, fontSize: 12 }}>✓ 18 / 18 verified · linked</div>
              </div>
              <Chip tone="ok">✓ Credz</Chip>
            </div>
            {['RN License', 'CPR Level C', 'TB Skin Test', 'WHMIS', 'Police Check'].map((d) =>
          <div key={d} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 12px', background: WF.fill2, borderRadius: 6, fontSize: 12, marginBottom: 4, border: `1px solid ${WF.line2}` }}>
                <span>{d}</span><span style={{ color: WF.ok }}>✓</span>
              </div>
          )}
          </div>
        }
      </div>
    </div>);

}

function HomeLookupFlow({ step }) {
  // step 0: empty search
  // step 1: typing credz id
  // step 2: result shown with "Request access" button (active)
  //         Julian's phone shows verification popup "Approve & link / Decline"
  // step 3: Julian taps Approve → admin sees "✓ Approved · linking wallet"
  //         Julian's phone shows success confirmation
  // step 4: admin sees full linked wallet view with all verified docs
  const id = 'C0122-54276';
  const typed = step === 0 ? '' : step === 1 ? id.slice(0, 5) : id;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 1fr', gap: 24, alignItems: 'center' }}>
      <div className="wf-card" style={{ padding: 24, minHeight: 380 }}>
        <div className="wf-small" style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 4, background: WF.accent }} />
          Maple Grove · Credz admin
        </div>
        {step < 4 &&
        <div style={{ border: `1px solid ${step >= 1 ? WF.accent : WF.line}`, borderRadius: 10, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, background: WF.paper, transition: 'all .2s' }}>
            <span style={{ color: WF.ink3, fontSize: 14 }}>🔍</span>
            <span style={{ fontFamily: WF.mono, fontSize: 13, color: WF.ink }}>{typed || 'Search by Credz ID…'}</span>
            {step === 1 && <span style={{ display: 'inline-block', width: 1.5, height: 14, background: WF.accent, animation: 'blink 1s step-end infinite' }} />}
          </div>
        }
        {step >= 2 && step < 4 &&
        <div className="wf-card" style={{ padding: 14, background: WF.fill2, display: 'flex', gap: 12, alignItems: 'center' }}>
            <Placeholder label="" w={40} h={40} radius={20} />
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 14 }}>Julian Thorne, RN</div>
              <div className="wf-small">Credz ID · {id} · Ontario</div>
            </div>
            <Chip tone="ok">✓ 18/18</Chip>
          </div>
        }
        {step === 2 &&
        <div style={{ marginTop: 12, padding: '12px 16px', background: WF.accent, color: 'white', borderRadius: 999, fontSize: 13, fontWeight: 500, textAlign: 'center' }}>
            Request access &amp; add to home →
          </div>
        }
        {step === 3 &&
        <div style={{ marginTop: 12, padding: '12px 16px', background: WF.okSoft, color: WF.ok, borderRadius: 10, fontSize: 13, fontWeight: 500, textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
            <div style={{ width: 14, height: 14, borderRadius: 7, border: `2px solid ${WF.ok}`, borderTopColor: 'transparent', animation: 'spin 1s linear infinite' }} />
            Approved · linking wallet…
          </div>
        }
        {step === 4 &&
        <div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', padding: 14, background: WF.okSoft, borderRadius: 10, marginBottom: 10 }}>
              <Placeholder label="" w={36} h={36} radius={18} />
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>Julian Thorne</div>
                <div style={{ color: WF.ok, fontSize: 12 }}>✓ 18 / 18 verified · linked</div>
              </div>
              <Chip tone="ok">✓ Credz</Chip>
            </div>
            {['RN License', 'CPR Level C', 'TB Skin Test', 'WHMIS', 'Police Check'].map((d) =>
          <div key={d} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 12px', background: WF.fill2, borderRadius: 6, fontSize: 12, marginBottom: 4, border: `1px solid ${WF.line2}` }}>
                <span>{d}</span><span style={{ color: WF.ok }}>✓</span>
              </div>
          )}
          </div>
        }
        <div className="wf-note" style={{ marginTop: 16, color: WF.ink3 }}>
          No scanning. No uploading. No attaching. Just look up and click.
        </div>
      </div>

      <FlowArrow active={step >= 2} />

      <div className="wf-card" style={{ padding: 24, background: WF.fill2, minHeight: 380 }}>
        <div className="wf-small" style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 4, background: step >= 2 ? WF.accent : WF.line }} />
          Julian · Credz app
        </div>
        {step < 2 &&
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 320, color: WF.ink3, fontSize: 13 }}>
            Wallet idle…
          </div>
        }
        {step >= 2 &&
        <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div className="wf-phone">
              <div className="screen">
                <div style={{ padding: 16 }}>
                  {step === 2 &&
                <div>
                      <Chip tone="accent">Verification required</Chip>
                      <div style={{ fontWeight: 600, fontSize: 15, marginTop: 12, marginBottom: 4 }}>Maple Grove LTC</div>
                      <div className="wf-small" style={{ marginBottom: 12, lineHeight: 1.5 }}>
                        is requesting to link with your wallet. Do you accept to share your wallet with the home?
                      </div>
                      <div style={{ padding: '8px 10px', background: WF.fill, borderRadius: 8, fontSize: 11, color: WF.ink2, marginBottom: 14 }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                          <span>Home</span><span style={{ fontWeight: 600, color: WF.ink }}>Maple Grove LTC</span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                          <span>Will see</span><span style={{ fontWeight: 600, color: WF.ink }}>18 / 18 docs</span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                          <span>Duration</span><span style={{ fontWeight: 600, color: WF.ink }}>Until you unlink</span>
                        </div>
                      </div>
                      <div style={{ padding: '10px 14px', background: WF.accent, color: 'white', borderRadius: 999, fontSize: 12, fontWeight: 500, textAlign: 'center', marginBottom: 8 }}>
                        Yes, share my wallet
                      </div>
                      <div style={{ padding: '10px 14px', background: WF.fill, color: WF.ink2, borderRadius: 999, fontSize: 12, textAlign: 'center' }}>
                        Decline
                      </div>
                    </div>
                }
                  {step >= 3 &&
                <div style={{ textAlign: 'center', paddingTop: 20 }}>
                      <div style={{ width: 56, height: 56, borderRadius: 28, background: WF.okSoft, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12, color: WF.ok, fontSize: 26, fontWeight: 600 }}>✓</div>
                      <div style={{ fontWeight: 600, fontSize: 14 }}>Linked with Maple Grove</div>
                      <div className="wf-small" style={{ marginTop: 4, padding: '0 8px', lineHeight: 1.45 }}>Your wallet is now visible to the home.</div>
                    </div>
                }
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    </div>);

}

function FlowArrow({ active }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <svg width="60" height="20" viewBox="0 0 60 20">
        <line x1="0" y1="10" x2="48" y2="10" stroke={active ? WF.accent : WF.line} strokeWidth="2" strokeDasharray="4 3" />
        <polyline points="44,4 54,10 44,16" fill="none" stroke={active ? WF.accent : WF.line} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>);

}

// keyframes injection
if (typeof document !== 'undefined' && !document.getElementById('wf-share-kf')) {
  const s = document.createElement('style');
  s.id = 'wf-share-kf';
  s.textContent = `
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes blink{50%{opacity:0}}
    @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
    @keyframes wfFlash{0%,100%{background:rgba(255,255,255,0)}40%{background:rgba(255,255,255,.9)}}
    @keyframes wfUploadScan{0%{transform:translateY(-100%)}70%{transform:translateY(100%)}100%{transform:translateY(100%)}}
    @keyframes wfUploadSlide{0%,20%{transform:translateY(40px);opacity:0}45%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:1}}
    @keyframes wfCheckPop{0%,55%{transform:scale(0);opacity:0}70%{transform:scale(1.3);opacity:1}80%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}
    @keyframes wfToastIn{0%{transform:translateX(16px);opacity:0}100%{transform:translateX(0);opacity:1}}
    @keyframes wfPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.3}}
    @keyframes wfBarFill{from{width:0}}
  `;
  document.head.appendChild(s);
}

// ──── One-tap upload animation
function OneTapUploadAnim() {
  return (
    <div style={{
      position: 'relative',
      height: 120,
      borderRadius: 12,
      background: 'linear-gradient(180deg, #1d1d1f 0%, #2a2a2d 100%)',
      overflow: 'hidden',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      {/* camera viewfinder reticle */}
      <div style={{
        position: 'absolute', inset: 10, border: '1px dashed rgba(255,255,255,.18)', borderRadius: 10
      }} />
      {/* corner marks */}
      {[{ t: 10, l: 10, b: 'r' }, { t: 10, r: 10, b: 'l' }, { b: 10, l: 10, b2: 'r' }, { b: 10, r: 10, b2: 'l' }].map((c, i) =>
      <div key={i} style={{
        position: 'absolute',
        top: c.t, left: c.l, right: c.r, bottom: c.b,
        width: 12, height: 12,
        borderTop: c.t != null ? '2px solid #fff' : 'none',
        borderBottom: c.b != null ? '2px solid #fff' : 'none',
        borderLeft: c.l != null ? '2px solid #fff' : 'none',
        borderRight: c.r != null ? '2px solid #fff' : 'none',
        opacity: .75
      }} />
      )}
      {/* scan line */}
      <div style={{
        position: 'absolute', left: 10, right: 10, height: 2,
        background: 'linear-gradient(90deg, transparent, #8ab4f8 40%, #8ab4f8 60%, transparent)',
        boxShadow: '0 0 10px #8ab4f8',
        animation: 'wfUploadScan 3.2s ease-in-out infinite'
      }} />
      {/* flash */}
      <div style={{
        position: 'absolute', inset: 0,
        animation: 'wfFlash 3.2s ease-in-out infinite',
        animationDelay: '1.6s'
      }} />
      {/* uploaded doc card sliding up */}
      <div style={{
        position: 'absolute', bottom: 12, left: 14,
        width: 72, height: 90, background: 'white', borderRadius: 6, padding: 8,
        display: 'flex', flexDirection: 'column', gap: 3,
        boxShadow: '0 8px 20px rgba(0,0,0,.4)',
        animation: 'wfUploadSlide 3.2s ease-out infinite',
        animationDelay: '1.8s'
      }}>
        <div style={{ fontSize: 6, fontWeight: 700, color: '#1d1d1f' }}>RN LICENSE</div>
        <div style={{ height: 2, background: '#e5e5e7', borderRadius: 1 }} />
        <div style={{ height: 2, width: '70%', background: '#e5e5e7', borderRadius: 1 }} />
        <div style={{ height: 2, width: '85%', background: '#e5e5e7', borderRadius: 1 }} />
        <div style={{ height: 2, width: '60%', background: '#e5e5e7', borderRadius: 1 }} />
        <div style={{ marginTop: 'auto', height: 12, background: '#f0eee9', borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 6, color: '#888' }}>CNO ✓</div>
      </div>
      {/* verified badge */}
      <div style={{
        position: 'absolute', bottom: 36, left: 62,
        width: 26, height: 26, borderRadius: '50%',
        background: '#30d158',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'white', fontSize: 14, fontWeight: 700,
        boxShadow: '0 4px 12px rgba(48,209,88,.5)',
        animation: 'wfCheckPop 3.2s ease-out infinite',
        animationDelay: '1.8s'
      }}>✓</div>
      {/* verified text */}
      <div style={{
        position: 'absolute', bottom: 18, right: 16,
        fontSize: 10, fontWeight: 600, color: '#30d158',
        letterSpacing: '.04em',
        animation: 'fadeIn .4s ease-out infinite alternate',
        animationDelay: '2.2s'
      }}>VERIFIED · CNO</div>
    </div>);

}

// ──── Smart expiry alerts animation
function ExpiryAlertsAnim() {
  const alerts = [
  { days: '60 Days left', tone: '#30d158', label: 'CPR expires in 60 days', bg: 'rgba(48,209,88,.14)' },
  { days: '30 Days left', tone: '#ffd60a', label: 'TB Skin Test · 30 days left', bg: 'rgba(255,214,10,.14)' },
  { days: '7 Days left', tone: '#ff6b6b', label: 'Police Check Yearly Declaration due in 7 days', bg: 'rgba(255,107,107,.16)' }];

  return (
    <div style={{
      position: 'relative', height: 96, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 6
    }}>
      {alerts.map((a, i) =>
      <div key={i} style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '6px 10px',
        background: a.bg,
        border: `1px solid ${a.tone}33`,
        borderRadius: 8,
        animation: 'wfToastIn .5s ease-out both',
        animationDelay: `${i * 0.25}s`
      }}>
          <div style={{ position: 'relative', width: 8, height: 8 }}>
            <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: a.tone }} />
            <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: a.tone,
            animation: `wfPulse 1.8s ease-in-out infinite`, animationDelay: `${i * 0.3}s` }} />
          </div>
          <div style={{ fontSize: 11, color: 'white', fontWeight: 500, flex: 1 }}>{a.label}</div>
          <div style={{ fontSize: 9, color: a.tone, fontWeight: 700, letterSpacing: '.05em' }}>{a.days}</div>
        </div>
      )}
    </div>);

}

function HeroWalletPhone() {
  // Auto-cycling animation: fills compliance bar, pops chips one by one,
  // pulses the share button, then loops.
  const [step, setStep] = React.useState(0);
  // steps: 0 idle, 1 RN appears, 2 CPR appears, 3 TB appears, 4 bar fills to 90%, 5 share pulses
  const maxStep = 5;
  React.useEffect(() => {
    const id = setInterval(() => {
      setStep((s) => (s + 1) % (maxStep + 1));
    }, 1200);
    return () => clearInterval(id);
  }, []);

  const pct = step >= 4 ? 90 : step >= 3 ? 60 : step >= 2 ? 30 : step >= 1 ? 10 : 0;
  const showRN = step >= 1;
  const showCPR = step >= 2;
  const showTB = step >= 3;
  const sharePulse = step >= 5;

  const cardBase = {
    padding: 12, borderRadius: 12, background: WF.fill, marginBottom: 8,
    transition: 'opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1)'
  };
  const hidden = { opacity: 0, transform: 'translateY(8px)' };
  const visible = { opacity: 1, transform: 'translateY(0)' };

  return (
    <div className="wf-phone">
      <div className="screen">
        <div style={{ padding: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <div className="wf-display" style={{ fontSize: 14 }}>Credz Wallet</div>
            <Ico size={22} />
          </div>
          <div style={{ padding: 12, borderRadius: 12, background: WF.okSoft, marginBottom: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <div style={{ fontSize: 11, color: WF.ok, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.04em' }}>Compliance</div>
              <div className="wf-display" style={{ fontSize: 22, color: WF.ok, fontWeight: 600, lineHeight: 1, transition: 'all .4s' }}>{pct}%</div>
            </div>
            <div style={{ height: 4, background: 'rgba(26,135,84,.2)', borderRadius: 2, overflow: 'hidden' }}>
              <div style={{ width: pct + '%', height: 4, background: WF.ok, borderRadius: 2, transition: 'width .8s cubic-bezier(.2,.7,.2,1)' }} />
            </div>
          </div>
          <div style={{ ...cardBase, ...(showRN ? visible : hidden) }}>
            <div className="wf-small" style={{ marginBottom: 3 }}>RN License</div>
            <div style={{ fontWeight: 600, fontSize: 12 }}>Valid · 2027-03</div>
            <div style={{ marginTop: 6 }}><Chip tone="ok">✓ Verified</Chip></div>
          </div>
          <div style={{ ...cardBase, ...(showCPR ? visible : hidden), transitionDelay: '.05s' }}>
            <div className="wf-small" style={{ marginBottom: 3 }}>CPR Level C</div>
            <div style={{ fontWeight: 600, fontSize: 12 }}>Expires in 42 days</div>
            <div style={{ marginTop: 6 }}><Chip tone="warn">⚠ Renew soon</Chip></div>
          </div>
          <div style={{ ...cardBase, ...(showTB ? visible : hidden), marginBottom: 14, transitionDelay: '.1s' }}>
            <div className="wf-small" style={{ marginBottom: 3 }}>TB Skin Test</div>
            <div style={{ fontWeight: 600, fontSize: 12 }}>Valid · 2026-11</div>
            <div style={{ marginTop: 6 }}><Chip tone="ok">✓ Verified</Chip></div>
          </div>
          <div style={{
            padding: '11px 14px', background: WF.accent, color: 'white', borderRadius: 999,
            fontSize: 13, fontWeight: 500, textAlign: 'center',
            display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 6,
            transition: 'transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s',
            transform: sharePulse ? 'scale(1.04)' : 'scale(1)',
            boxShadow: sharePulse ? '0 0 0 8px rgba(0,102,204,.18)' : '0 0 0 0 rgba(0,102,204,0)'
          }}>
            <span style={{ fontSize: 14 }}>⇪</span> Share with Home
          </div>
        </div>
      </div>
    </div>);

}

// =================================================================
// ROI Calculator — sits below the stats bar on the landing page.
// Sliders for facility profile -> hours/$ saved per month or year.
// =================================================================
function ROISlider({ label, value, setValue, min, max, step = 1, format }) {
  const pct = (value - min) / (max - min) * 100;
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
        <span style={{ fontSize: 13, color: WF.ink2, fontWeight: 500 }}>{label}</span>
        <span className="wf-display" style={{ fontSize: 22, fontWeight: 600, color: WF.ink, letterSpacing: '-0.02em' }}>
          {format ? format(value) : value.toLocaleString()}
        </span>
      </div>
      <div style={{ position: 'relative', height: 28, display: 'flex', alignItems: 'center' }}>
        <div style={{ position: 'absolute', left: 0, right: 0, height: 4, borderRadius: 2, background: WF.line2 }} />
        <div style={{ position: 'absolute', left: 0, width: `${pct}%`, height: 4, borderRadius: 2, background: WF.accent }} />
        <input
          type="range"
          min={min} max={max} step={step}
          value={value}
          onChange={(e) => setValue(Number(e.target.value))}
          style={{
            position: 'absolute', left: 0, right: 0, width: '100%',
            appearance: 'none', WebkitAppearance: 'none',
            background: 'transparent', height: 28, margin: 0, cursor: 'pointer'
          }}
          className="wf-roi-range" />
      </div>
    </div>);

}

function ROICalculator() {
  // Independent state per scope so labels and values don't bleed across.
  const [scope, setScope] = React.useState('facility');
  const [period, setPeriod] = React.useState('yearly');

  // Single-facility values
  const [fEmployees, setFEmployees] = React.useState(120);
  const [fComplianceHrs, setFComplianceHrs] = React.useState(12);
  const [fOnboardHrs, setFOnboardHrs] = React.useState(8);
  const [fHourlyRate, setFHourlyRate] = React.useState(45);
  const [fNewHires, setFNewHires] = React.useState(3);

  // Chain-of-homes values (separate state)
  const [homes, setHomes] = React.useState(5);
  const [cEmployees, setCEmployees] = React.useState(120);
  const [cComplianceHrs, setCComplianceHrs] = React.useState(12);
  const [cOnboardHrs, setCOnboardHrs] = React.useState(8);
  const [cHourlyRate, setCHourlyRate] = React.useState(45);
  const [cNewHires, setCNewHires] = React.useState(3);

  // Pick active scope
  const isChain = scope === 'chain';
  const homeMultiplier = isChain ? homes : 1;
  const employees = isChain ? cEmployees : fEmployees;
  const onboardHrs = isChain ? cOnboardHrs : fOnboardHrs;
  const complianceHrs = isChain ? cComplianceHrs : fComplianceHrs;
  const hourlyRate = isChain ? cHourlyRate : fHourlyRate;
  const newHires = isChain ? cNewHires : fNewHires;

  // Credz reduces onboarding ~70%, compliance work ~80%, per-employee admin ~80%.
  // Each existing employee adds 0.75 hrs/month of admin overhead today.
  // newHires is per-home-per-month, so ×12 for yearly.
  const onboardSaved = newHires * 12 * onboardHrs * 0.7 * homeMultiplier;
  const complianceSavedYearly = complianceHrs * 0.8 * 52 * homeMultiplier;
  const employeeAdminSavedYearly = employees * 0.75 * 12 * 0.8 * homeMultiplier;
  const totalHoursYearly = onboardSaved + complianceSavedYearly + employeeAdminSavedYearly;
  const dollarsYearly = totalHoursYearly * hourlyRate;

  const isYearly = period === 'yearly';
  const periodDiv = isYearly ? 1 : 12;
  const fmtHours = (h) => `${Math.round(h / periodDiv).toLocaleString()} hrs`;
  const fmtMoney = (d) => `$${Math.round(d / periodDiv).toLocaleString()}`;

  return (
    <div style={{ background: 'white', border: `1px solid ${WF.line2}`, borderRadius: 24, overflow: 'hidden', boxShadow: '0 24px 60px rgba(0,0,0,.04)' }}>
      <style>{`
        .wf-roi-range::-webkit-slider-thumb {
          -webkit-appearance: none; appearance: none;
          width: 22px; height: 22px; border-radius: 50%;
          background: white; border: 2px solid ${WF.accent};
          box-shadow: 0 2px 8px rgba(0,0,0,.15);
          cursor: pointer;
        }
        .wf-roi-range::-moz-range-thumb {
          width: 22px; height: 22px; border-radius: 50%;
          background: white; border: 2px solid ${WF.accent};
          box-shadow: 0 2px 8px rgba(0,0,0,.15);
          cursor: pointer;
        }
      `}</style>

      <div style={{ padding: '32px 40px 24px', borderBottom: `1px solid ${WF.line2}`, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
        <div>
          <div style={{ display: 'inline-flex', padding: '4px 12px', background: WF.accentSoft, color: WF.accent, borderRadius: 999, fontSize: 11, fontWeight: 500, marginBottom: 12, letterSpacing: '.02em' }}>
            ROI calculator
          </div>
          <h2 className="wf-h2" style={{ fontSize: 34, lineHeight: 1.15, margin: 0, maxWidth: 540, letterSpacing: '-0.025em' }}>
            See what Credz could save your facility.
          </h2>
          <p className="wf-sub" style={{ marginTop: 10, maxWidth: 480, fontSize: 15 }}>
            Adjust the sliders to match your operation. Numbers update instantly.
          </p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 460 }}>
        {/* Left — sliders */}
        <div style={{ padding: '32px 40px' }}>
          {/* Scope toggle: Facility vs Chain of Homes (replaces "Your facility" label) */}
          <div style={{ marginBottom: 20 }}>
            <div style={{ display: 'inline-flex', padding: 4, background: WF.fill, border: `1px solid ${WF.line2}`, borderRadius: 999, gap: 4 }}>
              {[['facility', 'Single facility'], ['chain', 'Multiple homes']].map(([id, label]) =>
              <button
                key={id}
                onClick={() => setScope(id)}
                style={{
                  padding: '7px 16px', borderRadius: 999, border: 'none',
                  background: scope === id ? 'white' : 'transparent',
                  color: scope === id ? WF.ink : WF.ink2,
                  fontSize: 13, fontWeight: 500, cursor: 'pointer',
                  fontFamily: WF.sans,
                  boxShadow: scope === id ? '0 2px 6px rgba(0,0,0,.06)' : 'none'
                }}>
                  {label}
                </button>
              )}
            </div>
            {scope === 'chain' &&
            <div style={{ marginTop: 16 }}>
                <ROISlider label="Number of homes" value={homes} setValue={setHomes} min={1} max={200} format={(v) => `${v} homes`} />
              </div>
            }
          </div>

          {scope === 'facility' &&
          <React.Fragment>
              <ROISlider label="Number of existing employees" value={fEmployees} setValue={setFEmployees} min={1} max={500} step={1} />
              <ROISlider label="Hours per week spent on compliance (internal & agency)" value={fComplianceHrs} setValue={setFComplianceHrs} min={1} max={60} format={(v) => `${v} hrs`} />
              <ROISlider label="Average number of hours spent on onboarding a single new hire" value={fOnboardHrs} setValue={setFOnboardHrs} min={1} max={45} format={(v) => `${v} hrs`} />
              <ROISlider label="Average hourly rate you pay a home admin" value={fHourlyRate} setValue={setFHourlyRate} min={1} max={60} format={(v) => `$${v}`} />
              <ROISlider label="Average number of new hires in a month" value={fNewHires} setValue={setFNewHires} min={1} max={50} format={(v) => `${v}`} />
            </React.Fragment>
          }

          {scope === 'chain' &&
          <React.Fragment>
              <ROISlider label="Average number of employees per home" value={cEmployees} setValue={setCEmployees} min={1} max={500} step={1} />
              <ROISlider label="Hours per week spent on compliance (internal & agency) per home" value={cComplianceHrs} setValue={setCComplianceHrs} min={1} max={60} format={(v) => `${v} hrs`} />
              <ROISlider label="Average number of hours spent on onboarding a single new hire" value={cOnboardHrs} setValue={setCOnboardHrs} min={1} max={45} format={(v) => `${v} hrs`} />
              <ROISlider label="Hourly rate you pay an individual home admin" value={cHourlyRate} setValue={setCHourlyRate} min={1} max={60} format={(v) => `$${v}`} />
              <ROISlider label="Average number of new hires in a month per home" value={cNewHires} setValue={setCNewHires} min={1} max={50} format={(v) => `${v}`} />
            </React.Fragment>
          }
        </div>

        {/* Right — outputs */}
        <div style={{ padding: '32px 40px', background: WF.fill2, borderLeft: `1px solid ${WF.line2}`, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginBottom: 22 }}>
            <div className="wf-small" style={{ textTransform: 'uppercase', letterSpacing: '.08em', color: WF.ink3, fontWeight: 500 }}>
              With Credz · {isYearly ? 'per year' : 'per month'}
            </div>
            <div style={{ display: 'inline-flex', padding: 4, background: WF.fill, border: `1px solid ${WF.line2}`, borderRadius: 999, gap: 4 }}>
              {[['monthly', 'Monthly'], ['yearly', 'Yearly']].map(([id, label]) =>
              <button
                key={id}
                onClick={() => setPeriod(id)}
                style={{
                  padding: '6px 14px', borderRadius: 999, border: 'none',
                  background: period === id ? 'white' : 'transparent',
                  color: period === id ? WF.ink : WF.ink2,
                  fontSize: 12, fontWeight: 500, cursor: 'pointer',
                  fontFamily: WF.sans,
                  boxShadow: period === id ? '0 2px 6px rgba(0,0,0,.06)' : 'none'
                }}>
                  {label}
                </button>
              )}
            </div>
          </div>

          {/* Headline savings */}
          <div style={{ marginBottom: 28 }}>
            <div className="wf-small" style={{ color: WF.ink2, marginBottom: 8 }}>Total dollar savings</div>
            <div className="wf-display" style={{ fontSize: 68, fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 1, color: WF.ink }}>
              {fmtMoney(dollarsYearly)}
            </div>
          </div>

          {/* Hours back + breakdown */}
          <div style={{ padding: '20px 22px', background: 'white', border: `1px solid ${WF.line2}`, borderRadius: 14, marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, marginBottom: 16, paddingBottom: 16, borderBottom: `1px solid ${WF.line2}` }}>
              <div className="wf-small" style={{ color: WF.ink2, lineHeight: 1.4 }}>Saved hours that can go back into providing care</div>
              <div className="wf-display" style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1, color: WF.ink, whiteSpace: 'nowrap' }}>
                {fmtHours(totalHoursYearly)}
              </div>
            </div>

            {(() => {
              const rows = [
              ['Onboarding new hires', onboardSaved],
              ['Compliance maintenance', complianceSavedYearly],
              ['Per-employee admin', employeeAdminSavedYearly]];
              return (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {rows.map(([label, hrs]) => {
                    const pct = totalHoursYearly > 0 ? hrs / totalHoursYearly * 100 : 0;
                    return (
                      <div key={label}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 5 }}>
                          <div className="wf-small" style={{ color: WF.ink2 }}>{label}</div>
                          <div className="wf-small" style={{ color: WF.ink, fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>{fmtHours(hrs)}</div>
                        </div>
                        <div style={{ height: 4, background: WF.fill, borderRadius: 999, overflow: 'hidden' }}>
                          <div style={{ width: `${pct}%`, height: '100%', background: WF.ink, borderRadius: 999 }} />
                        </div>
                      </div>);
                  })}
                </div>);
            })()}
          </div>

          {/* Footnote + CTA */}
          <div style={{ marginTop: 'auto' }}>
            <div className="wf-small" style={{ color: WF.ink3, marginBottom: 16, lineHeight: 1.5 }}>
              Estimates based on industry averages for onboarding, compliance, and admin time. Your results will vary.
            </div>
            <Btn variant="accent" size="lg">Get a personalized quote for my home →</Btn>
          </div>
        </div>
      </div>
    </div>);

}