function Pillars() {
  const pillars = [
    {
      n: "I",
      t: "Σημειώσεις",
      d: "Δομημένες, καθαρές, κατανοητές. Σχεδιασμένες να μελετάς γρήγορα και να κατανοείς βαθιά.",
      stat: "1.450+ διαθέσιμες",
      img: "https://images.unsplash.com/photo-1455390582262-044cdead277a?w=900&q=80",
      kind: "image-tall",
    },
    {
      n: "II",
      t: "Ασκήσεις",
      d: "Από εύκολες έως απαιτητικές, με αναλυτικές λύσεις βήμα-βήμα.",
      stat: "Όλα τα επίπεδα",
      kind: "color-forest",
    },
    {
      n: "III",
      t: "Τεστ",
      sub: "Κατανόησης",
      d: "Quiz με άμεση βαθμολογία και feedback. Δες τι κατάλαβες, που χρειάζεσαι περισσότερη μελέτη.",
      stat: "Άμεσα αποτελέσματα",
      kind: "score",
    },
    {
      n: "IV",
      t: "Παρακολούθηση",
      d: "Personal dashboard με τη δική σου πρόοδο. Στατιστικά, χρόνος μελέτης, επιδόσεις.",
      stat: "Personal dashboard",
      kind: "chart",
    },
    {
      n: "V",
      t: "Ψυχολογική",
      sub: "Στήριξη",
      d: "Άρθρα και οδηγίες για άγχος, συγκέντρωση, μέθοδο μελέτης. Από επιστήμονα του χώρου.",
      stat: "MSc Σχ. Ψυχολογία",
      img: "https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=900&q=80",
      kind: "image-overlay",
    },
    {
      n: "VI",
      t: "Κοινότητα",
      d: "Συνδέσου με άλλους μαθητές. Μοιράσου, ρώτα, βοήθα. Η μελέτη δεν είναι μοναχικό άθλημα.",
      stat: "3.200+ μαθητές",
      kind: "color-ember",
    },
  ];

  return (
    <section id="pillars" className="sfy-pill" style={{
      padding: "120px 32px", background: "var(--paper-deep)",
      borderTop: "1px solid var(--ink)",
      position: "relative", overflow: "hidden",
    }}>
      {/* watermark numeral */}
      <div aria-hidden style={{
        position: "absolute", right: -40, top: -60,
        fontFamily: "var(--serif)", fontStyle: "italic",
        fontSize: "clamp(280px, 32vw, 480px)",
        color: "rgba(20,24,28,0.05)", lineHeight: 1,
        pointerEvents: "none", fontWeight: 300,
      }}>VI</div>

      <div style={{maxWidth: 1400, margin: "0 auto", position: "relative"}}>
        <div className="sfy-pill-headwrap" style={{marginBottom: 64}}>
          <SectionHead num="04" eyebrow="Έξι Πυλώνες" />
          <div style={{
            display: "grid", gridTemplateColumns: "1.2fr 1fr",
            gap: 56, alignItems: "end",
          }} className="sfy-pill-head">
            <h2 className="sfy-pill-h2" style={{
              fontFamily: "var(--serif)", fontWeight: 350,
              fontSize: "clamp(48px, 6vw, 92px)",
              lineHeight: 0.95, letterSpacing: "-0.035em",
              textWrap: "balance",
              fontVariationSettings: '"opsz" 144',
            }}>
              Έξι τρόποι<br/>να <em style={{color: "var(--ember)", fontWeight: 350, position: "relative"}}>
                πετύχεις
                <svg style={{
                  position: "absolute", left: 0, right: 0, bottom: -10, width: "100%",
                  height: 16, pointerEvents: "none",
                }} viewBox="0 0 200 16" preserveAspectRatio="none">
                  <path d="M2 10 Q 50 2, 100 8 T 198 7" stroke="var(--ember)" strokeWidth="3" fill="none" strokeLinecap="round"/>
                </svg>
              </em>.
            </h2>
            <p className="sfy-pill-quote" style={{
              fontFamily: "var(--serif)", fontSize: 19,
              lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 460,
              fontStyle: "italic",
            }}>
              "Δεν αρκεί να έχεις υλικό. Χρειάζεσαι σύστημα — από τη μελέτη
              μέχρι την ψυχολογική στήριξη."
            </p>
          </div>
        </div>

        {/* Magazine spread grid */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(12, 1fr)",
          gridAutoRows: "minmax(200px, auto)",
          gap: 16,
        }} className="sfy-pill-grid">

          {/* I — image tall */}
          <PillarCard pillar={pillars[0]} style={{
            gridColumn: "span 4", gridRow: "span 2",
          }} />

          {/* II — color forest, big number */}
          <PillarCard pillar={pillars[1]} style={{
            gridColumn: "span 5", gridRow: "span 1",
          }} />

          {/* III — test/score visual */}
          <PillarCard pillar={pillars[2]} style={{
            gridColumn: "span 3", gridRow: "span 2",
          }} />

          {/* IV — chart visual */}
          <PillarCard pillar={pillars[3]} style={{
            gridColumn: "span 5", gridRow: "span 1",
          }} />

          {/* V — image with overlay */}
          <PillarCard pillar={pillars[4]} style={{
            gridColumn: "span 5", gridRow: "span 2",
          }} />

          {/* VI — ember */}
          <PillarCard pillar={pillars[5]} style={{
            gridColumn: "span 7", gridRow: "span 2",
          }} />
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .sfy-pill-head { grid-template-columns: 1fr !important; }
          .sfy-pill-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: auto !important; }
          .sfy-pill-grid > * { grid-column: span 1 !important; grid-row: auto !important; min-height: 280px; }
        }
        @media (max-width: 600px) {
          .sfy-pill-grid { grid-template-columns: 1fr !important; }
        }
        /* ── Mobile ────────────────────────────────────────── */
        @media (max-width: 640px) {
          .sfy-pill { padding: 64px 20px !important; }
          .sfy-pill-headwrap { margin-bottom: 36px !important; }
          .sfy-pill-h2 { font-size: clamp(34px, 10.5vw, 50px) !important; }
          .sfy-pill-quote { font-size: 16px !important; }
          .sfy-pill-grid > * { min-height: 240px !important; }

          /* Tighter card paddings + smaller headings */
          .sfy-pcard { padding: 22px !important; }
          .sfy-pcard h3 { font-size: 28px !important; }
          .sfy-pcard-titlebig { font-size: 36px !important; }
          .sfy-pcard p { font-size: 13.5px !important; }

          /* Image-overlay card: stack the giant numeral above */
          .sfy-pcard-overlay-grid { grid-template-columns: 1fr !important; gap: 12px !important; align-items: stretch !important; }
          .sfy-pcard-overlay-num { font-size: 120px !important; line-height: 0.85 !important; }

          /* Color-forest exercise chip stack — keep, but tighter */
          .sfy-pcard-forest-grid { grid-template-columns: 1fr !important; gap: 18px !important; }

          /* Chart card — stack chart below text */
          .sfy-pcard-chart-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
          .sfy-pcard-chart-bars { height: 100px !important; padding-top: 12px !important; }

          /* Ember card — drop avatars (already), tighten */
          .sfy-pcard-ember-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
        }
      `}</style>
    </section>
  );
}

function PillarCard({pillar, style}) {
  const p = pillar;
  const base = {
    position: "relative", overflow: "hidden",
    borderRadius: 4, padding: 28,
    display: "flex", flexDirection: "column",
    border: "1px solid var(--ink)",
    cursor: "pointer", transition: "transform .35s ease",
    ...style,
  };

  // I — Image tall: photo with bottom text card
  if (p.kind === "image-tall") {
    return (
      <article style={{...base, padding: 0}} className="sfy-pcard">
        <img src={p.img} alt="" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", filter: "saturate(0.95)",
        }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(20,24,28,0.15) 0%, rgba(20,24,28,0.8) 80%)",
        }} />
        <div style={{
          position: "absolute", top: 18, left: 22,
          fontFamily: "var(--serif)", fontStyle: "italic",
          fontSize: 56, color: "var(--paper)", fontWeight: 350,
          lineHeight: 0.9, mixBlendMode: "overlay",
        }}>{p.n}</div>
        <div style={{
          position: "absolute", left: 22, right: 22, bottom: 22,
          color: "var(--paper)",
        }}>
          <h3 className="sfy-pcard-titlebig" style={{
            fontFamily: "var(--serif)", fontWeight: 400, fontSize: 36,
            letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 10,
          }}>{p.t}</h3>
          <p style={{fontSize: 14, lineHeight: 1.55, opacity: 0.92, marginBottom: 16, maxWidth: 280}}>{p.d}</p>
          <div style={{
            fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em",
            color: "var(--ember)", borderTop: "1px solid rgba(241,236,224,0.25)", paddingTop: 12,
          }}>✦ {p.stat}</div>
        </div>
      </article>
    );
  }

  // II — Forest card with massive numeral, sample exercise
  if (p.kind === "color-forest") {
    return (
      <article style={{...base, background: "var(--forest)", color: "var(--paper)"}} className="sfy-pcard">
        <div className="sfy-pcard-forest-grid" style={{display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "start", height: "100%"}}>
          <div>
            <div style={{fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.2em", color: "var(--ember)", marginBottom: 14}}>
              ΠΥΛΏΝΑΣ {p.n}
            </div>
            <h3 className="sfy-pcard-titlebig" style={{
              fontFamily: "var(--serif)", fontWeight: 400, fontSize: 44,
              letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 14,
            }}>{p.t}</h3>
            <p style={{fontSize: 14.5, lineHeight: 1.55, opacity: 0.85, maxWidth: 380, marginBottom: 18}}>{p.d}</p>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em",
              color: "var(--ember)",
            }}>✦ {p.stat}</div>
          </div>
          {/* Mini exercise chip stack */}
          <div style={{
            display: "flex", flexDirection: "column", gap: 6,
            transform: "rotate(2deg)",
          }}>
            {["x² + 3x", "= −2", "▸ λύση"].map((t, i) => (
              <div key={i} style={{
                background: i === 2 ? "var(--ember)" : "rgba(241,236,224,0.08)",
                color: i === 2 ? "#fff" : "var(--paper)",
                border: i === 2 ? "0" : "1px solid rgba(241,236,224,0.18)",
                padding: "10px 16px", borderRadius: 4,
                fontFamily: i === 2 ? "var(--sans)" : "var(--mono)",
                fontSize: 13, fontWeight: i === 2 ? 600 : 400,
                whiteSpace: "nowrap", letterSpacing: i === 2 ? "0.05em" : "0.02em",
              }}>{t}</div>
            ))}
          </div>
        </div>
      </article>
    );
  }

  // III — Score visualization
  if (p.kind === "score") {
    return (
      <article style={{...base, background: "var(--paper)", color: "var(--ink)", padding: 24}} className="sfy-pcard">
        <div style={{
          fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.2em",
          color: "var(--muted)", marginBottom: 12,
        }}>ΠΥΛΏΝΑΣ {p.n}</div>

        {/* Big circular score */}
        <div style={{position: "relative", width: 140, height: 140, margin: "8px auto 12px"}}>
          <svg width="140" height="140" viewBox="0 0 140 140">
            <circle cx="70" cy="70" r="62" fill="none" stroke="rgba(20,24,28,0.08)" strokeWidth="10"/>
            <circle cx="70" cy="70" r="62" fill="none"
              stroke="var(--ember)" strokeWidth="10" strokeLinecap="round"
              strokeDasharray={`${0.87 * 2 * Math.PI * 62} 999`}
              transform="rotate(-90 70 70)"
            />
          </svg>
          <div style={{
            position: "absolute", inset: 0, display: "flex",
            flexDirection: "column", alignItems: "center", justifyContent: "center",
          }}>
            <div style={{
              fontFamily: "var(--serif)", fontSize: 46, fontWeight: 400,
              lineHeight: 1, letterSpacing: "-0.02em", color: "var(--forest)",
              fontVariationSettings: '"opsz" 144',
            }}>87<span style={{fontSize: 22, color: "var(--muted)"}}>%</span></div>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.2em",
              color: "var(--muted)", marginTop: 2,
            }}>ΣΩΣΤΆ</div>
          </div>
        </div>

        <h3 style={{
          fontFamily: "var(--serif)", fontWeight: 400, fontSize: 26,
          lineHeight: 1, marginBottom: 4, textAlign: "center",
          letterSpacing: "-0.015em",
        }}>{p.t}<br/><em style={{fontWeight: 350, color: "var(--ember)"}}>{p.sub}</em></h3>
        <p style={{
          fontSize: 13, lineHeight: 1.5, color: "var(--ink-soft)",
          textAlign: "center", marginTop: 10,
        }}>{p.d.split(".")[0]}.</p>
        <div style={{
          fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em",
          color: "var(--ember)", marginTop: "auto", paddingTop: 14, textAlign: "center",
          borderTop: "1px solid rgba(20,24,28,0.1)",
        }}>✦ {p.stat}</div>
      </article>
    );
  }

  // IV — Bar chart progress
  if (p.kind === "chart") {
    return (
      <article style={{...base, background: "var(--ochre)", color: "var(--ink)"}} className="sfy-pcard">
        <div className="sfy-pcard-chart-grid" style={{display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 24, alignItems: "center", height: "100%"}}>
          <div>
            <div style={{fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.2em", marginBottom: 10}}>
              ΠΥΛΏΝΑΣ {p.n}
            </div>
            <h3 className="sfy-pcard-titlebig" style={{
              fontFamily: "var(--serif)", fontWeight: 400, fontSize: 38,
              letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 12,
            }}>{p.t}</h3>
            <p style={{fontSize: 14, lineHeight: 1.5, opacity: 0.85, maxWidth: 320, marginBottom: 14}}>{p.d}</p>
            <div style={{fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em"}}>
              ✦ {p.stat}
            </div>
          </div>

          {/* Mini bar chart */}
          <div className="sfy-pcard-chart-bars" style={{
            display: "flex", alignItems: "flex-end", gap: 8, height: 130,
            paddingTop: 24, borderBottom: "1.5px solid var(--ink)",
          }}>
            {[40, 65, 52, 78, 88, 72, 95].map((h, i) => (
              <div key={i} style={{flex: 1, display: "flex", flexDirection: "column", gap: 4, alignItems: "center"}}>
                <div style={{
                  width: "100%", height: `${h}%`,
                  background: i === 6 ? "var(--ember)" : "var(--ink)",
                  borderRadius: "2px 2px 0 0",
                }} />
                <div style={{fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.05em", opacity: 0.6}}>
                  {["Δ","Τ","Τ","Π","Π","Σ","Κ"][i]}
                </div>
              </div>
            ))}
          </div>
        </div>
      </article>
    );
  }

  // V — Image overlay (psych)
  if (p.kind === "image-overlay") {
    return (
      <article style={{...base, padding: 0}} className="sfy-pcard">
        <img src={p.img} alt="" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover",
        }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(135deg, rgba(31,58,51,0.85), rgba(20,36,31,0.7))",
          mixBlendMode: "multiply",
        }} />
        <div className="sfy-pcard-overlay-grid" style={{
          position: "absolute", inset: 0, padding: 32, color: "var(--paper)",
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "end",
        }}>
          <div className="sfy-pcard-overlay-num" style={{
            fontFamily: "var(--serif)", fontStyle: "italic",
            fontSize: "clamp(120px, 14vw, 220px)",
            color: "rgba(241,236,224,0.18)", fontWeight: 300,
            lineHeight: 0.85, alignSelf: "start",
          }}>{p.n}</div>

          <div>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.2em",
              color: "var(--ember)", marginBottom: 12,
            }}>ΠΥΛΏΝΑΣ {p.n}</div>
            <h3 className="sfy-pcard-titlebig" style={{
              fontFamily: "var(--serif)", fontWeight: 400, fontSize: 36,
              letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 12,
            }}>{p.t}<br/><em style={{fontWeight: 350}}>{p.sub}</em></h3>
            <p style={{fontSize: 14, lineHeight: 1.55, opacity: 0.88, marginBottom: 16}}>{p.d}</p>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em",
              color: "var(--ember)", borderTop: "1px solid rgba(241,236,224,0.25)", paddingTop: 12,
            }}>✦ {p.stat}</div>
          </div>
        </div>
      </article>
    );
  }

  // VI — Ember card with avatar stack
  return (
    <article style={{...base, background: "var(--ember)", color: "#fff"}} className="sfy-pcard">
      <div className="sfy-pcard-ember-grid" style={{display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "stretch", height: "100%"}}>
        <div style={{display: "flex", flexDirection: "column"}}>
          <div style={{fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.2em", marginBottom: 14, opacity: 0.9}}>
            ΠΥΛΏΝΑΣ {p.n}
          </div>
          <h3 className="sfy-pcard-titlebig" style={{
            fontFamily: "var(--serif)", fontWeight: 400, fontSize: 56,
            letterSpacing: "-0.025em", lineHeight: 0.95, marginBottom: 16,
            fontVariationSettings: '"opsz" 144',
          }}>{p.t}</h3>
          <p style={{fontSize: 16, lineHeight: 1.5, opacity: 0.95, maxWidth: 440, marginBottom: 24}}>{p.d}</p>

          {/* Live activity feed */}
          <div className="sfy-pcard-feed" style={{
            display: "flex", flexDirection: "column", gap: 8, marginTop: "auto",
            background: "rgba(255,255,255,0.12)", borderRadius: 4, padding: 14,
            backdropFilter: "blur(4px)",
          }}>
            {[
              ["Μαρία Κ.", "ολοκλήρωσε «Λύσεις πρωτοβάθμιας»", "πριν 2 λεπτά"],
              ["Νίκος Π.", "πέρασε το τεστ Ιστορίας με 92%", "πριν 5 λεπτά"],
            ].map((row, i) => (
              <div key={i} className="sfy-pcard-feedrow" style={{
                display: "flex", alignItems: "center", gap: 10,
                fontSize: 12.5, lineHeight: 1.3,
              }}>
                <span style={{
                  width: 8, height: 8, borderRadius: "50%",
                  background: "#fff", flexShrink: 0,
                  animation: "sfy-blink 2.4s ease-in-out infinite",
                  animationDelay: i * 0.6 + "s",
                }} />
                <span style={{fontWeight: 600}}>{row[0]}</span>
                <span style={{opacity: 0.85}}>{row[1]}</span>
                <span className="sfy-pcard-feedtime" style={{opacity: 0.6, marginLeft: "auto", fontFamily: "var(--mono)", fontSize: 10}}>{row[2]}</span>
              </div>
            ))}
          </div>

          <div style={{
            fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em",
            marginTop: 16, paddingTop: 14, borderTop: "1px solid rgba(255,255,255,0.25)",
          }}>✦ {p.stat}</div>
        </div>

        {/* Avatar stack column */}
        <div style={{
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4,
        }} className="sfy-avatar-col">
          {[
            "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&q=80",
            "https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=120&q=80",
            "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=120&q=80",
            "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=120&q=80",
          ].map((src, i) => (
            <img key={i} src={src} alt="" style={{
              width: 64, height: 64, borderRadius: "50%",
              border: "3px solid var(--ember)",
              outline: "1px solid rgba(255,255,255,0.6)",
              objectFit: "cover",
              marginTop: i === 0 ? 0 : -16,
              boxShadow: "0 6px 14px -4px rgba(0,0,0,0.25)",
            }} />
          ))}
          <div style={{
            width: 64, height: 64, borderRadius: "50%",
            background: "rgba(255,255,255,0.18)", color: "#fff",
            border: "3px solid var(--ember)",
            outline: "1px solid rgba(255,255,255,0.6)",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--mono)", fontSize: 13, fontWeight: 600,
            marginTop: -16, letterSpacing: "0.05em",
          }}>+3.2k</div>
        </div>
      </div>

      <style>{`
        @keyframes sfy-blink {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.3; }
        }
        @media (max-width: 700px) {
          .sfy-avatar-col { display: none !important; }
        }
        @media (max-width: 640px) {
          /* Feed row: stack the timestamp under so it doesn't push name off */
          .sfy-pcard-feedrow { flex-wrap: wrap; gap: 6px !important; }
          .sfy-pcard-feedtime { margin-left: 0 !important; flex-basis: 100%; }
        }
      `}</style>
    </article>
  );
}

window.Pillars = Pillars;