// Regulatory deadline clock — countdown to EU AI Act + Colorado AI Act.
const { useState: useStateD, useEffect: useEffectD } = React;

function diff(target) {
  const now = Date.now();
  const ms = Math.max(0, target - now);
  const days = Math.floor(ms / 86400000);
  const hours = Math.floor((ms % 86400000) / 3600000);
  const mins = Math.floor((ms % 3600000) / 60000);
  const secs = Math.floor((ms % 60000) / 1000);
  return { days, hours, mins, secs };
}

function CountdownCell({ value, label }) {
  return (
    <div style={{ textAlign: "center" }}>
      <div className="mono" style={{
        fontSize: 38,
        fontWeight: 600,
        color: "var(--amber)",
        fontVariantNumeric: "tabular-nums",
        lineHeight: 1,
      }}>
        {String(value).padStart(2, "0")}
      </div>
      <div className="mono" style={{
        fontSize: 9,
        letterSpacing: "0.22em",
        color: "var(--text-faint)",
        textTransform: "uppercase",
        marginTop: 6,
      }}>{label}</div>
    </div>
  );
}

function DeadlineCard({ name, regulator, target, applies, penalty }) {
  const [t, setT] = useStateD(diff(target));
  useEffectD(() => {
    const id = setInterval(() => setT(diff(target)), 1000);
    return () => clearInterval(id);
  }, [target]);

  return (
    <div style={{
      border: "1px solid var(--line)",
      borderRadius: 8,
      padding: "24px 26px",
      background: "linear-gradient(180deg, rgba(20,16,8,0.5), rgba(8,8,10,0.6))",
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600 }}>{name}</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.1em", marginTop: 4 }}>
            {regulator}
          </div>
        </div>
        <div className="mono" style={{
          fontSize: 10,
          color: "var(--amber)",
          letterSpacing: "0.18em",
          border: "1px solid oklch(0.82 0.14 75 / 0.4)",
          padding: "3px 8px",
          borderRadius: 2,
        }}>
          ENFORCING
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, padding: "14px 0", borderTop: "1px dashed var(--line)", borderBottom: "1px dashed var(--line)" }}>
        <CountdownCell value={t.days}  label="days"/>
        <CountdownCell value={t.hours} label="hours"/>
        <CountdownCell value={t.mins}  label="minutes"/>
        <CountdownCell value={t.secs}  label="seconds"/>
      </div>
      <div style={{ marginTop: 14, fontSize: 13, color: "var(--text-dim)", lineHeight: 1.55 }}>
        <span style={{ color: "var(--text-faint)" }}>Applies to:</span> {applies}
      </div>
      <div className="mono" style={{ marginTop: 6, fontSize: 11, color: "oklch(0.70 0.18 25)" }}>
        Penalty: {penalty}
      </div>
    </div>
  );
}

function DeadlinesSection() {
  // Aug 2, 2026 — EU AI Act high-risk obligations enforcement milestone
  // Jun 1, 2026 — Colorado AI Act effective
  const eu = new Date("2026-08-02T00:00:00Z").getTime();
  const co = new Date("2026-06-01T00:00:00Z").getTime();

  return (
    <section id="deadlines" style={{ padding: "120px 28px", borderBottom: "1px solid var(--line)", position: "relative" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--text-faint)", textTransform: "uppercase", marginBottom: 16 }}>
          ▸ Regulatory clock
        </div>
        <h2 style={{ fontSize: 44, margin: "0 0 16px", letterSpacing: "-0.02em", fontWeight: 600, lineHeight: 1.08 }}>
          The clock is on.<br/>
          <span style={{ color: "var(--text-dim)" }}>Whether you've started or not.</span>
        </h2>
        <p style={{ fontSize: 16, color: "var(--text-dim)", maxWidth: 700, lineHeight: 1.65, margin: "0 0 40px" }}>
          High-risk obligations under the EU AI Act take effect August 2026.
          Colorado follows in June. Both require demonstrable, auditable
          governance over agentic systems — not policy decks.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
          <DeadlineCard
            name="EU AI Act"
            regulator="European Commission · enforcement begins"
            target={eu}
            applies="High-risk AI systems · agentic deployments touching EU users or data"
            penalty="up to €35M or 7% of global revenue"
          />
          <DeadlineCard
            name="Colorado AI Act"
            regulator="Colorado SB24-205 · effective"
            target={co}
            applies="Consequential decisions · employment, housing, finance, healthcare"
            penalty="up to $20K per violation per day"
          />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DeadlinesSection });