import React, { FC } from 'react';
import { motion } from 'framer-motion';
import { ContactButton } from './ContactButton';

/**
 * Hero Section component.
 */
export const HeroSection: FC = () => {
  return (
    <section className="relative h-screen flex flex-col items-center justify-center pt-20 pb-10 md:pt-0 md:pb-0 main-wrapper">
      {/* Navbar */}
      <motion.nav
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0, duration: 0.8 }}
        className="w-full py-6 md:py-8 px-6 md:px-10 sticky top-0 z-20 bg-[#0C0C0C]/90 backdrop-blur-sm border-b border-[#1a1a1a]"
      >
        <div className="flex justify-between items-center max-w-7xl mx-auto">
          <div className="text-xl font-bold text-[#BBCCD7]">Jack.</div>
          <div className="flex space-x-8 md:space-x-16">
            <div className="flex space-x-8 md:space-x-16">
              <NavLink href="#about">About</NavLink>
              <NavLink href="#services">Services</NavLink>
              <NavLink href="#projects">Projects</NavLink>
              <NavLink href="#contact">Contact</NavLink>
            </div>
          </div>
        </div>
      </motion.nav>

      {/* Content Wrapper */}
      <div className="relative flex flex-col items-center justify-center w-full z-10">
        {/* Hero Heading */}
        <motion.h1
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.15, duration: 1 }}
          className="text-black text-[14vw] sm:text-[15vw] md:text-[16vw] lg:text-[17.5vw] font-black uppercase tracking-tight leading-none whitespace-nowrap w-full hero-heading"
        >
          Hi, i'm jack
        </motion.h1>

        {/* Bottom Bar */}
        <div className="flex flex-col md:flex-row justify-between items-end pt-10 md:pt-10 pb-7 sm:pb-8 md:pb-10 w-full max-w-6xl">
          {/* Left Paragraph */}
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.35, duration: 0.8 }}
            className="text-[#D7E2EA] font-light uppercase tracking-wide leading-snug text-base sm:text-xl md:text-2xl max-w-[160px] sm:max-w-[220px] md:max-w-[260px]"
          >
            a 3d creator driven by crafting striking and unforgettable projects
          </motion.p>

          {/* Right Contact Button */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5, duration: 0.8 }}
          >
            <ContactButton>Contact Me</ContactButton>
          </motion.div>
        </div>
      </div>

      {/* Hero Portrait (Magnet Component) */}
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.6, duration: 0.8 }}
        className="absolute left-1/2 -translate-x-1/2 z-10 pointer-events-none"
      >
        <div className="relative w-[280px] sm:w-[360px] md:w-[440px] lg:w-[520px] cursor-pointer">
          <img
            src="https://shrug-person-78902957.figma.site/_components/v2/d24c01ad3a56fc65e942a1f501eb73db42d7cf9a/Rectangle_40443.81459862.png"
            alt="Jack Portrait"
            className="w-full h-auto"
          />
        </div>
      </motion.div>
    </section>
  );
};