/* ===== Products ===== */
const PRODUCTS = [
  { name: "MyDocGPT", short: "AI-доктора всех специализаций в одном приложении.",
    long: "MyDocGPT собирает AI-ассистентов в форме разных врачей: педиатр, кардиолог, эндокринолог, дерматолог, терапевт и другие. Задаёшь вопрос — отвечает нужный специалист. Не заменяет реального врача, но помогает понять, что происходит и стоит ли срочно идти на приём.",
    useCases: ["Вопросы AI-педиатру про детское здоровье", "Консультация с AI-кардиологом по симптомам", "Все специалисты в одном приложении — без записи и очередей"],
    tags: ["Медицина", "AI-доктора", "Live"], status: "Live", link: "https://mydocgpt.com", letter: "M", color: "#C44536", img: "logo-mydocgpt-v2.png",
    instagram: "https://www.instagram.com/mydocgpt/" },
  { name: "CutReels", short: "Платформа, которая режет длинные видео на короткие.",
    long: "CutReels берёт твой длинный YouTube или подкаст и автоматически нарезает на короткие вертикальные ролики для TikTok, Reels и Shorts. AI находит самые цепляющие моменты — ты получаешь готовый контент без часов монтажа.",
    useCases: ["Автоматическая нарезка видео и подкастов", "AI выбирает лучшие моменты", "Готовый формат под TikTok / Reels / Shorts"],
    tags: ["Видео", "Контент", "Live"], status: "Live", link: "https://cutreels.com/", letter: "C", color: "#8B1538", img: "logo-cutreels.png",
    instagram: "https://www.instagram.com/cutreelscom/" },
  { name: "MedSales", short: "Маркетплейс скидочных аптечных товаров.",
    long: "MedSales — локальный маркетплейс лекарств с актуальным сроком годности по сниженной цене. Аптеки продают то, что иначе ушло бы в утиль, покупатели экономят. Выгода обеим сторонам.",
    useCases: ["Поиск аптечных товаров со скидкой в твоём городе", "Аптеки разгружают остатки до конца срока годности", "Цены ниже стандартных аптечных"],
    tags: ["Маркетплейс", "Локальный бизнес", "MVP"], status: "MVP", link: "https://medsales.net/", letter: "MS", color: "#A8632B", img: "logo-medsales.png",
    instagram: "https://www.instagram.com/medsalesrussia/" },
  { name: "BrainWave", short: "AI-помощник для школьников и студентов.",
    long: "BrainWave — персональный учебный AI-помощник. Сфоткал домашку — получил объяснение. Готовишься к экзамену — подбирает задачи, объясняет ошибки. По 20+ предметам, для любого уровня — от 5-го класса до универа.",
    useCases: ["Решение домашних заданий по фотографии", "Подготовка к экзаменам с AI-помощником", "Объяснение сложных тем простыми словами"],
    tags: ["Образование", "AI-помощник", "Live"], status: "Live", link: "https://brainwave-389581693390.europe-west3.run.app/", letter: "B", color: "#C44536", img: "logo-brainwave.png",
    instagram: "https://www.instagram.com/brainwavee_ai/", telegram: "https://t.me/BrainwaveAII" },
];

function ProductModal({ p, onClose }) {
  useEffect(() => {
    const esc = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", esc);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", esc); document.body.style.overflow = ""; };
  }, []);
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}><XIcon s={16} /></button>
        <div style={{ display: "flex", flexDirection: "column", gap: 24, alignItems: "flex-start" }}>
          <div className="prod-logo" style={{ width: 72, height: 72, fontSize: 28, background: p.img ? "transparent" : p.color, padding: 0, overflow: "hidden" }}>
            {p.img ? <img src={p.img} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /> : p.letter}
          </div>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
              <h2>{p.name}</h2>
              <span className={"modal-pill " + (p.status === "Live" ? "live" : "mvp")}>{p.status}</span>
            </div>
            <p style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-mute)", marginTop: 8, textTransform: "uppercase", letterSpacing: "0.04em" }}>{p.short}</p>
          </div>
          <p className="modal-long">{p.long}</p>
          <div style={{ width: "100%", borderTop: "1px solid var(--line)", paddingTop: 24 }}>
            <p className="uc-lab">// что внутри</p>
            {p.useCases.map((u, i) => <div className="uc" key={i}><Check s={18} /><span>{u}</span></div>)}
          </div>
          <div className="tags" style={{ width: "100%", borderTop: "1px solid var(--line)", paddingTop: 24 }}>
            {p.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
          </div>
          <a className="btn-dark" href={p.link} target="_blank" rel="noopener noreferrer" style={{ width: "100%", justifyContent: "center", marginTop: 8 }}>
            Открыть продукт <ArrowUR s={16} />
          </a>
          {(p.instagram || p.telegram) && (
            <div style={{ display: "flex", gap: 10, width: "100%", flexWrap: "wrap" }}>
              {p.instagram && <a href={p.instagram} target="_blank" rel="noopener noreferrer" className="btn-ghost" style={{ flex: 1, justifyContent: "center" }}><IcInstagram s={15} />Instagram</a>}
              {p.telegram && <a href={p.telegram} target="_blank" rel="noopener noreferrer" className="btn-ghost" style={{ flex: 1, justifyContent: "center" }}><Send s={15} />Telegram</a>}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function ProductsPage() {
  const [sel, setSel] = useState(null);
  return (
    <div>
      <MiniHero
        rubric="Sorgent Products"
        title={<React.Fragment>Что мы<br /><span className="stroke">строим.</span></React.Fragment>}
        sub="Sorgent — не только программа. Мы выпускаем свои AI-продукты и используем их каждый день."
      />
      <section className="sec">
        <div className="wrap">
          <div className="sec-head">
            <h2 className="sec-title">Наши запуски</h2>
            <p className="sec-lead">Мы не просто говорим про AI — делаем продукты своими руками и делимся опытом со средой.</p>
          </div>
          <div className="prod-grid">
            {PRODUCTS.map((p) => (
              <button className="prod" key={p.name} onClick={() => setSel(p)}>
                <div className="prod-top">
                  <span className={"prod-status " + (p.status === "Live" ? "live" : "")}>
                    <span className="dot" />{p.status === "Live" ? "Запущен" : p.status}
                  </span>
                  <span className="prod-arrow"><ArrowUR s={18} /></span>
                </div>
                <div className="prod-id">
                  <span className="prod-logo" style={{ background: p.img ? "transparent" : p.color, padding: 0, overflow: "hidden" }}>
                    {p.img ? <img src={p.img} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /> : p.letter}
                  </span>
                  <span className="prod-name">{p.name}</span>
                </div>
                <p className="prod-desc">{p.short}</p>
                <div className="tags">{p.tags.map((t) => <span className="tag" key={t}>{t}</span>)}</div>
                {(p.instagram || p.telegram) && (
                  <div className="prod-socials" onClick={(e) => e.stopPropagation()}>
                    {p.instagram && <a href={p.instagram} target="_blank" rel="noopener noreferrer" className="prod-social"><IcInstagram s={13} />Instagram</a>}
                    {p.telegram && <a href={p.telegram} target="_blank" rel="noopener noreferrer" className="prod-social"><Send s={13} />Telegram</a>}
                  </div>
                )}
              </button>
            ))}
          </div>
        </div>
      </section>

      {sel && <ProductModal p={sel} onClose={() => setSel(null)} />}
    </div>
  );
}
window.ProductsPage = ProductsPage;