CTA Orb

import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CtaOrbProps {
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  note?: string;
  className?: string;
}

export function CtaOrb({
  title = "Give your team its afternoons back",
  description = "Connect your calendar in 30 seconds. Halo takes notes in your next meeting — for free.",
  primaryCta = { label: "Start free", href: "#signup" },
  secondaryCta = { label: "Book a demo", href: "#demo" },
  note = "No credit card · Cancel anytime · SOC 2 Type II",
  className,
}: CtaOrbProps) {
  return (
    <section className={cn("da-section text-da-fg", className)}>
      <div className="da-container">
        <div className="da-stroke relative isolate overflow-hidden rounded-da-lg bg-da-surface px-6 py-20 text-center shadow-da-lg backdrop-blur-da backdrop-saturate-150 sm:px-12 sm:py-24">
          {/* Orb: a spinning conic gradient, heavily blurred */}
          <div aria-hidden className="absolute top-1/2 left-1/2 -z-10 size-[420px] -translate-x-1/2 -translate-y-1/2">
            <div className="glass-orb size-full rounded-full bg-[conic-gradient(from_0deg,var(--da-primary),var(--da-accent),var(--da-danger),var(--da-primary))] opacity-45 blur-[70px]" />
          </div>
          <div aria-hidden className="absolute inset-x-12 top-0 h-px bg-gradient-to-r from-transparent via-white/80 to-transparent" />

          <h2 className="mx-auto max-w-2xl font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[1.06] font-semibold tracking-da-display text-balance">{title}</h2>
          <p className="mx-auto mt-5 max-w-lg text-lg text-da-muted-fg">{description}</p>
          <div className="mt-9 flex flex-wrap justify-center gap-3">
            <a
              href={primaryCta.href}
              className="da-focus da-transition group inline-flex h-12 items-center gap-2 rounded-da-pill bg-da-fg px-6 font-semibold text-da-bg shadow-da-md hover:-translate-y-0.5 hover:shadow-da-lg"
            >
              {primaryCta.label}
              <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
            </a>
            <a
              href={secondaryCta.href}
              className="da-focus da-transition da-stroke inline-flex h-12 items-center rounded-da-pill bg-da-secondary px-6 font-semibold text-da-secondary-fg shadow-da-sm backdrop-blur-da hover:-translate-y-0.5"
            >
              {secondaryCta.label}
            </a>
          </div>
          {note && <p className="mt-6 text-sm text-da-muted-fg">{note}</p>}
        </div>
      </div>
      <style href="glass-orb" precedence="default">{`
        @keyframes glass-orb { to { rotate: 360deg } }
        .glass-orb { animation: glass-orb 18s linear infinite }
        @media (prefers-reduced-motion: reduce) { .glass-orb { animation: none } }
      `}</style>
    </section>
  );
}

export default CtaOrb;