// Hero — 3 variations via Tweaks
const Hero = ({ variant = "promise", t, setTweak, onConsult }) => {
  return (
    <section id="hero" style={{ paddingTop: 48, paddingBottom: 64 }}>
      <div className="container">
        {variant === "promise" && <HeroPromise onConsult={onConsult} />}
        {variant === "scenarios" && <HeroScenarios />}
        {variant === "comparison" && <HeroComparison />}
      </div>
    </section>
  );
};

// --- Variant A: "Promise" — bold statement, problem-led ---
const HERO_TILES = [
  { id: "leak",    title: "Протечка", status: "Кран перекрыт",        hint: "Датчик поймал воду — кран перекрывается автоматически за 2 секунды.", color: "var(--leak)",  icon: "drop",   x: 6,   y: 10 },
  { id: "climate", title: "+22.4°",   status: "Гостиная · комфорт",   hint: "Климат держится по сценарию в каждой комнате, без перерасхода.",       color: "var(--good)",  icon: "thermo", x: 168, y: 86 },
  { id: "guard",   title: "Дом",      status: "Никого нет · охрана",  hint: "При уходе включается охрана периметра и контроль окон.",               color: "var(--ink-2)", icon: "shield", x: 10,  y: 188 },
  { id: "light",   title: "Свет",     status: "Прихожая выкл",        hint: "Свет гаснет сам, когда в комнате никого нет.",                         color: "var(--accent)", icon: "bulb",  x: 176, y: 262 },
];

const HeroPromise = ({ onConsult }) => (
  <div>
    <div className="hero-promise-grid" style={{
      display: "grid",
      gridTemplateColumns: "minmax(0, 1fr) minmax(0, 0.82fr)",
      gap: 40,
      alignItems: "start",
    }}>
      {/* LEFT: text + CTA */}
      <div style={{ minWidth: 0 }}>
        <div className="hero-badges" style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 22, flexWrap: "wrap" }}>
          <span className="badge" title="Подходит и для квартир, и для частных домов">
            <RDIcon name="house" size={14} /> Квартиры и частные дома
          </span>
          <span className="badge" title="Сценарии работают на локальном сервере, без интернета">
            <RDIcon name="cloud-off" size={14} /> Автономно без интернета
          </span>
        </div>

        <h1 className="h-display">
          Умный дом,<br />
          который <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 400 }}>сам</span><br />
          следит за&nbsp;собой.
        </h1>

        <p className="lede" style={{ marginTop: 26, maxWidth: "48ch" }}>
          Проектируем и устанавливаем умный дом для квартир и частных домов:
          в&nbsp;новостройках, на этапе ремонта и в уже обжитом жилом фонде.
          Протечки, климат, свет и безопасность — под контролем с первого дня.
        </p>

        <div className="hero-cta" style={{ marginTop: 34, display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
          <a href="#builder" className="btn btn-primary">
            Собрать свой пакет
            <span className="arrow"><RDIcon name="arrow-right" size={16} /></span>
          </a>
          <a href="#contact" className="btn btn-ghost"
             onClick={(e) => { e.preventDefault(); onConsult && onConsult(); }}>
            Хочу бесплатную консультацию
          </a>
          <span className="badge badge-free">
            <span className="dot" /> Консультация — 0&nbsp;₽
          </span>
        </div>
      </div>

      {/* RIGHT: draggable device tiles (no text overlap) */}
      <HeroTiles />
    </div>

    {/* metric strip — отдельные карточки с собственными рамками */}
    <div className="hero-metrics" style={{
      marginTop: 56,
      display: "grid",
      gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
      gap: 12,
    }}>
      {[
        ["От 10 000 ₽", "стартовый пакет"],
        ["На этапе ремонта", "чисто, без штробления"],
        ["Квартира / частный дом", "новостройка или обжитой фонд"],
        ["24 / 7", "локальная работа"],
      ].map(([v, l], i) => (
        <div key={i} className="hero-metric-card" style={{
          padding: "20px 22px",
          border: "1px solid var(--line)",
          borderRadius: 16,
          background: "var(--surface)",
          minWidth: 0,
        }}>
          <div style={{ fontSize: "clamp(18px, 1.7vw, 26px)", fontWeight: 500, letterSpacing: "-0.02em", color: "var(--ink-2)", lineHeight: 1.1, textWrap: "balance" }}>{v}</div>
          <div className="label" style={{ marginTop: 6 }}>{l}</div>
        </div>
      ))}
    </div>

    <style>{`
      .badge {
        display: inline-flex; align-items: center; gap: 8px;
        height: 30px; padding: 0 12px; border-radius: 999px;
        background: var(--bg-2); border: 1px solid var(--line);
        font-size: 13px; color: var(--ink-3);
        cursor: default; user-select: none;
      }
      .badge svg { color: var(--accent); }
      .badge-free { background: transparent; color: var(--ink-2); font-weight: 500; }
      .badge-free .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--safe); }
      @media (max-width: 980px) {
        .hero-promise-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
      }
      @media (max-width: 900px) {
        .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      }
      @media (max-width: 420px) {
        .hero-metrics { grid-template-columns: 1fr !important; }
        .hero-cta .btn { width: 100%; justify-content: center; }
        .badge-free { width: 100%; justify-content: center; }
      }
    `}</style>
  </div>
);

// Draggable (desktop) / static grid (mobile) device tiles
const HeroTiles = () => {
  const zoneRef = React.useRef(null);
  const [isDesktop, setIsDesktop] = React.useState(true);
  const [pos, setPos] = React.useState(() => {
    const o = {}; HERO_TILES.forEach((t) => { o[t.id] = { x: t.x, y: t.y }; }); return o;
  });
  const [openId, setOpenId] = React.useState("leak");
  const drag = React.useRef(null);

  React.useEffect(() => {
    const mq = window.matchMedia("(min-width: 981px)");
    const apply = () => setIsDesktop(mq.matches);
    apply();
    mq.addEventListener ? mq.addEventListener("change", apply) : mq.addListener(apply);
    return () => { mq.removeEventListener ? mq.removeEventListener("change", apply) : mq.removeListener(apply); };
  }, []);

  const onDown = (id) => (e) => {
    if (!isDesktop) return;
    const zone = zoneRef.current;
    e.currentTarget.setPointerCapture(e.pointerId);
    drag.current = {
      id, moved: false,
      sx: e.clientX, sy: e.clientY,
      ox: pos[id].x, oy: pos[id].y,
      zw: zone.clientWidth, zh: zone.clientHeight,
      tw: e.currentTarget.offsetWidth, th: e.currentTarget.offsetHeight,
    };
  };
  const onMove = (e) => {
    const d = drag.current; if (!d) return;
    const dx = e.clientX - d.sx, dy = e.clientY - d.sy;
    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) d.moved = true;
    const nx = Math.max(0, Math.min(d.ox + dx, d.zw - d.tw));
    const ny = Math.max(0, Math.min(d.oy + dy, d.zh - d.th));
    setPos((p) => ({ ...p, [d.id]: { x: nx, y: ny } }));
  };
  const onUp = (id) => (e) => {
    const d = drag.current;
    if (d && !d.moved) setOpenId((o) => (o === id ? null : id));
    drag.current = null;
  };

  return (
    <div ref={zoneRef} className="hero-tiles-zone" style={{
      position: "relative",
      minHeight: 360,
      width: "100%",
    }}>
      {HERO_TILES.map((t) => {
        const open = openId === t.id;
        return (
          <div key={t.id}
            role="button" tabIndex={0}
            aria-label={`${t.title} · ${t.status}. ${t.hint}`}
            aria-pressed={open}
            onPointerDown={onDown(t.id)}
            onPointerMove={onMove}
            onPointerUp={onUp(t.id)}
            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpenId((o) => (o === t.id ? null : t.id)); } }}
            className="hero-tile"
            style={isDesktop ? {
              position: "absolute",
              left: pos[t.id].x, top: pos[t.id].y,
              width: 212,
              touchAction: "none",
              cursor: drag.current && drag.current.id === t.id ? "grabbing" : "grab",
              zIndex: open ? 5 : 1,
            } : {
              touchAction: "auto", cursor: "pointer",
            }}>
            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: t.color, color: "#fff",
                display: "grid", placeItems: "center", flexShrink: 0,
              }}>
                <RDIcon name={t.icon} size={18} stroke={2} />
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontWeight: 500, fontSize: 15, letterSpacing: "-0.01em", color: "var(--ink-2)" }}>{t.title}</div>
                <div className="label" style={{ marginTop: 2 }}>{t.status}</div>
              </div>
            </div>
            {open && (
              <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid var(--line-2)", fontSize: 12.5, lineHeight: 1.45, color: "var(--ink-3)" }}>
                {t.hint}
              </div>
            )}
          </div>
        );
      })}
      <div className="hero-tiles-tip label">Перетащите карточки · нажмите для подсказки</div>

      <style>{`
        .hero-tile {
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: 18px;
          padding: 14px 16px;
          box-shadow: var(--shadow-md);
          animation: float-y 6s ease-in-out infinite;
        }
        .hero-tile:active { animation: none; }
        .hero-tiles-tip {
          position: absolute; right: 0; bottom: -26px;
          text-transform: none; letter-spacing: 0; font-family: var(--font);
          font-size: 12px; color: var(--muted);
        }
        @media (max-width: 980px) {
          .hero-tiles-zone {
            min-height: 0 !important;
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
          }
          .hero-tile { animation: none; }
          .hero-tiles-tip { display: none; }
        }
        @media (max-width: 380px) {
          .hero-tiles-zone { grid-template-columns: 1fr; }
        }
      `}</style>
    </div>
  );
};

// --- Variant B: "Scenarios" — typewriter rolling scenarios ---
const HeroScenarios = () => {
  const lines = React.useMemo(() => [
    { verb: "перекрывает", what: "воду при протечке", icon: "drop", color: "var(--leak)" },
    { verb: "поддерживает", what: "+22° в гостиной", icon: "thermo", color: "var(--good)" },
    { verb: "охраняет", what: "квартиру, когда вы в отъезде", icon: "shield", color: "var(--ink-2)" },
    { verb: "включает", what: "свет, как только вы вошли", icon: "bulb", color: "var(--accent)" },
    { verb: "поливает", what: "теплицу, пока вы на работе", icon: "sprout", color: "var(--safe)" },
  ], []);
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI(p => (p + 1) % lines.length), 2600);
    return () => clearInterval(t);
  }, [lines.length]);
  const cur = lines[i];

  return (
    <div>
      <span className="eyebrow">Сценарии · автономно · Zigbee</span>

      <h1 className="h-display" style={{ marginTop: 18 }}>
        Пока вас нет — дом
      </h1>

      <div style={{
        marginTop: 14,
        height: "clamp(64px, 9vw, 130px)",
        display: "flex",
        alignItems: "center",
        gap: 18,
        flexWrap: "wrap",
      }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 12,
          padding: "8px 16px 8px 12px",
          borderRadius: 999,
          background: cur.color,
          color: "#fff",
          transition: "background 400ms ease",
          fontSize: "clamp(28px, 4vw, 56px)",
          letterSpacing: "-0.025em",
          fontWeight: 500,
          lineHeight: 1.05,
        }}>
          <span style={{
            width: "clamp(40px, 5vw, 64px)", height: "clamp(40px, 5vw, 64px)",
            borderRadius: 999, background: "rgba(255,255,255,0.18)",
            display: "grid", placeItems: "center",
          }}>
            <RDIcon name={cur.icon} size={28} stroke={2} />
          </span>
          {cur.verb}
        </div>
        <div className="h-display" style={{ margin: 0, color: "var(--ink-2)" }}>
          {cur.what}
        </div>
      </div>

      <p className="lede" style={{ marginTop: 30 }}>
        Не одно устройство — целая система. Освещение, климат, безопасность и&nbsp;вентиляция
        работают по сценариям, а не вручную.
      </p>

      <div className="row" style={{ marginTop: 32 }}>
        <a href="#builder" className="btn btn-primary">Собрать пакет<span className="arrow"><RDIcon name="arrow-right" size={16} /></span></a>
        <a href="#scenarios" className="btn btn-ghost">Посмотреть сценарии</a>
      </div>

      <div style={{ marginTop: 40, display: "flex", gap: 8, flexWrap: "wrap" }}>
        {lines.map((l, idx) => (
          <button key={idx} onClick={() => setI(idx)} style={{
            border: "1px solid " + (idx === i ? "var(--ink-2)" : "var(--line)"),
            background: idx === i ? "var(--ink-2)" : "transparent",
            color: idx === i ? "#EEF3FA" : "var(--ink-3)",
            borderRadius: 999,
            padding: "6px 12px",
            fontSize: 13,
            cursor: "pointer",
            fontFamily: "var(--mono)",
            letterSpacing: "0.04em",
          }}>{String(idx + 1).padStart(2, "0")}</button>
        ))}
      </div>
    </div>
  );
};

// --- Variant C: "Comparison" — head-to-head ---
const HeroComparison = () => (
  <div>
    <span className="eyebrow">Чем мы отличаемся</span>
    <h1 className="h-display" style={{ marginTop: 18, maxWidth: "16ch" }}>
      Умный дом, который не&nbsp;ломается без интернета.
    </h1>
    <p className="lede" style={{ marginTop: 22, maxWidth: "52ch" }}>
      Обычный умный дом — это набор устройств на чужом облаке. РазумДом — автономный сервер
      у вас дома: всё работает локально, всегда.
    </p>

    <div className="row" style={{ marginTop: 28 }}>
      <a href="#builder" className="btn btn-primary">Собрать пакет<span className="arrow"><RDIcon name="arrow-right" size={16} /></span></a>
      <a href="#vs" className="btn btn-ghost">Сравнить системы</a>
    </div>

    <div className="hero-vs" style={{
      marginTop: 56,
      display: "grid",
      gridTemplateColumns: "1fr auto 1fr",
      gap: 16,
      alignItems: "stretch",
    }}>
      <div style={{
        background: "var(--surface)",
        border: "1px solid var(--line-2)",
        borderRadius: 22,
        padding: 26,
        position: "relative",
      }}>
        <div className="label" style={{ color: "var(--warn)" }}>Обычная система</div>
        <h3 className="h-card" style={{ marginTop: 8 }}>Облачная</h3>
        <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "grid", gap: 10 }}>
          {[
            "Зависит от интернета",
            "Один бренд — одно приложение",
            "Данные уходят на чужой сервер",
            "Перестаёт работать, если сервис закрыт",
          ].map(t => (
            <li key={t} style={{ display: "flex", gap: 10, alignItems: "flex-start", color: "var(--ink-3)" }}>
              <span style={{ width: 18, height: 18, borderRadius: 999, background: "var(--bg-2)", color: "var(--warn)", display: "grid", placeItems: "center", flexShrink: 0, marginTop: 2 }}>
                <RDIcon name="x" size={12} stroke={2.4} />
              </span>
              {t}
            </li>
          ))}
        </ul>
      </div>

      <div style={{
        display: "grid", placeItems: "center", padding: "0 6px",
      }}>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
          background: "var(--bg)", border: "1px solid var(--line)",
          padding: "6px 10px", borderRadius: 999,
        }}>vs</div>
      </div>

      <div style={{
        background: "var(--ink-2)",
        color: "#EEF3FA",
        borderRadius: 22,
        padding: 26,
        position: "relative",
      }}>
        <div className="label" style={{ color: "rgba(238,243,250,0.6)" }}>РазумДом</div>
        <h3 className="h-card" style={{ marginTop: 8, color: "#EEF3FA" }}>Автономная</h3>
        <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "grid", gap: 10 }}>
          {[
            "Работает локально, без облака",
            "Поддержка Zigbee любых производителей",
            "Данные остаются дома",
            "Сервер у вас — никто не отключит",
          ].map(t => (
            <li key={t} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
              <span style={{ width: 18, height: 18, borderRadius: 999, background: "var(--accent)", color: "#fff", display: "grid", placeItems: "center", flexShrink: 0, marginTop: 2 }}>
                <RDIcon name="check" size={12} stroke={2.4} />
              </span>
              {t}
            </li>
          ))}
        </ul>
      </div>
    </div>

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

window.Hero = Hero;