/* ============================================================
   Paella — Методика (visual explainer)
   ============================================================ */

const WEIGHTS = [
  { label: "Вкус", pct: 40, color: "var(--coral)" },
  { label: "Цена/качество", pct: 20, color: "var(--orange)" },
  { label: "Подача", pct: 15, color: "oklch(0.62 0.13 350)" },
  { label: "Закажу снова", pct: 15, color: "oklch(0.66 0.13 150)" },
  { label: "Порция", pct: 10, color: "oklch(0.66 0.11 250)" },
];

const STAGES = [
  { tag: "Этап 1 · Сбор данных", title: "Открытые источники", items: ["реальные рестораны из 2ГИС", "меню, цены и фото блюд", "оценки гостей (Яндекс.Еда)", "обработанные отзывы (2ГИС)"] },
  { tag: "Этап 2 · Запуск", title: "Сообщество", items: ["пользовательские оценки блюд", "свои фотографии и быстрые теги", "уточнение рейтингов блюд", "проверка через активных гостей"] },
  { tag: "Этап 3 · Рост", title: "Сообщество", items: ["больше отзывов", "уточнение Paella Score", "персональные рекомендации", "рейтинги по районам"] },
  { tag: "Этап 4 · B2B", title: "Аналитика", items: ["что чаще сохраняют", "негативные сигналы", "что продвигать", "спрос по районам и сезонам"] },
];

function MethodSection({ children, eyebrow, title, sub }) {
  return (
    <section className="sec">
      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
      {title && <h2 className="sec-title" style={{ margin: "8px 0 6px" }}>{title}</h2>}
      {sub && <p className="sec-sub" style={{ maxWidth: 660, marginBottom: 18 }}>{sub}</p>}
      {children}
    </section>
  );
}

function MethodologyScreen({ ctx }) {
  return (
    <div className="fadein wrap">
      <div className="m-hero">
        <span className="eyebrow"><Icon name="sparkles" size={13} style={{ verticalAlign: "-2px", marginRight: 4 }} />Методика Paella</span>
        <h1 style={{ fontSize: 40, fontWeight: 800, letterSpacing: "-0.035em", margin: "10px 0 0", lineHeight: 1.05 }}>
          Мы оцениваем <span className="serif-i" style={{ color: "var(--coral-ink)" }}>конкретное блюдо</span>, а не только ресторан
        </h1>
        <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.55, maxWidth: 680, marginTop: 16 }}>
          Его вкус, стабильность, цену, подачу и реальный пользовательский опыт. Даже в хорошем ресторане одни позиции меню сильные, а другие — средние. Поэтому Paella строит рейтинг на уровне блюда.
        </p>
      </div>

      {/* block 1: compare */}
      <MethodSection eyebrow="Главная идея" title="Ресторан или блюдо?" sub="Большинство сервисов помогают выбрать ресторан. Paella помогает выбрать конкретное блюдо.">
        <div className="m-compare">
          <div className="m-col dim">
            <h4>Обычные сервисы</h4>
            <ul>
              <li>оценивают ресторан в целом</li>
              <li>смешивают кухню, сервис, интерьер и доставку</li>
              <li>не всегда помогают понять, что именно заказать</li>
            </ul>
          </div>
          <div className="m-col hot">
            <h4>Paella</h4>
            <ul>
              <li>оценивает конкретное блюдо</li>
              <li>показывает сильные и слабые стороны блюда</li>
              <li>объясняет, кому это блюдо подойдёт</li>
              <li>помогает быстрее принять решение</li>
            </ul>
          </div>
        </div>
      </MethodSection>

      {/* block 2: Paella Score 2.0 — единая шкала */}
      <MethodSection eyebrow="Paella Score" title="Один балл — единая шкала 0–100" sub="У каждого блюда ровно один балл Paella Score. Разница — в том, сколько за ним реальных данных, и это честно показано прямо на карточке.">
        <div className="panel" style={{ padding: 24 }}>
          <div style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
            {[
              ["heart", "var(--olive)", "По оценкам гостей", "Балл почти целиком складывается из реальных голосов гостей, заказавших блюдо (Яндекс.Еда). Самый надёжный уровень."],
              ["message", "var(--gold)", "По отзывам", "Реальных голосов нет, но блюдо заметно обсуждают в отзывах (2ГИС) — балл опирается на долю позитивных упоминаний."],
              ["sparkles", "var(--ink-3)", "Прогноз Paella (~)", "Реальных оценок пока мало. Балл — ожидание прозрачной модели, помечен знаком «~». Уточнится оценками гостей."],
            ].map((x, i) => (
              <div key={i} style={{ padding: 16, background: "var(--bg-2)", borderRadius: 14 }}>
                <div className="row" style={{ gap: 8, marginBottom: 8 }}>
                  <Icon name={x[0]} size={17} fill={x[1]} sw={0} style={{ color: x[1] }} />
                  <b style={{ fontSize: 14.5 }}>{x[2]}</b>
                </div>
                <p className="muted" style={{ fontSize: 13, lineHeight: 1.5, margin: 0 }}>{x[3]}</p>
              </div>
            ))}
          </div>
          <div className="note" style={{ marginTop: 18, background: "var(--green-soft, #e9efde)" }}>
            <b>Как реальные данные вытесняют прогноз.</b> Балл — взвешенное среднее: <b>Score = (прогноз×8 + голоса гостей + сигналы отзывов×2) ÷ (8 + голоса + сигналы×2)</b>. Прогноз весит как 8 «виртуальных голосов»: у блюда со 100 реальными оценками доля прогноза — около 7%, у блюда без оценок — 100% (и знак «~»). Это та же механика, что в рейтинге IMDb Top-250. Ваша оценка в Paella тоже становится голосом — со временем балл будет опираться только на живых людей.
          </div>
        </div>
      </MethodSection>

      {/* block 2b: из чего состоит прогноз */}
      <MethodSection eyebrow="Прогноз Paella" title="Из чего состоит прогноз, когда оценок ещё нет" sub="Прозрачная модель весов: считается по данным заведения, цене и составу блюда. Один и тот же вход всегда даёт один и тот же балл — никакой магии.">
        <div className="panel" style={{ padding: 24 }}>
          <div className="weights">
            {WEIGHTS.map((w) => (
              <div className="wrow" key={w.label}>
                <span className="wlab">{w.label}</span>
                <span className="wtrack"><span className="wfill" style={{ width: w.pct + "%", background: w.color }}></span></span>
                <span className="wpct">{w.pct}%</span>
              </div>
            ))}
          </div>
          <div className="note" style={{ marginTop: 20 }}>
            На карточке каждого блюда есть блок «Paella Score» — там видно, из чего сложился именно его балл: сколько реальных оценок, сколько упоминаний в отзывах и какова доля прогноза.
          </div>
        </div>
      </MethodSection>

      {/* how each factor is computed */}
      <MethodSection eyebrow="Как это считается" title="Откуда берётся каждый фактор" sub="Одни оценки гости ставят в отзыве, а две — стабильность и популярность — Paella считает сама по реакциям сообщества.">
        <div className="stage" style={{ gridTemplateColumns: "1fr" }}>
          <div className="m-compare">
            <div className="m-col" style={{ background: "var(--surface)", boxShadow: "var(--sh-sm)" }}>
              <span className="badge b-olive"><Icon name="user" size={12} />Вы оцениваете сами</span>
              <h4 style={{ margin: "12px 0 10px", fontSize: 17 }}>Оценки из отзыва</h4>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 11 }}>
                {[
                  ["Вкус", "ваша оценка вкуса блюда (звёзды в форме «Оценить по баллам»)"],
                  ["Порция", "насколько блюдо сытное и оправдывает размер"],
                  ["Подача", "как блюдо выглядит, аккуратность и эстетика"],
                  ["Цена / качество", "соответствие цены полученному впечатлению"],
                ].map((x, i) => (
                  <li key={i} style={{ display: "flex", gap: 10 }}>
                    <span style={{ color: "var(--olive)", flex: "none", marginTop: 1 }}><Icon name="star" size={17} fill="currentColor" sw={0} /></span>
                    <span style={{ fontSize: 13.5, lineHeight: 1.45 }}><b>{x[0]}.</b> <span className="muted">{x[1]}</span></span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="m-col hot">
              <span className="badge b-plum"><Icon name="sparkles" size={12} />Paella считает сама</span>
              <h4 style={{ margin: "12px 0 10px", fontSize: 17 }}>Алгоритмические факторы</h4>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <div>
                  <div className="row" style={{ gap: 8 }}><Icon name="shield" size={16} style={{ color: "var(--olive-deep)" }} /><b style={{ fontSize: 14.5 }}>Стабильность</b></div>
                  <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.5, margin: "5px 0 0" }}>
                    Насколько предсказуемо вам понравится блюдо. Если гости ставят блюду <b>похожие оценки</b> — оно стабильное: закажете и получите именно то, что ожидали. Если мнения сильно расходятся — стабильность ниже, результат может быть разным от раза к разу.
                  </p>
                </div>
                <div>
                  <div className="row" style={{ gap: 8 }}><Icon name="trendUp" size={16} style={{ color: "var(--olive-deep)" }} /><b style={{ fontSize: 14.5 }}>Популярность</b></div>
                  <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.5, margin: "5px 0 0" }}>
                    Сколько внимания привлекает блюдо: как часто его заказывают, <b>сохраняют</b> в избранное, отмечают «хочу попробовать» и обсуждают в отзывах. Чем больше гостей реагирует на блюдо — тем выше его популярность.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="note" style={{ marginTop: 16 }}>
          Коротко: вы оцениваете вкус, порцию, подачу и цену — а стабильность и популярность Paella рассчитывает сама по тому, как много гостей оценивает блюдо и насколько дружно.
        </div>
      </MethodSection>

      {/* block 3: signals demo */}
      <MethodSection eyebrow="Сигналы по блюду" title="Из впечатлений — в структуру" sub="Paella не просто хранит отзывы, а переводит впечатления пользователей в структурированные сигналы.">
        <div className="sigdemo">
          <div className="muted" style={{ fontSize: 13, fontWeight: 700, marginBottom: 8 }}>Пользователь пишет:</div>
          <p className="quote" style={{ margin: 0 }}>«Паста вкусная, сливочная, порция большая, но немного жирная.»</p>
          <div className="arrow-down"><Icon name="arrowDown" size={26} /></div>
          <div className="muted" style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>Paella превращает это в сигналы:</div>
          <div className="tagwrap">
            <Badge cls="b-coral">насыщенный вкус</Badge>
            <Badge cls="b-green">большая порция</Badge>
            <Badge cls="b-sand">жирновато</Badge>
            <Badge cls="b-orange">подходит для сытного ужина</Badge>
          </div>
        </div>
        <div className="m-compare" style={{ marginTop: 16 }}>
          <div className="m-col" style={{ background: "var(--green-soft)", borderColor: "transparent" }}>
            <h4 style={{ color: "oklch(0.45 0.13 150)" }}>Положительные сигналы</h4>
            <div className="tagwrap">
              {["насыщенный вкус","большая порция","красивая подача","хорошее цена/качество","хочется заказать снова","must try"].map((t, i) => <span className="badge b-green" key={i}>{t}</span>)}
            </div>
          </div>
          <div className="m-col dim">
            <h4>Отрицательные сигналы</h4>
            <div className="tagwrap">
              {["пересолено","жирновато","слишком остро","маленькая порция","долго ждать","цена выше ожиданий"].map((t, i) => <span className="badge b-sand" key={i}>{t}</span>)}
            </div>
          </div>
        </div>
      </MethodSection>

      {/* block 4 + 5: recommendation + scenario */}
      <MethodSection eyebrow="Сценарий" title="«Блюда рядом» как ключевой сценарий" sub="Paella меняет привычный сценарий выбора еды: пользователь идёт не просто в ресторан, а за конкретным блюдом.">
        <div className="flow">
          {[
            ["Пользователь открывает Paella", "Геолокация определяет, что рядом"],
            ["Видит лучшие блюда рядом", "Лента карточек по рейтингу и расстоянию"],
            ["Выбирает блюдо", "По фото, рейтингу, цене и расстоянию"],
            ["Понимает плюсы и минусы", "Сильные и слабые сигналы по блюду"],
            ["Идёт в ресторан с конкретной целью", "Уже зная, что именно заказать"],
          ].map((s, i) => (
            <div className="flowstep" key={i}>
              <div className="n">{i + 1}</div>
              <div><h4>{s[0]}</h4><p>{s[1]}</p></div>
            </div>
          ))}
        </div>
      </MethodSection>

      {/* block 6: stages */}
      <MethodSection eyebrow="Развитие данных" title="Этапы развития данных" sub="Источники данных растут по мере развития проекта — от сбора открытых данных до B2B-аналитики для ресторанов.">
        <div className="stage">
          {STAGES.map((s, i) => (
            <div className="stage-card" key={i}>
              <span className="stage-tag">{s.tag}</span>
              <h4>{s.title}</h4>
              <ul>{s.items.map((it, j) => <li key={j}>{it}</li>)}</ul>
            </div>
          ))}
        </div>
      </MethodSection>

      {/* block 7 + 8: fast review + trust */}
      <div className="m-compare" style={{ marginTop: 38 }}>
        <div className="m-col" style={{ background: "var(--surface)", boxShadow: "var(--sh-sm)" }}>
          <span className="eyebrow"><Icon name="clock" size={13} style={{ verticalAlign: "-2px", marginRight: 4 }} />10–20 секунд</span>
          <h4 style={{ marginTop: 10, fontSize: 19 }}>Почему быстрый отзыв важнее длинного текста</h4>
          <div className="flow" style={{ marginTop: 14 }}>
            {["Выбрал блюдо", "Нажал «Взял бы ещё / Нормально / Не рекомендую»", "Выбрал 2–3 тега", "При желании добавил фото или текст"].map((s, i) => (
              <div className="flowstep" key={i} style={{ boxShadow: "none", background: "var(--bg-2)" }}><div className="n">{i + 1}</div><div><h4 style={{ fontSize: 14.5 }}>{s}</h4></div></div>
            ))}
          </div>
        </div>
        <div className="m-col" style={{ background: "var(--surface)", boxShadow: "var(--sh-sm)" }}>
          <span className="eyebrow"><Icon name="shield" size={13} style={{ verticalAlign: "-2px", marginRight: 4 }} />Доверие</span>
          <h4 style={{ marginTop: 10, fontSize: 19 }}>Как Paella защищает рейтинг</h4>
          <ul style={{ margin: "14px 0 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
            {["учитывать не только оценку, но и поведение пользователя","снижать вес подозрительных однотипных отзывов","повышать вес активных пользователей с историей","не давать одному пользователю резко менять рейтинг","показывать количество сигналов для надёжности"].map((t, i) => (
              <li key={i} style={{ display: "flex", gap: 10, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.4 }}>
                <span style={{ color: "var(--green)", flex: "none", marginTop: 1 }}><Icon name="check" size={18} /></span>{t}
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* block 8.5: AI recommendation */}
      <MethodSection eyebrow="AI-подбор" title="Как Paella подбирает блюда под вас" sub="Поверх рейтинга и сигналов Paella строит персональную рекомендацию — и объясняет её человеческим языком.">
        <div className="m-compare">
          <div className="m-col dim">
            <h4>Что учитывает подбор</h4>
            <div className="tagwrap" style={{ marginTop: 4 }}>
              {["любимые категории","что не нравится","бюджет","ситуация (свидание, обед, ужин)","настроение","оценки гостей","отзывы","Paella Score"].map((t, i) => <span className="badge b-sand" key={i} style={{ fontSize: 13, padding: "6px 12px" }}>{t}</span>)}
            </div>
          </div>
          <div className="m-col hot">
            <h4>Главное отличие</h4>
            <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--ink)", margin: 0 }}>
              Мы не просто показываем блюдо с высоким рейтингом. Мы объясняем, <b>почему оно подойдёт именно вам</b>, и честно предупреждаем о возможных минусах. Каждой рекомендации присваивается понятный процент совпадения.
            </p>
          </div>
        </div>
        <div className="sigdemo" style={{ marginTop: 16 }}>
          <div className="muted" style={{ fontSize: 13, fontWeight: 700, marginBottom: 8 }}>Пользователь говорит:</div>
          <p className="quote" style={{ margin: 0 }}>«Люблю пасту и мясо, не люблю острое, хочу сытно и рядом до 1200 ₽.»</p>
          <div className="arrow-down"><Icon name="arrowDown" size={26} /></div>
          <div className="muted" style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>Paella отвечает:</div>
          {(() => {
            const ds = (window.PAELLA && window.PAELLA.dishes) || [];
            const ex = ds.filter(d => d.ratingPct != null && d.price).sort((a, b) => b.q - a.q)[0] || (window.PAELLA && window.PAELLA.dishOfDay);
            if (!ex) return null;
            const pct = ex.ratingPct != null ? ex.ratingPct : Math.min(97, ex.score);
            return (
              <div className="aicard" style={{ gridTemplateColumns: "1fr" }}>
                <div className="aicard-body">
                  <div className="aicard-head">
                    <div><div style={{ fontSize: 16, fontWeight: 800 }}>{ex.name}</div><div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{ex.restaurantName} · {ex.district}{ex.price ? ` · ${ex.price} ₽` : ""}</div></div>
                    <div style={{ textAlign: "center" }}><div className="ringm" style={{ "--p": pct }}><i>{pct}%</i></div><div className="aimatch-cap">совпадение</div></div>
                  </div>
                  <div className="ai-why"><b>Почему подходит:</b> любимая категория, {ex.ratingPct != null ? `высокая оценка гостей — ${ex.ratingPct}%` : "надёжная оценка"}, укладывается в бюджет. Это реальное блюдо из каталога Paella.</div>
                  <div className="ai-matched"><span className="badge b-olive">любимая категория</span>{ex.ratingPct != null && <span className="badge b-olive">оценка гостей {ex.ratingPct}%</span>}<span className="badge b-olive">в бюджете</span></div>
                </div>
              </div>
            );
          })()}
        </div>
      </MethodSection>

      {/* block 9: legal */}
      <div className="note" style={{ marginTop: 24, fontSize: 14 }}>
        <b>Юридическая и этическая логика.</b> В реальной версии Paella использует собственный пользовательский контент и легальные источники данных. Чужие отзывы и фотографии не копируются без разрешения правообладателей — ключевая ценность формируется за счёт собственного сообщества Paella.
      </div>

      {/* block 10: final principle */}
      <section className="sec">
        <div className="m-col hot" style={{ textAlign: "center", padding: "40px 28px" }}>
          <span className="eyebrow">Главный принцип</span>
          <p className="serif" style={{ fontSize: 28, lineHeight: 1.3, margin: "14px auto 0", maxWidth: 640, color: "var(--ink)" }}>
            Paella не заменяет личный вкус человека. Она помогает быстрее понять, какое блюдо с большей вероятностью понравится именно здесь и сейчас.
          </p>
          <div className="row" style={{ justifyContent: "center", gap: 10, marginTop: 26, flexWrap: "wrap" }}>
            <button className="btn btn-pri" onClick={() => ctx.go("home")}>Посмотреть блюда рядом <Icon name="arrowRight" size={17} /></button>
            <button className="btn btn-dark" onClick={() => ctx.go("top")}>Открыть топ Москвы</button>
            <button className="btn btn-soft" onClick={() => ctx.go("add")}>Добавить свой отзыв</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { MethodologyScreen });