'use client';

import { motion } from 'framer-motion';
import { Wordmark } from '@/components/primitives/Wordmark';
import { CTA } from '@/components/primitives/CTA';
import { Container } from '@/components/primitives/Container';
import { FondoPuntos } from '@/components/primitives/FondoPuntos';
import { Carrusel } from '@/components/primitives/Carrusel';
import { TextoDesenfoque } from '@/components/primitives/TextoDesenfoque';
import { TarjetaSpotlight } from '@/components/primitives/TarjetaSpotlight';
import { hero, dolores } from '@/lib/content';
import { fadeInUp, staggerContainer, usePrefersReducedMotion, motionProps } from '@/lib/motion';

type Variant = 'hormozi' | 'editorial';

export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
  const reduced = usePrefersReducedMotion();
  const isHormozi = variant === 'hormozi';
  const headlineBase = isHormozi
    ? 'font-sans font-black uppercase tracking-tight'
    : 'font-sans font-bold';
  const headlineSize = 'text-5xl md:text-7xl leading-[0.98] tracking-tight';
  const clarityBorder = isHormozi ? 'border-b-[5px] border-dorado pb-0.5' : 'border-b-[3px] border-dorado pb-0.5';

  return (
    <section className="bg-white relative overflow-hidden">
      <FondoPuntos className="top-24 -right-16 w-72 md:w-[28rem] text-azul-profundo/10" interactivo />
      <FondoPuntos className="bottom-16 -left-20 w-64 md:w-96 text-dorado/20" distance={28} rows={2} interactivo />
      <Container className="relative min-h-[88vh] flex items-center py-24">
        <div className="grid gap-14 lg:grid-cols-[1.1fr_0.9fr] lg:items-center w-full">
          <motion.div variants={staggerContainer} initial="hidden" animate="visible" {...motionProps(reduced)}
            className="min-w-0 flex flex-col items-center text-center lg:items-start lg:text-left">
            <motion.div variants={fadeInUp}><Wordmark size="xl" showTagline /></motion.div>
            <motion.p variants={fadeInUp} className="mt-6 text-xs md:text-sm tracking-[0.3em] uppercase font-black text-dorado">
              {hero.eyebrow}
            </motion.p>
            <motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-azul-profundo`}>
              <TextoDesenfoque
                as="span"
                segments={[
                  { text: hero.headline.line1 },
                  { text: hero.headline.effort, className: 'text-dorado' },
                  { text: hero.headline.line3 },
                  { text: hero.headline.clarity, className: clarityBorder },
                ]}
              />
            </motion.h1>
            <motion.div variants={fadeInUp} className="mt-10 flex flex-col md:flex-row items-center gap-4">
              <CTA href="#contacto" label={hero.cta} variant="light" className="md:whitespace-nowrap" />
              <CTA href="#mecanismo" label={hero.ctaSecundario} variant="ghost" className="md:whitespace-nowrap" />
            </motion.div>
          </motion.div>
          {/* Rota las frases textuales de `dolores` — quien llega al hero se ve
              reflejado antes de haber bajado a leer la sección completa. */}
          <motion.div variants={fadeInUp} initial="hidden" animate="visible" {...motionProps(reduced)}
            className="hidden lg:block min-w-0">
            <Carrusel
              ariaLabel="Lo que sienten nuestros clientes"
              autoplayMs={4500}
              slides={dolores.quotes.map((quote) => (
                <TarjetaSpotlight key={quote} className="rounded-2xl border border-azul-profundo/10 bg-white shadow-xl shadow-azul-profundo/5 p-8 lg:p-10 min-h-[15rem] flex flex-col justify-center">
                  <p className="text-xs uppercase tracking-[0.3em] font-semibold text-dorado">lo que escuchamos</p>
                  <blockquote className="mt-4 font-sans italic text-xl lg:text-2xl leading-snug text-azul-profundo">
                    <span className="text-dorado not-italic">&ldquo;</span>{quote}<span className="text-dorado not-italic">&rdquo;</span>
                  </blockquote>
                </TarjetaSpotlight>
              ))}
            />
          </motion.div>
        </div>
      </Container>
    </section>
  );
}