/* global React, Reveal */
const { useState } = React;

const Problem = () => {
  const cards = [
    {
      number: "1 week",
      text: "That's how long Emily had between deciding to study in the US and her first day of school. No orientation. No guide. No idea what \"credits\" meant.",
      accent: "lime",
    },
    {
      number: "0 APs",
      text: "After her first year. One administrative decision — moving from 9th to 10th grade in week one — cost her an entire year of college preparation.",
      accent: "black",
    },
    {
      number: "457:1",
      text: "The average student-to-counselor ratio in Texas. Your counselor wants to help. They just can't be there for every decision.",
      accent: "lime",
    },
  ];

  return (
    <section
      data-screen-label="02 Problem"
      style={{
        background: "var(--ink-50)",
        padding: "clamp(72px, 9vw, 120px) 24px",
      }}
    >
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <Reveal>
          <div className="eyebrow" style={{ color: "var(--brand-lime-700)", marginBottom: 18 }}>
            The problem
          </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: 900,
          }}>
            What nobody tells you on <span style={{ color: "var(--brand-lime)" }}>day one.</span>
          </h2>
        </Reveal>

        <Reveal stagger className="reveal-stagger problem-grid" style={{
          marginTop: 56,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 20,
        }}>
          {cards.map((c, i) => (
            <article key={i} className="card-hover" style={{
              background: "var(--white)",
              borderRadius: 20,
              padding: "32px 28px",
              border: "1px solid var(--ink-200)",
              boxShadow: "var(--shadow-xs)",
            }}>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 900,
                fontSize: "clamp(48px, 5.6vw, 72px)",
                lineHeight: 0.95, letterSpacing: "-0.03em",
                color: c.accent === "lime" ? "var(--brand-lime)" : "var(--ink-900)",
              }}>
                {c.number}
              </div>
              <div style={{
                marginTop: 20,
                fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.55,
                color: "var(--ink-700)",
              }}>
                {c.text}
              </div>
            </article>
          ))}
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .problem-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Problem = Problem;