import React from "react";
import Button from "../../components/ui/button/Button";
import { Link } from "react-router-dom";
interface CTASectionProps {
  title: string;
  description: string;
  primaryCta: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
}

const CTASection: React.FC<CTASectionProps> = ({
  title,
  description,
  primaryCta,
  secondaryCta,
}) => {
  const renderCta = (label: string, href: string, isPrimary: boolean) => {
    const isExternal = href.startsWith("http");
    const buttonClasses = isPrimary 
      ? "shadow-lg shadow-[var(--color-primary)]/30" 
      : "";

    if (isExternal) {
      return (
        <Button
          key={href}
          as="a"
          href={href}
          target="_blank"
          rel="noreferrer"
          variant={isPrimary ? "gradient" : "outline"}
          tone={isPrimary ? "brand" : "neutral"}
          shape="pill"
          size="lg"
          className={buttonClasses}
        >
          {label}
        </Button>
      );
    }

    return (
      <Button
        key={href}
        as={Link}
        to={href}
        variant={isPrimary ? "gradient" : "outline"}
        tone={isPrimary ? "brand" : "neutral"}
        shape="pill"
        size="lg"
        className={buttonClasses}
      >
        {label}
      </Button>
    );
  };

  return (
    <section className="py-24 bg-gradient-to-b from-white via-slate-50 to-white">
      <div className="max-w-5xl mx-auto px-6">
        <div className="relative overflow-hidden rounded-3xl border-2 border-[var(--color-primary)]/20 bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-purple)]/5 to-[var(--color-success)]/5 p-10 md:p-14 shadow-xl">
          <div className="absolute inset-0 bg-gradient-to-r from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
          <div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10 opacity-50" />
          <div className="relative flex flex-col gap-6">
            <h3 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight">
              {title}
            </h3>
            <p className="text-slate-600 text-base md:text-lg max-w-2xl">
              {description}
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              {renderCta(primaryCta.label, primaryCta.href, true)}
              {secondaryCta && renderCta(secondaryCta.label, secondaryCta.href, false)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CTASection;

