import { motion } from "framer-motion";
import heroImg from "@/assets/hero-kenai.jpg";

const ease = [0.22, 1, 0.36, 1] as const;

export function Hero() {
  return (
    <section id="top" className="relative h-[100svh] w-full overflow-hidden bg-ink text-paper">
      <motion.div
        initial={{ scale: 1.0 }}
        animate={{ scale: 1.03 }}
        transition={{ duration: 12, ease: "linear", repeat: Infinity, repeatType: "reverse" }}
        className="absolute inset-0"
      >
        <img
          src={heroImg}
          alt="Summer aerial: lush green peninsula, blue Beluga Bay, Chugach Mountains in golden light"
          width={1920}
          height={1080}
          className="h-full w-full object-cover"
        />
        <div className="absolute inset-0 bg-ink/30" />
        <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-ink/70 to-transparent" />
      </motion.div>

      <div className="relative z-10 flex h-full flex-col">
        <motion.div
          initial={{ opacity: 0, y: -8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 1.6, duration: 1.2, ease }}
          className="flex items-center justify-between px-6 md:px-12 pt-8 md:pt-10"
        >
          <span
            className="label text-paper font-bold"
            style={{ textShadow: "0 2px 12px rgba(0,0,0,0.55)" }}
          >
            The Private Gem
          </span>
          <span
            className="label text-paper font-bold hidden sm:inline"
            style={{ textShadow: "0 2px 12px rgba(0,0,0,0.55)" }}
          >
            60°53′N · 150°16′W
          </span>
        </motion.div>

        <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">
          <motion.span
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4, duration: 1.0, ease }}
            className="label text-paper font-bold mb-8"
            style={{ textShadow: "0 2px 12px rgba(0,0,0,0.55)" }}
          >
            A private offering · Alaska
          </motion.span>

          <motion.h1
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.65, duration: 1.4, ease }}
            className="display text-paper text-[40px] sm:text-[56px] md:text-[80px] lg:text-[96px] max-w-[18ch]"
          >
            Alaska's Private Gem
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 1.0, duration: 1.2, ease }}
            className="mt-8 text-paper text-[15px] md:text-lg leading-relaxed tracking-wide uppercase font-bold"
            style={{ textShadow: "0 2px 12px rgba(0,0,0,0.55)" }}
          >
            144 Acres Development Opportunity
            <br />
            In The Kenai Peninsula
          </motion.p>

          <motion.p
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 1.3, duration: 1.2, ease }}
            className="mt-8 max-w-xl text-paper text-[15px] md:text-base leading-relaxed font-bold"
            style={{ textShadow: "0 2px 12px rgba(0,0,0,0.55)" }}
          >
            A one of a kind development opportunity overlooking Cook Inlet and the Chugach Mountains.
          </motion.p>
        </div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 2, duration: 1.4 }}
          className="flex flex-col items-center gap-4 pb-10"
        >
          <span className="label text-paper/55">Scroll</span>
          <motion.div
            animate={{ y: [0, 8, 0] }}
            transition={{ duration: 2.4, ease: "easeInOut", repeat: Infinity }}
            className="h-10 w-px bg-paper/40"
          />
        </motion.div>
      </div>
    </section>
  );
}