import React, { useEffect, useState } from "react"
import styles from "./started.module.scss"
import { FiUser, FiCheckCircle, FiCreditCard, FiTrendingUp } from "react-icons/fi"
import { motion } from "framer-motion"

const steps = [
  {
    icon: <FiUser />,
    title: "Create a free account",
    description: "Sign up in just a few clicks and start your investment journey."
  },
  {
    icon: <FiCheckCircle />,
    title: "Verify account (KYC)",
    description: "Secure your account by completing identity verification."
  },
  {
    icon: <FiCreditCard />,
    title: "Fund your wallet",
    description: "Deposit funds using multiple payment options securely."
  },
  {
    icon: <FiTrendingUp />,
    title: "Buy investment",
    description: "Choose an investment plan and start earning."
  }
]

const GetStarted: React.FC = () => {
  const [activeStep, setActiveStep] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveStep(prev => (prev + 1) % steps.length)
    }, 3500)

    return () => clearInterval(interval)
  }, [])

  return (
    <section className={styles.getStarted}>
      <div className={styles.container}>
        {/* Header */}
        <div className={styles.header}>
          <h2>Get started in minutes</h2>
          <p>
            Follow a simple, guided process designed to help you invest with
            confidence.
          </p>
        </div>

        {/* Stepper */}
        <div className={styles.stepper}>
          {/* Numbers + Line */}
          <div className={styles.stepsHeader}>
            <div className={styles.line}>
              <motion.div
                className={styles.progress}
                animate={{ width: `${(activeStep / (steps.length - 1)) * 100}%` }}
                transition={{ duration: 0.6, ease: "easeInOut" }}
              />
            </div>

            {steps.map((_, idx) => (
              <div
                key={idx}
                className={`${styles.stepNumber} ${
                  idx <= activeStep ? styles.active : ""
                }`}
              >
                {idx + 1}
              </div>
            ))}
          </div>

          {/* Cards */}
          <div className={styles.cards}>
            {steps.map((step, idx) => (
              <motion.div
                key={idx}
                className={`${styles.card} ${
                  idx === activeStep ? styles.active : ""
                }`}
                initial={{ opacity: 0, y: 20 }}
                animate={{
                  opacity: idx === activeStep ? 1 : 0.6,
                  y: idx === activeStep ? 0 : 10
                }}
                transition={{ duration: 0.4 }}
              >
                <div className={styles.icon}>{step.icon}</div>
                <h4>{step.title}</h4>
                <p>{step.description}</p>
              </motion.div>
            ))}
          </div>
        </div>

        <button className={styles.ctaButton}>Get Started Now</button>
      </div>
    </section>
  )
}

export default GetStarted