// Regulatory wave timeline section
function Wave({ t }) {
  const narrow = window.useNarrow(768);
  const events = t.events;
  return (
    <Section id="regulation">
      <SectionHead
        kicker={t.kicker}
        title={<>{t.title_a} <em style={{ fontStyle: "italic", color: "var(--accent)" }}>{t.title_b}</em></>}
        sub={t.sub}
      />
      {narrow ? (
        <div style={{ marginTop: 28, display: "flex", flexDirection: "column" }}>
          {events.map((e, i) => (
            <Event key={i} e={e} compact first={i === 0} />
          ))}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 16, marginTop: 20, fontSize: 10, color: "var(--ink-3)" }}>
            <LegendDot color="var(--accent)" label="Yürürlükte / Live"/>
            <LegendDot color="var(--ink-2)" label="Yaklaşıyor / Approaching"/>
            <LegendDot color="var(--rule)" label="Gelecek / Future"/>
          </div>
        </div>
      ) : (
      <div style={{
        position: "relative",
        marginTop: 48,
        paddingBottom: 24,
      }}>
        {/* spine */}
        <div style={{
          position: "absolute", left: 0, right: 0, top: 60,
          height: 1, background: "var(--rule)",
        }}/>
        <div style={{
          display: "grid",
          gridTemplateColumns: `repeat(${events.length}, minmax(0, 1fr))`,
          gap: 20,
        }}>
          {events.map((e, i) => (
            <Event key={i} e={e} compact={false} />
          ))}
        </div>

        {/* legend */}
        <div style={{ display: "flex", gap: 24, marginTop: 32, fontSize: 11, color: "var(--ink-3)" }}>
          <LegendDot color="var(--accent)" label="Yürürlükte / Live"/>
          <LegendDot color="var(--ink-2)" label="Yaklaşıyor / Approaching"/>
          <LegendDot color="var(--rule)" label="Gelecek / Future"/>
        </div>
      </div>
      )}
    </Section>
  );
}

function Event({ e, compact, first }) {
  if (compact) {
    const isLive = e.state === "live";
    const isSoon = e.state === "soon";
    return (
      <div style={{ padding: "20px 0", borderTop: first ? "none" : "1px solid var(--rule-2)" }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{e.date}</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 6, marginBottom: 8, flexWrap: "wrap" }}>
          <span className="mono" style={{
            fontSize: 9.5, padding: "2px 6px",
            background: isLive ? "var(--accent-soft)" : isSoon ? "var(--bg-2)" : "var(--bg)",
            color: isLive ? "var(--accent)" : "var(--ink-2)",
            border: `1.5px solid ${isLive ? "var(--accent)" : isSoon ? "var(--ink-2)" : "var(--rule)"}`,
            borderRadius: 3, letterSpacing: "0.06em",
          }}>{e.code}</span>
          <span className="mono" style={{ fontSize: 9, color: "var(--ink-3)", textTransform: "uppercase" }}>{e.state === "live" ? "Live" : e.state === "soon" ? "Soon" : "Future"}</span>
        </div>
        <h3 className="serif" style={{
          fontSize: 20, lineHeight: 1.2, margin: "0 0 6px",
          fontWeight: 400, letterSpacing: "-0.01em",
        }}>{e.title}</h3>
        <p style={{ margin: 0, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5 }}>{e.note}</p>
      </div>
    );
  }
  const isLive = e.state === "live";
  const isSoon = e.state === "soon";
  return (
    <div style={{ position: "relative", paddingTop: 88 }}>
      {/* node */}
      <div style={{
        position: "absolute", top: 53, left: 0,
        width: 14, height: 14, borderRadius: isLive || isSoon ? "50%" : 0,
        background: isLive ? "var(--accent)" : isSoon ? "var(--ink)" : "var(--bg)",
        border: isLive ? "3px solid var(--accent)" : isSoon ? "3px solid var(--ink)" : "1.5px solid var(--rule)",
        boxShadow: isLive ? "0 0 0 4px var(--accent-soft)" : "none",
      }}/>
      <div className="mono" style={{
        position: "absolute", top: 0, left: 0,
        fontSize: 10.5, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase",
      }}>{e.date}</div>
      <div className="mono" style={{
        position: "absolute", top: 22, left: 0,
        fontSize: 10, padding: "2px 6px",
        background: isLive ? "var(--accent-soft)" : "var(--bg-2)",
        color: isLive ? "var(--accent)" : "var(--ink-2)",
        borderRadius: 3, letterSpacing: "0.06em",
        display: "inline-block",
      }}>{e.code}</div>

      <h3 className="serif" style={{
        fontSize: 22, lineHeight: 1.15, margin: "0 0 8px",
        fontWeight: 400, letterSpacing: "-0.01em",
        color: isLive ? "var(--ink)" : isSoon ? "var(--ink)" : "var(--ink-3)",
      }}>{e.title}</h3>
      <p style={{ margin: 0, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5 }}>{e.note}</p>
    </div>
  );
}

function LegendDot({ color, label }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
      <i style={{ width: 8, height: 8, borderRadius: "50%", background: color }}/>
      <span className="mono" style={{ letterSpacing: "0.04em" }}>{label}</span>
    </span>
  );
}

window.Wave = Wave;