function InstructorBlock() {
  const ref = React.useRef(null);
  const [started, setStarted] = React.useState(false);

  React.useEffect(() => {
    const v = ref.current;
    if (!v) return;
    const t = +(localStorage.getItem("sfy-video-t") || 0);
    if (t && isFinite(t)) {
      try { v.currentTime = t; } catch (e) {}
    }
    const onTime = () => {
      if (v.currentTime > 0) localStorage.setItem("sfy-video-t", v.currentTime);
    };
    v.addEventListener("timeupdate", onTime);
    return () => v.removeEventListener("timeupdate", onTime);
  }, []);

  const start = () => {
    const v = ref.current;
    if (!v) return;
    v.muted = false;
    v.controls = true;
    v.play().catch(() => {
      // if autoplay-with-sound is blocked, leave it muted but show controls
      v.muted = true;
      v.controls = true;
    });
    setStarted(true);
  };

  return (
    <section className="sfy-inst" style={{
      background: "var(--forest-deep)", color: "var(--paper)",
      padding: "100px 32px", borderTop: "1px solid var(--ink)",
      borderBottom: "1px solid var(--ink)",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{maxWidth: 1400, margin: "0 auto", position: "relative"}}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.5fr",
          gap: 64, alignItems: "center",
        }} className="sfy-inst-grid">

          <div className="sfy-inst-vidcol" style={{position: "relative"}}>
            <div className="sfy-inst-vidwrap" style={{
              aspectRatio: "4/5",
              background: "var(--forest-deep)",
              border: "1px solid rgba(241,236,224,0.25)",
              borderRadius: 4,
              position: "relative", overflow: "hidden",
            }}>
              <video
                ref={ref}
                src="/videos/homepage.mp4"
                playsInline
                preload="metadata"
                controls={started}
                controlsList="nodownload"
                style={{
                  width: "100%", height: "100%", objectFit: "cover",
                  background: "var(--forest-deep)",
                  display: "block",
                }}
              />

              {!started && (
                <div
                  onClick={start}
                  style={{
                    position: "absolute", inset: 0,
                    background: "linear-gradient(135deg, rgba(20,36,31,0.55), rgba(20,24,28,0.72))",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    cursor: "pointer",
                  }}>
                  <div style={{
                    position: "absolute", left: 22, top: 20,
                    color: "var(--paper)", fontFamily: "var(--mono)",
                    fontSize: 10, letterSpacing: "0.22em", opacity: 0.85,
                    display: "inline-flex", alignItems: "center", gap: 8,
                  }}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                      <path d="M11 5L6 9H2v6h4l5 4V5zM15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"/>
                    </svg>
                    ΒΊΝΤΕΟ · ΜΕ ΉΧΟ
                  </div>

                  <button
                    onClick={(e) => { e.stopPropagation(); start(); }}
                    aria-label="Play video"
                    className="sfy-inst-play"
                    style={{
                      background: "var(--ember)", color: "#fff",
                      width: 86, height: 86, borderRadius: "50%",
                      border: "none", cursor: "pointer",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      boxShadow: "0 0 0 0 rgba(215,90,45,0.5)",
                      animation: "sfy-play-pulse 2.4s ease-out infinite",
                      paddingLeft: 5,
                    }}>
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M8 5v14l11-7z"/>
                    </svg>
                  </button>

                  <div className="sfy-inst-vidtitle" style={{
                    position: "absolute", left: 22, bottom: 22,
                    paddingRight: 100,
                    color: "var(--paper)",
                    fontFamily: "var(--serif)",
                    fontSize: "clamp(20px, 1.8vw, 26px)",
                    fontWeight: 350, letterSpacing: "-0.02em",
                    lineHeight: 1.15, textWrap: "balance",
                    fontVariationSettings: '"opsz" 144',
                  }}>
                    Γνώρισε <em style={{color: "var(--ember)", fontWeight: 350}}>τη Δέσποινα.</em>
                  </div>
                </div>
              )}
            </div>
            <div className="sfy-inst-badge" style={{
              position: "absolute", bottom: -16, right: -16,
              background: "var(--ember)", color: "#fff",
              padding: "14px 20px", borderRadius: 4,
              fontFamily: "var(--mono)", fontSize: 11,
              letterSpacing: "0.18em", textTransform: "uppercase",
              boxShadow: "0 14px 28px -10px rgba(0,0,0,0.4)",
              zIndex: 2,
            }}>
              Η ιδρύτρια
            </div>
          </div>

          <div>
            <div className="sfy-inst-eyebrow" style={{
              fontFamily: "var(--mono)", fontSize: 11.5,
              letterSpacing: "0.22em", color: "var(--ember)",
              marginBottom: 24,
            }}>02 — ΣΧΕΔΙΑΣΜΌΣ &amp; ΕΠΙΜΈΛΕΙΑ</div>

            <h2 style={{
              fontFamily: "var(--serif)", fontWeight: 350,
              fontSize: "clamp(40px, 4.6vw, 64px)",
              lineHeight: 1.05, letterSpacing: "-0.025em",
              marginBottom: 28, textWrap: "balance",
              fontVariationSettings: '"opsz" 144',
            }} className="sfy-inst-h2">
              Φτιαγμένο από <em style={{color: "var(--ember)", fontWeight: 350}}>έναν</em> εκπαιδευτικό<br/>για <em style={{color: "var(--ember)", fontWeight: 350}}>χιλιάδες</em> μαθητές.
            </h2>

            <p className="sfy-inst-lead" style={{
              fontFamily: "var(--serif)", fontSize: 18,
              lineHeight: 1.55, color: "rgba(241,236,224,0.85)",
              marginBottom: 32, maxWidth: 580, textWrap: "pretty",
            }}>
              Η Δέσποινα Μανέττα συνδυάζει τη φιλολογική κατάρτιση με την ακαδημαϊκή
              ψυχολογία για να σχεδιάσει υλικό που σέβεται τον χρόνο, το άγχος και
              τη μοναδικότητα του κάθε μαθητή.
            </p>

            <div style={{
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
              gap: 0, borderTop: "1px solid rgba(241,236,224,0.2)",
            }} className="sfy-inst-creds">
              {[
                ["Φιλόλογος", "Πτυχιούχος ΕΚΠΑ"],
                ["MSc", "Σχολική Ψυχολογία"],
                ["+10 χρόνια", "Διδακτικής εμπειρίας"],
              ].map(([h, s], i) => (
                <div key={i} className="sfy-inst-cred" style={{
                  padding: "22px 20px",
                  borderRight: i < 2 ? "1px solid rgba(241,236,224,0.2)" : "none",
                  borderBottom: "1px solid rgba(241,236,224,0.2)",
                }}>
                  <div style={{fontFamily: "var(--serif)", fontSize: 26, fontWeight: 400, marginBottom: 4}}>{h}</div>
                  <div style={{fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.15em", color: "rgba(241,236,224,0.6)", textTransform: "uppercase"}}>{s}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <style>{`
          @keyframes sfy-play-pulse {
            0% { box-shadow: 0 0 0 0 rgba(215,90,45,0.55); }
            70% { box-shadow: 0 0 0 28px rgba(215,90,45,0); }
            100% { box-shadow: 0 0 0 0 rgba(215,90,45,0); }
          }
          @media (max-width: 980px) {
            .sfy-inst-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
            .sfy-inst-h2 { font-size: clamp(34px, 7vw, 48px) !important; }
            .sfy-inst-creds { grid-template-columns: 1fr !important; }
            .sfy-inst-creds > div { border-right: none !important; }
          }
          /* ── Mobile ────────────────────────────────────────── */
          @media (max-width: 640px) {
            .sfy-inst { padding: 64px 20px !important; }
            .sfy-inst-grid { gap: 40px !important; }
            .sfy-inst-vidcol { margin-right: 16px; } /* leave room for the badge */
            .sfy-inst-vidwrap { aspect-ratio: 4/4.6 !important; }
            .sfy-inst-play { width: 70px !important; height: 70px !important; }
            .sfy-inst-play svg { width: 22px !important; height: 22px !important; }
            .sfy-inst-vidtitle { font-size: 19px !important; padding-right: 70px !important; left: 16px !important; bottom: 16px !important; }
            .sfy-inst-badge { padding: 10px 14px !important; font-size: 10px !important; bottom: -12px !important; right: -8px !important; }

            .sfy-inst-eyebrow { font-size: 10.5px !important; letter-spacing: 0.18em !important; margin-bottom: 18px !important; }
            .sfy-inst-h2 { font-size: clamp(30px, 9vw, 40px) !important; margin-bottom: 22px !important; }
            .sfy-inst-lead { font-size: 16px !important; margin-bottom: 24px !important; }
            .sfy-inst-cred { padding: 16px 18px !important; }
            .sfy-inst-cred > div:first-child { font-size: 22px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.InstructorBlock = InstructorBlock;