'use client'

import { Lock, Zap, LightbulbIcon } from 'lucide-react'

const features = [
  {
    name: 'Secure Transactions',
    description: 'Bank-grade encryption for all your transactions',
    icon: Lock,
  },
  {
    name: 'Real-time Updates',
    description: 'Get instant notifications for all account activities',
    icon: Zap,
  },
  {
    name: 'Smart Savings',
    description: 'AI-powered insights to help you save more',
    icon: LightbulbIcon,
  },
]

export function Features() {
  return (
    <section className="py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight text-[#333333] sm:text-4xl">
            Features designed for you
          </h2>
        </div>
        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
            {features.map((feature) => (
              <div
                key={feature.name}
                className="flex flex-col rounded-3xl bg-gray-50 p-8"
              >
                <div className="mb-6">
                  <div className="rounded-full bg-[#FF6B4A]/10 p-3 w-fit">
                    <feature.icon className="h-6 w-6 text-[#FF6B4A]" />
                  </div>
                </div>
                <h3 className="text-lg font-semibold text-[#333333]">
                  {feature.name}
                </h3>
                <p className="mt-2 text-gray-600">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}