// FOUR HURDLES, tab stepper + survival chart + detail panel
//
// Illustrative funnel, orientation, not a census. Percentages show how many
// career-focused producers are still in the game at each stage.

const HURDLE_COHORT = 1_000_000;

const HURDLES = [
  {
    n: "01",
    pct: 92,
    tab: "Talent",
    label: "Most reach here",
    title: "Get good at making music",
    body: "You spend years getting good. That's the bare minimum. Plenty of producers can make something good. That still doesn't mean anyone's hearing it, or paying you.",
  },
  {
    n: "02",
    pct: 28,
    tab: "Attention",
    label: "Some break through",
    title: "Get in front of the right artists",
    body: "Most producers send beats into the void and pray. The ones who land placements build relationships on purpose. They know which artist they're trying to reach.",
  },
  {
    n: "03",
    pct: 9,
    tab: "Release",
    label: "Few land it",
    title: "Land a record that actually comes out",
    body: "Your beat might get used in a session. That is not a release. Records get shelved, pushed back, leaked, killed. Your name on something that actually comes out is a different fight.",
  },
  {
    n: "04",
    pct: 2,
    tab: "Payment",
    label: "Almost nobody",
    title: "Get paid, not just credited",
    body: "You can have a Spotify credit and an empty bank account. No paperwork means no payment. Hire an entertainment lawyer before you need them.",
  },
];

const HURDLE_METHODOLOGY =
  "These numbers are a directional model, not a research paper. We started with roughly 1 million career-focused producers, people trying to make a living from production, not hobbyists uploading their own music. The percentages come from how the industry actually behaves: attrition at each stage, how few credits turn into releases, and how few releases turn into real income. We looked at credited work across singles and albums (Billboard Hot 100, Billboard 200, and the long tail below that), talked to working producers, and rounded to something you can actually remember. If you want to argue the exact math, you've missed the point, the shape of the funnel is what matters.";

function Hurdles() {
  const [active, setActive] = React.useState(0);
  const [showMethod, setShowMethod] = React.useState(false);

  return (
    <section className="section tight" id="hurdles">
      <div className="page">
        <div className="grid-12" style={{ alignItems: "end", marginBottom: 24 }}>
          <div style={{ gridColumn: "span 1" }} className="hide-mobile">
            <span className="vert">FEATURE · 04 HURDLES</span>
          </div>
          <div style={{ gridColumn: "span 7" }}>
            <span className="eyebrow">The Real Path</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Four hurdles explained
            </h2>
          </div>
          <div style={{ gridColumn: "span 4" }}>
            <p className="lede">
              Most producers clear the first hurdle. Almost none have a map for the last three. That's the difference between having a moment or having a 10+ year career.
            </p>
          </div>
        </div>

        <HurdlesTabs
          active={active}
          setActive={setActive}
          showMethod={showMethod}
          setShowMethod={setShowMethod}
        />
      </div>
    </section>
  );
}



function HurdlesChart({ active, setActive }) {
  const maxPct = HURDLES[0].pct;

  return (
    <div className="hurdle-a-chart">
      <div className="hurdle-a-chart-head caption">
        <span>Fig. 01 · Survival rate by hurdle</span>
        <span>Modeled on 1 million career-focused producers</span>
      </div>

      <div className="hurdle-a-chart-bars" role="tablist" aria-label="Four hurdles">
        {HURDLES.map((h, i) => {
          const isActive = active === i;
          const isLast = i === HURDLES.length - 1;
          const barH = Math.max(12, (h.pct / maxPct) * 100);
          const people = Math.round((h.pct / 100) * HURDLE_COHORT);

          return (
            <button
              key={h.n}
              type="button"
              role="tab"
              aria-selected={isActive}
              className={`hurdle-a-chart-col ${isActive ? "active" : ""} ${isLast ? "last" : ""}`}
              onClick={() => setActive(i)}
              aria-label={`${h.n} ${h.tab}: ${h.pct}%, ${h.title}`}
            >
              <span className="hurdle-a-chart-tab">
                <span className="hurdle-a-chart-n">{h.n}</span>
                {h.tab}
              </span>
              <div className="hurdle-a-chart-pct-wrap">
                <span className="hurdle-a-chart-pct">
                  {h.pct}<span className="hurdle-a-chart-pct-suffix">%</span>
                </span>
                <span className="hurdle-a-chart-people">~{(people / 1000).toFixed(people >= 10000 ? 0 : 1)}k</span>
              </div>
              <div className="hurdle-a-chart-bar-track">
                <div
                  className="hurdle-a-chart-bar-fill"
                  style={{ height: `${barH}%` }}
                />
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}


function HurdlesTabs({ active, setActive, showMethod, setShowMethod }) {
  const h = HURDLES[active];
  const isLast = active === HURDLES.length - 1;

  return (
    <div className="hurdle-a">
      <HurdlesChart active={active} setActive={setActive} />

      <div className="hurdle-a-panel" role="tabpanel">
        <div className="hurdle-a-panel-head">
          <div>
            <span className="caption">{h.label}</span>
            <h3 className="kicker" style={{ margin: "12px 0 0" }}>{h.title}</h3>
          </div>
          <span className="hurdle-a-panel-numeral" style={{ color: isLast ? "var(--gold)" : "var(--ink-4)" }}>
            {h.n}
          </span>
        </div>
        <div className="hurdle-a-panel-body">
          <p className="hurdle-a-panel-copy">{h.body}</p>
          <HurdleViz n={h.n} pct={h.pct} tab={h.tab} />
        </div>
        <div className="hurdle-a-nav">
          <button
            type="button"
            className="btn btn-ghost"
            disabled={active === 0}
            onClick={() => setActive(active - 1)}
            style={{ opacity: active === 0 ? 0.35 : 1 }}
          >
            ← Previous
          </button>
          <span className="caption">{active + 1} / {HURDLES.length}</span>
          <button
            type="button"
            className="btn btn-ghost"
            disabled={active === HURDLES.length - 1}
            onClick={() => setActive(active + 1)}
            style={{ opacity: active === HURDLES.length - 1 ? 0.35 : 1 }}
          >
            Next →
          </button>
        </div>
      </div>

      <div className="hurdle-a-method">
        <button
          type="button"
          className="hurdle-a-method-toggle caption"
          onClick={() => setShowMethod(!showMethod)}
          aria-expanded={showMethod}
        >
          {showMethod ? "▾" : "▸"} About these numbers
        </button>
        {showMethod && (
          <div className="hurdle-a-method-body">
            <p className="body-text" style={{ fontSize: 14, lineHeight: 1.6, margin: 0, color: "var(--ink-2)" }}>
              {HURDLE_METHODOLOGY}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

window.Hurdles = Hurdles;

// ---- Inline panel visualizations ----

function HurdleViz({ n, pct, tab }) {
  const viz = {
    "01": VizTalent,
    "02": VizAttention,
    "03": VizRelease,
    "04": VizPayment,
  }[n];
  if (!viz) return null;
  const Viz = viz;
  return (
    <aside className="hurdle-viz" aria-label={`Visualization for hurdle ${n}`}>
      <span className="caption hurdle-viz-label">Fig. {n} · {tab}</span>
      <Viz pct={pct} />
    </aside>
  );
}

function VizSvg({ ariaLabel, children }) {
  return (
    <svg viewBox="0 0 280 160" className="hurdle-viz-svg" role="img" aria-label={ariaLabel}>
      <rect x="0" y="0" width="280" height="160" fill="rgba(255,255,255,0.02)" stroke="var(--rule-strong)" />
      {children}
    </svg>
  );
}

function VizTalent() {
  const skillSteps = [
    { label: "Practice", fill: 1 },
    { label: "Ear", fill: 1 },
    { label: "Sound", fill: 1, done: true },
  ];
  const careerSteps = [
    { label: "Attention", fill: 0.08 },
    { label: "Release", fill: 0.04 },
    { label: "Payment", fill: 0.02 },
  ];
  const barW = 88;
  const barH = 8;

  return (
    <VizSvg ariaLabel="Skill development fills quickly, career path is still ahead">
      <text x="70" y="16" textAnchor="middle" className="hurdle-viz-caption">MAKING MUSIC</text>
      <text x="210" y="16" textAnchor="middle" className="hurdle-viz-caption">BUILDING A CAREER</text>
      <line x1="140" y1="22" x2="140" y2="132" stroke="var(--rule)" strokeWidth="1" />

      {skillSteps.map((s, i) => {
        const y = 34 + i * 28;
        return (
          <g key={s.label}>
            <text x="16" y={y} fill="var(--ink-3)" fontFamily="var(--mono)" fontSize="7">{s.label.toUpperCase()}</text>
            <rect x="16" y={y + 6} width={barW} height={barH} fill="rgba(255,255,255,0.04)" stroke="var(--rule)" />
            <rect x="16" y={y + 6} width={barW * s.fill} height={barH} fill="var(--gold)" opacity="0.85" />
            {s.done && (
              <text x={16 + barW + 8} y={y + 13} fill="var(--gold)" fontFamily="var(--mono)" fontSize="9">✓</text>
            )}
          </g>
        );
      })}

      {careerSteps.map((s, i) => {
        const y = 34 + i * 28;
        return (
          <g key={s.label}>
            <text x="156" y={y} fill="var(--ink-3)" fontFamily="var(--mono)" fontSize="7">{s.label.toUpperCase()}</text>
            <rect x="156" y={y + 6} width={barW} height={barH} fill="rgba(255,255,255,0.04)" stroke="var(--rule)" />
            <rect x="156" y={y + 6} width={Math.max(4, barW * s.fill)} height={barH} fill="var(--ink-4)" opacity="0.5" />
          </g>
        );
      })}

      <rect x="12" y="118" width="116" height="22" fill="rgba(212,166,74,0.12)" stroke="var(--gold)" />
      <text x="70" y="133" textAnchor="middle" fill="var(--gold)" fontFamily="var(--mono)" fontSize="7.5" letterSpacing="0.6">FLOOR CLEARED</text>
      <rect x="152" y="118" width="116" height="22" fill="rgba(255,255,255,0.02)" stroke="var(--rule-strong)" strokeDasharray="3 3" />
      <text x="210" y="133" textAnchor="middle" fill="var(--ink-3)" fontFamily="var(--mono)" fontSize="7.5" letterSpacing="0.6">STILL AHEAD</text>
      <text x="140" y="152" textAnchor="middle" fill="var(--ink-3)" fontFamily="var(--mono)" fontSize="8" letterSpacing="0.8">
        GOOD AT MUSIC ≠ BUILDING A CAREER
      </text>
    </VizSvg>
  );
}

function VizAttention() {
  return (
    <VizSvg ariaLabel="Random outreach versus targeted positioning">
      <text x="70" y="16" textAnchor="middle" className="hurdle-viz-caption">RANDOM</text>
      <text x="210" y="16" textAnchor="middle" className="hurdle-viz-caption">INTENTIONAL</text>
      <line x1="140" y1="22" x2="140" y2="148" stroke="var(--rule)" strokeWidth="1" />
      {[24, 48, 72, 96, 120].map((y) => (
        <g key={y} opacity="0.7">
          <circle cx="28" cy={y} r="5" fill="var(--ink-3)" />
          <line x1="33" y1={y} x2={95 + (y % 3) * 18} y2={y + (y % 2 ? 14 : -14)} stroke="var(--ink-4)" strokeWidth="1" strokeDasharray="3 3" />
          <text x={100 + (y % 3) * 18} y={y + (y % 2 ? 18 : -10)} fill="#8a3030" fontFamily="var(--mono)" fontSize="10">✕</text>
        </g>
      ))}
      <circle cx="170" cy="80" r="8" fill="var(--gold)" opacity="0.9" />
      <text x="170" y="84" textAnchor="middle" fill="#16110a" fontFamily="var(--sans)" fontSize="8" fontWeight="700">YOU</text>
      <line x1="178" y1="80" x2="248" y2="52" stroke="var(--gold)" strokeWidth="2" />
      <rect x="228" y="38" width="44" height="28" fill="rgba(212,166,74,0.15)" stroke="var(--gold)" />
      <text x="250" y="56" textAnchor="middle" fill="var(--gold)" fontFamily="var(--mono)" fontSize="7" letterSpacing="0.6">ARTIST</text>
      <text x="70" y="148" textAnchor="middle" fill="var(--ink-3)" fontFamily="var(--mono)" fontSize="8">HOPE IS NOT A STRATEGY</text>
      <text x="210" y="148" textAnchor="middle" fill="var(--gold)" fontFamily="var(--mono)" fontSize="8">RIGHT ROOM · RIGHT PERSON</text>
    </VizSvg>
  );
}

function VizRelease() {
  const shelved = [
    { label: "SHELVED", x: 168 },
    { label: "DELAYED", x: 208 },
    { label: "LEAKED", x: 248 },
  ];
  return (
    <VizSvg ariaLabel="Most used beats never become released records">
      <text x="140" y="16" textAnchor="middle" className="hurdle-viz-caption">BEAT USED ≠ RECORD OUT</text>
      <rect x="100" y="28" width="80" height="24" fill="rgba(255,255,255,0.04)" stroke="var(--rule-strong)" />
      <text x="140" y="44" textAnchor="middle" fill="var(--ink-2)" fontFamily="var(--mono)" fontSize="8">10 BEATS USED</text>
      <line x1="140" y1="52" x2="140" y2="68" stroke="var(--ink-3)" strokeWidth="1.5" />
      <line x1="60" y1="68" x2="220" y2="68" stroke="var(--ink-3)" strokeWidth="1.5" />
      <line x1="80" y1="68" x2="80" y2="88" stroke="var(--gold)" strokeWidth="2" />
      {shelved.map((s) => (
        <g key={s.label}>
          <line x1={s.x} y1="68" x2={s.x} y2="88" stroke="#8a3030" strokeWidth="1" strokeDasharray="2 2" />
          <rect x={s.x - 18} y="88" width="36" height="22" fill="rgba(138,48,48,0.12)" stroke="#8a3030" strokeOpacity="0.6" />
          <text x={s.x} y="102" textAnchor="middle" fill="#b06060" fontFamily="var(--mono)" fontSize="6.5" letterSpacing="0.4">{s.label}</text>
        </g>
      ))}
      <rect x="62" y="88" width="36" height="22" fill="rgba(212,166,74,0.18)" stroke="var(--gold)" />
      <text x="80" y="102" textAnchor="middle" fill="var(--gold)" fontFamily="var(--mono)" fontSize="7">OUT</text>
      <text x="80" y="128" textAnchor="middle" fill="var(--gold)" fontFamily="var(--sans)" fontWeight="700" fontSize="18">2</text>
      <text x="208" y="128" textAnchor="middle" fill="var(--ink-3)" fontFamily="var(--sans)" fontWeight="700" fontSize="18">8</text>
      <text x="80" y="142" textAnchor="middle" fill="var(--ink-3)" fontFamily="var(--mono)" fontSize="7">RELEASED</text>
      <text x="208" y="142" textAnchor="middle" fill="var(--ink-3)" fontFamily="var(--mono)" fontSize="7">NEVER CAME OUT</text>
    </VizSvg>
  );
}

function VizPayment() {
  return (
    <VizSvg ariaLabel="Credit without payment versus full compensation">
      <text x="70" y="16" textAnchor="middle" className="hurdle-viz-caption">NO PAPERWORK</text>
      <text x="210" y="16" textAnchor="middle" className="hurdle-viz-caption">PAPERWORK DONE</text>
      <line x1="140" y1="22" x2="140" y2="148" stroke="var(--rule)" strokeWidth="1" />
      {[
        { y: 36, label: "Spotify credit", ok: true },
        { y: 62, label: "Producer fee", ok: false },
        { y: 88, label: "Master points", ok: false },
        { y: 114, label: "Publishing", ok: false },
      ].map((row) => (
        <g key={row.label}>
          <text x="16" y={row.y} fill="var(--ink-3)" fontFamily="var(--mono)" fontSize="7">{row.label.toUpperCase()}</text>
          <text x="124" y={row.y} textAnchor="end" fill={row.ok ? "var(--gold)" : "#8a3030"} fontFamily="var(--mono)" fontSize="9">
            {row.ok ? "✓" : "$0"}
          </text>
          <text x="156" y={row.y} fill="var(--ink-3)" fontFamily="var(--mono)" fontSize="7">{row.label.toUpperCase()}</text>
          <text x="264" y={row.y} textAnchor="end" fill="var(--gold)" fontFamily="var(--mono)" fontSize="9">✓</text>
        </g>
      ))}
      <rect x="20" y="126" width="100" height="22" fill="rgba(138,48,48,0.1)" stroke="#8a3030" strokeOpacity="0.5" />
      <text x="70" y="141" textAnchor="middle" fill="#b06060" fontFamily="var(--mono)" fontSize="8">BANK: $0</text>
      <rect x="160" y="126" width="100" height="22" fill="rgba(212,166,74,0.15)" stroke="var(--gold)" />
      <text x="210" y="141" textAnchor="middle" fill="var(--gold)" fontFamily="var(--mono)" fontSize="8">BANK: PAID</text>
    </VizSvg>
  );
}