import type { HomeContent } from "@/lib/content";

export default function StatsBand({ content }: { content: HomeContent }) {
  return (
    <section style={{ padding: "0 0 20px" }}>
      <div className="container">
        <div
          className="stats-grid"
          style={{
            background: "rgba(255,255,255,.55)",
            backdropFilter: "blur(16px)",
            WebkitBackdropFilter: "blur(16px)",
            border: "1px solid rgba(255,255,255,.75)",
            borderRadius: 28,
            padding: "46px 40px",
            boxShadow: "0 20px 50px rgba(2,47,49,.10)",
          }}
        >
          {content.stats.map((st) => (
            <div
              key={st.n}
              className="stat-cell"
              style={{ padding: "6px 30px", borderLeft: "1px solid rgba(2,47,49,.10)" }}
            >
              <div style={{ fontWeight: 900, fontSize: 46, lineHeight: 1, letterSpacing: "-.02em", color: "#006568" }}>
                {st.n}
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: "#515a63", marginTop: 12, maxWidth: 190 }}>{st.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}