/* Garbashala — Step Detail (Do Taali) */

const StepDetail = () => {
  const parts = (window.location.hash || "").replace(/^#/, "").split("/").filter(Boolean);
  const slug = parts[1] || "be-taali";
  const found = window.GARBA_STEPS.findIndex((x) => x.slug === slug);
  const idx = found >= 0 ? found : 0;
  const s = window.GARBA_STEPS[idx];
  const next = window.GARBA_STEPS[(idx + 1) % window.GARBA_STEPS.length];
  const taglines = [
    "the heartbeat",
    "the second clap",
    "the bouncing one",
    "light on the toes",
    "the swing",
    "tricky to learn",
    "the folk beat",
    "wings out",
  ];

  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY || window.pageYOffset || 0);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // 0–200: hero. 200–600: shrink. 600+: minimized in bottom-right corner.
  const t = Math.min(1, Math.max(0, (scrollY - 200) / 400));
  const videoStyle = t < 0.02 ? {
    position: "relative", width: "100%",
    height: 540, transition: "all 0.2s",
    margin: "0 auto",
  } : {
    position: "fixed", right: 28, bottom: 28, width: 280, height: 200,
    transition: "all 0.6s cubic-bezier(0.4, 0, 0.2, 1)",
    boxShadow: "0 8px 30px rgba(42,24,16,0.35)",
    zIndex: 2147483647,
  };

  return (
    <div className="paper-bg" style={{ minHeight: "100vh", fontFamily: "var(--font-body)", color: "var(--ink)", position: "relative" }}>
      <NavBar active="library" />

      {/* Breadcrumb */}
      <div style={{ padding: "16px 48px 0", fontFamily: "var(--font-handwrite)", fontSize: 18, color: "var(--terracotta)" }}>
        <a href="#/library" style={{ color: "var(--terracotta)", textDecoration: "none" }}>steps</a>
        <span style={{ margin: "0 10px", color: "var(--ink-soft)" }}>↳</span>
        <span style={{ color: "var(--ink)" }}>{s.name.toLowerCase()}</span>
      </div>

      {/* HERO + TITLE */}
      <section style={{ padding: "36px 48px 0", position: "relative" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 24, flexWrap: "wrap", gap: 24 }}>
          <div>
            <span style={{ transform: "rotate(-2deg)", display: "inline-block", fontFamily: "var(--font-handwrite)", fontSize: 24, color: "var(--terracotta)" }}>
              <Handwrite size={26} color="var(--terracotta)" speed={1.3}>{`step #${idx + 1} · ${taglines[idx] || "in the circle"}`}</Handwrite> ✦
            </span>
            <h1 style={{
              fontFamily: "var(--font-display)", fontStyle: "italic",
              fontSize: 140, lineHeight: 0.92, margin: "4px 0 0",
              color: "var(--maroon)", letterSpacing: "-0.01em",
            }}>
              {s.name.toLowerCase()}<span style={{ color: "var(--terracotta)" }}>.</span>
            </h1>
            <div style={{ display: "flex", alignItems: "baseline", gap: 18, marginTop: 8, flexWrap: "wrap" }}>
              <span className="gujarati" style={{ fontSize: 36, color: "var(--terracotta)" }}>
                {s.gujarati}
              </span>
              <span style={{ fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: 22, color: "var(--ink-soft)" }}>
                {s.translit} · "{s.meaning.toLowerCase()}"
              </span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", justifyContent: "flex-end", maxWidth: 360 }}>
            <span className="pill" style={{ color: "var(--terracotta)", borderColor: "var(--terracotta)" }}>
              {"★".repeat(s.difficulty)} {s.difficulty <= 1 ? "beginner" : s.difficulty <= 2 ? "easy" : s.difficulty <= 3 ? "intermediate" : "advanced"}
            </span>
            <span className="pill" style={{ color: "var(--ink-soft)" }}>♪ {s.beats} beats</span>
            <span className="pill" style={{ color: "var(--ink-soft)" }}>tempo · {s.tempo.toLowerCase()}</span>
            <span className="pill" style={{ color: "var(--ink-soft)" }}>{s.region.toLowerCase()}</span>
          </div>
        </div>
      </section>

      {/* VIDEO HERO (shrinks on scroll) */}
      <div style={{ position: "relative", padding: "0 48px", height: t < 0.02 ? 600 : 60 }}>
        <div style={{
          ...videoStyle,
          borderRadius: t > 0.5 ? "12px" : "12px 4px 14px 6px / 6px 14px 4px 12px",
          border: t > 0.5 ? "2px solid var(--paper)" : "1.5px solid var(--ink)",
          overflow: "hidden",
          background: `linear-gradient(135deg, ${s.color}, var(--terracotta-deep))`,
        }}>
          <div style={{
            position: "absolute", inset: 0,
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "rgba(255,255,255,0.85)",
          }}>
            <div style={{ textAlign: "center", padding: 16 }}>
              <div style={{ fontFamily: "var(--font-handwrite)", fontSize: t > 0.5 ? 18 : 32, marginBottom: 8 }}>
                [ slow-motion video ]
              </div>
              {t < 0.5 && (
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20, opacity: 0.7 }}>
                  a dancer in chaniya choli, doing 8 cycles of {s.name.toLowerCase()}
                </div>
              )}
            </div>
          </div>
          <div style={{
            position: "absolute", bottom: t > 0.5 ? 8 : 16, left: t > 0.5 ? 8 : 16,
            background: "rgba(0,0,0,0.5)", color: "white",
            padding: t > 0.5 ? "3px 8px" : "6px 14px",
            borderRadius: 12, display: "flex", alignItems: "center", gap: 8,
            fontFamily: "var(--font-display)", fontStyle: "italic",
            fontSize: t > 0.5 ? 12 : 16,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#E8A33D", animation: "blink 1.2s infinite" }} />
            {t > 0.5 ? "0:24" : "looping · 0:24"}
          </div>
          {t < 0.5 && (
            <div style={{
              position: "absolute", bottom: 16, right: 16,
              background: "var(--paper)", color: "var(--ink)",
              padding: "6px 14px", borderRadius: 14,
              fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 15,
              display: "flex", gap: 12, alignItems: "center",
            }}>
              <span>speed:</span>
              <span style={{ color: "var(--terracotta)", borderBottom: "2px solid currentColor" }}>0.5x</span>
              <span>0.75x</span>
              <span>1x</span>
            </div>
          )}
        </div>
        {t < 0.1 && (
          <div style={{
            position: "absolute", bottom: 12, left: "50%", transform: "translateX(-50%)",
            fontFamily: "var(--font-handwrite)", fontSize: 19, color: "var(--terracotta)",
            animation: "bobble 2s ease-in-out infinite",
          }}>
            scroll for the breakdown ↓
          </div>
        )}
      </div>

      {/* INTRO PROSE */}
      <section style={{ padding: "20px 48px 60px", maxWidth: 760 }}>
        <p style={{ fontSize: 24, lineHeight: 1.55, color: "var(--ink)", fontFamily: "var(--font-body)", fontStyle: "italic" }}>
          {s.summary} <span style={{ color: "var(--terracotta)", fontStyle: "normal" }}>This is the answer.</span>
        </p>
        <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--ink-soft)", marginTop: 16 }}>
          {slug === "be-taali"
            ? "Two steps, two claps. Right foot forward, clap. Left foot forward, clap. Repeat forever. The whole circle moves counter-clockwise around the diya in the middle. Every single garba night opens with this — it's the warm-up that wakes your feet up."
            : `From the ${s.region}. Counts in ${s.beats}. ${s.tempo} tempo. Dance it in the circle around the diya, counter-clockwise, with everyone else.`}
        </p>
      </section>

      <div style={{ padding: "0 48px" }}>
        <HandDivider width={Math.min(1304, (typeof window !== "undefined" ? window.innerWidth : 1304) - 96)} />
      </div>

      {/* THE COUNT */}
      <section style={{ padding: "70px 48px 40px" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 30, flexWrap: "wrap" }}>
          <span style={{ transform: "rotate(-3deg)", display: "inline-block", fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
            <Handwrite size={24} color="var(--terracotta)" speed={1.5}>the count</Handwrite> ↓
          </span>
          <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 54, margin: 0, color: "var(--maroon)" }}>
            {s.beats === 2 ? "two beats, repeated" : `${s.beats} beats, repeated`}
          </h2>
        </div>

        <BeatCounter />
      </section>

      {/* FOOTWORK DIAGRAM */}
      <section style={{ padding: "30px 48px 60px" }}>
        <div className="step-grid" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60 }}>
          <div>
            <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
              ↓ <Handwrite size={22} color="var(--terracotta)" speed={1.5}>where your feet go</Handwrite> ↓
            </span>
            <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 48, margin: "8px 0 16px", color: "var(--maroon)" }}>
              footwork, top-down
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-soft)", maxWidth: 480 }}>
              Imagine looking down at your own feet from above. <span style={{ color: "var(--terracotta)", fontWeight: 600 }}>Right is rust</span>,
              <span style={{ color: "var(--sage)", fontWeight: 600 }}> left is sage</span>.
              The dotted arrow is where it travels next. Every clap happens on the beat
              the foot lands.
            </p>

            <div style={{ marginTop: 24, display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap" }}>
              <span className="pill" style={{ color: "var(--terracotta)", borderColor: "var(--terracotta)" }}>
                <span style={{ width: 10, height: 10, borderRadius: 2, background: "var(--terracotta)" }} /> right
              </span>
              <span className="pill" style={{ color: "var(--sage)", borderColor: "var(--sage)" }}>
                <span style={{ width: 10, height: 10, borderRadius: 2, background: "var(--sage)" }} /> left
              </span>
              <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 17, color: "var(--ink-soft)" }}>
                👏 = clap moment
              </span>
            </div>

            <div style={{ marginTop: 30, padding: 20, background: "var(--cream-warm)", borderRadius: "16px 4px 14px 6px / 6px 14px 4px 16px", border: "1px solid var(--terracotta)" }}>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, color: "var(--maroon)", marginBottom: 6 }}>
                auntie tip ☕
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.5, color: "var(--ink-soft)", margin: 0 }}>
                Don't watch your own feet. Watch the person in front of you, half a beat behind.
                The circle pulls you along — that's the whole secret.
              </p>
            </div>
          </div>

          <FootDiagram />
        </div>
      </section>

      {/* DANCER PHOTOS — STEP BY STEP */}
      <section style={{ padding: "40px 48px 60px", background: "var(--cream-warm)", position: "relative" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.12 }} className="bandhani" />
        <div style={{ position: "relative" }}>
          <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
            ↓ photographs of the real thing ↓
          </span>
          <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 48, margin: "8px 0 30px", color: "var(--maroon)" }}>
            step by step, in pictures
          </h2>

          <div className="photo-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
            {[
              { n: 1, title: "ready position", body: "Feet together, weight even, hands at chest height." },
              { n: 2, title: "right foot forward", body: "Step diagonally forward-right. Heel lands first." },
              { n: 3, title: "first clap", body: "Hands meet at chest level, on the beat. Loud and proud." },
              { n: 4, title: "left foot forward", body: "Bring left foot to meet right. Second clap, slightly higher." },
            ].map(({ n, title, body }, i) => (
              <div key={n} style={{ position: "relative" }}>
                <div className="tape" style={{ top: -8, left: 30, transform: `rotate(${i % 2 ? -5 : 4}deg)` }} />
                <div style={{
                  background: "var(--maroon)",
                  borderRadius: i % 2 ? "8px 24px 8px 24px" : "24px 8px 24px 8px",
                  height: 280,
                  transform: `rotate(${[-1, 0.5, -0.5, 1][i]}deg)`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "rgba(255,255,255,0.5)", fontFamily: "var(--font-handwrite)",
                  fontSize: 16, textAlign: "center", padding: 16,
                  boxShadow: "3px 3px 0 var(--ink)",
                }}>
                  [ photo of dancer:<br/>{title} ]
                </div>
                <div style={{ marginTop: 14, paddingLeft: 4 }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                    <NumberStamp n={n} />
                    <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 26, margin: 0, color: "var(--maroon)" }}>
                      {title}
                    </h3>
                  </div>
                  <p style={{ fontSize: 15, lineHeight: 1.5, color: "var(--ink-soft)", margin: "8px 0 0" }}>
                    {body}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PRACTICE SONG */}
      <section style={{ padding: "70px 48px 60px" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 30, flexWrap: "wrap" }}>
          <span style={{ transform: "rotate(-3deg)", display: "inline-block", fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
            <Handwrite size={24} color="var(--terracotta)" speed={1.5}>practice with</Handwrite> ↓
          </span>
          <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 54, margin: 0, color: "var(--maroon)" }}>
            a real garba song
          </h2>
        </div>

        <SongPlayer />
      </section>

      {/* HISTORY / FACTS */}
      <section style={{ padding: "30px 48px 70px" }}>
        <div className="history-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 50 }}>
          <div>
            <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
              a little history ✦
            </span>
            <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 48, margin: "8px 0 20px", color: "var(--maroon)" }}>
              why two claps?
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--ink)", marginBottom: 14 }}>
              The simplest theory: two claps mark <em>matching syllables</em> in the chorus of
              most garba songs. Every Gujarati folk song is built on a 2-beat or 4-beat foundation,
              and be taali is the bare minimum that locks you into the pulse.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-soft)", marginBottom: 14 }}>
              But there's also a spiritual reading. Garba comes from the Sanskrit{" "}
              <em style={{ color: "var(--terracotta)" }}>garbha-deep</em> — the womb-lamp.
              The diya in the middle of the circle represents life, and dancers circle it
              the way planets orbit the sun. Two claps echo the heartbeat — first sound a
              baby ever hears.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-soft)", marginBottom: 0 }}>
              Whatever theory you like best, the result is the same: be taali is how every
              garba night begins. From temple courtyards in Vadodara to Diwali Mela in Edison, NJ.
            </p>
          </div>

          <aside>
            <div className="handbox" style={{ padding: 24 }}>
              <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)", marginBottom: 10 }}>
                quick facts
              </div>
              <dl style={{ margin: 0, fontSize: 15, lineHeight: 1.7 }}>
                {[
                  ["origin", "Gujarat, India · documented in folk literature 14th century onward"],
                  ["sanskrit root", "garbha (womb) + deep (lamp)"],
                  ["danced during", "Navratri (9 nights, autumn)"],
                  ["circle direction", "counter-clockwise (anticlockwise)"],
                  ["typical tempo", "60–90 BPM at start, climbs to 140+"],
                  ["first taught at", "age 4–5, usually by an aunt"],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: "flex", borderBottom: "1px dashed rgba(42,24,16,0.2)", padding: "8px 0" }}>
                    <dt style={{ fontFamily: "var(--font-display)", fontStyle: "italic", color: "var(--maroon)", flexBasis: 130, flexShrink: 0 }}>{k}</dt>
                    <dd style={{ margin: 0, color: "var(--ink-soft)" }}>{v}</dd>
                  </div>
                ))}
              </dl>
            </div>

            <div style={{ marginTop: 24, padding: 22, background: "var(--maroon)", color: "var(--cream)", borderRadius: "16px 4px 14px 6px / 6px 14px 4px 16px", boxShadow: "3px 3px 0 var(--terracotta)" }}>
              <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 20, color: "var(--marigold)" }}>watch next</div>
              <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 28, margin: "4px 0 8px", color: "var(--cream)" }}>
                {next.name.toLowerCase()}
              </h3>
              <p style={{ margin: "0 0 14px", color: "var(--cream-warm)", fontSize: 14, lineHeight: 1.5 }}>
                {next.summary}
              </p>
              <a href={`#/step/${next.slug}`} style={{ color: "var(--marigold)", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 17, textDecoration: "none", borderBottom: "2px solid currentColor" }}>
                open the next step →
              </a>
            </div>
          </aside>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ borderTop: "1px dashed rgba(42,24,16,0.3)", padding: "30px 48px 50px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
        <GarbashalaLogo size={22} />
        <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 17, color: "var(--terracotta)" }}>
          jai mata di ♡
        </span>
      </footer>

      <style>{`
        @keyframes blink { 50% { opacity: 0.3; } }
        @keyframes bobble { 50% { transform: translateX(-50%) translateY(6px); } }
        @media (max-width: 900px) {
          .step-grid, .history-grid { grid-template-columns: 1fr !important; }
          .photo-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </div>
  );
};

const BeatCounter = () => {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setActive((a) => (a + 1) % 8), 700);
    return () => clearInterval(id);
  }, []);

  const cells = Array.from({ length: 8 }).map((_, i) => {
    const isClap = i % 2 === 1;
    const foot = i % 4 < 2 ? "R" : "L";
    return { i, isClap, foot };
  });

  return (
    <div className="handbox" style={{ padding: "30px 36px", background: "var(--cream-warm)" }}>
      <div className="beat-grid" style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 14 }}>
        {cells.map(({ i, isClap, foot }) => (
          <div key={i} style={{
            border: "1.5px solid var(--ink)",
            borderRadius: i % 2 === 0 ? "12px 4px 10px 6px / 6px 10px 4px 12px" : "4px 12px 6px 10px / 10px 6px 12px 4px",
            background: i === active ? "var(--terracotta)" : "var(--paper)",
            color: i === active ? "var(--paper)" : "var(--ink)",
            padding: 14, textAlign: "center",
            transform: i === active ? "translateY(-3px) rotate(-1deg)" : "rotate(0deg)",
            transition: "all 0.2s",
            boxShadow: i === active ? "3px 3px 0 var(--maroon)" : "1px 1px 0 var(--ink)",
            cursor: "pointer",
          }}
          onClick={() => setActive(i)}>
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 36, lineHeight: 1, fontWeight: 700 }}>
              {i + 1}
            </div>
            <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 19, marginTop: 4 }}>
              {isClap ? "👏 clap" : `step ${foot}`}
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 18, flexWrap: "wrap", gap: 8 }}>
        <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 18, color: "var(--ink-soft)" }}>
          ← cycles 1, 2 →   ← cycles 3, 4 →
        </span>
        <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18, color: "var(--terracotta)" }}>
          ▶ playing at 0.5× · click any cell to jump
        </span>
      </div>
      <style>{`
        @media (max-width: 700px) {
          .beat-grid { grid-template-columns: repeat(4, 1fr) !important; }
        }
      `}</style>
    </div>
  );
};

const FootDiagram = () => (
  <svg viewBox="0 0 400 360" style={{ width: "100%", maxWidth: 460 }}>
    <defs>
      <pattern id="floor" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <circle cx="10" cy="10" r="0.7" fill="var(--ink-soft)" opacity="0.18" />
      </pattern>
    </defs>
    <rect x="20" y="20" width="360" height="320" fill="url(#floor)" stroke="var(--ink)" strokeWidth="1" strokeDasharray="3 3" rx="14" />

    <text x="200" y="46" textAnchor="middle" fontFamily="var(--font-handwrite)" fontSize="18" fill="var(--terracotta)">
      ← circle moves this way (counter-clockwise)
    </text>

    <g transform="translate(140 240)" opacity="0.3">
      <ellipse cx="0" cy="20" rx="18" ry="22" fill="var(--terracotta)" />
      <text x="0" y="26" textAnchor="middle" fill="white" fontFamily="var(--font-display)" fontSize="14" fontStyle="italic" fontWeight="700">R</text>
    </g>
    <g transform="translate(190 240)" opacity="0.3">
      <ellipse cx="0" cy="20" rx="18" ry="22" fill="var(--sage)" />
      <text x="0" y="26" textAnchor="middle" fill="white" fontFamily="var(--font-display)" fontSize="14" fontStyle="italic" fontWeight="700">L</text>
    </g>
    <text x="165" y="295" textAnchor="middle" fontFamily="var(--font-handwrite)" fontSize="16" fill="var(--ink-soft)">
      starting position
    </text>

    <g transform="translate(170 150)">
      <ellipse cx="0" cy="0" rx="20" ry="26" fill="var(--terracotta)" />
      <text x="0" y="6" textAnchor="middle" fill="white" fontFamily="var(--font-display)" fontSize="16" fontStyle="italic" fontWeight="700">R</text>
      <circle cx="-26" cy="-26" r="14" fill="var(--marigold)" stroke="var(--maroon)" strokeWidth="1.5" />
      <text x="-26" y="-22" textAnchor="middle" fontFamily="var(--font-display)" fontStyle="italic" fontSize="14" fontWeight="700" fill="var(--maroon)">1</text>
      <text x="48" y="2" fontFamily="var(--font-handwrite)" fontSize="17" fill="var(--terracotta)">step + 👏 clap</text>
    </g>

    <DrawPath d="M140 230 Q 155 195 165 175" stroke="var(--terracotta)" strokeWidth="1.8" duration={1.6} delay={0.3} strokeDasharray="4 3" />
    <polygon points="167,170 161,178 173,178" fill="var(--terracotta)" />

    <g transform="translate(216 150)">
      <ellipse cx="0" cy="0" rx="20" ry="26" fill="var(--sage)" />
      <text x="0" y="6" textAnchor="middle" fill="white" fontFamily="var(--font-display)" fontSize="16" fontStyle="italic" fontWeight="700">L</text>
      <circle cx="26" cy="-26" r="14" fill="var(--marigold)" stroke="var(--maroon)" strokeWidth="1.5" />
      <text x="26" y="-22" textAnchor="middle" fontFamily="var(--font-display)" fontStyle="italic" fontSize="14" fontWeight="700" fill="var(--maroon)">2</text>
    </g>

    <DrawPath d="M192 230 Q 200 195 212 175" stroke="var(--sage)" strokeWidth="1.8" duration={1.6} delay={0.7} strokeDasharray="4 3" />
    <polygon points="214,170 207,178 219,178" fill="var(--sage)" />

    <text x="200" y="120" textAnchor="middle" fontFamily="var(--font-handwrite)" fontSize="16" fill="var(--ink-soft)">
      feet end up close together
    </text>

    <text x="200" y="335" textAnchor="middle" fontFamily="var(--font-display)" fontStyle="italic" fontSize="20" fill="var(--maroon)">
      ↻ then repeat — forever
    </text>
  </svg>
);

const SongPlayer = () => {
  const [playing, setPlaying] = React.useState(false);
  const [progress, setProgress] = React.useState(0.34);
  const [tempo, setTempo] = React.useState(0.75);
  const bars = 80;

  return (
    <div className="handbox" style={{ padding: 24, background: "var(--paper)" }}>
      <div className="song-row" style={{ display: "flex", gap: 22, alignItems: "stretch", flexWrap: "wrap" }}>
        <div style={{
          width: 140, height: 140, flexShrink: 0,
          background: "linear-gradient(135deg, #5C2018, #C4502A)",
          borderRadius: 8,
          position: "relative", overflow: "hidden",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <div style={{ position: "absolute", inset: 0, opacity: 0.2 }}>
            <Chakra size={140} color="#E8A33D" />
          </div>
          <Diya size={46} />
        </div>

        <div style={{ flex: 1, minWidth: 280 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 8 }}>
            <div>
              <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 18, color: "var(--terracotta)" }}>
                practice track ✦ public domain
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 32, color: "var(--maroon)", margin: "2px 0" }}>
                Sanedo Re Sanedo
              </h3>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--ink-soft)" }}>
                traditional folk · arr. by Hemant Chauhan · 1987
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 17, color: "var(--ink)" }}>
                1:24 / 4:08
              </div>
              <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 16, color: "var(--sage)", marginTop: 4 }}>
                a great chorus to loop
              </div>
            </div>
          </div>

          <div style={{
            marginTop: 16, height: 70,
            background: "var(--cream-warm)",
            borderRadius: 10, padding: "8px 10px",
            position: "relative",
            border: "1px solid rgba(42,24,16,0.2)",
          }}>
            <div style={{ display: "flex", alignItems: "center", height: "100%", gap: 2 }}>
              {Array.from({ length: bars }).map((_, i) => {
                const h = 18 + Math.abs(Math.sin(i * 0.7) * Math.cos(i * 0.3)) * 38 + (i % 5) * 2;
                const past = i / bars < progress;
                return (
                  <div key={i} style={{
                    flex: 1,
                    height: `${Math.min(h, 54)}px`,
                    background: past ? "var(--terracotta)" : "rgba(42,24,16,0.3)",
                    borderRadius: 1.5,
                  }} />
                );
              })}
            </div>
            <div style={{
              position: "absolute", top: 4, bottom: 4,
              left: `${10 + progress * (100 - 2)}%`,
              width: 2, background: "var(--maroon)",
              boxShadow: "0 0 0 3px rgba(196,80,42,0.2)",
            }} />
            <div style={{
              position: "absolute", top: 0, bottom: 0,
              left: "30%", width: "26%",
              background: "rgba(232,163,61,0.18)",
              borderLeft: "2px dashed var(--marigold-deep)",
              borderRight: "2px dashed var(--marigold-deep)",
              pointerEvents: "none",
            }}>
              <div style={{ position: "absolute", top: -22, left: "50%", transform: "translateX(-50%)", fontFamily: "var(--font-handwrite)", fontSize: 15, color: "var(--marigold-deep)", whiteSpace: "nowrap" }}>
                ↓ loop region
              </div>
            </div>
          </div>

          <div style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <button onClick={() => setPlaying(!playing)} style={{
              width: 50, height: 50, borderRadius: "50%",
              background: "var(--terracotta)", color: "var(--paper)",
              border: "none", boxShadow: "2px 2px 0 var(--maroon)",
              fontSize: 18,
            }}>
              {playing ? "❚❚" : "▶"}
            </button>
            <button style={{ background: "transparent", border: "1.5px solid var(--ink)", borderRadius: 20, padding: "6px 14px", fontFamily: "var(--font-display)", fontStyle: "italic", color: "var(--ink)" }}>
              ↺ loop
            </button>
            <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-display)", fontStyle: "italic", color: "var(--ink-soft)" }}>
              tempo
              <span style={{ fontSize: 18, color: "var(--terracotta)" }}>{tempo}×</span>
            </div>
            <input type="range" min={0.5} max={1.25} step={0.05} value={tempo} onChange={(e) => setTempo(+e.target.value)}
                   style={{ width: 140, accentColor: "var(--terracotta)" }} />
            <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
              <span className="pill" style={{ color: "var(--ink-soft)", fontSize: 12 }}>Gujarati lyrics</span>
              <span className="pill" style={{ color: "var(--ink-soft)", fontSize: 12 }}>↓ download mp3</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* Mobile version of step detail */
const MobileStep = () => {
  const parts = (window.location.hash || "").replace(/^#/, "").split("/").filter(Boolean);
  const slug = parts[1] || "be-taali";
  const s = window.GARBA_STEPS.find((x) => x.slug === slug) || window.GARBA_STEPS[0];

  return (
    <div className="paper-bg" style={{ minHeight: "100vh", fontFamily: "var(--font-body)", color: "var(--ink)", overflow: "hidden" }}>
      <header className="mobile-step-header" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 18px", borderBottom: "1px dashed rgba(42,24,16,0.3)" }}>
        <a href="#/library" style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, color: "var(--maroon)", textDecoration: "none" }}>← steps</a>
        <GarbashalaLogo size={16} showSub={false} />
        <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 15, color: "var(--terracotta)" }}>♡</span>
      </header>

      <div style={{
        margin: "16px 18px",
        height: 220,
        background: `linear-gradient(135deg, ${s.color}, var(--terracotta-deep))`,
        borderRadius: "12px 4px 14px 6px / 6px 14px 4px 12px",
        border: "1.5px solid var(--ink)",
        display: "flex", alignItems: "center", justifyContent: "center",
        color: "rgba(255,255,255,0.8)", fontFamily: "var(--font-handwrite)", fontSize: 16,
        position: "relative",
      }}>
        [ slow-mo loop ]
        <span style={{ position: "absolute", top: 8, right: 8, background: "rgba(0,0,0,0.5)", color: "white", padding: "2px 8px", borderRadius: 10, fontSize: 11 }}>▶ 0:24</span>
      </div>

      <div style={{ padding: "8px 18px 0" }}>
        <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 17, color: "var(--terracotta)" }}>step #{Math.max(1, window.GARBA_STEPS.findIndex((x) => x.slug === slug) + 1)} ✦</span>
        <h1 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 56, lineHeight: 0.9, margin: "4px 0 6px", color: "var(--maroon)" }}>
          {s.name.toLowerCase()}<span style={{ color: "var(--terracotta)" }}>.</span>
        </h1>
        <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
          <span className="gujarati">{s.gujarati}</span> · {s.meaning.toLowerCase()}
        </div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 12 }}>
          <span className="pill" style={{ color: "var(--terracotta)", fontSize: 11, padding: "2px 8px" }}>{"★".repeat(s.difficulty)}</span>
          <span className="pill" style={{ color: "var(--ink-soft)", fontSize: 11, padding: "2px 8px" }}>♪ {s.beats} beats</span>
          <span className="pill" style={{ color: "var(--ink-soft)", fontSize: 11, padding: "2px 8px" }}>{s.tempo.toLowerCase()}</span>
        </div>
      </div>

      <div style={{ padding: "20px 18px 0" }}>
        <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink)", fontStyle: "italic" }}>
          {s.summary}
        </p>
      </div>

      <div style={{ padding: "20px 18px 0" }}>
        <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 18, color: "var(--terracotta)" }}>↓ the count ↓</div>
        <div className="mobile-count-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginTop: 10 }}>
          {[1, 2, 3, 4].map((i) => (
            <div key={i} style={{
              border: "1.5px solid var(--ink)", borderRadius: 8,
              background: i === 1 ? "var(--terracotta)" : "var(--paper)",
              color: i === 1 ? "var(--paper)" : "var(--ink)",
              padding: 8, textAlign: "center",
            }}>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, fontWeight: 700 }}>{i}</div>
              <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 13 }}>
                {i % 2 === 0 ? "👏" : `${i < 3 ? "R" : "L"}`}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: "24px 18px 0" }}>
        <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 18, color: "var(--terracotta)" }}>↓ where the feet go ↓</div>
        <div className="handbox" style={{ marginTop: 10, padding: 14, background: "var(--cream-warm)" }}>
          <FootDiagram />
        </div>
      </div>

      <div style={{ padding: "24px 18px 0" }}>
        <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 18, color: "var(--terracotta)" }}>↓ practice with ↓</div>
        <div className="handbox" style={{ marginTop: 10, padding: 14 }}>
          <div style={{ display: "flex", gap: 12 }}>
            <div style={{ width: 56, height: 56, borderRadius: 6, background: "linear-gradient(135deg, #5C2018, #C4502A)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Diya size={26} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18, color: "var(--maroon)", lineHeight: 1 }}>Sanedo Re Sanedo</div>
              <div style={{ fontSize: 12, color: "var(--ink-soft)" }}>traditional · 4:08</div>
              <div style={{ height: 22, marginTop: 6, display: "flex", gap: 1, alignItems: "center" }}>
                {Array.from({ length: 36 }).map((_, i) => (
                  <div key={i} style={{ flex: 1, height: 8 + Math.abs(Math.sin(i * 0.6)) * 14, background: i < 12 ? "var(--terracotta)" : "rgba(42,24,16,0.3)", borderRadius: 1 }} />
                ))}
              </div>
            </div>
            <button className="mobile-play-button" style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--terracotta)", color: "white", border: "none", boxShadow: "1px 1px 0 var(--maroon)" }}>▶</button>
          </div>
        </div>
      </div>

      <div style={{ padding: "24px 18px 0" }}>
        <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 18, color: "var(--terracotta)" }}>↓ step by step ↓</div>
        <div className="mobile-photo-strip" style={{ display: "flex", gap: 8, overflowX: "auto", marginTop: 10, paddingBottom: 6 }}>
          {["ready", "right →", "👏 clap", "left →"].map((t, i) => (
            <div className="mobile-photo-card" key={i} style={{
              flexShrink: 0, width: 110, height: 140,
              background: "var(--maroon)", borderRadius: 10,
              display: "flex", alignItems: "flex-end", justifyContent: "center",
              padding: 8, color: "var(--cream)", fontFamily: "var(--font-handwrite)", fontSize: 13,
              boxShadow: "2px 2px 0 var(--ink)",
            }}>
              {i + 1}. {t}
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: "24px 18px 30px" }}>
        <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 18, color: "var(--terracotta)" }}>a little history ✦</div>
        <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 28, color: "var(--maroon)", margin: "4px 0 8px" }}>why two claps?</h2>
        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-soft)" }}>
          Two claps mark matching syllables in every garba chorus — the bare minimum that locks you into the pulse.
          Spiritually, they echo the heartbeat: the first sound a baby ever hears, around the womb-lamp at the center of the circle.
        </p>
        <a className="mobile-next-link" href="#/step/tran-taali" style={{ display: "inline-block", marginTop: 10, color: "var(--terracotta)", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18, textDecoration: "none", borderBottom: "2px solid currentColor" }}>
          next: tran taali →
        </a>
      </div>
    </div>
  );
};

window.StepDetail = StepDetail;
window.MobileStep = MobileStep;
