/* global React, Reveal */

const Features = () => {
  const features = [
    { icon: "calendar-clock", title: "Deadlines you'd miss", body: "Course selection, SAT registration, club sign-ups — all mapped to your year." },
    { icon: "git-branch", title: "Decisions that matter", body: "Which courses to take, when to start test prep, what extracurriculars actually count." },
    { icon: "video", title: "Real student advice", body: "Short videos from students who've been there — not counselor scripts." },
    { icon: "zap", title: "Personalized to you", body: "International, transfer, or incoming freshman — your timeline fits your situation." },
    { icon: "compass", title: "One place for everything", body: "No more Googling \"what is GPA\" at 11pm. It's all here, in order." },
    { icon: "flag", title: "A finish line", body: "Track your progress. Hit milestones. End with \"I got in.\"" },
  ];

  return (
    <section
      data-screen-label="06 Features"
      style={{
        background: "var(--ink-50)",
        padding: "clamp(80px, 10vw, 128px) 24px",
      }}
    >
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <Reveal>
          <div className="eyebrow" style={{ color: "var(--brand-lime-700)", marginBottom: 18 }}>
            What you get
          </div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 900,
            fontSize: "clamp(36px, 5vw, 64px)",
            lineHeight: 1.0, letterSpacing: "-0.025em",
            textTransform: "uppercase", margin: 0,
            color: "var(--ink-900)", maxWidth: 1000,
          }}>
            Not another list of links. <span style={{ color: "var(--brand-lime)" }}>An actual plan.</span>
          </h2>
        </Reveal>

        <Reveal stagger className="reveal-stagger feat-grid" style={{
          marginTop: 56,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 16,
        }}>
          {features.map((f, i) => (
            <article key={i} className="card-hover" style={{
              background: "var(--white)",
              borderRadius: 20,
              padding: 28,
              border: "1px solid var(--ink-200)",
            }}>
              <div style={{
                width: 48, height: 48, borderRadius: 14,
                background: "var(--brand-lime-50)",
                color: "var(--brand-lime-700)",
                display: "flex", alignItems: "center", justifyContent: "center",
                marginBottom: 20,
              }}>
                <Icon name={f.icon} size={22} />
              </div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 900,
                fontSize: 20, lineHeight: 1.15, letterSpacing: "-0.015em",
                color: "var(--ink-900)", margin: 0,
              }}>
                {f.title}
              </h3>
              <p style={{
                marginTop: 8,
                fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.5,
                color: "var(--ink-700)",
              }}>
                {f.body}
              </p>
            </article>
          ))}
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 980px) { .feat-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 640px) { .feat-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

window.Features = Features;