import { Eyebrow, cn } from "@rubis/ui";

export function HowItWorks() {
  return (
    <section id="how" className="bg-cream-2 border-y border-line">
      <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-16">
          <Eyebrow>Comment ça marche</Eyebrow>
          <h2 className="mt-4 font-display font-bold text-ink leading-[1.1] tracking-[-0.025em] text-[34px] sm:text-[44px]">
            Trois étapes. C'est tout.
          </h2>
          <p className="mt-4 text-[17px] text-ink-2 leading-relaxed">
            Vraiment. Parfois deux, si votre plan par défaut est bien réglé.
          </p>
        </div>

        <Step
          num="01"
          title="Vous importez vos factures."
          body="PDF, photo prise depuis votre téléphone à la caisse, scan reçu par mail — peu importe. L'OCR* lit, extrait montant, client, échéance, RIB. Vous vérifiez. Vingt secondes par facture, montre en main."
        >
          <DropzoneWidget />
        </Step>

        <Step
          flip
          num="02"
          title="Vous choisissez un plan de relance."
          body={
            <>
              <p>
                Nous en avons décliné plusieurs — par exemple, un standard B2B (J+3, J+10, J+20),
                adapter le ton en fonction de l'échéance et de l'historique du client.
              </p>
              <p className="mt-3">Et bien sûr, vous pouvez aussi créer les vôtres sur mesure.</p>
            </>
          }
        >
          <CalendarWidget />
        </Step>

        <Step
          num="03"
          title="Et puis c'est tout."
          body={
            <>
              <p>
                Sérieusement. Pendant que vous travaillez, Rubis envoie les emails au moment prévu,
                suit qui a ouvert, qui n'a pas répondu, et avant chaque relance vous demande
                discrètement par email : « Cette facture a-t-elle été réglée ? ». Vous répondez en
                deux secondes. La machine fait le reste.
              </p>
              <div className="mt-5 inline-flex items-center gap-2 px-4 py-2.5 bg-rubis-glow border border-rubis/15 rounded-default text-[14px] text-rubis-deep font-medium">
                <span aria-hidden className="size-[7px] bg-rubis rotate-45" />
                La récompense : votre compteur de rubis grimpe. Tranquillement. Comme une bonne
                nouvelle régulière.
              </div>
            </>
          }
        >
          <AssistantWidget />
        </Step>
      </div>
    </section>
  );
}

type StepProps = {
  num: string;
  title: string;
  body: React.ReactNode;
  flip?: boolean;
  children: React.ReactNode;
};

function Step({ num, title, body, flip = false, children }: StepProps) {
  return (
    <div
      className={cn(
        // Mobile + tablet : 1 colonne, prose pleine largeur (juste le padding du container).
        // Desktop : 2 colonnes avec prose cappée par la cellule de grille.
        "grid lg:grid-cols-2 gap-8 lg:gap-16 items-center py-10 md:py-14",
        "border-b border-dashed border-line last:border-b-0",
        flip && "lg:[&>*:first-child]:order-2",
      )}
    >
      <div className="flex flex-col items-center lg:items-start gap-5 md:gap-6">
        <div className="inline-flex items-center font-display font-bold text-[12px] tracking-[0.16em] uppercase text-rubis bg-rubis-glow border border-rubis/15 px-3 py-1.5 rounded-full">
          Étape {num}
        </div>
        {children}
      </div>
      <div className="w-full lg:max-w-[520px]">
        <h3 className="font-display font-bold text-ink text-[26px] sm:text-[30px] lg:text-[32px] tracking-[-0.022em] leading-[1.15]">
          {title}
        </h3>
        <div className="mt-4 md:mt-5 text-[16.5px] md:text-[17px] leading-relaxed text-ink-2">
          {body}
        </div>
      </div>
    </div>
  );
}

/* ============== Widget 01 — Dropzone ============== */
function DropzoneWidget() {
  return (
    <div className="relative w-full max-w-[420px] aspect-[5/4] bg-white border border-dashed border-rubis/40 rounded-card p-6 flex flex-col items-center justify-center gap-3 shadow-soft">
      <div className="flex items-center gap-2" aria-hidden>
        {[0, 1, 2].map((i) => (
          <span
            key={i}
            className="size-3 bg-rubis rotate-45 opacity-60"
            style={{ opacity: 1 - i * 0.25 }}
          />
        ))}
      </div>
      <div className="text-rubis text-2xl font-bold" aria-hidden>↓</div>
      <div className="w-full max-w-[260px] bg-cream-2 border border-line rounded-default p-4 space-y-1.5">
        <div className="h-1.5 bg-ink-3/30 rounded w-2/3" />
        <div className="h-1.5 bg-ink-3/30 rounded w-1/2" />
        <div className="h-1.5 bg-ink-3/30 rounded w-full" />
        <div className="h-1.5 bg-ink-3/30 rounded w-2/3" />
        <div className="font-display font-bold text-ink text-[18px] tabular-nums mt-3 pt-3 border-t border-line">
          1 240,00 €
        </div>
      </div>
      <div className="text-[12px] text-ink-3 font-mono">facture-2024-0042.pdf</div>
    </div>
  );
}

/* ============== Widget 02 — Calendrier ============== */
function CalendarWidget() {
  const days = Array.from({ length: 35 }, (_, i) => i - 3); // 4 jours vides, puis 1-31
  const marked = new Set([8, 15, 25]);
  return (
    <div className="w-full max-w-[420px] bg-white border border-line rounded-card p-5 shadow-soft">
      <div className="flex items-center justify-between mb-4">
        <div className="font-display font-bold text-ink">Mai 2026</div>
        <div className="flex items-center gap-1 text-ink-3 text-[14px]">
          <span className="size-7 inline-flex items-center justify-center rounded border border-line cursor-pointer hover:bg-cream-2">
            ‹
          </span>
          <span className="size-7 inline-flex items-center justify-center rounded border border-line cursor-pointer hover:bg-cream-2">
            ›
          </span>
        </div>
      </div>

      <div className="grid grid-cols-7 gap-1.5 text-center text-[12px]">
        {["L", "M", "M", "J", "V", "S", "D"].map((d, i) => (
          <div key={i} className="text-ink-3 font-semibold uppercase tracking-wider pb-2">
            {d}
          </div>
        ))}
        {days.map((d, i) => {
          if (d < 1) return <div key={i} className="text-ink-3/30 py-1.5">·</div>;
          const isMarked = marked.has(d);
          return (
            <div
              key={i}
              className={cn(
                "py-1.5 rounded text-[12.5px] tabular-nums",
                isMarked
                  ? "bg-rubis text-white font-semibold"
                  : "text-ink hover:bg-cream-2",
              )}
            >
              {d}
            </div>
          );
        })}
      </div>

      <div className="flex items-center justify-between mt-4 pt-3 border-t border-line text-[11.5px]">
        <span className="inline-flex items-center gap-1.5 text-ink-2">
          <span aria-hidden className="size-2 rounded-full bg-rubis" />
          Relances programmées
        </span>
        <span className="text-ink-3">3 étapes · plan B2B</span>
      </div>
    </div>
  );
}

/* ============== Widget 03 — Assistant (mini illustration) ============== */
function AssistantWidget() {
  return (
    <div className="w-full max-w-[420px] aspect-[5/4] bg-white border border-line rounded-card p-6 flex flex-col items-center justify-center gap-4 shadow-soft">
      <div className="flex items-center gap-3">
        <div className="size-14 rounded-full bg-rubis text-white flex items-center justify-center font-display font-bold text-[20px]">
          ◆
        </div>
        <div className="bg-cream-2 border border-line rounded-default px-4 py-3 text-[13.5px] text-ink-2 max-w-[220px] relative">
          Cette facture a-t-elle été réglée ?
          <div
            aria-hidden
            className="absolute left-[-7px] top-1/2 -translate-y-1/2 size-3 rotate-45 bg-cream-2 border-l border-b border-line"
          />
        </div>
      </div>
      <div className="flex gap-2">
        <button
          type="button"
          className="px-4 py-2 bg-rubis text-white rounded-default text-[13px] font-semibold shadow-rubis"
        >
          ✓ Oui
        </button>
        <button
          type="button"
          className="px-4 py-2 bg-white border border-line text-ink rounded-default text-[13px] font-medium"
        >
          Pas encore
        </button>
      </div>
      <div className="text-[12px] text-ink-3 italic">2 secondes, et la machine s'occupe du reste.</div>
    </div>
  );
}
