import React, { useEffect, useState } from 'react'
import Nova40Icon from './Nova40Icon'

function Meteor({ delay, top, left }) {
  return (
    <div
      className="meteor"
      style={{
        top: `${top}%`,
        left: `${left}%`,
        animationDelay: `${delay}s`,
        animationDuration: `${2 + Math.random() * 2}s`,
      }}
    />
  )
}

function TypeWriter({ texts, className }) {
  const [index, setIndex] = useState(0)
  const [text, setText] = useState('')
  const [deleting, setDeleting] = useState(false)

  useEffect(() => {
    const current = texts[index]
    const speed = deleting ? 40 : 80

    if (!deleting && text === current) {
      const pause = setTimeout(() => setDeleting(true), 2000)
      return () => clearTimeout(pause)
    }
    if (deleting && text === '') {
      setDeleting(false)
      setIndex((i) => (i + 1) % texts.length)
      return
    }

    const timer = setTimeout(() => {
      setText(deleting ? current.slice(0, text.length - 1) : current.slice(0, text.length + 1))
    }, speed)

    return () => clearTimeout(timer)
  }, [text, deleting, index, texts])

  return (
    <span className={className}>
      {text}
      <span className="animate-pulse text-nova-accent">|</span>
    </span>
  )
}

export default function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center pt-28 sm:pt-16 overflow-hidden">
      {/* Background Effects — more vibrant */}
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-nova-primary/15 rounded-full blur-[150px] animate-pulse-slow" />
        <div className="absolute bottom-1/3 left-1/4 w-[400px] h-[400px] bg-nova-accent/10 rounded-full blur-[120px]" />
        <div className="absolute top-1/3 right-1/4 w-[300px] h-[300px] bg-[#FF44CC]/5 rounded-full blur-[100px]" />
      </div>

      {/* Shooting stars */}
      <Meteor delay={0} top={10} left={70} />
      <Meteor delay={3} top={5} left={90} />
      <Meteor delay={6} top={15} left={50} />
      <Meteor delay={9} top={8} left={80} />

      <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-16">
          {/* Text Content */}
          <div className="flex-1 text-center lg:text-left">
            {/* Badge */}
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-nova-primary/10 border border-nova-primary/30 rounded-full mb-6 backdrop-blur-sm">
              <span className="relative flex h-2.5 w-2.5">
                <span className="ping-slow absolute inline-flex h-full w-full rounded-full bg-nova-success opacity-75" />
                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-nova-success" />
              </span>
              <span className="text-nova-primaryLight text-xs font-semibold tracking-wide uppercase">40-Day Transformation</span>
            </div>

            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-[1.1] mb-6">
              Become
              <br />
              <span className="text-shimmer">
                someone new
              </span>
            </h1>

            <p className="text-nova-textSecondary text-lg sm:text-xl max-w-lg mx-auto lg:mx-0 mb-4 leading-relaxed">
              Nova40 is a 40-day journey that helps you transform your identity through daily habits, AI-powered journaling, and real self-reflection.
            </p>

            {/* Typewriter */}
            <p className="text-nova-textMuted text-sm mb-8 h-6">
              I want to become{' '}
              <TypeWriter
                texts={['more disciplined', 'a better version of me', 'mentally stronger', 'someone who never gives up', 'truly confident']}
                className="text-nova-accent font-medium"
              />
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
              <a
                href="#download"
                className="group inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-nova-primary to-nova-primaryLight hover:from-nova-primaryLight hover:to-nova-primary rounded-full text-white font-bold transition-all glow-primary hover:scale-105 text-lg"
              >
                <svg className="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/>
                </svg>
                Download Free
              </a>
              <a
                href="#how-it-works"
                className="inline-flex items-center justify-center gap-2 px-8 py-4 border border-nova-border hover:border-nova-primary/60 rounded-full text-white font-medium transition-all hover:bg-nova-surface/50"
              >
                See How It Works
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </a>
            </div>

            {/* Social proof */}
            <div className="flex items-center gap-6 mt-10 justify-center lg:justify-start">
              <div className="flex -space-x-2">
                {['#6C63FF', '#00E5FF', '#00E676', '#FFD740'].map((c, i) => (
                  <div key={i} className="w-8 h-8 rounded-full border-2 border-nova-bg flex items-center justify-center text-[10px] font-bold" style={{ background: c, zIndex: 4 - i }}>
                    {['A', 'R', 'M', 'S'][i]}
                  </div>
                ))}
              </div>
              <div className="text-left">
                <p className="text-white text-sm font-semibold">1,000+ users</p>
                <p className="text-nova-textMuted text-xs">already transforming</p>
              </div>
            </div>
          </div>

          {/* Phone Mockup */}
          <div className="flex-shrink-0 relative phone-float">
            <div className="relative w-[280px] sm:w-[300px]">
              {/* Decorative orbit rings */}
              <div className="absolute -inset-12 border border-nova-primary/10 rounded-full animate-orbit" />
              <div className="absolute -inset-20 border border-nova-accent/5 rounded-full" style={{ animation: 'orbit 30s linear infinite reverse' }} />

              {/* Floating dots */}
              <div className="absolute -top-4 -right-4 w-4 h-4 bg-nova-accent rounded-full glow-accent animate-float" />
              <div className="absolute -bottom-2 -left-6 w-3 h-3 bg-nova-primary rounded-full glow-primary" style={{ animation: 'float 4s ease-in-out 1s infinite' }} />
              <div className="absolute top-1/3 -right-8 w-2 h-2 bg-nova-warning rounded-full" style={{ animation: 'float 5s ease-in-out 2s infinite' }} />

              {/* Phone frame */}
              <div className="relative bg-gradient-to-b from-nova-surfaceLight to-nova-surface border-2 border-nova-border rounded-[3rem] p-3 shadow-2xl shadow-nova-primary/10">
                {/* Notch */}
                <div className="absolute top-3 left-1/2 -translate-x-1/2 w-24 h-5 bg-nova-bg rounded-full z-10" />

                <div className="bg-nova-bg rounded-[2.5rem] overflow-hidden aspect-[9/19.5] flex flex-col items-center justify-center p-6 relative">
                  {/* Subtle glow inside phone */}
                  <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-40 h-40 bg-nova-primary/10 rounded-full blur-[60px]" />

                  {/* Stars inside phone screen */}
                  {[...Array(18)].map((_, i) => {
                    const size = i < 10 ? 1 + Math.random() * 1.5 : 2 + Math.random() * 1.5
                    const hasGlow = i >= 14
                    return (
                      <span
                        key={`ps-${i}`}
                        className="absolute rounded-full"
                        style={{
                          width: size,
                          height: size,
                          top: `${5 + Math.random() * 90}%`,
                          left: `${5 + Math.random() * 90}%`,
                          background: hasGlow ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.6)',
                          boxShadow: hasGlow ? `0 0 ${size * 3}px rgba(108,99,255,0.6)` : 'none',
                          animation: `starTwinkle ${2 + Math.random() * 3}s ease-in-out ${Math.random() * 4}s infinite`,
                        }}
                      />
                    )
                  })}

                  {/* Nova40 Icon */}
                  <div className="relative mb-4">
                    <Nova40Icon size={64} rounded={false} />
                    <div className="absolute -inset-2 bg-nova-primary/20 rounded-full blur-xl -z-10" />
                  </div>

                  <p className="text-white text-sm font-bold mb-0.5">Day 17 of 40</p>
                  <p className="text-nova-accent text-[10px] font-medium mb-3">42% Complete</p>

                  {/* Progress bar */}
                  <div className="w-full h-1.5 bg-nova-surfaceLight rounded-full mb-6 overflow-hidden">
                    <div className="w-[42%] h-full bg-gradient-to-r from-nova-primary via-nova-accent to-nova-success rounded-full relative">
                      <div className="absolute inset-0 bg-gradient-to-r from-transparent to-white/30 animate-pulse" />
                    </div>
                  </div>

                  {/* Mini orbit */}
                  <div className="relative w-28 h-28 mb-4">
                    <div className="absolute inset-0 border border-nova-primary/30 rounded-full" />
                    <div className="absolute inset-3 border border-nova-accent/15 rounded-full" />
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="w-5 h-5 bg-gradient-to-br from-nova-primary to-nova-accent rounded-full animate-pulse-slow" />
                    </div>
                    {[...Array(8)].map((_, i) => (
                      <div
                        key={i}
                        className="absolute w-2 h-2 rounded-full transition-colors"
                        style={{
                          background: i < 5 ? '#00E5FF' : 'rgba(28, 35, 69, 0.8)',
                          boxShadow: i < 5 ? '0 0 6px rgba(0, 229, 255, 0.5)' : 'none',
                          top: `${50 + 42 * Math.sin((i * Math.PI * 2) / 8)}%`,
                          left: `${50 + 42 * Math.cos((i * Math.PI * 2) / 8)}%`,
                          transform: 'translate(-50%, -50%)',
                        }}
                      />
                    ))}
                  </div>

                  {/* Stats mini cards */}
                  <div className="flex gap-2 w-full">
                    <div className="flex-1 bg-nova-surface/80 rounded-lg px-2 py-1.5 text-center border border-nova-border">
                      <p className="text-nova-accent text-xs font-bold">85%</p>
                      <p className="text-nova-textMuted text-[8px]">Focus</p>
                    </div>
                    <div className="flex-1 bg-nova-surface/80 rounded-lg px-2 py-1.5 text-center border border-nova-border">
                      <p className="text-nova-success text-xs font-bold">92%</p>
                      <p className="text-nova-textMuted text-[8px]">Discipline</p>
                    </div>
                    <div className="flex-1 bg-nova-surface/80 rounded-lg px-2 py-1.5 text-center border border-nova-border">
                      <p className="text-nova-warning text-xs font-bold">78%</p>
                      <p className="text-nova-textMuted text-[8px]">Consistency</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-bounce z-10">
        <p className="text-nova-textMuted text-xs">Scroll to explore</p>
        <svg className="w-4 h-4 text-nova-textMuted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7" />
        </svg>
      </div>
    </section>
  )
}
