function Faq() {
  const items = [
    ["Είναι όντως δωρεάν;", "Ναι. Όλο το υλικό — σημειώσεις, ασκήσεις, τεστ — είναι ελεύθερα προσβάσιμο μετά την εγγραφή. Καμία χρέωση, καμία premium συνδρομή."],
    ["Σε ποιους απευθύνεται;", "Σε μαθητές Γυμνασίου και Λυκείου, αλλά και σε υποψηφίους Πανελληνίων που θέλουν οργανωμένη και ποιοτική μελέτη."],
    ["Πώς διασφαλίζεται η ποιότητα;", "Όλο το υλικό σχεδιάζεται και επιμελείται από τη Δέσποινα Μανέττα — φιλόλογο με MSc στη Σχολική Ψυχολογία και πάνω από 10 χρόνια διδακτικής εμπειρίας."],
    ["Μπορώ να παρακολουθήσω την πρόοδό μου;", "Ναι. Κάθε μαθητής έχει personal dashboard με στατιστικά, χρόνο μελέτης, επίδοση στα τεστ και προτάσεις για το τι να μελετήσει στη συνέχεια."],
    ["Τι είδους ψυχολογική στήριξη παρέχετε;", "Άρθρα και πρακτικοί οδηγοί για διαχείριση άγχους, τεχνικές συγκέντρωσης, μέθοδο μελέτης και διαχείριση χρόνου — από επιστήμονα του χώρου."],
    ["Πώς ξεκινάω;", "Κάνε εγγραφή με το email σου, διάλεξε τα μαθήματα που σε ενδιαφέρουν, και ξεκίνα. Δεν χρειάζεται κάρτα ή κάποια άλλη δέσμευση."],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="sfy-faq" style={{
      padding: "120px 32px", background: "var(--paper-warm)",
      borderTop: "1px solid var(--ink)",
    }}>
      <div style={{maxWidth: 1400, margin: "0 auto"}}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 80,
          alignItems: "start",
        }} className="sfy-faq-grid">
          <div className="sfy-faq-aside" style={{position: "sticky", top: 100}}>
            <SectionHead num="07" eyebrow="Συχνές Ερωτήσεις" />
            <h2 className="sfy-faq-h2" style={{
              fontFamily: "var(--serif)", fontWeight: 350,
              fontSize: "clamp(40px, 4.6vw, 64px)",
              lineHeight: 1, letterSpacing: "-0.025em",
              marginBottom: 24, textWrap: "balance",
              fontVariationSettings: '"opsz" 144',
            }}>
              Έχεις<br/><em style={{color: "var(--ember)", fontWeight: 350}}>ερωτήσεις;</em>
            </h2>
            <p className="sfy-faq-lead" style={{fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.55, maxWidth: 360}}>
              Δες αν απαντάμε σε αυτό που σε προβληματίζει — αλλιώς γράψε μας απευθείας.
            </p>
            <a href="#" style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              marginTop: 24, padding: "14px 22px",
              background: "var(--ink)", color: "var(--paper)",
              borderRadius: 999, fontSize: 14, fontWeight: 600,
            }}>Επικοινωνία →</a>
          </div>

          <div className="sfy-faq-list" style={{borderTop: "1px solid var(--ink)"}}>
            {items.map(([q, a], i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{borderBottom: "1px solid var(--ink)"}}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} className="sfy-faq-q" style={{
                    width: "100%", textAlign: "left", padding: "26px 0",
                    background: "transparent", border: 0, cursor: "pointer",
                    display: "grid", gridTemplateColumns: "auto 1fr auto",
                    gap: 24, alignItems: "center", fontFamily: "inherit",
                  }}>
                    <span className="sfy-faq-qnum" style={{
                      fontFamily: "var(--mono)", fontSize: 11,
                      letterSpacing: "0.15em", color: "var(--ember)",
                    }}>{String(i+1).padStart(2,"0")}</span>
                    <span className="sfy-faq-qtxt" style={{
                      fontFamily: "var(--serif)", fontSize: 24,
                      fontWeight: 400, color: "var(--ink)",
                      letterSpacing: "-0.01em",
                    }}>{q}</span>
                    <span className="sfy-faq-qicon" style={{
                      width: 36, height: 36, borderRadius: "50%",
                      background: isOpen ? "var(--ember)" : "transparent",
                      border: isOpen ? "0" : "1.5px solid var(--ink)",
                      color: isOpen ? "#fff" : "var(--ink)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      fontSize: 18, transition: "all .25s ease",
                      flexShrink: 0,
                    }}>{isOpen ? "−" : "+"}</span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 320 : 0, overflow: "hidden",
                    transition: "max-height .35s ease, padding .35s ease",
                    paddingBottom: isOpen ? 28 : 0,
                  }}>
                    <p className="sfy-faq-a" style={{
                      paddingLeft: 56, paddingRight: 60, maxWidth: 720,
                      fontFamily: "var(--serif)", fontSize: 17,
                      lineHeight: 1.55, color: "var(--ink-soft)",
                      textWrap: "pretty",
                    }}>{a}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <style>{`
          @media (max-width: 980px) {
            .sfy-faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
          /* ── Mobile ────────────────────────────────────────── */
          @media (max-width: 640px) {
            .sfy-faq { padding: 64px 20px !important; }
            .sfy-faq-aside { position: static !important; }
            .sfy-faq-h2 { font-size: clamp(32px, 9.5vw, 46px) !important; margin-bottom: 16px !important; }
            .sfy-faq-lead { font-size: 14.5px !important; }
            .sfy-faq-q { gap: 14px !important; padding: 20px 0 !important; }
            .sfy-faq-qtxt { font-size: 17px !important; line-height: 1.3 !important; }
            .sfy-faq-qnum { font-size: 10px !important; }
            .sfy-faq-qicon { width: 30px !important; height: 30px !important; font-size: 16px !important; }
            .sfy-faq-a { padding-left: 0 !important; padding-right: 0 !important; font-size: 15px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.Faq = Faq;