// ─── K&N Elite — Funnel screens (unified light premium) ───

const { useState, useEffect, useRef } = React;

// ═══════════ SCREEN 1 — HERO + ADDRESS (full-bg photo) ═══════════
function ScreenAddress({ data, setData, onNext }) {
  const { t } = useI18n();
  const [addr, setAddr] = useState(data.address || "");
  const [postal, setPostal] = useState(data.postal || "");
  const [error, setError] = useState("");

  const submit = () => {
    if (!addr.trim()) { setError(t("s1_address_ph")); return; }
    setData({ ...data, address: addr, postal });
    onNext();
  };

  return (
    <div className="page" style={{ background: "var(--ivory)" }}>
      <Topbar onNav={window.__nav} current="home" floating />

      {/* HERO — full background photo */}
      <section className="hero-full" style={{ marginTop: -82 }}>
        <div className="hero-full-bg">
          <img src={PHOTOS.hero} alt="" />
        </div>
        <div className="hero-full-overlay" />
        <div className="hero-photo-tag">Мадрид · Барселона · Валенсия · Аликанте</div>

        <div className="hero-full-content">
          <div className="eyebrow rise" style={{ color: "var(--gold-soft)" }}>
            K&N Elite · Агентство элитной недвижимости
          </div>

          <h1 className="display rise-slow" style={{ marginTop: 44 }}>
            {t("s1_title")}<br />
            <em>{t("s1_title_em")}</em>
          </h1>

          <p className="rise-slow" style={{
            color: "rgba(255,253,247,0.85)",
            fontSize: 18, fontFamily: "var(--serif)", fontStyle: "italic",
            maxWidth: 640, margin: "28px auto 0",
            animationDelay: ".2s",
          }}>
            {t("s1_sub")}
          </p>

          <form onSubmit={(e) => { e.preventDefault(); submit(); }}
            className="rise-slow"
            style={{ marginTop: 48, maxWidth: 620, marginLeft: "auto", marginRight: "auto", animationDelay: ".35s" }}>
            <div style={{ position: "relative" }}>
              <input
                className="input input-hero"
                placeholder={t("s1_address_ph")}
                value={addr}
                onChange={(e) => { setAddr(e.target.value); setError(""); }}
                autoFocus
              />
            </div>
            <button type="submit" className="btn btn-gold btn-lg"
              style={{ marginTop: 16, width: "100%" }}>
              {t("s1_cta")}
              <span className="arrow">→</span>
            </button>
            {error && <div style={{ color: "var(--gold-soft)", marginTop: 12, fontSize: 13 }}>{error}</div>}
            <div style={{
              marginTop: 28, color: "rgba(255,253,247,0.8)",
              fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.18em", textTransform: "uppercase",
              display: "flex", gap: 24, flexWrap: "wrap", justifyContent: "center",
            }}>
              <span><span style={{ color: "var(--gold-soft)" }}>✓</span> Бесплатно</span>
              <span><span style={{ color: "var(--gold-soft)" }}>✓</span> Без регистрации</span>
              <span><span style={{ color: "var(--gold-soft)" }}>✓</span> 2 минуты</span>
            </div>
          </form>

          <div className="hero-stat-badge rise-slow" style={{ animationDelay: ".5s" }}>
            <div>
              <div className="lbl">Средняя премия</div>
              <div className="num" style={{ marginTop: 6 }}>+8,4%</div>
            </div>
            <div style={{ width: 1, height: 40, background: "rgba(226,204,151,0.35)" }} />
            <div>
              <div className="lbl">к рыночной цене</div>
              <div style={{ fontSize: 13, color: "rgba(255,253,247,0.75)", marginTop: 8 }}>По 420+ проданным объектам за 2025</div>
            </div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS section */}
      <section style={{ padding: "120px 48px", background: "var(--ivory)" }}>
        <div className="container-narrow">
          <div style={{ textAlign: "center", marginBottom: 72 }}>
            <div className="eyebrow">{t("s1_how_title")}</div>
            <h2 style={{ marginTop: 16, fontSize: 44 }}>
              Четыре шага <em style={{ color: "var(--gold-deep)", fontStyle: "italic" }}>до вашего отчёта</em>
            </h2>
          </div>

          <div className="stagger" style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24,
          }}>
            {[t("s1_how_1"), t("s1_how_2"), t("s1_how_3"), t("s1_how_4")].map((s, i) => (
              <div key={i} className="card card-hover">
                <div style={{
                  fontFamily: "var(--serif)", fontSize: 56, fontWeight: 300,
                  color: "var(--gold)", lineHeight: 1, marginBottom: 20,
                }}>
                  0{i + 1}
                </div>
                <div style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.6 }}>{s}</div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 80, padding: 32, textAlign: "center",
            background: "var(--paper)", border: "1px solid var(--gold-20)",
            fontSize: 13, color: "var(--ink-60)",
          }}>
            <span style={{ color: "var(--gold-deep)" }}>✦</span>&nbsp;&nbsp;{t("s1_coverage")}&nbsp;&nbsp;<span style={{ color: "var(--gold-deep)" }}>✦</span>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

// ═══════════ SCREEN 2 — DETAILS (с 4 карточками типа) ═══════════
function ScreenDetails({ data, setData, onBack, onNext }) {
  const { t } = useI18n();
  const [d, setD] = useState({ ...data });
  const upd = (k, v) => setD({ ...d, [k]: v });
  const toggleExtra = (v) => {
    const arr = d.extras.includes(v) ? d.extras.filter(x => x !== v) : [...d.extras, v];
    upd("extras", arr);
  };
  const submit = () => { setData(d); onNext(); };

  const floorOptions = [
    { v: "low", label: "Первый этаж", hint: "Партер, нижний уровень", icon: "⬇" },
    { v: "mid", label: "Средний этаж", hint: "Между 2 и предпоследним", icon: "≡" },
    { v: "top", label: "Верхний / Пентхаус", hint: "Последний этаж с террасой", icon: "⬆" },
    { v: "house", label: "Частный дом", hint: "Отдельно стоящий объект", icon: "⌂" },
  ];

  return (
    <div className="page fade">
      <Topbar onNav={window.__nav} current="home" />
      <ProgressBar step={1} total={3} />

      <main className="container-narrow" style={{ padding: "72px 40px 120px" }}>
        <StepHeader step={1} total={3} labels={["Адрес объекта", "Характеристики объекта", "Получить отчёт"]} />

        <p className="rise" style={{
          fontSize: 17, color: "var(--ink-60)", maxWidth: 720,
          marginTop: 12, marginBottom: 64, animationDelay: ".15s",
        }}>
          {t("s2_sub")}
        </p>

        <div className="stagger" style={{ display: "grid", gap: 48 }}>
          {/* Property type (4 cards) */}
          <div className="field">
            <div className="label">Тип объекта</div>
            <div className="type-grid" style={{ marginTop: 4 }}>
              {floorOptions.map(o => (
                <button key={o.v}
                  className={"type-card" + (d.floor === o.v ? " active" : "")}
                  onClick={() => upd("floor", o.v)}>
                  <div className="t-icon" style={{ fontSize: 28 }}>{o.icon}</div>
                  <div className="t-name">{o.label}</div>
                  <div className="t-hint">{o.hint}</div>
                </button>
              ))}
            </div>
          </div>

          {/* Area + rooms + baths */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
            <div className="field">
              <div className="label">Площадь (м²)</div>
              <input className="input" type="number" value={d.area}
                onChange={(e) => upd("area", Number(e.target.value))} />
            </div>
            <div className="field">
              <div className="label">Комнат</div>
              <input className="input" type="number" value={d.rooms}
                onChange={(e) => upd("rooms", Number(e.target.value))} />
            </div>
            <div className="field">
              <div className="label">Санузлов</div>
              <input className="input" type="number" value={d.baths}
                onChange={(e) => upd("baths", Number(e.target.value))} />
            </div>
          </div>

          {/* Heating */}
          <div className="field">
            <div className="label">Отопление</div>
            <select className="input" value={d.heating} onChange={(e) => upd("heating", e.target.value)}>
              <option value="electric">Электрическое</option>
              <option value="gas">Газовое</option>
              <option value="heatpump">Тепловой насос</option>
              <option value="central">Центральное</option>
            </select>
          </div>

          {/* Elevator + furniture */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
            <div className="field">
              <div className="label">Лифт</div>
              <SegmentedToggle value={d.elevator ? "y" : "n"} onChange={(v) => upd("elevator", v === "y")}
                options={[{ value: "y", label: "Есть" }, { value: "n", label: "Нет" }]} />
            </div>
            <div className="field">
              <div className="label">Мебель</div>
              <SegmentedToggle value={d.furniture ? "y" : "n"} onChange={(v) => upd("furniture", v === "y")}
                options={[{ value: "y", label: "Есть" }, { value: "n", label: "Нет" }]} />
            </div>
          </div>

          {/* Condition */}
          <div className="field">
            <div className="label">Состояние</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 4 }}>
              {[
                { v: "reform", t: "Под ремонт", h: "Требуется реновация" },
                { v: "good",   t: "В хорошем состоянии", h: "Можно жить сразу" },
                { v: "new",    t: "Новое / после ремонта", h: "Недавно обновлено" },
              ].map(o => (
                <button key={o.v} onClick={() => upd("condition", o.v)}
                  style={{
                    padding: "28px 24px",
                    background: d.condition === o.v ? "var(--gold-10)" : "var(--paper)",
                    border: `1px solid ${d.condition === o.v ? "var(--gold)" : "var(--ink-10)"}`,
                    cursor: "pointer", textAlign: "left",
                    transition: "all .3s var(--ease)", borderRadius: 2,
                  }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--ink)", marginBottom: 8 }}>{o.t}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-60)" }}>{o.h}</div>
                </button>
              ))}
            </div>
          </div>

          {/* Extras */}
          <div className="field">
            <div className="label">Дополнительно</div>
            <ChipMulti values={d.extras} onToggle={toggleExtra}
              options={[
                { value: "terrace",   label: "Терраса" },
                { value: "garage",    label: "Гараж" },
                { value: "pool",      label: "Бассейн" },
                { value: "concierge", label: "Консьерж" },
                { value: "gated",     label: "Закрытая территория" },
              ]}
            />
          </div>
        </div>

        {/* Actions */}
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 80, gap: 16 }}>
          <button className="btn btn-ghost" onClick={onBack}>← Назад</button>
          <button className="btn btn-gold btn-lg" onClick={submit}>
            Получить отчёт <span className="arrow">→</span>
          </button>
        </div>
      </main>

      <Footer />
    </div>
  );
}

// ═══════════ SCREEN 3 — REPORT GENERATION (5 горизонтальных этапов, 10 сек каждый) ═══════════
function ScreenReport({ data, setData, onSubmit }) {
  const { t } = useI18n();
  const [stage, setStage] = useState(0);
  const [stageProgress, setStageProgress] = useState(0);
  const [done, setDone] = useState(false);
  const [name, setName] = useState(data.name || "");
  const [phone, setPhone] = useState(data.phone || "");
  const [c1, setC1] = useState(false);
  const [c2, setC2] = useState(false);

  const stages = [
    { t: "Собираем данные о похожих объектах", s: "Catastro · Idealista · Fotocasa · наша база" },
    { t: "Анализируем динамику цен", s: "За 12 месяцев в радиусе 500 м" },
    { t: "Рассчитываем базовую стоимость", s: "Коэффициенты по этажу, состоянию, площади" },
    { t: "Оцениваем потенциал роста", s: "Что добавит наш подход к продаже" },
    { t: "Формируем отчёт", s: "Диапазон, аналоги, рекомендации" },
  ];

  const STAGE_MS = 3000;

  useEffect(() => {
    if (stage >= stages.length) { setDone(true); return; }
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const p = Math.min(1, (now - start) / STAGE_MS);
      setStageProgress(p);
      if (p < 1) {
        raf = requestAnimationFrame(tick);
      } else {
        setStage(s => s + 1);
        setStageProgress(0);
      }
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [stage]);

  const submit = () => {
    if (!name.trim() || !phone.trim() || !c1) return;
    setData({ ...data, name, phone });
    onSubmit();
  };

  const advantages = [
    {
      t: "Профессиональная фотосъёмка",
      b: "На каждый объект выезжает команда фотографов. Покупатель решает «смотреть или листать дальше» за 3 секунды — по первому кадру.",
    },
    {
      t: "Хоум-стейджинг перед выходом на рынок",
      b: "Готовим объект к съёмке и показам: расстановка, текстиль, нейтрализация личных деталей. Сокращает срок продажи на 30–40%.",
    },
    {
      t: "Закрытые группы покупателей + мультиканальное продвижение",
      b: "Своя база проверенных покупателей и закрытые клубы инвесторов видят объект до публикации на Idealista. Параллельно — таргетированная реклама и партнёрские агентства в Европе.",
    },
    {
      t: "Агенты — выпускники нашего университета",
      b: "У нас свой университет с программой подготовки: право, налоги, оценка, переговоры. С клиентами работают только те, кто сдал экзамен.",
    },
  ];

  return (
    <div className="page fade">
      <Topbar onNav={window.__nav} current="home" />
      <ProgressBar step={2} total={3} />

      <main className="container" style={{ padding: "72px 40px 120px", maxWidth: 1400 }}>
        <StepHeader step={2} total={3} labels={["Адрес", "Характеристики", "Ваш персональный отчёт"]} />

        <p className="rise" style={{ fontSize: 17, color: "var(--ink-60)", marginTop: 12, marginBottom: 48, animationDelay: ".15s" }}>
          Готовим отчёт по адресу: <span style={{ color: "var(--ink)", fontFamily: "var(--serif)", fontSize: 20 }}>{data.address || "Calle Serrano 42, Madrid"}</span>
        </p>

        {/* 5 горизонтальных этапов */}
        <div className="stage-timeline rise" style={{ animationDelay: ".25s" }}>
          {stages.map((s, i) => {
            const isActive = i === stage;
            const isDone = i < stage;
            return (
              <div key={i} className={"stage-cell" + (isActive ? " active" : isDone ? " done" : "")}>
                <div className="stage-num">0{i + 1}</div>
                <div className="stage-title">{s.t}</div>
                <div className="stage-sub">{s.s}</div>
                <div className="stage-check">✓ готово</div>
                <div className="stage-progress"
                  style={{ width: isActive ? `${stageProgress * 100}%` : (isDone ? "100%" : "0") }} />
              </div>
            );
          })}
        </div>

        {done && (
          <div className="scale-in" style={{
            marginTop: 32, padding: 24, background: "var(--gold-10)",
            borderLeft: "2px solid var(--gold)", fontSize: 15,
          }}>
            <span className="mono" style={{ color: "var(--gold-deep)" }}>✓ Готово</span>
            <div style={{ marginTop: 6, color: "var(--ink)" }}>
              Отчёт собран. Оставьте контакты ниже — пришлём в WhatsApp в течение минуты.
            </div>
          </div>
        )}

        {/* ─ Преимущества K&N Elite ─ */}
        <section className="rise" style={{ marginTop: 96, animationDelay: ".35s" }}>
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <div className="eyebrow">Почему именно K&N Elite</div>
            <h2 style={{ marginTop: 14, fontSize: 40 }}>
              Четыре вещи, которые дают <em style={{ color: "var(--gold-deep)", fontStyle: "italic" }}>+6–11% к цене</em>
            </h2>
            <p style={{ marginTop: 14, color: "var(--ink-60)", maxWidth: 640, margin: "14px auto 0" }}>
              Эти практики мы используем для каждого объекта в продаже
            </p>
          </div>

          <div className="adv-grid stagger">
            {advantages.map((a, i) => (
              <div key={i} className="adv-card">
                <div className="adv-num">0{i + 1}</div>
                <div className="adv-title">{a.t}</div>
                <div className="adv-body">{a.b}</div>
              </div>
            ))}
          </div>

          <div style={{ textAlign: "center", marginTop: 48 }}>
            <div style={{
              display: "inline-block",
              padding: "14px 28px",
              background: "var(--paper)",
              border: "1px solid var(--gold-20)",
              fontFamily: "var(--serif)", fontStyle: "italic",
              fontSize: 17, color: "var(--ink-soft)",
            }}>
              Такой отчёт мы готовим для вашего объекта
            </div>
          </div>
        </section>

        {/* Lead form */}
        <div className="container-narrow rise" style={{ marginTop: 96, padding: 0, animationDelay: ".45s" }}>
          <div className="eyebrow">Получить отчёт</div>
          <h3 style={{ marginTop: 14, fontSize: 28 }}>Куда прислать отчёт?</h3>
          <p style={{ marginTop: 10, color: "var(--ink-60)" }}>
            Отправим PDF и короткое голосовое с комментариями аналитика
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 28 }}>
            <div className="field">
              <div className="label">Имя</div>
              <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Иван" />
            </div>
            <div className="field">
              <div className="label">Телефон / WhatsApp</div>
              <input className="input" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="+34 612 345 678" />
            </div>
          </div>

          <div style={{ display: "grid", gap: 14, marginTop: 28 }}>
            <Checkbox checked={c1} onChange={setC1} required>
              Согласен с <a style={{ color: "var(--gold-deep)", textDecoration: "underline" }}>политикой обработки данных</a>
            </Checkbox>
            <Checkbox checked={c2} onChange={setC2}>Хочу получать аналитику по рынку Мадрида и Барселоны</Checkbox>
          </div>

          <button
            className="btn btn-gold btn-lg"
            disabled={!done || !name.trim() || !phone.trim() || !c1}
            onClick={submit}
            style={{
              marginTop: 36, width: "100%",
              opacity: (!done || !name.trim() || !phone.trim() || !c1) ? 0.5 : 1,
              pointerEvents: (!done || !name.trim() || !phone.trim() || !c1) ? "none" : "auto",
            }}>
            Получить отчёт в WhatsApp <span className="arrow">→</span>
          </button>
        </div>
      </main>

      <Footer />
    </div>
  );
}

// ═══════════ SCREEN 4 — CONFIRMATION ═══════════
function ScreenConfirm({ data, onHome, onLogin }) {
  const { t } = useI18n();
  return (
    <div className="page fade">
      <Topbar onNav={window.__nav} current="home" />

      <main className="container-narrow" style={{ padding: "100px 40px 120px", textAlign: "center" }}>
        <div className="scale-in" style={{
          width: 120, height: 120, margin: "0 auto 40px",
          border: "1px solid var(--gold)",
          borderRadius: "50%",
          display: "grid", placeItems: "center",
          background: "var(--gold-10)",
        }}>
          <svg width="52" height="52" viewBox="0 0 52 52" fill="none">
            <path d="M14 26 L23 35 L39 17" stroke="var(--gold-deep)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
              style={{ strokeDasharray: 60, strokeDashoffset: 60, animation: "checkmark-draw .7s .3s var(--ease) forwards" }} />
          </svg>
        </div>
        <style>{`@keyframes checkmark-draw { to { stroke-dashoffset: 0; } }`}</style>

        <div className="eyebrow rise" style={{ animationDelay: ".2s" }}>Отчёт отправлен</div>
        <h1 className="rise" style={{ marginTop: 16, fontSize: 56, animationDelay: ".3s" }}>
          Готово. Проверьте WhatsApp.
        </h1>
        <p className="rise" style={{
          marginTop: 20, fontSize: 18, color: "var(--ink-60)",
          maxWidth: 560, marginLeft: "auto", marginRight: "auto",
          animationDelay: ".4s",
        }}>
          Отчёт пришёл на номер <span style={{ color: "var(--ink)", fontWeight: 500 }}>{data.phone || "+34 612 345 678"}</span>
        </p>
        <p className="rise" style={{ color: "var(--ink-40)", marginTop: 8, fontSize: 13, animationDelay: ".5s" }}>
          Персональный менеджер свяжется в течение часа
        </p>

        <div className="rise" style={{ marginTop: 48, display: "inline-flex", gap: 16, animationDelay: ".6s" }}>
          <button className="btn btn-gold btn-lg">Открыть WhatsApp →</button>
          <button className="btn btn-ghost btn-lg" onClick={onLogin}>Войти в кабинет</button>
        </div>

        <div style={{ marginTop: 120 }}>
          <div className="eyebrow">Что дальше</div>
          <p style={{ marginTop: 12, color: "var(--ink-60)" }}>Мы можем помочь продать ваш объект с премией к рынку</p>

          <div className="stagger" style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 40,
          }}>
            {[
              { photo: PHOTOS.interior1, t: "Оценить выезд", b: "Агент приедет с фотографом и оценит точно", c: "Записаться" },
              { photo: PHOTOS.interior2, t: "Продать с нами", b: "Стейджинг, фото, реклама, показы, нотариус", c: "Обсудить" },
              { photo: PHOTOS.interior3, t: "Кабинет", b: "Все оценки, статус сделки, документы", c: "Войти", action: onLogin },
            ].map((a, i) => (
              <div key={i} className="card card-hover" onClick={a.action} style={{ padding: 0, textAlign: "left", overflow: "hidden" }}>
                <div className="photo photo-hover" style={{ aspectRatio: "16/10" }}>
                  <img src={a.photo} alt="" loading="lazy" />
                </div>
                <div style={{ padding: 28 }}>
                  <h4 style={{ fontFamily: "var(--serif)", fontSize: 22, fontWeight: 400 }}>{a.t}</h4>
                  <div style={{ fontSize: 13, color: "var(--ink-60)", marginTop: 6 }}>{a.b}</div>
                  <div style={{ marginTop: 18, color: "var(--gold-deep)", fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.18em", textTransform: "uppercase" }}>
                    {a.c} →
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <button className="btn btn-ghost" onClick={onHome} style={{ marginTop: 80 }}>
          ← Оценить другой объект
        </button>
      </main>

      <Footer />
    </div>
  );
}

Object.assign(window, { ScreenAddress, ScreenDetails, ScreenReport, ScreenConfirm });