import { Zap } from "lucide-react"
import { Shield } from "lucide-react"
import { Rocket } from "lucide-react"

export default function WhyHorizon() {
    return (
        <section className="w-full max-w-screen-xl mx-auto pb-40 pt-28 flex flex-col items-center justify-center">
            <div className="container px-4 md:px-6">
                <h2 className="text-5xl font-bold text-center mb-16 text-primary-700  w-fit mx-auto">"Why Horizon"</h2>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <FeatureCard
                        icon={<Rocket className="h-16 w-16 text-primary" />}
                        title="Fast"
                        subtitle="Build and deploy quickly with our streamlined tools and processes."
                    />
                    <FeatureCard
                        icon={<Shield className="h-16 w-16 text-primary" />}
                        title="Secure"
                        subtitle="Rest easy with our robust security measures and data protection."
                    />
                    <FeatureCard
                        icon={<Zap className="h-16 w-16 text-primary" />}
                        title="Valuable"
                        subtitle="Experience lightning-fast speeds and optimal efficiency."
                    />
                </div>
            </div>
        </section>
    )
}

function FeatureCard({ icon, title, subtitle }) {
    return (
        <div className="flex flex-col items-center text-center ">
            <div className="mb-4">{icon}</div>
            <h3 className="text-xl font-semibold mb-2">{title}</h3>
            <p className="text-lg">{subtitle}</p>
        </div>
    )
}