/* global React, Reveal */

const HowItWorks = () => {
  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) 200px" : "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>

                  {/* Video placeholder for step 4 */}
                  {s.hasVideo && (
                    <div className="step-video card-hover shimmer-bar" style={{
                      position: "relative",
                      aspectRatio: "16/10",
                      borderRadius: 14,
                      background: "var(--ink-900)",
                      border: "1px solid var(--ink-200)",
                      overflow: "hidden",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      cursor: "pointer",
                    }}>
                      <div style={{
                        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>
                      <div style={{
                        position: "absolute", left: 12, bottom: 10,
                        fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 600,
                        color: "var(--white)", letterSpacing: "0.04em", textTransform: "uppercase",
                      }}>
                        Video coming soon
                      </div>
                    </div>
                  )}
                </div>
              </Reveal>
            ))}
          </ol>
        </div>
      </div>

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

window.HowItWorks = HowItWorks;