"use client";

import type { CSSProperties } from "react";

/** Hero synthwave: sol rayado, montañas, y una cuadrícula en perspectiva que avanza sin parar. Estilo retro-futurista de los 80, solo CSS. React + TypeScript, sin dependencias. */
export type HeroRetroGridProps = {
  title?: string;
  subtitle?: string;
  cta?: string;
  href?: string;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gchrg-root { box-sizing: border-box; position: relative; container-type: inline-size; width: 100%; min-height: 620px; overflow: hidden; color: #fff; background: linear-gradient(180deg, #0f0630 0%, #2b0a52 42%, #7a1572 60%, #ff4fa0 64%, #1a0836 64%); font: 600 16px/1.5 "Orbitron", "Eurostile", ui-sans-serif, system-ui, sans-serif; display: grid; align-content: start; justify-items: center; text-align: center; }
.gchrg-root *, .gchrg-root *::before, .gchrg-root *::after { box-sizing: border-box; }
.gchrg-root a { -webkit-tap-highlight-color: transparent; }
.gchrg-root :focus-visible { outline: 3px solid #00f0ff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .gchrg-root *, .gchrg-root *::before, .gchrg-root *::after { animation: none !important; } }
.gchrg-sun { position: absolute; left: 50%; top: 22%; width: min(52cqi, 380px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(180deg, #fff35a 0%, #ff9a3c 45%, #ff3f91 100%); box-shadow: 0 0 80px 10px rgba(255, 79, 160, .55); }
.gchrg-sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(180deg, transparent 0 56%, #2b0a52 56% 59%, transparent 59% 66%, #2b0a52 66% 70%, transparent 70% 76%, #2b0a52 76% 82%, transparent 82% 88%, #2b0a52 88% 96%, transparent 96%); }
.gchrg-mtn { position: absolute; left: 0; right: 0; top: calc(64% - 110px); height: 110px; background: #170633; clip-path: polygon(0 100%, 0 70%, 8% 40%, 14% 66%, 24% 18%, 33% 62%, 42% 34%, 50% 70%, 60% 22%, 70% 60%, 80% 30%, 90% 62%, 100% 38%, 100% 100%); filter: drop-shadow(0 -2px 0 #ff4fa0); }
.gchrg-floor { position: absolute; left: -50%; right: -50%; top: 64%; bottom: -10%; perspective: 340px; overflow: hidden; }
.gchrg-plane { position: absolute; inset: 0; transform: rotateX(62deg); transform-origin: 50% 0; background-image: linear-gradient(#ff4fd8 2px, transparent 2px), linear-gradient(90deg, #ff4fd8 2px, transparent 2px); background-size: 70px 70px; background-position: 0 0; animation: gchrg-go 1.6s linear infinite; box-shadow: inset 0 0 120px 40px #1a0836; }
.gchrg-copy { position: relative; z-index: 2; display: grid; gap: 20px; justify-items: center; padding: clamp(40px, 9cqi, 96px) 24px 0; }
.gchrg-title { margin: 0; max-width: 14ch; font: 900 clamp(40px, 9cqi, 104px)/.95 "Orbitron", "Eurostile", "Arial Black", ui-sans-serif, sans-serif; letter-spacing: -.01em; text-transform: uppercase; color: #fff; text-shadow: 3px 3px 0 #ff2fa0, 6px 6px 0 #6a2cff, 0 0 40px rgba(255, 79, 216, .7); }
.gchrg-sub { margin: 0; max-width: 40ch; color: #ffe6fa; font-size: clamp(14px, 1.7cqi, 18px); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 14px rgba(255, 79, 216, .8); }
.gchrg-cta { display: inline-flex; align-items: center; min-height: 52px; padding: 0 30px; border: 2px solid #00f0ff; color: #00f0ff; text-decoration: none; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 10px #00f0ff; background: rgba(18, 4, 44, .82); box-shadow: 0 0 16px rgba(0, 240, 255, .55), inset 0 0 16px rgba(0, 240, 255, .35); transition: background .2s, color .2s; }
.gchrg-cta:hover { background: #00f0ff; color: #12042c; text-shadow: none; }
@keyframes gchrg-go { to { background-position: 0 70px; } }`;

export function HeroRetroGrid({ title = "Acelera hacia el futuro", subtitle = "Sistemas a toda velocidad · Edición 1984", cta = "Insertar moneda", href = "#", className = "", style }: HeroRetroGridProps) {
  return (
    <section className={`gchrg-root ${className}`} style={style}>
      <style>{CSS}</style>
      <div className="gchrg-sun" aria-hidden="true" />
      <div className="gchrg-mtn" aria-hidden="true" />
      <div className="gchrg-floor" aria-hidden="true">
        <div className="gchrg-plane" />
      </div>
      <div className="gchrg-copy">
        <h1 className="gchrg-title">{title}</h1>
        <p className="gchrg-sub">{subtitle}</p>
        <a className="gchrg-cta" href={href}>
          {cta}
        </a>
      </div>
    </section>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/hero-retro-grid

import { HeroRetroGrid } from "./hero-retro-grid";

export default function Ejemplo() {
  return <HeroRetroGrid title="Ejemplo" />;
}