import Link from 'next/link';

type AuthShowcaseProps = {
  heading: string;
  subheading: string;
};

export default function AuthShowcase({ heading, subheading }: AuthShowcaseProps) {
  return (
    <aside className="relative hidden w-1/2 flex-col items-center justify-center p-8 lg:flex bg-gradient-to-br from-primary-900 to-primary-800 text-white overflow-hidden">
      {/* Decorative floating orbs */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-1/4 left-1/4 h-24 w-24 rounded-full bg-primary-500/30 animate-pulse" />
        <div className="absolute bottom-1/3 right-1/4 h-32 w-32 rounded-full bg-primary-400/30 animate-pulse delay-200" />
        <div className="absolute top-1/2 left-1/2 h-20 w-20 rounded-full bg-primary-600/30 animate-pulse delay-400" />
      </div>

      <Link href="/" className="relative z-10 mb-8 flex items-center space-x-1 text-3xl font-bold">
        <span className="brand-dot inline-block h-4 w-4 bg-primary-500 rounded-full" aria-hidden="true" />
        Live<span className="brand-accent-light text-primary-300">2030</span>
      </Link>

      <div className="relative z-10 flex flex-col items-center space-y-4 text-center">
        <h2 className="text-2xl font-semibold">{heading}</h2>
        <p className="max-w-sm text-sm">{subheading}</p>

        <div className="glass-card w-full max-w-xs">
          <div className="flex justify-between items-center mb-2">
            <span className="badge-live bg-red-600 text-xs px-2 py-0.5 rounded">LIVE</span>
            <span className="glass-viewers text-xs">👁 842 watching</span>
          </div>
          <div className="stream-wave flex space-x-1 overflow-hidden h-4 mb-2">
            {[...Array(7)].map((_, i) => (
              <span
                key={i}
                className="block w-1 bg-primary-300 rounded-full animate-bounce"
                style={{ animationDelay: `${i * 100}ms` }}
              />
            ))}
          </div>
          <div className="glass-avatars flex flex-wrap gap-1 justify-center text-xs">
            {['TO', 'KE', 'JS'].map((txt) => (
              <span key={txt} className="bg-primary-500/30 px-2 py-0.5 rounded">
                {txt}
              </span>
            ))}
            <span className="more bg-primary-500/30 px-2 py-0.5 rounded">+99</span>
          </div>
        </div>
      </div>

      <blockquote className="relative z-10 mt-8 max-w-xs text-sm italic text-gray-200">
        “I streamed my sister’s graduation for our family abroad. Everyone felt like they were
        there.”
        <cite className="block mt-2 text-xs font-medium text-gray-300">— Tobi, Live2030 streamer</cite>
      </blockquote>
    </aside>
  );
}