export function MaskRevealHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#060509] text-white antialiased flex flex-col justify-center px-8 lg:px-16">
      {/* drifting aurora wash behind everything */}
      <div
        aria-hidden
        className="absolute inset-0 opacity-80"
        style={{
          background:
            "radial-gradient(40% 50% at 20% 35%, rgba(99,102,241,0.5), transparent 60%), radial-gradient(40% 50% at 78% 30%, rgba(236,72,153,0.4), transparent 60%), radial-gradient(45% 55% at 60% 80%, rgba(34,211,238,0.38), transparent 60%)",
          filter: "blur(50px)",
          animation: "mt-wash 16s ease-in-out infinite",
        }}
      />

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-8 lg:px-16 py-6">
        <span className="text-[13px] font-semibold tracking-[0.2em] uppercase text-white/80">Velynkit</span>
        <a href="#" className="rounded-full border border-white/15 px-4 py-1.5 text-[12.5px] text-white/70 hover:bg-white/10 transition-colors">Open studio ↗</a>
      </div>

      <div className="relative z-10">
        <p className="mb-5 font-mono text-[11px] uppercase tracking-[0.34em] text-white/45">
          The build &amp; deploy platform
        </p>

        {/* liquid, aurora-filled display type rendered in SVG */}
        <svg viewBox="0 0 1200 340" className="w-full max-w-5xl overflow-visible" style={{ height: "auto" }}>
          <defs>
            <linearGradient id="mt-fill" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="460" y2="120" spreadMethod="reflect">
              <stop offset="0%" stopColor="#818cf8" />
              <stop offset="28%" stopColor="#f0abfc" />
              <stop offset="55%" stopColor="#67e8f9" />
              <stop offset="80%" stopColor="#fcd34d" />
              <stop offset="100%" stopColor="#818cf8" />
              <animateTransform attributeName="gradientTransform" type="translate" from="0 0" to="920 0" dur="7s" repeatCount="indefinite" />
            </linearGradient>
            <filter id="mt-liquid" x="-8%" y="-30%" width="116%" height="160%">
              <feTurbulence type="fractalNoise" baseFrequency="0.009 0.014" numOctaves="2" seed="4" result="noise">
                <animate attributeName="baseFrequency" dur="14s" values="0.009 0.014;0.013 0.009;0.009 0.014" repeatCount="indefinite" />
              </feTurbulence>
              <feDisplacementMap in="SourceGraphic" in2="noise" scale="16" xChannelSelector="R" yChannelSelector="G" />
            </filter>
          </defs>
          <g filter="url(#mt-liquid)" style={{ filter: "drop-shadow(0 0 26px rgba(167,139,250,0.45))" }}>
            <text x="0" y="135" fontFamily="Inter, system-ui, sans-serif" fontWeight="800" fontSize="170" letterSpacing="-8" fill="url(#mt-fill)">Create.</text>
            <text x="0" y="300" fontFamily="Inter, system-ui, sans-serif" fontWeight="800" fontSize="170" letterSpacing="-8" fill="url(#mt-fill)">Ship it.</text>
          </g>
        </svg>

        <div className="mt-8 flex max-w-2xl flex-col items-start gap-6 sm:flex-row sm:items-end sm:justify-between">
          <p className="max-w-sm text-[15.5px] leading-relaxed text-white/55">
            Zero-config previews, instant rollback and a CLI that doesn&apos;t need
            a manual. Every shipping moment feels like the first.
          </p>
          <div className="flex items-center gap-3">
            <a href="#" className="rounded-full bg-white px-5 py-2.5 text-[13px] font-medium text-black transition-transform hover:-translate-y-0.5">
              Start deploying →
            </a>
            <a href="#" className="rounded-full border border-white/15 px-5 py-2.5 font-mono text-[12.5px] text-white/70 hover:bg-white/5 transition-colors">
              $ velyn deploy
            </a>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes mt-wash {
          0%, 100% { transform: translate3d(0,0,0) scale(1); }
          50% { transform: translate3d(24px,-18px,0) scale(1.08); }
        }
      `}</style>
    </div>
  );
}
Masked Type Hero
