// Task showcase: left = task index list, right = task detail panel.
const TaskShowcase = () => {
  const [sel, setSel] = React.useState(0);

  const TASKS = [
    {
      id: "GB-001",
      period: "Season 01",
      title: "Rust Fast Execution Engine",
      short: "Build an interpreter-style execution engine that closes the edit-to-run loop for everyday Rust code.",
      status: "active",
      deadline: "T-12d",
      bounty: "in pool",
      goal: "Cut the wait between editing Rust code and seeing it run. Submissions must execute everyday Rust programs, functions and unit tests directly — without re-triggering a full build on each tiny change.",
      deliverable: "A standalone CLI binary plus a reusable engine library. It must accept a single Rust file or a small Cargo workspace and run the specified entrypoint or test target.",
      acceptance: "Submissions must pass a hidden test suite covering arithmetic, control flow, functions, modules, structs, enums, pattern matching and more. Warm-start runs must stay under a fixed latency budget on the bench.",
      scoring: [
        { 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 },
      ],
      cmd: "gb run --task GB-001 --binary ./bench-rs --suite hidden",
      metrics: [
        { k: "TOP", v: "94.2" },
        { k: "MEDIAN", v: "87.4" },
        { k: "ENTRIES", v: "5" },
      ],
      claim: "Result: pass · rank #1",
      claimSub: "Polaris Lab / RustLoop VM",
    },
  ];

  const task = TASKS[sel];

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

  const split = { display: "grid", gridTemplateColumns: "320px 1fr", border: "1px solid var(--line)", background: "var(--panel)", minHeight: 640 };
  const leftPane = { borderRight: "1px solid var(--line)", display: "flex", flexDirection: "column" };
  const indexHeader = { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "24px 26px 22px", borderBottom: "1px solid var(--line)", fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--muted-2)", letterSpacing: "0.14em" };
  const counter = { display: "inline-flex", alignItems: "baseline", gap: 4, color: "var(--text)" };
  const counterNum = { fontSize: 14, color: "var(--text)", fontWeight: 600 };
  const counterDen = { fontSize: 11, color: "var(--muted-2)" };

  const taskItem = (active, last) => ({ padding: "26px 26px", borderBottom: last ? "none" : "1px solid var(--line)", cursor: "pointer", position: "relative", background: active ? "rgba(74,222,128,0.04)" : "transparent", transition: "background .15s" });
  const taskRow1 = { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 };
  const taskTag = (active) => ({ fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.14em", color: active ? "var(--accent)" : "var(--muted-2)" });
  const statusDot = (status) => ({ width: 7, height: 7, borderRadius: 99, background: status === "active" ? "var(--accent)" : "var(--muted-2)", boxShadow: status === "active" ? "0 0 8px var(--accent)" : "none", animation: status === "active" ? "pulse 2s ease-in-out infinite" : "none" });
  const taskTitle = (active) => ({ fontSize: 19, fontWeight: 700, letterSpacing: "-0.015em", color: active ? "var(--text)" : "var(--muted)", lineHeight: 1.2, marginBottom: 8, fontFamily: "Inter, sans-serif" });
  const taskDesc = (active) => ({ fontSize: 13, color: active ? "var(--muted)" : "var(--muted-2)", lineHeight: 1.5 });
  const activeMarker = { position: "absolute", left: 0, top: "50%", transform: "translateY(-50%)", width: 3, height: 36, background: "var(--accent)" };

  const rightPane = { display: "flex", flexDirection: "column" };
  const rightHeader = { padding: "24px 32px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 24, flexWrap: "wrap" };
  const rightTag = { fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em", marginBottom: 6 };
  const rightTitle = { fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", margin: 0, fontFamily: "Inter, sans-serif" };
  const metaRow = { display: "flex", gap: 28 };
  const metaCell = { display: "flex", flexDirection: "column", gap: 4 };
  const metaK = { fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "var(--muted-2)", letterSpacing: "0.12em", textTransform: "uppercase" };
  const metaV = { fontFamily: "JetBrains Mono, monospace", fontSize: 15, color: "var(--text)", fontWeight: 600 };

  const rightBody = { padding: "28px 32px", flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 };
  const blockLabel = { fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "var(--muted-2)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 12, display: "flex", alignItems: "center", gap: 8 };
  const labelMark = { width: 16, height: 1, background: "var(--accent)" };
  const blockText = { fontSize: 13.5, color: "var(--text)", lineHeight: 1.65 };

  const scoreBar = (pct, max = 40) => (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10, fontFamily: "JetBrains Mono, monospace", fontSize: 12 }}>
      <span style={{ flex: 1, color: "var(--text)" }}>{pct.l}</span>
      <div style={{ width: 80, height: 3, background: "rgba(255,255,255,0.06)", position: "relative" }}>
        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: `${(pct.v / max) * 100}%`, background: "var(--accent)" }}></div>
      </div>
      <span style={{ color: "var(--accent)", minWidth: 32, textAlign: "right" }}>{pct.v}%</span>
    </div>
  );

  const demoWrap = { margin: "0 32px 28px", border: "1px solid var(--line)", background: "rgba(0,0,0,0.4)", fontFamily: "JetBrains Mono, monospace" };
  const demoTop = { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", fontSize: 10, color: "var(--muted-2)", letterSpacing: "0.14em" };
  const demoCmd = { padding: "16px 18px", fontSize: 13, color: "var(--text)", borderBottom: "1px solid var(--line)", overflowX: "auto", whiteSpace: "nowrap" };
  const demoMetrics = { display: "grid", gridTemplateColumns: `repeat(${task.metrics.length}, 1fr)`, borderBottom: "1px solid var(--line)" };
  const demoMetric = (last) => ({ padding: "14px 18px", borderRight: last ? "none" : "1px solid var(--line)" });
  const claimRow = { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 18px", fontSize: 12, gap: 16 };

  return (
    <section style={section} id="task" data-screen-label="Task Showcase">
      <style>{`
        @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }
        @media (max-width: 880px) {
          .ts-split { grid-template-columns: 1fr !important; }
          .ts-split > .ts-left { border-right: none !important; border-bottom: 1px solid var(--line); }
          .ts-body { grid-template-columns: 1fr !important; }
          .ts-body > div { border-right: none !important; padding: 22px 0 !important; border-bottom: 1px dashed var(--line); }
        }
        @media (max-width: 760px) {
          .ts-wrap { padding: 0 20px !important; }
          .ts-heading-row { align-items: flex-start !important; }
          .ts-heading-row h2 { max-width: 100% !important; }
          .ts-split, .ts-left, .ts-right-pane, .ts-task-item, .ts-right-header, .ts-right-body { min-width: 0 !important; }
          .ts-index-header { padding: 18px 18px 16px !important; gap: 10px !important; }
          .ts-task-item { padding: 20px 18px !important; }
          .ts-task-row { align-items: flex-start !important; gap: 12px !important; }
          .ts-task-tag { white-space: normal !important; line-height: 1.35 !important; }
          .ts-task-title, .ts-task-desc, .ts-right-title, .ts-block-text { overflow-wrap: anywhere !important; }
          .ts-right-header { padding: 22px 20px !important; }
          .ts-meta-row { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
          .ts-meta-cell { min-width: 0 !important; }
          .ts-right-body { padding: 22px 20px !important; }
          .ts-demo { margin: 0 20px 22px !important; }
          .ts-demo-metrics { grid-template-columns: 1fr !important; }
          .ts-demo-metrics > div { border-right: none !important; border-bottom: 1px solid var(--line); }
          .ts-demo-metrics > div:last-child { border-bottom: none !important; }
          .ts-claim { align-items: flex-start !important; flex-direction: column !important; }
        }
      `}</style>
      <div style={wrap} className="ts-wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24 }} className="ts-heading-row">
          <div>
            <div style={eyebrow}>
              <span style={eyebrowBracket}>[</span>
              {"SEE A TASK"}
              <span style={eyebrowBracket}>]</span>
            </div>
            <h2 style={h2}>{"Each season, one task worth doing"}</h2>
            <p style={lead}>{"Browse the task spec, acceptance criteria and scoring weights, plus its leaderboard and a sample run."}</p>
          </div>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--muted-2)", letterSpacing: "0.08em" }}>
            {"Sample data · not official"}
          </div>
        </div>

        <div style={split} className="ts-split">
          <div style={leftPane} className="ts-left">
            <div style={indexHeader} className="ts-index-header">
              <span>{"TASK INDEX"}</span>
              <span style={counter}>
                <span style={counterNum}>{String(sel + 1).padStart(2, "0")}</span>
                <span style={counterDen}>/ {String(TASKS.length).padStart(2, "0")}</span>
              </span>
            </div>
            {TASKS.map((tk, i) => {
              const active = i === sel;
              return (
                <div key={tk.id} style={taskItem(active, i === TASKS.length - 1)} className="ts-task-item" onClick={() => setSel(i)} onMouseOver={(e) => !active && (e.currentTarget.style.background = "rgba(255,255,255,0.02)")} onMouseOut={(e) => !active && (e.currentTarget.style.background = "transparent")}>
                  {active && <div style={activeMarker}></div>}
                  <div style={taskRow1} className="ts-task-row">
                    <span style={taskTag(active)} className="ts-task-tag">TASK · {String(i + 1).padStart(2, "0")} · {tk.id}</span>
                    <span style={statusDot(tk.status)}></span>
                  </div>
                  <div style={taskTitle(active)} className="ts-task-title">{tk.title}</div>
                  <div style={taskDesc(active)} className="ts-task-desc">{tk.short}</div>
                </div>
              );
            })}
          </div>

          <div style={rightPane} className="ts-right-pane">
            <div style={rightHeader} className="ts-right-header">
              <div>
                <div style={rightTag}>{task.id} · {task.period}</div>
                <h3 style={rightTitle} className="ts-right-title">{task.title}</h3>
              </div>
              <div style={metaRow} className="ts-meta-row">
                <div style={metaCell} className="ts-meta-cell">
                  <span style={metaK}>{"STATUS"}</span>
                  <span style={{ ...metaV, color: task.status === "active" ? "var(--accent)" : "var(--muted)" }}>
                    {task.status === "active" ? "● ACTIVE" : "○ PLANNED"}
                  </span>
                </div>
                <div style={metaCell} className="ts-meta-cell">
                  <span style={metaK}>{"DEADLINE"}</span>
                  <span style={metaV}>{task.deadline}</span>
                </div>
                <div style={metaCell} className="ts-meta-cell">
                  <span style={metaK}>{"BOUNTY"}</span>
                  <span style={metaV}>{task.bounty}</span>
                </div>
              </div>
            </div>

            <div style={rightBody} className="ts-body ts-right-body">
              <div style={{ padding: "0 24px 24px 0", borderRight: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
                <div style={blockLabel}><span style={labelMark}></span>{"GOAL"}</div>
                <p style={blockText} className="ts-block-text">{task.goal}</p>
              </div>
              <div style={{ padding: "0 0 24px 24px", borderBottom: "1px solid var(--line)" }}>
                <div style={blockLabel}><span style={labelMark}></span>{"DELIVERABLE"}</div>
                <p style={blockText} className="ts-block-text">{task.deliverable}</p>
              </div>
              <div style={{ padding: "24px 24px 0 0", borderRight: "1px solid var(--line)" }}>
                <div style={blockLabel}><span style={labelMark}></span>{"ACCEPTANCE"}</div>
                <p style={blockText} className="ts-block-text">{task.acceptance}</p>
              </div>
              <div style={{ padding: "24px 0 0 24px" }}>
                <div style={blockLabel}><span style={labelMark}></span>{"SCORING"}</div>
                <div>
                  {task.scoring.map((s, i) => (
                    <React.Fragment key={i}>{scoreBar(s)}</React.Fragment>
                  ))}
                </div>
              </div>
            </div>

            <div style={demoWrap} className="ts-demo">
              <div style={demoTop}>
                <span>{`RUN PREVIEW · TASK ${task.id}`}</span>
                <span style={{ color: task.status === "active" ? "var(--accent)" : "var(--muted)" }}>
                  {task.status === "active" ? "● LIVE" : "○ STANDBY"}
                </span>
              </div>
              <div style={demoCmd}>
                <span style={{ color: "var(--muted-2)" }}>$ </span>
                <span style={{ color: "var(--accent)" }}>{task.cmd}</span>
              </div>
              <div style={demoMetrics} className="ts-demo-metrics">
                {task.metrics.map((m, i) => (
                  <div key={i} style={demoMetric(i === task.metrics.length - 1)}>
                    <div style={{ fontSize: 10, color: "var(--muted-2)", letterSpacing: "0.14em", marginBottom: 4 }}>{m.k}</div>
                    <div style={{ fontSize: 18, color: "var(--text)", fontWeight: 600 }}>{m.v}</div>
                  </div>
                ))}
              </div>
              <div style={claimRow} className="ts-claim">
                <div>
                  <div style={{ fontSize: 10, color: "var(--muted-2)", letterSpacing: "0.14em", marginBottom: 2 }}>{"CLAIM"}</div>
                  <div style={{ color: "var(--text)", fontSize: 13 }}>{task.claim}</div>
                  <div style={{ color: "var(--muted)", fontSize: 11, marginTop: 2 }}>{task.claimSub}</div>
                </div>
                <a style={{ color: "var(--accent)", fontSize: 12, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6 }}>
                  {`EXPLORE ${task.id} →`}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.TaskShowcase = TaskShowcase;