/* Results — animated metric bars + point distribution */

function Results() {
  const ref = useRef(null)
  const [trigger, setTrigger] = useState(false)
  useEffect(() => {
    const io = new IntersectionObserver(
      (es) =>
        es.forEach((e) => {
          if (e.isIntersecting) {
            setTrigger(true)
            io.disconnect()
          }
        }),
      { threshold: 0.2 },
    )
    if (ref.current) io.observe(ref.current)
    return () => io.disconnect()
  }, [])

  const metrics = [
    { k: "Usability", p: 0.514 },
    { k: "Clarity", p: 0.089 },
    { k: "Value", p: 0.31 },
    { k: "Distraction", p: 0.872 },
    { k: "Cognitive load", p: 0.235 },
    { k: "Situational awareness", p: 0.146 },
    { k: "Personalization", p: 0.909 },
    { k: "Contextual adaptivity", p: 0.911 },
  ]

  // Point distribution
  const aiAvg = useCountUp(48.73, trigger)
  const pdAvg = useCountUp(51.27, trigger)

  return (
    <section
      id="results"
      ref={ref}
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead
          num="06 — Results"
          eyebrow="What the data showed"
          title="The AI-assembled UI matched human-designed."
        >
          <p className="lede">
            Across every measured variable, no statistically significant
            difference was found between the AI-assembled and pre-designed
            systems.{" "}
            <strong>Most participants didn't even notice a difference</strong>.
          </p>
        </SectionHead>

        {/* Point distribution */}
        <div className="results-pref">
          <div
            className="card"
            style={{ background: "var(--page-bg)", padding: 28 }}
          >
            <div className="h-eyebrow" style={{ marginBottom: 16 }}>
              Overall preference · 100 points distributed
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "stretch",
                height: 56,
                borderRadius: 12,
                overflow: "hidden",
                border: "1px solid var(--page-line)",
              }}
            >
              <div
                style={{
                  width: trigger ? `${aiAvg}%` : "0%",
                  background: "var(--page-accent)",
                  transition: "width 1600ms cubic-bezier(.2,0,0,1)",
                  display: "flex",
                  alignItems: "center",
                  padding: "0 16px",
                  color: "#fff",
                  fontWeight: 600,
                  fontSize: 14,
                }}
              >
                AI · {aiAvg.toFixed(2)} Ø Points
              </div>
              <div
                style={{
                  width: trigger ? `${pdAvg}%` : "100%",
                  background: "var(--page-fg)",
                  transition: "width 1600ms cubic-bezier(.2,0,0,1)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "flex-end",
                  padding: "0 16px",
                  color: "#F4EFDF",
                  fontWeight: 600,
                  fontSize: 14,
                }}
              >
                Pre-designed · {pdAvg.toFixed(2)} Ø Points
              </div>
            </div>
            <div className="results-pref-notes">
              <div>
                <div
                  className="mono"
                  style={{
                    fontSize: 11,
                    color: "var(--page-accent)",
                    marginBottom: 4,
                  }}
                >
                  AI-ASSEMBLED
                </div>
                <div style={{ fontSize: 13 }}>
                  14 out of 30 people gave it &gt; 50 points
                </div>
                <div style={{ fontSize: 13 }}>
                  4 of those 14 gave it &gt; 70 points
                </div>
              </div>
              <div>
                <div
                  className="mono"
                  style={{
                    fontSize: 11,
                    color: "var(--page-muted)",
                    marginBottom: 4,
                  }}
                >
                  PRE-DESIGNED
                </div>
                <div style={{ fontSize: 13 }}>
                  15 out of 30 people gave it &gt; 50 points
                </div>
                <div style={{ fontSize: 13 }}>
                  5 of those 15 gave it &gt; 70 points
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Metrics grid */}
        <div style={{ marginTop: 32 }}>
          <div className="h-eyebrow" style={{ marginBottom: 16 }}>
            UX & safety metrics: p-values (none significant)
          </div>
          <div className="metrics-grid">
            {metrics.map((m, i) => (
              <MetricRow key={m.k} m={m} delay={i * 70} trigger={trigger} />
            ))}
          </div>
          <div
            style={{
              marginTop: 16,
              fontSize: 12,
              color: "var(--page-muted)",
              fontFamily: "var(--font-mono)",
              letterSpacing: "0.04em",
            }}
          >
            p &lt; 0.05 = significant difference · all p &gt; 0.05 here = no
            significant difference detected
          </div>
        </div>

        {/* Caveat */}
        <div
          className="card"
          style={{ marginTop: 32, background: "var(--page-bg)", padding: 24 }}
        >
          <div
            className="h-eyebrow"
            style={{ color: "var(--page-warn)", marginBottom: 8 }}
          >
            One caveat worth naming
          </div>
          <p style={{ fontSize: 15, margin: 0, maxWidth: "70ch" }}>
            High variance was observed when the AI was given the most freedom in
            component creation. The interface accommodated the necessary
            information but not always with consistent structure across
            generations. How that affects users in the long term is an open
            question for future research.
          </p>
          <img src="/variation.png"></img>
        </div>
      </div>

      <style>{`
        .results-pref-notes {
          display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
          margin-top: 16px;
        }
        .metrics-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 12px 32px;
        }
        @media (max-width: 720px) {
          .metrics-grid, .results-pref-notes { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  )
}

// function MetricRow({ m, delay, trigger }) {
//   // Bar position: p-value -> position from left (0..1). 0.05 threshold marker.
//   const left = m.p * 100
//   return (
//     <div style={{ padding: "12px 0", borderTop: "1px solid var(--page-line)" }}>
//       <div
//         style={{
//           display: "flex",
//           justifyContent: "space-between",
//           alignItems: "baseline",
//           marginBottom: 8,
//         }}
//       >
//         <span style={{ fontSize: 14, fontWeight: 500 }}>{m.k}</span>
//         <span
//           style={{
//             fontFamily: "var(--font-mono)",
//             fontSize: 12,
//             color: "var(--page-good)",
//           }}
//         >
//           p = {m.p.toFixed(3)}
//         </span>
//       </div>
//       <div
//         style={{
//           position: "relative",
//           height: 6,
//           background: "var(--page-bg)",
//           borderRadius: 999,
//         }}
//       >
//         {/* threshold line at p=0.05 */}
//         <div
//           style={{
//             position: "absolute",
//             left: "5%",
//             top: -3,
//             bottom: -3,
//             width: 1,
//             background: "var(--page-warn)",
//           }}
//         />
//         <div
//           style={{
//             position: "absolute",
//             inset: 0,
//             width: trigger ? `${left}%` : "0%",
//             background:
//               "linear-gradient(90deg, var(--page-good), var(--page-good))",
//             borderRadius: 999,
//             transition: `width 1200ms cubic-bezier(.2,0,0,1) ${delay}ms`,
//           }}
//         />
//       </div>
//     </div>
//   )
// }

function MetricRow({ m }) {
  return (
    <div
      style={{
        padding: "12px 0",
        borderTop: "1px solid var(--page-line)",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "baseline",
      }}
    >
      <span style={{ fontSize: 14, fontWeight: 500 }}>{m.k}</span>
      <span
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 12,
          color: "var(--page-good)",
        }}
      >
        p = {m.p.toFixed(3)}
      </span>
    </div>
  )
}

window.Results = Results