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

const steps = [
  {
    number: '01',
    emoji: '📖',
    title: 'Write Your Story',
    description: 'Tell us who you want to become. Our AI analyzes your story and creates a personalized identity transformation plan with habits tailored for you.',
    accent: 'bg-nova-primary',
    glow: 'bg-nova-primary/20',
    line: 'from-nova-primary',
  },
  {
    number: '02',
    emoji: '🔥',
    title: 'Build Daily Habits',
    description: 'Choose up to 5 daily habits that align with your new identity. Track your mood, check alignment, and build unstoppable consistency.',
    accent: 'bg-nova-accent',
    glow: 'bg-nova-accent/20',
    line: 'from-nova-accent',
  },
  {
    number: '03',
    emoji: '🪞',
    title: 'Reflect & Grow',
    description: 'Journal daily, review your habit history, and receive AI-powered reflections that deepen your self-awareness and push you further.',
    accent: 'bg-nova-success',
    glow: 'bg-nova-success/20',
    line: 'from-nova-success',
  },
  {
    number: '04',
    emoji: '🚀',
    title: 'Transform in 40 Days',
    description: 'Complete the journey and unlock your AI-generated transformation story — a celebration of the new version of you.',
    accent: 'bg-nova-warning',
    glow: 'bg-nova-warning/20',
    line: 'from-nova-warning',
  },
]

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

  return (
    <section id="how-it-works" className="py-20 sm:py-28 relative" ref={ref}>
      {/* Background gradient band */}
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-nova-surface/40 to-transparent" />
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-px bg-gradient-to-r from-transparent via-nova-accent/30 to-transparent" />

      <div className="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16 reveal">
          <p className="text-nova-primary text-sm font-semibold tracking-widest uppercase mb-3">How It Works</p>
          <h2 className="text-3xl sm:text-5xl font-bold mb-5">
            4 steps to a{' '}
            <span className="text-shimmer">new you</span>
          </h2>
          <p className="text-nova-textSecondary text-lg max-w-2xl mx-auto">
            A simple process — big transformation. Just show up for 40 days.
          </p>
        </div>

        {/* Timeline */}
        <div className="relative">
          {/* Vertical connector line — desktop only */}
          <div className="hidden md:block absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-nova-primary via-nova-accent via-nova-success to-nova-warning opacity-30" />

          <div className="space-y-12 md:space-y-16">
            {steps.map((step, i) => {
              const isLeft = i % 2 === 0
              return (
                <div key={i} className={`reveal reveal-delay-${i + 1} flex flex-col md:flex-row items-center gap-6 md:gap-12 ${isLeft ? '' : 'md:flex-row-reverse'}`}>
                  {/* Content card */}
                  <div className={`flex-1 glass-card p-6 sm:p-8 relative overflow-hidden group hover:border-nova-primary/30 transition-all duration-500 ${isLeft ? 'md:text-right' : 'md:text-left'}`}>
                    {/* Background glow on hover */}
                    <div className={`absolute -bottom-10 ${isLeft ? '-right-10' : '-left-10'} w-32 h-32 ${step.glow} rounded-full blur-[50px] opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />

                    <div className="relative">
                      <span className="text-3xl mb-3 block">{step.emoji}</span>
                      <h3 className="text-white font-bold text-xl mb-2">{step.title}</h3>
                      <p className="text-nova-textSecondary text-sm leading-relaxed">{step.description}</p>
                    </div>
                  </div>

                  {/* Center dot */}
                  <div className="relative flex-shrink-0 z-10">
                    <div className={`w-14 h-14 ${step.accent} rounded-2xl flex items-center justify-center font-bold text-white text-lg shadow-lg relative`}>
                      {step.number}
                      <div className={`absolute -inset-2 ${step.accent} rounded-2xl opacity-20 blur-sm`} />
                    </div>
                  </div>

                  {/* Spacer for alignment */}
                  <div className="flex-1 hidden md:block" />
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </section>
  )
}
