import React, { useState } from 'react';

interface PrivacyPolicyProps {
  onNavigate: (page: string) => void;
}

interface Section {
  id: number;
  title: string;
  icon: string;
  content: React.ReactNode;
}

export const PrivacyPolicy: React.FC<PrivacyPolicyProps> = ({ onNavigate }) => {
  const [openSection, setOpenSection] = useState<number | null>(null);

  const sections: Section[] = [
    {
      id: 1,
      title: 'Informações que Coletamos',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>',
      content: (
        <>
          <p className="mb-4">
            A Photum Formaturas coleta informações que você nos fornece diretamente ao criar uma conta,
            solicitar serviços ou entrar em contato conosco. Isso pode incluir:
          </p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Nome completo</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Endereço de e-mail</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Número de telefone</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Informações sobre o evento (formatura)</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Dados de pagamento (processados de forma segura)</li>
          </ul>
        </>
      )
    },
    {
      id: 2,
      title: 'Como Usamos suas Informações',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>',
      content: (
        <>
          <p className="mb-4">Utilizamos as informações coletadas para:</p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Fornecer e gerenciar nossos serviços de fotografia</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Processar pagamentos e enviar confirmações</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Comunicar sobre seus eventos e serviços contratados</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Melhorar nossos serviços e experiência do cliente</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Enviar atualizações e informações relevantes</li>
          </ul>
        </>
      )
    },
    {
      id: 3,
      title: 'Proteção de Dados',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>',
      content: (
        <p>
          Implementamos medidas de segurança técnicas e organizacionais para proteger suas informações
          pessoais contra acesso não autorizado, alteração, divulgação ou destruição.
        </p>
      )
    },
    {
      id: 4,
      title: 'Compartilhamento de Informações',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /></svg>',
      content: (
        <p>
          Não vendemos, alugamos ou compartilhamos suas informações pessoais com terceiros, exceto
          quando necessário para fornecer nossos serviços ou quando exigido por lei.
        </p>
      )
    },
    {
      id: 5,
      title: 'Seus Direitos',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" /></svg>',
      content: (
        <>
          <p className="mb-4">Você tem o direito de:</p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Acessar suas informações pessoais</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Corrigir dados incorretos</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Solicitar a exclusão de seus dados</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Retirar seu consentimento a qualquer momento</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Solicitar a portabilidade de seus dados</li>
          </ul>
        </>
      )
    },
    {
      id: 6,
      title: 'Contato',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>',
      content: (
        <p>
          Para questões sobre esta Política de Privacidade, entre em contato conosco em:{' '}
          <a href="mailto:contato@photum.com.br" className="font-semibold hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
            contato@photum.com.br
          </a>
        </p>
      )
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white py-12 sm:py-20 px-4 sm:px-8">
      <div className="max-w-6xl mx-auto">
        <button
          onClick={() => onNavigate('home')}
          className="mb-8 flex items-center gap-2 text-gray-600 hover:text-[#492E61] transition-all duration-300 group"
        >
          <svg className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          Voltar para Home
        </button>
        
        <div className="text-center mb-12 fade-in">
          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
            Política de Privacidade
          </h1>
          <p className="text-gray-600 text-lg">Sua privacidade é nossa prioridade</p>
        </div>

        <div className="grid gap-4 sm:gap-6">
          {sections.map((section, index) => (
            <div
              key={section.id}
              className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-2xl"
              style={{
                animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
              }}
            >
              <button
                onClick={() => setOpenSection(openSection === section.id ? null : section.id)}
                className="w-full px-6 sm:px-8 py-6 flex items-center justify-between text-left bg-gradient-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-all duration-300"
              >
                <div className="flex items-center gap-4 flex-1">
                  <div className="transform transition-transform duration-300 hover:scale-110" dangerouslySetInnerHTML={{ __html: section.icon }} />
                  <h2 className="text-xl sm:text-2xl font-bold text-gray-800">
                    {section.title}
                  </h2>
                </div>
                <svg
                  className={`w-6 h-6 transition-transform duration-300 ${
                    openSection === section.id ? 'rotate-180' : ''
                  }`}
                  style={{ color: '#492E61' }}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              
              <div
                className={`overflow-hidden transition-all duration-500 ${
                  openSection === section.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
                }`}
              >
                <div className="px-6 sm:px-8 py-6 bg-gradient-to-br from-gray-50 to-white border-t border-gray-100">
                  <div className="text-gray-700 leading-relaxed">
                    {section.content}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 text-center p-6 bg-white rounded-2xl shadow-lg">
          <p className="text-gray-600">
            <span className="font-semibold" style={{ color: '#492E61' }}>Última atualização:</span> Janeiro de 2025
          </p>
        </div>
      </div>

      <style>{`
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .fade-in {
          animation: fadeInUp 0.8s ease-out;
        }
      `}</style>
    </div>
  );
};