"use client";

import type { CSSProperties } from "react";

/** Hero con letras-ventana: la palabra gigante recorta un fondo de color en movimiento, que se ve solo a través de las letras (mezcla "screen"). React + TypeScript, sin dependencias. */
export type HeroTextoVentanaProps = {
  word?: string;
  description?: string;
  cta?: string;
  href?: string;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gchtv-root { box-sizing: border-box; position: relative; container-type: inline-size; width: 100%; min-height: 620px; overflow: hidden; background: #fff; color: #14120e; font: 500 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; display: grid; align-content: center; justify-items: center; gap: 26px; padding: 48px 24px; text-align: center; }
.gchtv-root *, .gchtv-root *::before, .gchtv-root *::after { box-sizing: border-box; }
.gchtv-root a { -webkit-tap-highlight-color: transparent; }
.gchtv-root :focus-visible { outline: 3px solid #14120e; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .gchtv-root *, .gchtv-root *::before, .gchtv-root *::after { animation: none !important; } }
.gchtv-stage { position: relative; isolation: isolate; width: 100%; max-width: 1100px; background: #0b0d1f; overflow: hidden; }
.gchtv-blob { position: absolute; border-radius: 50%; filter: blur(30px); will-change: transform; }
.gchtv-1 { width: 55%; aspect-ratio: 1; left: -5%; top: -40%; background: #ff3d81; animation: gchtv-a 9s ease-in-out infinite alternate; }
.gchtv-2 { width: 50%; aspect-ratio: 1; right: -8%; top: -10%; background: #20c4ff; animation: gchtv-b 11s ease-in-out infinite alternate; }
.gchtv-3 { width: 45%; aspect-ratio: 1; left: 28%; bottom: -50%; background: #ffd23f; animation: gchtv-c 13s ease-in-out infinite alternate; }
.gchtv-4 { width: 30%; aspect-ratio: 1; left: 50%; top: -30%; background: #7a4dff; animation: gchtv-b 8s ease-in-out infinite alternate-reverse; }
.gchtv-mask { position: relative; z-index: 2; display: grid; place-items: center; padding: .08em .1em .02em; background: #fff; color: #000; mix-blend-mode: screen; font: 900 clamp(64px, 21cqi, 260px)/.86 "Arial Black", "Impact", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.05em; text-transform: uppercase; user-select: none; }
.gchtv-desc { margin: 0; max-width: 46ch; color: #4b463b; font-size: clamp(15px, 1.8cqi, 19px); text-wrap: balance; }
.gchtv-cta { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: #14120e; color: #f6f3ec; font-weight: 600; text-decoration: none; transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .2s; }
.gchtv-cta:hover { transform: translateY(-2px); background: #2f2a1f; }
@keyframes gchtv-a { to { transform: translate(60%, 50%) scale(1.2); } }
@keyframes gchtv-b { to { transform: translate(-70%, 40%) scale(.85); } }
@keyframes gchtv-c { to { transform: translate(-60%, -50%) scale(1.25); } }`;

export function HeroTextoVentana({ word = "Abierto", description = "Una palabra, un color que se mueve detrás de ella. Tipografía con la que se ve a través.", cta = "Descubrir más", href = "#", className = "", style }: HeroTextoVentanaProps) {
  return (
    <section className={`gchtv-root ${className}`} style={style}>
      <style>{CSS}</style>
      <div className="gchtv-stage">
        <div className="gchtv-blob gchtv-1" />
        <div className="gchtv-blob gchtv-2" />
        <div className="gchtv-blob gchtv-3" />
        <div className="gchtv-blob gchtv-4" />
        <h1 className="gchtv-mask">{word}</h1>
      </div>
      <p className="gchtv-desc">{description}</p>
      <a className="gchtv-cta" href={href}>
        {cta}
      </a>
    </section>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/hero-texto-ventana

import { HeroTextoVentana } from "./hero-texto-ventana";

export default function Ejemplo() {
  return <HeroTextoVentana word="Ejemplo" />;
}