import { Link } from "react-router-dom";
import { ArrowUpRight } from "lucide-react";
import Reveal from "./Reveal";
import MagneticButton from "./MagneticButton";
import type { ButtonProps } from "../types";

export const PrimaryButton = ({ to, href, children, className = "", testId }: ButtonProps) => {
  const cls = `btn-ember inline-flex items-center justify-center gap-2 bg-ember text-white font-bold text-[14px] tracking-[0.04em] px-8 py-4 hover:bg-[#E54D16] transition-colors duration-300 ${className}`;
  return (
    <MagneticButton>
      {href ? (
        <a href={href} className={cls} target="_blank" rel="noopener noreferrer" data-testid={testId}>{children}</a>
      ) : (
        <Link to={to ?? "/contact"} className={cls} data-testid={testId}>{children}</Link>
      )}
    </MagneticButton>
  );
};

export const GhostButton = ({ to, href, children, className = "", testId }: ButtonProps) => {
  const cls = `inline-flex items-center justify-center gap-2 border border-cy/40 text-cy font-bold text-[14px] tracking-[0.04em] px-8 py-4 hover:bg-cy/10 hover:border-cy transition-colors duration-300 ${className}`;
  return (
    <MagneticButton>
      {href ? (
        <a href={href} className={cls} target="_blank" rel="noopener noreferrer" data-testid={testId}>{children}</a>
      ) : (
        <Link to={to ?? "/"} className={cls} data-testid={testId}>{children}</Link>
      )}
    </MagneticButton>
  );
};

const CTA_BENEFITS = [
  "SECURE BY DESIGN",
  "24×7 MANAGED OPERATIONS",
  "MULTI-VENDOR EXPERTISE",
  "END-TO-END DELIVERY",
  "PROVEN METHODOLOGY",
  "FUTURE-READY ARCHITECTURE",
];

function BenefitTicker() {
  return (
    <div className="border-b border-white/10 py-4 overflow-hidden" data-testid="benefit-ticker">
      <div className="ticker-track flex w-max">
        {[0, 1].map((dup) => (
          <div key={dup} className="flex shrink-0 items-center gap-8 pr-8" aria-hidden={dup === 1 || undefined}>
            {CTA_BENEFITS.map((b) => (
              <span key={b} className="flex items-center gap-8 text-[11px] font-tech tracking-[0.3em] text-white/45 whitespace-nowrap">
                {b} <span className="h-1.5 w-1.5 rotate-45 bg-cy/50" />
              </span>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

interface CTASectionProps {
  title?: string;
  desc?: string;
}

export default function CTASection({
  title = "Let's build the right technology architecture for your business.",
  desc = "Talk to an Aviokan consultant about your requirement — from a single assessment to a full integrated environment.",
}: CTASectionProps) {
  return (
    <section className="relative bg-[#0A1F44] overflow-hidden" data-testid="cta-section">
      <BenefitTicker />
      <div className="absolute inset-0 bg-grid-dark opacity-100 pointer-events-none" />
      <div className="absolute -top-40 -right-40 h-96 w-96 rounded-full bg-cy/10 blur-[120px] pointer-events-none" />
      <div className="mx-auto max-w-[820px] px-5 md:px-10 py-16 md:py-20 relative text-center">
        <Reveal>
          <p className="text-[10px] font-tech tracking-[0.35em] text-cy mb-5">START A CONVERSATION</p>
          <h2 className="font-display font-semibold text-3xl md:text-4xl lg:text-[2.75rem] text-white leading-[1.08] tracking-tight">
            {title}
          </h2>
          <p className="mt-4 text-[15px] text-white/60 leading-relaxed max-w-xl mx-auto">{desc}</p>
          <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-5">
            <PrimaryButton to="/contact" testId="cta-talk-to-expert" className="!px-6 !py-3 !text-[13px]">
              Talk to an Expert <ArrowUpRight size={15} />
            </PrimaryButton>
            <Link
              to="/solutions/data-centre-infrastructure"
              className="group inline-flex items-center gap-2 text-[13px] font-bold text-cy hover:text-white transition-colors duration-300"
              data-testid="cta-explore-solutions"
            >
              Explore our solutions
              <span className="h-px w-6 bg-cy group-hover:bg-white group-hover:w-8 transition-all duration-300" aria-hidden="true" />
            </Link>
          </div>
        </Reveal>
      </div>
    </section>
  );
}