function Mission() {
  return (
    <section id="mission" className="sfy-mission" style={{padding: "120px 32px", background: "var(--paper)"}}>
      <div style={{maxWidth: 1400, margin: "0 auto"}}>
        <SectionHead num="01" eyebrow="Η Αποστολή Μας" />

        <div style={{
          display: "grid", gridTemplateColumns: "1.05fr 1fr",
          gap: 80, alignItems: "start",
        }} className="sfy-mission-grid">
          <div>
            <h2 style={{
              fontFamily: "var(--serif)", fontWeight: 350,
              fontSize: "clamp(48px, 5.6vw, 84px)",
              lineHeight: 1, letterSpacing: "-0.03em",
              color: "var(--ink)", marginBottom: 28,
              textWrap: "balance",
              fontVariationSettings: '"opsz" 144',
            }} className="sfy-mission-h2">
              Όχι άλλη μια <em style={{color: "var(--forest)", fontWeight: 350}}>πλατφόρμα.</em><br/>
              Ένας <span style={{
                background: "var(--ember)", color: "#fff",
                padding: "0 14px", display: "inline-block",
                transform: "rotate(-1deg)", borderRadius: 6,
              }}>σύμμαχος</span> στη μελέτη.
            </h2>

            <p className="sfy-mission-lead" style={{
              fontFamily: "var(--serif)", fontSize: 21,
              lineHeight: 1.5, color: "var(--ink)",
              marginBottom: 22, textWrap: "pretty", maxWidth: 560,
            }}>
              Η μελέτη δεν είναι μόνο θέμα πρόσβασης σε υλικό. Πρόκειται για το να
              <em style={{color: "var(--forest)"}}> καταλάβεις τι ξέρεις</em>, να οργανώσεις
              την προσπάθειά σου, και να έχεις στήριξη όταν αντιμετωπίζεις δυσκολίες.
            </p>

            <ul className="sfy-mission-list" style={{listStyle: "none", marginTop: 36, borderTop: "1px solid var(--ink)"}}>
              {[
                ["01", "Πλούσιο εκπαιδευτικό υλικό", "6.000+ σημειώσεις, ασκήσεις, τεστ κατανόησης"],
                ["02", "Παρακολούθηση προόδου", "Δες τι κατέχεις και τι χρειάζεται περισσότερη μελέτη"],
                ["03", "Οργάνωση χρόνου", "Εργαλεία για το φόρτο διαβάσματος και τον χρόνο σου"],
                ["04", "Ψυχολογική στήριξη", "Οδηγίες για άγχος, συγκέντρωση, μέθοδο μελέτης"],
              ].map(([n, t, d], i) => (
                <li key={i} style={{
                  display: "grid", gridTemplateColumns: "auto 1fr auto",
                  gap: 24, alignItems: "baseline",
                  padding: "20px 0", borderBottom: "1px solid var(--paper-deep)",
                }}>
                  <span style={{fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.15em", color: "var(--ember)"}}>{n}</span>
                  <div>
                    <div style={{fontFamily: "var(--serif)", fontSize: 20, color: "var(--ink)", marginBottom: 2}}>{t}</div>
                    <div style={{fontSize: 14, color: "var(--muted)"}}>{d}</div>
                  </div>
                  <span style={{fontFamily: "var(--serif)", fontSize: 24, color: "var(--forest)"}}>→</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Layered visual right */}
          <div className="sfy-mission-visual" style={{position: "relative", minHeight: 600}}>
            <div className="sfy-mission-img1" style={{
              position: "absolute", top: 0, right: 0, width: "75%", aspectRatio: "3/4",
              overflow: "hidden", borderRadius: 4,
              boxShadow: "0 30px 60px -20px rgba(0,0,0,0.3)",
            }}>
              <img src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=600&q=80" alt=""
                style={{width: "100%", height: "100%", objectFit: "cover", filter: "saturate(1.05)"}} />
            </div>
            <div className="sfy-mission-img2" style={{
              position: "absolute", bottom: 40, left: 0, width: "55%", aspectRatio: "4/5",
              overflow: "hidden", borderRadius: 4,
              border: "5px solid var(--paper)",
              boxShadow: "0 20px 40px -10px rgba(0,0,0,0.3)",
            }}>
              <img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=500&q=80" alt=""
                style={{width: "100%", height: "100%", objectFit: "cover"}} />
            </div>
            <div className="sfy-mission-quote" style={{
              position: "absolute", bottom: 0, right: "10%",
              background: "var(--forest)", color: "var(--paper)",
              padding: "20px 22px", borderRadius: 4, maxWidth: 220,
              boxShadow: "0 14px 30px -8px rgba(20,36,31,0.4)",
            }}>
              <div style={{fontFamily: "var(--serif)", fontSize: 32, fontWeight: 400, lineHeight: 1, fontStyle: "italic", color: "var(--ember)"}}>"</div>
              <p style={{fontFamily: "var(--serif)", fontSize: 14.5, lineHeight: 1.45, fontStyle: "italic", marginTop: 4}}>
                Η μάθηση πρέπει να είναι προσβάσιμη, οργανωμένη και ανθρώπινη.
              </p>
              <div style={{fontFamily:"var(--mono)", fontSize: 10.5, letterSpacing: "0.18em", marginTop: 12, color: "rgba(241,236,224,0.7)"}}>— Δ. ΜΑΝΈΤΤΑ</div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 980px) {
            .sfy-mission-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
            .sfy-mission-h2 { font-size: clamp(38px, 9vw, 60px) !important; }
          }
          /* ── Mobile ────────────────────────────────────────── */
          @media (max-width: 640px) {
            .sfy-mission { padding: 64px 20px !important; }
            .sfy-mission-grid { gap: 40px !important; }
            .sfy-mission-h2 { font-size: clamp(34px, 10.5vw, 48px) !important; margin-bottom: 20px !important; }
            .sfy-mission-lead { font-size: 17px !important; }
            .sfy-mission-list { margin-top: 24px !important; }
            .sfy-mission-list li { gap: 14px !important; padding: 16px 0 !important; }
            .sfy-mission-list li > div > div:first-child { font-size: 17px !important; }
            .sfy-mission-list li > div > div:last-child { font-size: 13px !important; }

            /* Visual: keep the layered collage but rescaled for narrow viewports.
               img1 has aspect-ratio 3/4 (taller than wide) so a 75% width on a
               320px container is 240×320; aspect-ratio 4/5.2 on the visual gives
               room for img2 + quote to sit beneath without overlapping img1. */
            .sfy-mission-visual { min-height: 0 !important; aspect-ratio: 4 / 5.2; }
            .sfy-mission-img1 { width: 75% !important; }
            .sfy-mission-img2 { width: 50% !important; bottom: 50px !important; }
            .sfy-mission-quote {
              right: 0 !important; bottom: 0 !important;
              max-width: 62% !important; padding: 14px 16px !important;
            }
            .sfy-mission-quote p { font-size: 12.5px !important; line-height: 1.4 !important; }
            .sfy-mission-quote > div:first-child { font-size: 24px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.Mission = Mission;