// roadmap.jsx — interactive learning trail visualization
// The "map" metaphor made literal: a winding path through the 7 study habilidades.

const ROADMAP_STAGES = [
  {
    id: "vocab",
    label: "Vocabulary",
    pt: "Vocabulário",
    week: "Semana 1",
    desc: "Como construir vocabulário ativo — não só decorar listas. Frequência, contexto e revisão espaçada.",
    accent: "orange",
  },
  {
    id: "grammar",
    label: "Grammar",
    pt: "Gramática",
    week: "Semana 1–2",
    desc: "Estudar gramática a serviço da comunicação. Quando aprofundar, quando deixar pra depois.",
    accent: "yellow",
  },
  {
    id: "listening",
    label: "Listening",
    pt: "Escuta",
    week: "Semana 2",
    desc: "Treinar o ouvido na velocidade real. Como escolher conteúdo no seu nível e avançar sem trancar.",
    accent: "blue",
  },
  {
    id: "reading",
    label: "Reading",
    pt: "Leitura",
    week: "Semana 3",
    desc: "Leitura extensiva vs intensiva. Como usar a leitura pra absorver gramática e vocabulário sem perceber.",
    accent: "orange",
  },
  {
    id: "speaking",
    label: "Speaking",
    pt: "Fala",
    week: "Semana 3",
    desc: "Falar sozinho sem se sentir bobo. Shadowing, autoexposição e como destravar a língua na prática.",
    accent: "yellow",
  },
  {
    id: "writing",
    label: "Writing",
    pt: "Escrita",
    week: "Semana 4",
    desc: "Escrever pra pensar em inglês. Diário, rotinas curtas e como usar a escrita como espelho do que falta.",
    accent: "blue",
  },
  {
    id: "pron",
    label: "Pronunciation",
    pt: "Pronúncia",
    week: "Semana 4",
    desc: "Sons que não existem em português, ritmo, conexão de palavras. O que treinar antes de gravar a voz.",
    accent: "orange",
  },
];

// Hand-drawn winding path connecting 7 nodes vertically.
// Viewbox is 320x880; nodes alternate left-right.
function RoadmapPath() {
  // Node positions (cx, cy) — alternating
  const nodes = [
    [80, 60],
    [240, 180],
    [80, 290],
    [240, 410],
    [80, 530],
    [240, 650],
    [160, 800],
  ];
  // Build a soft S-curve through them
  let d = `M ${nodes[0][0]} ${nodes[0][1]}`;
  for (let i = 1; i < nodes.length; i++) {
    const [x0, y0] = nodes[i - 1];
    const [x, y] = nodes[i];
    const cy0 = y0 + (y - y0) * 0.55;
    const cy1 = y - (y - y0) * 0.45;
    d += ` C ${x0} ${cy0}, ${x} ${cy1}, ${x} ${y}`;
  }
  return { d, nodes };
}

function Roadmap() {
  const [active, setActive] = React.useState(0);
  const { d, nodes } = RoadmapPath();

  const accentColor = (a) => {
    if (a === "yellow") return "var(--yellow)";
    if (a === "blue") return "var(--blue)";
    return "var(--orange)";
  };

  return (
    <div className="roadmap">
      <div className="roadmap-svg-wrap">
        <svg viewBox="0 0 320 880" className="roadmap-svg" aria-hidden="true">
          <defs>
            <pattern id="dotpath" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
              <circle cx="4" cy="4" r="1.2" fill="var(--ink)" opacity="0.25" />
            </pattern>
          </defs>
          {/* Dashed path background */}
          <path
            d={d}
            fill="none"
            stroke="var(--ink)"
            strokeWidth="2"
            strokeLinecap="round"
            strokeDasharray="2 9"
            opacity="0.35"
          />
          {/* Progress overlay — solid up to active */}
          <path
            d={d}
            fill="none"
            stroke="var(--primary)"
            strokeWidth="3"
            strokeLinecap="round"
            className="roadmap-progress"
            style={{ "--prog": `${((active + 0.5) / nodes.length) * 100}%` }}
          />
        </svg>
        {/* Nodes overlayed as buttons */}
        {ROADMAP_STAGES.map((s, i) => {
          const [cx, cy] = nodes[i];
          const isActive = i === active;
          return (
            <button
              key={s.id}
              className={`roadmap-node ${isActive ? "active" : ""}`}
              style={{
                left: `${(cx / 320) * 100}%`,
                top: `${(cy / 880) * 100}%`,
                "--node-color": accentColor(s.accent),
              }}
              onClick={() => setActive(i)}
              aria-label={`Etapa ${i + 1}: ${s.label}`}
            >
              <span className="roadmap-node-dot">
                <span className="roadmap-node-num">{i + 1}</span>
              </span>
              <span className="roadmap-node-label">{s.label}</span>
            </button>
          );
        })}
      </div>

      <div className="roadmap-detail">
        <div className="roadmap-detail-eyebrow">
          <span>Etapa {active + 1} de {ROADMAP_STAGES.length}</span>
          <span className="roadmap-detail-week">{ROADMAP_STAGES[active].week}</span>
        </div>
        <h3 className="serif">
          {ROADMAP_STAGES[active].label}
          <span className="roadmap-pt"> · {ROADMAP_STAGES[active].pt}</span>
        </h3>
        <p>{ROADMAP_STAGES[active].desc}</p>
        <div className="roadmap-nav">
          <button
            className="roadmap-arrow"
            onClick={() => setActive((a) => Math.max(0, a - 1))}
            disabled={active === 0}
            aria-label="Etapa anterior"
          >
            ←
          </button>
          <div className="roadmap-bullets">
            {ROADMAP_STAGES.map((_, i) => (
              <button
                key={i}
                className={`bullet ${i === active ? "on" : ""}`}
                onClick={() => setActive(i)}
                aria-label={`Ir para etapa ${i + 1}`}
              />
            ))}
          </div>
          <button
            className="roadmap-arrow"
            onClick={() => setActive((a) => Math.min(ROADMAP_STAGES.length - 1, a + 1))}
            disabled={active === ROADMAP_STAGES.length - 1}
            aria-label="Próxima etapa"
          >
            →
          </button>
        </div>
      </div>

      <style>{`
        .roadmap {
          margin-top: 28px;
          position: relative;
        }
        .roadmap-svg-wrap {
          position: relative;
          width: 100%;
          aspect-ratio: 320 / 880;
          margin-bottom: 24px;
        }
        .roadmap-svg {
          width: 100%;
          height: 100%;
          display: block;
        }
        .roadmap-progress {
          stroke-dasharray: 1500;
          stroke-dashoffset: calc(1500 - (1500 * var(--prog, 0%) / 100%));
          transition: stroke-dashoffset 0.6s cubic-bezier(.2,.7,.2,1);
          filter: drop-shadow(0 2px 0 rgba(0,0,0,0.04));
        }
        .roadmap-node {
          position: absolute;
          transform: translate(-50%, -50%);
          background: transparent;
          border: 0;
          padding: 0;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          font-family: var(--f-sans);
        }
        .roadmap-node-dot {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          background: var(--bg);
          border: 2.4px solid var(--ink);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
          box-shadow: 0 2px 0 var(--ink);
        }
        .roadmap-node.active .roadmap-node-dot {
          background: var(--node-color, var(--primary));
          transform: scale(1.15);
          box-shadow: 0 3px 0 var(--ink), 0 0 0 6px color-mix(in oklch, var(--node-color, var(--primary)) 18%, transparent);
        }
        .roadmap-node-num {
          font-family: var(--f-serif);
          font-weight: 700;
          font-size: 16px;
          color: var(--ink);
        }
        .roadmap-node.active .roadmap-node-num {
          color: var(--ink);
        }
        .roadmap-node-label {
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.02em;
          color: var(--ink-2);
          background: var(--bg);
          padding: 3px 8px;
          border-radius: 999px;
          border: 1px solid var(--line);
          white-space: nowrap;
          transition: all 0.2s ease;
        }
        .roadmap-node.active .roadmap-node-label {
          background: var(--ink);
          color: var(--bg);
          border-color: var(--ink);
        }
        .roadmap-node:hover:not(.active) .roadmap-node-dot {
          transform: scale(1.08);
        }

        .roadmap-detail {
          background: var(--bg);
          border: 1px solid var(--line);
          border-radius: var(--r-lg);
          padding: 22px;
          position: relative;
        }
        .roadmap-detail-eyebrow {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--ink-3);
        }
        .roadmap-detail-week {
          color: var(--primary);
        }
        .roadmap-detail h3 {
          font-size: 26px;
          margin: 10px 0 8px;
          letter-spacing: -0.018em;
          font-weight: 600;
        }
        .roadmap-pt {
          color: var(--ink-3);
          font-weight: 400;
          font-style: italic;
        }
        .roadmap-detail p {
          margin: 0;
          font-size: 15px;
          line-height: 1.5;
          color: var(--ink-2);
        }
        .roadmap-nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
          padding-top: 16px;
          border-top: 1px dashed var(--line);
        }
        .roadmap-arrow {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: var(--bg-2);
          border: 1px solid var(--line);
          color: var(--ink);
          font-size: 18px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.15s ease;
        }
        .roadmap-arrow:hover:not(:disabled) {
          background: var(--ink);
          color: var(--bg);
          border-color: var(--ink);
        }
        .roadmap-arrow:disabled {
          opacity: 0.3;
          cursor: not-allowed;
        }
        .roadmap-bullets {
          display: flex;
          gap: 6px;
        }
        .bullet {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: var(--line);
          border: 0;
          padding: 0;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        .bullet.on {
          background: var(--primary);
          width: 22px;
          border-radius: 999px;
        }
      `}</style>
    </div>
  );
}

window.Roadmap = Roadmap;
window.ROADMAP_STAGES = ROADMAP_STAGES;