/* global React, Reveal */

const EmilyStory = () => {
  return (
    <section
      data-screen-label="05 Emily's story"
      className="theme-dark"
      style={{
        background: "var(--black)",
        color: "var(--white)",
        padding: "clamp(80px, 10vw, 128px) 24px",
      }}
    >
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <Reveal>
          <div className="eyebrow" style={{ color: "var(--brand-lime)", marginBottom: 18 }}>
            The story
          </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(--white)", maxWidth: 1000,
          }}>
            Built by a student who's <span style={{ color: "var(--brand-lime)" }}>been through it all.</span>
          </h2>
        </Reveal>

        <Reveal stagger className="reveal-stagger emily-grid" style={{
          marginTop: 56,
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr)",
          gap: "clamp(32px, 5vw, 64px)",
          alignItems: "start",
        }}>
          <div>
            <div style={{
              fontFamily: "var(--font-body)",
              fontSize: "clamp(17px, 1.4vw, 19px)",
              lineHeight: 1.65,
              color: "#D6D6D6",
            }}>
              <p style={{ margin: 0, color: "#D6D6D6" }}>
                I moved from Russia to Serbia in 2022, then to Texas in 2024. On my fifth day in the country, I started high school. Within a week, I was moved from 9th to 10th grade — and I didn't understand what that meant until it was too late.
              </p>
              <p style={{ margin: "20px 0 0", color: "#D6D6D6" }}>
                I spent my entire sophomore year with zero APs, zero clubs, and zero understanding of how the system actually works. By junior year, I'd figured it out — and I decided no one else should have to learn it the hard way.
              </p>
              <p style={{
                margin: "28px 0 0",
                color: "var(--white)",
                fontFamily: "var(--font-display)", fontWeight: 900,
                fontSize: "clamp(22px, 2.4vw, 28px)",
                lineHeight: 1.2, letterSpacing: "-0.015em",
              }}>
                That's why I built My High School Timeline<span style={{ color: "var(--brand-lime)" }}>.</span>
              </p>
            </div>

            {/* Achievement tags */}
            <div style={{
              marginTop: 36,
              display: "flex",
              flexWrap: "wrap",
              gap: 8,
            }}>
              {[
                "VP, Humanitarian Club",
                "Director, Co-op",
                "NEHS Member",
                "Regular Volunteer",
              ].map((t, i) => (
                <span key={i} style={{
                  display: "inline-flex", alignItems: "center", gap: 6,
                  padding: "8px 14px",
                  borderRadius: 999,
                  border: "1px solid #2B2B2B",
                  background: "var(--ink-900)",
                  fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500,
                  color: "#D6D6D6",
                }}>
                  <span style={{
                    width: 6, height: 6, borderRadius: 999, background: "var(--brand-lime)",
                  }} />
                  {t}
                </span>
              ))}
            </div>

            {/* Watch CTA */}
            <button className="btn-ghost" style={{
              marginTop: 32,
              borderColor: "var(--white)",
              color: "var(--white)",
            }}>
              <Icon name="play" size={16} style={{ filter: "invert(1)" }} />
              Watch Emily's story
            </button>
          </div>

          {/* Photo placeholder */}
          <div>
            <div style={{
              aspectRatio: "4/5",
              borderRadius: 24,
              background: "var(--ink-900)",
              border: "1px solid #2B2B2B",
              position: "relative",
              overflow: "hidden",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              {/* Decorative initials */}
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 900,
                fontSize: "clamp(80px, 14vw, 180px)", lineHeight: 1,
                letterSpacing: "-0.04em",
                color: "var(--ink-700)",
              }}>
                EK
              </div>
              {/* Lime corner badge */}
              <div style={{
                position: "absolute", top: 16, right: 16,
                background: "var(--brand-lime)",
                color: "var(--black)",
                padding: "6px 12px",
                borderRadius: 999,
                fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 700,
                letterSpacing: "0.04em", textTransform: "uppercase",
              }}>
                Founder
              </div>
              {/* Caption strip */}
              <div style={{
                position: "absolute", left: 0, right: 0, bottom: 0,
                padding: "16px 20px",
                background: "linear-gradient(180deg, transparent, rgba(0,0,0,0.85))",
              }}>
                <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 900,
                  fontSize: 18, color: "var(--white)", letterSpacing: "-0.01em",
                }}>
                  Emily Kosik
                </div>
                <div style={{
                  marginTop: 2,
                  fontFamily: "var(--font-body)", fontSize: 13, color: "#A8A8A8",
                }}>
                  Class of 2026 · Round Rock HS
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>

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

window.EmilyStory = EmilyStory;