Scroll Reveal

'use client'

import { useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import { Zap, Shield, Rocket } from 'lucide-react'

const features = [
  { icon: Zap, title: 'Lightning Fast', description: 'Optimized for performance' },
  { icon: Shield, title: 'Secure', description: 'Enterprise-grade security' },
  { icon: Rocket, title: 'Scalable', description: 'Grows with your business' },
]

export function ScrollReveal() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: '-100px' })

  return (
    <div ref={ref} className="w-full px-4 py-16">
      <motion.div
        initial={{ opacity: 0, y: 50 }}
        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
        transition={{ duration: 0.6 }}
        className="mx-auto w-full max-w-4xl text-center"
      >
        <h2 className="mb-4 text-2xl font-bold sm:text-3xl md:text-4xl">Features that Matter</h2>
        <p className="mb-12 text-sm text-[var(--foreground)]/70 sm:text-base md:text-lg">
          Everything you need to build amazing products
        </p>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 md:gap-8">
          {features.map((feature, index) => {
            const Icon = feature.icon
            return (
              <motion.div
                key={feature.title}
                initial={{ opacity: 0, y: 50 }}
                animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
                transition={{ duration: 0.5, delay: index * 0.2 }}
                className="rounded-2xl border  bg-[var(--card-bg)] p-4 sm:p-6"
              >
                <motion.div
                  initial={{ scale: 0 }}
                  animate={isInView ? { scale: 1 } : { scale: 0 }}
                  transition={{ duration: 0.4, delay: index * 0.2 + 0.2, type: 'spring' }}
                  className="mb-4 inline-flex rounded-lg bg-accent/10 p-3"
                >
                  <Icon className="h-5 w-5 text-accent sm:h-6 sm:w-6" />
                </motion.div>
                <h3 className="mb-2 text-lg font-semibold sm:text-xl">{feature.title}</h3>
                <p className="text-xs text-[var(--foreground)]/70 sm:text-sm">{feature.description}</p>
              </motion.div>
            )
          })}
        </div>
      </motion.div>
    </div>
  )
}