const Ladder = ({ style = "bars", active = "cited", animate = true }) => {
  const tiers = [
    { id: "invisible", label: "Invisible", microcopy: "AI never surfaces you",
      color: "var(--invisible)", pct: 4, bar: 28 },
    { id: "mentioned", label: "Mentioned", microcopy: "AI knows the brand — sends no traffic",
      color: "var(--amber)", pct: 22, bar: 78 },
    { id: "cited", label: "Cited", microcopy: "AI cites your URL → qualified clicks",
      color: "var(--teal)", pct: 71, bar: 148 },
  ];

  if (style === "stairs") {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {tiers.map((t, i) => (
          <div key={t.id} style={{
            display: "grid", gridTemplateColumns: "120px 1fr auto",
            alignItems: "center", gap: 16, padding: "14px 16px",
            marginLeft: i * 24,
            background: active === t.id ? t.color : "var(--card)",
            color: active === t.id ? "white" : "var(--text)",
            border: `1px solid ${active === t.id ? t.color : "var(--border)"}`,
            borderRadius: 10, transition: "all .25s ease",
          }}>
            <span className="mono" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".1em", opacity: .8 }}>
              Step {i + 1}
            </span>
            <span style={{ fontFamily: "Fraunces, serif", fontSize: 22, fontWeight: 600, letterSpacing: "-0.01em" }}>
              {t.label}
            </span>
            <span className="mono" style={{ fontSize: 13, opacity: .85 }}>{t.pct}% citation rate</span>
          </div>
        ))}
      </div>
    );
  }

  return (
    <div style={{
      background: "var(--card)", border: "1px solid var(--border)",
      borderRadius: 16, padding: "28px 26px 22px",
      boxShadow: "0 1px 0 rgba(0,0,0,0.02), 0 24px 48px -32px rgba(13,107,88,0.18)",
      position: "relative",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
        <span className="mono" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".12em", color: "var(--muted)" }}>
          The path to cited
        </span>
        <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>AI citation rate ↑</span>
      </div>
      <div style={{ fontFamily: "Fraunces, serif", fontSize: 19, fontWeight: 500, letterSpacing: "-0.01em", marginBottom: 22, color: "var(--text)", maxWidth: "32ch" }}>
        Your store can climb. <span style={{ color: "var(--muted)", fontStyle: "italic" }}>Here's what changes when it does.</span>
      </div>

      <div style={{ position: "relative", paddingTop: 20 }}>
        <svg viewBox="0 0 300 170" preserveAspectRatio="none" style={{
          position: "absolute", inset: 0, width: "100%", height: 170, pointerEvents: "none",
        }}>
          <defs>
            <linearGradient id="climbGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="var(--invisible)" stopOpacity="0.25" />
              <stop offset="50%" stopColor="var(--amber)" stopOpacity="0.7" />
              <stop offset="100%" stopColor="var(--teal)" stopOpacity="1" />
            </linearGradient>
            <marker id="climbArrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M0,0 L10,5 L0,10 z" fill="var(--teal)" />
            </marker>
          </defs>
          <path d="M 50 142 Q 110 128, 150 88 T 250 22" fill="none"
            stroke="url(#climbGrad)" strokeWidth="2" strokeLinecap="round"
            markerEnd="url(#climbArrow)" />
        </svg>

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
          alignItems: "end", gap: 18, height: 170, position: "relative",
        }}>
          {tiers.map((t, i) => {
            const isActive = active === t.id;
            const isDest = t.id === "cited";
            return (
              <div key={t.id} style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", height: "100%" }}>
                {!isDest && (
                  <div style={{ textAlign: "center", marginBottom: 8, height: 24 }}>
                    <span style={{ fontFamily: "Fraunces, serif", fontSize: 16, fontWeight: 600, color: t.color, letterSpacing: "-0.01em" }}>
                      {t.pct}%
                    </span>
                  </div>
                )}
                {isDest && <div style={{ height: 32 }} />}
                <div style={{
                  position: "relative", height: t.bar, width: "100%",
                  borderRadius: "10px 10px 4px 4px", background: t.color,
                  opacity: isActive ? 1 : isDest ? 1 : 0.55,
                  boxShadow: isDest ? `0 16px 36px -18px ${t.color}` : "none",
                  animation: animate ? `riseIn .9s ${i * 0.16}s cubic-bezier(.2,.7,.2,1) both` : "none",
                  transformOrigin: "bottom",
                }}>
                  {isDest && (
                    <>
                      <span style={{
                        position: "absolute", top: -30, left: "50%", transform: "translateX(-50%)",
                        background: "var(--teal)", color: "white",
                        fontFamily: "JetBrains Mono, monospace", fontSize: 10,
                        letterSpacing: ".1em", textTransform: "uppercase",
                        padding: "4px 8px", borderRadius: 4, whiteSpace: "nowrap",
                        boxShadow: "0 6px 18px -8px rgba(13,107,88,0.6)",
                      }}>← we take you here</span>
                      <span style={{
                        position: "absolute", top: 14, left: 0, right: 0,
                        textAlign: "center", fontFamily: "Fraunces, serif",
                        fontSize: 32, fontWeight: 600, color: "white",
                        letterSpacing: "-0.02em", lineHeight: 1,
                      }}>{t.pct}%</span>
                    </>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ height: 1, background: "var(--border)", marginTop: 0 }} />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18, paddingTop: 14 }}>
          {tiers.map((t) => (
            <div key={t.id}>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                fontFamily: "Fraunces, serif", fontSize: 17, fontWeight: 600,
                letterSpacing: "-0.01em",
                color: t.id === "cited" ? "var(--teal)" : "var(--text)",
              }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: t.color }} />
                {t.label}
              </div>
              <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 4, lineHeight: 1.4 }}>
                {t.microcopy}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        marginTop: 22, paddingTop: 14, borderTop: "1px dashed var(--border)",
        display: "flex", justifyContent: "space-between",
        fontSize: 12, color: "var(--muted)",
      }}>
        <span className="mono">Citation rate · cited stores in category</span>
        <span className="mono" style={{ color: "var(--teal)" }}>citedstore.com/method↗</span>
      </div>
    </div>
  );
};

window.Ladder = Ladder;