'use client';

import React from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { Card } from '@/components/ui/Card';

interface HeroProps {
  t: any; // i18n translation function
}

export const Hero: React.FC<HeroProps> = ({ t }) => {
  const templateCards = [
    { title: 'URL/Website', color: 'bg-blue-100', icon: '🌐' },
    { title: 'Contact Card', color: 'bg-purple-100', icon: '👤' },
    { title: 'Location', color: 'bg-green-100', icon: '📍' },
    { title: 'Phone Number', color: 'bg-pink-100', icon: '📞' },
  ];

  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 pt-12 pb-20">
      {/* Animated Background Orbs */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {/* Orb 1 - Blue (top-left) */}
        <div className="absolute -top-24 -left-24 w-96 h-96 bg-blue-400/30 rounded-full blur-3xl animate-blob" />

        {/* Orb 2 - Purple (top-right) */}
        <div className="absolute -top-12 -right-12 w-96 h-96 bg-purple-400/30 rounded-full blur-3xl animate-blob animation-delay-2000" />

        {/* Orb 3 - Pink (bottom-left) */}
        <div className="absolute -bottom-24 -left-12 w-96 h-96 bg-pink-400/20 rounded-full blur-3xl animate-blob animation-delay-4000" />

        {/* Orb 4 - Cyan (center-right) */}
        <div className="absolute top-1/2 -right-24 w-80 h-80 bg-cyan-400/20 rounded-full blur-3xl animate-blob animation-delay-6000" />
      </div>

      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl relative z-10">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left Content */}
          <div className="space-y-8">
            <Badge variant="info" className="inline-flex items-center space-x-2">
              <span>{t.hero.badge}</span>
            </Badge>

            <div className="space-y-6">
              <h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
                {t.hero.title}
              </h1>

              <p className="text-xl text-gray-600 leading-relaxed">
                {t.hero.subtitle}
              </p>

              <div className="space-y-3">
                {t.hero.features.map((feature: string, index: number) => (
                  <div key={index} className="flex items-center space-x-3">
                    <div className="flex-shrink-0 w-5 h-5 bg-success-500 rounded-full flex items-center justify-center">
                      <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                      </svg>
                    </div>
                    <span className="text-gray-700">{feature}</span>
                  </div>
                ))}
              </div>

              <div className="flex flex-col sm:flex-row gap-4">
                <Link href="/signup">
                  <Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
                    {t.hero.cta_primary}
                  </Button>
                </Link>
                <Link href="/#pricing">
                  <Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
                    {t.hero.cta_secondary}
                  </Button>
                </Link>
              </div>
            </div>
          </div>

          {/* Right Preview Widget */}
          <div className="relative">
            <div className="grid grid-cols-2 gap-4">
              {templateCards.map((card, index) => (
                <Card key={index} className={`${card.color} border-0 p-6 text-center hover:scale-105 transition-transform`}>
                  <div className="text-3xl mb-2">{card.icon}</div>
                  <p className="font-semibold text-gray-800">{card.title}</p>
                </Card>
              ))}
            </div>

            {/* Floating Badge */}
            <div className="absolute -top-4 -right-4 bg-success-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
              {t.hero.engagement_badge}
            </div>
          </div>
        </div>
      </div>

      {/* Smooth Gradient Fade Transition */}
      <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-b from-transparent to-gray-50 pointer-events-none" />
    </section>
  );
};