"use client";

import React, { useEffect, useState } from "react";
import styles from "./Hero.module.scss";
import { motion } from "framer-motion";
import { FaBitcoin, FaEthereum, FaDollarSign } from "react-icons/fa";
import { useForm } from "@inertiajs/react";
import InputError from "@/components/input-error";

const stats = [
  { title: "Active Users", value: "12,457" },
  { title: "Trades Today", value: "3,218" },
  { title: "ROI Today", value: "2.5%" },
  { title: "Portfolio", value: "$14.8M" },
  { title: "Signals Delivered", value: "5,240" },
];

const Hero: React.FC = () => {
  const [offsetY, setOffsetY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setOffsetY(window.scrollY * 0.12);
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

   const {
          data,
          setData,
          errors,
          post,
      } = useForm({
          email: "",
      });

    const handleSubmit = (
        e: React.FormEvent<HTMLFormElement>
    ) => {
        e.preventDefault();

        post(route("register.send-otp"));
    };

  return (
    <section className={styles.hero}>
      {/* Background Effects */}
      <div className={styles.bgGlow} />
      <div className={styles.bgGrid} />
      <div className={styles.bgLines}>
        <span />
        <span />
        <span />
      </div>

      {/* Floating crypto icons */}
      <div
        className={styles.floatingIcons}
        style={{ transform: `translateY(${offsetY}px)` }}
      >
        <FaBitcoin className={styles.icon} />
        <FaEthereum className={styles.icon} />
        <FaDollarSign className={styles.icon} />
      </div>

      <div className={styles.container}>
        {/* Left Content */}
        <motion.div
          className={styles.left}
          initial={{ opacity: 0, x: -40 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
        >
          <span className={styles.banner}>Grow Your Money</span>

          <h1>
            Invest Smarter,{" "}
            <span className={styles.accent}>Build Wealth Effortlessly</span>
          </h1>

          <p>
            All-in-one platform to manage investments, track performance, and
            access premium insights — secure, fast, and reliable.
          </p>

          <form onSubmit={ handleSubmit } className={styles.form}>
            <div className={styles.inputGroup}>
              <input 
                id="email"
                value={data.email} 
                type="email" 
                placeholder="Enter your email address" 
                onChange={(e) =>
                    setData(
                        "email",
                        e.target.value
                    )
                }
              />
              <button type="submit">Get Started</button>
            </div>
          </form>
          <InputError
              message={errors.email}
          />

          <p className={styles.trusted}>
            Trusted by over <strong>10,000+</strong> investors worldwide
          </p>
        </motion.div>

        {/* Right Stats Panel */}
        <motion.div
          className={styles.statsPanel}
          initial={{ opacity: 0, x: 40 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, delay: 0.2 }}
        >
          <div className={styles.statsCards}>
            {stats.map((stat, idx) => (
              <motion.div
                key={idx}
                className={styles.card}
                initial={{ y: 0 }}
                animate={{ y: [0, -6, 0] }}
                transition={{ duration: 3, repeat: Infinity, delay: idx * 0.3 }}
              >
                <h3>{stat.value}</h3>
                <p>{stat.title}</p>
              </motion.div>
            ))}
          </div>

          <motion.div
            className={styles.ceoRemark}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 1 }}
          >
            <p>
              <strong>CEO:</strong> “Our platform empowers investors to
              confidently grow and manage their wealth all from one dashboard seamlessly!.”
            </p>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export default Hero;