function StatsBand() {
  const items = [
    { n: "6.000", l: "Σημειώσεις", sub: "Σε όλα τα μαθήματα" },
    { n: "14", l: "Μαθήματα", sub: "Γυμνάσιο · Λύκειο · Πανελλήνιες" },
    { n: "84", l: "Υποκατηγορίες", sub: "Με αναλυτικά θέματα" },
    { n: "3.2k", l: "Μαθητές", sub: "Μελετούν ενεργά" },
  ];
  return (
    <section className="sfy-statsband" style={{background: "var(--forest)", color: "var(--paper)", padding: "0 32px"}}>
      <div style={{
        maxWidth: 1400, margin: "0 auto",
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
        borderLeft: "1px solid rgba(241,236,224,0.18)",
      }} className="sfy-stats-grid">
        {items.map((it, i) => (
          <div key={i} className="sfy-stats-cell" style={{
            padding: "52px 32px",
            borderRight: "1px solid rgba(241,236,224,0.18)",
            display: "flex", flexDirection: "column", gap: 8,
            position: "relative",
          }}>
            <span style={{
              position: "absolute", top: 14, right: 16,
              fontFamily: "var(--mono)", fontSize: 10, opacity: 0.5,
              letterSpacing: "0.15em",
            }}>{String(i+1).padStart(2,"0")}</span>
            <div className="sfy-stats-num" style={{
              fontFamily: "var(--serif)", fontWeight: 350,
              fontSize: "clamp(48px, 5.5vw, 80px)",
              lineHeight: 1, letterSpacing: "-0.025em",
              fontVariationSettings: '"opsz" 144',
            }}>{it.n}<span style={{color: "var(--ember)"}}>+</span></div>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 11.5,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: "rgba(241,236,224,0.95)", marginTop: 4,
            }}>{it.l}</div>
            <div style={{fontSize: 13, color: "rgba(241,236,224,0.6)"}}>{it.sub}</div>
          </div>
        ))}
        <style>{`
          @media (max-width: 880px) {
            .sfy-stats-grid { grid-template-columns: 1fr 1fr !important; }
          }
          /* ── Mobile ────────────────────────────────────────── */
          @media (max-width: 640px) {
            .sfy-statsband { padding: 0 20px !important; }
            .sfy-stats-cell { padding: 32px 20px !important; }
            .sfy-stats-num { font-size: 44px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.StatsBand = StatsBand;

function SectionHead({num, eyebrow, color}) {
  return (
    <div className="sfy-sechead" style={{display:"flex", alignItems:"center", gap: 16, marginBottom: 48}}>
      <span style={{
        fontFamily: "var(--serif)", fontStyle: "italic",
        fontSize: 32, color: color || "var(--ember)", fontWeight: 400,
        lineHeight: 1,
      }}>{num}</span>
      <span style={{flex: "0 0 56px", height: 1, background: "currentColor", opacity: 0.4}} />
      <span style={{
        fontFamily: "var(--mono)", fontSize: 11.5,
        letterSpacing: "0.22em", textTransform: "uppercase",
        color: "var(--ink-soft)",
      }}>{eyebrow}</span>
      <style>{`
        @media (max-width: 640px) {
          .sfy-sechead { margin-bottom: 28px !important; gap: 12px !important; }
          .sfy-sechead > span:nth-child(2) { flex: 0 0 32px !important; }
          .sfy-sechead > span:last-child { font-size: 10.5px !important; letter-spacing: 0.18em !important; }
        }
      `}</style>
    </div>
  );
}
window.SectionHead = SectionHead;