interface CTA1Props {
  heading?: string;
  description?: string;
  buttons?: {
    primary?: {
      text: string;
      url: string;
    };
    secondary?: {
      text: string;
      url: string;
    };
  };
}

const CTA1 = ({
  heading = "Try our free blocks first",
  description = "Go to the block library and filter for free or basic blocks. Free blocks can be copied and pasted instantly, while basic blocks just need a login—no payment required.",
  buttons = {
    primary: {
      text: "Browse blocks",
      url: "/blocks",
    },
    secondary: {
      text: "Full access",
      url: "/#pricing",
    },
  },
}: CTA1Props) => {
  return (
    <section className="py-32 max-sm:py-16">
      <div className="max-w-6xl mx-auto px-5">
        <div className="flex flex-col items-center border border-gray-200 relative overflow-hidden rounded-lg bg-accent p-8 text-center md:rounded-xl lg:p-16">
          <div className="bg-[url('https://library.rapid-ui.com/images/blocks/cta1/grid.svg')] absolute left-0 top-0 w-full h-full bg-cover bg-center"></div>
          <div className="relative z-10">
            <h3 className="mb-3 max-w-3xl text-2xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
              {heading}
            </h3>
            <p className="mb-8 max-w-3xl text-muted-foreground lg:text-lg">
              {description}
            </p>
            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row">
              {buttons.secondary && (
                <Button variant="outline" className="w-full sm:w-auto bg-white">
                  <a href={buttons.secondary.url}>{buttons.secondary.text}</a>
                </Button>
              )}
              {buttons.primary && (
                <Button className="w-full sm:w-auto">
                  <a href={buttons.primary.url}>{buttons.primary.text}</a>
                </Button>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { CTA1 };

// Move the Button component to a separate file (e.g., Button.tsx)
const Button = ({
  children,
  variant = "default",
  className = "",
  ...props
}: {
  children: React.ReactNode;
  variant?: "default" | "outline";
  className?: string;
}) => {
  const baseStyles =
    "px-4 py-2 rounded-md font-medium transition-all duration-200";
  const variants = {
    default: "bg-gray-900 text-white hover:bg-gray-700",
    outline: "border border-gray-300 text-gray-700 hover:bg-gray-100",
  };

  return (
    <button
      className={`${baseStyles} ${variants[variant]} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
};
CTA-1
