Hero Stack

"use client";

import { ArrowRight, CheckCircle2, Clock, Video } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface HeroStackProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  className?: string;
}

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

/** Split hero with a fanned 3D stack of three glass cards (recap, async video, tasks) that spreads apart on hover. */
export function HeroStack({
  eyebrow = "AI meeting notes",
  title = "Less meeting. More momentum.",
  description = "Halo turns every call into a recap, a 2-minute video for whoever missed it, and tasks in the tools your team already uses.",
  primaryCta = { label: "Start free", href: "#signup" },
  secondaryCta = { label: "Book a demo", href: "#demo" },
  className,
}: HeroStackProps) {
  const reduce = useReducedMotion();
  const cards = [
    { rotate: -8, x: -40, y: 30, z: 1 },
    { rotate: 5, x: 50, y: -10, z: 2 },
    { rotate: -1, x: 0, y: 0, z: 3 },
  ];

  return (
    <section className={cn("overflow-hidden py-20 text-da-fg sm:py-28", className)}>
      <div className="da-container grid items-center gap-16 lg:grid-cols-2">
        <div>
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h1 className="mt-4 font-da-display text-[clamp(2.5rem,6vw,4.25rem)] leading-[1.03] font-semibold tracking-da-display text-balance">{title}</h1>
          <p className="mt-5 max-w-lg text-lg text-da-muted-fg">{description}</p>
          <div className="mt-8 flex flex-wrap 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"
            >
              {primaryCta.label}
              <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
            </a>
            <a
              href={secondaryCta.href}
              className={cn(
                "da-focus da-transition inline-flex h-12 items-center rounded-da-pill px-6 font-semibold shadow-da-sm hover:-translate-y-0.5",
                GLASS,
              )}
            >
              {secondaryCta.label}
            </a>
          </div>
        </div>

        <motion.div
          aria-hidden
          className="relative mx-auto h-[380px] w-full max-w-md [perspective:1200px]"
          initial="rest"
          whileHover={reduce ? undefined : "spread"}
          animate="rest"
        >
          {cards.map((c, i) => (
            <motion.div
              key={i}
              className={cn("absolute inset-x-6 top-10 rounded-da-lg p-5 shadow-da-lg", GLASS)}
              style={{ zIndex: c.z }}
              variants={{
                rest: { rotate: c.rotate, x: c.x * 0.6, y: c.y * 0.6, rotateX: 8 },
                spread: { rotate: c.rotate * 1.6, x: c.x * 1.4, y: c.y * 1.6, rotateX: 0 },
              }}
              transition={{ type: "spring", stiffness: 200, damping: 20 }}
            >
              {i === 0 && (
                <>
                  <p className="flex items-center gap-2 text-sm font-semibold">
                    <CheckCircle2 className="size-4 text-da-success" /> Tasks synced to Linear
                  </p>
                  <ul className="mt-3 space-y-2 text-sm text-da-muted-fg">
                    <li>☐ Draft offline mode RFC — Leo</li>
                    <li>☐ Ship pricing variant B — Sofia</li>
                    <li>☐ Open 2nd designer req — Amara</li>
                  </ul>
                </>
              )}
              {i === 1 && (
                <>
                  <p className="flex items-center gap-2 text-sm font-semibold">
                    <Video className="size-4 text-da-accent" /> Async update · 1:48
                  </p>
                  <div className="mt-3 aspect-video rounded-da-md bg-gradient-to-br from-da-primary/40 to-da-accent/40" />
                </>
              )}
              {i === 2 && (
                <>
                  <div className="flex items-center justify-between">
                    <p className="font-da-display text-lg font-semibold">Q4 roadmap sync</p>
                    <span className="inline-flex items-center gap-1 text-xs text-da-muted-fg">
                      <Clock className="size-3.5" /> 32 min
                    </span>
                  </div>
                  <p className="mt-3 text-xs font-semibold text-da-primary">AI recap</p>
                  <ul className="mt-2 space-y-1.5 text-sm">
                    <li>• Offline mode moves to November.</li>
                    <li>• Pricing variant B: +18% trial starts.</li>
                    <li>• Second designer approved.</li>
                  </ul>
                  <div className="mt-4 flex -space-x-2">
                    {["from-da-primary to-da-accent", "from-da-accent to-da-success", "from-da-danger to-da-primary", "from-da-warning to-da-danger"].map(
                      (t) => (
                        <span key={t} className={cn("size-7 rounded-full bg-gradient-to-br ring-2 ring-da-bg", t)} />
                      ),
                    )}
                  </div>
                </>
              )}
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}

export default HeroStack;