/* global React, Reveal */

const EmilyStory = () => {
  const [storyOpen, setStoryOpen] = React.useState(false);

  React.useEffect(() => {
    if (!storyOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") setStoryOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [storyOpen]);

  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"
              onClick={() => setStoryOpen(true)}
              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 */}
          <div style={{ display: "flex", justifyContent: "center" }}>
            <div style={{
              width: "100%",
              maxWidth: 340,
              aspectRatio: "4/5",
              borderRadius: 24,
              background: "var(--ink-900)",
              border: "1px solid #2B2B2B",
              position: "relative",
              overflow: "hidden",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <img
                src="assets/emily.jpg"
                alt="Emily Kosik"
                style={{
                  position: "absolute", inset: 0,
                  width: "100%", height: "100%",
                  objectFit: "cover", objectPosition: "center top",
                  display: "block",
                }}
              />
              {/* 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 2027 · Round Rock HS
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>

      {storyOpen && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Emily's story"
          onClick={() => setStoryOpen(false)}
          style={{
            position: "fixed", inset: 0, zIndex: 1000,
            background: "rgba(0,0,0,0.82)",
            backdropFilter: "blur(6px)",
            display: "flex", alignItems: "center", justifyContent: "center",
            padding: 24,
            animation: "storyFadeIn 200ms var(--ease-out)",
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              position: "relative",
              width: "100%", maxWidth: 880,
              display: "flex", flexDirection: "column", gap: 16,
            }}
          >
            <button
              aria-label="Close"
              onClick={() => setStoryOpen(false)}
              style={{
                position: "absolute", top: -44, right: 0,
                width: 36, height: 36, borderRadius: 999,
                background: "rgba(255,255,255,0.12)",
                color: "var(--white)",
                border: "1px solid rgba(255,255,255,0.18)",
                display: "flex", alignItems: "center", justifyContent: "center",
                cursor: "pointer",
                fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1,
              }}
            >
              ×
            </button>
            <div style={{
              position: "relative",
              aspectRatio: "16 / 9",
              borderRadius: 16,
              overflow: "hidden",
              background: "var(--black)",
              boxShadow: "0 30px 80px rgba(0,0,0,0.6)",
            }}>
              <iframe
                src="https://www.youtube.com/embed/8K6pAgAI_AI?autoplay=1&rel=0&modestbranding=1&playsinline=1"
                title="Emily's story"
                style={{
                  position: "absolute", inset: 0,
                  width: "100%", height: "100%", border: 0, display: "block",
                }}
                allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
                allowFullScreen
              />
            </div>
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "space-between",
              gap: 16, flexWrap: "wrap",
              padding: "4px 4px 0",
            }}>
              <div style={{
                fontFamily: "var(--font-body)", fontSize: 14,
                color: "#D6D6D6",
              }}>
                Like what you see? Start your timeline in 2 minutes.
              </div>
              <a
                href="https://app.myhstimeline.com/register"
                className="btn-primary"
                style={{ padding: "14px 24px", fontSize: 15 }}
              >
                Register free
                <Icon name="arrow-right" size={16} className="arrow" />
              </a>
            </div>
          </div>
        </div>
      )}

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

window.EmilyStory = EmilyStory;