/* global React, Reveal */

const HowItWorks = () => {
  const [videoPlaying, setVideoPlaying] = React.useState(false);
  const steps = [
    {
      n: "1",
      title: "Tell us who you are",
      body: "International? Transfer? Coming from middle school? We start where you are.",
      icon: "user-round",
    },
    {
      n: "2",
      title: "Set your goals",
      body: "Just want to adapt? Aiming for top colleges? Both? Your timeline adjusts.",
      icon: "target",
    },
    {
      n: "3",
      title: "Get your roadmap",
      body: "A year-by-year plan with deadlines, milestones, and the stuff no one mentions.",
      icon: "map",
    },
    {
      n: "4",
      title: "Watch & learn",
      body: "Short videos from Emily and other students explaining what actually matters at each stage.",
      icon: "play",
      hasVideo: true,
    },
    {
      n: "5",
      title: "Finish strong",
      body: "Navigate every decision with confidence. Hit \"I got in\" when you're done.",
      icon: "graduation-cap",
      isFinal: true,
    },
  ];

  return (
    <section
      data-screen-label="04 How it works"
      id="how"
      style={{
        background: "var(--white)",
        padding: "clamp(80px, 10vw, 128px) 24px",
        position: "relative",
      }}
    >
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <Reveal>
          <div className="eyebrow" style={{ color: "var(--brand-lime-700)", marginBottom: 18 }}>
            How it works
          </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,
          }}>
            Your timeline in <span style={{ color: "var(--brand-lime)" }}>5 steps.</span>
          </h2>
        </Reveal>

        {/* Vertical timeline */}
        <div style={{
          marginTop: 64,
          position: "relative",
        }} className="timeline-wrap">
          {/* The dotted spine */}
          <div className="vline-dotted timeline-line" style={{
            position: "absolute",
            left: 31,
            top: 12,
            bottom: 12,
            width: 4,
          }} />

          <ol style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 32 }}>
            {steps.map((s, i) => (
              <Reveal key={s.n} as="li" style={{
                position: "relative",
                paddingLeft: 92,
                minHeight: 64,
              }}>
                {/* Marker */}
                <div style={{
                  position: "absolute",
                  left: 0,
                  top: 0,
                  width: 64, height: 64,
                  borderRadius: 999,
                  background: s.isFinal ? "var(--brand-lime)" : "var(--white)",
                  border: s.isFinal ? "3px solid var(--brand-lime)" : "3px solid var(--ink-900)",
                  color: s.isFinal ? "var(--black)" : "var(--ink-900)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 24,
                  letterSpacing: "-0.02em",
                  zIndex: 1,
                  boxShadow: s.isFinal ? "var(--shadow-lime)" : "none",
                }}>
                  {s.n}
                </div>

                <div style={{
                  display: "grid",
                  gridTemplateColumns: s.hasVideo ? "minmax(0, 1fr) 180px" : "1fr",
                  gap: 24,
                  alignItems: "center",
                }} className="step-row">
                  <div>
                    <div style={{
                      display: "flex", alignItems: "center", gap: 10, marginBottom: 8,
                      color: s.isFinal ? "var(--brand-lime-700)" : "var(--ink-500)",
                    }}>
                      <Icon name={s.icon} size={16} />
                      <span className="eyebrow" style={{ color: "inherit" }}>
                        Step 0{s.n}
                      </span>
                    </div>
                    <h3 style={{
                      fontFamily: "var(--font-display)", fontWeight: 900,
                      fontSize: "clamp(22px, 2.6vw, 32px)",
                      lineHeight: 1.1, letterSpacing: "-0.02em",
                      color: "var(--ink-900)", margin: 0,
                    }}>
                      {s.title}
                      {s.isFinal && <span style={{ color: "var(--brand-lime)" }}>.</span>}
                    </h3>
                    <p style={{
                      marginTop: 8,
                      fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.5,
                      color: "var(--ink-700)", maxWidth: 580,
                    }}>
                      {s.body}
                    </p>
                  </div>

                  {/* Vertical YouTube Short for step 4 */}
                  {s.hasVideo && (
                    <div
                      className="step-video card-hover"
                      onClick={videoPlaying ? undefined : () => setVideoPlaying(true)}
                      onKeyDown={videoPlaying ? undefined : (e) => {
                        if (e.key === "Enter" || e.key === " ") {
                          e.preventDefault();
                          setVideoPlaying(true);
                        }
                      }}
                      role={videoPlaying ? undefined : "button"}
                      tabIndex={videoPlaying ? undefined : 0}
                      aria-label={videoPlaying ? undefined : "Play step 4 video"}
                      style={{
                        position: "relative",
                        aspectRatio: "9 / 16",
                        borderRadius: 14,
                        background: "var(--ink-900)",
                        border: "1px solid var(--ink-200)",
                        overflow: "hidden",
                        cursor: videoPlaying ? "default" : "pointer",
                      }}
                    >
                      {videoPlaying ? (
                        <iframe
                          src="https://www.youtube.com/embed/6T2SGCzSWoU?autoplay=1&controls=0&modestbranding=1&rel=0&playsinline=1&fs=0&iv_load_policy=3&disablekb=1"
                          title="Watch & learn — step 4"
                          style={{
                            position: "absolute", inset: 0,
                            width: "100%", height: "100%",
                            border: 0, display: "block",
                          }}
                          allow="autoplay; encrypted-media; picture-in-picture"
                          allowFullScreen={false}
                        />
                      ) : (
                        <React.Fragment>
                          <img
                            src="https://i.ytimg.com/vi/6T2SGCzSWoU/maxresdefault.jpg"
                            alt="Watch & learn"
                            onError={(e) => {
                              if (!e.currentTarget.dataset.fallback) {
                                e.currentTarget.dataset.fallback = "1";
                                e.currentTarget.src = "https://i.ytimg.com/vi/6T2SGCzSWoU/hqdefault.jpg";
                              }
                            }}
                            style={{
                              position: "absolute", inset: 0,
                              width: "100%", height: "100%",
                              objectFit: "cover", objectPosition: "center",
                              display: "block",
                            }}
                          />
                          <div style={{
                            position: "absolute", top: "50%", left: "50%",
                            transform: "translate(-50%, -50%)",
                            width: 44, height: 44, borderRadius: 999,
                            background: "var(--brand-lime)",
                            color: "var(--black)",
                            display: "flex", alignItems: "center", justifyContent: "center",
                            boxShadow: "var(--shadow-lime)",
                          }}>
                            <Icon name="play" size={20} />
                          </div>
                        </React.Fragment>
                      )}
                    </div>
                  )}
                </div>
              </Reveal>
            ))}
          </ol>
        </div>
      </div>

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

window.HowItWorks = HowItWorks;