// ============================================================
// WHY THIS MATTERS — three sourced stats with citation links
// ============================================================

function StatBlock({ figure, claim, sourceLabel, sourceHref, trendLabel, countTo, countPrefix, countSuffix, theme }) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: "32px 0 0",
        borderTop: `1px solid ${theme.cardBorder}`,
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "flex-end",
          gap: 14,
          flexWrap: "wrap",
          marginBottom: trendLabel ? 18 : 22,
        }}
      >
        <div
          style={{
            fontSize: "clamp(56px, 7vw, 96px)",
            fontWeight: 700,
            letterSpacing: -2.5,
            lineHeight: 0.9,
            color: theme.accent,
          }}
        >
          {countTo ? (
            <window.CountUp value={countTo} prefix={countPrefix || ""} suffix={countSuffix || ""} />
          ) : (
            figure
          )}
        </div>
        {trendLabel && (
          <div
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 6,
              padding: "5px 11px",
              borderRadius: 999,
              background: `${theme.accent}1a`,
              border: `1px solid ${theme.accent}55`,
              color: theme.accent,
              fontSize: 12,
              letterSpacing: 0.4,
              fontFamily: "'JetBrains Mono', 'SF Mono', ui-monospace, monospace",
              fontWeight: 600,
              marginBottom: 8,
            }}
          >
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden>
              <path
                d="M3 17 L9 11 L13 15 L21 7"
                stroke="currentColor"
                strokeWidth="2.4"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M15 7 L21 7 L21 13"
                stroke="currentColor"
                strokeWidth="2.4"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            {trendLabel}
          </div>
        )}
      </div>
      <p
        style={{
          fontSize: 18,
          lineHeight: 1.45,
          color: theme.ink,
          margin: "0 0 16px 0",
          fontWeight: 500,
          textWrap: "pretty",
        }}
      >
        {claim}
      </p>
      <a
        href={sourceHref}
        target="_blank"
        rel="noopener noreferrer"
        style={{
          fontSize: 12,
          color: theme.mute,
          letterSpacing: 0.3,
          fontFamily: "'JetBrains Mono', 'SF Mono', ui-monospace, monospace",
          textDecoration: "none",
          display: "inline-flex",
          alignItems: "center",
          gap: 6,
          transition: "color 200ms",
        }}
        onMouseEnter={(e) => (e.currentTarget.style.color = theme.accent)}
        onMouseLeave={(e) => (e.currentTarget.style.color = theme.mute)}
      >
        {sourceLabel}
        <span aria-hidden style={{ fontSize: 11 }}>↗</span>
      </a>
    </div>
  );
}

function WhySection({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();
  return (
    <Section id="why" theme={theme} padding="80px 0 120px" style={{ background: theme.surface }}>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 24 : 80, marginBottom: isMobile ? 40 : 72, alignItems: "end" }}>
        <window.Reveal>
          <Eyebrow theme={theme}>Why this matters</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(28px, 4.6vw, 64px)",
              lineHeight: 1,
              fontWeight: 700,
              letterSpacing: -1.4,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Most AI is evaluated for the{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              neurotypical mind.
            </span>
          </h2>
        </window.Reveal>
        <window.Reveal delay={120}>
        <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540, textWrap: "pretty" }}>
          That leaves a fifth of humanity outside the test set, and the stakes of
          getting that test set wrong are not abstract. Every figure below links to
          its source.
        </p>
        </window.Reveal>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr", gap: isMobile ? 24 : 40 }}>
        <window.Reveal delay={0}>
          <StatBlock
            figure="1 in 5"
            claim="people are neurodivergent."
            sourceLabel="Doyle, N. (2020). Br Med Bull."
            sourceHref="https://pmc.ncbi.nlm.nih.gov/articles/PMC7732033/"
            theme={theme}
          />
        </window.Reveal>
        <window.Reveal delay={130}>
          <StatBlock
            figure="13×"
            countTo={13}
            countSuffix="×"
            claim="more likely autistic women are to die by suicide."
            sourceLabel="Hirvikoski et al. (2016). Br J Psychiatry, 208(3)."
            sourceHref="https://doi.org/10.1192/bjp.bp.114.160192"
            theme={theme}
          />
        </window.Reveal>
        <window.Reveal delay={260}>
          <StatBlock
            figure="14%"
            countTo={14}
            countSuffix="%"
            trendLabel="and rising"
            claim="of autistic adults report using AI chatbots to process negative thoughts."
            sourceLabel="arXiv:2503.17504 (2025)."
            sourceHref="https://arxiv.org/html/2503.17504v1"
            theme={theme}
          />
        </window.Reveal>
      </div>
    </Section>
  );
}

window.WhySection = WhySection;