"use client"

import { Link } from "@inertiajs/react"
import styles from "./contact.module.scss"
import { motion } from "framer-motion"
import type { Variants } from "framer-motion"
import {
  FiMail,
  FiMessageSquare,
  FiClock,
} from "react-icons/fi"

/* ================= MOTION VARIANTS ================= */

const container: Variants = {
  hidden: {},
  show: {
    transition: {
      staggerChildren: 0.12,
      delayChildren: 0.15,
    },
  },
}

const item: Variants = {
  hidden: { opacity: 0, y: 26 },
  show: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.7, ease: "easeOut" },
  },
}

/* ================= COMPONENT ================= */

export default function ContactHero() {
  return (
    <section className={styles.hero}>
      {/* Background */}
      {/* <div className={styles.bgGlow} />
      <div className={styles.bgGrid} /> */}
      <motion.div
        className={styles.bgGlow}
        animate={{ opacity: [0.4, 0.65, 0.4] }}
        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
      />

      <motion.div
        className={styles.inner}
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: false, amount: 0.4 }}
      >
        {/* Pill */}
        <motion.span variants={item} className={styles.pill}>
          We’re here to help
        </motion.span>

        {/* Heading */}
        <motion.h1 variants={item}>
          Get in Touch With
          <br />
          <span>Our Support Team</span>
        </motion.h1>

        {/* Description */}
        <motion.p variants={item}>
          Have questions about our courses, enrollment process, or platform?
          Our team is always ready to provide clear guidance and fast support.
        </motion.p>

        {/* Actions */}
        <motion.div variants={item} className={styles.actions}>
          <Link href="/register" className={styles.primaryBtn}>
            Get Started
          </Link>
          <a href="#contact-form" className={styles.secondaryBtn}>
            Send a Message
          </a>
        </motion.div>

        {/* Trust strip */}
        <motion.div variants={item} className={styles.trust}>
          <div>
            <FiMail />
            <span>Email Support</span>
          </div>
          <div>
            <FiMessageSquare />
            <span>Fast Responses</span>
          </div>
          <div>
            <FiClock />
            <span>24/7 Availability</span>
          </div>
        </motion.div>
      </motion.div>
    </section>
  )
}