// Section components — split for maintainability
const HeroSection = () => {
  const [tab, setTab] = React.useState("cli");
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <span className="status-pill">
            <span className="status-dot" />
            All systems operational · 38 regions
          </span>
          <h1>
            Инфраструктура,<br />
            которая <span className="gradient-text">масштабируется</span><br />
            вместе с вами
          </h1>
          <p className="hero-sub">
            Развёртывайте за секунды, держите 99.99% аптайма и платите только за реально потреблённые ресурсы. Datagio — единая платформа для серверов, баз данных, объектного хранилища и edge-сети.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#pricing">
              Начать бесплатно
              <Icon name="arrow-right" size={16} />
            </a>
            <a className="btn btn-ghost" href="#dev">
              <Icon name="terminal" size={16} />
              Развернуть сервер
            </a>
          </div>
          <div className="hero-meta">
            <span className="hero-meta-item"><Icon name="check" size={14} /> Без карты на старте</span>
            <span className="hero-meta-item"><Icon name="check" size={14} /> $200 кредитов</span>
            <span className="hero-meta-item"><Icon name="check" size={14} /> SOC 2 · ISO 27001</span>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-topo"><Topology /></div>
          <div className="hero-floating f1">
            <span className="lab">p99 latency</span>
            <span className="val">38<span style={{ fontSize: 12, color: "var(--fg-3)" }}> ms</span> <span className="accent">↓ 12%</span></span>
          </div>
          <div className="hero-floating f2">
            <span className="lab">deploy</span>
            <span className="val">7.3<span style={{ fontSize: 12, color: "var(--fg-3)" }}> s</span> <span className="accent">live</span></span>
          </div>
          <div className="hero-floating f3">
            <span className="lab">requests · /s</span>
            <span className="val">128k <span className="accent-v">peak</span></span>
          </div>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: 80 }}>
        <div className="logos">
          <div className="logos-label">Уже работают на Datagio</div>
          <div className="logos-row">
            <div>NORTHWIND</div>
            <div>linear/co</div>
            <div>Quanta·</div>
            <div>HELIOSAI</div>
            <div>FORMCAST</div>
            <div>orbital_</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const MetricsBand = () => (
  <section className="section" style={{ paddingTop: 60, paddingBottom: 60 }}>
    <div className="wrap">
      <div className="metrics">
        <div className="metric"><span className="num">99.99%</span><span className="lab">SLA по каждому региону</span></div>
        <div className="metric"><span className="num">7s</span><span className="lab">Среднее время до прода</span></div>
        <div className="metric"><span className="num">38</span><span className="lab">Регионов и edge-точек</span></div>
        <div className="metric"><span className="num">$0</span><span className="lab">До первого деплоя</span></div>
      </div>
    </div>
  </section>
);

const DeveloperSection = () => {
  const [tab, setTab] = React.useState("cli");
  const features = [
    { id: "cli", icon: "terminal", title: "CLI первого класса", desc: "Один бинарь, нативный shell-completion, скриптуйте инфру как код." },
    { id: "api", icon: "code", title: "Чистый REST + WebSocket API", desc: "Управляйте кластерами и стримьте логи напрямую из любого языка." },
    { id: "config", icon: "git", title: "GitOps из коробки", desc: "Декларативный datagio.toml с превью и атомарными rollback'ами." },
  ];
  return (
    <section className="section" id="dev">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">For developers</span>
          <h2>Платформа, которая чувствуется<br />как локальный <span className="gradient-text">dev-loop</span></h2>
          <p>От `git push` до глобального трафика — без YAML‑дзена, без VPC-инструкций на сорок страниц. Одна команда, одна абстракция, одна нотация.</p>
        </div>
        <div className="dev-grid">
          <div className="dev-features">
            {features.map((f) => (
              <div
                key={f.id}
                className={`dev-feature ${tab === f.id ? "active" : ""}`}
                onClick={() => setTab(f.id)}
              >
                <div className="ico"><Icon name={f.icon} size={20} /></div>
                <div>
                  <h3>{f.title}</h3>
                  <p>{f.desc}</p>
                </div>
              </div>
            ))}
          </div>
          <TerminalDemo tab={tab} setTab={setTab} />
        </div>
      </div>
    </section>
  );
};

window.HeroSection = HeroSection;
window.MetricsBand = MetricsBand;
window.DeveloperSection = DeveloperSection;