import { motion } from "framer-motion";
import { profile } from "../data/profile";
import { useReducedMotion } from "../hooks/useReducedMotion";

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

  return (
    <section className="container-px py-32 md:py-44 relative overflow-hidden">
      <div
        className="absolute inset-0 -z-10 opacity-40"
        style={{
          background:
            "radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, var(--color-accent) 15%, transparent), transparent)",
        }}
        aria-hidden
      />

      <img
        src={profile.logo}
        alt=""
        aria-hidden
        className="pointer-events-none select-none absolute left-1/2 top-1/2 -z-10 w-[460px] max-w-[70%] -translate-x-1/2 -translate-y-1/2 opacity-[0.07]"
      />

      <motion.div
        initial={reduced ? false : { opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-100px" }}
        transition={{ duration: 0.8 }}
        className="mx-auto max-w-4xl text-center flex flex-col items-center gap-8"
      >
        <span className="font-mono text-xs tracking-[0.3em] uppercase text-[color:var(--color-accent)]">
          Mi filosofía
        </span>

        <h2 className="font-display font-semibold text-4xl sm:text-6xl md:text-7xl leading-[1.05] text-gradient">
          {profile.tagline}
        </h2>

        <p className="max-w-xl text-[color:var(--color-muted)] text-lg leading-relaxed">
          {profile.philosophyQuote}
        </p>
      </motion.div>
    </section>
  );
}
