// Sign Up / Sign In pages
// SignUp has 3 tabs: Facility | Agency | Care Worker (app prompt)
// SignIn has email/password + a callout for care workers to open the app

function AuthShell({ url, title, subtitle, children, showTrust = true }) {
  return (
    <div className="wf-page wf">
      <Chrome url={url} />
      <Nav active={null} />

      <div className="wf-section" style={{ paddingTop: 56, paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-start', maxWidth: 1100, margin: '0 auto' }}>
          {/* Left rail — value props */}
          <div style={{ position: 'sticky', top: 80 }}>
            <h1 className="wf-h1" style={{ fontSize: 44, marginBottom: 16, letterSpacing: '-0.025em' }}>{title}</h1>
            <p className="wf-sub" style={{ fontSize: 17, marginBottom: 32, maxWidth: 420 }}>{subtitle}</p>

            {showTrust && <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
              ['Made in Canada', 'Hosted on AWS Canada · PIPEDA, PHIPA aligned.'],
              ['Verified at the source', 'We sync directly with provincial registries.'],
              ['Yours, end-to-end', 'Workers own their wallet. You request access.']].
              map(([t, d]) =>
              <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <div style={{ width: 28, height: 28, borderRadius: 8, background: WF.accentSoft, color: WF.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4 4 10-10" /></svg>
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 2 }}>{t}</div>
                    <div className="wf-small" style={{ color: WF.ink2 }}>{d}</div>
                  </div>
                </div>
              )}
            </div>}
          </div>

          {/* Right rail — form / content */}
          <div>{children}</div>
        </div>
      </div>

      <Footer />
    </div>);

}

function FormField({ label, type = 'text', placeholder, hint, optional }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <label style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
        <span style={{ fontSize: 13, fontWeight: 500, color: WF.ink }}>{label}</span>
        {optional && <span style={{ fontSize: 11, color: WF.ink3 }}>Optional</span>}
      </label>
      <input
        type={type}
        placeholder={placeholder}
        style={{
          width: '100%',
          padding: '12px 14px',
          borderRadius: 10,
          border: `1px solid ${WF.line}`,
          background: 'white',
          fontSize: 14,
          fontFamily: WF.sans,
          color: WF.ink,
          outline: 'none'
        }} />

      {hint && <div className="wf-small" style={{ marginTop: 6, color: WF.ink3 }}>{hint}</div>}
    </div>);

}

function SelectField({ label, options, hint }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: WF.ink, marginBottom: 6 }}>{label}</label>
      <div style={{
        position: 'relative',
        padding: '12px 14px',
        borderRadius: 10,
        border: `1px solid ${WF.line}`,
        background: 'white',
        fontSize: 14,
        color: WF.ink2,
        cursor: 'pointer'
      }}>
        {options[0]}
        <span style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', color: WF.ink3 }}>▾</span>
      </div>
      {hint && <div className="wf-small" style={{ marginTop: 6, color: WF.ink3 }}>{hint}</div>}
    </div>);

}

function SignUp() {
  const [tab, setTab] = React.useState('facility');

  const tabs = [
  { id: 'facility', label: 'Facility' },
  { id: 'agency', label: 'Agency' },
  { id: 'care', label: 'Care Worker' }];


  return (
    <AuthShell
      url="credz.health/signup"
      title="Get started with Credz."
      subtitle="Set up your organization in under five minutes — or download the app if you're a care worker.">

      <div style={{ background: 'white', border: `1px solid ${WF.line2}`, borderRadius: 18, padding: 32, boxShadow: '0 24px 60px rgba(0,0,0,.06)' }}>
        {/* Tab switcher */}
        <div style={{ display: 'flex', gap: 4, padding: 4, background: WF.fill, borderRadius: 999, marginBottom: 28 }}>
          {tabs.map((t) =>
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            style={{
              flex: 1,
              padding: '8px 14px',
              borderRadius: 999,
              border: 'none',
              background: tab === t.id ? 'white' : 'transparent',
              color: tab === t.id ? WF.ink : WF.ink2,
              fontSize: 13,
              fontWeight: 500,
              cursor: 'pointer',
              boxShadow: tab === t.id ? '0 2px 6px rgba(0,0,0,.06)' : 'none',
              fontFamily: WF.sans,
              transition: 'all .15s'
            }}>

              {t.label}
            </button>
          )}
        </div>

        {tab === 'facility' &&
        <div>
            <div style={{ marginBottom: 24 }}>
              <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 4 }}>Facility account</div>
              <div className="wf-small" style={{ color: WF.ink2 }}>Long-term care, retirement homes, hospitals.</div>
            </div>

            <FormField label="Facility name" placeholder="Maple Grove Long-Term Care" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <FormField label="Your name" placeholder="Jane Doe" />
              <FormField label="Role" placeholder="DOC, ED, RN Manager…" />
            </div>
            <FormField label="Work email" type="email" placeholder="jane@maplegrove.ca" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <FormField label="Phone" type="tel" placeholder="(416) 555-0123" />
              <SelectField label="Beds / staff" options={['Up to 100']} />
            </div>
            <FormField label="Password" type="password" placeholder="At least 12 characters" hint="One uppercase, one number, one symbol." />

            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 6, marginBottom: 22 }}>
              <div style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${WF.line}`, marginTop: 2, flexShrink: 0 }} />
              <div className="wf-small" style={{ color: WF.ink2, lineHeight: 1.5 }}>
                I agree to the <a href="#" style={{ color: WF.accent }}>Terms</a>, <a href="#" style={{ color: WF.accent }}>Privacy Policy</a>, and Canadian data residency (AWS Canada).
              </div>
            </div>

            <Btn variant="accent" size="lg" style={{ width: '100%' }}>Create facility account</Btn>
            <div className="wf-small" style={{ textAlign: 'center', marginTop: 16, color: WF.ink2 }}>
              Already have an account? <a href="#" style={{ color: WF.accent }}>Sign in</a>
            </div>
          </div>
        }

        {tab === 'agency' &&
        <div>
            <div style={{ marginBottom: 24 }}>
              <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 4 }}>Agency account</div>
              <div className="wf-small" style={{ color: WF.ink2 }}>Staffing agencies, temp. worker suppliers.</div>
            </div>

            <FormField label="Agency name" placeholder="Northern Care Staffing" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <FormField label="Your name" placeholder="Jane Doe" />
              <FormField label="Role" placeholder="Director, Recruiter…" />
            </div>
            <FormField label="Work email" type="email" placeholder="jane@northerncare.ca" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <FormField label="Phone" type="tel" placeholder="(416) 555-0123" />
              <SelectField label="Active workers" options={['1 – 50']} />
            </div>
            <FormField label="Password" type="password" placeholder="At least 12 characters" hint="One uppercase, one number, one symbol." />

            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 6, marginBottom: 22 }}>
              <div style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${WF.line}`, marginTop: 2, flexShrink: 0 }} />
              <div className="wf-small" style={{ color: WF.ink2, lineHeight: 1.5 }}>
                I agree to the <a href="#" style={{ color: WF.accent }}>Terms</a>, <a href="#" style={{ color: WF.accent }}>Privacy Policy</a>, and Canadian data residency (AWS Canada).
              </div>
            </div>

            <Btn variant="accent" size="lg" style={{ width: '100%' }}>Create agency account</Btn>
            <div className="wf-small" style={{ textAlign: 'center', marginTop: 16, color: WF.ink2 }}>
              Already have an account? <a href="#" style={{ color: WF.accent }}>Sign in</a>
            </div>
          </div>
        }

        {tab === 'care' &&
        <div style={{ textAlign: 'center', padding: '8px 0 4px' }}>
            <div style={{ display: 'inline-flex', padding: '6px 14px', background: WF.accentSoft, color: WF.accent, borderRadius: 999, fontSize: 12, fontWeight: 500, marginBottom: 18 }}>
              Always free for care workers
            </div>
            <div className="wf-display" style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 8 }}>
              Credz lives in your pocket.
            </div>
            <div className="wf-body" style={{ fontSize: 15, color: WF.ink2, marginBottom: 28, maxWidth: 360, margin: '0 auto 28px' }}>
              Care workers sign up directly in the Credz app. Scan the QR code or download from the app store to get started.
            </div>

            <div style={{ display: 'flex', justifyContent: 'center', gap: 24, alignItems: 'center', marginBottom: 28 }}>
              {/* QR code mock */}
              <div style={{ width: 160, height: 160, padding: 12, background: 'white', border: `1px solid ${WF.line}`, borderRadius: 16, boxShadow: '0 8px 24px rgba(0,0,0,.06)' }}>
                <div style={{
                width: '100%', height: '100%', borderRadius: 8,
                backgroundImage: `
                    radial-gradient(${WF.ink} 1px, transparent 1.2px),
                    radial-gradient(${WF.ink} 1px, transparent 1.2px)`,
                backgroundSize: '8px 8px, 8px 8px',
                backgroundPosition: '0 0, 4px 4px',
                position: 'relative'
              }}>
                  {/* corner finder patterns */}
                  {[[6, 6], [6, 'auto', 'auto', 6], ['auto', 6, 6, 'auto']].map((pos, i) =>
                <div key={i} style={{
                  position: 'absolute',
                  top: pos[0] === 'auto' ? 'auto' : pos[0], left: pos[1] === 'auto' ? 'auto' : pos[1],
                  bottom: pos[2] === 6 ? 6 : 'auto', right: pos[3] === 6 ? 6 : 'auto',
                  width: 28, height: 28, borderRadius: 6,
                  background: 'white', border: `4px solid ${WF.ink}`,
                  boxShadow: `inset 0 0 0 3px white, inset 0 0 0 6px ${WF.ink}`
                }} />
                )}
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-start' }}>
                {/* App Store badge */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 18px', background: WF.ink, color: 'white', borderRadius: 12, cursor: 'pointer' }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.08zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" /></svg>
                  <div style={{ textAlign: 'left' }}>
                    <div style={{ fontSize: 9, opacity: 0.7, letterSpacing: '.02em' }}>Download on the</div>
                    <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>App Store</div>
                  </div>
                </div>
                {/* Google Play badge */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 18px', background: WF.ink, color: 'white', borderRadius: 12, cursor: 'pointer' }}>
                  <svg width="22" height="22" viewBox="0 0 24 24"><path d="M3.6 2.7c-.3.3-.5.7-.5 1.2v16.2c0 .5.2.9.5 1.2L13 12 3.6 2.7z" fill="#4ad" /><path d="M16.7 8.7L13 12l3.7 3.3 4.4-2.5c.5-.3.5-1.3 0-1.6l-4.4-2.5z" fill="#fc3" /><path d="M3.6 2.7L13 12 3.6 21.3c.4.3 1 .3 1.6-.1l11-6.3-3.5-3.6 3.5-3.5-11-6.3c-.6-.3-1.2-.3-1.6 0z" fill="#0d4" /><path d="M3.6 21.3l9.4-9.3-3.5-3.5 12.6 7.2c.5.3.5 1.3 0 1.6l-12.6 7.2L3.6 21.3z" fill="#f43" /></svg>
                  <div style={{ textAlign: 'left' }}>
                    <div style={{ fontSize: 9, opacity: 0.7, letterSpacing: '.02em' }}>GET IT ON</div>
                    <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>Google Play</div>
                  </div>
                </div>
              </div>
            </div>

            <div style={{ padding: 16, background: WF.fill, borderRadius: 12, textAlign: 'left' }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <div style={{ width: 24, height: 24, borderRadius: 6, background: 'white', border: `1px solid ${WF.line2}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: WF.accent }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 8v4M12 16h.01" /></svg>
                </div>
                <div style={{ fontSize: 13, color: WF.ink2, lineHeight: 1.5 }}>
                  Were you invited by a facility or agency? They've already added you. Just open the app and verify your phone number — your wallet links automatically.
                </div>
              </div>
            </div>

            <div className="wf-small" style={{ textAlign: 'center', marginTop: 22, color: WF.ink2 }}>
              Already have the app? <a href="#" style={{ color: WF.accent }}>Sign in</a>
            </div>
          </div>
        }
      </div>

      {/* Trust strip below card */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 24, marginTop: 24, flexWrap: 'wrap', fontSize: 12, color: WF.ink3 }}>
        <span>🇨🇦 AWS Canada</span>
        <span>· PIPEDA / PHIPA aligned</span>
        <span>· SOC 2 Type II</span>
        <span>· AES-256</span>
      </div>
    </AuthShell>);

}

function SignIn() {
  return (
    <AuthShell
      url="credz.health/signin"
      title="Welcome back."
      subtitle="Sign in to manage your facility, agency, or compliance dashboard."
      showTrust={false}>

      <div style={{ background: 'white', border: `1px solid ${WF.line2}`, borderRadius: 18, padding: 32, boxShadow: '0 24px 60px rgba(0,0,0,.06)' }}>
        <div style={{ marginBottom: 24 }}>
          <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 4 }}>Sign in to Credz</div>
          <div className="wf-small" style={{ color: WF.ink2 }}>For facilities and agencies.</div>
        </div>

        <FormField label="Email" type="email" placeholder="you@maplegrove.ca" />
        <div style={{ marginBottom: 6 }}>
          <FormField label="Password" type="password" placeholder="Enter your password" />
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22, marginTop: -4 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${WF.line}` }} />
            <span className="wf-small" style={{ color: WF.ink2 }}>Remember me</span>
          </div>
          <a href="#" style={{ fontSize: 13, color: WF.accent, textDecoration: 'none' }}>Forgot password?</a>
        </div>

        <Btn variant="accent" size="lg" style={{ width: '100%' }}>Sign in</Btn>

        {/* SSO row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '24px 0 18px' }}>
          <div style={{ flex: 1, height: 1, background: WF.line2 }} />
          <span className="wf-small" style={{ color: WF.ink3 }}>or</span>
          <div style={{ flex: 1, height: 1, background: WF.line2 }} />
        </div>

        <button style={{
          width: '100%', padding: '12px 16px', borderRadius: 10,
          border: `1px solid ${WF.line}`, background: 'white',
          fontSize: 14, fontWeight: 500, color: WF.ink,
          fontFamily: WF.sans, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="6" width="18" height="13" rx="2" /><path d="M3 9l9 5 9-5" /></svg>
          Sign in with SSO
        </button>

        <div className="wf-small" style={{ textAlign: 'center', marginTop: 20, color: WF.ink2 }}>
          New to Credz? <a href="#" style={{ color: WF.accent }}>Create an account</a>
        </div>
      </div>

      {/* Care worker callout */}
      <div style={{ marginTop: 20, padding: 20, background: WF.accentSoft, borderRadius: 14, display: 'flex', alignItems: 'center', gap: 16 }}>
        <div style={{ width: 44, height: 44, borderRadius: 10, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: WF.accent }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="2" width="12" height="20" rx="3" /><path d="M11 19h2" /></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 14, color: WF.ink, marginBottom: 2 }}>Are you a care worker?</div>
          <div className="wf-small" style={{ color: WF.ink2 }}>Sign in directly inside the Credz app on your phone.</div>
        </div>
        <a href="#" style={{ fontSize: 13, color: WF.accent, fontWeight: 500, textDecoration: 'none', whiteSpace: 'nowrap' }}>Open the app →</a>
      </div>
    </AuthShell>);

}

Object.assign(window, { SignUp, SignIn });