// CPW Public Portal — Landing, Help, Auth (Sign in / Register / Forgot / Claim)
// M5-FR-01 (tenant-branded landing), M5-FR-07 (auth), M5-FR-08 (claim), M5-FR-14 (help)

const {
  PBtn, PCard, PField, PInput, PSelect, PCheckbox, PChip, PStatus,
  PContainer, PortalOppCard, PortalHeroImage,
  IPin, IClock, ICal, ISearch, IList, IMap, IFilter, IArrow, IArrowL, ICheck, IX,
  IUsers, IHelp, IMail, IPhone, IExt, IShield, IGlobe, IInfo, IUser, IChevD, IEye, IEyeOff, IHeart,
  programIconFor,
} = window.Portal;

const { useState: useStateA } = React;

// ====================== LANDING ======================
const PortalLanding = ({ tenant, opps, programs, onNav, onOpenOpp }) => {
  const featured = opps.filter(o => o.status === "open").slice(0, 3);
  return (
    <div>
      {/* Hero */}
      <section className="portal-hero">
        <PContainer>
          <div className="portal-hero-grid">
            <div className="portal-hero-copy">
              <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--theme-accent)", marginBottom: 18 }}>
                {tenant.heroEyebrow}
              </div>
              <h1 className="portal-hero-headline">
                {tenant.heroLine}{" "}
                <em style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--theme-accent)", fontWeight: 400 }}>{tenant.heroAccentWord}</em>{" "}
                {tenant.heroLineEnd}
              </h1>
              <p className="portal-hero-body">{tenant.heroBody}</p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
                <PBtn kind="primary" size="lg" iconRight={IArrow} onClick={() => onNav("discover")}>Browse opportunities</PBtn>
                <PBtn kind="ghost" size="lg" onClick={() => onNav("about")}>About {tenant.shortName} volunteering</PBtn>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 22, fontSize: 12.5, color: "var(--fg-3)" }}>
                <ICheck size={14} style={{ color: "var(--sage-700)" }} />
                No account needed to apply. Sign in to track your hours.
              </div>
            </div>
            <PortalHeroImage tenant={tenant} />
          </div>
        </PContainer>
      </section>

      {/* Stats strip */}
      <section className="portal-stats">
        <PContainer>
          <div className="portal-stats-grid">
            {tenant.stats.map(s => (
              <div key={s.label} className="portal-stat">
                <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(40px, 5.5vw, 64px)", color: "var(--ink)", lineHeight: 1, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{s.value}</div>
                <div style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--fg-3)", marginTop: 10 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </PContainer>
      </section>

      {/* Featured opportunities */}
      <section className="portal-section">
        <PContainer>
          <div className="portal-section-head">
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--theme-accent)", marginBottom: 10 }}>This month</div>
              <h2 className="portal-section-title">Opportunities open now</h2>
            </div>
            <button onClick={() => onNav("discover")} className="portal-section-link">
              See all {opps.length} <IArrow size={14} />
            </button>
          </div>
          <div className="portal-opp-grid">
            {featured.map(o => <PortalOppCard key={o.id} op={o} onClick={() => onOpenOpp(o.id)} />)}
          </div>
        </PContainer>
      </section>

      {/* Programs */}
      <section className="portal-section portal-section-deep">
        <PContainer>
          <div style={{ marginBottom: 40 }}>
            <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 10 }}>Programs</div>
            <h2 className="portal-section-title">Four ways to volunteer with us</h2>
          </div>
          <div className="portal-programs-grid">
            {programs.map(p => {
              const Icon = programIconFor(p.id);
              return (
                <button key={p.id} onClick={() => onNav("discover", { program: p.name })} className="portal-program-card">
                  <div className="portal-program-icon"><Icon size={24} /></div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, margin: "0 0 8px", color: "var(--ink)", letterSpacing: "-0.005em" }}>{p.name}</h3>
                  <p style={{ fontSize: 14, color: "var(--fg-2)", lineHeight: 1.55, margin: "0 0 14px" }}>{p.blurb}</p>
                  <span style={{ fontSize: 12, color: "var(--theme-accent)", fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 6 }}>
                    {p.count} open <IArrow size={12} />
                  </span>
                </button>
              );
            })}
          </div>
        </PContainer>
      </section>

      {/* About */}
      <section className="portal-section">
        <PContainer>
          <div className="portal-about-grid">
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--theme-accent)", marginBottom: 10 }}>About {tenant.shortName}</div>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4.6vw, 48px)", margin: "0 0 22px", color: "var(--ink)", letterSpacing: "-0.015em", lineHeight: 1.1, textWrap: "balance" }}>
                {tenant.aboutLine}
              </h2>
              <p style={{ fontSize: 16, color: "var(--fg-1)", lineHeight: 1.7, margin: "0 0 18px", textWrap: "pretty" }}>
                {tenant.aboutBody}
              </p>
              <p style={{ fontSize: 16, color: "var(--fg-1)", lineHeight: 1.7, margin: "0 0 26px", textWrap: "pretty" }}>
                Volunteers who log <strong>48 hours in a rolling 12-month window</strong> earn the free annual state park pass.
                At <strong>100 hours</strong> you receive an embroidered jacket, and at <strong>500 lifetime hours</strong> a lifetime commemorative pass and an invitation to the annual recognition dinner.
              </p>
              <PBtn kind="outline" iconRight={IArrow} onClick={() => onNav("discover")}>Find your role</PBtn>
            </div>
            <div className="portal-quote-card">
              <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.5, color: "var(--ink)", marginBottom: 22, textWrap: "balance" }}>
                "I came once with my daughter to a fishing day, and ended up coming back the next weekend as a camp host. Six years now. The trails ask less than you'd think, and give back more."
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{ width: 42, height: 42, borderRadius: 999, background: "var(--theme-accent-soft)", color: "var(--theme-accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 500, fontFamily: "var(--font-display)" }}>RM</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ink)" }}>Rosa Medina</div>
                  <div style={{ fontSize: 12, color: "var(--fg-3)" }}>Camp host · Boyd Lake SP · since 2020</div>
                </div>
              </div>
            </div>
          </div>
        </PContainer>
      </section>

      {/* How it works */}
      <section className="portal-section portal-section-deep">
        <PContainer>
          <div style={{ marginBottom: 40 }}>
            <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 10 }}>How it works</div>
            <h2 className="portal-section-title">Three steps, no surprises</h2>
          </div>
          <div className="portal-steps-grid">
            {[
              { n: "01", title: "Find a role", body: "Browse by program, location, or interest. Filter by date, family-friendly, or accessibility. Read the full role description — including what to bring." },
              { n: "02", title: "Apply once", body: "A short application — about 8 minutes. We verify your email and phone, run a background check where required, and route you to your regional coordinator." },
              { n: "03", title: "Show up", body: "We email you the meeting place, weather call, and a parking pass two days before your shift. Your hours are logged automatically when your coordinator signs off." },
            ].map(s => (
              <div key={s.n} className="portal-step">
                <div style={{ fontFamily: "var(--font-display)", fontSize: 64, color: "var(--theme-accent)", lineHeight: 1, opacity: 0.6, marginBottom: 14, fontVariantNumeric: "tabular-nums" }}>{s.n}</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, margin: "0 0 10px", color: "var(--ink)", letterSpacing: "-0.005em" }}>{s.title}</h3>
                <p style={{ fontSize: 14.5, color: "var(--fg-2)", lineHeight: 1.6, margin: 0 }}>{s.body}</p>
              </div>
            ))}
          </div>
        </PContainer>
      </section>

      {/* CTA */}
      <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "clamp(56px, 9vw, 120px) 0" }}>
        <PContainer>
          <div className="portal-cta-grid">
            <div>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(36px, 5vw, 56px)", margin: "0 0 18px", letterSpacing: "-0.015em", lineHeight: 1.05, color: "var(--paper)", textWrap: "balance" }}>
                {tenant.tagline}
              </h2>
              <p style={{ fontSize: 16, color: "rgba(245,239,230,0.75)", lineHeight: 1.65, margin: "0 0 30px", maxWidth: 560 }}>
                Whether you have a Saturday morning or a whole summer, there's a place for you. We'll help you find it.
              </p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <PBtn kind="primary" size="lg" iconRight={IArrow} onClick={() => onNav("discover")}>Browse opportunities</PBtn>
                <PBtn size="lg" onClick={() => onNav("signin")} style={{ background: "transparent", color: "var(--paper)", borderColor: "rgba(245,239,230,0.3)" }}>Sign in</PBtn>
              </div>
            </div>
            <div className="portal-cta-side">
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <a href={`tel:${tenant.contactPhone}`} className="portal-cta-contact">
                  <IPhone size={16} />
                  <div>
                    <div style={{ fontSize: 11.5, opacity: 0.65, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase" }}>Call</div>
                    <div style={{ fontSize: 15, color: "var(--paper)" }}>{tenant.contactPhone}</div>
                  </div>
                </a>
                <a href={`mailto:${tenant.contactEmail}`} className="portal-cta-contact">
                  <IMail size={16} />
                  <div>
                    <div style={{ fontSize: 11.5, opacity: 0.65, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase" }}>Email</div>
                    <div style={{ fontSize: 15, color: "var(--paper)" }}>{tenant.contactEmail}</div>
                  </div>
                </a>
                <button onClick={() => onNav("help")} className="portal-cta-contact" style={{ background: "transparent", border: "none", textAlign: "left", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
                  <IHelp size={16} />
                  <div>
                    <div style={{ fontSize: 11.5, opacity: 0.65, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase" }}>Help</div>
                    <div style={{ fontSize: 15, color: "var(--paper)" }}>FAQ & accessibility</div>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </PContainer>
      </section>
    </div>
  );
};

// ====================== AUTH SHELL ======================
const AuthShell = ({ tenant, children, narrow }) => (
  <div style={{ background: "var(--paper)", minHeight: "calc(100vh - 200px)", paddingTop: 60, paddingBottom: 80 }}>
    <PContainer narrow={narrow !== false}>
      {children}
    </PContainer>
  </div>
);

// ====================== SIGN IN ======================
const PortalSignin = ({ tenant, onNav, returnTo }) => {
  const [pwShow, setPwShow] = useStateA(false);
  return (
    <AuthShell tenant={tenant}>
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--theme-accent)", marginBottom: 12 }}>{tenant.shortName} volunteer portal</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(36px, 4.6vw, 48px)", letterSpacing: "-0.015em", lineHeight: 1.05, margin: 0, color: "var(--ink)" }}>Welcome back.</h1>
        {returnTo && (
          <div style={{ fontSize: 13.5, color: "var(--fg-2)", marginTop: 12 }}>
            Sign in to continue to <strong style={{ color: "var(--ink)" }}>{returnTo.title}</strong>.
          </div>
        )}
      </div>

      <PCard padded style={{ padding: 28 }}>
        <PField label="Email" required>
          <PInput type="email" placeholder="you@example.com" autoComplete="email" />
        </PField>
        <PField label="Password" required>
          <div style={{ position: "relative" }}>
            <PInput type={pwShow ? "text" : "password"} placeholder="" autoComplete="current-password" style={{ paddingRight: 44 }} />
            <button type="button" onClick={() => setPwShow(!pwShow)} aria-label={pwShow ? "Hide password" : "Show password"}
              style={{ position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", background: "transparent", border: "none", color: "var(--fg-3)", cursor: "pointer", padding: 8 }}>
              {pwShow ? <IEyeOff size={16} /> : <IEye size={16} />}
            </button>
          </div>
        </PField>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 22 }}>
          <PCheckbox label="Stay signed in on this device" />
          <button onClick={() => onNav("forgot")} style={{ background: "transparent", border: "none", color: "var(--theme-accent)", fontFamily: "var(--font-sans)", fontSize: 13, cursor: "pointer", fontWeight: 500 }}>
            Forgot password?
          </button>
        </div>
        <PBtn kind="primary" size="lg" style={{ width: "100%" }} onClick={() => returnTo ? onNav("opp", { id: returnTo.id, signedIn: true }) : onNav("vol-home")}>
          Sign in
        </PBtn>
        <div style={{ position: "relative", textAlign: "center", margin: "22px 0 18px" }}>
          <div style={{ height: 1, background: "var(--border-soft)" }} />
          <span style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", background: "var(--paper-soft)", padding: "0 14px", fontSize: 11, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-3)" }}>OR</span>
        </div>
        <PBtn kind="secondary" size="lg" style={{ width: "100%" }} onClick={() => onNav("vol-home")}>
          <span style={{ fontSize: 14 }}>Sign in with State of Colorado SSO</span>
        </PBtn>
        <div style={{ fontSize: 11.5, color: "var(--fg-3)", textAlign: "center", marginTop: 8, lineHeight: 1.5 }}>
          For state employees and partner agency staff.
        </div>
      </PCard>

      <div style={{ textAlign: "center", marginTop: 22, fontSize: 13.5, color: "var(--fg-2)" }}>
        New to {tenant.shortName}? <button onClick={() => onNav("register")} style={{ background: "transparent", border: "none", color: "var(--theme-accent)", fontFamily: "var(--font-sans)", fontSize: 13.5, cursor: "pointer", fontWeight: 500, padding: 0 }}>Create an account</button>
      </div>
      <div style={{ textAlign: "center", marginTop: 6, fontSize: 12, color: "var(--fg-3)" }}>
        Had an account before {tenant.shortName} moved to this portal? <button onClick={() => onNav("claim")} style={{ background: "transparent", border: "none", color: "var(--theme-accent)", fontFamily: "var(--font-sans)", fontSize: 12, cursor: "pointer", fontWeight: 500, padding: 0 }}>Claim your record</button>
      </div>

      {/* Security note — M5-FR-07: no account enumeration */}
      <div style={{ marginTop: 36, padding: 16, background: "var(--paper-soft)", borderRadius: 10, border: "1px dashed var(--border)", fontSize: 12, color: "var(--fg-3)", lineHeight: 1.55, display: "flex", gap: 10, alignItems: "flex-start" }}>
        <IShield size={14} style={{ marginTop: 2, flexShrink: 0 }} />
        <span>For your safety, we don't disclose whether an email is on file. If sign-in fails, double-check your password or use <em>Forgot password</em> — we'll send a reset link if the email exists.</span>
      </div>
    </AuthShell>
  );
};

// ====================== REGISTER ======================
const PortalRegister = ({ tenant, onNav }) => {
  const [step, setStep] = useStateA(0);
  const [smsConsent, setSmsConsent] = useStateA(false);
  const [tos, setTos] = useStateA(false);
  return (
    <AuthShell tenant={tenant}>
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--theme-accent)", marginBottom: 12 }}>Create your account</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(36px, 4.6vw, 48px)", letterSpacing: "-0.015em", lineHeight: 1.05, margin: 0, color: "var(--ink)" }}>
          {step === 0 ? "Let's get started." : step === 1 ? "Verify your email." : "You're all set."}
        </h1>
        <p style={{ fontSize: 14.5, color: "var(--fg-2)", marginTop: 14, lineHeight: 1.6, maxWidth: 540 }}>
          {step === 0 ? "An account lets you save opportunities, RSVP to shifts, and see your service history. You can also apply without one." : step === 1 ? "We just emailed a 6-digit code. Enter it below to confirm your email address." : "Your account is ready. Browse opportunities and apply when you're ready."}
        </p>
      </div>

      <PCard padded style={{ padding: 28 }}>
        {step === 0 && (
          <>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <PField label="First name" required><PInput placeholder="" autoComplete="given-name" /></PField>
              <PField label="Last name" required><PInput placeholder="" autoComplete="family-name" /></PField>
            </div>
            <PField label="Email" hint="We'll send your sign-up confirmations here." required>
              <PInput type="email" placeholder="you@example.com" autoComplete="email" />
            </PField>
            <PField label="Mobile phone" hint="Optional — but required if you'd like text reminders for your shifts." >
              <PInput type="tel" placeholder="(303) 555-0123" autoComplete="tel" />
            </PField>
            <PField label="Create a password" hint="At least 12 characters, with a mix of letters and numbers." required>
              <PInput type="password" autoComplete="new-password" />
            </PField>
            <PField label="ZIP code" hint="So we can show you the closest opportunities first.">
              <PInput inputMode="numeric" maxLength={5} placeholder="80525" />
            </PField>

            <div style={{ marginTop: 18, marginBottom: 22, display: "flex", flexDirection: "column", gap: 12 }}>
              <PCheckbox checked={smsConsent} onChange={() => setSmsConsent(!smsConsent)} label="Send me text reminders before shifts. Std msg rates apply. Reply STOP to unsubscribe." />
              <PCheckbox checked={tos} onChange={() => setTos(!tos)} label={<span>I agree to the <a href="#" style={{ color: "var(--theme-accent)" }}>Volunteer Code of Conduct</a> and <a href="#" style={{ color: "var(--theme-accent)" }}>Privacy Policy</a>.</span>} />
            </div>

            <PBtn kind="primary" size="lg" style={{ width: "100%" }} disabled={!tos} onClick={() => setStep(1)}>
              Create my account
            </PBtn>

            <div style={{ marginTop: 18, padding: 14, background: "var(--theme-accent-tint)", borderRadius: 10, fontSize: 12.5, color: "var(--fg-1)", lineHeight: 1.55 }}>
              <strong style={{ fontWeight: 600 }}>Just want to apply to one opportunity?</strong> You can <button onClick={() => onNav("apply")} style={{ background: "transparent", border: "none", color: "var(--theme-accent)", fontFamily: "var(--font-sans)", fontSize: 12.5, cursor: "pointer", fontWeight: 500, padding: 0 }}>apply without an account</button> — we'll create the record for you and email you a link to set a password.
            </div>
          </>
        )}

        {step === 1 && (
          <>
            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: 14, background: "var(--paper)", borderRadius: 10, marginBottom: 22 }}>
              <IMail size={18} style={{ color: "var(--theme-accent)" }} />
              <div style={{ fontSize: 13, color: "var(--fg-1)" }}>Code sent to <strong style={{ fontWeight: 600 }}>l***@gmail.com</strong></div>
            </div>
            <PField label="6-digit code">
              <PInput inputMode="numeric" maxLength={6} placeholder="• • • • • •" style={{ letterSpacing: "0.4em", fontSize: 22, textAlign: "center", paddingTop: 14, paddingBottom: 14, fontFamily: "var(--font-mono)" }} />
            </PField>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20, fontSize: 12.5, color: "var(--fg-3)" }}>
              <span>Code expires in 9:47</span>
              <button style={{ background: "transparent", border: "none", color: "var(--theme-accent)", fontFamily: "var(--font-sans)", fontSize: 12.5, cursor: "pointer", fontWeight: 500 }}>Resend code</button>
            </div>
            <PBtn kind="primary" size="lg" style={{ width: "100%" }} onClick={() => setStep(2)}>Verify and continue</PBtn>
          </>
        )}

        {step === 2 && (
          <div style={{ textAlign: "center", padding: "12px 0" }}>
            <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--sage-100)", color: "var(--sage-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
              <ICheck size={28} />
            </div>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, margin: "0 0 10px", color: "var(--ink)" }}>Welcome aboard.</h3>
            <p style={{ fontSize: 14.5, color: "var(--fg-2)", lineHeight: 1.6, margin: "0 0 24px", maxWidth: 440, marginInline: "auto" }}>
              Your account is ready. You can apply to opportunities right away — most roles need a short application before your first shift.
            </p>
            <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
              <PBtn kind="primary" iconRight={IArrow} onClick={() => onNav("discover")}>Browse opportunities</PBtn>
              <PBtn kind="secondary" onClick={() => onNav("vol-home")}>Go to my home</PBtn>
            </div>
          </div>
        )}
      </PCard>

      {step === 0 && (
        <div style={{ textAlign: "center", marginTop: 22, fontSize: 13.5, color: "var(--fg-2)" }}>
          Already have an account? <button onClick={() => onNav("signin")} style={{ background: "transparent", border: "none", color: "var(--theme-accent)", fontFamily: "var(--font-sans)", fontSize: 13.5, cursor: "pointer", fontWeight: 500 }}>Sign in</button>
        </div>
      )}
    </AuthShell>
  );
};

// ====================== FORGOT PASSWORD ======================
const PortalForgot = ({ tenant, onNav }) => {
  const [submitted, setSubmitted] = useStateA(false);
  return (
    <AuthShell tenant={tenant}>
      <button onClick={() => onNav("signin")} style={{ background: "transparent", border: "none", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6, color: "var(--fg-2)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, padding: 0, marginBottom: 22 }}>
        <IArrowL size={14} /> Back to sign in
      </button>
      <div style={{ marginBottom: 28 }}>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(34px, 4.4vw, 44px)", letterSpacing: "-0.015em", lineHeight: 1.05, margin: 0, color: "var(--ink)" }}>
          {submitted ? "Check your inbox." : "Reset your password."}
        </h1>
        <p style={{ fontSize: 14.5, color: "var(--fg-2)", marginTop: 14, lineHeight: 1.6 }}>
          {submitted
            ? "If we have an account for that email, we just sent a reset link. The link expires in 30 minutes. Be sure to check spam."
            : "Enter the email you used to sign up. We'll send a link to reset your password."}
        </p>
      </div>

      <PCard padded style={{ padding: 28 }}>
        {!submitted ? (
          <>
            <PField label="Email" required>
              <PInput type="email" placeholder="you@example.com" autoComplete="email" />
            </PField>
            <PBtn kind="primary" size="lg" style={{ width: "100%" }} onClick={() => setSubmitted(true)}>Send reset link</PBtn>
          </>
        ) : (
          <div style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: 16, background: "var(--sage-100)", borderRadius: 10 }}>
            <ICheck size={20} style={{ color: "var(--sage-700)", flexShrink: 0, marginTop: 2 }} />
            <div style={{ fontSize: 13.5, color: "var(--ink)", lineHeight: 1.6 }}>
              <strong style={{ fontWeight: 600 }}>Reset link sent if eligible.</strong> For your safety, we don't disclose whether the email is on file. If you don't receive an email within a few minutes, you may have signed up with a different address.
            </div>
          </div>
        )}
      </PCard>

      <div style={{ marginTop: 22, fontSize: 13, color: "var(--fg-3)", textAlign: "center", lineHeight: 1.5 }}>
        Still stuck? <a href={`mailto:${tenant.contactEmail}`} style={{ color: "var(--theme-accent)" }}>{tenant.contactEmail}</a> or {tenant.contactPhone}.
      </div>
    </AuthShell>
  );
};

// ====================== CLAIM ACCOUNT ======================
// M5-FR-08 — for migrated/admin-created/paper-history records.
const PortalClaim = ({ tenant, onNav }) => {
  const [step, setStep] = useStateA(0);
  const [via, setVia] = useStateA("email");
  return (
    <AuthShell tenant={tenant}>
      <button onClick={() => onNav("signin")} style={{ background: "transparent", border: "none", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6, color: "var(--fg-2)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, padding: 0, marginBottom: 22 }}>
        <IArrowL size={14} /> Back to sign in
      </button>
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--theme-accent)", marginBottom: 12 }}>Claim an existing record</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(34px, 4.4vw, 44px)", letterSpacing: "-0.015em", lineHeight: 1.05, margin: 0, color: "var(--ink)" }}>
          {step === 0 ? "Have you volunteered with us before?" : step === 1 ? "We need to confirm it's you." : "You're in."}
        </h1>
        <p style={{ fontSize: 14.5, color: "var(--fg-2)", marginTop: 14, lineHeight: 1.6 }}>
          {step === 0 && "If a coordinator created your record, you imported from a partner organization, or your service goes back further than this portal, claim it here. Your hours, training, and history will be waiting."}
          {step === 1 && "We found a possible match. Choose how you'd like to verify."}
          {step === 2 && "Welcome back. We've linked your new sign-in to the record we had on file."}
        </p>
      </div>

      <PCard padded style={{ padding: 28 }}>
        {step === 0 && (
          <>
            <PField label="Email or phone we'd have on file" required>
              <PInput placeholder="you@example.com or (303) 555-0123" />
            </PField>
            <PField label="Last name" required>
              <PInput placeholder="" autoComplete="family-name" />
            </PField>
            <PField label="Date of birth" hint="So we can match you to existing records.">
              <PInput type="date" />
            </PField>
            <PBtn kind="primary" size="lg" style={{ width: "100%" }} onClick={() => setStep(1)}>Look up my record</PBtn>
            <div style={{ marginTop: 16, padding: 14, background: "var(--paper)", borderRadius: 10, fontSize: 12.5, color: "var(--fg-2)", lineHeight: 1.55 }}>
              <strong style={{ fontWeight: 600, color: "var(--ink)" }}>What this is for.</strong> If you've never volunteered with us, <button onClick={() => onNav("register")} style={{ background: "transparent", border: "none", color: "var(--theme-accent)", fontFamily: "var(--font-sans)", fontSize: 12.5, cursor: "pointer", fontWeight: 500, padding: 0 }}>create a new account</button> instead.
            </div>
          </>
        )}

        {step === 1 && (
          <>
            <div style={{ padding: 16, background: "var(--theme-accent-tint)", borderRadius: 10, marginBottom: 20, fontSize: 13.5, color: "var(--fg-1)", lineHeight: 1.6 }}>
              We found a possible match. We won't share details until we've confirmed it's you.
            </div>

            <div style={{ fontSize: 12, fontWeight: 500, color: "var(--fg-1)", marginBottom: 10 }}>Send a verification code by</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 22 }}>
              <ClaimRadio active={via === "email"} onClick={() => setVia("email")} icon={IMail} label="Email" detail="to l••••@gmail.com" />
              <ClaimRadio active={via === "sms"}   onClick={() => setVia("sms")}   icon={IPhone} label="Text message" detail="to (***) ***-0124" />
            </div>
            <PBtn kind="primary" size="lg" style={{ width: "100%" }} onClick={() => setStep(2)}>Send code</PBtn>

            <div style={{ marginTop: 18, padding: 14, background: "var(--amber-100)", borderRadius: 10, fontSize: 12.5, color: "var(--amber-600)", lineHeight: 1.55, display: "flex", gap: 10 }}>
              <IInfo size={14} style={{ marginTop: 2, flexShrink: 0 }} />
              <span>If we can't reach you on either channel, a coordinator will reach out within two business days. <button style={{ background: "transparent", border: "none", color: "var(--amber-600)", fontFamily: "var(--font-sans)", fontSize: 12.5, cursor: "pointer", fontWeight: 600, padding: 0, textDecoration: "underline" }}>Request staff help</button></span>
            </div>
          </>
        )}

        {step === 2 && (
          <div style={{ textAlign: "center", padding: "12px 0" }}>
            <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--sage-100)", color: "var(--sage-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
              <ICheck size={28} />
            </div>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, margin: "0 0 10px", color: "var(--ink)" }}>Record linked.</h3>
            <p style={{ fontSize: 14, color: "var(--fg-2)", lineHeight: 1.6, margin: "0 0 18px", maxWidth: 440, marginInline: "auto" }}>
              We've linked your new sign-in to your existing record — <strong>56 hours</strong> across 4 shifts since 2021. Set a password to finish.
            </p>
            <PField label="Create a password" required>
              <PInput type="password" autoComplete="new-password" />
            </PField>
            <PBtn kind="primary" size="lg" style={{ width: "100%" }} onClick={() => onNav("vol-home")}>Set password and continue</PBtn>
          </div>
        )}
      </PCard>
    </AuthShell>
  );
};

const ClaimRadio = ({ active, onClick, icon: Icon, label, detail }) => (
  <button onClick={onClick} style={{
    display: "flex", gap: 14, alignItems: "center", padding: 14,
    background: active ? "var(--theme-accent-tint)" : "var(--paper)",
    border: `1.5px solid ${active ? "var(--theme-accent)" : "var(--border)"}`,
    borderRadius: 10, cursor: "pointer", textAlign: "left", fontFamily: "var(--font-sans)",
  }}>
    <span style={{ width: 36, height: 36, borderRadius: 999, background: active ? "var(--theme-accent)" : "var(--paper-soft)", color: active ? "var(--theme-accent-on)" : "var(--fg-2)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
      <Icon size={16} />
    </span>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ink)" }}>{label}</div>
      <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{detail}</div>
    </div>
    <span style={{ width: 18, height: 18, borderRadius: 999, border: `1.5px solid ${active ? "var(--theme-accent)" : "var(--border)"}`, background: active ? "var(--theme-accent)" : "transparent", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
      {active && <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--theme-accent-on)" }} />}
    </span>
  </button>
);

// ====================== APPLY (anonymous shortcut) ======================
const PortalApply = ({ tenant, onNav, returnOpp }) => {
  const [step, setStep] = useStateA(0);
  return (
    <AuthShell tenant={tenant}>
      <button onClick={() => onNav(returnOpp ? "opp" : "home", returnOpp ? { id: returnOpp.id } : null)} style={{ background: "transparent", border: "none", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6, color: "var(--fg-2)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, padding: 0, marginBottom: 22 }}>
        <IArrowL size={14} /> {returnOpp ? "Back to opportunity" : "Back to home"}
      </button>

      <div style={{ marginBottom: 22 }}>
        <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--theme-accent)", marginBottom: 12 }}>
          {returnOpp ? `Apply for ${returnOpp.title}` : "Volunteer application"}
        </div>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4.2vw, 42px)", letterSpacing: "-0.015em", lineHeight: 1.1, margin: 0, color: "var(--ink)", textWrap: "balance" }}>
          {step === 0 ? "Apply without an account." : "Submitted — check your email."}
        </h1>
        <p style={{ fontSize: 14.5, color: "var(--fg-2)", marginTop: 14, lineHeight: 1.6 }}>
          {step === 0
            ? "About 5 minutes. We'll create your volunteer record and email you a link to set a password — you'll need it for future shifts."
            : "We've emailed you a confirmation and a link to set your password. A coordinator will review your application within two business days."}
        </p>
      </div>

      {step === 0 ? (
        <PCard padded style={{ padding: 28 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <PField label="First name" required><PInput autoComplete="given-name" /></PField>
            <PField label="Last name" required><PInput autoComplete="family-name" /></PField>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <PField label="Email" required><PInput type="email" autoComplete="email" /></PField>
            <PField label="Mobile phone"><PInput type="tel" autoComplete="tel" /></PField>
          </div>
          <PField label="Date of birth" required hint="Some roles have age requirements.">
            <PInput type="date" />
          </PField>
          <PField label="ZIP code" required><PInput inputMode="numeric" maxLength={5} /></PField>
          <PField label="Anything we should know?" hint="Optional. Accessibility needs, scheduling notes, or how you heard about us.">
            <textarea rows={3} style={{ width: "100%", boxSizing: "border-box", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--ink)", background: "var(--paper-soft)", border: "1px solid var(--border)", borderRadius: 8, padding: "11px 14px", boxShadow: "var(--shadow-inset)", outline: "none", resize: "vertical" }} />
          </PField>

          <div style={{ padding: 14, background: "var(--paper)", borderRadius: 10, marginTop: 8, marginBottom: 22, display: "flex", gap: 12, alignItems: "flex-start" }}>
            <IShield size={16} style={{ color: "var(--theme-accent)", marginTop: 2, flexShrink: 0 }} />
            <div style={{ fontSize: 12.5, color: "var(--fg-2)", lineHeight: 1.55 }}>
              <strong style={{ color: "var(--ink)", fontWeight: 600 }}>For your safety:</strong> we won't tell you whether an email or phone is already on file. If we find a match, a coordinator will reach out to help — your application will not be auto-declined.
            </div>
          </div>

          <PCheckbox label={<span>I agree to the <a href="#" style={{ color: "var(--theme-accent)" }}>Volunteer Code of Conduct</a> and <a href="#" style={{ color: "var(--theme-accent)" }}>Privacy Policy</a>.</span>} />

          <div style={{ display: "flex", gap: 10, marginTop: 22, flexWrap: "wrap" }}>
            <PBtn kind="primary" size="lg" onClick={() => setStep(1)} iconRight={IArrow}>Submit application</PBtn>
            <PBtn kind="ghost" size="lg" onClick={() => onNav("signin")}>I have an account — sign in instead</PBtn>
          </div>
        </PCard>
      ) : (
        <PCard padded style={{ padding: 28, textAlign: "center" }}>
          <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--sage-100)", color: "var(--sage-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
            <ICheck size={28} />
          </div>
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, margin: "0 0 10px", color: "var(--ink)" }}>You're on our list.</h3>
          <div style={{ fontSize: 13, color: "var(--fg-3)", marginBottom: 18 }}>Reference #VA-2026-04812</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, maxWidth: 380, margin: "0 auto 24px", textAlign: "left" }}>
            {[
              "Check your email for a confirmation and password setup link.",
              "A coordinator reviews your application within 2 business days.",
              "We'll email you when you're approved for your first shift.",
            ].map((s, i) => (
              <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13.5, color: "var(--fg-1)", lineHeight: 1.5 }}>
                <span style={{ width: 22, height: 22, borderRadius: 999, background: "var(--theme-accent-tint)", color: "var(--theme-accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: 12, fontWeight: 600 }}>{i + 1}</span>
                <span>{s}</span>
              </div>
            ))}
          </div>
          <PBtn kind="primary" onClick={() => onNav("home")}>Back to home</PBtn>
        </PCard>
      )}
    </AuthShell>
  );
};

// ====================== HELP / FAQ ======================
const PortalHelp = ({ tenant, faqs, onNav }) => {
  const [openIx, setOpenIx] = useStateA(0);
  return (
    <div style={{ background: "var(--paper)", paddingBottom: 80 }}>
      <div style={{ background: "var(--paper-soft)", borderBottom: "1px solid var(--border-soft)", padding: "56px 0 36px" }}>
        <PContainer narrow>
          <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--theme-accent)", marginBottom: 12 }}>Help & accessibility</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(38px, 5vw, 56px)", letterSpacing: "-0.015em", lineHeight: 1.05, margin: 0, color: "var(--ink)", textWrap: "balance" }}>
            Real people. Real answers.
          </h1>
          <p style={{ fontSize: 16, color: "var(--fg-2)", lineHeight: 1.65, margin: "22px 0 0", maxWidth: 580 }}>
            If you don't find what you need below, email or call — we answer within one business day.
          </p>
        </PContainer>
      </div>

      <PContainer style={{ paddingTop: 48 }}>
        <div className="portal-help-grid">
          {/* FAQ */}
          <div>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: 30, margin: "0 0 20px", color: "var(--ink)", letterSpacing: "-0.01em" }}>Frequently asked</h2>
            <div style={{ background: "var(--paper-soft)", border: "1px solid var(--border-soft)", borderRadius: 14, overflow: "hidden" }}>
              {faqs.map((f, i) => (
                <div key={i} style={{ borderBottom: i < faqs.length - 1 ? "1px solid var(--border-soft)" : "none" }}>
                  <button onClick={() => setOpenIx(openIx === i ? -1 : i)} style={{
                    width: "100%", padding: "20px 24px", background: "transparent", border: "none",
                    display: "flex", justifyContent: "space-between", alignItems: "center", gap: 14,
                    cursor: "pointer", textAlign: "left", fontFamily: "var(--font-sans)",
                  }}>
                    <span style={{ fontSize: 15, fontWeight: 500, color: "var(--ink)", lineHeight: 1.4 }}>{f.q}</span>
                    <IChevD size={18} style={{ color: "var(--fg-3)", flexShrink: 0, transform: openIx === i ? "rotate(180deg)" : "none", transition: "transform 160ms" }} />
                  </button>
                  {openIx === i && (
                    <div style={{ padding: "0 24px 22px", fontSize: 14, color: "var(--fg-2)", lineHeight: 1.7, textWrap: "pretty" }}>
                      {f.a}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* Contact card */}
          <div style={{ position: "sticky", top: 100, alignSelf: "flex-start" }}>
            <PCard style={{ padding: 24 }}>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 24, margin: "0 0 6px", color: "var(--ink)" }}>Talk to a person</h3>
              <p style={{ fontSize: 13, color: "var(--fg-3)", lineHeight: 1.55, margin: "0 0 22px" }}>
                Whether you need to apply by phone, request an accessibility accommodation, or just have a question — we're here.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <a href={`tel:${tenant.contactPhone}`} className="portal-help-contact">
                  <span style={{ width: 36, height: 36, borderRadius: 999, background: "var(--theme-accent-tint)", color: "var(--theme-accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><IPhone size={15} /></span>
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--fg-3)" }}>Call</div>
                    <div style={{ fontSize: 14, color: "var(--ink)", fontWeight: 500 }}>{tenant.contactPhone}</div>
                    <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 2 }}>Mon–Fri, 8 am – 5 pm MT</div>
                  </div>
                </a>
                <a href={`mailto:${tenant.contactEmail}`} className="portal-help-contact">
                  <span style={{ width: 36, height: 36, borderRadius: 999, background: "var(--theme-accent-tint)", color: "var(--theme-accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><IMail size={15} /></span>
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--fg-3)" }}>Email</div>
                    <div style={{ fontSize: 14, color: "var(--ink)", fontWeight: 500 }}>{tenant.contactEmail}</div>
                    <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 2 }}>Reply within 1 business day</div>
                  </div>
                </a>
              </div>

              <div style={{ borderTop: "1px solid var(--border-soft)", marginTop: 22, paddingTop: 22 }}>
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 10 }}>Accessibility</div>
                <p style={{ fontSize: 13, color: "var(--fg-2)", lineHeight: 1.6, margin: "0 0 12px" }}>
                  This portal supports screen readers, keyboard navigation, and high-contrast modes. For specific accommodations:
                </p>
                <div style={{ fontSize: 13, color: "var(--ink)", lineHeight: 1.6 }}>
                  TTY: <strong>{tenant.accessibilityPhone}</strong>
                </div>
              </div>
            </PCard>

            <PCard style={{ marginTop: 14, padding: 22, background: "var(--theme-accent-tint)", borderColor: "transparent" }}>
              <h4 style={{ fontFamily: "var(--font-display)", fontSize: 18, margin: "0 0 6px", color: "var(--ink)" }}>Already a volunteer?</h4>
              <p style={{ fontSize: 13, color: "var(--fg-2)", lineHeight: 1.55, margin: "0 0 14px" }}>
                Sign in to see your service history, manage your contact preferences, or request a data export.
              </p>
              <PBtn kind="primary" size="sm" onClick={() => onNav("signin")} iconRight={IArrow}>Sign in</PBtn>
            </PCard>
          </div>
        </div>
      </PContainer>
    </div>
  );
};

window.PortalLanding = PortalLanding;
window.PortalSignin = PortalSignin;
window.PortalRegister = PortalRegister;
window.PortalForgot = PortalForgot;
window.PortalClaim = PortalClaim;
window.PortalApply = PortalApply;
window.PortalHelp = PortalHelp;