"use client";

import Image from "next/image";
import Link from "next/link";
import { motion, Variants } from "framer-motion";
import { useAppSelector } from "@/redux/hooks";

export default function Hero() {
  const isAuthenticated = useAppSelector((s) => s.auth.isAuthenticated);
  const TITLE_LINES = [
    "Bringing Excellence",
    "in Maritime Education",
    "and Knowledge",
  ];

  const containerVariants: Variants = {
    hidden: {},
    visible: {
      transition: { staggerChildren: 0.15, delayChildren: 0.1 },
    },
  };

  const lineContainerVariants: Variants = {
    hidden: {},
    visible: { transition: { staggerChildren: 0.025 } },
  };

  const letterVariants: Variants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] },
    },
  };

  const fadeUpVariants: Variants = {
    hidden: { opacity: 0, y: 40 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6, ease: "easeOut" },
    },
  };

  const shipVariants: Variants = {
    hidden: { opacity: 0, x: 120 },
    visible: {
      opacity: 1,
      x: 0,
      transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] },
    },
  };

  return (
    <section className="w-full overflow-hidden bg-hero-main font-sans">
      <motion.div
        className="max-w-290 mx-auto px-6 flex items-center justify-between gap-8 py-20 lg:py-28"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        {/* Left content */}
        <div className="flex-1 min-w-0">
          <motion.h1
            aria-label={TITLE_LINES.join(" ")}
            className="font-bold leading-tight text-white mb-6"
            style={{ fontSize: "clamp(2rem, 4.5vw, 3.5rem)", lineHeight: 1.15 }}
            variants={lineContainerVariants}
          >
            {TITLE_LINES.map((line, lineIdx) => (
              <span key={lineIdx} className="block" aria-hidden>
                {line.split(" ").map((word, wIdx, words) => (
                  <span key={wIdx}>
                    <span className="inline-block whitespace-nowrap">
                      {Array.from(word).map((char, i) => (
                        <motion.span
                          key={i}
                          variants={letterVariants}
                          className="inline-block"
                        >
                          {char}
                        </motion.span>
                      ))}
                    </span>
                    {wIdx < words.length - 1 && " "}
                  </span>
                ))}
              </span>
            ))}
          </motion.h1>

          <motion.p
            className="text-[#cbd5e1] mb-10 max-w-120"
            style={{ fontSize: "clamp(1rem, 1.6vw, 1.2rem)", lineHeight: 1.7 }}
            variants={fadeUpVariants}
          >
            We help seafarers by decoding maritime education in a language that
            seafarers speak and understand.
          </motion.p>

          <motion.div variants={fadeUpVariants}>
            <Link
              href={
                isAuthenticated ? "/questions" : "/login?redirect=/my-account"
              }
              className="inline-block px-8 py-3.5 rounded-full font-semibold text-white transition-all duration-200 hover:brightness-110 active:scale-95"
              style={{
                backgroundColor: "#e8a000",
                fontSize: "1.05rem",
                boxShadow: "0 4px 24px rgba(232,160,0,0.35)",
              }}
            >
              Get Started
            </Link>
          </motion.div>
        </div>

        {/* Right — ship image */}
        <motion.div
          className="shrink-0 hidden md:block"
          style={{ width: "clamp(300px, 45%, 540px)" }}
          variants={shipVariants}
        >
          <Image
            src="/assets/images/banner-ship-right.png"
            alt="Modern Maritime Ship"
            width={540}
            height={400}
            className="w-full h-auto object-contain select-none"
            draggable={false}
            priority
          />
        </motion.div>
      </motion.div>
    </section>
  );
}