Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/private_html/src/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React from 'react';
import Link from 'next/link';
import { Shield, ArrowRight, Star } from 'lucide-react';

interface VerifiedLawyerCTAProps {
  language: 'fr' | 'en';
  variant?: 'primary' | 'secondary' | 'banner';
  className?: string;
}

const VerifiedLawyerCTA: React.FC<VerifiedLawyerCTAProps> = ({
  language,
  variant = 'primary',
  className = ''
}) => {
  const content = {
    fr: {
      title: "Devenir avocat vérifié",
      subtitle: "Rejoignez le réseau juridique principal du Québec",
      benefits: [
        "Profil vérifié avec badge officiel",
        "Accès prioritaire aux clients",
        "Outils de collaboration avancés"
      ],
      cta: "S'inscrire maintenant",
      learnMore: "En savoir plus"
    },
    en: {
      title: "Become a Verified Lawyer",
      subtitle: "Join Québec's premier legal network",
      benefits: [
        "Verified profile with official badge",
        "Priority access to clients",
        "Advanced collaboration tools"
      ],
      cta: "Register Now",
      learnMore: "Learn More"
    }
  };

  const t = content[language];
  const registerUrl = language === 'fr' ? '/register-verified' : '/en/register-verified';

  if (variant === 'banner') {
    return (
      <div className={`bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-xl shadow-lg ${className}`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <Shield className="h-8 w-8 text-yellow-300" />
            <div>
              <h3 className="text-lg font-semibold">{t.title}</h3>
              <p className="text-blue-100">{t.subtitle}</p>
            </div>
          </div>
          <Link
            href={registerUrl}
            className="bg-white text-blue-600 px-6 py-2 rounded-lg font-medium hover:bg-blue-50 transition-colors flex items-center space-x-2"
          >
            <span>{t.cta}</span>
            <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </div>
    );
  }

  if (variant === 'secondary') {
    return (
      <div className={`bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 shadow-sm ${className}`}>
        <div className="flex items-start space-x-4">
          <div className="flex-shrink-0">
            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
              <Shield className="h-6 w-6 text-blue-600 dark:text-blue-400" />
            </div>
          </div>
          <div className="flex-1">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
              {t.title}
            </h3>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              {t.subtitle}
            </p>
            <ul className="space-y-2 mb-4">
              {t.benefits.map((benefit, index) => (
                <li key={index} className="flex items-center text-sm text-gray-600 dark:text-gray-400">
                  <Star className="h-4 w-4 text-yellow-500 mr-2 flex-shrink-0" />
                  {benefit}
                </li>
              ))}
            </ul>
            <div className="flex space-x-3">
              <Link
                href={registerUrl}
                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center space-x-2"
              >
                <span>{t.cta}</span>
                <ArrowRight className="h-4 w-4" />
              </Link>
              <Link
                href="/lawyer/register-verified"
                className="text-blue-600 hover:text-blue-700 font-medium transition-colors"
              >
                {t.learnMore}
              </Link>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Primary variant (default)
  return (
    <div className={`bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 border border-blue-200 dark:border-blue-800 rounded-xl p-6 ${className}`}>
      <div className="text-center">
        <div className="flex justify-center mb-4">
          <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
            <Shield className="h-8 w-8 text-blue-600 dark:text-blue-400" />
          </div>
        </div>
        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
          {t.title}
        </h3>
        <p className="text-gray-600 dark:text-gray-400 mb-6">
          {t.subtitle}
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          {t.benefits.map((benefit, index) => (
            <div key={index} className="flex items-center justify-center text-sm text-gray-600 dark:text-gray-400">
              <Star className="h-4 w-4 text-yellow-500 mr-2 flex-shrink-0" />
              {benefit}
            </div>
          ))}
        </div>
        <Link
          href={registerUrl}
          className="inline-flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors shadow-lg hover:shadow-xl"
        >
          <span>{t.cta}</span>
          <ArrowRight className="h-5 w-5" />
        </Link>
      </div>
    </div>
  );
};

export default VerifiedLawyerCTA;