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

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

/**
 * Hero principal de la landing.
 * Mirror direct de l'ancienne section .hero du landing/index.html — même
 * messages, même hiérarchie typo, même mock card (124 rubis + KPIs +
 * activité). On reprend les composants @rubis/ui là où ça a du sens.
 */
export function Hero() {
  return (
    <section className="relative overflow-hidden">
      {/* Halo rubis discret en haut-droite */}
      <div
        aria-hidden
        className="pointer-events-none absolute -top-40 -right-40 size-[480px] rounded-full"
        style={{
          background:
            "radial-gradient(circle, var(--color-rubis-glow) 0%, transparent 65%)",
        }}
      />

      <div className="max-w-[1180px] mx-auto px-5 sm:px-8 pt-16 pb-20 lg:pt-24 lg:pb-28 grid lg:grid-cols-[1.1fr_1fr] gap-12 lg:gap-16 items-center relative">
        {/* ============ Texte ============ */}
        <div>
          <Eyebrow>L'outil de relance pour TPE-PME françaises</Eyebrow>

          <h1 className="mt-5 font-display font-extrabold text-ink leading-[1.05] tracking-[-0.03em] text-[44px] sm:text-[56px] lg:text-[64px] max-w-[680px]">
            Vos factures relancées <em>toutes seules</em> pendant que vous travaillez.
          </h1>

          <p className="mt-6 text-[18px] sm:text-[19px] leading-relaxed text-ink-2 max-w-[580px] md:text-justify hyphens-auto">
            L'app de relance de factures impayées pensée pour les TPE-PME françaises.
            Glissez-déposez vos factures, choisissez un plan de relance, oubliez-les.
            Rubis envoie, suit, relance — et vous récupérez en moyenne{" "}
            <b className="text-ink">5 heures par semaine</b>.
          </p>

          <div className="mt-8 flex flex-wrap items-center gap-3">
            <Button asChild size="lg">
              <a href={APP_URL}>Lancer Rubis →</a>
            </Button>
            <Button asChild variant="secondary" size="lg">
              <a href="#pricing">Voir les tarifs</a>
            </Button>
          </div>

          <div className="mt-7 flex flex-wrap items-center gap-x-3 gap-y-2 text-[13px] text-ink-3">
            <span className="inline-flex items-center gap-1.5">
              <Check size={14} className="text-rubis" aria-hidden />
              30 jours gratuits puis Free 5 factures
            </span>
            <span aria-hidden className="size-[3px] rounded-full bg-ink-3" />
            <span>Hébergement souverain</span>
            <span aria-hidden className="size-[3px] rounded-full bg-ink-3" />
            <span>Made in France 🇫🇷</span>
          </div>
        </div>

        {/* ============ Mock card ============ */}
        {/*
          Wrapper avec largeur cappée + relatif : le badge flottant se
          positionne par rapport à la carte, pas à la grille parente.
          Centrée mobile/tablet, alignée à droite en lg.
        */}
        <div className="relative w-full max-w-[480px] mx-auto lg:ml-auto lg:mr-0">
          <div
            className={cn(
              "bg-white border border-line rounded-card shadow-card",
              "p-6 sm:p-7 lg:p-8",
            )}
          >
            {/* Hero rubis */}
            <div className="flex items-center gap-4 pb-5 border-b border-line">
              <Gem size={56} glow />
              <div>
                <div className="font-display font-bold text-[32px] tracking-[-0.022em] leading-none text-ink">
                  124 rubis
                </div>
                <div className="mt-1.5 text-[14px] text-ink-2">
                  ≈ <b className="text-ink">24 h 48</b> que vous n'avez pas passées à relancer.
                </div>
              </div>
            </div>

            {/* KPIs */}
            <div className="grid grid-cols-2 gap-5 mt-5">
              <div>
                <div className="text-[10.5px] uppercase tracking-[0.06em] font-semibold text-ink-3">
                  Encaissé
                </div>
                <div className="mt-1.5 font-display font-bold text-[22px] tracking-[-0.015em] text-ink tabular-nums">
                  14 320 €
                </div>
                <div className="mt-1 text-[11.5px] text-rubis font-medium">
                  + 2 800 € vs avril
                </div>
              </div>
              <div>
                <div className="text-[10.5px] uppercase tracking-[0.06em] font-semibold text-ink-3">
                  DSO
                </div>
                <div className="mt-1.5 font-display font-bold text-[22px] tracking-[-0.015em] text-ink tabular-nums">
                  38 j
                </div>
                <div className="mt-1 text-[11.5px] text-rubis font-medium">
                  ↘ −6 j depuis Rubis
                </div>
              </div>
            </div>

            {/* Activity */}
            <div className="mt-5 pt-4 border-t border-dashed border-line">
              <div className="text-[11px] uppercase tracking-[0.08em] font-semibold text-ink-3 mb-2.5">
                Aujourd'hui
              </div>
              <ul className="space-y-2 text-[13px]">
                <li className="flex items-baseline justify-between gap-3">
                  <span className="text-ink-2">
                    📤 Relance envoyée à <b className="text-ink">Atelier Durand</b>
                  </span>
                  <time className="text-ink-3 tabular-nums text-[11.5px]">11:14</time>
                </li>
                <li className="flex items-baseline justify-between gap-3">
                  <span className="text-ink-2">
                    ✓ Facture <b className="text-ink">F-2024-0035</b> encaissée
                  </span>
                  <time className="text-ink-3 tabular-nums text-[11.5px]">10:02</time>
                </li>
                <li className="flex items-baseline justify-between gap-3">
                  <span className="text-ink-2">📥 3 factures importées et OCRisées</span>
                  <time className="text-ink-3 tabular-nums text-[11.5px]">09:48</time>
                </li>
              </ul>
            </div>
          </div>

          {/* Badge flottant — relatif au wrapper carte (max-w 480) */}
          <div className="absolute -bottom-3 left-4 sm:left-6 bg-ink text-cream rounded-full px-4 py-2 text-[12.5px] font-semibold flex items-center gap-1.5 shadow-card">
            <svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden
            >
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 14" />
            </svg>
            ~3 minutes le matin
          </div>
        </div>
      </div>
    </section>
  );
}
