/* global Hero */
const motion = window.motion;

function Hero() {
  // Split tagline word into letters
  const tagWords = [
    { word: 'Create.',   cls: 'y' },
    { word: 'Automate.', cls: 'b' },
    { word: 'Elevate.',  cls: 'r' },
  ];

  return (
    <section className="hero" data-screen-label="Hero">
      <motion.div
        className="hero-eyebrow"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, delay: 0.1, ease: [0.2, 0.7, 0.1, 1] }}
      >
        <span>Films</span>
        <span style={{ opacity: .55 }}>·</span>
        <span>Solutions</span>
        <span style={{ opacity: .55 }}>·</span>
        <span>Systems</span>
      </motion.div>

      <div className="hero-logo-wrap">
        {/* The "POW!" comic-book entrance — scale + rotation overshoot, then drop shadow snap */}
        <motion.img
          src="assets/logo-parent.png"
          alt="One For All"
          initial={{ scale: 0.4, rotate: -8, opacity: 0, filter: 'drop-shadow(0 0 0 rgba(255,199,44,0))' }}
          animate={{
            scale: 1, rotate: 0, opacity: 1,
            filter: 'drop-shadow(0 0 60px rgba(255,199,44,0.18))',
          }}
          transition={{
            scale: { type: 'spring', stiffness: 220, damping: 14, mass: 0.8 },
            rotate: { duration: 0.8, ease: [0.2, 0.9, 0.25, 1.2] },
            opacity: { duration: 0.4 },
            filter: { duration: 0.6, delay: 0.4 },
          }}
        />

      </div>

      <motion.div
        className="tagline"
        initial="hidden"
        animate="show"
        variants={{
          hidden: {},
          show: { transition: { staggerChildren: 0.12, delayChildren: 0.85 } },
        }}
      >
        {tagWords.map((t) => (
          <motion.span
            key={t.word}
            className={t.cls}
            variants={{
              hidden: { y: 24, opacity: 0 },
              show:   { y: 0,  opacity: 1, transition: { duration: 0.5, ease: [0.2, 0.9, 0.25, 1.2] } },
            }}
          >{t.word}</motion.span>
        ))}
      </motion.div>

      <motion.div
        className="scroll-hint"
        initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.6, duration: 0.6 }}
      >
        <span>scroll</span>
        <span className="line"></span>
      </motion.div>
    </section>
  );
}
window.Hero = Hero;