/* User Study setup — hypotheses, sample, methods */

function Study() {
  const ref = useReveal(0.15)
  return (
    <section id="study">
      <div className="wrap">
        <SectionHead
          num="05 — Study"
          eyebrow="In-car evaluation"
          title="An A/B study against the production baseline."
        >
          <p className="lede">
            Both systems were integrated into the same car's infotainment unit.
            Participants experienced both, in randomised order, to minimise
            ordering effects.
          </p>
          <img
            style={{ margin: "20px", marginLeft: 0, maxWidth: "100%" }}
            src="/study-setup.png"
          />
        </SectionHead>

        <div ref={ref} className="study-grid reveal">
          {/* Stat tiles */}
          <div className="study-stats">
            <Stat n="30" l="Participants" sub="18 M · 12 F" />
            <Stat n="2" l="Systems compared" sub="AI · Pre-designed" />
            <Stat n="9" l="Variables measured" sub="Standardised + custom" />
            <Stat
              n="100"
              l="Preference points"
              sub="Distributed amongst A vs B"
            />
          </div>

          {/* Hypotheses */}
          <div className="card" style={{ background: "var(--page-card)" }}>
            <div className="h-eyebrow" style={{ marginBottom: 12 }}>
              Hypotheses
            </div>
            <div style={{ display: "grid", gap: 16 }}>
              <Hypo
                k="H1"
                claim="The AI-based UI performs as well as or better than the pre-designed GUI in usability (H1a), clarity (H1b), and informational value (H1c)."
              />
              <Hypo
                k="H2"
                claim="The AI-based UI causes equal or lower cognitive load (H2a) and distraction (H2b), and equal or higher situational awareness (H2c) than the pre-designed UI."
              />
            </div>
          </div>

          {/* Methods */}
          <div
            className="card"
            style={{
              background: "var(--page-fg)",
              color: "#F4EFDF",
              border: "1px solid var(--page-fg)",
            }}
          >
            <div
              className="h-eyebrow"
              style={{ marginBottom: 12, color: "var(--page-accent)" }}
            >
              Measurement tools
            </div>
            <ul
              style={{
                listStyle: "none",
                padding: 0,
                margin: 0,
                display: "grid",
                gap: 8,
              }}
            >
              {[
                ["UEQ+", "Value · Clarity · Visual Aesthetics"],
                ["NASA TLX", "Mental load"],
                [
                  "Custom 7-pt Likert",
                  "Distraction · Personalization · Adaptivity",
                ],
                ["UEQ-S", "Overall UX"],
                ["Open-ended", "Qualitative feedback"],
              ].map(([k, v]) => (
                <li
                  key={k}
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    padding: "8px 0",
                    borderTop: "1px solid rgba(244,239,223,0.15)",
                    fontSize: 14,
                  }}
                >
                  <span style={{ fontWeight: 600 }}>{k}</span>
                  <span
                    style={{
                      color: "rgba(244,239,223,0.7)",
                      textAlign: "right",
                    }}
                  >
                    {v}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <style>{`
        .study-grid {
          display: grid;
          grid-template-columns: 1fr 1.2fr 1fr;
          gap: 24px;
          align-items: start;
        }
        .study-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        @media (max-width: 880px) {
          .study-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  )
}

function Stat({ n, l, sub }) {
  return (
    <div
      className="card"
      style={{ background: "var(--page-card)", padding: 20 }}
    >
      <div
        style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontSize: 56,
          lineHeight: 1,
          letterSpacing: "-0.02em",
        }}
      >
        {n}
      </div>
      <div style={{ marginTop: 8, fontSize: 13, fontWeight: 600 }}>{l}</div>
      <div
        style={{
          fontSize: 11,
          color: "var(--page-muted)",
          marginTop: 2,
          fontFamily: "var(--font-mono)",
        }}
      >
        {sub}
      </div>
    </div>
  )
}
function Hypo({ k, claim }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 12 }}>
      <div
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 12,
          color: "var(--page-accent)",
          padding: "6px 10px",
          background: "rgba(224,123,44,0.1)",
          borderRadius: 6,
          height: "fit-content",
          textAlign: "center",
          fontWeight: 600,
        }}
      >
        {k}
      </div>
      <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5 }}>{claim}</p>
    </div>
  )
}

window.Study = Study