/* =================================================================
   SaaS vs On-Premise
================================================================= */
function PlanDuo() {
  const saas = {
    title: "SaaS",
    sub: "Облако в дата-центре в Казахстане",
    glow: "rgba(122, 245, 200, 0.18)",
    accent: "var(--accent)",
    bullets: [
      "Старт за 1 рабочий день",
      "Обновления и роадмап включены",
      "ISO 27001, данные хранятся в РК",
      "Авто-масштабирование под пики отчётности",
      "Биллинг по модулям, без долгого внедрения",
    ],
    cta: "Запустить SaaS",
  };
  const onp = {
    title: "On-Premise",
    sub: "Внутри вашего контура, без выхода в интернет",
    glow: "rgba(139, 111, 255, 0.18)",
    accent: "var(--violet)",
    bullets: [
      "Развёртывание в вашем VPC или на железе",
      "Полная изоляция данных и моделей",
      "Подключение приватного LLM (Llama / GigaChat)",
      "Аудит исходного кода и SBOM",
      "SLA 99.9% и круглосуточная поддержка",
    ],
    cta: "Запросить On-Premise",
  };

  return (
    <section id="Тарифы" className="section-pad" style={{ position: "relative" }}>
      <div className="container">
        <div style={{ marginBottom: 56, textAlign: "center" }}>
          <Reveal><span className="eyebrow" style={{ justifyContent: "center" }}>/ форматы поставки</span></Reveal>
          <Reveal delay={100}>
            <h2 style={{ marginTop: 14 }}>
              SaaS или <span className="serif" style={{ color: "var(--accent)" }}>On-Premise</span>.<br />
              Без компромиссов в обоих.
            </h2>
          </Reveal>
        </div>

        <div className="duo-grid">
          {[saas, onp].map((p, i) => (
            <Reveal key={p.title} delay={i * 120} className="glass grad-border" style={{ padding: 32, position: "relative", overflow: "hidden" }}>
              <div className="orb" style={{ width: 320, height: 320, top: -140, right: -140, background: `radial-gradient(circle, ${p.glow}, transparent 60%)`, animationDelay: i ? "-4s" : "0s" }} />
              <div style={{ position: "relative" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <h3 style={{ fontSize: 28, fontWeight: 500 }}>{p.title}</h3>
                  <span className="pill-tag" style={{ whiteSpace: "nowrap" }}><span className="dot" style={{ background: p.accent, boxShadow: `0 0 8px ${p.accent}` }} /> {i ? "по запросу" : "от 89 000 ₸/мес"}</span>
                </div>
                <p style={{ marginTop: 8, fontSize: 15 }}>{p.sub}</p>

                <div className="div-line" style={{ margin: "28px 0" }} />

                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column" }}>
                  {p.bullets.map((b, j) => (
                    <li key={j} style={{
                      display: "flex", alignItems: "center", gap: 12,
                      padding: "14px 0",
                      borderBottom: j < p.bullets.length - 1 ? "1px solid var(--line-2)" : "none",
                      fontSize: 14.5,
                    }}>
                      <span style={{ width: 22, height: 22, display: "grid", placeItems: "center", borderRadius: 6, background: `color-mix(in oklab, ${p.accent} 14%, transparent)`, color: p.accent }}>
                        <IconCheck size={13} />
                      </span>
                      {b}
                    </li>
                  ))}
                </ul>

                <button className={"pill " + (i === 0 ? "pill-primary" : "")} style={{ marginTop: 30, width: "100%", justifyContent: "center", height: 48 }}>
                  {p.cta} <IconArrow size={14} />
                </button>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={300}>
          <div style={{ marginTop: 36, display: "flex", justifyContent: "center" }}>
            <a href="#cta" className="pill" style={{ whiteSpace: "nowrap" }}>Не уверены? <span style={{ color: "var(--accent)" }}>Консультация 30 мин</span> <IconArrow size={14} /></a>
          </div>
        </Reveal>
      </div>

      <style>{`
        .duo-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
        @media (min-width: 880px) { .duo-grid { grid-template-columns: 1fr 1fr; } }
      `}</style>
    </section>
  );
}

/* =================================================================
   Pricing
================================================================= */
function Pricing() {
  const plans = [
    {
      name: "Старт", price: "89 000", per: "₸ / мес",
      desc: "Один модуль на выбор. До 200 операций в месяц.",
      features: ["1 модуль", "До 3 пользователей", "Telegram-бот", "Email-поддержка"],
      cta: "Начать",
    },
    {
      name: "Бизнес", price: "289 000", per: "₸ / мес",
      desc: "Все модули. Безлимит операций. Приоритет в очереди.",
      features: ["Все модули включены", "До 25 пользователей", "Multi-1С (до 5 баз)", "Чат-поддержка 8 × 5"],
      cta: "Выбрать",
      featured: true,
    },
    {
      name: "Энтерпрайз", price: "890 000+", per: "₸ / мес",
      desc: "Для холдингов с ≥ 5 юрлицами. Выделенный CSM.",
      features: ["Безлимит юрлиц и баз", "SSO / SCIM", "Кастомные сценарии", "SLA 99.9% · 24/7"],
      cta: "Связаться",
    },
    {
      name: "On-Premise", price: "Под заказ", per: "",
      desc: "Развёртывание в вашем периметре. Без передачи данных наружу.",
      features: ["Полная изоляция", "Приватный LLM", "Аудит кода и SBOM", "Внедрение под ключ"],
      cta: "Получить расчёт",
      onPrem: true,
    },
  ];

  return (
    <section className="section-pad" style={{ position: "relative" }}>
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <Reveal><span className="eyebrow">/ тарифы</span></Reveal>
          <Reveal delay={100}>
            <h2 style={{ marginTop: 14, maxWidth: 760 }}>
              Прозрачные цены, <span className="serif" style={{ color: "var(--accent)" }}>без длинного внедрения</span>
            </h2>
          </Reveal>
        </div>

        <div className="price-grid">
          {plans.map((p, i) => {
            const featured = p.featured;
            return (
              <Reveal key={p.name} delay={i * 80} className={"glass grad-border" + (featured ? " featured" : "")} style={{
                padding: 26, display: "flex", flexDirection: "column", gap: 16, position: "relative",
                borderColor: featured ? "rgba(168, 245, 208, 0.35)" : undefined,
                boxShadow: featured ? "0 0 0 1px rgba(168,245,208,0.25), 0 30px 60px -30px rgba(168,245,208,0.25)" : undefined,
              }}>
                {featured && (
                  <span style={{ position: "absolute", top: -1, right: -1, fontSize: 10, color: "#042418", letterSpacing: "0.08em", background: "var(--accent)", padding: "5px 10px", borderRadius: "0 18px 0 10px", fontWeight: 600 }} className="mono">
                    ПОПУЛЯРНО
                  </span>
                )}
                <div>
                  <div style={{ fontSize: 14, color: "var(--fg-dim)" }}>{p.name}</div>
                  <div style={{ marginTop: 10, display: "flex", alignItems: "baseline", gap: 6 }}>
                    <span className="price-num" style={{ fontSize: 32, letterSpacing: "-0.025em", fontWeight: 500 }}>{p.price}</span>
                    <span style={{ fontSize: 14, color: "var(--fg-mute)" }}>{p.per}</span>
                  </div>
                  <p style={{ fontSize: 13, marginTop: 10 }}>{p.desc}</p>
                </div>

                <div className="div-line" />

                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                  {p.features.map((f) => (
                    <li key={f} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13.5, color: "var(--fg-dim)" }}>
                      <IconCheck size={13} color={featured ? "var(--accent)" : "var(--fg-mute)"} />
                      {f}
                    </li>
                  ))}
                </ul>

                <button className={"pill " + (featured ? "pill-primary" : "")} style={{ width: "100%", justifyContent: "center" }}>
                  {p.cta} <IconArrow size={13} />
                </button>
              </Reveal>
            );
          })}
        </div>
      </div>

      <style>{`
        .price-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
        @media (min-width: 640px) { .price-grid { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1100px) { .price-grid { grid-template-columns: repeat(4, 1fr); } }
      `}</style>
    </section>
  );
}

/* =================================================================
   Безопасность
================================================================= */
function AnimatedIcon({ Icon, visible }) {
  return (
    <span style={{
      opacity: visible ? 1 : 0,
      transform: visible ? "none" : "scale(0.6)",
      transition: "opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1)",
    }}>
      <Icon size={18} color="var(--accent)" />
    </span>
  );
}

function Security() {
  const items = [
    { Icon: IconGlobe,  t: "Данные в РК", d: "Хранение в дата-центрах Казахстана. Соответствие ЗРК «О персональных данных»." },
    { Icon: IconLock,   t: "Шифрование", d: "AES-256 at-rest, TLS 1.3 in-transit. Ключи в HSM, ротация раз в 90 дней." },
    { Icon: IconLayers, t: "Изоляция", d: "Multi-tenant с раздельными namespace и базами. On-Premise — полностью внутри вашего контура." },
    { Icon: IconAudit,  t: "Аудит", d: "Любое действие агента логируется. Иммутабельный журнал с подписью, экспорт по запросу." },
  ];

  const [visibleItems, setVisibleItems] = React.useState([]);
  const refs = React.useRef([]);

  React.useEffect(() => {
    const observers = items.map((_, i) => {
      const io = new IntersectionObserver(([e]) => {
        if (e.isIntersecting) {
          setVisibleItems(prev => prev.includes(i) ? prev : [...prev, i]);
          io.disconnect();
        }
      }, { threshold: 0.3 });
      if (refs.current[i]) io.observe(refs.current[i]);
      return io;
    });
    return () => observers.forEach(io => io.disconnect());
  }, []);

  return (
    <section id="Безопасность" className="section-pad">
      <div className="container">
        <div style={{ marginBottom: 48 }}>
          <Reveal><span className="eyebrow">/ безопасность</span></Reveal>
          <Reveal delay={100}>
            <h2 style={{ marginTop: 14, maxWidth: 720 }}>
              Финансы — это <span className="serif" style={{ color: "var(--accent)" }}>чувствительно</span>. Поэтому так:
            </h2>
          </Reveal>
        </div>

        <div className="sec-grid glass grad-border" style={{ padding: 0 }}>
          {items.map((it, i) => {
            const vis = visibleItems.includes(i);
            return (
              <Reveal key={it.t} delay={i * 80} className="sec-cell">
                <div ref={el => refs.current[i] = el} style={{ transitionDelay: `${i * 80}ms` }}>
                  <AnimatedIcon Icon={it.Icon} visible={vis} />
                </div>
                <h3 style={{
                  fontSize: 17, marginTop: 16,
                  opacity: vis ? 1 : 0,
                  transform: vis ? "none" : "translateY(6px)",
                  transition: "opacity .5s ease 150ms, transform .5s ease 150ms",
                }}>{it.t}</h3>
                <p style={{
                  fontSize: 13.5, marginTop: 8,
                  opacity: vis ? 1 : 0,
                  transition: "opacity .5s ease 250ms",
                }}>{it.d}</p>
              </Reveal>
            );
          })}
        </div>
      </div>

      <style>{`
        .sec-grid { display: grid; grid-template-columns: 1fr; }
        .sec-cell { padding: 28px 26px; border-bottom: 1px solid var(--line); }
        .sec-cell:last-child { border-bottom: none; }
        @media (min-width: 720px) {
          .sec-grid { grid-template-columns: 1fr 1fr; }
          .sec-cell { border-right: 1px solid var(--line); }
          .sec-cell:nth-child(2n) { border-right: none; }
          .sec-cell:nth-last-child(-n+2) { border-bottom: none; }
        }
        @media (min-width: 1024px) {
          .sec-grid { grid-template-columns: repeat(4, 1fr); }
          .sec-cell { border-bottom: none; }
          .sec-cell:last-child { border-right: none; }
          .sec-cell:nth-child(2n) { border-right: 1px solid var(--line); }
        }
      `}</style>
    </section>
  );
}

/* =================================================================
   FAQ
================================================================= */
function FAQ() {
  const items = [
    {
      q: "С какими версиями 1С работаете?",
      a: "1С:Бухгалтерия для Казахстана 3.0, УНФ для Казахстана, ERP, ЗУП. Российские конфигурации — БП 3.0, УНФ, КА, ERP. Если у вас сильно кастомизированная конфигурация — на встрече смотрим, что подключаем.",
    },
    {
      q: "Сколько занимает интеграция?",
      a: "SaaS — 1–3 рабочих дня от подписания до первой проводки. On-Premise — от 2 до 6 недель в зависимости от инфраструктуры и требований ИБ.",
    },
    {
      q: "SaaS или On-Premise — что выбрать?",
      a: "SaaS — если хотите быстро и не трогать инфраструктуру. On-Premise — если у вас политика «данные не покидают периметр» или есть требование банковского регулятора. Функционально они одинаковые, мы не делим продукт.",
    },
    {
      q: "Где физически хранятся данные?",
      a: "В SaaS — в дата-центрах в Алматы, у партнёрского провайдера с сертификатами ISO 27001 и PCI DSS. Для российских клиентов — отдельный контур в Москве. On-Premise — там, где вы развернёте.",
    },
    {
      q: "Что произойдёт, если AI ошибётся в проводке?",
      a: "Каждое действие агента сначала идёт в очередь подтверждения с настраиваемыми лимитами. Например: ниже 50 000 ₸ — авто, выше — ждёт визу главбуха в Telegram. Любое действие можно откатить из аудит-журнала одной кнопкой.",
    },
    {
      q: "Можно ли использовать свою LLM?",
      a: "В On-Premise — да. Подключаем приватные модели: Llama 3.1, GigaChat, YandexGPT, локальные fine-tuned варианты. В SaaS используется наша модель в дата-центре в РК, без отправки данных к OpenAI.",
    },
    {
      q: "Сколько стоит для холдинга из 8 юрлиц?",
      a: "На тарифе Энтерпрайз цена считается от количества активных пользователей, а не юрлиц. Для 8 юрлиц с командой 30 человек — ориентировочно 1.2–1.4 млн ₸/мес. Точно посчитаем после короткого созвона.",
    },
    {
      q: "Можно ли уйти и забрать данные?",
      a: "Да. Экспорт всей базы в формате 1С DT-выгрузки и в стандартном CSV доступен из кабинета в любой момент. Контракт расторгается с уведомлением за 30 дней без штрафов.",
    },
  ];

  const [open, setOpen] = React.useState(0);
  return (
    <section id="FAQ" className="section-pad">
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{ marginBottom: 48 }}>
          <Reveal><span className="eyebrow">/ часто спрашивают</span></Reveal>
          <Reveal delay={100}>
            <h2 style={{ marginTop: 14 }}>
              Ответы <span className="serif" style={{ color: "var(--accent)" }}>заранее</span>
            </h2>
          </Reveal>
        </div>

        <div style={{ borderTop: "1px solid var(--line)" }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={i} delay={i * 40}>
                <div style={{ borderBottom: "1px solid var(--line)" }}>
                  <button
                    aria-expanded={isOpen}
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: "100%", textAlign: "left", background: "transparent", border: 0, color: "var(--fg)",
                      padding: "22px 4px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, cursor: "pointer",
                    }}
                  >
                    <span style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.015em" }}>{it.q}</span>
                    <span style={{
                      width: 28, height: 28, display: "grid", placeItems: "center",
                      borderRadius: 50, border: "1px solid var(--line)",
                      color: isOpen ? "var(--accent)" : "var(--fg-dim)",
                      transition: "all .25s ease", flexShrink: 0,
                      background: isOpen ? "rgba(168,245,208,0.06)" : "transparent",
                      transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
                    }} className="faq-icon">
                      {isOpen ? <IconMinus size={14} /> : <IconPlus size={14} />}
                    </span>
                  </button>
                  <div style={{
                    overflow: "hidden",
                    maxHeight: isOpen ? 240 : 0,
                    opacity: isOpen ? 1 : 0,
                    transition: "max-height .38s ease, opacity .28s ease, padding .38s ease",
                    paddingBottom: isOpen ? 22 : 0,
                  }}>
                    {isOpen && (
                      <p className="faq-body" style={{ fontSize: 15, maxWidth: 720, paddingRight: 40 }}>{it.a}</p>
                    )}
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* =================================================================
   Final CTA
================================================================= */
function FinalCTA() {
  return (
    <section id="cta" style={{ position: "relative", padding: "140px 0", overflow: "hidden" }}>
      <div className="orb" style={{ width: 720, height: 720, left: "50%", top: "50%", transform: "translate(-50%, -50%)", background: "radial-gradient(circle, rgba(168,245,208,0.22), rgba(139,111,255,0.10) 40%, transparent 70%)" }} />

      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <Reveal>
          <h2 style={{ fontSize: "clamp(40px, 6vw, 88px)", maxWidth: 980, margin: "0 auto" }}>
            Перестаньте носить выписки <span className="serif" style={{ color: "var(--accent)" }}>руками</span>.<br />
            Это работа агента.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p style={{ marginTop: 28, fontSize: 18, maxWidth: 580, marginInline: "auto" }}>
            30-минутная консультация. Покажем на ваших данных, что агент закроет в первую очередь.
          </p>
        </Reveal>
        <Reveal delay={200}>
          <div style={{ marginTop: 40, display: "flex", flexWrap: "wrap", gap: 12, justifyContent: "center" }}>
            <Magnetic><a href="#" className="pill pill-primary" style={{ whiteSpace: "nowrap" }}>Попробовать SaaS <IconArrow size={14} /></a></Magnetic>
            <Magnetic strength={5}><a href="#" className="pill" style={{ whiteSpace: "nowrap" }}>Запросить On-Premise demo</a></Magnetic>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div className="mono" style={{ marginTop: 28, fontSize: 12, color: "var(--fg-mute)", letterSpacing: "0.05em" }}>
            БЕЗ КАРТЫ · 14 ДНЕЙ ТЕСТА · ОТМЕНА В 1 КЛИК
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* =================================================================
   Footer
================================================================= */
function Footer() {
  const cols = [
    { h: "Продукт", links: ["Возможности", "Тарифы", "Безопасность", "Roadmap", "Changelog"] },
    { h: "Решения",  links: ["Для главбуха", "Для финдира", "Для IT-директора", "Для холдинга"] },
    { h: "Ресурсы", links: ["Документация", "API · SOAP", "Статус системы", "Журнал инцидентов"] },
    { h: "Компания", links: ["О нас", "Контакты", "Партнёрам", "Вакансии"] },
  ];
  return (
    <footer style={{ borderTop: "1px solid var(--line)", padding: "56px 0 36px" }}>
      <div className="container">
        <div className="footer-grid" style={{ display: "grid", gap: 40 }}>
          <div>
            <Logo />
            <p style={{ marginTop: 16, fontSize: 13, maxWidth: 280 }}>
              AI-платформа автоматизации workflow для бизнеса на 1С. Алматы · Астана · Москва.
            </p>
            <div style={{ marginTop: 18, display: "flex", gap: 8 }}>
              <span className="pill-tag mono" style={{ fontSize: 11 }}>RU</span>
              <span className="pill-tag mono" style={{ fontSize: 11, color: "var(--fg-mute)" }}>KZ · скоро</span>
            </div>
          </div>

          {cols.map((c) => (
            <div key={c.h}>
              <div className="mono" style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em", marginBottom: 14 }}>{c.h.toUpperCase()}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map((l) => (
                  <li key={l}><a href="#" style={{ fontSize: 13.5, color: "var(--fg-dim)" }}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="div-line" style={{ margin: "44px 0 22px" }} />

        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: 12, fontSize: 12, color: "var(--fg-mute)" }} className="mono">
          <span>© 2026 ZertekFlow Technologies</span>
          <span>BIN 240540019999 · Алматы, пр. Аль-Фараби 17</span>
          <span style={{ whiteSpace: "nowrap" }}>v 1.4.2 · <span className="footer-live" style={{ display: "inline-block", width: 7, height: 7, borderRadius: "50%", background: "var(--accent)", verticalAlign: "middle", marginRight: 4 }} /><span style={{ color: "var(--accent)" }}>operational</span></span>
        </div>
      </div>

      <style>{`
        .footer-grid { grid-template-columns: 1fr; }
        @media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important; } }
      `}</style>
    </footer>
  );
}

window.PlanDuo = PlanDuo;
window.Pricing = Pricing;
window.Security = Security;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
