// ─── TIMELINE TAB ─────────────────────────────────────────────────

function TimelineTab({ checked, toggle }) {
  return (
    <div style={{ padding: "0 20px" }}>
      {/* Fair callout */}
      <div style={{
        background: "var(--cream-warm)",
        borderLeft: "2px solid var(--gold)",
        padding: "18px 22px",
        marginBottom: 36,
      }}>
        <Eyebrow tone="gold">LAIS admissions fairs · pre-register, pick one</Eyebrow>
        <p className="serif" style={{
          margin: "10px 0 0",
          fontSize: 19,
          lineHeight: 1.45,
          color: "var(--ink)",
          fontWeight: 400,
        }}>
          <em style={{ fontStyle: "italic", color: "var(--forest)" }}>Apr 9</em> · Crossroads, Santa Monica
          &nbsp;&nbsp;·&nbsp;&nbsp;
          <em style={{ fontStyle: "italic", color: "var(--forest)" }}>Apr 23</em> · Buckley, Sherman Oaks
        </p>
      </div>

      {PHASES.map((phase, pi) => {
        const pDone = phase.tasks.filter(t => checked[t.id]).length;
        const complete = pDone === phase.tasks.length;
        const isLast = pi === PHASES.length - 1;

        return (
          <div key={phase.id} style={{ display: "flex", gap: 22, position: "relative" }}>
            {/* Rail */}
            <div style={{
              flexShrink: 0,
              width: 1,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              marginTop: 6,
              paddingBottom: isLast ? 0 : 6,
            }}>
              <div style={{
                width: 9, height: 9, borderRadius: "50%",
                background: complete ? "var(--forest)" : "var(--cream)",
                border: `1px solid ${complete ? "var(--forest)" : "var(--gold)"}`,
                boxShadow: complete ? "0 0 0 4px var(--cream-warm)" : "none",
                flexShrink: 0,
              }} />
              {!isLast && (
                <div style={{
                  flex: 1,
                  width: 1,
                  background: "var(--line)",
                  marginTop: 6,
                  minHeight: 30,
                }} />
              )}
            </div>

            {/* Content */}
            <div style={{ flex: 1, paddingBottom: 36 }}>
              <div style={{
                display: "flex",
                alignItems: "baseline",
                justifyContent: "space-between",
                gap: 12,
                marginBottom: 16,
                paddingBottom: 12,
                borderBottom: "1px solid var(--line)",
              }}>
                <div>
                  <Eyebrow tone="gold">{phase.dates}</Eyebrow>
                  <h3 className="serif" style={{
                    margin: "6px 0 0",
                    fontSize: 26,
                    fontWeight: 400,
                    lineHeight: 1.1,
                    color: complete ? "var(--forest)" : "var(--ink)",
                    letterSpacing: "-0.01em",
                  }}>{phase.label}</h3>
                </div>
                <span className="serif" style={{
                  fontSize: 14,
                  fontStyle: "italic",
                  color: complete ? "var(--forest)" : "var(--ink-3)",
                  whiteSpace: "nowrap",
                }}>{pDone} / {phase.tasks.length}</span>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {phase.tasks.map(task => (
                  <label key={task.id} style={{
                    display: "flex",
                    gap: 12,
                    alignItems: "flex-start",
                    cursor: "pointer",
                  }}>
                    <input
                      type="checkbox"
                      className="check"
                      checked={!!checked[task.id]}
                      onChange={() => toggle(task.id)}
                    />
                    <span style={{
                      fontSize: 14,
                      lineHeight: 1.65,
                      color: checked[task.id] ? "var(--ink-3)" : "var(--ink-2)",
                      textDecoration: checked[task.id] ? "line-through" : "none",
                    }}>{task.text}</span>
                  </label>
                ))}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.TimelineTab = TimelineTab;