function Gallery() {
  const tiles = [
    { img: "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=800&q=80", label: "ΣΗΜΕΙΏΣΕΙΣ", span: "tall" },
    { img: "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=800&q=80", label: "ΑΣΚΉΣΕΙΣ", span: "wide" },
    { img: "https://images.unsplash.com/photo-1517502884422-41eaead166d4?w=800&q=80", label: "QUIZ" },
    { img: "https://images.unsplash.com/photo-1488998427799-e3362cec87c3?w=800&q=80", label: "ΠΡΌΟΔΟΣ", span: "wide" },
    { img: "https://images.unsplash.com/photo-1606326608606-aa0b62935f2b?w=800&q=80", label: "ΟΡΓΆΝΩΣΗ" },
    { img: "https://images.unsplash.com/photo-1495465798138-718f86d1a4bc?w=800&q=80", label: "ΨΥΧΟΛΟΓΊΑ", span: "tall" },
  ];
  return (
    <section id="gallery" className="sfy-gal" style={{
      padding: "120px 32px", background: "var(--paper)",
      borderTop: "1px solid var(--ink)",
    }}>
      <div style={{maxWidth: 1400, margin: "0 auto"}}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr",
          gap: 48, marginBottom: 56, alignItems: "end",
        }} className="sfy-gal-head">
          <div>
            <SectionHead num="05" eyebrow="Η Πλατφόρμα" />
            <h2 className="sfy-gal-h2" style={{
              fontFamily: "var(--serif)", fontWeight: 350,
              fontSize: "clamp(44px, 5.2vw, 76px)",
              lineHeight: 1, letterSpacing: "-0.03em",
              textWrap: "balance",
              fontVariationSettings: '"opsz" 144',
            }}>
              Δες πώς <em style={{color: "var(--forest)", fontWeight: 350}}>μοιάζει</em><br/>
              η μελέτη σήμερα.
            </h2>
          </div>
          <p className="sfy-gal-lead" style={{
            fontFamily: "var(--serif)", fontSize: 18,
            lineHeight: 1.5, color: "var(--ink-soft)",
            maxWidth: 480,
          }}>
            Από τις σημειώσεις στις ασκήσεις και την ψυχολογική στήριξη.
            Έξι περιοχές, ένα οικοσύστημα.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gridAutoRows: "180px",
          gap: 16,
        }} className="sfy-gallery-grid">
          {tiles.map((t, i) => {
            const span = t.span === "tall" ? {gridRow: "span 2"} :
                         t.span === "wide" ? {gridColumn: "span 2"} : {};
            return (
              <div key={i} style={{
                ...span, position: "relative", overflow: "hidden",
                borderRadius: 4, cursor: "pointer",
              }} className="sfy-tile">
                <img src={t.img} alt="" style={{
                  width: "100%", height: "100%", objectFit: "cover",
                  transition: "transform .8s ease",
                }} />
                <div style={{
                  position: "absolute", inset: 0,
                  background: "linear-gradient(180deg, transparent 30%, rgba(20,24,28,0.7))",
                }} />
                <div style={{
                  position: "absolute", left: 16, top: 16,
                  background: "var(--paper)", color: "var(--ink)",
                  padding: "6px 12px", borderRadius: 999,
                  fontFamily: "var(--mono)", fontSize: 10,
                  letterSpacing: "0.18em", fontWeight: 600,
                }}>{String(i+1).padStart(2,"0")}</div>
                <div style={{
                  position: "absolute", left: 20, bottom: 18,
                  color: "#fff", fontFamily: "var(--mono)",
                  fontSize: 12, letterSpacing: "0.22em", fontWeight: 600,
                }}>{t.label}</div>
              </div>
            );
          })}
        </div>

        <style>{`
          .sfy-tile:hover img { transform: scale(1.06); }
          @media (max-width: 980px) {
            .sfy-gal-head { grid-template-columns: 1fr !important; }
            .sfy-gallery-grid { grid-template-columns: 1fr 1fr !important; }
            .sfy-gallery-grid > div { grid-column: span 1 !important; grid-row: span 1 !important; }
          }
          /* ── Mobile ────────────────────────────────────────── */
          @media (max-width: 640px) {
            .sfy-gal { padding: 64px 20px !important; }
            .sfy-gal-head { gap: 18px !important; margin-bottom: 32px !important; }
            .sfy-gal-h2 { font-size: clamp(32px, 9.5vw, 46px) !important; }
            .sfy-gal-lead { font-size: 15.5px !important; }
            .sfy-gallery-grid { grid-auto-rows: 150px !important; gap: 10px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.Gallery = Gallery;