/* global React, Reveal */

const SocialProof = () => {
  return (
    <section
      data-screen-label="08 Social proof"
      style={{
        background: "var(--ink-50)",
        padding: "clamp(80px, 10vw, 128px) 24px",
      }}
    >
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <Reveal>
          <div className="eyebrow" style={{ color: "var(--brand-lime-700)", marginBottom: 18 }}>
            Coming soon
          </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 students are <span style={{ color: "var(--brand-lime)" }}>saying.</span>
          </h2>
        </Reveal>

        <Reveal style={{
          marginTop: 48,
          background: "var(--white)",
          border: "1px solid var(--ink-200)",
          borderRadius: 28,
          padding: "clamp(32px, 5vw, 64px)",
          position: "relative",
          overflow: "hidden",
        }}>
          {/* decorative oversized quote mark */}
          <div aria-hidden="true" style={{
            position: "absolute",
            top: -20,
            left: 24,
            fontFamily: "var(--font-display)", fontWeight: 900,
            fontSize: 200, lineHeight: 1,
            color: "var(--brand-lime-100)",
            userSelect: "none",
            pointerEvents: "none",
          }}>
            «
          </div>

          <div style={{ position: "relative", zIndex: 1 }}>
            <p style={{
              margin: 0,
              fontFamily: "var(--font-display)", fontWeight: 900,
              fontSize: "clamp(24px, 3.2vw, 38px)",
              lineHeight: 1.2, letterSpacing: "-0.018em",
              color: "var(--ink-900)",
              textWrap: "balance",
              maxWidth: 880,
            }}>
              We're just getting started. Be one of the first to try it — and tell us what you think.
            </p>

            <div style={{
              marginTop: 36,
              display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center",
            }}>
              <a href="https://app.myhstimeline.com/register" className="btn-primary">
                Start your timeline <span className="arrow">→</span>
              </a>
              <div style={{
                fontFamily: "var(--font-body)", fontSize: 14,
                color: "var(--ink-500)",
                display: "inline-flex", alignItems: "center", gap: 8,
              }}>
                <Icon name="users" size={14} />
                Cohort 1 · Round Rock HS · Spring 2026
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

window.SocialProof = SocialProof;