CTA Countdown

"use client";

import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

export interface CtaCountdownProps {
  kicker?: string;
  title?: string;
  description?: string;
  /** ISO date the offer ends. Defaults to 3 days after first render. */
  deadline?: string;
  cta?: { label: string; href: string };
  code?: string;
  className?: string;
}

function parts(ms: number): { label: string; value: string }[] {
  const s = Math.max(0, Math.floor(ms / 1000));
  return [
    { label: "Days", value: String(Math.floor(s / 86400)).padStart(2, "0") },
    { label: "Hours", value: String(Math.floor((s % 86400) / 3600)).padStart(2, "0") },
    { label: "Min", value: String(Math.floor((s % 3600) / 60)).padStart(2, "0") },
    { label: "Sec", value: String(s % 60).padStart(2, "0") },
  ];
}

export function CtaCountdown({
  kicker = "[ Launch week ]",
  title = "40% off Team, this week only.",
  description = "Celebrating v4.2 and AI summaries. Lock the price for your first year — applies to every project you add.",
  deadline,
  cta = { label: "Claim 40% off", href: "#pricing" },
  code = "SHIPIT40",
  className,
}: CtaCountdownProps) {
  const [end] = useState(() => (deadline ? new Date(deadline).getTime() : Date.now() + 3 * 86400000 + 7 * 3600000));
  const [now, setNow] = useState<number | null>(null);

  useEffect(() => {
    const tick = () => setNow(Date.now());
    const first = window.setTimeout(tick, 0);
    const id = window.setInterval(tick, 1000);
    return () => {
      window.clearTimeout(first);
      window.clearInterval(id);
    };
  }, []);

  // Render placeholders on the server / first paint to avoid hydration mismatch.
  const blocks = now === null ? parts(0).map((p) => ({ ...p, value: "--" })) : parts(end - now);
  const ended = now !== null && end - now <= 0;

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="da-stroke grid bg-da-fg text-da-bg shadow-da-lg lg:grid-cols-[1.2fr_1fr]">
          <div className="p-8 sm:p-12">
            <p className="font-da-mono text-xs font-bold tracking-da-label uppercase opacity-80">{kicker}</p>
            <h2 className="mt-4 font-da-display text-[clamp(2.25rem,5vw,4rem)] leading-[0.95] tracking-da-display uppercase">{title}</h2>
            <p className="mt-5 max-w-lg text-lg opacity-85">{description}</p>
            <div className="mt-8 flex flex-wrap items-center gap-4">
              <a
                href={cta.href}
                className="da-focus da-stroke bg-da-primary px-6 py-4 font-bold text-da-primary-fg [--da-border:var(--da-bg)] hover:bg-da-accent hover:text-da-accent-fg"
              >
                {cta.label}
              </a>
              <p className="font-da-mono text-sm">
                Code{" "}
                <span className="border-[length:var(--da-border-width)] border-dashed border-current px-2 py-1 font-bold">{code}</span>
              </p>
            </div>
          </div>
          <div className="grid grid-cols-4 border-t-[length:var(--da-border-width)] border-current lg:border-t-0 lg:border-l-[length:var(--da-border-width)]">
            <p className="sr-only" aria-live="polite">
              {ended ? "Offer ended" : now === null ? "" : `Offer ends in ${blocks.map((b) => `${b.value} ${b.label}`).join(", ")}`}
            </p>
            {blocks.map((b, i) => (
              <div
                key={b.label}
                aria-hidden
                className={cn("flex flex-col items-center justify-center gap-2 py-8", i > 0 && "border-l-[length:var(--da-border-width)] border-current", i === 0 && "bg-da-primary text-da-primary-fg")}
              >
                <span className="font-da-display text-[clamp(2.25rem,5vw,4rem)] leading-none tabular-nums">{b.value}</span>
                <span className="font-da-mono text-[11px] font-bold tracking-da-label uppercase">{b.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaCountdown;