import React from 'react'
import useReveal from '../hooks/useReveal'

const features = [
  {
    emoji: '🧠',
    title: 'AI-Powered Identity',
    description: 'Write your story and let AI help you discover your new identity and build a personalized habit plan.',
    color: 'from-nova-primary/20 to-purple-500/20',
    borderColor: 'hover:border-nova-primary/50',
    glowColor: 'rgba(108, 99, 255, 0.15)',
  },
  {
    emoji: '🎯',
    title: 'Daily Habit Tracking',
    description: 'Track up to 5 daily habits with mood check-ins and identity alignment to stay consistent.',
    color: 'from-nova-accent/20 to-cyan-500/20',
    borderColor: 'hover:border-nova-accent/50',
    glowColor: 'rgba(0, 229, 255, 0.15)',
  },
  {
    emoji: '📝',
    title: 'Smart Journaling',
    description: 'Write daily reflections and receive AI-generated insights, summaries, and motivational quotes.',
    color: 'from-nova-success/20 to-emerald-500/20',
    borderColor: 'hover:border-nova-success/50',
    glowColor: 'rgba(0, 230, 118, 0.15)',
  },
  {
    emoji: '📖',
    title: 'Habit History',
    description: 'Look back on every completed day — mood, habits, AI reflections, and journal entries all in one timeline.',
    color: 'from-nova-warning/20 to-amber-500/20',
    borderColor: 'hover:border-nova-warning/50',
    glowColor: 'rgba(255, 215, 64, 0.15)',
  },
  {
    emoji: '📊',
    title: 'Visual Progress',
    description: 'Watch your journey unfold on a beautiful orbit map with heat calendar and detailed statistics.',
    color: 'from-nova-error/20 to-rose-500/20',
    borderColor: 'hover:border-nova-error/50',
    glowColor: 'rgba(255, 82, 82, 0.15)',
  },
  {
    emoji: '✨',
    title: 'Transformation Story',
    description: 'Complete 40 days and receive an AI-written transformation story celebrating your journey.',
    color: 'from-nova-primaryLight/20 to-indigo-500/20',
    borderColor: 'hover:border-nova-primaryLight/50',
    glowColor: 'rgba(139, 133, 255, 0.15)',
  },
]

export default function Features() {
  const ref = useReveal()

  return (
    <section id="features" className="py-20 sm:py-28 relative" ref={ref}>
      {/* Section divider glow */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-px bg-gradient-to-r from-transparent via-nova-primary/40 to-transparent" />

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16 reveal">
          <p className="text-nova-accent text-sm font-semibold tracking-widest uppercase mb-3">Features</p>
          <h2 className="text-3xl sm:text-5xl font-bold mb-5">
            Everything you need to{' '}
            <span className="text-shimmer">transform</span>
          </h2>
          <p className="text-nova-textSecondary text-lg max-w-2xl mx-auto">
            Nova40 combines proven habit science with AI technology to guide your 40-day personal transformation.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, i) => (
            <div
              key={i}
              className={`reveal reveal-delay-${i % 3 + 1} glass-card p-7 ${feature.borderColor} transition-all duration-500 group hover:-translate-y-2 hover:shadow-2xl relative overflow-hidden cursor-default`}
            >
              {/* Hover glow */}
              <div
                className="absolute -top-20 -right-20 w-40 h-40 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                style={{ background: feature.glowColor }}
              />

              <div className="relative">
                <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300`}>
                  <span className="text-2xl">{feature.emoji}</span>
                </div>
                <h3 className="text-white font-bold text-lg mb-2">{feature.title}</h3>
                <p className="text-nova-textSecondary text-sm leading-relaxed">{feature.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
