// Interactive house diagram — hover/click a room to see scenarios
const House = () => {
  const rooms = {
    kitchen: {
      name: "Кухня",
      x: 10, y: 8, w: 38, h: 36,
      icon: "drop",
      scenarios: [
        { icon: "drop", text: "Датчик протечки под мойкой → перекрыть кран" },
        { icon: "valve", text: "Контроль состояния крана воды" },
        { icon: "switch", text: "Проходные выключатели: светом можно управлять у входа и в столовой зоне" },
        { icon: "zap", text: "Авто-выключение приборов по сценарию «ушёл»" },
      ],
    },
    bath: {
      name: "Санузел",
      x: 50, y: 8, w: 22, h: 36,
      icon: "drop",
      scenarios: [
        { icon: "drop", text: "Датчики протечки в углах за унитазом и ванной" },
        { icon: "humid", text: "Включение вентилятора при влажности > 70%" },
        { icon: "bulb", text: "Ночной свет по датчику движения" },
      ],
    },
    living: {
      name: "Гостиная",
      x: 10, y: 46, w: 38, h: 46,
      icon: "thermo",
      scenarios: [
        { icon: "thermo", text: "Климат +22°: автоматическое отопление зимой" },
        { icon: "bulb", text: "Свет по сценариям «утро / вечер / кино»" },
        { icon: "mic", text: "Голос: «Алиса, добрый вечер» — свет + музыка" },
      ],
    },
    bedroom: {
      name: "Спальня",
      x: 74, y: 8, w: 22, h: 50,
      icon: "moon",
      scenarios: [
        { icon: "moon", text: "Сценарий «ночь»: климат тише, свет выключен" },
        { icon: "shield", text: "Охрана периметра при включении сна" },
        { icon: "sun", text: "Рассвет: плавно включается торшер" },
      ],
    },
    hall: {
      name: "Прихожая",
      x: 50, y: 74, w: 22, h: 18,
      icon: "door",
      scenarios: [
        { icon: "door", text: "Датчик открытия двери → отправить уведомление" },
        { icon: "key", text: "Сценарий «ушёл»: проверка света, климата, окон" },
        { icon: "motion", text: "Движение → свет в коридоре на 60 секунд" },
      ],
    },
    balcony: {
      name: "Балкон / Двор",
      x: 74, y: 60, w: 22, h: 32,
      icon: "sprout",
      scenarios: [
        { icon: "sprout", text: "Автополив домашних цветов и теплицы" },
        { icon: "thermo", text: "Контроль температуры на улице и в теплице" },
        { icon: "fan", text: "Открытие вентиляционных створок при перегреве" },
      ],
    },
    server: {
      name: "Сервер",
      x: 50, y: 46, w: 22, h: 26,
      icon: "cloud-off",
      scenarios: [
        { icon: "cloud-off", text: "Локальный сервер — работает без интернета" },
        { icon: "wifi-off", text: "Все сценарии остаются доступны при сбое сети" },
        { icon: "mic", text: "Локальное голосовое управление" },
      ],
    },
  };

  const [active, setActive] = React.useState("living");
  const room = rooms[active];

  return (
    <section id="house">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 56, alignItems: "start" }} className="house-grid">
          <div>
            <span className="eyebrow">Карта дома</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Наведите на комнату.<br />Посмотрите, что умеет.
            </h2>
            <p className="lede" style={{ marginTop: 22 }}>
              В каждой комнате — свой набор датчиков и сценариев. Они работают связанно:
              протечка на кухне перекрывает воду во всём доме, движение в прихожей включает
              свет именно там, где нужно.
            </p>

            <div style={{ marginTop: 28, display: "grid", gap: 10 }}>
              <div className="label">Сценарии · {room.name}</div>
              {room.scenarios.map((s, i) => (
                <div key={i} style={{
                  display: "flex", gap: 14, alignItems: "center",
                  background: "var(--surface)",
                  border: "1px solid var(--line-2)",
                  borderRadius: 14,
                  padding: "14px 16px",
                  transition: "all 200ms",
                }}>
                  <span style={{
                    width: 34, height: 34, borderRadius: 10,
                    background: "var(--bg-2)", color: "var(--ink-2)",
                    display: "grid", placeItems: "center", flexShrink: 0,
                  }}>
                    <RDIcon name={s.icon} size={18} />
                  </span>
                  <span style={{ fontSize: 15, color: "var(--ink-3)" }}>{s.text}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="house-right" style={{ minWidth: 0, width: "100%", maxWidth: 560, justifySelf: "end" }}>
          <div style={{
            background: "var(--surface)",
            border: "1px solid var(--line-2)",
            borderRadius: 22,
            padding: 18,
            position: "relative",
            aspectRatio: "1 / 1",
            width: "100%",
          }} className="house-canvas grid-bg">
            <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{
              position: "absolute", inset: 18, width: "calc(100% - 36px)", height: "calc(100% - 36px)",
            }}>
              {/* outer wall */}
              <rect x="6" y="4" width="92" height="92" rx="2" fill="none" stroke="var(--ink-2)" strokeWidth="0.6" />
              {Object.entries(rooms).map(([key, r]) => {
                const isActive = key === active;
                return (
                  <g key={key} onMouseEnter={() => setActive(key)} onClick={() => setActive(key)} style={{ cursor: "pointer" }}>
                    <rect
                      x={r.x} y={r.y} width={r.w} height={r.h}
                      rx="1.4"
                      fill={isActive ? "var(--ink-2)" : "rgba(30,58,47,0.04)"}
                      stroke="var(--ink-2)"
                      strokeWidth="0.4"
                      style={{ transition: "fill 200ms" }}
                    />
                    <text
                      x={r.x + r.w / 2}
                      y={r.y + r.h / 2 + 1}
                      textAnchor="middle"
                      fontSize="2.6"
                      fontFamily="Geist"
                      fontWeight="500"
                      letterSpacing="-0.02em"
                      fill={isActive ? "#EEF3FA" : "var(--ink-2)"}
                      style={{ transition: "fill 200ms", pointerEvents: "none" }}
                    >{r.name}</text>
                    {/* sensor dot */}
                    <circle
                      cx={r.x + r.w - 4}
                      cy={r.y + 4}
                      r="1"
                      fill={isActive ? "var(--accent)" : "var(--accent)"}
                      opacity={isActive ? 1 : 0.6}
                    >
                      {isActive && (
                        <animate attributeName="r" values="1;2.2;1" dur="1.6s" repeatCount="indefinite" />
                      )}
                    </circle>
                  </g>
                );
              })}
            </svg>
          </div>

            <div style={{
              marginTop: 12,
              display: "flex", justifyContent: "space-between", alignItems: "center",
              padding: "12px 16px",
              background: "var(--surface)",
              border: "1px solid var(--line)",
              borderRadius: 14,
              fontSize: 13,
            }} className="house-status">
              <span className="mono" style={{ letterSpacing: "0.06em", color: "var(--muted)", fontSize: 11, textTransform: "uppercase" }}>
                Активная зона
              </span>
              <span style={{ fontWeight: 500, color: "var(--ink-2)", display: "inline-flex", alignItems: "center", gap: 8 }}>
                <RDIcon name={room.icon} size={14} /> {room.name}
              </span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .house-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .house-right { justify-self: stretch !important; max-width: none !important; }
          .house-canvas { max-width: none !important; }
        }
      `}</style>
    </section>
  );
};

window.House = House;