// sections-b.jsx — Numbers (calculator), Products

// ─── Numbers + calculator ────────────────────────────────────────
function Numbers({ visible }) {
  if (!visible) return null;
  const [people, setPeople] = React.useState(3);
  const [budget, setBudget] = React.useState(6000);

  // Допущения, мягкие, помечены как «предварительные»
  const wasteKg = people * 0.6 * 30; // кг органики/мес
  const wasteYear = (wasteKg * 12 / 1000).toFixed(1); // т/год
  const humusKg = (wasteKg * 0.35).toFixed(1);
  const savings = budget;
  const productPrice = 9900;
  const payback = Math.max(1, Math.ceil(productPrice / Math.max(budget / 12, 200)));

  return (
    <section id="numbers" className="section-bg-soft">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">цифры</div>
            <h2 className="display h2" style={{ marginTop: 16 }}>
              Посчитайте свой круг
            </h2>
          </div>
          <p className="lead">
            Передвиньте ползунки — увидите, сколько органики
            ваша семья пропускает через себя и какой ЭкоКруг даст
            возврат. Цифры — ориентировочные, основаны на средних
            бытовых нормах ФАО.
          </p>
        </div>

        <div className="calc">
          <div className="calc-controls">
            <div className="calc-input">
              <div className="head">
                <div className="label">Человек в семье</div>
                <div className="val">{people}</div>
              </div>
              <input type="range" min="1" max="6" step="1"
              value={people} onChange={(e) => setPeople(+e.target.value)} />
            </div>
            <div className="calc-input">
              <div className="head">
                <div className="label">Тратится на удобрения, ₽ / сезон</div>
                <div className="val">{budget.toLocaleString("ru-RU")} ₽</div>
              </div>
              <input type="range" min="0" max="15000" step="500"
              value={budget} onChange={(e) => setBudget(+e.target.value)} />
            </div>

            <div className="press-row" style={{ marginTop: 12 }}>
              <span>предварительный расчёт</span>
              <span>FAO, 2024 · ВЦИОМ, 2024</span>
            </div>
          </div>

          <div className="calc-result">
            <div className="head">Ваш ЭкоКруг за год</div>
            <div className="big">
              <StatCounter to={+wasteYear} suffix=" т" decimals={1} />
            </div>
            <div className="sub">органики не уедет на полигон — это {wasteKg.toFixed(0)} кг ежемесячно</div>

            <div className="row">
              <div className="k">Биогумуса в месяц</div>
              <div>{humusKg} кг</div>
            </div>
            <div className="row">
              <div className="k">Экономия за сезон</div>
              <div>{savings.toLocaleString("ru-RU")} ₽</div>
            </div>
            <div className="row">
              <div className="k">Окупаемость</div>
              <div>~ {payback} мес</div>
            </div>
          </div>
        </div>

        {/* Большая статистика снизу */}
        <div className="metrics" style={{ marginTop: 32 }}>
          <div className="metrics-head">
            <div className="eyebrow">контекст</div>
            <h3 className="display h3" style={{ marginTop: 14, marginBottom: 0 }}>
              Почему это важно прямо сейчас
            </h3>
          </div>
          <div className="metrics-grid">
            <div className="metric">
              <div className="n">
                <StatCounter to={40} suffix="%" />
              </div>
              <div className="l">всей мировой еды оказывается на свалках. ФАО, 2024</div>
            </div>
            <div className="metric">
              <div className="n">
                <StatCounter to={1.3} decimals={1} /><sup>млрд&nbsp;т</sup>
              </div>
              <div className="l">пищевых отходов выбрасывается ежегодно в мире</div>
            </div>
            <div className="metric">
              <div className="n">
                <StatCounter to={95} suffix="%" />
              </div>
              <div className="l">средняя заполненность полигонов ТКО в Приморье</div>
            </div>
            <div className="metric">
              <div className="n">
                <StatCounter to={67} suffix="%" />
              </div>
              <div className="l">домохозяйств края имеют дачные участки</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Products ────────────────────────────────────────────────────
function Products({ visible }) {
  if (!visible) return null;
  const items = [
  {
    featured: true,
    badge: "основной комплект",
    title: "ЭкоКруг Старт",
    price: "9 900",
    note: "Полный набор для квартиры",
    list: [
    "4-ярусная вермиферма-тумба, ≈ 90 л (45 × 40 × 90 см)",
    "Краник вермичая на узкой боковой стороне (25–30 см от пола)",
    "Хозяйственный ярус для совка, перчаток и бутылок",
    "Старт-набор червей Eisenia fetida — 500 г",
    "Подстилка: кокосовое волокно 1 кг",
    "Инструкция «Старт за 30 минут» + QR-видео",
    "Памятка «Что можно / нельзя» (А4 цвет)",
    "Гарантия 12 мес + замена червей в 30 дней",
    "Доступ к ТГ-боту «ЭкоКруг» — 24/7"],

    cta: "Заказать комплект"
  },
  {
    badge: "пополнение",
    title: "Докорм-сет",
    price: "750",
    note: "Подстилка + ускоритель",
    list: [
    "Кокосовое волокно 500 г",
    "Биоактиватор для червей 100 г",
    "Универсальная подкормка",
    "Хватает на 2–3 месяца"],

    cta: "В корзину"
  },
  {
    badge: "для расширения",
    title: "+ Черви",
    price: "950",
    note: "за 200 г / для второго яруса",
    list: [
    "Дополнительная популяция червей",
    "Сертификат биологического статуса",
    "Безопасны для домашних животных",
    "Подходит для расширения колонии"],

    cta: "Добавить"
  }];


  return (
    <section id="products">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">комплект</div>
            <h2 className="display h2" style={{ marginTop: 16 }}>
              Один набор — <span style={{ color: "var(--accent)" }}>всё для старта</span>
            </h2>
          </div>
          <p className="lead">
            Открыл коробку — и через 30 минут ферма уже работает.
            Никаких докупок, никакого «а где взять субстрат».
            Расходники докупаются раз в пару месяцев, если хочется
            ускорить переработку.
          </p>
        </div>

        {/* Flatlay + что в коробке */}
        <div className="kit-grid" style={{ marginBottom: 56 }}>
          <div className="kit-photo">
            <img src="images/product-flatlay.webp" alt="Комплект ЭкоКруг" loading="lazy"/>
          </div>
          <div className="kit-list">
            {[
              { n: "01", h: "Вермиферма-тумба",     p: "4-ярусный корпус 45 × 40 × 90 см. Краник на боковой стороне." },
              { n: "02", h: "Старт-набор червей",   p: "500 г Eisenia fetida в банке-перевозке." },
              { n: "03", h: "Подстилка",            p: "1 кг кокосового волокна — на первую закладку." },
              { n: "04", h: "Бутылка для вермичая", p: "500 мл стекло — для слива и хранения." },
              { n: "05", h: "Инструкция «Старт за 30 минут»", p: "А4 цветная памятка + QR-видео." },
            ].map((it) => (
              <div className="kit-row" key={it.n}>
                <div className="kit-num mono">{it.n}</div>
                <div>
                  <div className="kit-label">{it.h}</div>
                  <div className="kit-sub">{it.p}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Карточки цен */}
        <div className="product-grid">
          {items.map((p, i) => {
            const [ref, seen] = useInView(0.1);
            return (
              <div key={p.title} ref={ref}
              className={`product ${p.featured ? "featured" : ""} reveal reveal-d-${i + 1} ${seen ? "in" : ""}`}>
                <div className="badge">{p.badge}</div>
                <h4>{p.title}</h4>
                <div className="price">
                  {p.price}<span className="cur">₽</span>
                </div>
                <div className="price-note">{p.note}</div>
                <ul>
                  {p.list.map((l) => <li key={l}>{l}</li>)}
                </ul>
                <a href="#contact"
                className={`btn ${p.featured ? "btn-primary" : "btn-ghost"}`}>
                  {p.cta} <span className="arrow">→</span>
                </a>
              </div>);

          })}
        </div>

        {/* Сравнение с рынком */}
        <div className="worm-strip" style={{ marginTop: 40 }}>
          <div>
            <div className="eyebrow">для сравнения</div>
            <h3 className="display" style={{ fontSize: 28, fontWeight: 500, margin: "12px 0 8px", letterSpacing: "-0.005em" }}>
              На рынке аналог стоит в 3–5 раз дороже
            </h3>
            <p className="lead" style={{ fontSize: 16, marginTop: 8 }}>Worm Factory 360 — 15–18 тыс ₽ (импорт). Hungry Bin — 20–25 тыс ₽. Vermibox — 12-18 тыс ₽ (логистика на ДВ накладна). ЭкоКруг — 9 900 ₽ с локальной поддержкой.



            </p>
          </div>
          <div className="worm-art">
            <div className="worm" style={{ top: "20%", left: 0, width: "30%", animationDuration: "9s", animationDelay: "0s" }} />
            <div className="worm" style={{ top: "50%", left: 0, width: "40%", animationDuration: "11s", animationDelay: "1.5s" }} />
            <div className="worm" style={{ top: "78%", left: 0, width: "25%", animationDuration: "8s", animationDelay: "3s" }} />
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Numbers, Products });