// About section with an animated 3-step sequence flow.

// ---------- styles ----------
const aboutCSS = `
  @keyframes pulseDot {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.85); }
  }
  @keyframes flowDash {
    to { stroke-dashoffset: -24; }
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes barFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  .ab-flow-line { stroke-dasharray: 6 6; }
  .ab-flow-line.active { animation: flowDash 1.2s linear infinite; }
  .ab-stage { transition: background .25s, border-color .25s; }
  .ab-codeline { animation: fadeUp .35s both; }
  @media (max-width: 980px) {
    .ab-stages { grid-template-columns: 1fr !important; }
    .ab-stages .ab-arrow { display: none !important; }
  }
  .ab-mobile-tabs { display: none; }
  @media (max-width: 760px) {
    .ab-wrap { padding: 0 20px !important; }
    .ab-header { align-items: flex-start !important; }
    .ab-header-meta { text-align: left !important; }
    .ab-sequence-bar { display: none !important; }
    .ab-grid-wrap { padding: 38px 20px 22px !important; }
    .ab-stages .ab-stage { display: none !important; min-height: auto !important; padding: 24px 20px !important; }
    .ab-stages .ab-stage.active { display: flex !important; }
    .ab-counter { top: 12px !important; right: 16px !important; }
    .ab-mobile-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 16px;
    }
    .ab-footer-line {
      align-items: flex-start !important;
      flex-direction: column !important;
    }
  }
`;

const aboutS = {
  section: { borderBottom: "1px solid var(--line)", padding: "100px 0" },
  wrap: { maxWidth: 1280, margin: "0 auto", padding: "0 28px" },
  eyebrow: {
    display: "inline-flex", alignItems: "center", gap: 8,
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11, color: "var(--muted)",
    letterSpacing: "0.12em", marginBottom: 18, textTransform: "uppercase",
  },
  bracket: { color: "var(--accent)" },
  h2: {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 40, fontWeight: 700, letterSpacing: "-0.025em",
    margin: 0, lineHeight: 1.05,
  },
  lead: { fontSize: 17, color: "var(--muted)", marginTop: 18, marginBottom: 56, maxWidth: 720, lineHeight: 1.55 },
};

// ---------- subcomponents ----------
const AboutHeader = () => {
  return (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 40 }} className="ab-header">
    <div>
      <div style={aboutS.eyebrow}>
        <span style={aboutS.bracket}>[</span>
        {"HOW IT WORKS"}
        <span style={aboutS.bracket}>]</span>
      </div>
      <h2 style={aboutS.h2}>{"Not a clone. A "}<span style={{ color: "var(--accent)" }}>{"creation"}</span></h2>
      <p style={aboutS.lead}>{"Each season publishes tasks. Participants build from scratch with any tools or collaborators they want. Everything is scored by one rulebook; passing solutions must be open-sourced into an auditable, reusable software asset."}</p>
    </div>
    <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted)", textAlign: "right" }} className="ab-header-meta">
      <div style={{ color: "var(--muted-2)", letterSpacing: "0.14em", marginBottom: 6 }}>SEQUENCE · LIVE</div>
      <div style={{ color: "var(--text)" }}>STEP <span style={{ color: "var(--accent)" }}>auto</span> / 03</div>
    </div>
  </div>
  );
};

const SequenceBar = ({ steps, active, onStep, auto }) => {
  const barRow = {
    display: "flex", alignItems: "center",
    padding: "16px 24px",
    border: "1px solid var(--line)",
    background: "var(--panel)",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    gap: 14,
    marginBottom: 0,
    borderBottom: "none",
  };
  const stepBtn = (i) => ({
    flex: 1,
    display: "flex", alignItems: "center", gap: 8,
    cursor: "pointer", background: "transparent", border: "none",
    color: i === active ? "var(--accent)" : "var(--muted-2)",
    fontFamily: "inherit", fontSize: 11,
    letterSpacing: "0.14em",
    padding: 4,
  });
  const idx = {
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    width: 22, height: 22, borderRadius: 99,
    fontWeight: 700, fontSize: 11,
  };
  return (
    <div style={barRow} className="ab-sequence-bar">
      <span style={{ color: "var(--muted-2)", letterSpacing: "0.14em" }}>[ SEQUENCE · LIVE ]</span>
      <span style={{ flex: 1 }}></span>
      {steps.map((s, i) => (
        <button key={s.id} style={stepBtn(i)} onClick={() => onStep(i)}>
          <span style={{ ...idx, border: "1px solid " + (i === active ? "var(--accent)" : "var(--line-2)"), background: i === active ? "var(--accent-soft)" : "transparent" }}>
            {s.id}
          </span>
          {s.actor}
        </button>
      ))}
      <span style={{ color: auto ? "var(--accent)" : "var(--muted-2)", letterSpacing: "0.14em", marginLeft: 12 }}>
        {auto ? "● AUTO" : "○ MANUAL"}
      </span>
    </div>
  );
};

const SequenceGrid = ({ steps, active, onStep }) => {
  const wrap = {
    border: "1px solid var(--line)",
    borderTop: "none",
    background: "var(--panel)",
    padding: "44px 32px 32px",
    position: "relative",
  };
  const grid = {
    display: "grid",
    gridTemplateColumns: "1fr 80px 1fr 80px 1fr",
    alignItems: "stretch",
    gap: 0,
  };
  const stageBox = (i) => {
    const isActive = i === active;
    const isPast = i < active;
    return {
      padding: "26px 24px 24px",
      border: "1px solid " + (isActive ? "var(--accent-line)" : "var(--line)"),
      background: isActive ? "rgba(74,222,128,0.05)" : "rgba(255,255,255,0.012)",
      cursor: "pointer",
      position: "relative",
      display: "flex",
      flexDirection: "column",
      gap: 14,
      minHeight: 280,
      opacity: isPast ? 0.85 : 1,
    };
  };
  const stageHead = {
    display: "flex", alignItems: "center", justifyContent: "space-between",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11, letterSpacing: "0.14em",
  };
  const actorTag = (isActive) => ({
    color: isActive ? "var(--accent)" : "var(--muted-2)",
  });
  const stepNum = (isActive) => ({
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    color: isActive ? "var(--accent)" : "var(--muted-2)",
    border: "1px solid " + (isActive ? "var(--accent-line)" : "var(--line-2)"),
    padding: "2px 8px",
    background: isActive ? "var(--accent-soft)" : "transparent",
  });
  const title = (isActive) => ({
    fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em",
    fontFamily: "Inter, sans-serif",
    color: isActive ? "var(--text)" : "var(--muted)",
    lineHeight: 1.2,
  });
  const sub = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11, color: "var(--muted)",
  };
  const desc = (isActive) => ({
    fontSize: 13, color: isActive ? "var(--muted)" : "var(--muted-2)",
    lineHeight: 1.6,
  });
  const codeBlock = {
    marginTop: "auto",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11.5,
    padding: "12px 14px",
    background: "rgba(0,0,0,0.4)",
    border: "1px dashed var(--line-2)",
    lineHeight: 1.65,
    minHeight: 88,
  };

  // arrow component (svg)
  const Arrow = ({ live }) => (
    <div className="ab-arrow" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
      <svg width="60" height="20" viewBox="0 0 60 20">
        <line
          x1="2" y1="10" x2="48" y2="10"
          stroke={live ? "var(--accent)" : "var(--line-2)"}
          strokeWidth="1.5"
          className={"ab-flow-line " + (live ? "active" : "")}
        />
        <polygon points="48,4 58,10 48,16" fill={live ? "var(--accent)" : "var(--line-2)"} />
      </svg>
    </div>
  );

  // counter pill on top right
  const counterPill = {
    position: "absolute",
    top: 14, right: 18,
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    color: "var(--muted)",
    letterSpacing: "0.14em",
    display: "inline-flex",
    alignItems: "baseline",
    gap: 4,
  };

  return (
    <div style={wrap} className="ab-grid-wrap">
      <div style={counterPill} className="ab-counter">
        STEP <span style={{ color: "var(--accent)", fontWeight: 700, fontSize: 14 }}>{String(active + 1).padStart(2, "0")}</span> <span style={{ color: "var(--muted-2)" }}>/ 03</span>
      </div>
      <div style={grid} className="ab-stages">
        {steps.map((s, i) => {
          const isActive = i === active;
          return (
            <React.Fragment key={s.id}>
              <div className={"ab-stage " + (isActive ? "active" : "")} style={stageBox(i)} onClick={() => onStep(i)}>
                <div style={stageHead}>
                  <span style={actorTag(isActive)}>● {s.actor}</span>
                  <span style={stepNum(isActive)}>{s.id}</span>
                </div>
                <div style={title(isActive)}>{s.title}</div>
                <div style={sub}>{s.sub}</div>
                <div style={desc(isActive)}>{s.desc}</div>
                <div style={codeBlock}>
                  {s.code.map((line, j) => (
                    <div
                      key={isActive ? `a-${i}-${j}` : `s-${i}-${j}`}
                      className={isActive ? "ab-codeline" : ""}
                      style={{
                        animationDelay: isActive ? `${j * 0.08}s` : "0s",
                        color: line.startsWith("//") ? "var(--muted-2)" : (isActive ? "var(--text)" : "var(--muted-2)"),
                      }}
                    >
                      {line}
                    </div>
                  ))}
                </div>
              </div>
              {i < steps.length - 1 && <Arrow live={i === active} />}
            </React.Fragment>
          );
        })}
      </div>
      <MobileStepTabs steps={steps} active={active} onStep={onStep} />
      <FooterLine active={active} />
    </div>
  );
};

const MobileStepTabs = ({ steps, active, onStep }) => {
  const btn = (isActive) => ({
    minHeight: 42,
    border: "1px solid " + (isActive ? "var(--accent-line)" : "var(--line)"),
    background: isActive ? "var(--accent-soft)" : "transparent",
    color: isActive ? "var(--accent)" : "var(--muted)",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    letterSpacing: "0.08em",
    cursor: "pointer",
  });

  return (
    <div className="ab-mobile-tabs">
      {steps.map((s, i) => (
        <button key={s.id} style={btn(i === active)} onClick={() => onStep(i)}>
          {s.id} {s.actor}
        </button>
      ))}
    </div>
  );
};

const FooterLine = ({ active }) => {
  const msgs = [
    "// Rules and weights are published once and frozen at kickoff.",
    "// Use any tools or collaborators — results are judged, not process purity.",
    "// Once you pass, source must be released under a permissive license — irrevocably.",
  ];
  return (
    <div className="ab-footer-line" style={{
      marginTop: 24,
      padding: "14px 18px",
      border: "1px dashed var(--line)",
      fontFamily: "JetBrains Mono, monospace",
      fontSize: 12,
      color: "var(--muted)",
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      gap: 16,
    }}>
      <span style={{ color: "var(--accent)" }}>{msgs[active]}</span>
      <span style={{ color: "var(--muted-2)", letterSpacing: "0.1em" }}>ROUND · S01 GB-001</span>
    </div>
  );
};

const PullQuote = () => {
  return (
  <div style={{
    marginTop: 60,
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    border: "1px solid var(--line)",
    background: "var(--panel)",
  }} className="ab-pull">
    <style>{`@media (max-width: 880px){ .ab-pull{ grid-template-columns: 1fr !important; } .ab-pull > div:first-child{ border-right: none !important; border-bottom: 1px solid var(--line); } }`}</style>
    <div style={{ padding: 40, borderRight: "1px solid var(--line)" }}>
      <p style={{
        fontFamily: "JetBrains Mono, monospace",
        fontSize: 26, lineHeight: 1.35, letterSpacing: "-0.015em",
        color: "var(--text)", margin: 0,
      }}>
        {<>"Every solution that passes<br/>becomes <span style={{ color: "var(--accent)" }}>open-source software</span>."</>}
      </p>
      <div style={{ marginTop: 24, fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted)", letterSpacing: "0.08em" }}>
        {"— GENESIS BENCH CORE RULE"}
      </div>
    </div>
    <div style={{ padding: 40, display: "flex", flexDirection: "column", gap: 20 }}>
      <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--muted-2)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 4 }}>
        {"CORE PRINCIPLES"}
      </div>
      {[
        ["Meaningful",     "Every task solves a real software problem, not a toy benchmark question."],
        ["Prize Pool",  "All sponsorship flows into the season prize pool, rewarding the top-scoring team or individual."],
        ["Delayed OSS", "Code stays private during the run; after kickoff ends it must be published — the benchmark *is* the software asset."],
      ].map(([k, v], i, arr) => (
        <div key={i} style={{
          display: "flex", gap: 18,
          paddingBottom: i < arr.length - 1 ? 16 : 0,
          borderBottom: i < arr.length - 1 ? "1px dashed var(--line)" : "none",
        }}>
          <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--accent)", minWidth: 100, paddingTop: 2 }}>{k}</span>
          <span style={{ fontSize: 14, color: "var(--text)", lineHeight: 1.55 }}>{v}</span>
        </div>
      ))}
    </div>
  </div>
  );
};

// ---------- main ----------
const About = () => {
  const [active, setActive] = React.useState(0);
  const [auto, setAuto] = React.useState(true);
  const [timerResetKey, setTimerResetKey] = React.useState(0);

  const steps = [
    {
      id: "01", actor: "ORG",
      title: "Publish task",
      sub: "publishTask()",
      desc: "Each season publishes 1–2 tasks with their spec, acceptance criteria and scoring weights — the rules are open from day one.",
      code: ["// org.publishTask", "name: 'GB-001'", "weights: { correctness: .4, latency: .2 }", "acceptance: hiddenSuite"],
    },
    {
      id: "02", actor: "BUILDER",
      title: "Build & submit",
      sub: "submit(binary)",
      desc: "An individual or team uses any model, agent, editor or dependency to design and build a standalone, useful piece of software from scratch.",
      code: ["// builder.submit", "agent: 'claude-4.5 + tools'", "binary: ./bench-rs", "tests: passed (hidden)"],
    },
    {
      id: "03", actor: "BENCH",
      title: "Score & open-source",
      sub: "score() → opensource()",
      desc: "Scored by one rulebook into the leaderboard; passing solutions must be open-sourced into an auditable, reusable software asset.",
      code: ["// bench.score", "score: 94.2", "rank: #1", "release: MIT, public-repo"],
    },
  ];

  React.useEffect(() => {
    if (!auto) return;
    const id = setInterval(() => setActive(a => (a + 1) % steps.length), 2800);
    return () => clearInterval(id);
  }, [auto, steps.length, timerResetKey]);

  const onStep = (i) => {
    setActive(i);
    setAuto(true);
    setTimerResetKey(k => k + 1);
  };

  return (
    <section style={aboutS.section} id="about" data-screen-label="About">
      <style>{aboutCSS}</style>
      <div style={aboutS.wrap} className="ab-wrap">
        <AboutHeader />
        <SequenceBar steps={steps} active={active} onStep={onStep} auto={auto} />
        <SequenceGrid steps={steps} active={active} onStep={onStep} />
        <PullQuote />
      </div>
    </section>
  );
};

window.About = About;