/* global React */

function Journey() {
  const stages = ["Conhecer", "Gostar", "Confiar", "Agendar", "Comprar", "Retornar", "Indicar"];
  return (
    <section id="jornada" style={{ background: "var(--brand-violet-50)" }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow-tag" style={{ marginBottom: 20 }}>
            <span className="dot" />
            Jornada do paciente
          </span>
          <h2>
            Clínicas lucrativas <span className="accent">dominam todas as etapas</span>.
          </h2>
          <p className="lede">
            Quando uma etapa falha, o faturamento sente. Mapeamos do primeiro
            clique ao protocolo recorrente — sem achismo, sem fórmula pronta.
          </p>
        </div>

        {/* Flow */}
        <div style={{
          background: "#fff",
          border: "1px solid var(--border-subtle)",
          borderRadius: 24,
          padding: 40,
        }}>
          <div className="journey-flow" style={{
            display: "grid",
            gridTemplateColumns: `repeat(${stages.length}, 1fr)`,
            alignItems: "start",
            position: "relative",
          }}>
            {stages.map((st, i) => {
              const active = i < 4;
              const nextActive = i + 1 < 4; // segment between i and i+1 fully active when both active
              return (
                <div key={st} className="journey-step" style={{
                  position: "relative",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                }}>
                  {/* Segment line to the right of the bubble — sits behind */}
                  {i < stages.length - 1 && (
                    <span aria-hidden="true" className="journey-seg" style={{
                      position: "absolute",
                      top: 28, // half of bubble (56/2)
                      left: "calc(50% + 28px)",
                      right: "calc(-50% + 28px)",
                      height: 2,
                      background: nextActive ? "var(--brand-violet)" : "var(--brand-violet-100)",
                      zIndex: 0,
                    }} />
                  )}
                  <div style={{
                    width: 56, height: 56, borderRadius: 999,
                    background: active ? "var(--brand-violet)" : "var(--brand-violet-50)",
                    border: active ? "none" : "1px solid var(--brand-violet-100)",
                    color: active ? "#fff" : "var(--brand-violet)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    fontFamily: "var(--font-display)",
                    fontWeight: 600, fontSize: 18,
                    position: "relative",
                    zIndex: 1,
                  }}>
                    {String(i + 1).padStart(2, "0")}
                  </div>
                  <div style={{
                    marginTop: 16,
                    fontFamily: "var(--font-display)",
                    fontWeight: 600,
                    fontSize: 16,
                    color: "var(--fg-primary)",
                  }}>
                    {st}
                  </div>
                </div>
              );
            })}
          </div>

          <div style={{
            marginTop: 48,
            paddingTop: 32,
            borderTop: "1px solid var(--border-subtle)",
            display: "grid",
            gridTemplateColumns: "1fr 1fr 1fr",
            gap: 24,
          }} className="journey-summary">
            {[
              { k: "Topo", v: "Atrair pacientes certos com posicionamento premium." },
              { k: "Meio", v: "Converter interesse em avaliação com método comercial." },
              { k: "Fundo", v: "Reter, recomprar e gerar indicação consistente." },
            ].map((it) => (
              <div key={it.k}>
                <div style={{
                  fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
                  color: "var(--fg-tertiary)", marginBottom: 10,
                }}>
                  {it.k} de funil
                </div>
                <div style={{ color: "var(--fg-primary)", fontSize: 15, lineHeight: 1.5 }}>
                  {it.v}
                </div>
              </div>
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .journey-flow { grid-template-columns: repeat(2, 1fr) !important; row-gap: 32px !important; }
            .journey-flow .journey-seg { display: none !important; }
            .journey-summary { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.Journey = Journey;