/* ============================================================
   Paella — Об авторе проекта + Профиль
   ============================================================ */

function AboutScreen({ ctx }) {
  const CARDS = [
    { ic: "user", c: "b-coral", t: "Для гостей", d: "Быстро понять, что заказать, не тратя время на длинные отзывы." },
    { ic: "utensils", c: "b-orange", t: "Для ресторанов", d: "Видеть, какие блюда действительно нравятся гостям, а какие требуют доработки." },
    { ic: "trendUp", c: "b-green", t: "Для рынка", d: "Создать новый стандарт оценки ресторанного опыта — через конкретные блюда." },
  ];
  const LOGIC = ["фокус на блюдах, а не только на ресторанах", "быстрый пользовательский отзыв", "визуальный формат", "понятный рейтинг", "персональные рекомендации", "игровые механики и вовлечение", "аналитика для ресторанов"];

  return (
    <div className="fadein wrap">
      <div className="pintro"><span className="eyebrow"><Icon name="user" size={13} style={{ verticalAlign: "-2px", marginRight: 4 }} />Об авторе проекта</span></div>

      <section className="sec" style={{ marginTop: 18 }}>
        <div className="about-hero">
          <div className="author-photo">
            <img src="assets/author-olga.png" alt="Ольга Витальевна Орлова" />
          </div>
          <div>
            <span className="badge b-plum">Автор проекта Paella</span>
            <h1 style={{ fontSize: 38, fontWeight: 800, letterSpacing: "-0.035em", margin: "12px 0 0", lineHeight: 1.05 }}>Ольга Витальевна Орлова</h1>
            <p className="muted" style={{ fontSize: 16.5, lineHeight: 1.55, marginTop: 16 }}>
              Автор идеи и концепции цифровой платформы Paella — сервиса для оценки и рекомендации конкретных блюд в ресторанах и кафе.
            </p>
            <p className="author-quote">«Хороший ресторан — не значит, что вкусным будет любое блюдо. Paella помогает выбрать именно то, что стоит заказать.»</p>
            <p className="muted" style={{ fontSize: 15.5, lineHeight: 1.55, marginTop: 12 }}>
              Идея проекта появилась из простой потребительской проблемы: при выборе ресторана люди видят общий рейтинг заведения, но не понимают, какие именно блюда там действительно стоит заказать. Даже у ресторана с высоким рейтингом меню может быть неоднородным.
            </p>
            <p className="muted" style={{ fontSize: 15.5, lineHeight: 1.55, marginTop: 12 }}>
              Paella предлагает сместить фокус с оценки ресторана на оценку конкретного блюда. Такой подход помогает гостям быстрее принимать решение, снижает риск неудачного заказа, а ресторанам даёт более точную обратную связь по меню.
            </p>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="sec-head"><div><h2 className="sec-title">Почему появилась Paella</h2></div></div>
        <p className="muted" style={{ fontSize: 15.5, lineHeight: 1.55, maxWidth: 720, marginBottom: 20 }}>
          При выборе блюда пользователю часто приходится просматривать десятки отзывов, фотографий и комментариев. Но большая часть отзывов относится к ресторану в целом: интерьеру, сервису, атмосфере или доставке. Paella решает эту проблему — собирает и структурирует мнение именно о блюдах.
        </p>
        <div className="about-cards">
          {CARDS.map((c, i) => (
            <div className="about-card" key={i}>
              <div className="ci" style={{ background: "var(--" + (c.c === "b-coral" ? "coral-soft" : c.c === "b-orange" ? "orange-soft" : "green-soft") + ")", color: c.c === "b-coral" ? "var(--coral-ink)" : c.c === "b-orange" ? "oklch(0.55 0.16 55)" : "oklch(0.45 0.13 150)" }}>
                <Icon name={c.ic} size={22} />
              </div>
              <h4 style={{ fontSize: 17, fontWeight: 800, margin: "0 0 7px" }}>{c.t}</h4>
              <p className="muted" style={{ fontSize: 14, lineHeight: 1.5, margin: 0 }}>{c.d}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="sec">
        <div className="m-compare">
          <div className="m-col hot">
            <span className="eyebrow"><Icon name="target" size={13} style={{ verticalAlign: "-2px", marginRight: 4 }} />Цель проекта</span>
            <p style={{ fontSize: 15.5, lineHeight: 1.55, color: "var(--ink)", margin: "12px 0 0" }}>
              Создать удобную цифровую платформу, где пользователи смогут находить лучшие блюда рядом, делиться короткими оценками, сохранять понравившиеся позиции и формировать честные рейтинги блюд.
            </p>
          </div>
          <div className="m-col dim">
            <span className="eyebrow"><Icon name="layers" size={13} style={{ verticalAlign: "-2px", marginRight: 4 }} />Проектная логика</span>
            <div className="tagwrap" style={{ marginTop: 14 }}>
              {LOGIC.map((t, i) => <span className="badge b-sand" key={i} style={{ fontSize: 13, padding: "6px 12px" }}>{t}</span>)}
            </div>
          </div>
        </div>
      </section>

      <div className="note" style={{ marginTop: 24, fontSize: 14 }}>
        <b>Статус проекта.</b> Текущая версия работает на реальных данных: рестораны, меню, цены, фото блюд, оценки гостей и отзывы собраны из открытых источников — 2ГИС, Яндекс.Карты и Яндекс.Еда. Все фотографии — настоящие; если фото блюда нет, показывается логотип Paella с пометкой «нет фото». Личный профиль и добавление отзывов — прототип будущего сообщества.
      </div>

      <section className="sec">
        <div className="m-col hot" style={{ textAlign: "center", padding: "44px 28px" }}>
          <p className="serif" style={{ fontSize: 30, lineHeight: 1.25, margin: "0 auto", maxWidth: 580, color: "var(--ink)" }}>
            Paella — это ответ на вопрос: <span className="serif-i" style={{ color: "var(--coral-ink)" }}>что конкретно заказать?</span>
          </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("methodology")}>Изучить методику</button>
            <button className="btn btn-soft" onClick={() => ctx.go("top")}>Открыть топ Москвы</button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Profile ---------- */
function ProfileScreen({ ctx }) {
  const P = window.PAELLA;
  const V = useVisited();
  const visitedCount = V.count();
  const visitReviews = V.reviewCount();
  const savedDishes = [...ctx.saved].map((id) => P.byId(id)).filter(Boolean);
  const contribCount = ctx.contributions.length;
  const savedRests = new Set(savedDishes.map((d) => d.restaurantId)).size;
  const savedDistricts = new Set(savedDishes.map((d) => d.district)).size;

  const BADGES = [
    ["🍝", "Паста-охотник", "b-coral"], ["🍳", "Завтрак-эксперт", "b-orange"], ["✍️", "Первый отзыв", "b-green"],
    ["🏙️", "Исследователь центра", "b-blue"], ["🍰", "Десертный критик", "b-plum"],
  ];
  const STATS = [
    [savedDishes.length, "блюд сохранено"], [contribCount, "отзывов добавлено"], [savedRests, "ресторанов в избранном"], [savedDistricts, "районов Москвы"],
  ];

  return (
    <div className="fadein wrap" style={{ maxWidth: 920 }}>
      <div className="pintro"><span className="eyebrow"><Icon name="user" size={13} style={{ verticalAlign: "-2px", marginRight: 4 }} />Профиль</span></div>

      <div className="panel" style={{ padding: 24, marginTop: 16 }}>
        <div className="prof-head">
          <div className="prof-av" style={{ background: avColor("Антон") }}>А</div>
          <div>
            <h1 style={{ fontSize: 28, fontWeight: 800, letterSpacing: "-0.03em", margin: 0 }}>Антон</h1>
            <div className="row" style={{ gap: 8, marginTop: 6 }}>
              <span className="badge b-coral"><Icon name="flame" size={12} />Фуди · уровень 3</span>
              <span className="muted" style={{ fontSize: 13.5, fontWeight: 600 }}>Москва</span>
            </div>
          </div>
        </div>
      </div>

      <div className="stat-grid" style={{ marginTop: 16 }}>
        {STATS.map((s, i) => <div className="stat" key={i}><div className="v">{s[0]}</div><div className="l">{s[1]}</div></div>)}
      </div>

      {/* Паспорт мест — teaser */}
      <section className="sec">
        <div className="ai-hero" style={{ padding: 22, background: "linear-gradient(135deg, var(--olive-deep), var(--olive))" }}>
          <div className="row" style={{ justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 14 }}>
            <div>
              <span className="pill"><Icon name="flag" size={15} />Паспорт мест</span>
              <h1 style={{ fontSize: 24, margin: "12px 0 4px" }}>{visitedCount > 0 ? `Вы отметили ${visitedCount} ${plural(visitedCount, "место", "места", "мест")}` : "Соберите свою гастрокарту Москвы"}</h1>
              <p style={{ fontSize: 14.5, opacity: .92, margin: 0 }}>{visitedCount > 0 ? `${visitReviews} ${plural(visitReviews, "отзыв", "отзыва", "отзывов")} о блюдах · флажки на карте города` : "Отмечайте, где побывали, ставьте флажки на карте и делитесь с друзьями."}</p>
            </div>
            <button className="btn" style={{ background: "#fff", color: "var(--olive-deep)", flex: "none" }} onClick={() => ctx.go("passport")}><Icon name="flag" size={18} />{visitedCount > 0 ? "Открыть паспорт" : "Начать"}</button>
          </div>
        </div>
      </section>

      {/* badges */}
      <section className="sec">
        <div className="sec-head"><div><h2 className="sec-title">Бейджи</h2><p className="sec-sub">Награды за вклад в сообщество</p></div></div>
        <div className="badge-grid">
          {BADGES.map((b, i) => (
            <div className="bigbadge" key={i}>
              <span className="em" style={{ background: "var(--" + (b[2] === "b-coral" ? "coral-soft" : b[2] === "b-orange" ? "orange-soft" : b[2] === "b-green" ? "green-soft" : b[2] === "b-blue" ? "blue-soft" : "plum-soft") + ")" }}>{b[0]}</span>
              <span className="t">{b[1]}</span>
            </div>
          ))}
        </div>
      </section>

      {/* saved dishes */}
      <section className="sec">
        <div className="sec-head"><div><h2 className="sec-title">Сохранённые блюда</h2><p className="sec-sub">{savedDishes.length} в избранном</p></div></div>
        {savedDishes.length === 0 ? (
          <EmptyState emoji="🔖" title="Пока ничего не сохранено" text="Нажми на закладку у любого блюда — оно появится здесь." />
        ) : (
          <div className="dgrid">
            {savedDishes.map((d) => <DishCard key={d.id} dish={d} saved={true} onSave={ctx.toggleSave} onOpen={ctx.openDish} />)}
          </div>
        )}
      </section>

      {/* taste profile */}
      <section className="sec">
        <div className="sec-head"><div><h2 className="sec-title">Твой вкусовой профиль</h2></div></div>
        <div className="taste">
          <div className="panel" style={{ padding: 22 }}>
            <div style={{ marginBottom: 16 }}>
              <div className="muted" style={{ fontSize: 13, fontWeight: 700, marginBottom: 9 }}>ЛЮБИТ</div>
              <div className="tagwrap">{["паста", "мясо", "завтраки", "десерты"].map((t, i) => <span className="badge b-green" key={i}>{t}</span>)}</div>
            </div>
            <div style={{ marginBottom: 16 }}>
              <div className="muted" style={{ fontSize: 13, fontWeight: 700, marginBottom: 9 }}>НЕ ЛЮБИТ</div>
              <div className="tagwrap">{["слишком острое", "слишком жирное"].map((t, i) => <span className="badge b-sand" key={i}>{t}</span>)}</div>
            </div>
            <div>
              <div className="muted" style={{ fontSize: 13, fontWeight: 700, marginBottom: 9 }}>ЧАСТО ВЫБИРАЕТ</div>
              <div className="tagwrap">{["сытный обед", "comfort food", "высокая оценка"].map((t, i) => <span className="badge b-coral" key={i}>{t}</span>)}</div>
            </div>
          </div>
          <div className="m-col hot" style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <span className="eyebrow"><Icon name="trendUp" size={13} style={{ verticalAlign: "-2px", marginRight: 4 }} />Твой вклад</span>
            <p style={{ fontSize: 18, fontWeight: 700, lineHeight: 1.4, color: "var(--ink)", margin: "12px 0 0" }}>{contribCount > 0 ? `Ты добавил ${contribCount} ${plural(contribCount, "отзыв", "отзыва", "отзывов")} о блюдах.` : "Оцени первое блюдо — и помоги другим выбрать лучше."}</p>
            <p className="muted" style={{ fontSize: 14.5, lineHeight: 1.5, marginTop: 8 }}>Твои оценки помогут другим выбрать лучше. Спасибо, что делаешь Paella точнее.</p>
            <button className="btn btn-dark" style={{ alignSelf: "flex-start", marginTop: 18 }} onClick={() => ctx.go("add")}><Icon name="plus" size={17} />Добавить отзыв</button>
          </div>
        </div>
      </section>

      {/* AI taste profile CTA */}
      <section className="sec">
        <div className="ai-hero" style={{ padding: 24 }}>
          <span className="pill"><Icon name="sparkles" size={15} />AI-подбор</span>
          <h1 style={{ fontSize: 26 }}>Paella уже знает ваш вкус</h1>
          <p style={{ fontSize: 15 }}>На основе сохранённых блюд и оценок мы можем подобрать новые блюда специально под вас — с объяснением, почему каждое подходит.</p>
          <div className="row" style={{ gap: 10, marginTop: 18, flexWrap: "wrap" }}>
            <button className="btn btn-pri" onClick={() => ctx.go("ai")}><Icon name="sparkles" size={18} />Подобрать блюда под меня</button>
            <button className="btn" style={{ background: "rgba(255,255,255,.16)", color: "#fff" }} onClick={() => ctx.go("add")}><Icon name="plus" size={18} />Оценить блюдо</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutScreen, ProfileScreen });