"use client"

import React, { useEffect, useState } from "react"
import styles from "./about-hero.module.scss"
import { motion } from "framer-motion"
import { FiArrowRight } from "react-icons/fi"
import { Link } from "@inertiajs/react"

export default function AboutHero() {
  const [offsetY, setOffsetY] = useState(0)

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

  return (
    <section className={styles.hero}>
      {/* Background effects */}
      <div
        className={styles.bgGlow}
        style={{ transform: `translateY(${offsetY * 0.3}px)` }}
      />
      <div
        className={styles.bgGrid}
        style={{ transform: `translateY(${offsetY * 0.15}px)` }}
      />
      <div
        className={styles.floatingIcons}
        style={{ transform: `translateY(${offsetY * 0.25}px)` }}
      >
        <FiArrowRight className={styles.icon} />
        <FiArrowRight className={styles.icon} />
        <FiArrowRight className={styles.icon} />
      </div>

      <div className={styles.container}>
        <motion.div
          className={styles.content}
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
        >
          <h1>
            About <span>Our Company</span>
          </h1>
          <p>
            We are a leading digital investment platform combining cutting-edge technology,
            institutional-grade security, and a commitment to helping our users grow their wealth.
          </p>
          <Link href="/register" className={styles.ctaBtn}>
            Get Started
          </Link>
        </motion.div>
      </div>
    </section>
  )
}