"use client";

import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "framer-motion";
import { MagneticLink } from "@/components/motion/MagneticLink";

type Props = {
  title: string;
  text: string;
  primaryLabel: string;
  primaryHref: string;
  secondaryLabel: string;
  secondaryHref: string;
};

export function LandingCtaBand({
  title,
  text,
  primaryLabel,
  primaryHref,
  secondaryLabel,
  secondaryHref,
}: Props) {
  const [ready, setReady] = useState(false);
  const reduce = useReducedMotion();

  useEffect(() => setReady(true), []);

  const inner = (
    <div className="landing-cta-band">
      <div className="landing-cta-band__copy">
        <h2 className="landing-cta-band__title">{title}</h2>
        <p className="landing-cta-band__text">{text}</p>
      </div>
      <div className="landing-cta-band__actions">
        <MagneticLink href={primaryHref} className="btn-split">
          <span className="btn-split__label">{primaryLabel}</span>
          <span className="btn-split__icon">→</span>
        </MagneticLink>
        <MagneticLink href={secondaryHref} className="btn-ghost">
          {secondaryLabel}
        </MagneticLink>
      </div>
    </div>
  );

  if (!ready || reduce) return inner;

  return (
    <motion.div
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
    >
      {inner}
    </motion.div>
  );
}