Glow Hero Section

import { HeroSection } from "@/components/ui/glow-hero-section"; // Adjust the import path as needed
import { Zap, Shield, PlayCircle } from "lucide-react";

export default function HeroAnimatedDemo() {
  // A simple handler for CTA button clicks to demonstrate functionality.
  const handleCtaClick = (type: string) => {
    // In a real app, you would replace this with navigation or other actions.
    console.log(`${type} button clicked!`);
  };

  return (
    <HeroSection
      badge={{
        icon: Zap,
        label: "Enterprise AI Solution",
        version: "v2.0",
      }}
      title={
        <>
          Secure AI That{" "}
          <span className="block bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent">
            Understands Your Business
          </span>
        </>
      }
      subtitle="Transform your organization with enterprise-grade AI, customizable agents, and comprehensive knowledge management—all with the security your business demands."
      typingPrompts={[
        "Analyze our Q4 customer feedback for improvement areas...",
        "Summarize the latest compliance documents...",
        "Create a knowledge base article on new security protocols...",
        "Generate a report on department performance metrics...",
      ]}
      primaryCta={{
        icon: Zap,
        primaryText: "Start Free Trial",
        secondaryText: "No credit card required",
        onClick: () => handleCtaClick("Primary"),
      }}
      secondaryCta={{
        icon: PlayCircle,
        primaryText: "Watch Demo",
        secondaryText: "3 min overview",
        onClick: () => handleCtaClick("Secondary"),
      }}
      trustIndicators={[
        { icon: Shield, label: "SOC 2 Compliant", colorClass: "text-green-500" },
        { icon: Shield, label: "GDPR Ready", colorClass: "text-blue-500" },
        { icon: Shield, label: "Enterprise Security", colorClass: "text-purple-500" },
      ]}
    />
  );
}