const FeaturedTask = () => {
  const section = {
    borderBottom: "1px solid var(--line)",
    padding: "100px 0",
  };
  const wrap = { maxWidth: 1240, margin: "0 auto", padding: "0 28px" };
  const header = {
    display: "flex",
    alignItems: "flex-end",
    justifyContent: "space-between",
    marginBottom: 40,
    gap: 24,
    flexWrap: "wrap",
  };
  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: 44,
    fontWeight: 700,
    letterSpacing: "-0.025em",
    margin: 0,
    lineHeight: 1.05,
  };
  const lead = {
    fontSize: 16,
    color: "var(--muted)",
    marginTop: 14,
    maxWidth: 560,
  };
  const right = {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-end",
    gap: 12,
  };
  const status = {
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    padding: "6px 12px",
    border: "1px solid var(--accent-line)",
    background: "var(--accent-soft)",
    color: "var(--accent)",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    letterSpacing: "0.08em",
  };
  const dot = { width: 6, height: 6, borderRadius: 99, background: "var(--accent)", boxShadow: "0 0 8px var(--accent)" };

  const card = {
    border: "1px solid var(--line)",
    background: "var(--panel)",
  };
  const titleBar = {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "22px 28px",
    borderBottom: "1px solid var(--line)",
    background: "linear-gradient(180deg, rgba(74,222,128,0.04), transparent)",
  };
  const titleId = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 12,
    color: "var(--accent)",
    letterSpacing: "0.1em",
  };
  const title = {
    fontSize: 24,
    fontWeight: 700,
    letterSpacing: "-0.02em",
    marginTop: 6,
  };
  const titleSub = {
    fontSize: 14,
    color: "var(--muted)",
    marginTop: 4,
  };
  const periodTag = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    color: "var(--muted)",
    border: "1px solid var(--line-2)",
    padding: "4px 8px",
    letterSpacing: "0.06em",
  };

  const body = {
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
  };
  const block = (last) => ({
    padding: "28px",
    borderRight: last ? "none" : "1px solid var(--line)",
    borderBottom: "1px solid var(--line)",
  });
  const blockLast = (last) => ({
    padding: "28px",
    borderRight: last ? "none" : "1px solid var(--line)",
  });
  const blockLabel = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    color: "var(--muted)",
    letterSpacing: "0.1em",
    textTransform: "uppercase",
    marginBottom: 14,
    display: "flex",
    alignItems: "center",
    gap: 8,
  };
  const labelMark = {
    width: 14, height: 1, background: "var(--accent)",
  };
  const blockText = {
    fontSize: 14.5,
    color: "var(--text)",
    lineHeight: 1.7,
  };
  const scoreList = {
    listStyle: "none",
    padding: 0,
    margin: 0,
    display: "flex",
    flexDirection: "column",
    gap: 10,
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 13,
  };
  const scoreItem = {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "10px 14px",
    background: "rgba(255,255,255,0.02)",
    border: "1px solid var(--line)",
  };
  const scoreLabel = { color: "var(--text)" };
  const scoreNum = { color: "var(--accent)", fontWeight: 600 };

  const footer = {
    padding: "20px 28px",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 12,
    color: "var(--muted)",
    gap: 16,
    flexWrap: "wrap",
  };
  const link = {
    color: "var(--accent)",
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
  };

  const scores = [
    { l: "Correctness", v: "40%" },
    { l: "Latency", v: "20%" },
    { l: "Language coverage", v: "15%" },
    { l: "Diagnostics", v: "10%" },
    { l: "Sandbox / determinism", v: "5%" },
    { l: "Open-sourced engineering", v: "10%" },
  ];

  return (
    <section style={section} id="task" data-screen-label="Featured Task">
      <div style={wrap}>
        <div style={header}>
          <div>
            <div style={eyebrow}>// CURRENT TASK</div>
            <h2 style={h2}>Season 01 · one task,<br/>many solutions.</h2>
            <p style={lead}>Select a task to inspect the spec, acceptance criteria, and task leaderboard.</p>
          </div>
          <div style={right}>
            <span style={status}><span style={dot}></span>Live · 12 days left</span>
            <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted-2)" }}>Updated 2026-05-14 09:21</span>
          </div>
        </div>

        <div style={card}>
          <div style={titleBar}>
            <div>
              <div style={titleId}>GB-001 · Season 01</div>
              <div style={title}>Rust Fast Execution Engine</div>
              <div style={titleSub}>Build an interpreter-style execution engine that shortens the edit-to-run loop for common Rust development code.</div>
            </div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              <span style={periodTag}>Language · Rust</span>
              <span style={periodTag}>Type · Toolchain</span>
              <span style={periodTag}>Budget · ¥ in pool</span>
            </div>
          </div>

          <div style={body} className="ft-body">
            <style>{`@media (max-width: 900px){ .ft-body{ grid-template-columns: 1fr !important; } .ft-body > div{ border-right: none !important; } }`}</style>
            <div style={block(false)}>
              <div style={blockLabel}><span style={labelMark}></span>GOAL</div>
              <p style={blockText}>Reduce the wait between editing Rust code and seeing runtime feedback. Participants must build an engine that can directly execute common Rust programs, functions, and unit tests without triggering a full rebuild after every small change. It does not need to replace the Rust compiler, but it must define the supported subset clearly and make that subset genuinely useful for local iteration.</p>
            </div>
            <div style={block(true)}>
              <div style={blockLabel}><span style={labelMark}></span>DELIVERABLE</div>
              <p style={blockText}>A standalone CLI binary and reusable execution engine library. The tool must accept a single Rust file or a small Cargo workspace, run a selected entry function or test target, print stdout and diagnostics, cache reusable analysis across runs, and report unsupported language features with source locations instead of failing silently.</p>
            </div>
            <div style={blockLast(false)}>
              <div style={blockLabel}><span style={labelMark}></span>ACCEPTANCE</div>
              <p style={blockText}>The submitted binary must pass a hidden test suite covering arithmetic, control flow, functions, modules, structs, enums, pattern matching, Option and Result flows, strings, vectors, hash maps, panic handling, and unit tests. Warm runs must stay below a fixed latency budget on the evaluation machine. All execution must be offline, deterministic, timeout-limited, and memory-limited.</p>
            </div>
            <div style={blockLast(true)}>
              <div style={blockLabel}><span style={labelMark}></span>SCORING</div>
              <ul style={scoreList}>
                {scores.map((s, i) => (
                  <li key={i} style={scoreItem}>
                    <span style={scoreLabel}>{s.l}</span>
                    <span style={scoreNum}>{s.v}</span>
                  </li>
                ))}
              </ul>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted-2)", marginTop: 14 }}>
                Simple rustc or cargo wrappers without an independent execution path are not accepted.
              </div>
            </div>
          </div>

          <div style={footer}>
            <span>{"Submission · git push + evaluation script"}</span>
            <a style={link}>View full rules →</a>
          </div>
        </div>
      </div>
    </section>
  );
};
window.FeaturedTask = FeaturedTask;