/* global React */
const { useState: useStateOPV } = React;

function MethodOPV() {
  const [active, setActive] = useStateOPV(0);

  const stages = [
    {
      letter: "O",
      label: "Oportunidade",
      tagline: "Atrair os pacientes certos e fortalecer percepção premium.",
      items: [
        "Posicionamento estratégico",
        "Instagram que gera autoridade",
        "Conteúdo que vende confiança",
        "Tráfego qualificado",
        "Presença digital local",
      ],
    },
    {
      letter: "P",
      label: "Processo",
      tagline: "Transformar interesse em avaliação agendada.",
      items: [
        "Atendimento no WhatsApp",
        "Follow-up estruturado",
        "Jornada comercial mapeada",
        "Scripts de conversão",
        "Time preparado",
      ],
    },
    {
      letter: "V",
      label: "Venda",
      tagline: "Converter com valor percebido alto e margem saudável.",
      items: [
        "Venda consultiva",
        "Protocolos premium",
        "Ticket médio maior",
        "Negociação sem depender de desconto",
        "Pós-venda e recorrência",
      ],
    },
  ];

  return (
    <section id="metodo" style={{ background: "var(--bg-canvas)" }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow-tag" style={{ marginBottom: 20 }}>
            <span className="dot" />
            Nosso método
          </span>
          <h2>
            <span className="accent">Método OPV™</span><br />
            Oportunidade · Processo · Venda.
          </h2>
          <p className="lede">
            Uma metodologia criada para clínicas de estética crescerem com
            previsibilidade — atuando na jornada completa do paciente, da
            primeira impressão à recompra e indicação.
          </p>
        </div>

        {/* Tabs */}
        <div style={{
          display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 32,
        }}>
          {stages.map((s, i) => (
            <button
              key={s.letter}
              onClick={() => setActive(i)}
              style={{
                padding: "12px 20px",
                borderRadius: 999,
                border: "1px solid",
                borderColor: active === i ? "var(--brand-violet)" : "var(--border-subtle)",
                background: active === i ? "var(--brand-violet)" : "#fff",
                color: active === i ? "#fff" : "var(--fg-secondary)",
                fontFamily: "var(--font-body)",
                fontWeight: 500,
                fontSize: 14,
                cursor: "pointer",
                transition: "all 200ms cubic-bezier(0.2,0,0,1)",
                display: "inline-flex", alignItems: "center", gap: 10,
              }}
            >
              <span style={{
                fontFamily: "var(--font-display)",
                fontWeight: 700,
                fontSize: 13,
                width: 22, height: 22, borderRadius: 999,
                background: active === i ? "rgba(255,255,255,0.2)" : "var(--ink-100)",
                color: active === i ? "#fff" : "var(--brand-violet)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
              }}>
                {s.letter}
              </span>
              {s.label}
            </button>
          ))}
        </div>

        {/* Three columns of cards */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 1,
          background: "var(--border-subtle)",
          border: "1px solid var(--border-subtle)",
          borderRadius: 24,
          overflow: "hidden",
        }} className="opv-grid">
          {stages.map((s, i) => {
            const isActive = active === i;
            return (
              <div
                key={s.letter}
                onClick={() => setActive(i)}
                style={{
                  background: isActive ? "var(--ink-900)" : "#fff",
                  color: isActive ? "#fff" : "var(--fg-primary)",
                  padding: 40,
                  cursor: "pointer",
                  position: "relative",
                  overflow: "hidden",
                  transition: "background 320ms cubic-bezier(0.2,0,0,1), color 320ms",
                  minHeight: 460,
                }}
              >
                {isActive && (
                  <div aria-hidden="true" style={{
                    position: "absolute", inset: 0,
                    background: "radial-gradient(ellipse at 100% 0%, rgba(64,13,166,0.55), transparent 60%)",
                    pointerEvents: "none",
                  }} />
                )}
                <div style={{ position: "relative" }}>
                  <div style={{
                    display: "flex", alignItems: "baseline", justifyContent: "space-between",
                    marginBottom: 28,
                  }}>
                    <div style={{
                      fontFamily: "var(--font-display)",
                      fontWeight: 700,
                      fontSize: 96, lineHeight: 0.9,
                      letterSpacing: "-0.04em",
                      color: isActive ? "#fff" : "var(--ink-200)",
                      transition: "color 320ms",
                    }}>
                      {s.letter}
                    </div>
                    <div style={{
                      fontFamily: "var(--font-display)",
                      fontWeight: 500,
                      fontSize: 12,
                      letterSpacing: "0.16em",
                      textTransform: "uppercase",
                      color: isActive ? "var(--brand-violet-300)" : "var(--fg-tertiary)",
                      fontVariantNumeric: "tabular-nums",
                    }}>
                      0{i + 1} / 03
                    </div>
                  </div>

                  <h3 style={{
                    fontFamily: "var(--font-display)",
                    fontWeight: 600,
                    fontSize: 28, lineHeight: 1.1, letterSpacing: "-0.01em",
                    color: isActive ? "#fff" : "var(--fg-primary)",
                    margin: "0 0 12px",
                  }}>
                    {s.label}
                  </h3>
                  <p style={{
                    color: isActive ? "rgba(255,255,255,0.7)" : "var(--fg-secondary)",
                    fontSize: 15, lineHeight: 1.55,
                    margin: "0 0 24px",
                    minHeight: 48,
                  }}>
                    {s.tagline}
                  </p>

                  <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                    {s.items.map((it) => (
                      <li key={it} style={{
                        display: "flex", alignItems: "center", gap: 12,
                        padding: "10px 0",
                        borderTop: `1px solid ${isActive ? "rgba(255,255,255,0.1)" : "var(--border-subtle)"}`,
                        color: isActive ? "rgba(255,255,255,0.92)" : "var(--fg-primary)",
                        fontSize: 14,
                      }}>
                        <span style={{
                          width: 4, height: 4, borderRadius: 999,
                          background: isActive ? "var(--brand-violet-300)" : "var(--brand-violet)",
                        }} />
                        {it}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            );
          })}
        </div>

        <style>{`
          @media (max-width: 980px) {
            .opv-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.MethodOPV = MethodOPV;