function CaminoCircle({ size, featured }) {
  // Three concentric / orbital rings — abstract, premium-consultor not techy
  const stroke = featured ? "var(--accent)" : "var(--ink-mute)";
  const fill = featured ? "var(--accent)" : "var(--ink-dim)";
  return (
    <svg viewBox="0 0 120 120">
      <defs>
        <radialGradient id={`grad-${size}`} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={featured ? "var(--accent)" : "var(--ink)"} stopOpacity={featured ? 0.35 : 0.08} />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
      </defs>
      <circle cx="60" cy="60" r="55" fill={`url(#grad-${size})`} />
      {size >= 1 && <circle cx="60" cy="60" r="38" fill="none" stroke={stroke} strokeWidth="0.7" strokeDasharray="2 3" />}
      {size >= 2 && <circle cx="60" cy="60" r="26" fill="none" stroke={stroke} strokeWidth="0.7" />}
      {size >= 3 && <circle cx="60" cy="60" r="14" fill={fill} opacity={featured ? 0.9 : 0.6} />}
      {/* orbit dots */}
      <circle cx="60" cy="22" r="2" fill={stroke} />
      {size >= 2 && <circle cx="86" cy="60" r="2" fill={stroke} />}
      {size >= 3 && <circle cx="34" cy="60" r="2" fill={stroke} />}
    </svg>
  );
}

function Caminos() {
  const caminos = [
    {
      level: "Camino 01",
      size: 1,
      title: "Módulos individuales",
      blurb: "Para quien quiere empezar con una sola pieza. CRM, pauta o SEO — eliges la que más te duele.",
      from: "$179",
      unit: "/mes",
      foot: "1,000+ créditos · Setup incluido",
      cta: "Ver módulos",
      ideal: "DIY · Self-serve",
      href: "#modulos",
    },
    {
      level: "Camino 02 — Más popular",
      size: 3,
      title: "Suite Tessa completa",
      blurb: "Toda la plataforma de IA trabajando en conjunto. CRM, Performance, Content, SEO y RRHH conectados.",
      from: "$699",
      unit: "/mes",
      foot: "5,500 créditos · Setup $499 una vez",
      cta: "Ver suite",
      ideal: "Powered · IA + tu equipo",
      featured: true,
      href: "#suite",
    },
    {
      level: "Camino 03",
      size: 2,
      title: "Agencia Full Service",
      blurb: "Nuestro equipo + plataforma + estrategia ejecutada por humanos expertos. Para quien delega todo.",
      from: "$2,500",
      unit: "/mes",
      foot: "Créditos sin límite · Gestionados por equipo",
      cta: "Hablar con asesor",
      ideal: "Done-for-you · Premium",
      href: "https://agencia.teamsolutionss.com/book/team/teamsolutions-agencia-evaluacion",
      external: true,
    },
  ];

  return (
    <section className="shell" id="caminos">
      <SectionLabel num="02 / Portafolio" label="Tres caminos para trabajar con nosotros" right="Elige el tuyo" />

      <div className="caminos-intro">
        <h2 className="h-section" style={{ maxWidth: "18ch" }}>
          Tres presupuestos. <br />
          Una <span className="italic" style={{ color: "var(--accent)" }}>misma infraestructura.</span>
        </h2>
        <p className="lede">
          Cada visitante se reconoce y baja por su carril. Empieza con un módulo,
          activa la suite cuando crezcas, contrata equipo cuando quieras delegar.
          La data y el setup viajan contigo.
        </p>
      </div>

      <div className="caminos-grid">
        {caminos.map((c) => (
          <article key={c.title} className={`camino ${c.featured ? "featured" : ""}`}>
            {c.featured && <span className="featured-badge">Más popular</span>}
            <div className="level">{c.level}</div>
            <div className="camino-circle">
              <CaminoCircle size={c.size} featured={c.featured} />
            </div>
            <h3>{c.title}</h3>
            <p className="blurb">{c.blurb}</p>
            <div className="price">
              <span className="from">desde</span>
              <span className="num">{c.from}</span>
              <span style={{ color: "var(--ink-mute)" }}>{c.unit}</span>
            </div>
            {c.foot && <div className="camino-foot-credits">{c.foot}</div>}
            <div className="camino-ideal">{c.ideal}</div>
            <a
              href={c.href}
              {...(c.external ? { target: "_blank", rel: "noopener" } : {})}
              className={`btn ${c.featured ? "btn-accent" : "btn-ghost"}`}
              style={{ justifyContent: "center" }}
            >
              {c.cta} <Arrow />
            </a>
          </article>
        ))}
      </div>
    </section>
  );
}

window.Caminos = Caminos;