// Profile, Payroll, Equipment pages

// ──────────────── Profile ────────────────
function ProfilePage({ persona }) {
  const p = PERSONAS[persona];
  const [editing, setEditing] = React.useState(null);

  return (
    <div className="page fade-up">
      <div className="page-head">
        <div>
          <span className="eyebrow">Personal info</span>
          <h1 className="page-title">Your profile</h1>
          <p className="page-sub">This information is shared with People Ops, Payroll, and Benefits. Some fields are read-only and require an HR change request.</p>
        </div>
        <button className="btn btn-ghost"><I.download size={14}/> Export profile</button>
      </div>

      <div className="profile-hero card card-pad-lg">
        <Avatar name={NEW_HIRE.name} size="lg"/>
        <div style={{ flex: 1 }}>
          <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em" }}>{PROFILE.legalName}</h2>
          <div className="muted" style={{ marginTop: 4 }}>{p.role} · {p.team}</div>
          <div className="row" style={{ marginTop: 10, gap: 6, flexWrap: "wrap" }}>
            <span className="chip">{p.badge}</span>
            <span className="chip">{p.location}</span>
            <span className="chip">Starts {p.startDate}</span>
          </div>
        </div>
        <button className="btn btn-soft"><I.upload size={13}/> Change photo</button>
      </div>

      <div className="profile-grid">
        <ProfileSection title="Basic information">
          <ProfileField label="Legal name" value={PROFILE.legalName}/>
          <ProfileField label="Preferred name" value={PROFILE.preferred} editable/>
          <ProfileField label="Pronouns" value={PROFILE.pronouns} editable/>
          <ProfileField label="Date of birth" value="Aug 14, 1996" locked hint="Contact HR to change"/>
          <ProfileField label="SSN" value={PROFILE.ssnLast4} locked/>
        </ProfileSection>

        <ProfileSection title="Contact">
          <ProfileField label="Work email" value={PROFILE.email} locked/>
          <ProfileField label="Personal email" value={PROFILE.personalEmail} editable/>
          <ProfileField label="Mobile" value={PROFILE.phone} editable/>
          <ProfileField label="Home address" value={PROFILE.address} editable wide/>
        </ProfileSection>

        <ProfileSection title="Emergency contact">
          <ProfileField label="Name" value={PROFILE.emergency.name} editable/>
          <ProfileField label="Relationship" value={PROFILE.emergency.relation} editable/>
          <ProfileField label="Phone" value={PROFILE.emergency.phone} editable/>
        </ProfileSection>

        <ProfileSection title="EEO & demographics" sub="Optional · self-reported">
          <ProfileField label="Ethnicity" value={PROFILE.ethnicity} editable/>
          <ProfileField label="Gender" value="Non-binary" editable/>
          <ProfileField label="Veteran status" value={PROFILE.veteran} editable/>
          <ProfileField label="Disability status" value="Prefer not to say" editable/>
        </ProfileSection>

        <ProfileSection title="Swag & sizing" sub="For your welcome kit and team merch">
          <ProfileField label="T-shirt size" value={PROFILE.shirtSize} editable/>
          <ProfileField label="Hoodie size" value="—" editable/>
          <ProfileField label="Dietary restrictions" value="None" editable/>
        </ProfileSection>
      </div>
    </div>
  );
}

function ProfileSection({ title, sub, children }) {
  return (
    <div className="card card-pad">
      <div className="ps-head">
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, letterSpacing: "-0.012em" }}>{title}</h3>
        {sub && <span className="muted small">{sub}</span>}
      </div>
      <div className="ps-fields">{children}</div>
    </div>
  );
}

function ProfileField({ label, value, editable, locked, wide, hint }) {
  return (
    <div className={"pf" + (wide ? " wide" : "")}>
      <div className="pf-label muted small">{label}</div>
      <div className="pf-row">
        <div className="pf-value">{value}</div>
        {locked && <I.lock size={12} style={{ color: "var(--text-subtle)" }}/>}
        {editable && <button className="pf-edit"><I.edit size={12}/></button>}
      </div>
      {hint && <div className="subtle small" style={{ marginTop: 2 }}>{hint}</div>}
    </div>
  );
}

// ──────────────── Payroll & taxes ────────────────
function PayrollPage({ persona }) {
  return (
    <div className="page fade-up">
      <div className="page-head">
        <div>
          <span className="eyebrow">Payroll & taxes</span>
          <h1 className="page-title">Your pay setup</h1>
          <p className="page-sub">Direct deposit, tax withholdings, and 401(k) elections. First paycheck arrives <strong>Friday, May 22</strong>.</p>
        </div>
      </div>

      <div className="pay-hero">
        <div className="card card-pad pay-amount">
          <span className="eyebrow">Annual base</span>
          <div className="t-display" style={{ fontSize: 38, fontWeight: 700, letterSpacing: "-0.03em", marginTop: 6 }}>
            $172,000<span className="muted" style={{ fontSize: 16, fontWeight: 500 }}>/yr</span>
          </div>
          <div className="muted small">Bi-weekly · 26 paychecks/year · ~$6,615 gross/period</div>
          <div className="row" style={{ marginTop: 12, gap: 6 }}>
            <span className="chip chip-success">+ $25,000 sign-on bonus</span>
            <span className="chip">+ Equity grant</span>
          </div>
        </div>
        <div className="card card-pad pay-next">
          <span className="eyebrow">Next paycheck</span>
          <div className="t-display" style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.025em", marginTop: 6 }}>
            $4,872.18
          </div>
          <div className="muted small">Friday, May 22 · estimated net</div>
          <div className="bar" style={{ marginTop: 12 }}>
            <i style={{ width: "62%" }}/>
          </div>
          <div className="row" style={{ justifyContent: "space-between", marginTop: 6, fontSize: 11.5 }}>
            <span className="muted">Pay period progress</span>
            <span className="muted">9 of 14 days</span>
          </div>
        </div>
      </div>

      <div className="pay-grid">
        <PayCard
          icon="dollar" color="#16a34a"
          title="Direct deposit"
          status="Pending setup"
          cta="Set up"
          rows={[
            ["Bank", "Not set"],
            ["Account", "—"],
            ["Routing", "—"],
          ]}
        />
        <PayCard
          icon="flag" color="#2563eb"
          title="Federal tax · W-4"
          status="Pending signature"
          cta="Complete"
          rows={[
            ["Filing status", "—"],
            ["Allowances", "—"],
            ["Extra withholding", "—"],
          ]}
        />
        <PayCard
          icon="globe" color="#a855f7"
          title="State tax · CA DE-4"
          status="Pending signature"
          cta="Complete"
          rows={[
            ["Filing status", "—"],
            ["Allowances", "—"],
          ]}
        />
        <PayCard
          icon="dollar" color="#f97316"
          title="401(k) contribution"
          status="Optional · 30 days"
          cta="Choose"
          rows={[
            ["Provider", "Fidelity"],
            ["Convoso match", "100% up to 4%"],
            ["Vesting", "Immediate"],
          ]}
        />
      </div>

      <div className="card card-pad">
        <div className="row" style={{ marginBottom: 12, justifyContent: "space-between" }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>Pay history</h3>
          <span className="muted small">Once you start, paystubs appear here</span>
        </div>
        <div className="empty-state">
          <I.dollar size={28} style={{ color: "var(--text-subtle)", marginBottom: 8 }}/>
          <div style={{ fontWeight: 600 }}>No pay history yet</div>
          <div className="muted small">Your first paystub will be available May 22, 2026</div>
        </div>
      </div>
    </div>
  );
}

function PayCard({ icon, color, title, status, cta, rows }) {
  const C = I[icon];
  return (
    <div className="card pay-card">
      <div className="pc-card-head">
        <div className="rs-icon" style={{ background: color + "1f", color }}>
          <C size={15}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 14 }}>{title}</div>
          <div className="chip chip-warn" style={{ marginTop: 4 }}>{status}</div>
        </div>
      </div>
      <table className="pay-rows">
        <tbody>
          {rows.map(([k, v], i) => (
            <tr key={i}><td className="muted small">{k}</td><td>{v}</td></tr>
          ))}
        </tbody>
      </table>
      <button className="btn btn-soft btn-sm">{cta} <I.arrow size={11}/></button>
    </div>
  );
}

// ──────────────── Equipment ────────────────
function EquipmentPage({ persona }) {
  return (
    <div className="page fade-up">
      <div className="page-head">
        <div>
          <span className="eyebrow">IT & equipment</span>
          <h1 className="page-title">Your gear is on the way</h1>
          <p className="page-sub">Your equipment was approved and shipped. Track it below or request anything you're missing.</p>
        </div>
        <button className="btn btn-primary"><I.plus size={14}/> Request equipment</button>
      </div>

      <div className="card card-pad shipment-card">
        <div className="ship-head">
          <div>
            <span className="eyebrow">Order #CV-2026-04812</span>
            <div className="t-display" style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", marginTop: 4 }}>
              Arrives Sun, May 10
            </div>
            <div className="muted small">FedEx · 2-day · Tracking 7849 0231 9912</div>
          </div>
          <span className="chip chip-success"><span className="live-dot"/> In transit</span>
        </div>
        <div className="ship-track">
          <div className="st-step done"><I.check size={11}/><span>Approved</span></div>
          <div className="st-bar done"/>
          <div className="st-step done"><I.check size={11}/><span>Packed</span></div>
          <div className="st-bar done"/>
          <div className="st-step active"><span className="live-dot" style={{ width: 7, height: 7 }}/><span>In transit</span></div>
          <div className="st-bar"/>
          <div className="st-step"><span/><span>Out for delivery</span></div>
          <div className="st-bar"/>
          <div className="st-step"><span/><span>Delivered</span></div>
        </div>
      </div>

      <div className="eq-grid">
        {EQUIPMENT.map(e => {
          const C = I[e.icon];
          return (
            <div key={e.id} className="eq-card card">
              <div className="eq-thumb">
                <C size={56} sw={1.2} style={{ color: "var(--text-muted)" }}/>
              </div>
              <div className="eq-body">
                <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div>
                    <div className="eq-name">{e.name}</div>
                    <div className="muted small">{e.spec}</div>
                  </div>
                  <span className={"chip chip-" + (e.status === "shipped" ? "success" : e.status === "processing" ? "info" : "")}>
                    {e.status === "shipped" ? "Shipped" : e.status === "processing" ? "Processing" : "Available"}
                  </span>
                </div>
                <div className="muted small" style={{ marginTop: 8 }}><I.clock size={11}/> {e.eta}</div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="card card-pad">
        <h3 style={{ margin: "0 0 12px", fontSize: 15, fontWeight: 700 }}>Software & access</h3>
        <div className="sw-grid">
          {[
            { name: "Convoso SSO", state: "Active", icon: "lock", color: "#16a34a" },
            { name: "Slack workspace", state: "Active · #welcome-riley", icon: "slack", color: "#a855f7" },
            { name: "GitHub org · convoso-eng", state: "Pending · accept invite", icon: "github", color: "#0b1220" },
            { name: "Linear", state: "Pending provisioning", icon: "layout", color: "#6366f1" },
            { name: "AWS Console · dev account", state: "Pending · IT setup call", icon: "globe", color: "#f97316" },
            { name: "Datadog", state: "Pending provisioning", icon: "monitor", color: "#7c3aed" },
            { name: "1Password", state: "Active", icon: "lock", color: "#0ea5e9" },
            { name: "Zoom", state: "Active", icon: "zoom", color: "#2563eb" },
          ].map((s, i) => {
            const C = I[s.icon];
            const isActive = s.state.startsWith("Active");
            return (
              <div key={i} className="sw-row">
                <div className="rs-icon" style={{ background: s.color + "1f", color: s.color }}>
                  <C size={14}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{s.name}</div>
                  <div className="muted small">{s.state}</div>
                </div>
                {isActive
                  ? <span className="chip chip-success" style={{ fontSize: 10.5 }}>Ready</span>
                  : <button className="btn btn-soft btn-sm">Request</button>}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.ProfilePage = ProfilePage;
window.PayrollPage = PayrollPage;
window.EquipmentPage = EquipmentPage;