// Home dashboard screen

function HomeScreen({ setRoute, studentEmail, studentName, onIdentify, quizProgress }) {
  const totalQuizzes = window.QUIZZES.length;
  const completed    = Object.values(quizProgress).filter(p => p?.completed).length;
  const w = useWindowWidth();
  const isMobile = w < BP.md;
  const isSmall  = w < BP.sm;
  return (
    <div style={{ maxWidth: 1240, margin: "0 auto", padding: isSmall ? "20px 16px 60px" : "36px 28px 80px" }}>

      {/* ── Hero ────────────────────────────────────────────────── */}
      <section style={{
        position: "relative",
        background: "var(--green-700)",
        borderRadius: isSmall ? 18 : 28,
        padding: isSmall ? "28px 24px" : isMobile ? "36px 36px" : "48px 52px",
        overflow: "hidden",
        color: "var(--gold-200)",
        border: "3px solid var(--green-900)",
        boxShadow: "0 8px 0 var(--green-900)",
      }}>
        {/* Halftone pattern */}
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          backgroundImage: "radial-gradient(var(--gold-500) 1px, transparent 1.4px)",
          backgroundSize: "16px 16px",
          opacity: 0.12,
          pointerEvents: "none",
        }} />

        <div style={{
          display: "grid",
          gridTemplateColumns: (studentName && !isMobile) ? "1.4fr 1fr" : "1fr",
          gap: 24, alignItems: "center", position: "relative",
        }}>
          {/* Text side */}
          <div>
            {studentName ? (
              <>
                <div style={{ display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
                  <Chip tone="gold">Wit & Wisdom · Module 4</Chip>
                  {completed > 0
                    ? <Chip tone="coral">{completed}/{totalQuizzes} sets done</Chip>
                    : <Chip tone="coral">2 new question sets</Chip>
                  }
                </div>
                <h1 className="serif" style={{
                  fontSize: isSmall ? 42 : 64, lineHeight: 0.95, margin: 0, fontWeight: 900,
                  color: "var(--gold-300)", letterSpacing: "-0.02em",
                  fontVariationSettings: '"SOFT" 60',
                }}>
                  Hey {studentName} —<br />
                  <span style={{ color: "var(--gold-500)" }}>time to soar.</span>
                </h1>
                <p style={{
                  maxWidth: 480, marginTop: 18, fontSize: 17, lineHeight: 1.55,
                  color: "var(--gold-200)", opacity: 0.9,
                }}>
                  Jump into a question set or get coaching on your essay. Mrs. Muller's Coach is ready when you are.
                </p>
                <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                  <Button variant="gold" onClick={() => setRoute("chat")} icon={<SparkIcon />}>
                    Open SOARBot 9000
                  </Button>
                  <Button variant="ghost" onClick={() => setRoute("quizzes")}
                    style={{ color: "var(--gold-300)", boxShadow: "inset 0 0 0 2px var(--gold-500)" }}
                  >
                    Browse question sets →
                  </Button>
                </div>
              </>
            ) : (
              <>
                <div style={{ display: "inline-flex", marginBottom: 18 }}>
                  <Chip tone="gold">Wit & Wisdom · Module 4</Chip>
                </div>
                <h1 className="serif" style={{
                  fontSize: isSmall ? 42 : 64, lineHeight: 0.95, margin: 0, fontWeight: 900,
                  color: "var(--gold-300)", letterSpacing: "-0.02em",
                  fontVariationSettings: '"SOFT" 60',
                }}>
                  Welcome to<br />
                  <span style={{ color: "var(--gold-500)" }}>Glenwood Eagles.</span>
                </h1>
                <EmailEntryForm onSubmit={onIdentify} />
              </>
            )}
          </div>

          {/* Eagle + speech bubble (only when identified and not mobile) */}
          {studentName && !isMobile && (
            <div style={{ position: "relative", height: 420, display: "grid", placeItems: "end center" }}>
              <img src="assets/eagle.svg" alt=""
                style={{ height: 340, filter: "drop-shadow(0 12px 0 rgba(12,42,25,0.35))" }} />
              <div style={{
                position: "absolute", top: 0, left: 0,
                background: "var(--gold-200)", color: "var(--green-800)",
                padding: "14px 18px", borderRadius: 18,
                fontFamily: "Fraunces", fontWeight: 700, fontSize: 17,
                border: "2px solid var(--green-900)",
                boxShadow: "4px 4px 0 var(--green-900)",
                transform: "rotate(-3deg)",
                maxWidth: 200,
              }}>
                "One question at a time. You've got this!"
                <div style={{
                  position: "absolute", bottom: -13, right: 32,
                  width: 22, height: 22,
                  background: "var(--gold-200)",
                  borderRight: "2px solid var(--green-900)",
                  borderBottom: "2px solid var(--green-900)",
                  transform: "rotate(45deg)",
                }} />
              </div>
            </div>
          )}
        </div>
      </section>

      {/* ── Two-up resource cards ────────────────────────────────── */}
      <section style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 20, marginTop: 28 }}>

        {/* SOARBot 9000 (formerly Essay Coach) */}
        <ResourceCard
          title="SOARBot 9000"
          eyebrow="AI writing coach"
          body="Drop in a paragraph and I'll help you make it stronger — better evidence, sharper thesis, smoother flow. I'll never write it for you, just coach you in the right direction."
          cta="Start a conversation"
          onClick={() => setRoute("chat")}
          accentColor="var(--accent-coral)"
          sideArt={
            <div style={{
              position: "absolute", top: 0, right: 0, bottom: 0,
              width: "44%",
              background: "linear-gradient(135deg, var(--accent-coral) 0%, #c85f38 100%)",
              borderRadius: "0 16px 16px 0",
              display: "grid", placeItems: "center",
              overflow: "hidden",
            }}>
              <div aria-hidden style={{
                position: "absolute", inset: 0,
                backgroundImage: "radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1.5px)",
                backgroundSize: "14px 14px",
              }} />
              <div style={{ position: "relative", textAlign: "center" }}>
                <div style={{ fontSize: 58, lineHeight: 1 }}>🦅</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "#fff", marginTop: 10, opacity: 0.8 }}>
                  WRITE · THINK · SOAR
                </div>
              </div>
            </div>
          }
        />

        {/* Question Sets (formerly Novel Quizzes) */}
        <ResourceCard
          title="Question Sets"
          eyebrow="Wit & Wisdom · Module 4"
          body="Ten question sets covering Shipwreck at the Bottom of the World and I Am Malala. Short passages, multiple question types, instant feedback."
          cta="Browse all question sets"
          onClick={() => setRoute("quizzes")}
          accentColor="var(--accent-sky)"
          sideArt={
            <div style={{
              position: "absolute", top: 0, right: 0, bottom: 0,
              width: "44%",
              background: "linear-gradient(135deg, var(--green-600) 0%, var(--green-800) 100%)",
              borderRadius: "0 16px 16px 0",
              display: "grid", placeItems: "center",
              overflow: "hidden",
            }}>
              <div aria-hidden style={{
                position: "absolute", inset: 0,
                backgroundImage: "radial-gradient(var(--gold-500) 1px, transparent 1.5px)",
                backgroundSize: "14px 14px",
                opacity: 0.25,
              }} />
              <div style={{ position: "relative", display: "flex", gap: 8, transform: "rotate(-6deg)" }}>
                <BookSpine color="var(--accent-coral)" label="SHIPWRECK" />
                <BookSpine color="var(--gold-500)" label="MALALA" dark />
                <BookSpine color="var(--accent-sky)" label="MODULE 4" />
              </div>
            </div>
          }
        />
      </section>

      {/* ── Footer ──────────────────────────────────────────────── */}
      <footer style={{
        marginTop: 64, padding: "24px 0",
        borderTop: "1.5px dashed rgba(24,71,44,0.2)",
        display: "flex", flexDirection: isSmall ? "column" : "row",
        justifyContent: "space-between", alignItems: isSmall ? "flex-start" : "center",
        gap: isSmall ? 12 : 0,
        color: "var(--ink-3)", fontSize: 13,
      }}>
        <div className="mono" style={{ letterSpacing: "0.1em" }}>
          GLENWOOD INTERMEDIATE · MRS. MULLER · ROOM 214
        </div>
        <div style={{ display: "flex", gap: 16 }}>
          <span>Help</span>
          <span>Class calendar</span>
          <span>Report an issue</span>
        </div>
      </footer>
    </div>
  );
}

// ── Sub-components ──────────────────────────────────────────────

function ResourceCard({ title, eyebrow, body, cta, onClick, sideArt, accentColor }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative", overflow: "hidden",
        background: "var(--paper)",
        borderRadius: 18,
        border: "1.5px solid rgba(24,71,44,0.15)",
        padding: "28px 32px",
        minHeight: 220,
        cursor: "pointer",
        boxShadow: hover
          ? "0 14px 30px -10px rgba(12,42,25,0.3), 0 3px 0 rgba(24,71,44,0.1)"
          : "0 4px 0 rgba(24,71,44,0.1)",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        transition: "transform 220ms ease, box-shadow 220ms ease",
      }}
    >
      <div style={{ maxWidth: "56%" }}>
        <Chip tone="outline" style={{ borderColor: accentColor, color: accentColor }}>{eyebrow}</Chip>
        <h3 className="serif" style={{
          fontSize: 32, fontWeight: 800, margin: "14px 0 8px",
          color: "var(--green-800)", letterSpacing: "-0.01em",
        }}>
          {title}
        </h3>
        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 }}>{body}</p>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          marginTop: 18, padding: "8px 14px",
          background: "var(--green-800)", color: "var(--gold-300)",
          borderRadius: 999, fontSize: 13, fontWeight: 600,
        }}>
          {cta} <span style={{ transform: hover ? "translateX(3px)" : "translateX(0)", transition: "transform 180ms" }}>→</span>
        </div>
      </div>
      {sideArt}
    </div>
  );
}

function BookSpine({ color, label, dark }) {
  return (
    <div style={{
      width: 42, height: 130,
      background: color,
      borderRadius: 4,
      display: "grid", placeItems: "center",
      border: "2px solid rgba(0,0,0,0.3)",
      boxShadow: "2px 2px 0 rgba(0,0,0,0.2)",
    }}>
      <div className="mono" style={{
        fontSize: 10, fontWeight: 700, letterSpacing: "0.1em",
        color: dark ? "var(--green-900)" : "#fff",
        writingMode: "vertical-rl",
        textOrientation: "mixed",
        transform: "rotate(180deg)",
      }}>{label}</div>
    </div>
  );
}

function SparkIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2L14 10L22 12L14 14L12 22L10 14L2 12L10 10Z" />
    </svg>
  );
}

Object.assign(window, { HomeScreen });