function Military() {
  return (
    <section id="military" className="section-pad">
      <div className="military">
        <div className="flag-bar"/>
        {/* decorative grid */}
        <div className="dot-grid" style={{ opacity: 0.4 }}/>
        <div className="container military-grid">
          <div>
            <div className="ua-flag">
              <div className="ua-flag-inner">
                <div className="ua-blue"/>
                <div className="ua-yellow"/>
                <div className="ua-shine"/>
              </div>
              <div className="ua-pole"/>
            </div>
            <span className="section-eyebrow" style={{ color: "#FFD700" }}>Створено військовими</span>
            <h2>
              Поки ми боронимо країну —<br/>
              <em>готуй її майбутнє.</em>
            </h2>
            <p>
              НМТ+ розроблений діючими військовими ЗСУ. Кожна підписка — це не лише твій бал.
              Це обладнання для нашого підрозділу, інструменти для побратимів і впевненість, що
              нове покоління буде сильним.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
              <a href="#download" className="btn" style={{ background: "#FFD700", color: "#0F172A", fontWeight: 800 }}>
                Стати частиною <Icon name="arrow" size={16}/>
              </a>
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <div style={{
              background: "rgba(255,255,255,0.04)",
              border: "1px solid rgba(255,255,255,0.1)",
              borderRadius: 28,
              padding: 28,
              backdropFilter: "blur(8px)",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                <div style={{ width: 8, height: 8, borderRadius: 9999, background: "#FACC15", boxShadow: "0 0 12px #FACC15" }}/>
                <span className="mono" style={{ fontSize: 12, color: "rgba(255,215,0,0.85)", letterSpacing: "0.16em" }}>МАНІФЕСТ</span>
              </div>
              <div style={{ display: "grid", gap: 18 }}>
                {[
                  ["⚔️", "Ми воюємо за країну", "В якій ти будеш будувати майбутнє."],
                  ["🎓", "Ти вчиш предмети", "Які ми разом захищаємо щодня."],
                  ["🤝", "Кожна підписка", "Це підтримка тих, хто на передовій."],
                ].map(([e, t, s], i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <div style={{ width: 40, height: 40, background: "rgba(255,215,0,0.12)", borderRadius: 12, display: "grid", placeItems: "center", fontSize: 20 }}>{e}</div>
                    <div>
                      <div style={{ fontWeight: 800, fontSize: 16, color: "#fff" }}>{t}</div>
                      <div style={{ fontSize: 14, color: "rgba(226,232,240,0.7)", fontWeight: 500 }}>{s}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Military = Military;