function Pillars() {
  const items = [
    { title: 'Fully online & flexible', desc: 'Study from anywhere on a schedule that fits work, family and life — with live + recorded classes.', icon: '◴', tag: '01 / Flexibility' },
    { title: 'AI course guidance', desc: 'Our match engine pairs your background, interests and goals to programs with real career outcomes.', icon: '✦', tag: '02 / Intelligence', featured: true },
    { title: 'Top Indian universities', desc: '25+ partner institutions spanning UGC-entitled, NAAC-accredited programs.', icon: '◆', tag: '03 / Credibility' },
    { title: 'Placement assistance', desc: 'Resume review, interview prep, curated openings, and 9 months of post-enrolment career support.', icon: '↗', tag: '04 / Outcomes' },
    { title: 'Industry-mapped curriculum', desc: 'Electives built with practitioners — analytics, product, cloud, finance, marketing, HR.', icon: '◎', tag: '05 / Relevance' },
    { title: 'Transparent, affordable fees', desc: 'Upfront pricing, scholarships, and 0% EMI options across programs. No surprises.', icon: '₹', tag: '06 / Access' },
  ];
  return (
    <section className="section">
      <div className="container">
        <FadeUp>
          <div className="section-head">
            <div className="section-eyebrow">Why MentVecity</div>
            <h2 className="section-title">
              Everything you need to <span className="serif">choose, enrol and graduate</span> — held together by people.
            </h2>
            <p className="section-sub">
              A student platform built around six non-negotiables. Pick any two and most platforms still fall short. We built for all six.
            </p>
          </div>
        </FadeUp>
        <div className="pillars-grid">
          {items.map((p, i) => (
            <FadeUp key={i} delay={(i % 3) + 1}>
              <div className={`pillar ${p.featured ? 'featured' : ''}`}>
                <div className="pillar-icon" style={{ fontSize: 22, color: p.featured ? '#FFA000' : '#041E4A' }}>{p.icon}</div>
                <h3>{p.title}</h3>
                <p>{p.desc}</p>
                <div className="pillar-tag">{p.tag}</div>
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Pillars = Pillars;