function Hero() {
  return (
    <section className="sfy-hero" style={{
      position: "relative",
      padding: "32px 32px 80px",
      maxWidth: 1400, margin: "0 auto",
    }}>
      {/* Top meta strip */}
      <div className="sfy-hero-meta" style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        gap: 24, marginBottom: 40, flexWrap: "wrap",
      }}>
        <div style={{display: "inline-flex", alignItems: "center", gap: 12}}>
          <span style={{
            width: 8, height: 8, borderRadius: "50%",
            background: "var(--ember)",
            boxShadow: "0 0 0 4px rgba(215,90,45,0.18)",
            animation: "sfy-pulse 2s ease-in-out infinite",
          }} />
          <span style={{
            fontFamily: "var(--mono)", fontSize: 11.5,
            letterSpacing: "0.2em", color: "var(--ink-soft)",
          }}>ΤΏΡΑ ΕΝΕΡΓΌ — 3.200+ ΜΑΘΗΤΈΣ</span>
        </div>
        <div style={{
          fontFamily: "var(--mono)", fontSize: 11,
          letterSpacing: "0.18em", color: "var(--muted)",
        }}>
          Νο. 04 / ΆΝΟΙΞΗ · MMXXVI
        </div>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1.1fr 1fr",
        gap: 56, alignItems: "center",
      }} className="sfy-hero-grid">

        {/* LEFT: Headline */}
        <div>
          <h1 className="sfy-h1" style={{
            fontFamily: "var(--serif)",
            fontWeight: 350,
            fontSize: "clamp(56px, 8vw, 112px)",
            lineHeight: 0.94,
            letterSpacing: "-0.035em",
            color: "var(--ink)",
            marginBottom: 32,
            textWrap: "balance",
            fontVariationSettings: '"opsz" 144',
          }}>
            Μελέτησε<br/>
            <span style={{
              fontStyle: "italic",
              fontWeight: 300,
              color: "var(--forest)",
              fontVariationSettings: '"opsz" 144',
            }}>έξυπνα,</span>{" "}
            <span style={{position: "relative", whiteSpace: "nowrap"}}>
              πέτυχε
              <svg style={{
                position: "absolute", left: -4, right: -4, bottom: -8, width: "calc(100% + 8px)",
                height: 18, pointerEvents: "none",
              }} viewBox="0 0 200 18" preserveAspectRatio="none">
                <path d="M2 12 Q 50 2, 100 9 T 198 8" stroke="var(--ember)" strokeWidth="3.5" fill="none" strokeLinecap="round"/>
              </svg>
            </span><br/>
            <span style={{fontStyle: "italic", fontWeight: 300}}>περισσότερα.</span>
          </h1>

          <p className="sfy-hero-lead" style={{
            fontFamily: "var(--serif)", fontSize: 21,
            lineHeight: 1.45, color: "var(--ink-soft)",
            maxWidth: 520, marginBottom: 36,
            textWrap: "pretty",
            fontWeight: 400,
          }}>
            Χιλιάδες δωρεάν σημειώσεις, ασκήσεις και τεστ κατανόησης για κάθε
            μάθημα — από Γυμνάσιο μέχρι Πανελλήνιες, σε ένα μέρος.
          </p>

          <div className="sfy-hero-cta" style={{display:"flex", gap: 14, marginBottom: 56, flexWrap:"wrap"}}>
            <a href="register.php" style={{
              display: "inline-flex", alignItems: "center", gap: 12,
              background: "var(--forest)", color: "var(--paper)",
              padding: "18px 32px", borderRadius: 999,
              fontSize: 15, fontWeight: 600,
            }}>
              Ξεκίνα δωρεάν
              <span style={{
                background: "var(--ember)", color: "#fff",
                width: 28, height: 28, borderRadius: "50%",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                marginRight: -10,
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M5 12h14M13 6l6 6-6 6"/>
                </svg>
              </span>
            </a>
            <a href="#curriculum" style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              color: "var(--ink)", padding: "18px 32px",
              borderRadius: 999, fontSize: 15, fontWeight: 600,
              border: "1.5px solid var(--ink)",
            }}>Δες τα μαθήματα →</a>
          </div>

          {/* Inline metric pills */}
          <div style={{
            display: "flex", gap: 14, flexWrap: "wrap",
          }}>
            {[
              {n: "6.000+", l: "σημειώσεις"},
              {n: "14", l: "μαθήματα"},
              {n: "100%", l: "δωρεάν"},
            ].map((p, i) => (
              <div key={i} style={{
                display: "inline-flex", alignItems: "baseline", gap: 8,
                padding: "10px 16px", border: "1px solid rgba(20,24,28,0.18)",
                borderRadius: 999, background: "rgba(255,255,255,0.4)",
              }}>
                <span style={{fontFamily: "var(--serif)", fontWeight: 500, fontSize: 17, color: "var(--forest)"}}>{p.n}</span>
                <span style={{fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.12em", color: "var(--muted)", textTransform: "uppercase"}}>{p.l}</span>
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT: Layered image collage */}
        <div className="sfy-hero-right" style={{position: "relative", minHeight: 540}}>
          {/* Big forest panel behind */}
          <div className="sfy-hero-panel" style={{
            position: "absolute", top: 24, right: -8, width: "92%", height: "82%",
            background: "var(--forest)", borderRadius: 4,
          }} />

          {/* Hero image — main */}
          <div className="sfy-hero-mainimg" style={{
            position: "absolute", top: 0, left: 0, width: "88%", aspectRatio: "3 / 2.3",
            overflow: "hidden", borderRadius: 4,
            boxShadow: "0 30px 60px -20px rgba(20,36,31,0.45)",
            zIndex: 2,
          }}>
            <img src="/images/hero.webp" alt="" style={{
              width: "100%", height: "100%", objectFit: "cover",
              filter: "saturate(1.05) contrast(1.02)",
            }} />
          </div>

          {/* Floating credit chip */}
          <div className="sfy-hero-credit" style={{
            position: "absolute", top: "62%", right: 8, zIndex: 3,
            background: "var(--paper)", border: "1px solid var(--ink)",
            padding: "16px 18px", maxWidth: 240,
            boxShadow: "0 14px 30px -10px rgba(0,0,0,0.18)",
            borderRadius: 4,
          }}>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 10,
              letterSpacing: "0.18em", color: "var(--ember)",
              textTransform: "uppercase", marginBottom: 6,
            }}>Σχεδιασμός &amp; επιμέλεια</div>
            <div style={{
              fontFamily: "var(--serif)", fontWeight: 500, fontSize: 19,
              color: "var(--ink)", lineHeight: 1.15, marginBottom: 4,
            }}>Δέσποινα Μανέττα</div>
            <div style={{fontSize: 12.5, color: "var(--muted)", lineHeight: 1.4}}>
              Φιλόλογος · MSc Σχολική Ψυχολογία
            </div>
          </div>

          {/* Floating subject tag (top right) */}
          <div className="sfy-hero-tag" style={{
            position: "absolute", top: 12, right: 24, zIndex: 4,
            background: "var(--ember)", color: "#fff",
            padding: "8px 14px", borderRadius: 999,
            fontFamily: "var(--mono)", fontSize: 11,
            letterSpacing: "0.15em", textTransform: "uppercase",
            transform: "rotate(4deg)",
            boxShadow: "0 6px 18px -4px rgba(215,90,45,0.5)",
          }}>
            ✦ νέο για 2026
          </div>

          {/* Bottom-left small image */}
          <div className="sfy-hero-smallimg" style={{
            position: "absolute", bottom: 0, left: 0, width: "38%", aspectRatio: "1 / 1",
            overflow: "hidden", borderRadius: 4,
            border: "4px solid var(--paper)",
            boxShadow: "0 14px 30px -10px rgba(0,0,0,0.25)",
            zIndex: 3,
          }}>
            <img src="https://images.unsplash.com/photo-1516979187457-637abb4f9353?w=400&q=80" alt=""
              style={{width: "100%", height: "100%", objectFit: "cover"}} />
          </div>
        </div>
      </div>

      <style>{`
        @keyframes sfy-pulse {
          0%, 100% { box-shadow: 0 0 0 4px rgba(215,90,45,0.18); }
          50% { box-shadow: 0 0 0 10px rgba(215,90,45,0); }
        }
        @media (max-width: 980px) {
          .sfy-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .sfy-hero-right { min-height: 460px !important; }
          .sfy-h1 { font-size: clamp(44px, 11vw, 84px) !important; }
        }
        /* ── Mobile ────────────────────────────────────────── */
        @media (max-width: 640px) {
          .sfy-hero { padding: 16px 20px 56px !important; }
          .sfy-hero-meta { margin-bottom: 28px !important; gap: 12px !important; }
          .sfy-hero-meta > div:last-child { display: none; }

          .sfy-hero-grid { gap: 40px !important; }
          .sfy-h1 { font-size: clamp(40px, 12.5vw, 64px) !important; margin-bottom: 22px !important; }
          .sfy-hero-lead { font-size: 17px !important; margin-bottom: 26px !important; }

          .sfy-hero-cta { gap: 10px !important; margin-bottom: 36px !important; }
          .sfy-hero-cta > a {
            flex: 1 1 100% !important;
            justify-content: center !important;
            padding: 16px 24px !important;
          }

          /* simplify the collage: keep main image + tag, drop floating chip + tiny bottom photo */
          .sfy-hero-right { min-height: 0 !important; aspect-ratio: 4 / 3.2; }
          .sfy-hero-panel { top: 14px !important; right: -4px !important; height: 78% !important; }
          .sfy-hero-mainimg { width: 94% !important; aspect-ratio: 3 / 2.3 !important; }
          .sfy-hero-tag { top: 8px !important; right: 12px !important; font-size: 10px !important; padding: 6px 12px !important; }
          .sfy-hero-credit { display: none !important; }
          .sfy-hero-smallimg { display: none !important; }
        }
      `}</style>
    </section>
  );
}
window.Hero = Hero;