import { IconChevronRight } from '../ui/icons';

interface FaqItem {
  q: string;
  a: string[];
}

const FAQ: FaqItem[] = [
  {
    q: 'Откуда брать калории и БЖУ?',
    a: [
      'Упакованные продукты: КБЖУ на 100 г напечатаны на этикетке — заведите «Новый продукт» и перепишите 4 числа, либо отсканируйте штрихкод, и значения подставятся из открытой базы. Делается один раз: дальше продукт живёт в каталоге и всплывает в «Недавних».',
      'Обычная еда без этикетки (крупы, мясо, овощи): большая часть уже в каталоге, гарниры — в готовом виде, как на весах. Если чего-то нет — поищите «название калорийность на 100 г»: Calorizator, health-diet.ru (таблицы Скурихина), FatSecret дают рабочие цифры.',
      'Со временем ввод почти исчезает: вы едите одни и те же 20–30 продуктов, и все они окажутся в каталоге за первые пару недель.',
    ],
  },
  {
    q: 'Как записывать ресторан и доставку?',
    a: [
      'Точных цифр тут не знает никто — используйте «Только калории» и записывайте оценку. День с примерной записью полезнее дня без записи.',
      'Ориентиры: тарелка бизнес-ланча 600–800 ккал, бургер с картошкой ~1000, кусок пиццы 250–300, салат с заправкой 150–250, сладкий кофе 150–300.',
      'У сетей (Вкусно и точка, KFC, Додо) КБЖУ опубликованы на сайте или в приложении — можно завести как продукт.',
    ],
  },
  {
    q: 'Насколько точно нужно считать?',
    a: [
      'Не точно — консистентно. Ошибка ±20% на глаз — это нормально: она систематическая, то есть постоянная, и её выравнивает обратная связь по весу.',
      'Раз в день (утром, натощак) записывайте вес и смотрите на тренд за 1–2 недели, а не на суточные скачки. Записываете ~2000 ккал, а вес стоит при цели «похудение»? Значит, реальные калории выше — просто уменьшите цель на 200–300.',
      'Главная причина бросить дневник — перфекционизм. Лучше записать примерно, чем не записать вовсе.',
    ],
  },
  {
    q: 'Как считать домашние блюда?',
    a: [
      'Пока — приближением: в каталоге есть типовые готовые блюда (борщ, плов, сырники), их значения усреднённые, но стабильные.',
      'Хотите точнее — заведите свой продукт: сложите КБЖУ сырых ингредиентов всей кастрюли, разделите на общий готовый вес и получите значения «на 100 г» своего блюда.',
      'Конструктор рецептов, который посчитает это сам, — в планах.',
    ],
  },
  {
    q: 'Как считаются мои цели?',
    a: [
      'База — формула Миффлина—Сан Жеора: базовый обмен из пола, возраста, роста и веса, умноженный на коэффициент активности, даёт суточный расход.',
      'Похудение — умеренный дефицит 15% (комфортный темп ~0,5 кг в неделю), набор — профицит 10%. Белок 1,6–1,8 г на кг веса — для сытости и сохранения мышц; жиры ~1 г/кг; углеводы — остаток калорий.',
      'Это стартовая точка, а не приговор: цели можно править вручную в профиле, и стоит корректировать их по фактическому тренду веса.',
    ],
  },
  {
    q: 'Как работает сканер штрихкодов?',
    a: [
      'Сканер и поле «Цифры под штрихкодом» ищут упаковку в Open Food Facts — открытой базе продуктов, которую заполняют люди. Запрос уходит напрямую из браузера, свой сервер для этого не нужен.',
      'Качество данных разное: перед сохранением приложение показывает форму с подставленными значениями — сверьте их с этикеткой. Повторное сканирование того же товара сразу открывает выбор порции.',
      'Камера работает в Chrome и на Android (нужно разрешение); если сканера нет — введите цифры, напечатанные под полосками штрихкода.',
    ],
  },
  {
    q: 'Где хранятся мои данные?',
    a: [
      'Только на этом устройстве, в IndexedDB браузера. Никаких аккаунтов, серверов и синхронизации — данные не покидают браузер.',
      'Обратная сторона: браузер может удалить данные сайта (очистка хранилища, «стереть данные посещённых сайтов»). Поэтому время от времени делайте «Экспорт JSON» в разделе «Данные» — файл восстановит всё через «Импорт».',
    ],
  },
];

/** Справка: практические ответы для первых недель ведения дневника. */
export default function HelpSection() {
  return (
    <section class="animate-rise rounded-3xl border hairline bg-surface/80 p-5" style={{ animationDelay: '160ms' }}>
      <h2 class="mb-2 text-[13px] text-ink-soft">Справка</h2>
      <div class="flex flex-col">
        {FAQ.map(item => (
          <details class="group border-t hairline first:border-t-0">
            <summary class="flex cursor-pointer list-none items-center gap-2 py-3 text-[14px] text-ink transition group-open:text-ember-bright hover:text-ember-bright [&::-webkit-details-marker]:hidden">
              <IconChevronRight class="size-4 shrink-0 text-ink-faint transition-transform group-open:rotate-90" />
              {item.q}
            </summary>
            <div class="flex flex-col gap-2 pb-4 pl-6">
              {item.a.map(paragraph => (
                <p class="text-[13px] leading-relaxed text-ink-soft">{paragraph}</p>
              ))}
            </div>
          </details>
        ))}
      </div>
    </section>
  );
}
