import { Wordmark } from '@/components/primitives/Wordmark';
import { CTA } from '@/components/primitives/CTA';
import { Container } from '@/components/primitives/Container';
import { Antetitulo } from '@/components/primitives/Antetitulo';
import { FondoPuntos } from '@/components/primitives/FondoPuntos';
import { ClaridadHero } from '@/components/primitives/ClaridadHero';
import { hero, apertura } from '@/lib/content';

type Variant = 'hormozi' | 'editorial';

export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
  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 bg-hondo-blanco relative overflow-hidden">
      {/* Kept clear of the wordmark on narrow screens: at 390px the md field
          reached back across the logotype and the tagline, so the pattern read
          as collision rather than texture. */}
      <FondoPuntos className="top-80 -right-20 w-56 md:top-24 md:-right-16 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} />
      <Container className="relative min-h-[80vh] lg:min-h-[88vh] flex items-center py-16 md:py-24">
        <div className="grid gap-8 lg:gap-14 lg:grid-cols-[1.1fr_0.9fr] lg:items-center w-full">
          <div className="min-w-0 flex flex-col items-center text-center lg:items-start lg:text-left">
            <Wordmark size="xl" showTagline />
            <Antetitulo className="mt-6 md:text-sm">{hero.eyebrow}</Antetitulo>
            <h1 className={`mt-8 ${headlineBase} ${headlineSize} text-azul-profundo`}>
              {hero.headline.line1}{' '}
              <span className="text-dorado">{hero.headline.effort}</span>{' '}
              {hero.headline.line3}{' '}
              <span className={clarityBorder}>{hero.headline.clarity}</span>
            </h1>
            <p className="mt-6 text-lg md:text-xl text-azul-profundo/70 leading-relaxed max-w-xl">
              {apertura.dreamOutcome}
            </p>
            {/* Full width while stacked: at their natural widths the two CTAs
                came out ragged and unequal, which read as an accident rather
                than as hierarchy. */}
            <div className="mt-10 w-full flex flex-col md:flex-row items-stretch md:items-center md:w-auto gap-4">
              <CTA href="#contacto" label={hero.cta} variant="light" className="text-center md:whitespace-nowrap" />
              <CTA href="#proceso" label={hero.ctaSecundario} variant="ghost" className="text-center md:whitespace-nowrap" />
            </div>
          </div>
          {/* A visual representation of clarity, direction, and growth.
              The box is sized here rather than by the scene, so the space is 
              reserved before three.js arrives and nothing shifts when it does. */}
          <div className="min-w-0 h-64 lg:h-[28rem]">
            <ClaridadHero className="w-full h-full" />
          </div>
        </div>
      </Container>
    </section>
  );
}