// sections-d.jsx — «Что в комплекте» (flatlay) и «Результат» (биогумус для дачной земли)

function KitContents({ visible = true }) {
  if (!visible) return null;
  const [ref, seen] = useInView(0.1);
  const items = [
    { 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-видео." },
  ];

  return (
    <section id="kit" className="section-bg-soft">
      <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>

        <div ref={ref} className={`kit-grid reveal ${seen ? "in" : ""}`}>
          <div className="kit-photo">
            <img src="images/product-flatlay.webp" alt="Комплект ЭкоКруг" loading="lazy"/>
          </div>
          <div className="kit-list">
            {items.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>
    </section>
  );
}

function Result({ visible = true }) {
  if (!visible) return null;
  const [ref, seen] = useInView(0.1);

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

        <div ref={ref} className={`result-grid reveal ${seen ? "in" : ""}`}>
          <div className="result-photo">
            <img src="images/biogumus-pots.webp" alt="Биогумус и рассада" loading="lazy"/>
          </div>
          <div className="result-stats">
            <div className="rs-row">
              <div className="rs-n display">×<StatCounter to={6}/></div>
              <div className="rs-lbl">эффективнее свежего навоза, без патогенов и семян сорняков</div>
            </div>
            <div className="rs-row">
              <div className="rs-n display">+<StatCounter to={35}/>%</div>
              <div className="rs-lbl">средний прирост урожая в тестах на томатах и зелени</div>
            </div>
            <div className="rs-row">
              <div className="rs-n display"><StatCounter to={500}/> мл</div>
              <div className="rs-lbl">вермичая в неделю — на опрыскивание листвы 1:10</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { KitContents, Result });