import React from "react";
import UserSearchDialog from "./UserSearchDialog";

const CTASection: React.FC = () => {
  return (
    <div className="mt-24 mb-16 flex justify-center">
      <div className="bg-gradient-to-br from-card to-card/95 rounded-2xl border border-border shadow-lg hover:shadow-xl transition-all duration-300 p-8 max-w-2xl w-full text-center space-y-6">
        <div className="space-y-4">
          <h2 className="text-2xl lg:text-3xl font-bold text-foreground">
            Want Your Own Heatmap?
          </h2>
          <p className="text-muted-foreground text-lg">
            Search for any Hugging Face organization or user to see their model release activity.
          </p>
        </div>
        <div className="flex justify-center">
          <UserSearchDialog />
        </div>
      </div>
    </div>
  );
};

export default CTASection;