const Faq = () => {
  const items = [
    {
      q: "Are the leaderboard numbers real?",
      a: "What you see now is sample data, used to illustrate scoring dimensions and the leaderboard visual. Once Season 01 receives real submissions, the leaderboard switches to official results with full evaluation logs and reproducible replay scripts.",
    },
    {
      q: "How is this different from clone-style benchmarks?",
      a: "Clone-style benchmarks compare candidates against an existing reference implementation; success is imitation. Genesis Bench hides any reference during the season. Participants design the execution path, data structures, CLI and caching themselves — and ship a standalone, genuinely useful piece of new software.",
    },
    {
      q: "How does each season run?",
      a: "Each season ships 1–2 tasks with their scoring dimensions and weights. Any individual or team can sign up and build. Once the deadline hits, submissions go through automated evaluation, then independent reviewers assess code and diagnostic quality. Final scores publish to the leaderboard together.",
    },
    {
      q: "Where does the sponsorship money go?",
      a: "All sponsorship flows into the season prize pool, awarded to the top-scoring team or individual. Whatever remains pays for evaluation machines, reviewer honoraria, and the design and documentation of future tasks. Every distribution is published.",
    },
    {
      q: "Why are tools and search allowed?",
      a: "We care whether the final software is useful, standalone and maintainable. Participants can use any model, agent, editor, search engine, dependency or collaborator they like — those tools are part of the real environment software is built in. We judge results, not process purity.",
    },
    {
      q: "Why open-source on a delay?",
      a: "Keeping code private during the season ensures the leaderboard measures the participant's own creative work, not who copied first. Once a solution passes, the source must be released under a permissive license. Every season grows the open-source asset pool.",
    },
  ];

  const [open, setOpen] = React.useState(0);

  const section = {
    borderBottom: "1px solid var(--line)",
    padding: "100px 0",
    background: "var(--bg-2)",
  };
  const wrap = { maxWidth: 1240, margin: "0 auto", padding: "0 28px" };
  const eyebrow = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    color: "var(--accent)",
    letterSpacing: "0.12em",
    marginBottom: 12,
    textTransform: "uppercase",
  };
  const h2 = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 40,
    fontWeight: 700,
    letterSpacing: "-0.025em",
    margin: 0,
    lineHeight: 1.05,
  };
  const lead = {
    fontSize: 16,
    color: "var(--muted)",
    marginTop: 14,
    marginBottom: 48,
    maxWidth: 720,
  };

  const layout = {
    display: "grid",
    gridTemplateColumns: "1fr 1.6fr",
    gap: 48,
    alignItems: "flex-start",
  };
  const list = {
    border: "1px solid var(--line)",
    background: "var(--panel)",
  };
  const row = (active) => ({
    borderBottom: "1px solid var(--line)",
    background: active ? "rgba(74,222,128,0.03)" : "transparent",
  });
  const rowLast = (active) => ({
    background: active ? "rgba(74,222,128,0.03)" : "transparent",
  });
  const qBtn = {
    width: "100%",
    background: "transparent",
    border: "none",
    color: "var(--text)",
    textAlign: "left",
    padding: "22px 26px",
    cursor: "pointer",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 16,
    fontFamily: "inherit",
  };
  const qNum = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 12,
    color: "var(--muted-2)",
    letterSpacing: "0.1em",
    marginRight: 16,
    width: 28,
  };
  const qText = (active) => ({
    flex: 1,
    fontSize: 16,
    fontWeight: 600,
    letterSpacing: "-0.01em",
    color: active ? "var(--accent)" : "var(--text)",
  });
  const qIcon = (active) => ({
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 18,
    color: active ? "var(--accent)" : "var(--muted)",
    transition: "transform .2s",
    transform: active ? "rotate(45deg)" : "none",
    width: 18,
  });
  const aBody = {
    padding: "0 26px 24px",
    paddingLeft: 70,
    fontSize: 14.5,
    color: "var(--muted)",
    lineHeight: 1.7,
    maxWidth: 700,
  };

  return (
    <section style={section} id="faq" data-screen-label="FAQ">
      <div style={wrap}>
        <style>{`
          @media (max-width: 900px){
            .faq-layout{ grid-template-columns: 1fr !important; gap: 32px !important; }
            .faq-abody{ padding-left: 26px !important; }
          }
        `}</style>
        <div style={layout} className="faq-layout">
          <div>
            <div style={eyebrow}>// {"FAQ"}</div>
            <h2 style={h2}>{"Rules, scoring and prize details"}</h2>
            <p style={lead}>{"Didn\u2019t find your answer? Open an issue."}</p>
            <a style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 13, color: "var(--accent)", cursor: "pointer" }}>
              {"Read the full docs →"}
            </a>
          </div>
          <div style={list}>
            {items.map((it, i) => {
              const active = open === i;
              const last = i === items.length - 1;
              return (
                <div key={i} style={last ? rowLast(active) : row(active)}>
                  <button style={qBtn} onClick={() => setOpen(active ? -1 : i)}>
                    <span style={qNum}>{String(i + 1).padStart(2, "0")}</span>
                    <span style={qText(active)}>{it.q}</span>
                    <span style={qIcon(active)}>+</span>
                  </button>
                  {active && (
                    <div style={aBody} className="faq-abody">{it.a}</div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};
window.Faq = Faq;