// ─── K&N Elite — Personal report (unified light) ───

const { useState } = React;

function ReportPage({ onBack }) {
  const { t } = useI18n();
  const marketAnim = useCountUp(305000, 1800);
  const targetLowAnim = useCountUp(325000, 2000);
  const targetHighAnim = useCountUp(340000, 2200);

  const comps = [
    { addr: "Calle Serrano 38", area: 108, price: 298000, days: 74 },
    { addr: "Calle Zurbano 54",  area: 115, price: 324000, days: 68 },
    { addr: "Calle Almagro 22",  area: 102, price: 289000, days: 91 },
    { addr: "Calle Fortuny 18",  area: 118, price: 335000, days: 55 },
  ];

  return (
    <div className="page fade">
      <Topbar onNav={window.__nav} current="cabinet" />

      <div className="container-narrow" style={{ padding: "48px 40px 0" }}>
        <button className="btn btn-ghost btn-sm" onClick={onBack}>← {t("rep_back")}</button>
      </div>

      {/* HERO */}
      <section style={{ padding: "40px 40px 72px" }}>
        <div className="container-narrow">
          <div className="eyebrow rise">{t("rep_title")}</div>
          <h1 className="rise" style={{ marginTop: 14, fontSize: 52, animationDelay: ".1s" }}>Calle Serrano 42</h1>
          <div className="mono rise" style={{ color: "var(--ink-40)", marginTop: 8, animationDelay: ".15s" }}>
            Чамбери, Мадрид · 112 м² · 3 комнаты · 2 санузла
          </div>

          <div className="photo rise" style={{
            marginTop: 40, aspectRatio: "21/9", animationDelay: ".2s",
          }}>
            <img src={PHOTOS.interior1} alt="" />
            <div className="photo-tag">Calle Serrano 42</div>
          </div>

          {/* Price range card */}
          <div className="card rise" style={{ marginTop: 48, padding: 48, animationDelay: ".3s" }}>
            <div className="eyebrow">{t("rep_range_title")}</div>
            <div className="num-xl" style={{ marginTop: 18, color: "var(--gold-deep)" }}>
              {targetLowAnim} – {targetHighAnim} €
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 40 }}>
              <div>
                <div className="label">{t("rep_market")}</div>
                <div className="num-lg" style={{ marginTop: 8 }}>{marketAnim} €</div>
                <div style={{ fontSize: 12, color: "var(--ink-60)", marginTop: 6 }}>{t("rep_market_sub")}</div>
              </div>
              <div>
                <div className="label" style={{ color: "var(--gold-deep)" }}>{t("rep_target")}</div>
                <div className="num-lg" style={{ marginTop: 8, color: "var(--gold-deep)" }}>{targetLowAnim}–{targetHighAnim} €</div>
                <div style={{ fontSize: 12, color: "var(--ink-60)", marginTop: 6 }}>{t("rep_target_sub")}</div>
              </div>
            </div>
            <div style={{ marginTop: 28, padding: 18, background: "var(--ivory)", fontSize: 12, color: "var(--ink-60)", borderLeft: "2px solid var(--gold)" }}>
              {t("rep_range_note")}
            </div>
          </div>
        </div>
      </section>

      {/* Methodology */}
      <section style={{ padding: "72px 40px", background: "var(--paper)", borderTop: "1px solid var(--ink-10)", borderBottom: "1px solid var(--ink-10)" }}>
        <div className="container-narrow">
          <div className="eyebrow">{t("rep_methodology")}</div>
          <h2 style={{ marginTop: 14 }}>Как мы получили эту оценку</h2>

          <div className="stagger" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 40 }}>
            {[
              { t: t("rep_m1_title"), b: t("rep_m1_body") },
              { t: t("rep_m2_title"), b: t("rep_m2_body") },
              { t: t("rep_m3_title"), b: t("rep_m3_body") },
              { t: t("rep_m4_title"), b: t("rep_m4_body") },
            ].map((m, i) => (
              <div key={i} className="card card-hover" style={{ padding: 28 }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 40, color: "var(--gold)", lineHeight: 1, marginBottom: 16 }}>0{i + 1}</div>
                <h4 style={{ fontFamily: "var(--serif)", fontSize: 20, fontWeight: 400 }}>{m.t}</h4>
                <p style={{ marginTop: 10, fontSize: 14 }}>{m.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Comparables */}
      <section style={{ padding: "72px 40px" }}>
        <div className="container-narrow">
          <div className="eyebrow">{t("rep_market_area")}</div>
          <h2 style={{ marginTop: 14 }}>Проданные аналоги</h2>

          <div style={{ marginTop: 32, background: "var(--paper)", border: "1px solid var(--ink-10)" }}>
            <div style={{
              display: "grid", gridTemplateColumns: "2fr 100px 140px 140px 120px",
              padding: "16px 24px", borderBottom: "1px solid var(--ink-10)",
              fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-60)",
            }}>
              <div>{t("rep_comp_addr")}</div>
              <div>{t("rep_comp_area")}</div>
              <div>{t("rep_comp_price")}</div>
              <div>{t("rep_comp_pm")}</div>
              <div>{t("rep_comp_days")}</div>
            </div>
            {comps.map((c, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "2fr 100px 140px 140px 120px",
                padding: "18px 24px", borderBottom: "1px solid var(--ink-10)",
                fontSize: 14, alignItems: "center",
              }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 16 }}>{c.addr}</div>
                <div>{c.area} м²</div>
                <div style={{ fontFamily: "var(--mono)", color: "var(--gold-deep)" }}>{fmt(c.price)} €</div>
                <div style={{ fontFamily: "var(--mono)", color: "var(--ink-60)" }}>{fmt(c.price / c.area)}</div>
                <div style={{ fontFamily: "var(--mono)", color: "var(--ink-60)" }}>{c.days} дней</div>
              </div>
            ))}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 24 }}>
            <div className="card">
              <div className="eyebrow">{t("rep_avg_expo")}</div>
              <div className="num-lg" style={{ marginTop: 10 }}>84 <span style={{ fontSize: 18, color: "var(--ink-60)" }}>дней</span></div>
            </div>
            <div className="card">
              <div className="eyebrow">{t("rep_med_pm")}</div>
              <div className="num-lg" style={{ marginTop: 10 }}>2 850 €</div>
            </div>
          </div>
        </div>
      </section>

      {/* Recommendations */}
      <section style={{ padding: "72px 40px", background: "var(--paper)", borderTop: "1px solid var(--ink-10)" }}>
        <div className="container-narrow">
          <div className="eyebrow">{t("rep_rec")}</div>
          <h2 style={{ marginTop: 14 }}>Рекомендации для вашего объекта</h2>
          <div className="stagger" style={{ display: "grid", gap: 14, marginTop: 32 }}>
            {[t("rep_rec_1"), t("rep_rec_2"), t("rep_rec_3"), t("rep_rec_4")].map((r, i) => (
              <div key={i} style={{
                display: "flex", gap: 20, alignItems: "flex-start",
                padding: "20px 24px", background: "var(--ivory)", borderLeft: "2px solid var(--gold)",
              }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 24, color: "var(--gold-deep)", lineHeight: 1 }}>0{i + 1}</div>
                <div style={{ fontSize: 15 }}>{r}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Next step — manager */}
      <section style={{ padding: "72px 40px 120px" }}>
        <div className="container-narrow">
          <div className="card" style={{ padding: 48, display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 40, alignItems: "center" }}>
            <div className="photo" style={{ width: 140, height: 140, borderRadius: "50%", overflow: "hidden", border: "2px solid var(--gold-20)" }}>
              <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&q=80&auto=format&fit=crop" alt="Карлос Тенорио" />
            </div>
            <div>
              <div className="eyebrow">Ваш персональный менеджер</div>
              <h3 style={{ marginTop: 10, fontSize: 30 }}>Карлос Тенорио</h3>
              <div className="mono" style={{ color: "var(--ink-60)", marginTop: 6 }}>8 лет в K&N Elite · 142 сделки в Чамбери</div>
              <p style={{ marginTop: 14, fontSize: 15, maxWidth: 520, color: "var(--ink-soft)" }}>
                Приедет с фотографом и оценщиком, посмотрит объект, уточнит цифру и предложит план продажи.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <button className="btn btn-gold">Написать в WhatsApp</button>
              <button className="btn btn-ghost">Записаться на выезд</button>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

Object.assign(window, { ReportPage });