/* ===== Mentium Tech — sections (bento) ===== */
const { useState, useRef, useEffect } = React;

const STEPS = [
  { n: "01", title: "Выделите текст", body: "Любое слово, фраза или абзац на любой странице. Маркер Mentium появляется прямо у курсора — мышью или хоткеем.", kbd: "⌘ M" },
  { n: "02", title: "Mentium читает страницу", body: "Помощник видит не только выделение, но и контекст всей страницы: заголовок, соседние абзацы, о чём текст в целом.", kbd: null },
  { n: "03", title: "Понятный ответ", body: "Объяснение простыми словами, перевод, выжимка или ответ на вопрос — не покидая вкладку.", kbd: null },
];

function HowItWorks() {
  return (
    <section id="how" className="section-pad">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow">Как это работает</span>
          <h2 className="section-title">Три движения — <span className="grad-text">и вы в курсе</span></h2>
          <p className="section-sub" style={{ marginInline: "auto" }}>
            Никаких новых вкладок и копирования в чат. Mentium работает прямо поверх страницы, которую вы читаете.
          </p>
        </div>
        <div className="steps">
          {STEPS.map((s, i) => (
            <div className="step reveal" key={i} style={{ transitionDelay: `${i * 90}ms` }}>
              <span className="step-rail" />
              <div className="step-top">
                <span className="step-n">{s.n}</span>
                {s.kbd && <span className="step-kbd">{s.kbd}</span>}
              </div>
              <h3 className="step-title">{s.title}</h3>
              <p className="step-body">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TileIcon({ name }) {
  const c = { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "var(--accent-ink)", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "context": return (<svg {...c}><rect x="3" y="4" width="18" height="16" rx="2.5" /><path d="M3 9h18M7 13h7M7 16.5h5" /></svg>);
    case "search": return (<svg {...c}><circle cx="11" cy="11" r="6.5" /><path d="M20 20l-4-4" /></svg>);
    case "translate": return (<svg {...c}><path d="M4 6h9M8.5 4v2M10.5 6c-.7 4-3 6.5-6 8M6.5 9c.8 2.2 2.6 4 5 5.2" /><path d="M13 20l3.2-8 3.3 8M14.2 17.2h4" /></svg>);
    case "summary": return (<svg {...c}><path d="M5 5h14M5 10h14M5 15h9M5 19h6" /></svg>);
    case "cite": return (<svg {...c}><path d="M10 13a4.5 4.5 0 006.4.2l2.6-2.6a4.5 4.5 0 00-6.4-6.4l-1.5 1.5" /><path d="M14 11a4.5 4.5 0 00-6.4-.2L5 13.4a4.5 4.5 0 006.4 6.4l1.5-1.5" /></svg>);
    case "private": return (<svg {...c}><path d="M12 3l7 3v5c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6l7-3z" /><path d="M9.5 12l1.8 1.8 3.3-3.6" /></svg>);
    default: return null;
  }
}

function Features() {
  return (
    <section id="features" className="section-pad">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Возможности</span>
          <h2 className="section-title">Маленькая кнопка, <span className="grad-text">большая помощь</span></h2>
          <p className="section-sub">
            Mentium заменяет десяток вкладок «загуглить, что это значит» одним движением выделения.
          </p>
        </div>
        <div className="bento">
          {/* hero tile */}
          <SpotlightCard className="tile tile-tall tile-hero glass reveal">
            <div className="tile-ic"><TileIcon name="context" /></div>
            <h3 className="tile-title">Понимает контекст</h3>
            <p className="tile-body">Видит всю страницу целиком, а не вырванную фразу. Ответы точные и по делу — будто рядом сидит человек, читающий то же самое.</p>
            <div className="tile-visual">
              <div className="mini-flow">
                <span className="mini-line w1" />
                <span className="mini-line hl" />
                <span className="mini-line w2" />
                <span className="mini-line w3" />
                <div className="mini-ans">
                  <div className="ma-row"><span className="ma-dot" /> MENTIUM</div>
                  <div className="ma-l" /><div className="ma-l s" />
                </div>
              </div>
            </div>
          </SpotlightCard>

          <SpotlightCard className="tile glass reveal">
            <div className="tile-ic"><TileIcon name="search" /></div>
            <h3 className="tile-title">Ищет за вас</h3>
            <p className="tile-body">Помогает кратко разобраться в человеке, событии, месте или термине по выделенному тексту.</p>
          </SpotlightCard>
          <SpotlightCard className="tile glass reveal">
            <div className="tile-ic"><TileIcon name="translate" /></div>
            <h3 className="tile-title">Объясняет и переводит</h3>
            <p className="tile-body">Сложный термин или иностранный абзац — простыми словами.</p>
          </SpotlightCard>
          <SpotlightCard className="tile glass reveal">
            <div className="tile-ic"><TileIcon name="summary" /></div>
            <h3 className="tile-title">Сжимает длинное</h3>
            <p className="tile-body">Длинная статья или документ ужимаются до сути за пару секунд.</p>
          </SpotlightCard>
          <SpotlightCard className="tile glass reveal">
            <div className="tile-ic"><TileIcon name="cite" /></div>
            <h3 className="tile-title">Учитывает страницу</h3>
            <p className="tile-body">Использует ограниченный фрагмент рядом с выделением, чтобы точнее понять смысл.</p>
          </SpotlightCard>

          {/* full-width reassurance strip */}
          <SpotlightCard className="tile tile-strip glass reveal" spotlightColor="rgba(56, 224, 208, .16)">
            <div className="tile-ic"><TileIcon name="private" /></div>
            <div>
              <h3 className="tile-title">Уважает приватность</h3>
              <p className="tile-body">Работает строго по запросу. Ничего не отправляется и не анализируется, пока вы сами не выделили текст и не позвали помощника.</p>
            </div>
            <span className="strip-kbd">по запросу · без фоновой слежки</span>
          </SpotlightCard>
        </div>
      </div>
    </section>
  );
}

const CASES = [
  { who: "Студенты", line: "Разобрать сложный конспект", text: "Выделил термин из лекции — получил объяснение на человеческом языке и пример." },
  { who: "Читатели", line: "Понять незнакомое слово", text: "Имя, событие, отсылка в статье — узнать, кто это, не теряя нить." },
  { who: "Покупатели", line: "Сравнить и проверить", text: "Выделил характеристику товара — Mentium объяснит, что она значит на деле." },
  { who: "Профессионалы", line: "Быстрый ресёрч", text: "Выделил абзац отчёта — краткая выжимка и проверка фактов со ссылками." },
];

function UseCases() {
  return (
    <section id="cases" className="section-pad">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Сценарии</span>
          <h2 className="section-title">Один помощник — <span className="grad-text">для всего, что вы читаете</span></h2>
        </div>
        <div className="cases-grid">
          {CASES.map((c, i) => (
            <SpotlightCard className="case-card glass reveal" key={i} spotlightColor="rgba(56, 224, 208, .14)">
              <span className="case-who">{c.who}</span>
              <h3 className="case-line">{c.line}</h3>
              <p className="case-text">{c.text}</p>
            </SpotlightCard>
          ))}
        </div>
      </div>
    </section>
  );
}

const DEFAULT_PLANS = [
  {
    name: "Free",
    label: "Для знакомства",
    price: "0 ₽",
    period: "навсегда",
    text: "Базовые инструменты Mentium для повседневного чтения.",
    features: [
      "Анализ выделенного текста",
      "Режим «Объясни проще»",
      "Контекст текущей страницы",
      "Подключение собственного API-ключа",
    ],
    action: "Начать бесплатно",
    href: "/login",
  },
  {
    name: "Pro",
    id: "pro",
    label: "Личная работа",
    price: "299 ₽",
    period: "в месяц",
    note: "2 490 ₽ в год",
    text: "Расширенные инструменты для одного пользователя.",
    features: [
      "Всё из тарифа Free",
      "Все режимы браузерного помощника",
      "До 100 RSS-источников",
      "История RSS без ограничения срока",
      "Новые Pro-инструменты Mentium",
    ],
    action: "Выбрать Pro",
    href: "/login?next=%2Fdashboard%3Fbuy%3Dpro_month",
    secondaryAction: "Оплатить год",
    secondaryHref: "/login?next=%2Fdashboard%3Fbuy%3Dpro_year",
    featured: true,
  },
  {
    name: "Team",
    id: "team",
    label: "Совместная работа",
    price: "1 490 ₽",
    period: "в месяц",
    note: "14 900 ₽ в год",
    text: "Общее пространство Mentium для небольшой команды.",
    features: [
      "До 5 участников",
      "Общий RSS и роли",
      "До 500 RSS-источников",
      "Журнал действий за 30 дней",
    ],
    action: "Выбрать Team",
    href: "/login?next=%2Fdashboard%3Fbuy%3Dteam_month",
    secondaryAction: "Оплатить год",
    secondaryHref: "/login?next=%2Fdashboard%3Fbuy%3Dteam_year",
  },
  {
    name: "Business",
    id: "business",
    label: "Для редакций и компаний",
    price: "4 990 ₽",
    period: "в месяц",
    note: "49 900 ₽ в год",
    text: "Расширенные лимиты, контроль и интеграции.",
    features: [
      "До 15 участников",
      "До 2 000 RSS-источников",
      "Журнал действий за год",
      "Read-only API для интеграций",
    ],
    action: "Выбрать Business",
    href: "/login?next=%2Fdashboard%3Fbuy%3Dbusiness_month",
    secondaryAction: "Оплатить год",
    secondaryHref: "/login?next=%2Fdashboard%3Fbuy%3Dbusiness_year",
  },
  {
    name: "Enterprise",
    id: "enterprise",
    label: "Индивидуальное решение",
    price: "По запросу",
    period: "",
    text: "Персональные лимиты, внедрение и сопровождение.",
    features: [
      "Расширяемое число участников",
      "API и индивидуальные интеграции",
      "Подготовка SSO",
      "Приоритетная поддержка",
    ],
    action: "Обсудить задачу",
    href: "mailto:info@mentium.ru?subject=Mentium%20Enterprise",
  },
];

function Pricing() {
  const [paymentsEnabled, setPaymentsEnabled] = React.useState(false);
  const [plans, setPlans] = React.useState(DEFAULT_PLANS);
  React.useEffect(() => {
    fetch("/payments/config").then((r) => r.json()).then((d) => {
      setPaymentsEnabled(d.enabled === true);
      if (Array.isArray(d.plans) && d.plans.length) {
        const byId = Object.fromEntries(d.plans.map(item => [item.id, item]));
        setPlans(DEFAULT_PLANS.map(plan => {
          if (!plan.id || plan.id === "enterprise") return plan;
          const month = byId[`${plan.id}_month`];
          const year = byId[`${plan.id}_year`];
          if (!month && !year) return plan;
          return {
            ...plan,
            price: month ? `${Number(month.amount).toLocaleString("ru-RU")} ₽` : plan.price,
            period: month ? "в месяц" : plan.period,
            note: year ? `${Number(year.amount).toLocaleString("ru-RU")} ₽ в год` : plan.note,
            href: month ? `/login?next=%2Fdashboard%3Fbuy%3D${encodeURIComponent(month.id)}` : plan.href,
            secondaryHref: year ? `/login?next=%2Fdashboard%3Fbuy%3D${encodeURIComponent(year.id)}` : plan.secondaryHref,
          };
        }));
      }
    }).catch(() => {});
  }, []);
  return (
    <section id="pricing" className="section-pad pricing-section">
      <PricingMotion />
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow">Тарифы</span>
          <h2 className="section-title">Начните бесплатно — <span className="grad-text">расширяйте по необходимости</span></h2>
          <p className="section-sub" style={{ marginInline: "auto" }}>
            Подписка открывает дополнительные режимы Mentium. Вы сами выбираете AI-провайдера и подключаете свой API-ключ.
          </p>
        </div>
        <div className="pricing-grid">
          {plans.map((plan) => (
            <TiltCard className="pricing-tilt" key={plan.name}>
              <SpotlightCard
                className={`price-card glass reveal ${plan.featured ? "featured" : ""}`}
                spotlightColor={plan.featured ? "rgba(56, 224, 208, .18)" : "rgba(91, 140, 255, .16)"}
              >
                {plan.featured && <span className="price-popular"><ShinyText>Популярный</ShinyText></span>}
                <span className="price-label">{plan.label}</span>
                <h3 className="price-name">{plan.name}</h3>
                <div className="price-row">
                  <strong>{plan.price}</strong>
                  <span>{plan.period}</span>
                </div>
                {plan.note && <span className="price-note">{plan.note}</span>}
                <p className="price-text">{plan.text}</p>
                <ul className="price-features">
                  {plan.features.map((feature) => <li key={feature}>{feature}</li>)}
                </ul>
                <Magnet className="price-action-wrap">
                  <a className={`btn ${plan.featured ? "btn-primary" : "btn-ghost"} price-action`} href={plan.name === "Free" || plan.id === "enterprise" || paymentsEnabled ? plan.href : "/login"}>
                    {plan.action}
                  </a>
                </Magnet>
                {plan.secondaryAction && (
                  <a className="price-secondary" href={paymentsEnabled ? plan.secondaryHref : "/login"}>{plan.secondaryAction}</a>
                )}
              </SpotlightCard>
            </TiltCard>
          ))}
        </div>
        <p className="pricing-fine reveal">
          API-ключи хранятся в браузере. Стоимость запросов выбранного AI-провайдера не входит в подписку Mentium и оплачивается отдельно по его тарифам.
        </p>
      </div>
    </section>
  );
}

function DemoInAction() {
  return (
    <section id="demo" className="section-pad">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow">Демо</span>
          <h2 className="section-title">Посмотрите в действии</h2>
          <p className="section-sub" style={{ marginInline: "auto" }}>
            30 секунд — и понятно, как Mentium вплетается в обычное чтение.
          </p>
        </div>
        <div className="video-shell glass reveal">
          <div className="ph video-ph">
            <div className="play-btn" aria-hidden="true">
              <svg width="28" height="28" viewBox="0 0 24 24"><path d="M8 5.5v13l11-6.5z" /></svg>
            </div>
            <span className="video-cap">демо-видео · screen recording 16:9</span>
          </div>
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: "В каких браузерах работает Mentium?", a: "Расширение ставится в один клик в любой современный браузер на базе Chromium и в другие популярные браузеры. Установка занимает меньше минуты." },
  { q: "Это бесплатно?", a: "Да. Free включает базовые инструменты Mentium. Pro расширяет личные возможности, а Team и Business добавляют общее рабочее пространство, роли и увеличенные лимиты." },
  { q: "Что входит в стоимость Pro?", a: "Pro открывает расширенные функции Mentium. API-ключ и расходы выбранного AI-провайдера пользователь подключает и оплачивает отдельно." },
  { q: "Mentium читает все мои страницы?", a: "Нет. Помощник активируется только когда вы сами выделяете текст и зовёте его. Без выделения он ничего не отправляет и не анализирует." },
  { q: "Откуда берутся ответы?", a: "Mentium отправляет выделенный текст и ограниченный фрагмент страницы выбранному вами AI-провайдеру. Ответы модели могут содержать ошибки, поэтому важные сведения следует проверять." },
  { q: "Можно поменять горячую клавишу?", a: "Да, сочетание вызова настраивается. По умолчанию это ⌘ + M (или Ctrl + M), но вы можете назначить удобное вам." },
];

function FAQItem({ item, open, onToggle }) {
  const ref = useRef(null);
  return (
    <div className={`faq-item ${open ? "open" : ""}`}>
      <button className="faq-q" onClick={onToggle}>
        <span>{item.q}</span>
        <span className="faq-ic" aria-hidden="true">{open ? "−" : "+"}</span>
      </button>
      <div className="faq-a-wrap" style={{ maxHeight: open ? (ref.current ? ref.current.scrollHeight + 4 : 320) : 0 }}>
        <p className="faq-a" ref={ref}>{item.a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section-pad">
      <div className="wrap faq-wrap">
        <div className="section-head reveal" style={{ marginBottom: 14 }}>
          <span className="eyebrow">Вопросы</span>
          <h2 className="section-title">Коротко о главном</h2>
        </div>
        <div className="faq-list reveal">
          {FAQS.map((f, i) => (
            <FAQItem key={i} item={f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, Features, UseCases, Pricing, DemoInAction, FAQ });