const Tasks = () => {
  const tasks = [
    {
      id: "GB-001",
      title: "Rust Fast Execution Engine",
      desc: "Build an interpreter-style execution engine that shortens the edit-to-run loop for common Rust development code.",
      status: "active",
      period: "Season 01",
      submissions: 5,
      bounty: "in pool",
      deadline: "T-12d",
    },
    {
      id: "GB-002",
      title: "Local Structured Notes Search",
      desc: "A local-only semantic search and cross-document extraction tool for Markdown notes.",
      status: "planned",
      period: "Season 02",
      submissions: 0,
      bounty: "seeking sponsor",
      deadline: "TBD",
    },
    {
      id: "GB-003",
      title: "Heterogeneous Data Merger",
      desc: "Merge small CSV, JSON, and SQLite sources into one consistent schema while preserving source lineage.",
      status: "planned",
      period: "Season 03",
      submissions: 0,
      bounty: "seeking sponsor",
      deadline: "TBD",
    },
  ];

  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: 44,
    fontWeight: 700,
    letterSpacing: "-0.025em",
    margin: 0,
    lineHeight: 1.05,
  };
  const lead = {
    fontSize: 16,
    color: "var(--muted)",
    marginTop: 14,
    marginBottom: 48,
    maxWidth: 560,
  };

  const grid = {
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gap: 0,
    border: "1px solid var(--line)",
    background: "var(--panel)",
  };
  const card = (active, last) => ({
    padding: 28,
    borderRight: last ? "none" : "1px solid var(--line)",
    position: "relative",
    display: "flex",
    flexDirection: "column",
    gap: 14,
    background: active ? "linear-gradient(180deg, rgba(74,222,128,0.05), transparent)" : "transparent",
    cursor: "pointer",
    transition: "background .2s",
  });

  const idLine = {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 8,
  };
  const idLabel = (active) => ({
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    color: active ? "var(--accent)" : "var(--muted-2)",
    letterSpacing: "0.12em",
  });
  const statusBadge = (active) => ({
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 10,
    letterSpacing: "0.1em",
    padding: "3px 8px",
    color: active ? "var(--accent)" : "var(--muted)",
    border: "1px solid " + (active ? "var(--accent-line)" : "var(--line)"),
    background: active ? "var(--accent-soft)" : "transparent",
    textTransform: "uppercase",
  });
  const title = {
    fontSize: 22,
    fontWeight: 700,
    color: "var(--text)",
    letterSpacing: "-0.02em",
    lineHeight: 1.15,
  };
  const desc = {
    fontSize: 13.5,
    color: "var(--muted)",
    lineHeight: 1.6,
    minHeight: 64,
  };
  const meta = {
    display: "grid",
    gridTemplateColumns: "1fr 1fr 1fr",
    gap: 12,
    marginTop: 12,
    paddingTop: 16,
    borderTop: "1px dashed var(--line)",
  };
  const metaK = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 10,
    color: "var(--muted-2)",
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    marginBottom: 4,
  };
  const metaV = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 14,
    color: "var(--text)",
    fontWeight: 600,
  };
  const cta = {
    marginTop: 12,
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 12,
    color: "var(--accent)",
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
  };

  return (
    <section style={section} id="tasks" data-screen-label="Tasks">
      <div style={wrap}>
        <style>{`
          @media (max-width: 900px) {
            .tasks-grid{ grid-template-columns: 1fr !important; }
            .tasks-grid > div{ border-right: none !important; border-bottom: 1px solid var(--line) !important; }
            .tasks-grid > div:last-child{ border-bottom: none !important; }
          }
        `}</style>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 36 }}>
          <div>
            <div style={eyebrow}>// TASK LIST</div>
            <h2 style={h2}>Current and future<br/>task overview.</h2>
            <p style={lead}>Season 01 starts with one task. Select a task to inspect the spec, acceptance criteria, and task leaderboard.</p>
          </div>
          <a style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 13, color: "var(--accent)", cursor: "pointer" }}>
            Propose a new task →
          </a>
        </div>

        <div style={grid} className="tasks-grid">
          {tasks.map((t, i) => {
            const active = t.status === "active";
            return (
              <div key={t.id} style={card(active, i === tasks.length - 1)}>
                <div style={idLine}>
                  <span style={idLabel(active)}>{t.id} · {t.period}</span>
                  <span style={statusBadge(active)}>{active ? "● ACTIVE" : "○ PLANNED"}</span>
                </div>
                <div style={title}>{t.title}</div>
                <div style={desc}>{t.desc}</div>
                <div style={meta}>
                  <div>
                    <div style={metaK}>Submissions</div>
                    <div style={metaV}>{t.submissions}</div>
                  </div>
                  <div>
                    <div style={metaK}>Bounty</div>
                    <div style={metaV}>{t.bounty}</div>
                  </div>
                  <div>
                    <div style={metaK}>Deadline</div>
                    <div style={metaV}>{t.deadline}</div>
                  </div>
                </div>
                <div style={cta}>
                  {active ? "View task details →" : "Awaiting kickoff →"}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};
window.Tasks = Tasks;