// "Usual vs Autonomous" — animated comparison
const Comparison = () => {
  const [online, setOnline] = React.useState(true);
  React.useEffect(() => {
    // gentle auto-toggle to show the point
    const t = setInterval(() => setOnline(p => !p), 4500);
    return () => clearInterval(t);
  }, []);

  const Box = ({ kind }) => {
    const isAuto = kind === "auto";
    const works = isAuto ? true : online;
    return (
      <div style={{
        background: isAuto ? "var(--ink-2)" : "var(--surface)",
        color: isAuto ? "#EEF3FA" : "var(--ink)",
        border: isAuto ? "1px solid var(--ink-2)" : "1px solid var(--line-2)",
        borderRadius: 22,
        padding: 28,
        display: "flex", flexDirection: "column",
        minHeight: 430,
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div className="label" style={{ color: isAuto ? "rgba(238,243,250,0.6)" : "var(--muted)" }}>
            {isAuto ? "РазумДом · Автоном" : "Обычный умный дом"}
          </div>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "4px 10px", borderRadius: 999,
            background: works ? (isAuto ? "var(--accent)" : "var(--good)") : "var(--warn)",
            color: "#fff",
            fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.06em",
            textTransform: "uppercase",
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 99, background: "#fff" }} />
            {works ? "Работает" : "Не работает"}
          </span>
        </div>

        <h3 className="h-card" style={{ marginTop: 14, fontSize: 26, color: isAuto ? "#EEF3FA" : "var(--ink-2)" }}>
          {isAuto ? "Сервер у вас дома" : "Через облако в интернете"}
        </h3>

        {/* Diagram */}
        <div style={{ marginTop: 28, flex: 1, position: "relative" }}>
          <svg viewBox="0 0 240 220" style={{ width: "100%", height: "auto" }}>
            {/* Houses */}
            <g>
              <rect x="14" y="160" width="64" height="44" rx="4"
                fill={isAuto ? "rgba(238,243,250,0.08)" : "var(--bg-2)"}
                stroke={isAuto ? "rgba(238,243,250,0.4)" : "var(--ink-2)"} strokeWidth="1" />
              <path d={`M14 160 L46 138 L78 160`}
                fill={isAuto ? "rgba(238,243,250,0.12)" : "var(--bg-2)"}
                stroke={isAuto ? "rgba(238,243,250,0.4)" : "var(--ink-2)"} strokeWidth="1" />
              <rect x="38" y="178" width="16" height="22"
                fill={isAuto ? "rgba(238,243,250,0.18)" : "var(--ink-2)"} />
              {/* sensor dots */}
              <circle cx="28" cy="172" r="2.5" fill={works ? (isAuto ? "var(--accent)" : "var(--good)") : "var(--warn)"} />
              <circle cx="62" cy="172" r="2.5" fill={works ? (isAuto ? "var(--accent)" : "var(--good)") : "var(--warn)"} />
            </g>

            {/* Server / cloud */}
            {isAuto ? (
              <g>
                {/* server inside house */}
                <rect x="32" y="146" width="28" height="6" rx="1.5"
                  fill="var(--accent)" />
                <text x="46" y="124" textAnchor="middle"
                  fontSize="9" fontFamily="var(--mono)" fill="rgba(238,243,250,0.7)"
                  letterSpacing="0.06em">ЛОКАЛЬНЫЙ СЕРВЕР</text>
              </g>
            ) : (
              <g>
                {/* cloud out there */}
                <g transform="translate(180, 30)">
                  <path
                    d="M10 20 a14 14 0 0 1 24 -8 a10 10 0 0 1 14 12 a8 8 0 0 1 -8 8 H14 a10 10 0 0 1 -4 -12 Z"
                    fill={works ? "var(--surface)" : "var(--bg-2)"}
                    stroke={works ? "var(--good)" : "var(--warn)"}
                    strokeWidth="1.5"
                    strokeDasharray={works ? "0" : "3 3"} />
                  {!works && (
                    <g transform="translate(20, 12)" stroke="var(--warn)" strokeWidth="2" strokeLinecap="round">
                      <line x1="0" y1="0" x2="14" y2="14" />
                      <line x1="14" y1="0" x2="0" y2="14" />
                    </g>
                  )}
                </g>
                <text x="206" y="80" textAnchor="middle"
                  fontSize="9" fontFamily="var(--mono)" fill="var(--muted)"
                  letterSpacing="0.06em">{works ? "ОБЛАКО" : "ОБЛАКО ↓"}</text>
              </g>
            )}

            {/* Connection lines */}
            {isAuto ? (
              <>
                <path d="M78 168 C 120 168, 140 158, 168 142"
                  stroke="rgba(238,243,250,0.35)" strokeWidth="1.5"
                  strokeDasharray="3 3" fill="none" />
                <g transform="translate(168, 130)">
                  <rect x="-12" y="0" width="24" height="38" rx="4"
                    fill="rgba(238,243,250,0.08)" stroke="rgba(238,243,250,0.4)" strokeWidth="1" />
                  <circle cx="0" cy="19" r="6"
                    fill="var(--accent)" />
                </g>
                <text x="168" y="184" textAnchor="middle"
                  fontSize="9" fontFamily="var(--mono)" fill="rgba(238,243,250,0.7)"
                  letterSpacing="0.06em">ПРИЛОЖЕНИЕ</text>
              </>
            ) : (
              <>
                <path d="M78 168 C 110 130, 150 90, 184 56"
                  stroke={works ? "var(--good)" : "var(--warn)"}
                  strokeWidth="1.5"
                  strokeDasharray={works ? "0" : "3 3"} fill="none" />
                <path d="M220 56 C 226 88, 220 130, 200 156"
                  stroke={works ? "var(--good)" : "var(--warn)"}
                  strokeWidth="1.5"
                  strokeDasharray={works ? "0" : "3 3"} fill="none" />
                <g transform="translate(186, 160)">
                  <rect x="-12" y="0" width="24" height="38" rx="4"
                    fill="var(--bg-2)" stroke="var(--ink-2)" strokeWidth="1" />
                  <circle cx="0" cy="19" r="6"
                    fill={works ? "var(--good)" : "var(--warn)"} />
                </g>
                <text x="186" y="216" textAnchor="middle"
                  fontSize="9" fontFamily="var(--mono)" fill="var(--muted)"
                  letterSpacing="0.06em">ПРИЛОЖЕНИЕ</text>
              </>
            )}
          </svg>
        </div>

        {/* Feature list */}
        <div style={{ marginTop: 8, display: "grid", gap: 8 }}>
          {isAuto ? [
            ["Работает локально, без облака", true],
            ["Zigbee любых брендов", true],
            ["Данные не уходят наружу", true],
            ["Локальное голосовое управление", true],
          ].map(([t]) => (
            <Row key={t} text={t} ok={true} dark />
          )) : [
            ["Зависит от интернета", false],
            ["Привязка к одному бренду", false],
            ["Данные на чужом сервере", false],
            ["При сбое — базовые функции", false],
          ].map(([t]) => (
            <Row key={t} text={t} ok={false} />
          ))}
        </div>
      </div>
    );
  };

  return (
    <section id="vs">
      <div className="container">
        <div className="vs-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 560 }}>
            <span className="eyebrow">Сравнение</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Что будет, если завтра<br />пропадёт интернет?
            </h2>
            <p className="lede" style={{ marginTop: 18 }}>
              Переключите состояние интернета — и посмотрите, что останется работать.
            </p>
          </div>

          <div style={{
            display: "inline-flex",
            background: "var(--surface)",
            border: "1px solid var(--line)",
            borderRadius: 999,
            padding: 4,
          }}>
            {[
              { v: true, label: "Интернет есть", icon: "check" },
              { v: false, label: "Интернет пропал", icon: "wifi-off" },
            ].map(o => (
              <button key={String(o.v)}
                onClick={() => setOnline(o.v)}
                style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  padding: "8px 16px",
                  borderRadius: 999,
                  border: "none",
                  background: online === o.v ? "var(--ink-2)" : "transparent",
                  color: online === o.v ? "#EEF3FA" : "var(--ink-3)",
                  fontSize: 14, cursor: "pointer", fontWeight: 500,
                  transition: "all 180ms",
                }}>
                <RDIcon name={o.icon} size={14} /> {o.label}
              </button>
            ))}
          </div>
        </div>

        <div style={{
          marginTop: 48,
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 18,
        }} className="vs-grid">
          <Box kind="usual" />
          <Box kind="auto" />
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .vs-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const Row = ({ text, ok, dark }) => (
  <div style={{
    display: "flex", gap: 10, alignItems: "center",
    fontSize: 14,
    color: dark ? "rgba(238,243,250,0.85)" : "var(--ink-3)",
  }}>
    <span style={{
      width: 18, height: 18, borderRadius: 999,
      background: ok ? (dark ? "var(--accent)" : "var(--good)") : (dark ? "rgba(238,243,250,0.18)" : "var(--bg-2)"),
      color: "#fff",
      display: "grid", placeItems: "center",
      flexShrink: 0,
    }}>
      <RDIcon name={ok ? "check" : "x"} size={11} stroke={2.4} />
    </span>
    {text}
  </div>
);

window.Comparison = Comparison;