// Features grid
const Sparkline = ({ color }) => (
  <svg className="feat-spark" viewBox="0 0 200 32" preserveAspectRatio="none">
    <defs>
      <linearGradient id={`spk-${color}`} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor={`var(--${color})`} stopOpacity="0.4" />
        <stop offset="100%" stopColor={`var(--${color})`} stopOpacity="0" />
      </linearGradient>
    </defs>
    <path
      d="M0 24 L20 18 L40 22 L60 12 L80 16 L100 8 L120 14 L140 6 L160 10 L180 4 L200 8 L200 32 L0 32 Z"
      fill={`url(#spk-${color})`}
    />
    <path
      d="M0 24 L20 18 L40 22 L60 12 L80 16 L100 8 L120 14 L140 6 L160 10 L180 4 L200 8"
      fill="none"
      stroke={`var(--${color})`}
      strokeWidth="1.4"
    />
  </svg>
);

const FeaturesSection = () => {
  const items = [
    { tone: "", icon: "bolt", title: "Anycast edge за 38 мс", desc: "Глобальный edge с автоматической маршрутизацией. Запрос едет туда, где ближайшая healthy-нода.", spark: "blue" },
    { tone: "violet", icon: "scale", title: "Горизонтальное масштабирование", desc: "От 0 до 800 контейнеров за 8 секунд. Платите за исполнение, а не за провижн.", spark: "violet" },
    { tone: "emerald", icon: "shield", title: "Нулевая конфигурация TLS", desc: "Сертификаты, mTLS, DDoS-фильтры и WAF включены по умолчанию для каждого домена.", spark: "emerald" },
    { tone: "", icon: "stack", title: "Managed-стек данных", desc: "Postgres, Redis, ClickHouse и S3-совместимое хранилище. Бэкапы каждый час с PITR.", spark: "blue" },
    { tone: "violet", icon: "regions", title: "Multi-region active/active", desc: "Развёртывайте в любые 3 регионов и переключайтесь по latency или нагрузке.", spark: "violet" },
    { tone: "emerald", icon: "chart", title: "Наблюдаемость без агентов", desc: "Метрики, трейсы и логи с корреляцией по trace-id. Дашборды и алерты — из коробки.", spark: "emerald" },
  ];
  return (
    <section className="section" id="features">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Capabilities</span>
          <h2>Всё, что вам нужно.<br /><span className="gradient-text">Ничего лишнего.</span></h2>
          <p>Один контрольный пейн, шесть примитивов, бесконечная гибкость. Datagio проектировалась командами, которые в три ночи дежурят на пейджере.</p>
        </div>
        <div className="feat-grid">
          {items.map((it, i) => (
            <div key={i} className={`glass feat-card ${it.tone}`}>
              <div className="feat-ico"><Icon name={it.icon} size={20} /></div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
              <Sparkline color={it.spark} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const BusinessSection = () => {
  // Generate 60 uptime bars; 2 amber dips for honesty
  const bars = Array.from({ length: 60 }, (_, i) => i === 12 || i === 41 ? "warn" : "ok");
  return (
    <section className="section" id="enterprise">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">For business</span>
          <h2>Надежность,<br />которой доверяет <span className="gradient-text">enterprise</span></h2>
          <p>Финансово обеспеченный SLA, прозрачные incident-репорты, и команда поддержки, которая не передаёт тикет дальше первой линии.</p>
        </div>
        <div className="biz-grid">
          <div className="glass biz-main">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
              <h3>Глобальный uptime, последние 60 дней</h3>
              <span className="status-pill"><span className="status-dot" /> Все системы здоровы</span>
            </div>
            <div className="uptime-display">
              <span className="uptime-num">99.997%</span>
              <div className="uptime-meta">
                <span className="l">SLA · продакшн</span>
                <span className="v">+0.007 над целью</span>
              </div>
            </div>
            <div className="uptime-bars">
              {bars.map((b, i) => <span key={i} className={b === "warn" ? "warn" : ""} />)}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-4)" }}>
              <span>06 мар</span><span>сегодня</span>
            </div>
          </div>
          <div className="biz-side">
            <div className="glass biz-card">
              <span className="badge"><Icon name="lock" size={11} /> Security</span>
              <h4>Защита по умолчанию</h4>
              <p>Изоляция воркером, шифрование данных at-rest и in-transit, ключи под управлением KMS — без галочек в чек-листе.</p>
              <div className="biz-compl">
                <span className="chip">SOC 2 Type II</span>
                <span className="chip">ISO 27001</span>
                <span className="chip">GDPR</span>
                <span className="chip">HIPAA</span>
                <span className="chip">PCI DSS</span>
              </div>
            </div>
            <div className="glass biz-card">
              <span className="badge"><Icon name="shield" size={11} /> Support</span>
              <h4>Команда инженеров, не саппорт-бот</h4>
              <p>Прямая Slack-комната с дежурными SRE, гарантированный ответ за 15 минут на P1, ежеквартальные ревью архитектуры.</p>
              <div className="biz-compl" style={{ marginTop: 8 }}>
                <span className="chip">24 / 7 / 365</span>
                <span className="chip">Назначенный TAM</span>
                <span className="chip">Custom SLA</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.FeaturesSection = FeaturesSection;
window.BusinessSection = BusinessSection;