"use client";

import { motion, useReducedMotion, type Variants } from "motion/react";
import { Container, LinkButton } from "@/components/ui";
import { ContentImage } from "@/components/content-image";
import { useI18n } from "@/i18n/i18n-provider";

const sectionVariants: Variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { duration: 0.6 } },
};

const itemContainerVariants: Variants = {
  hidden: {},
  visible: { transition: { delayChildren: 0.3, staggerChildren: 0.12 } },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: "easeOut" } },
};

/**
 * Startseiten-Hero mit grossflaechigem Bild und gestaffelter
 * Einblend-Animation (Eyebrow, Headline, Text, Buttons) beim Laden.
 */
export function Hero({
  intro,
  footnote,
  location,
  image,
  video,
}: {
  intro: string;
  footnote: string;
  location: string;
  image: string | null;
  video: string | null;
}) {
  const { t } = useI18n();
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.section
      className="relative"
      initial={shouldReduceMotion ? false : "hidden"}
      animate="visible"
      variants={sectionVariants}
    >
      {video ? (
        <div className="relative h-[78vh] min-h-[520px] w-full overflow-hidden">
          <video
            src={video}
            poster={image ?? undefined}
            className="absolute inset-0 h-full w-full object-cover"
            // Nutzer mit "Bewegung reduzieren" bekommen nur das Standbild
            // (poster) statt der automatisch laufenden Videoschleife (WCAG
            // 2.2.2 "Pause, Stop, Hide" fuer automatisch startende Bewegung).
            autoPlay={!shouldReduceMotion}
            muted
            loop
            playsInline
          />
        </div>
      ) : (
        <ContentImage
          src={image}
          alt=""
          tone="forest"
          className="h-[78vh] min-h-[520px] w-full"
          label="Bienenstand im Morgenlicht · Altenmünster"
          priority
        />
      )}
      <div className="absolute inset-0 flex items-center bg-gradient-to-t from-forest/70 via-forest/10 to-transparent">
        <Container>
          <motion.div
            className="max-w-xl text-cream"
            initial={shouldReduceMotion ? false : "hidden"}
            animate="visible"
            variants={itemContainerVariants}
          >
            <motion.p
              variants={itemVariants}
              className="tracking-wide-caps text-xs text-honey-light mb-4"
            >
              {location}
            </motion.p>
            <motion.h1 variants={itemVariants} className="text-4xl md:text-6xl leading-tight">
              {t.footer.tagline}
            </motion.h1>
            <motion.p variants={itemVariants} className="mt-6 text-cream/85 max-w-md leading-relaxed">
              {intro}
            </motion.p>
            <motion.div variants={itemVariants} className="mt-10 flex flex-wrap gap-4">
              <LinkButton href="/shop">{t.home.hero.ctaPrimary}</LinkButton>
              <LinkButton
                href="/imkerei"
                variant="secondary"
                className="!border-cream !text-cream hover:!bg-cream hover:!text-forest"
              >
                {t.home.hero.ctaSecondary}
              </LinkButton>
            </motion.div>
            <motion.p variants={itemVariants} className="mt-8 text-xs text-cream/60 tracking-wide">
              {footnote}
            </motion.p>
          </motion.div>
        </Container>
      </div>
    </motion.section>
  );
}