function Curriculum() {
  // Real lessons offered, grouped
  const subjects = [
    { code: "ΓΥΜ", name: "Α' Γυμνασίου", count: 412, group: "Γυμνάσιο" },
    { code: "ΓΥΜ", name: "Β' Γυμνασίου", count: 438, group: "Γυμνάσιο" },
    { code: "ΓΥΜ", name: "Γ' Γυμνασίου", count: 461, group: "Γυμνάσιο" },
    { code: "ΑΡΧ", name: "Αρχαία Γυμνασίου - Λυκείου", sub: "γραμματική · συντακτικό", count: 384, group: "Αρχαία" },
    { code: "ΛΥΚ", name: "ΓΕΛ Α' Λυκείου", count: 502, group: "Λύκειο" },
    { code: "ΛΥΚ", name: "ΓΕΛ Β' Λυκείου", count: 528, group: "Λύκειο" },
    { code: "ΛΥΚ", name: "ΓΕΛ Γ' Λυκείου", count: 596, group: "Λύκειο" },
    { code: "ΕΚΘ", name: "Έκθεση Λυκείου", count: 274, group: "Λύκειο" },
    { code: "ΛΑΤ", name: "Λατινικά", sub: "γραμματική · συντακτικό · Β-Γ Λυκείου", count: 218, group: "Λύκειο" },
    { code: "ΠΑΝ", name: "Προετοιμασία Πανελλαδικών", sub: "Γ' Λυκείου", count: 642, group: "Πανελλαδικές" },
    { code: "ΟΔΓ", name: "Τεχνικές Απομνημόνευσης", count: 38, group: "Τεχνικές & Οδηγίες", icon: "🧠" },
    { code: "ΟΔΓ", name: "Τεχνικές Συγκέντρωσης", count: 42, group: "Τεχνικές & Οδηγίες", icon: "◎" },
    { code: "ΟΔΓ", name: "Τεχνικές Διαχείρισης Άγχους", count: 56, group: "Τεχνικές & Οδηγίες", icon: "◇" },
    { code: "ΟΔΓ", name: "Γενικές Οδηγίες για τον Γονιό", count: 28, group: "Τεχνικές & Οδηγίες", icon: "✦" },
  ];

  const groupColor = {
    "Γυμνάσιο": "var(--ember)",
    "Αρχαία": "var(--ochre)",
    "Λύκειο": "var(--forest)",
    "Πανελλαδικές": "var(--ember)",
    "Τεχνικές & Οδηγίες": "var(--moss, #2F5D52)",
  };

  const groupBg = (g) => {
    if (g === "Γυμνάσιο" || g === "Πανελλαδικές") return "rgba(20,24,28,0.85)";
    if (g === "Αρχαία") return "rgba(196,148,71,0.9)";
    return "rgba(20,36,31,0.85)";
  };

  // Group images
  const groupImg = {
    "Γυμνάσιο": "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=900&q=80",
    "Αρχαία": "https://images.unsplash.com/photo-1564399263809-d10d6f7d6d4f?w=900&q=80",
    "Λύκειο": "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=900&q=80",
    "Πανελλαδικές": "https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=900&q=80",
    "Τεχνικές & Οδηγίες": "https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=900&q=80",
  };

  const [active, setActive] = React.useState(0);
  const cur = subjects[active];

  // Group separators in list
  const grouped = [];
  let lastGroup = null;
  subjects.forEach((s, i) => {
    if (s.group !== lastGroup) {
      grouped.push({ type: "header", label: s.group, color: groupColor[s.group] });
      lastGroup = s.group;
    }
    grouped.push({ type: "item", subject: s, idx: i });
  });

  return (
    <section id="curriculum" className="sfy-curr" style={{
      padding: "120px 32px", background: "var(--paper-warm)",
      borderTop: "1px solid var(--ink)",
    }}>
      <div style={{maxWidth: 1400, margin: "0 auto"}}>
        <div className="sfy-curr-head" style={{
          display: "grid", gridTemplateColumns: "1fr auto",
          alignItems: "end", gap: 40, marginBottom: 64,
        }}>
          <div>
            <SectionHead num="03" eyebrow="Καταστιχογραφία Μαθημάτων" />
            <h2 className="sfy-curr-h2" style={{
              fontFamily: "var(--serif)", fontWeight: 350,
              fontSize: "clamp(48px, 5.6vw, 84px)",
              lineHeight: 1, letterSpacing: "-0.03em",
              color: "var(--ink)", textWrap: "balance", maxWidth: 900,
              fontVariationSettings: '"opsz" 144',
            }}>
              Δεκατέσσερα μαθήματα. <em style={{color: "var(--forest)", fontWeight: 350}}>6.000+</em> σημειώσεις.
            </h2>
          </div>
          <div className="sfy-curr-tags" style={{
            fontFamily: "var(--mono)", fontSize: 11,
            letterSpacing: "0.18em", color: "var(--muted)",
            textTransform: "uppercase", whiteSpace: "nowrap",
          }}>
            ΓΥΜ · ΛΥΚ · ΠΑΝ · ΤΕΧΝΙΚΈΣ
          </div>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr",
          gap: 56, alignItems: "start",
        }} className="sfy-curr-grid">
          {/* List */}
          <div className="sfy-curr-list" style={{borderTop: "1px solid var(--ink)"}}>
            {grouped.map((row, ri) => {
              if (row.type === "header") {
                return (
                  <div key={"h"+ri} className="sfy-curr-grouphd" style={{
                    padding: "20px 28px 8px",
                    fontFamily: "var(--mono)", fontSize: 10.5,
                    letterSpacing: "0.22em", textTransform: "uppercase",
                    color: row.color, fontWeight: 600,
                    borderBottom: "1px dashed rgba(20,24,28,0.18)",
                    display: "flex", alignItems: "center", gap: 12,
                  }}>
                    <span>{row.label}</span>
                    <span style={{flex: 1, height: 1, background: "currentColor", opacity: 0.3}} />
                  </div>
                );
              }
              const s = row.subject;
              const isActive = active === row.idx;
              return (
                <button
                  key={"i"+row.idx}
                  onMouseEnter={() => setActive(row.idx)}
                  onClick={() => setActive(row.idx)}
                  className={"sfy-curr-row " + (isActive ? "is-active" : "")}
                  style={{
                    width: "100%", textAlign: "left",
                    background: isActive ? "var(--ink)" : "transparent",
                    color: isActive ? "var(--paper)" : "var(--ink)",
                    border: 0, borderBottom: "1px solid var(--ink)",
                    padding: isActive ? "24px 28px" : "18px 28px",
                    cursor: "pointer", display: "grid",
                    gridTemplateColumns: "60px 1fr auto auto",
                    gap: 24, alignItems: "center",
                    transition: "all .25s ease",
                    fontFamily: "inherit",
                  }}
                >
                  <span className="sfy-curr-code" style={{
                    fontFamily: "var(--mono)", fontSize: 11,
                    letterSpacing: "0.15em",
                    color: isActive ? groupColor[s.group] : "var(--muted)",
                  }}>{s.code}</span>
                  <span style={{
                    display: "flex", flexDirection: "column", gap: 2,
                  }}>
                    <span className="sfy-curr-rowname" style={{
                      fontFamily: "var(--serif)",
                      fontSize: isActive ? 26 : 22, fontWeight: 400,
                      letterSpacing: "-0.015em", lineHeight: 1.15,
                      transition: "font-size .25s ease",
                    }}>
                      {isActive && <em style={{color: groupColor[s.group], fontStyle: "italic", fontWeight: 350}}>→ </em>}
                      {s.name}
                    </span>
                    {s.sub && (
                      <span className="sfy-curr-rowsub" style={{
                        fontSize: 12, color: isActive ? "rgba(241,236,224,0.6)" : "var(--muted)",
                        fontStyle: "italic",
                      }}>{s.sub}</span>
                    )}
                  </span>
                  <span className="sfy-curr-rowcount" style={{
                    fontFamily: "var(--mono)", fontSize: 12,
                    letterSpacing: "0.05em",
                    color: isActive ? "rgba(241,236,224,0.7)" : "var(--muted)",
                  }}>{s.count} σημ.</span>
                  <span className="sfy-curr-rowarrow" style={{
                    fontSize: 18,
                    color: isActive ? groupColor[s.group] : "transparent",
                    transition: "all .2s ease",
                  }}>↗</span>
                </button>
              );
            })}
          </div>

          {/* Active preview */}
          <div className="sfy-curr-preview" style={{position: "sticky", top: 100}}>
            <div style={{
              aspectRatio: "4/5", overflow: "hidden",
              borderRadius: 4, position: "relative",
              boxShadow: "0 24px 48px -16px rgba(0,0,0,0.3)",
            }}>
              <img key={active} src={groupImg[cur.group]} alt=""
                style={{
                  width: "100%", height: "100%", objectFit: "cover",
                  animation: "sfy-fade .4s ease",
                }} />
              <div style={{
                position: "absolute", inset: 0,
                background: `linear-gradient(180deg, transparent 45%, ${groupBg(cur.group)})`,
              }} />
              <div className="sfy-curr-prevcap" style={{
                position: "absolute", left: 0, right: 0, bottom: 0,
                padding: 28, color: "#fff",
              }}>
                <div style={{
                  fontFamily: "var(--mono)", fontSize: 11,
                  letterSpacing: "0.18em", opacity: 0.85, marginBottom: 8,
                }}>{cur.group.toUpperCase()} · {String(active+1).padStart(2,"0")} / {String(subjects.length).padStart(2,"0")}</div>
                <div className="sfy-curr-prevname" style={{
                  fontFamily: "var(--serif)", fontSize: 34, fontWeight: 400,
                  letterSpacing: "-0.02em", lineHeight: 1.05,
                  fontVariationSettings: '"opsz" 144',
                }}>{cur.name}</div>
                {cur.sub && (
                  <div style={{
                    fontFamily: "var(--serif)", fontStyle: "italic",
                    fontSize: 16, opacity: 0.85, marginTop: 6,
                  }}>{cur.sub}</div>
                )}
                <div className="sfy-curr-prevmeta" style={{
                  display: "flex", gap: 16, marginTop: 18,
                  fontFamily: "var(--mono)", fontSize: 11,
                  letterSpacing: "0.15em",
                }}>
                  <span>{cur.count} ΣΗΜΕΙΏΣΕΙΣ</span>
                  <span>·</span>
                  <span>ΑΣΚΉΣΕΙΣ</span>
                  <span>·</span>
                  <span>QUIZ</span>
                </div>
              </div>
            </div>
            <a href="#courses" style={{
              display: "flex", alignItems: "center", justifyContent: "space-between",
              marginTop: 16, padding: "16px 22px",
              background: "var(--ink)", color: "var(--paper)",
              borderRadius: 4, fontSize: 14, fontWeight: 600,
            }}>
              Δες το μάθημα
              <span>→</span>
            </a>
          </div>
        </div>

        <style>{`
          @keyframes sfy-fade { from { opacity: 0; transform: scale(1.04);} to { opacity: 1; transform: scale(1);} }
          @media (max-width: 980px) {
            .sfy-curr-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
          /* ── Mobile ────────────────────────────────────────── */
          @media (max-width: 640px) {
            .sfy-curr { padding: 64px 20px !important; }
            .sfy-curr-head { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 36px !important; }
            .sfy-curr-h2 { font-size: clamp(32px, 9.5vw, 46px) !important; }
            .sfy-curr-tags { display: none; }

            /* Preview comes first on mobile, list under */
            .sfy-curr-grid { gap: 28px !important; }
            .sfy-curr-preview { position: static !important; order: -1; }
            .sfy-curr-prevcap { padding: 18px !important; }
            .sfy-curr-prevname { font-size: 24px !important; }
            .sfy-curr-prevmeta { font-size: 10px !important; gap: 10px !important; flex-wrap: wrap; }

            /* Compact list rows: 2-row layout per item, drop the count column */
            .sfy-curr-grouphd { padding: 16px 16px 6px !important; font-size: 10px !important; letter-spacing: 0.18em !important; }
            .sfy-curr-row {
              grid-template-columns: 50px 1fr auto !important;
              padding: 14px 16px !important;
              gap: 12px !important;
            }
            .sfy-curr-row.is-active { padding: 18px 16px !important; }
            .sfy-curr-rowname { font-size: 17px !important; }
            .sfy-curr-row.is-active .sfy-curr-rowname { font-size: 19px !important; }
            .sfy-curr-rowsub { font-size: 11px !important; }
            .sfy-curr-rowcount { display: none; }
            .sfy-curr-code { font-size: 10px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.Curriculum = Curriculum;