/* global React, Reveal */

const Parents = () => {
  const cards = [
    { icon: "lock", text: "No personal data collected" },
    { icon: "badge-dollar-sign", text: "100% free, no ads, no upsells" },
    { icon: "graduation-cap", text: "Built by an 11th-grader at Round Rock HS" },
  ];

  return (
    <section
      data-screen-label="07 For parents"
      id="parents"
      style={{
        background: "var(--white)",
        padding: "clamp(80px, 10vw, 128px) 24px",
        borderTop: "1px solid var(--ink-200)",
      }}
    >
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <Reveal>
          <div className="eyebrow" style={{ color: "var(--brand-lime-700)", marginBottom: 18 }}>
            For parents
          </div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 900,
            fontSize: "clamp(32px, 4.4vw, 56px)",
            lineHeight: 1.05, letterSpacing: "-0.025em",
            textTransform: "uppercase", margin: 0,
            color: "var(--ink-900)",
          }}>
            A note for <span style={{ color: "var(--brand-lime)" }}>parents.</span>
          </h2>
          <div style={{
            marginTop: 10,
            fontFamily: "var(--font-body)", fontSize: 16,
            color: "var(--ink-500)",
          }}>
            Especially if the US school system is new to you.
          </div>

          <div style={{
            marginTop: 32,
            fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.6,
            color: "var(--ink-700)",
            maxWidth: 760,
          }}>
            <p style={{ margin: 0, color: "var(--ink-700)" }}>
              You don't need to become an expert in American high school to help your child succeed. My High School Timeline gives them a clear, step-by-step guide — so they can navigate independently, and you can stay informed without the stress.
            </p>
            <p style={{ margin: "16px 0 0", color: "var(--ink-700)" }}>
              The tool is completely free, collects no sensitive data, and was built by a student who went through the same experience your child is facing.
            </p>
          </div>
        </Reveal>

        <Reveal stagger className="reveal-stagger parents-grid" style={{
          marginTop: 40,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 12,
        }}>
          {cards.map((c, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 14,
              padding: "18px 20px",
              background: "var(--brand-lime-50)",
              borderRadius: 14,
              border: "1px solid var(--brand-lime-100)",
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: "var(--white)",
                color: "var(--brand-lime-700)",
                display: "flex", alignItems: "center", justifyContent: "center",
                flexShrink: 0,
              }}>
                <Icon name={c.icon} size={18} />
              </div>
              <div style={{
                fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600,
                color: "var(--ink-900)", lineHeight: 1.35,
              }}>
                {c.text}
              </div>
            </div>
          ))}
        </Reveal>

        <Reveal style={{ marginTop: 32 }}>
          <a href="#about" className="text-link" style={{ color: "var(--ink-900)", fontSize: 16 }}>
            Learn more about the project →
          </a>
        </Reveal>
      </div>

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

window.Parents = Parents;