// extras.jsx — QR, отзывы из опроса, дорожная карта

// ── QR-секция: «Открой сайт на телефоне» ─────────────────────────
function ShareQR({ visible = true }) {
  if (!visible) return null;
  // qrserver.com — публичный QR API. Цвет совпадает с темой.
  const url = "https://ekokrug.ru";
  const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(url)}&size=480x480&color=1a1a17&bgcolor=f4eedc&margin=8&format=svg`;
  return (
    <section id="share" className="section-bg-card">
      <div className="wrap">
        <div className="share-grid">
          <div>
            <div className="eyebrow">для презентации</div>
            <h2 className="display h2" style={{ marginTop: 16 }}>
              Откройте <span style={{ color: "var(--accent)" }}>прямо сейчас</span>
            </h2>
            <p className="lead" style={{ marginTop: 18, maxWidth: "44ch" }}>
              Этот лендинг работает параллельно с защитой проекта.
              Наведите камеру — комиссия и однокурсники откроют сайт
              на телефоне и пройдутся по нему сами.
            </p>
            <div className="share-meta">
              <div className="row">
                <span className="k">URL</span>
                <span className="v mono">ekokrug.ru</span>
              </div>
              <div className="row">
                <span className="k">Опрос</span>
                <span className="v">→ <a href="#survey" style={{ color: "var(--accent)", borderBottom: "1px solid currentColor" }}>пройти за 3 минуты</a></span>
              </div>
              <div className="row">
                <span className="k">Telegram</span>
                <span className="v mono">@ekokrug_bot</span>
              </div>
            </div>
          </div>

          <div className="qr-card">
            <div className="qr-frame">
              <img src={qrSrc} alt="QR-код на ekokrug.ru" loading="lazy" />
              <div className="qr-corners">
                <span /><span /><span /><span />
              </div>
            </div>
            <div className="qr-foot">
              <div className="mono qr-host">ekokrug.ru</div>
              <div className="qr-hint">Наведите камеру телефона</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── Цитаты респондентов опроса (placeholder под реальные данные) ────
function Quotes({ visible = true }) {
  if (!visible) return null;
  const quotes = [
  {
    q: "Я готова сортировать, но мусоропровод съедает всю мотивацию: спустил пакет — и забыл.",
    a: "Анна, 42, Владивосток",
    tag: "о реальности"
  },
  {
    q: "Удобрения за 8-10 тысяч в сезон — это уже привычка, но в составе нет уверенности никогда.",
    a: "Сергей, 51, Уссурийск",
    tag: "о деньгах"
  },
  {
    q: "Думала о компосте, но в квартире это невозможно. Мошки, запах. Поэтому всё в мусор.",
    a: "Елена, 38, Владивосток",
    tag: "о страхах"
  }];

  return (
    <section id="voices" 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">Опрос «Дача, почва и кухонные отходы» уже идёт в садоводческих сообществах Приморья. Здесь — три цитаты из первых ответов, показывают рамку, в которой мы работаем. Финальная подборка и графики выйдут в открытом отчёте через 4 недели.




          </p>
        </div>

        <div className="quotes-grid">
          {quotes.map((qt, i) => {
            const [ref, seen] = useInView(0.1);
            return (
              <figure key={i} ref={ref}
              className={`quote-card reveal reveal-d-${i + 1} ${seen ? "in" : ""}`}>
                <div className="quote-mark">&ldquo;</div>
                <blockquote>{qt.q}</blockquote>
                <figcaption>
                  <div className="qt-tag mono">{qt.tag}</div>
                  <div className="qt-author">— {qt.a}</div>
                </figcaption>
              </figure>);

          })}
        </div>

        <div className="quotes-meta">
          <span className="chip"><span className="dot" />сбор данных идёт</span>
          <span className="mono">ОПРОС ИДЁТ · ЦЕЛЬ 100 · ИТОГИ ПОСЛЕ СБОРА ДАННЫХ</span>
        </div>
      </div>
    </section>);

}

// ── Дорожная карта (короткая, визуальная) ─────────────────────────
function Roadmap({ visible = true }) {
  if (!visible) return null;
  const phases = [
  { period: "март–май", year: "2026", title: "Опрос и интервью", text: "Проблема, барьеры, публичная анкета и декомпозиция работ.", status: "active" },
  { period: "май", year: "2026", title: "Защита проекта", text: "Учебная защита, сайт для комиссии и сбор первых внешних ответов.", status: "active" },
  { period: "июн–июл", year: "2026", title: "Прототип v1", text: "4-ярусная вермиферма-тумба из пищевого ПП. Тест на 5 кг отходов.", status: "next" },
  { period: "авг–окт", year: "2026", title: "Пилот у 5 семей", text: "Сетки обратной связи. Корректировка инструкции и упаковки.", status: "next" },
  { period: "ноя–фев", year: "2027", title: "Пилотная партия", text: "50–100 комплектов. Выход на маркетплейсы и в эко-блоги.", status: "next" }];

  return (
    <section id="roadmap">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">дорожная карта</div>
            <h2 className="display h2" style={{ marginTop: 16 }}>
              Где мы сейчас и куда идём
            </h2>
          </div>
          <p className="lead">Учебный проект защищается в мае 2026. Но ЭкоКруг — не «слайды на зачёт», а реальный путь к продукту на маркетплейсе. Вот этапы.


          </p>
        </div>

        <div className="roadmap-track">
          {phases.map((p, i) => {
            const [ref, seen] = useInView(0.2);
            return (
              <div ref={ref} key={i}
              className={`roadmap-step ${p.status} reveal reveal-d-${i + 1} ${seen ? "in" : ""}`}>
                <div className="rm-dot">
                  {p.status === "active" ? <span className="rm-pulse" /> : null}
                </div>
                <div className="rm-when mono">
                  <div>{p.period}</div>
                  <div className="rm-year">{p.year}</div>
                </div>
                <h4 className="display">{p.title}</h4>
                <p>{p.text}</p>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

Object.assign(window, { ShareQR, Quotes, Roadmap });