// components/landing/PricingPlans.tsx
// §1.5 "Planes / precios — sell the chances, briefly." Sales-oriented, not a wall
// of description. States the rule plainly: cada S/5 = 1 boleto, one-time payment,
// NO subscription, and "compra más para más chances" up to the gran sorteo final.
// The illustrative tiers just multiply the S/5 rule; the form accepts any multiple
// of S/5, so these are signposts, not fixed packages. Server component.

import * as React from "react";
import Link from "next/link";
import { Card } from "@/components/ui";
import { AnimatedHeading } from "./AnimatedHeading";

interface Tier {
  soles: number;
  boletos: number;
  tag?: string;
}

// Signpost tiers (illustrative). Each S/5 = 1 boleto; the donation form lets the
// buyer choose any multiple of S/5.
const TIERS: Tier[] = [
  { soles: 5, boletos: 1 },
  { soles: 25, boletos: 5, tag: "Popular" },
  { soles: 50, boletos: 10 },
  { soles: 100, boletos: 20, tag: "Más posibilidades" },
];

export function PricingPlans() {
  return (
    <section
      className="bg-canvas px-5 py-section"
      aria-labelledby="planes-title"
    >
      <div className="mx-auto flex max-w-[1000px] flex-col items-center gap-md text-center">
        <AnimatedHeading
          as="h2"
          id="planes-title"
          className="font-display text-heading-lg font-bold text-ink-strong"
        >
          Cada S/5 es una posibilidad
        </AnimatedHeading>
        <p className="max-w-[58ch] text-pretty font-body text-body-lg text-ink-strong">
          Donas una sola vez y entras al sorteo. No hay suscripción ni pagos
          mensuales. Mientras más boletos compres, más posibilidades tienes,
          hasta el gran sorteo final.
        </p>

        <ul className="mt-md grid w-full grid-cols-2 gap-md lg:grid-cols-4">
          {TIERS.map((t) => (
            <Card
              key={t.soles}
              as="li"
              elevation="tight"
              className="flex h-full flex-col items-center border border-hairline px-sm"
            >
              {/* Reserved badge row on every card (empty when untagged) so all
                  four price figures land on one baseline regardless of tag. */}
              <div className="flex h-6 items-center justify-center">
                {t.tag ? (
                  <span className="whitespace-nowrap rounded-full bg-primary-tint/30 px-3 py-0.5 font-body text-micro font-bold uppercase tracking-wide text-primary">
                    {t.tag}
                  </span>
                ) : null}
              </div>
              {/* Price + boletos, centered in the space below the badge row. */}
              <div className="flex flex-1 flex-col items-center justify-center gap-1">
                <span className="font-impact text-heading-lg font-bold leading-none text-primary tabular-nums">
                  S/{t.soles}
                </span>
                <span className="font-body text-body-md text-muted">
                  {t.boletos} {t.boletos === 1 ? "boleto" : "boletos"}
                </span>
              </div>
            </Card>
          ))}
        </ul>

        <p className="font-body text-caption text-muted">
          Elige el monto que quieras en múltiplos de S/5. Cada S/5 suma un boleto
          más.
        </p>

        <Link
          href="/#donar"
          className="mt-sm inline-flex min-h-[44px] items-center justify-center rounded-xl bg-primary px-8 py-3 font-body text-button font-bold text-on-primary hover:bg-primary-soft focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-steelblue"
        >
          Quiero participar
        </Link>
      </div>
    </section>
  );
}