/* global React */
const MODULES = [
  { week: 1, title: "Onboarding & ethics",          status: "complete",    progress: 96, meta: "4 sessions · Plano HQ · Complete" },
  { week: 2, title: "Auto product foundations",     status: "complete",    progress: 92, meta: "4 sessions · Plano HQ · Complete" },
  { week: 3, title: "Home & property",              status: "complete",    progress: 88, meta: "4 sessions · Plano HQ · Complete" },
  { week: 4, title: "Life & retirement basics",     status: "complete",    progress: 90, meta: "4 sessions · Plano HQ · Complete" },
  { week: 5, title: "Underwriting fundamentals",    status: "progress",    progress: 42, meta: "5 sessions · This week" },
  { week: 6, title: "Quoting & the agency stack",   status: "locked",      progress: 0,  meta: "Unlocks May 26" },
  { week: 7, title: "First conversation",           status: "locked",      progress: 0,  meta: "Unlocks June 2" },
  { week: 8, title: "Ride-along week",              status: "locked",      progress: 0,  meta: "Unlocks June 9" }
];

function Portal({ user, navigate, onLogout }) {
  const initial = (user?.email || "A")[0].toUpperCase();

  return (
    <div className="portal-shell">
      <section className="portal-banner">
        <div className="portal-banner-inner">
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginBottom: 12 }}>
            <div>
              <div className="eyebrow" style={{ color: "var(--color-primary-on-dark)", marginBottom: 10 }}>Fall 2026 cohort · Plano HQ</div>
              <h1>Week 5 of 12. Underwriting starts Tuesday.</h1>
              <p>Next session: Tuesday, May 19 · 9:00 AM · Plano HQ classroom 2.</p>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{ width: 44, height: 44, borderRadius: 9999, background: "var(--color-primary)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", font: "600 17px/1 var(--font-display)" }}>{initial}</div>
              <div style={{ color: "#fff" }}>
                <div style={{ font: "var(--type-body-strong)", letterSpacing: "var(--type-body-strong-ls)" }}>{user?.email || "Agent"}</div>
                <button onClick={onLogout} style={{ background: "transparent", color: "var(--color-body-muted)", border: 0, padding: 0, cursor: "pointer", font: "var(--type-caption)", letterSpacing: "var(--type-caption-ls)", marginTop: 2 }}>
                  Sign out
                </button>
              </div>
            </div>
          </div>
          <div className="progress-bar"><div style={{ width: "42%" }}></div></div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10, font: "var(--type-caption)", letterSpacing: "var(--type-caption-ls)", color: "var(--color-body-muted)" }}>
            <span>4 of 12 weeks complete</span>
            <span>Week 5 · 42% through underwriting</span>
          </div>
        </div>
      </section>

      <div className="portal-grid">
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
            <h2 style={{ font: "600 28px/1.2 var(--font-display)", letterSpacing: "-0.4px", margin: 0 }}>Curriculum</h2>
            <a href="#" style={{ color: "var(--color-primary)", font: "var(--type-body)", textDecoration: "none" }}>Full syllabus →</a>
          </div>

          <div className="modules-grid">
            {MODULES.map(m => {
              const pillClass = m.status === "complete" ? "pill-complete" : m.status === "progress" ? "pill-progress" : "pill-locked";
              const label = m.status === "complete" ? "Complete" : m.status === "progress" ? `${m.progress}% in progress` : "Locked";
              return (
                <div key={m.week} className="module-card">
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div className="wk">Week {m.week}</div>
                    <span className={"pill " + pillClass}>{label}</span>
                  </div>
                  <h4>{m.title}</h4>
                  {m.status !== "locked" && (
                    <div style={{ height: 4, background: "var(--color-canvas-parchment)", borderRadius: 999, overflow: "hidden", margin: "4px 0 8px" }}>
                      <div style={{ width: `${m.progress}%`, height: "100%", background: m.status === "complete" ? "#0c5e2e" : "var(--color-primary)" }}></div>
                    </div>
                  )}
                  <div className="meta">{m.meta}</div>
                </div>
              );
            })}
          </div>
        </div>

        <aside style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <div className="side-card">
            <h3>Your mentor</h3>
            <div className="mentor-row">
              <div className="mentor-avatar">JO</div>
              <div>
                <div className="mentor-name">James Okafor</div>
                <div className="mentor-role">Senior Agent · Frisco · 11 yrs</div>
              </div>
            </div>
            <p style={{ font: "var(--type-body)", letterSpacing: "var(--type-body-ls)", color: "var(--color-ink-muted-80)", margin: "0 0 14px" }}>
              Next 1:1 — Friday, May 16 at 3:00 PM. Topic: how to walk a quote sheet.
            </p>
            <button className="btn-pill-dark" style={{ width: "100%", justifyContent: "center" }}>Message James</button>
          </div>

          <div className="side-card">
            <h3>Schedule a ride-along</h3>
            <p style={{ font: "var(--type-body)", letterSpacing: "var(--type-body-ls)", color: "var(--color-ink-muted-80)", margin: "0 0 14px" }}>
              Half-day with a Frisco senior agent. In-territory, real appointments.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {["Wed AM", "Wed PM", "Thu AM", "Thu PM"].map(s => (
                <button key={s} className="filter-chip" style={{ padding: "8px 12px" }}>{s}</button>
              ))}
            </div>
          </div>

          <div className="side-card" style={{ background: "var(--color-canvas-parchment)" }}>
            <h3 style={{ fontSize: 18 }}>This week's brief</h3>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {["Tue · Underwriting kickoff (9–12)","Wed · Ride-along (8–1)","Thu · Quoting lab (1–5)","Fri · Mentor 1:1 (3–4)"].map(x => (
                <li key={x} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderTop: "1px solid var(--color-hairline)" }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--color-primary)" }}></span>
                  <span style={{ font: "var(--type-body)", letterSpacing: "var(--type-body-ls)" }}>{x}</span>
                </li>
              ))}
            </ul>
          </div>
        </aside>
      </div>
    </div>
  );
}

window.Portal = Portal;