import { motion } from "framer-motion";
import { ArrowRight, ArrowDown } from "lucide-react";
import { profile } from "../data/profile";
import TerminalCard from "../components/TerminalCard";
import PhotoFrame from "../components/PhotoFrame";
import { useReducedMotion } from "../hooks/useReducedMotion";

export default function Hero() {
  const reduced = useReducedMotion();

  return (
    <section
      id="inicio"
      className="relative min-h-[100svh] flex items-center pt-32 pb-20 container-px"
    >
      <div className="mx-auto max-w-6xl w-full grid gap-14 lg:grid-cols-[1.15fr_0.85fr] items-center">
        <div>
          <motion.p
            initial={reduced ? false : { opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="font-mono text-sm tracking-[0.25em] uppercase text-[color:var(--color-accent)] mb-6"
          >
            Hola, soy
          </motion.p>

          <motion.h1
            initial={reduced ? false : { opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.05 }}
            className="text-4xl sm:text-5xl md:text-6xl font-semibold leading-[1.05]"
          >
            {profile.name}
          </motion.h1>

          <motion.p
            initial={reduced ? false : { opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.15 }}
            className="mt-4 text-lg sm:text-xl text-[color:var(--color-muted)]"
          >
            {profile.role}
          </motion.p>

          <motion.p
            initial={reduced ? false : { opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.22 }}
            className="mt-2 text-2xl sm:text-3xl font-display font-medium text-gradient"
          >
            "{profile.tagline}"
          </motion.p>

          <motion.p
            initial={reduced ? false : { opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="mt-6 max-w-xl text-[color:var(--color-muted)] leading-relaxed"
          >
            {profile.heroDescription}
          </motion.p>

          <motion.div
            initial={reduced ? false : { opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="mt-9 flex flex-wrap items-center gap-4"
          >
            <a
              href="#proyectos"
              className="group inline-flex items-center gap-2 rounded-full bg-[color:var(--color-accent)] text-[#05070d] font-medium px-6 py-3 transition-transform hover:-translate-y-0.5"
            >
              Ver mis proyectos
              <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
            </a>
            <a
              href="#sobre-mi"
              className="inline-flex items-center gap-2 rounded-full border border-[color:var(--color-border)] px-6 py-3 font-medium hover:border-[color:var(--color-accent)] hover:text-[color:var(--color-accent)] transition-colors"
            >
              Conóceme
            </a>
          </motion.div>
        </div>

        <motion.div
          initial={reduced ? false : { opacity: 0, scale: 0.94 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.7, delay: 0.25 }}
          className="relative mx-auto w-full max-w-sm"
        >
          <PhotoFrame src={profile.photo} alt={profile.name} />

          <div className="glass absolute -top-5 -left-5 h-16 w-16 rounded-2xl grid place-items-center shadow-lg shadow-black/40">
            <img
              src={profile.logo}
              alt={profile.logoAlt}
              className="h-9 w-9 object-contain animate-float"
            />
          </div>

          <div className="relative z-10 -mt-14 mx-3 sm:mx-5">
            <TerminalCard />
          </div>
        </motion.div>
      </div>

      <a
        href="#sobre-mi"
        className="hidden sm:flex absolute bottom-8 left-1/2 -translate-x-1/2 flex-col items-center gap-2 text-xs text-[color:var(--color-muted)]"
      >
        Desplázate
        <ArrowDown size={16} className="animate-bounce" />
      </a>
    </section>
  );
}
