Cards Hover Feature Section

"use client";

import type { PointerEvent as ReactPointerEvent, ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type Feature = {
  title: string;
  description: string;
  badge: string;
  glow: string;
  icon: ReactNode;
};

const features: Feature[] = [
  {
    title: "Live collaboration",
    description:
      "See every edit the moment it happens. Cursors, comments, and changes sync across your whole team in under 50 milliseconds — no refresh, no merge conflicts.",
    badge: "from-indigo-500 to-violet-600",
    glow: "rgba(99, 102, 241, 0.22)",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" aria-hidden="true">
        <path
          d="M17 20v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1"
          stroke="currentColor"
          strokeWidth={1.6}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <circle cx="10" cy="8" r="3.2" stroke="currentColor" strokeWidth={1.6} />
        <path
          d="M21 20v-1a4 4 0 0 0-3-3.87M16 4.13a4 4 0 0 1 0 7.75"
          stroke="currentColor"
          strokeWidth={1.6}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
  },
  {
    title: "Automations that run themselves",
    description:
      "Chain triggers, conditions, and actions in a visual builder. Route approvals, sync records, and fire updates on schedule — without touching a single line of code.",
    badge: "from-sky-500 to-indigo-600",
    glow: "rgba(56, 189, 248, 0.22)",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" aria-hidden="true">
        <path
          d="M13 3 4 14h7l-1 7 9-11h-7l1-7Z"
          stroke="currentColor"
          strokeWidth={1.6}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
  },
  {
    title: "Permissions down to the field",
    description:
      "Decide who can view, edit, or export every object. Role-based access, SSO, and tamper-proof audit logs keep sensitive data exactly where it belongs.",
    badge: "from-emerald-500 to-sky-600",
    glow: "rgba(16, 185, 129, 0.22)",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" aria-hidden="true">
        <path
          d="M12 3 5 6v5c0 4.5 3 8 7 9 4-1 7-4.5 7-9V6l-7-3Z"
          stroke="currentColor"
          strokeWidth={1.6}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="m9 12 2 2 4-4"
          stroke="currentColor"
          strokeWidth={1.6}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
  },
  {
    title: "Dashboards that answer back",
    description:
      "Turn raw activity into charts the whole company understands. Slice by team, project, or date range, then share a live link in a single click.",
    badge: "from-violet-500 to-indigo-600",
    glow: "rgba(139, 92, 246, 0.22)",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" aria-hidden="true">
        <path d="M3 20h18" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" />
        <rect x="5" y="11" width="3.4" height="7" rx="1.2" stroke="currentColor" strokeWidth={1.6} />
        <rect x="10.3" y="6" width="3.4" height="12" rx="1.2" stroke="currentColor" strokeWidth={1.6} />
        <rect x="15.6" y="13.5" width="3.4" height="4.5" rx="1.2" stroke="currentColor" strokeWidth={1.6} />
      </svg>
    ),
  },
  {
    title: "Connects to your whole stack",
    description:
      "Two-way sync with the 90+ tools you already run. Push records to your warehouse or pull them into a report without brittle scripts or nightly exports.",
    badge: "from-amber-500 to-rose-600",
    glow: "rgba(245, 158, 11, 0.22)",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" aria-hidden="true">
        <circle cx="6" cy="6" r="2.4" stroke="currentColor" strokeWidth={1.6} />
        <circle cx="18" cy="6" r="2.4" stroke="currentColor" strokeWidth={1.6} />
        <circle cx="12" cy="18" r="2.4" stroke="currentColor" strokeWidth={1.6} />
        <path
          d="M8 7.4 10.6 15.6M16 7.4 13.4 15.6M8.4 6h7.2"
          stroke="currentColor"
          strokeWidth={1.6}
          strokeLinecap="round"
        />
      </svg>
    ),
  },
  {
    title: "Nothing ever gets lost",
    description:
      "Every version is saved automatically. Roll back a document, restore a deleted record, or compare two revisions side by side in seconds — not support tickets.",
    badge: "from-rose-500 to-violet-600",
    glow: "rgba(244, 63, 94, 0.22)",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" aria-hidden="true">
        <path
          d="M3 12a9 9 0 1 0 3-6.7"
          stroke="currentColor"
          strokeWidth={1.6}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M3 4v4h4"
          stroke="currentColor"
          strokeWidth={1.6}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M12 8v4l3 2"
          stroke="currentColor"
          strokeWidth={1.6}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
  },
];

export default function FeatxCardsHover() {
  const reduce = useReducedMotion();

  const handleMove = (event: ReactPointerEvent<HTMLLIElement>) => {
    const el = event.currentTarget;
    const rect = el.getBoundingClientRect();
    el.style.setProperty("--fx-mx", `${event.clientX - rect.left}px`);
    el.style.setProperty("--fx-my", `${event.clientY - rect.top}px`);
  };

  return (
    <section
      data-featx
      className="relative w-full overflow-hidden bg-gradient-to-b from-slate-50 via-white to-slate-50 py-24 sm:py-32 dark:from-slate-950 dark:via-slate-950 dark:to-slate-900"
    >
      <style>{`
        @keyframes featx-float {
          0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
          50% { transform: translate3d(0, -26px, 0) scale(1.06); }
        }
        @keyframes featx-pulse {
          0%, 100% { transform: scale(1); opacity: 0.6; }
          50% { transform: scale(2.2); opacity: 0; }
        }
        @keyframes featx-sheen {
          0% { transform: translateX(-130%); }
          100% { transform: translateX(230%); }
        }
        @media (prefers-reduced-motion: reduce) {
          [data-featx] *, [data-featx] *::before, [data-featx] *::after {
            animation: none !important;
            transition-duration: 0.01ms !important;
          }
        }
      `}</style>

      {/* Decorative atmosphere */}
      <div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden">
        <div className="absolute -left-24 -top-24 h-72 w-72 rounded-full bg-indigo-400/20 blur-3xl [animation:featx-float_16s_ease-in-out_infinite] dark:bg-indigo-500/10" />
        <div className="absolute -bottom-28 -right-16 h-80 w-80 rounded-full bg-violet-400/20 blur-3xl [animation:featx-float_20s_ease-in-out_infinite_reverse] dark:bg-violet-500/10" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,rgba(15,23,42,0.05)_1px,transparent_0)] [background-size:26px_26px] dark:bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.04)_1px,transparent_0)]" />
      </div>

      <div className="relative mx-auto max-w-7xl px-6 lg:px-8">
        <motion.div
          initial={reduce ? false : { opacity: 0, y: 20 }}
          whileInView={reduce ? undefined : { opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={reduce ? undefined : { duration: 0.5, ease: "easeOut" }}
          className="mx-auto max-w-2xl text-center"
        >
          <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white/70 px-3.5 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-slate-600 backdrop-blur dark:border-slate-800 dark:bg-slate-900/70 dark:text-slate-300">
            <span className="relative flex h-2 w-2">
              <span
                aria-hidden="true"
                className="absolute inline-flex h-full w-full rounded-full bg-indigo-500 [animation:featx-pulse_2.4s_ease-in-out_infinite]"
              />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-indigo-500" />
            </span>
            Why Cascade
          </span>

          <h2 className="mt-6 text-4xl font-semibold tracking-tight text-slate-900 sm:text-5xl dark:text-white">
            Powerful features,{" "}
            <span className="bg-gradient-to-r from-indigo-500 via-violet-500 to-sky-500 bg-clip-text text-transparent">
              zero busywork
            </span>
          </h2>
          <p className="mt-5 text-lg leading-relaxed text-slate-600 dark:text-slate-400">
            Cascade folds collaboration, automation, and insight into a single workspace — so your
            team ships the work instead of chasing it across a dozen tabs.
          </p>
        </motion.div>

        <ul className="mt-16 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, index) => (
            <motion.li
              key={feature.title}
              onPointerMove={handleMove}
              initial={reduce ? false : { opacity: 0, y: 24 }}
              whileInView={reduce ? undefined : { opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-60px" }}
              transition={reduce ? undefined : { duration: 0.5, delay: index * 0.06, ease: "easeOut" }}
              className="group relative"
            >
              {/* soft accent glow behind card on hover */}
              <div
                aria-hidden="true"
                className="pointer-events-none absolute -inset-px rounded-[calc(1.5rem+1px)] opacity-0 blur-md transition-opacity duration-500 group-hover:opacity-100"
                style={{
                  background: `radial-gradient(240px circle at var(--fx-mx, 50%) var(--fx-my, 50%), ${feature.glow}, transparent 70%)`,
                }}
              />

              <div className="relative flex h-full flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white/85 shadow-sm backdrop-blur transition-[transform,box-shadow,border-color] duration-300 group-hover:-translate-y-1 group-hover:border-slate-300 group-hover:shadow-xl group-hover:shadow-slate-900/5 dark:border-slate-800 dark:bg-slate-900/70 dark:group-hover:border-slate-700 dark:group-hover:shadow-black/40">
                {/* cursor-tracking spotlight */}
                <div
                  aria-hidden="true"
                  className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus-within:opacity-100"
                  style={{
                    background: `radial-gradient(320px circle at var(--fx-mx, 50%) var(--fx-my, 50%), ${feature.glow}, transparent 72%)`,
                  }}
                />
                {/* accent top rule */}
                <div
                  aria-hidden="true"
                  className={`absolute inset-x-0 top-0 h-px origin-left scale-x-0 bg-gradient-to-r ${feature.badge} opacity-0 transition-all duration-500 group-hover:scale-x-100 group-hover:opacity-100`}
                />

                <div className="relative flex h-full flex-col p-6 sm:p-7">
                  <div
                    className={`relative mb-5 inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br ${feature.badge} text-white shadow-lg shadow-slate-900/10 ring-1 ring-inset ring-white/20 transition-transform duration-300 group-hover:scale-105 dark:shadow-black/30`}
                  >
                    {feature.icon}
                    <span
                      aria-hidden="true"
                      className="pointer-events-none absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/45 to-transparent group-hover:[animation:featx-sheen_900ms_ease-in-out]"
                    />
                  </div>

                  <h3 className="text-lg font-semibold text-slate-900 dark:text-white">
                    {feature.title}
                  </h3>
                  <p className="mt-2.5 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
                    {feature.description}
                  </p>

                  <a
                    href="#"
                    aria-label={`Learn more about ${feature.title}`}
                    className="mt-6 inline-flex items-center gap-1.5 rounded-md text-sm font-semibold text-slate-700 transition-colors hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-slate-300 dark:hover:text-white dark:focus-visible:ring-offset-slate-900"
                  >
                    Learn more
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
                      aria-hidden="true"
                    >
                      <path
                        d="M5 12h14m-6-6 6 6-6 6"
                        stroke="currentColor"
                        strokeWidth={1.8}
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </a>
                </div>
              </div>
            </motion.li>
          ))}
        </ul>

        <div className="mt-14 flex flex-col items-center justify-center gap-4 sm:flex-row">
          <a
            href="#"
            className="group inline-flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-slate-900/20 transition-all hover:-translate-y-0.5 hover:bg-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-white dark:text-slate-900 dark:shadow-black/30 dark:hover:bg-slate-100 dark:focus-visible:ring-offset-slate-950"
          >
            Start free — no card required
            <svg
              viewBox="0 0 24 24"
              fill="none"
              className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
              aria-hidden="true"
            >
              <path
                d="M5 12h14m-6-6 6 6-6 6"
                stroke="currentColor"
                strokeWidth={1.8}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </a>
          <a
            href="#"
            className="inline-flex items-center justify-center rounded-xl border border-slate-300 bg-white px-6 py-3 text-sm font-semibold text-slate-700 transition-colors hover:border-slate-400 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-600 dark:hover:text-white dark:focus-visible:ring-offset-slate-950"
          >
            Book a live demo
          </a>
        </div>
      </div>
    </section>
  );
}