function Features() {
  return (
    <section className="section-pad" id="features">
      <div className="container">
        <span className="section-eyebrow">Можливості</span>
        <h2 className="section-title">Все, що потрібно — в одному застосунку</h2>
        <p className="section-sub">Адаптивні тести, аналітика, бойові режими. Те, що раніше коштувало тисячі — тепер у твоєму телефоні.</p>

        <div className="bento">
          {/* big — adaptive */}
          <div className="b-card b-orange reveal" style={{ gridColumn: "span 4", gridRow: "span 2" }}>
            <span className="tag" style={{ background: "rgba(249,115,22,0.15)", color: "var(--o-700)" }}>★ Головне</span>
            <h3 style={{ marginTop: 16, fontSize: 30, lineHeight: 1.1 }}>Адаптивні тести, які&nbsp;тренують саме тебе</h3>
            <p style={{ fontSize: 15.5 }}>
              Алгоритм щодня аналізує твої відповіді, час на роздуми та помилки. На основі цього він автоматично підлаштовує складність наступних питань.
              Ти не сидиш над тим, що вже знаєш — і не залишаєшся сам на сам зі складним. Кожна сесія — точно під твій рівень.
            </p>
            <div style={{ marginTop: 24, position: "relative" }}>
              <AdaptiveDemo/>
            </div>
          </div>

          {/* mistakes */}
          <div className="b-card b-green reveal" style={{ gridColumn: "span 2" }}>
            <div style={{ width: 44, height: 44, background: "#fff", borderRadius: 14, display: "grid", placeItems: "center", color: "#15803D" }}>
              <Icon name="target"/>
            </div>
            <h3 style={{ marginTop: 14 }}>Робота над помилками</h3>
            <p>Окремий режим для тем, де ти найчастіше тупиш. Алгоритм запам'ятовує кожну помилку і повертає її через декілька днів — щоб закріпити правильну відповідь надовго.</p>
          </div>

          {/* offline */}
          <div className="b-card reveal" style={{ gridColumn: "span 2" }}>
            <div style={{ width: 44, height: 44, background: "var(--o-50)", borderRadius: 14, display: "grid", placeItems: "center", color: "var(--o-600)" }}>
              <Icon name="bolt"/>
            </div>
            <h3 style={{ marginTop: 14 }}>Працює офлайн</h3>
            <p>В дорозі, у школі, в селі бабусі — інтернет не потрібен. Завантаж теми один раз і тренуйся будь-де. Прогрес автоматично синхронізується, коли ти знов онлайн.</p>
          </div>

          {/* explanations */}
          <div className="b-card reveal" style={{ gridColumn: "span 3" }}>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
              <div style={{ width: 44, height: 44, background: "#DBEAFE", borderRadius: 14, display: "grid", placeItems: "center", color: "#3B82F6", flexShrink: 0 }}>
                <Icon name="brain"/>
              </div>
              <div>
                <h3>Пояснення до кожного питання</h3>
                <p>Не просто «правильна відповідь — В». Розбираємо чому: з контекстом, прикладами, посиланнями на правило чи закон. Зрозумів — запам'ятав — застосував.</p>
              </div>
            </div>
          </div>

          {/* simulation */}
          <div className="b-card b-dark reveal" style={{ gridColumn: "span 3" }}>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
              <div style={{ width: 44, height: 44, background: "rgba(249,115,22,0.2)", borderRadius: 14, display: "grid", placeItems: "center", color: "#FB923C", flexShrink: 0 }}>
                <Icon name="trophy"/>
              </div>
              <div>
                <h3>Симуляція НМТ 2026</h3>
                <p>Реальні умови іспиту: формат, таймер, бал за стобальною шкалою. Здай іспит ще до іспиту — і прийди на справжній уже спокійним та впевненим у результаті.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// New interactive: animated subject mastery rings
function AdaptiveDemo() {
  const [active, setActive] = React.useState(0);
  const subjects = [
    { name: "Українська мова", val: 86, color: "#3B82F6", bg: "#DBEAFE" },
    { name: "Математика", val: 64, color: "#F97316", bg: "#FFEDD5" },
    { name: "Історія", val: 92, color: "#22C55E", bg: "#DCFCE7" },
    { name: "Англійська", val: 71, color: "#CA8A04", bg: "#FEF3C7" },
  ];
  React.useEffect(() => {
    const id = setInterval(() => setActive((a) => (a + 1) % subjects.length), 2200);
    return () => clearInterval(id);
  }, []);
  const cur = subjects[active];
  return (
    <div style={{
      background: "rgba(255,255,255,0.7)", borderRadius: 22, padding: 18,
      border: "1px solid rgba(254,215,170,0.6)",
      display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap",
    }}>
      <div style={{ flexShrink: 0 }}>
        <MasteryRing value={cur.val} color={cur.color} bg={cur.bg}/>
      </div>
      <div style={{ flex: 1, minWidth: 180 }}>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--o-700)", marginBottom: 4 }}>
          Поточний рівень
        </div>
        <div style={{ fontSize: 18, fontWeight: 900, color: "var(--ink)", marginBottom: 12, transition: "color 400ms" }}>{cur.name}</div>
        <div style={{ display: "grid", gap: 6 }}>
          {subjects.map((s, i) => (
            <button key={i} onClick={() => setActive(i)} style={{
              display: "flex", alignItems: "center", gap: 8,
              padding: "6px 10px", borderRadius: 10,
              background: i === active ? "rgba(249,115,22,0.12)" : "transparent",
              transition: "background 200ms",
              textAlign: "left",
              width: "100%",
            }}>
              <span style={{ width: 8, height: 8, borderRadius: 9999, background: s.color, flexShrink: 0 }}/>
              <span style={{ fontSize: 12, fontWeight: i === active ? 800 : 600, color: "var(--ink-2)", flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.name}</span>
              <span style={{ fontSize: 12, fontWeight: 800, color: s.color, flexShrink: 0 }}>{s.val}%</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function MasteryRing({ value, color, bg }) {
  const r = 52;
  const c = 2 * Math.PI * r;
  const off = c - (value / 100) * c;
  return (
    <div style={{ position: "relative", width: 130, height: 130, flexShrink: 0 }}>
      <svg width="130" height="130" viewBox="0 0 130 130">
        <circle cx="65" cy="65" r={r} fill={bg} stroke={bg} strokeWidth="14"/>
        <circle cx="65" cy="65" r={r} fill="none"
          stroke={color} strokeWidth="14"
          strokeDasharray={c} strokeDashoffset={off}
          strokeLinecap="round"
          transform="rotate(-90 65 65)"
          style={{ transition: "stroke-dashoffset 700ms cubic-bezier(0.22,1,0.36,1), stroke 400ms" }}
        />
      </svg>
      <div style={{
        position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
        flexDirection: "column",
      }}>
        <div style={{ fontSize: 30, fontWeight: 900, color: "var(--ink)", letterSpacing: "-0.03em", lineHeight: 1 }}>{value}<span style={{ fontSize: 15, color: "var(--muted)" }}>%</span></div>
        <div style={{ fontSize: 9, fontWeight: 800, color: "var(--muted)", letterSpacing: "0.04em", textTransform: "uppercase", marginTop: 4 }}>Готовність</div>
      </div>
    </div>
  );
}
window.Features = Features;