// Pricing, Testimonials, Docs, FAQ, CTA banner
const PricingSection = () => {
  const [yearly, setYearly] = React.useState(true);
  const tiers = [
    {
      name: "Hobby",
      desc: "Для пет-проектов, прототипов и обучения. Никогда не истекает.",
      monthly: 0,
      yearly: 0,
      cta: "Начать бесплатно",
      features: [
        "1 проект, 2 региона",
        "100 GB трафика / мес",
        "Community support",
        "Auto-TLS и доменная аренда",
      ],
    },
    {
      name: "Pro",
      desc: "Для команд, которые катят релизы каждый день и не любят сюрпризов.",
      monthly: 39,
      yearly: 29,
      featured: true,
      cta: "Начать 14-дневный триал",
      features: [
        "Безлимит проектов · 10 регионов",
        "Auto-scaling до 80 контейнеров",
        "Postgres + Redis · бэкапы PITR",
        "Slack-канал поддержки",
        "Audit logs · 90 дней",
        "Preview-окружения на каждый PR",
      ],
    },
    {
      name: "Enterprise",
      desc: "Под нагрузку, регуляторку и SLA, который пишут юристы.",
      monthly: null,
      yearly: null,
      cta: "Связаться с продажами",
      features: [
        "99.99% SLA с финансовой компенсацией",
        "Dedicated VPC · BYOC · приватные регионы",
        "SAML SSO, SCIM, RBAC, audit-export",
        "Назначенный TAM и SRE on-call",
        "Custom compliance: HIPAA, FedRAMP, PCI",
        "Volume-скидки и committed-use",
      ],
    },
  ];
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="section-head" style={{ alignItems: "flex-start" }}>
          <span className="eyebrow">Pricing</span>
          <h2>Прозрачные тарифы.<br />Без <span className="gradient-text">скрытых строк</span> в счёте.</h2>
          <p>Платите только за реально потреблённые ресурсы. Egress не округляется до гигабайта, секунды CPU не округляются до часа.</p>
        </div>
        <div className="pricing-toggle">
          <button className={!yearly ? "active" : ""} onClick={() => setYearly(false)}>Ежемесячно</button>
          <button className={yearly ? "active" : ""} onClick={() => setYearly(true)}>Год<span className="save">−25%</span></button>
        </div>
        <div className="price-grid">
          {tiers.map((t, i) => (
            <div key={i} className={`glass price-card ${t.featured ? "featured" : ""}`}>
              <div className="price-tier">
                <h3>{t.name}</h3>
                {t.featured && <span className="pop">Popular</span>}
              </div>
              <div className="price-cost">
                {t.monthly === null ? (
                  <span className="amt" style={{ fontSize: 36 }}>Custom</span>
                ) : (
                  <>
                    <span className="amt">${yearly ? t.yearly : t.monthly}</span>
                    <span className="per">/ месяц{yearly ? ", при оплате за год" : ""}</span>
                  </>
                )}
              </div>
              <p className="price-desc">{t.desc}</p>
              <a className={`btn ${t.featured ? "btn-primary" : "btn-ghost"}`} href="#">
                {t.cta}
                <Icon name="arrow-right" size={14} />
              </a>
              <ul className="price-list">
                {t.features.map((f, j) => (
                  <li key={j}><Icon name="check" size={16} />{f}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const TestimonialsSection = () => {
  const items = [
    {
      quote: "Мы переехали с трёх облаков на Datagio за неделю. Latency упало на 40%, а счёт — на 60%. Команда впервые перестала бояться пятницы.",
      name: "Мария Соколова",
      role: "VP Engineering · Northwind",
      tone: "blue",
    },
    {
      quote: "Поддержка отвечает в Slack быстрее, чем наш собственный backend на холодном старте. Это лучшая DX, которую я видел за десять лет.",
      name: "Daniel Park",
      role: "Staff Engineer · Linear/co",
      tone: "violet",
    },
    {
      quote: "Один CLI заменил три тимы DevOps. Не «реклама обещаний», а честные секунды до прода. Мы выкатываем релизы 40 раз в день.",
      name: "Игорь Венц",
      role: "CTO · HeliosAI",
      tone: "emerald",
    },
  ];
  return (
    <section className="section" id="customers">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Customers</span>
          <h2>Команды, которые катят прод<br /><span className="gradient-text">с уверенностью</span></h2>
        </div>
        <div className="testi-grid">
          {items.map((t, i) => (
            <div key={i} className="glass testi-card">
              <div className="testi-stars">{"★★★★★"}</div>
              <blockquote>«{t.quote}»</blockquote>
              <div className="who">
                <div className="avatar">{t.name.split(" ").map(n => n[0]).join("").slice(0, 2)}</div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const DocsSection = () => {
  const guides = [
    { name: "Quickstart · 5 минут до прода", meta: "Tutorial · 5 min" },
    { name: "datagio.toml — полный референс", meta: "Reference" },
    { name: "Postgres: PITR и read-replicas", meta: "Guide · 8 min" },
    { name: "Multi-region active/active паттерны", meta: "Architecture" },
  ];
  const apis = [
    { name: "POST /v1/deploys", meta: "API · REST" },
    { name: "WS /v1/events — стрим логов", meta: "API · WebSocket" },
    { name: "@datagio/sdk — TypeScript", meta: "SDK · npm" },
    { name: "datagio CLI — install", meta: "CLI · brew · curl" },
  ];
  return (
    <section className="section" id="docs">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Docs & API</span>
          <h2>Документация, написанная инженерами<br /><span className="gradient-text">для инженеров</span></h2>
        </div>
        <div className="docs-grid">
          <div className="glass docs-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <h3>Гайды</h3>
              <a className="btn-link" href="#">Все гайды <Icon name="arrow-right" size={13} /></a>
            </div>
            <ul className="docs-list">
              {guides.map((g, i) => (
                <li key={i}>
                  <span>{g.name}</span>
                  <span style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span className="doc-meta">{g.meta}</span>
                    <Icon name="arrow-right" size={14} />
                  </span>
                </li>
              ))}
            </ul>
          </div>
          <div className="glass docs-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <h3>API & SDK</h3>
              <a className="btn-link" href="#">Reference <Icon name="arrow-right" size={13} /></a>
            </div>
            <ul className="docs-list">
              {apis.map((g, i) => (
                <li key={i}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 14 }}>{g.name}</span>
                  <span style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span className="doc-meta">{g.meta}</span>
                    <Icon name="arrow-right" size={14} />
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

const FaqSection = () => {
  const items = [
    { q: "Что значит pay-as-you-go?", a: "Вы платите только за фактически потреблённые секунды CPU, мегабайты RAM и трафик. Нет минимумов, нет резерваций, нет округления до часа." },
    { q: "Можно ли мигрировать с AWS / GCP / Vercel?", a: "Да. У нас есть импортеры для Terraform, ECS-задач и Vercel-проектов. Для крупных миграций мы выделяем инженера и финансово гарантируем сроки." },
    { q: "Где физически хранятся данные?", a: "Регионы в EU (Франкфурт, Амстердам), US (Iad, SFO), APAC (Сингапур, Токио). Можно жёстко закрепить data residency на уровне проекта или таблицы." },
    { q: "Что включено в SLA 99.99%?", a: "Доступность контрольной плоскости и любого Pro/Enterprise региона. При нарушении — пропорциональный кредит на счёт, до 100% месячной платы." },
    { q: "Поддерживаете ли вы BYOC (свои AWS/GCP-аккаунты)?", a: "Да, на тарифе Enterprise. Datagio устанавливается оператором в ваш аккаунт, мы управляем control-plane, данные не покидают ваш VPC." },
    { q: "Есть ли бесплатная поддержка?", a: "На Hobby — community-форум и публичная документация. На Pro — приоритетный email + Slack-канал. На Enterprise — 24/7 SRE on-call." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">FAQ</span>
          <h2>Частые вопросы</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="icn"><Icon name="plus" size={14} /></span>
              </button>
              <div className="faq-a"><p>{it.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CtaBanner = () => (
  <section className="section" style={{ paddingBottom: 40 }}>
    <div className="wrap">
      <div className="cta-banner">
        <div>
          <h2>Разверните первый сервер<br />за <span className="gradient-text">7 секунд</span></h2>
          <p style={{ marginTop: 18, marginBottom: 24, fontSize: 17 }}>
            Бесплатный аккаунт, $200 кредитов, без привязки карты. Когда вы скажете «продакшн» — мы скажем «готово».
          </p>
          <div className="ctas">
            <a className="btn btn-primary" href="#">Начать бесплатно <Icon name="arrow-right" size={14} /></a>
            <a className="btn btn-ghost" href="#">Поговорить с продажами</a>
          </div>
        </div>
        <div className="meta">
          <span className="row"><Icon name="check" size={14} /> Развертывание за 7.3 секунды (медиана)</span>
          <span className="row"><Icon name="check" size={14} /> 38 регионов и edge-точек</span>
          <span className="row"><Icon name="check" size={14} /> SOC 2, ISO 27001, GDPR</span>
          <span className="row"><Icon name="check" size={14} /> SLA 99.99% с финансовой защитой</span>
        </div>
      </div>
    </div>
  </section>
);

window.PricingSection = PricingSection;
window.TestimonialsSection = TestimonialsSection;
window.DocsSection = DocsSection;
window.FaqSection = FaqSection;
window.CtaBanner = CtaBanner;