"use client";

/**
 * Packages — four tiers, each named for an outcome rather than a task list.
 * "Motor" is the featured tier (lifted, gradient spine). Cards reveal on scroll
 * and the featured one carries a continuously-shifting gradient border.
 */

import Reveal from "./Reveal";

type Pkg = {
  n: string;
  who: string;
  price: string;
  f: string[];
  featured?: boolean;
};

const packages: Pkg[] = [
  {
    n: "Sitio AI-native",
    who: "Necesitas web, ya",
    price: "Proyecto",
    f: ["Web en código, editable", "SEO base + tracking", "Entregada en tiempo récord"],
  },
  {
    n: "Base",
    who: "Estás arrancando",
    price: "Mensual",
    f: ["Fundamentos SEO", "Contenido inicial", "Analítica conectada"],
  },
  {
    n: "Motor",
    who: "Quieres crecer en serio",
    price: "Mensual",
    f: ["Ads + SEO + contenido", "Dashboard de resultados", "Optimización mensual", "Plataforma de IA incluida"],
    featured: true,
  },
  {
    n: "Partner",
    who: "Quieres escalar",
    price: "Retainer",
    f: ["Full-stack de crecimiento", "Automatización a medida", "Prioridad y roadmap", "Acceso directo al equipo"],
  },
];

export default function Packages() {
  return (
    <section id="paquetes" className="packages">
      <div className="wrap">
        <Reveal>
          <p className="kicker">04 — Paquetes</p>
          <h2 className="packages__title">
            Cada uno con un resultado. <span className="serif-em">No listas de tareas.</span>
          </h2>
        </Reveal>

        <Reveal className="packages__grid" stagger={0.1}>
          {packages.map((p) => (
            <article
              className={`pkg hoverable${p.featured ? " pkg--featured" : ""}`}
              key={p.n}
              data-cursor={p.featured ? "el más elegido" : "ver"}
            >
              {p.featured && <span className="pkg__tag">Más elegido</span>}
              <header className="pkg__head">
                <span className="pkg__price">{p.price}</span>
                <h3 className="pkg__name">{p.n}</h3>
                <p className="pkg__who">{p.who}</p>
              </header>
              <ul className="pkg__features">
                {p.f.map((x) => (
                  <li key={x}>
                    <svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true">
                      <path
                        d="M4 10.5l3.5 3.5L16 6"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                    <span>{x}</span>
                  </li>
                ))}
              </ul>
              <a className="pkg__cta hoverable" href="#contacto">
                Empezar con {p.n}
                <span aria-hidden="true">→</span>
              </a>
            </article>
          ))}
        </Reveal>
      </div>
    </section>
  );
}