/* global React, Reveal */
const { useState } = React;

// Optional: "Which path are you on?" mini-quiz between Problem and HowItWorks
const Quiz = () => {
  const [selected, setSelected] = useState(null);

  const options = [
    { id: "intl", icon: "globe", label: "I'm new to the US", sub: "International student" },
    { id: "fresh", icon: "school", label: "I'm starting high school", sub: "Incoming freshman" },
    { id: "trans", icon: "shuffle", label: "I'm transferring schools", sub: "Mid-year or new district" },
  ];

  const handlePick = (id) => {
    setSelected(id);
    setTimeout(() => {
      const el = document.getElementById("how");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 350);
  };

  return (
    <section
      data-screen-label="03 Quiz"
      style={{
        background: "var(--white)",
        padding: "clamp(56px, 7vw, 96px) 24px",
        borderTop: "1px solid var(--ink-100)",
        borderBottom: "1px solid var(--ink-100)",
      }}
    >
      <div style={{ maxWidth: 980, margin: "0 auto", textAlign: "center" }}>
        <Reveal>
          <div className="eyebrow" style={{ color: "var(--brand-lime-700)" }}>
            Quick start
          </div>
          <h3 style={{
            marginTop: 14,
            fontFamily: "var(--font-display)", fontWeight: 900,
            fontSize: "clamp(28px, 3.4vw, 44px)",
            lineHeight: 1.05, letterSpacing: "-0.02em",
            textTransform: "uppercase", color: "var(--ink-900)",
          }}>
            Which path are <span style={{ color: "var(--brand-lime)" }}>you</span> on?
          </h3>
        </Reveal>

        <Reveal stagger className="reveal-stagger quiz-grid" style={{
          marginTop: 36,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 16,
        }}>
          {options.map(o => (
            <button
              key={o.id}
              className={`quiz-card ${selected === o.id ? "selected" : ""}`}
              onClick={() => handlePick(o.id)}
              style={{
                background: "var(--white)",
                border: "2px solid var(--ink-200)",
                borderRadius: 20,
                padding: "28px 24px",
                textAlign: "left",
                font: "inherit",
                display: "flex",
                flexDirection: "column",
                gap: 16,
                minHeight: 160,
              }}
            >
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: selected === o.id ? "var(--brand-lime)" : "var(--brand-lime-50)",
                color: "var(--ink-900)",
                display: "flex", alignItems: "center", justifyContent: "center",
                transition: "background 200ms var(--ease-out)",
              }}>
                <Icon name={o.icon} size={22} />
              </div>
              <div>
                <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 900,
                  fontSize: 19, lineHeight: 1.15, letterSpacing: "-0.015em",
                  color: "var(--ink-900)",
                }}>
                  {o.label}
                </div>
                <div style={{
                  marginTop: 6,
                  fontFamily: "var(--font-body)", fontSize: 13,
                  color: "var(--ink-500)",
                }}>
                  {o.sub}
                </div>
              </div>
              <div style={{
                marginTop: "auto",
                display: "flex", alignItems: "center", gap: 6,
                fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 600,
                color: selected === o.id ? "var(--brand-lime-700)" : "var(--ink-500)",
              }}>
                {selected === o.id ? "Loading your path…" : "Pick this →"}
              </div>
            </button>
          ))}
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .quiz-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Quiz = Quiz;