window.SectionTimeline = () => {
  const { Section, Card, Tag } = window.BITSUI;
  const { Clock, Flag, Spark } = window.BITSIcons;
  const [hovered, setHovered] = React.useState(null);
  const paletteVersion = window.BITSPaletteHook();

  // Read live palette hex values so bars repaint on palette change.
  const getHex = React.useCallback((name) => {
    const v = getComputedStyle(document.documentElement)
      .getPropertyValue(`--c-${name}-hex`)
      .trim();
    return v || "#002855";
  }, []);
  const colorMap = React.useMemo(
    () => ({
      deep: getHex("deep"),
      navy: getHex("navy"),
      gold: getHex("gold"),
      goldDeep: getHex("goldDeep"),
      mist: getHex("mist"),
      line: getHex("line"),
      ink: getHex("ink"),
      cream: getHex("cream"),
      steel: getHex("steel"),
    }),
    [paletteVersion, getHex]
  );

  // Three-anchor delivery:
  //   MVP — Jul 1, 2026   (W10)
  //   RFP complete — Sep 1, 2026   (W18)
  //   Additional features — Oct 1, 2026   (W22)
  const weeks = [
    { label: "W1", range: "Apr 27" },
    { label: "W2", range: "May 4" },
    { label: "W3", range: "May 11" },
    { label: "W4", range: "May 18" },
    { label: "W5", range: "May 25" },
    { label: "W6", range: "Jun 1" },
    { label: "W7", range: "Jun 8" },
    { label: "W8", range: "Jun 15" },
    { label: "W9", range: "Jun 22" },
    { label: "W10", range: "Jun 29" },
    { label: "W11", range: "Jul 6" },
    { label: "W12", range: "Jul 13" },
    { label: "W13", range: "Jul 20" },
    { label: "W14", range: "Jul 27" },
    { label: "W15", range: "Aug 3" },
    { label: "W16", range: "Aug 10" },
    { label: "W17", range: "Aug 17" },
    { label: "W18", range: "Aug 24" },
    { label: "W19", range: "Aug 31" },
    { label: "W20", range: "Sep 7" },
    { label: "W21", range: "Sep 14" },
    { label: "W22", range: "Sep 21" },
  ];

  const lanes = [
    { name: "System Design", sub: "schema, API surface, architecture" },
    { name: "UI/UX Design", sub: "flows, visual system, handoff" },
    { name: "Backend Engineering", sub: "14 RFP modules + added features" },
    { name: "App Development", sub: "React Native, 65 screens" },
    { name: "Admin App Development", sub: "Next.js web admin" },
    { name: "QA", sub: "ongoing test + UAT + regression" },
    { name: "Deployment", sub: "infra setup + launch hardening" },
  ];

  // Single-color bars. Variants (solid vs light) only used for multi-phase lanes.
  const bars = [
    // 0 · System Design — W1–W2
    { lane: 0, start: 0, span: 2, label: "System design sprint" },

    // 1 · UI/UX Design — W1–W3 (parallel with system design)
    { lane: 1, start: 0, span: 3, label: "Flows + visual system + prototype handoff" },

    // 2 · Backend Engineering — W2–W22 (starts after system design)
    { lane: 2, start: 1, span: 21, label: "Backend build — RFP modules + added features" },

    // 3 · App Development — W3–W22 (starts after UI/UX)
    { lane: 3, start: 2, span: 20, label: "React Native build — 65 screens + added flows" },

    // 4 · Admin App Development — W3–W18
    { lane: 4, start: 2, span: 16, label: "Admin web build + moderation + analytics" },

    // 5 · QA — W1–W22 (ongoing)
    { lane: 5, start: 0, span: 22, label: "Ongoing QA — automated + manual + UAT at every gate" },

    // 6 · Deployment — setup W1 + hardening W20–W22
    { lane: 6, start: 0, span: 1, label: "Infra + CI/CD setup" },
    { lane: 6, start: 19, span: 3, label: "Prod hardening + launch" },
  ];

  // Dimensions
  const colW = 66;
  const laneH = 42;
  const headerH = 48;
  const leftW = 210;
  const W = leftW + weeks.length * colW;
  const H = headerH + lanes.length * laneH + 16;

  const anchors = [
    { x: 10, label: "MVP · Jul 1" },
    { x: 18, label: "RFP · Sep 1" },
    { x: 22, label: "Added · Oct 1" },
  ];

  return (
    <Section
      id="timeline"
      eyebrow="Timeline"
      title={<>Three delivery anchors. Twenty-two weeks of build.</>}
      kicker="MVP is the critical-path RFP, shipped by Jul 1 for BITSian Day. The rest of the RFP is fully delivered by Sep 1. Every additional feature we've promised — AI moments, Discover Map, Marketplace, Life Event Graph, Wrapped — is live by Oct 1."
    >
      <Card className="lg:col-span-12 overflow-hidden">
        <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
          <div className="flex flex-wrap items-center gap-4">
            {anchors.map((a, i) => (
              <div
                key={i}
                className="flex items-center gap-1.5 text-[11.5px] text-bits-steel"
              >
                <span
                  className="w-2 h-2 rounded-full bg-bits-gold"
                />
                <span className="font-semibold text-bits-ink">{a.label}</span>
              </div>
            ))}
          </div>
          <Tag tone="gold">
            <Clock width="12" height="12" /> 22 weeks build
          </Tag>
        </div>

        <div className="scroll-x overflow-x-auto">
          <svg width={W} height={H} className="block">
            {/* Header */}
            <g>
              <rect x={0} y={0} width={leftW} height={headerH} fill={colorMap.cream} />
              {weeks.map((w, i) => {
                const isHero =
                  w.label === "W10" || w.label === "W18" || w.label === "W22";
                return (
                  <g key={i}>
                    <rect
                      x={leftW + i * colW}
                      y={0}
                      width={colW}
                      height={headerH}
                      fill={isHero ? colorMap.gold : colorMap.cream}
                      opacity={isHero ? 0.22 : 1}
                    />
                    <text
                      x={leftW + i * colW + colW / 2}
                      y={20}
                      textAnchor="middle"
                      style={{
                        font: "600 11.5px Montserrat",
                        letterSpacing: "0.04em",
                        fill: colorMap.ink,
                      }}
                    >
                      {w.label}
                    </text>
                    <text
                      x={leftW + i * colW + colW / 2}
                      y={37}
                      textAnchor="middle"
                      style={{
                        font: "500 9.5px Montserrat",
                        fill: colorMap.steel,
                      }}
                    >
                      {w.range}
                    </text>
                  </g>
                );
              })}

              {/* Anchor dividers */}
              {anchors.map((d, i) => (
                <line
                  key={i}
                  x1={leftW + d.x * colW}
                  y1={0}
                  x2={leftW + d.x * colW}
                  y2={H}
                  stroke={colorMap.goldDeep}
                  strokeDasharray="4 3"
                  strokeWidth={1.4}
                />
              ))}
            </g>

            {/* Lanes */}
            {lanes.map((lane, li) => {
              const y = headerH + li * laneH;
              return (
                <g key={li}>
                  <rect
                    x={0}
                    y={y}
                    width={W}
                    height={laneH}
                    fill={li % 2 === 0 ? "#FFFFFF" : colorMap.cream}
                    opacity={li % 2 === 0 ? 1 : 0.5}
                  />
                  <line
                    x1={0}
                    y1={y + laneH}
                    x2={W}
                    y2={y + laneH}
                    stroke={colorMap.line}
                    strokeWidth={1}
                  />
                  <text
                    x={14}
                    y={y + 19}
                    style={{ font: "600 12.5px Montserrat", fill: colorMap.ink }}
                  >
                    {lane.name}
                  </text>
                  <text
                    x={14}
                    y={y + 33}
                    style={{ font: "400 10.5px Montserrat", fill: colorMap.steel }}
                  >
                    {lane.sub}
                  </text>
                </g>
              );
            })}

            {/* Bars — single color across lanes */}
            {bars.map((b, bi) => {
              const x = leftW + b.start * colW + 3;
              const y = headerH + b.lane * laneH + 9;
              const w = b.span * colW - 6;
              const h = laneH - 18;
              const active = hovered === bi;
              return (
                <g
                  key={bi}
                  onMouseEnter={() => setHovered(bi)}
                  onMouseLeave={() => setHovered(null)}
                  style={{ cursor: "pointer" }}
                >
                  <rect
                    x={x}
                    y={y}
                    width={w}
                    height={h}
                    rx={7}
                    fill={colorMap.deep}
                    opacity={active ? 1 : 0.92}
                    stroke={active ? colorMap.goldDeep : "transparent"}
                    strokeWidth={1.5}
                  />
                  <text
                    x={x + 9}
                    y={y + h / 2 + 3.5}
                    style={{
                      font: "600 10.5px Montserrat",
                      fill: "#FFFFFF",
                      pointerEvents: "none",
                    }}
                  >
                    {b.label}
                  </text>
                </g>
              );
            })}

          </svg>
        </div>

        {hovered !== null && (
          <div className="mt-4 p-4 rounded-lg bg-bits-cream border border-bits-gold/30 fade-in">
            <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-bits-goldDeep mb-1">
              <Spark width="14" height="14" /> Workstream detail
            </div>
            <div className="text-[14px] text-bits-ink font-semibold">
              {bars[hovered].label}
            </div>
            <div className="text-[12.5px] text-bits-steel">
              {lanes[bars[hovered].lane].name} · weeks{" "}
              {bars[hovered].start + 1}–{bars[hovered].start + bars[hovered].span}
            </div>
          </div>
        )}
      </Card>

      <div className="grid md:grid-cols-3 gap-4 mt-6">
        {[
          {
            date: "Jul 1, 2026",
            label: "MVP · BITSian Day ready",
            body:
              "Critical-path RFP live. App store approved. Core social, directory, messaging, jobs, events, academics, admin. AlmaConnect + Almabase migration in progress.",
          },
          {
            date: "Sep 1, 2026",
            label: "Entire RFP delivered",
            body:
              "Every module listed in the BITSAA brief shipped — parent flows, fees, payroll, HR, fundraising, CMS, moderation, analytics, WhatsApp help bot, BITSian Day heatmap, Deals, FAQ/Support, faculty booking, document vault. AlmaConnect + Almabase migration complete.",
          },
          {
            date: "Oct 1, 2026",
            label: "Additional features live",
            body:
              "11 AI moments wired in. Discover Map, Marketplace, Life Event Graph, BITSians Wrapped — all live. The app crosses from 'parity' to 'category-defining'.",
          },
        ].map((m, i) => (
          <Card key={i} className="flex items-start gap-4">
            <div className="w-10 h-10 rounded-lg bg-bits-gold/15 text-bits-goldDeep flex items-center justify-center shrink-0">
              <Flag width="18" height="18" />
            </div>
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-bits-goldDeep">
                {m.date}
              </div>
              <div className="text-[14.5px] font-semibold text-bits-ink">
                {m.label}
              </div>
              <p className="text-[12.5px] text-bits-steel mt-1.5 leading-relaxed">
                {m.body}
              </p>
            </div>
          </Card>
        ))}
      </div>
    </Section>
  );
};