import { Button, Eyebrow } from "@rubis/ui";
import { Check } from "lucide-react";

const APP_URL = "https://app.rubis.pro";

const FEATURES = [
  ["Factures illimitées.", "Que vous en émettiez 10 ou 500 par mois, c'est le même prix."],
  ["OCR illimité.", "Drag & drop, photo mobile, batch de 20 d'un coup."],
  [
    "Relances signées de votre nom.",
    "Vos clients voient votre nom et répondent directement à votre email. Aucune mention de Rubis.",
  ],
  ["Plans personnalisables", "avec variables et tonalités sur-mesure."],
  ["Stats détaillées", "+ export CSV pour vos comptables."],
  ["Support prioritaire.", "Réponse sous 4 h ouvrées, par un humain en France."],
  ["App mobile et desktop,", "hébergement français."],
] as const;

export function Pricing() {
  return (
    <section id="pricing">
      <div className="max-w-[1180px] mx-auto px-5 sm:px-8 py-20 lg:py-28">
        <div className="text-center max-w-[640px] mx-auto mb-14">
          <Eyebrow>Tarifs</Eyebrow>
          <h2 className="mt-4 font-display font-bold text-ink leading-[1.1] tracking-[-0.025em] text-[34px] sm:text-[44px]">
            Moins cher qu'une heure de votre temps mensuel.
          </h2>
          <p className="mt-4 text-[17px] text-ink-2 leading-relaxed">
            On va droit au but. Un plan principal qu'on recommande à 99 % d'entre vous, et deux
            options autour. C'est tout.
          </p>
        </div>

        {/* Pro plan — anchor */}
        <div className="bg-white border border-line rounded-card shadow-card grid lg:grid-cols-[1.05fr_1fr] gap-0 overflow-hidden">
          <div className="p-8 lg:p-12 border-b lg:border-b-0 lg:border-r border-line">
            <span className="inline-flex items-center text-[11px] uppercase tracking-[0.16em] font-semibold text-rubis bg-rubis-glow border border-rubis/15 px-3 py-1.5 rounded-full">
              Le plan qu'on recommande
            </span>
            <h3 className="mt-5 font-display font-bold text-ink text-[32px] sm:text-[40px] tracking-[-0.025em] leading-tight">
              Le plan <em>Pro</em>.
            </h3>
            <div className="mt-6 flex items-baseline gap-3">
              <span className="font-display font-extrabold text-rubis text-[68px] sm:text-[88px] tracking-[-0.04em] leading-none tabular-nums">
                19 €
              </span>
              <span className="font-sans text-[14px] text-ink-3 leading-tight">
                par mois
                <br />
                hors taxes
              </span>
            </div>
            <p className="mt-6 text-[16.5px] leading-relaxed text-ink-2 max-w-md">
              Pour ce prix, vous avez Rubis dans son <b className="text-ink">intégralité</b>.
              Factures et OCR illimités, plans de relance personnalisés, statistiques détaillées,
              support prioritaire. Aucun palier caché, aucun surcoût à l'usage.
            </p>
            <div className="mt-7 flex flex-wrap items-center gap-x-4 gap-y-2">
              <Button asChild size="lg">
                <a href={APP_URL}>Commencer l'essai 30 jours →</a>
              </Button>
              <span className="text-[13px] text-ink-3">
                Sans engagement, annulable à tout moment
              </span>
            </div>
          </div>

          <div className="p-8 lg:p-12 bg-cream-2">
            <div className="font-display font-bold text-[14px] uppercase tracking-[0.08em] text-ink mb-5">
              Ce qui est inclus
            </div>
            <ul className="space-y-3.5">
              {FEATURES.map(([head, tail]) => (
                <li key={head} className="flex gap-3 text-[15px] leading-snug text-ink-2">
                  <Check
                    size={18}
                    strokeWidth={2.5}
                    className="text-rubis flex-shrink-0 mt-0.5"
                    aria-hidden
                  />
                  <span>
                    <b className="text-ink">{head}</b> {tail}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Asides */}
        <div className="text-center my-12 text-[14px] uppercase tracking-[0.2em] font-semibold text-ink-3">
          — ou —
        </div>

        <div className="grid md:grid-cols-2 gap-5 lg:gap-7">
          <PricingAside
            name="Plan Free"
            price="0 €"
            qualifier="Pour tester ou démarrer en freelance"
          >
            Le plan Free fait tourner Rubis sur <b className="text-ink">5 factures actives</b> en
            permanence. Gratuit, pour de bon. Notre façon de prouver que la promesse tient.
          </PricingAside>
          <PricingAside
            name="Plan Business"
            price="49 €"
            qualifier="Pour les équipes & les pros exigeants"
          >
            Tout du Pro, plus : <b className="text-ink">jusqu'à 5 collaborateurs</b> dans la boîte,
            chacun avec son accès. Vos relances partent de{" "}
            <b className="text-ink">votre vraie adresse pro</b> (
            <code className="bg-cream-2 px-1.5 py-0.5 rounded text-[12.5px]">
              compta@votre-entreprise.fr
            </code>
            ), pas d'une adresse Rubis — vos clients ne se rendent compte de rien et vos emails
            arrivent mieux en boîte principale.
          </PricingAside>
        </div>

        <p className="mt-12 text-center text-[14px] text-ink-3 max-w-[560px] mx-auto">
          Pas de palier caché. Pas de surcoût à l'usage. Annulation en un clic, sans question
          posée.
        </p>
      </div>
    </section>
  );
}

function PricingAside({
  name,
  price,
  qualifier,
  children,
}: {
  name: string;
  price: string;
  qualifier: string;
  children: React.ReactNode;
}) {
  return (
    <a
      href={APP_URL}
      className="group block bg-white border border-line rounded-card p-7 shadow-soft hover:border-rubis/40 hover:shadow-card transition-all hover:no-underline"
    >
      <div className="flex items-baseline justify-between gap-3 pb-4 border-b border-line">
        <span className="font-display font-bold text-ink text-[20px] tracking-[-0.018em]">
          {name}
        </span>
        <span className="font-display font-extrabold text-ink text-[24px] tabular-nums">
          {price}
          <span className="font-sans font-normal text-[13px] text-ink-3 ml-1">/mois</span>
        </span>
      </div>
      <div className="mt-3 text-[12.5px] uppercase tracking-[0.1em] font-semibold text-ink-3">
        {qualifier}
      </div>
      <p className="mt-3 text-[15px] leading-relaxed text-ink-2">{children}</p>
      <span className="mt-5 inline-flex items-center gap-1.5 text-[14px] font-display font-semibold text-rubis">
        Démarrer {name.replace("Plan ", "")} maintenant
        <span className="transition-transform group-hover:translate-x-0.5">→</span>
      </span>
    </a>
  );
}
