Features Orbit

import type { CSSProperties } from "react";
import { cn } from "@/lib/utils";

export interface FeaturesOrbitProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  /** Integration names (2 letters shown in the bubble). Split across two rings. */
  integrations?: string[];
  cta?: { label: string; href: string };
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

/** Integrations section: copy on one side, a central Halo orb with integration bubbles orbiting on two counter-rotating rings. Pure CSS. */
export function FeaturesOrbit({
  eyebrow = "Integrations",
  title = "Plugs into the tools you already live in",
  description = "Halo joins your calls on Zoom, Meet and Teams, then sends recaps and tasks to Slack, Notion, Linear, Jira, HubSpot and 40 more.",
  integrations = ["Zoom", "Meet", "Teams", "Slack", "Notion", "Linear", "Jira", "HubSpot", "Asana", "Salesforce"],
  cta = { label: "Browse all integrations", href: "#integrations" },
  className,
}: FeaturesOrbitProps) {
  const inner = integrations.slice(0, 4);
  const outer = integrations.slice(4);

  const ring = (items: string[], radius: number, dir: "cw" | "ccw", duration: number) => (
    <div
      className={cn("glass-orbit absolute inset-0 m-auto rounded-full border border-da-border", dir === "ccw" && "is-reverse")}
      style={{ width: radius * 2, height: radius * 2, animationDuration: `${duration}s` } as CSSProperties}
    >
      {items.map((name, i) => {
        const a = (i / items.length) * Math.PI * 2;
        return (
          <span
            key={name}
            title={name}
            className={cn(
              "glass-orbit-item absolute grid size-12 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full font-da-display text-xs font-semibold shadow-da-md",
              GLASS,
            )}
            style={{ left: `${50 + Math.cos(a) * 50}%`, top: `${50 + Math.sin(a) * 50}%`, animationDuration: `${duration}s` } as CSSProperties}
          >
            {name.slice(0, 2)}
          </span>
        );
      })}
    </div>
  );

  return (
    <section aria-labelledby="glass-orbit-title" className={cn("da-section overflow-hidden text-da-fg", className)}>
      <div className="da-container grid items-center gap-12 lg:grid-cols-2">
        <div>
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2
            id="glass-orbit-title"
            className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-semibold tracking-da-display text-balance"
          >
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
          <ul className="mt-6 flex flex-wrap gap-2" aria-label="Supported tools">
            {integrations.map((n) => (
              <li key={n} className={cn("rounded-da-pill px-3 py-1 text-sm font-medium", GLASS)}>
                {n}
              </li>
            ))}
          </ul>
          <a
            href={cta.href}
            className="da-focus da-transition mt-8 inline-flex h-12 items-center rounded-da-pill bg-da-fg px-6 font-semibold text-da-bg shadow-da-md hover:-translate-y-0.5"
          >
            {cta.label}
          </a>
        </div>
        <div aria-hidden className="relative mx-auto aspect-square w-full max-w-[440px] scale-[0.8] sm:scale-100">
          <div className="absolute inset-0 m-auto size-40 rounded-full bg-da-primary/30 blur-3xl" />
          {ring(outer, 200, "ccw", 60)}
          {ring(inner, 120, "cw", 40)}
          <div className="absolute inset-0 m-auto grid size-24 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent shadow-da-lg">
            <span className="size-8 rounded-full bg-da-bg/90" />
          </div>
        </div>
      </div>
      <style href="glass-orbit" precedence="default">{`
        @keyframes glass-orbit { to { rotate: 360deg } }
        @keyframes glass-orbit-counter { to { rotate: -360deg } }
        .glass-orbit { animation: glass-orbit 40s linear infinite }
        .glass-orbit.is-reverse { animation-name: glass-orbit-counter }
        .glass-orbit-item { animation: glass-orbit-counter 40s linear infinite }
        .glass-orbit.is-reverse .glass-orbit-item { animation-name: glass-orbit }
        @media (prefers-reduced-motion: reduce) { .glass-orbit, .glass-orbit-item { animation: none } }
      `}</style>
    </section>
  );
}

export default FeaturesOrbit;