// ============================================================
// METHODOLOGY FLOW + CERTIFICATION TIERS
// ============================================================

function MethodologyFlow({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();
  const steps = [
    {
      n: "01",
      t: "Submission",
      d: "Vendor submits (or BRAINS selects) a system. We pin the exact version, weights, and configuration that's under test.",
      tag: "Open intake",
    },
    {
      n: "02",
      t: "Lived-experience review",
      d: "A panel drawn from the BRAINS Trust runs structured tasks across neurotype, reading + recording behaviour.",
      tag: "Trust-led",
    },
    {
      n: "03",
      t: "Quantitative tests",
      d: "Reproducible automated suites measure consistency, refusal patterns, sensory load, and access-need defaults.",
      tag: "Reproducible",
    },
    {
      n: "04",
      t: "Public scoring",
      d: "Scores, methodology, and raw evaluation transcripts are published. Vendors can respond on the record.",
      tag: "Open scoring",
    },
  ];
  return (
    <Section id="methodology-flow" theme={theme} padding="40px 0 120px" style={{ background: theme.surface }}>
      <window.Reveal>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 24 : 80, marginBottom: isMobile ? 36 : 64, alignItems: "end" }}>
        <div>
          <Eyebrow theme={theme}>How a system is tested</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(26px, 4.4vw, 56px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.3,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Four steps.
            <br />
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              Nothing hidden.
            </span>
          </h2>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540 }}>
          Every evaluation runs the same pipeline. If you can't reproduce a result with
          the published methodology and the published transcripts, the score doesn't
          ship.
        </p>
      </div>
      </window.Reveal>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr 1fr", gap: isMobile ? 14 : 16 }}>
        {steps.map((s, i) => (
          <window.Reveal key={s.n} delay={i * 110} style={{ display: "flex", flexDirection: "column" }}>
          <div
            key={s.n}
            style={{
              position: "relative",
              padding: "26px 22px 24px",
              background: theme.card,
              border: `1px solid ${theme.cardBorder}`,
              borderRadius: 14,
              minHeight: isMobile ? 0 : 240,
              display: "flex",
              flexDirection: "column",
            }}
          >
            {i < steps.length - 1 && (
              <svg
                style={{
                  position: "absolute",
                  right: -16,
                  top: "50%",
                  marginTop: -8,
                  zIndex: 1,
                  pointerEvents: "none",
                }}
                width="24"
                height="16"
                viewBox="0 0 24 16"
              >
                <path
                  d="M0 8h20M16 4l4 4-4 4"
                  stroke={theme.accent}
                  strokeWidth="1.5"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            )}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
              <span
                style={{
                  fontSize: 13,
                  fontFamily: "'JetBrains Mono', monospace",
                  color: theme.accent,
                  fontWeight: 600,
                  letterSpacing: 1,
                }}
              >
                {s.n}
              </span>
              <span
                style={{
                  fontSize: 10,
                  padding: "3px 8px",
                  borderRadius: 999,
                  background: theme.chip,
                  color: theme.chipText,
                  letterSpacing: 0.4,
                  fontFamily: "'JetBrains Mono', monospace",
                }}
              >
                {s.tag}
              </span>
            </div>
            <h4 style={{ fontSize: isMobile ? 17 : 19, fontWeight: 600, letterSpacing: -0.3, margin: "0 0 10px 0", color: theme.ink }}>
              {s.t}
            </h4>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: theme.sub, margin: 0 }}>
              {s.d}
            </p>
          </div>
          </window.Reveal>
        ))}
      </div>
    </Section>
  );
}

// ============================================================
// CERTIFICATION TIERS — Bronze / Silver / Gold badges
// ============================================================

function TierBadge({ tier, theme }) {
  // tier: { name, color, ring, ink, highlight } — visual tokens kept on the
  // tier card chrome; the medallion itself is now a designed asset.
  return (
    <div
      style={{
        position: "relative",
        width: 96,
        height: 96,
        flexShrink: 0,
      }}
    >
      <img
        src={`../assets/badges/${tier.name.toLowerCase()}.png`}
        alt={`BRAINS Certified ${tier.name} medallion`}
        style={{
          width: "100%",
          height: "100%",
          objectFit: "contain",
          display: "block",
        }}
      />
    </div>
  );
}

function CertificationSection({ theme }) {
  const { Section, Eyebrow, Placeholder } = window;
  const { isMobile } = window.useViewport();
  const tiers = [
    {
      name: "Bronze",
      color: "#a06937",
      highlight: "#d49c64",
      ring: "#caa17a",
      ink: "#3a2614",
      headline: "Meets the bar.",
      body: "The system clears minimum thresholds on Reliable, Affirming, and Inclusive criteria.",
      grants: ["Public listing on the leaderboard", "Right to display Bronze badge", "Re-evaluation every 12 months"],
      threshold: "≥ 70 in all three criteria",
    },
    {
      name: "Silver",
      color: "#8a98a8",
      highlight: "#c4cfde",
      ring: "#b0bdce",
      ink: "#1f2a3a",
      headline: "Meets and exceeds.",
      body: "Clears Bronze and demonstrably exceeds in at least one criterion. Stronger Trust review.",
      grants: ["Featured leaderboard placement", "Silver badge + co-marketing rights", "Re-evaluation every 9 months"],
      threshold: "≥ 80 overall · ≥ 90 in one criterion",
    },
    {
      name: "Gold",
      color: "#d4a73a",
      highlight: "#f5d97a",
      ring: "#e8c25b",
      ink: "#2a1f08",
      headline: "Exemplary across the board.",
      body: "The standard the rest of the field is measured against. Reviewed annually by the full BRAINS Trust.",
      grants: ["Top-of-leaderboard placement", "Gold badge + case-study collaboration", "Re-evaluation every 6 months"],
      threshold: "≥ 90 in every criterion",
    },
  ];
  return (
    <Section id="certification" theme={theme} padding="120px 0 80px">
      <window.Reveal>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 24 : 80, marginBottom: isMobile ? 36 : 64, alignItems: "end" }}>
        <div>
          <Eyebrow theme={theme}>Certification</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(26px, 4.4vw, 56px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.3,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Earn a tier.
            <br />
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              Show your work.
            </span>
          </h2>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540 }}>
          Systems that meet the bar earn a <strong style={{ color: theme.ink }}>BRAINS Certified</strong>{" "}
          tier (Bronze, Silver, or Gold) that they can display. Threshold definitions
          below are working drafts pending Trust ratification.
        </p>
      </div>
      </window.Reveal>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr", gap: isMobile ? 16 : 20 }}>
        {tiers.map((t, i) => (
          <window.Reveal key={t.name} delay={i * 110} style={{ display: "flex", flexDirection: "column" }}>
          <div
            key={t.name}
            style={{
              padding: isMobile ? "26px 22px" : "32px 28px",
              background: theme.card,
              border: `1px solid ${theme.cardBorder}`,
              borderRadius: 18,
              display: "flex",
              flexDirection: "column",
              gap: 22,
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
              <TierBadge tier={t} theme={theme} />
              <div style={{ minWidth: 0, flex: "1 1 160px" }}>
                <div
                  style={{
                    fontSize: 11,
                    letterSpacing: 1.4,
                    textTransform: "uppercase",
                    color: theme.mute,
                    fontWeight: 600,
                    fontFamily: "'JetBrains Mono', monospace",
                    marginBottom: 4,
                  }}
                >
                  BRAINS Certified · {t.name}
                </div>
                <h4
                  style={{
                    fontSize: isMobile ? 17 : 20,
                    fontWeight: 700,
                    letterSpacing: -0.4,
                    margin: 0,
                    color: theme.ink,
                    lineHeight: 1.15,
                    textWrap: "balance",
                  }}
                >
                  {t.headline}
                </h4>
              </div>
            </div>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: theme.sub, margin: 0 }}>
              {t.body}
            </p>
            <div
              style={{
                padding: "10px 14px",
                borderRadius: 8,
                background: theme.dark ? "rgba(0,0,0,0.25)" : "rgba(22,26,43,0.05)",
                fontSize: 12.5,
                fontFamily: "'JetBrains Mono', monospace",
                color: theme.sub,
                border: `1px solid ${theme.cardBorder}`,
              }}
            >
              Threshold · {t.threshold}
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
              {t.grants.map((g) => (
                <li key={g} style={{ fontSize: 13.5, color: theme.ink, display: "flex", alignItems: "flex-start", gap: 10 }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ marginTop: 4, flexShrink: 0 }}>
                    <path
                      d="M4 12l5 5L20 6"
                      stroke={theme.accent}
                      strokeWidth="2.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  {g}
                </li>
              ))}
            </ul>
          </div>
          </window.Reveal>
        ))}
      </div>
    </Section>
  );
}

window.MethodologyFlow = MethodologyFlow;
window.CertificationSection = CertificationSection;