import React, { useState } from 'react';

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

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

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

  const sections: Section[] = [
    {
      id: 1,
      title: 'Compromisso com a LGPD',
      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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>',
      content: (
        <p>
          A Photum Formaturas está comprometida em proteger seus dados pessoais e cumprir todas as
          disposições da Lei Geral de Proteção de Dados (Lei nº 13.709/2018). Esta página explica
          como tratamos seus dados em conformidade com a LGPD.
        </p>
      )
    },
    {
      id: 2,
      title: 'Princípios da LGPD',
      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">Nosso tratamento de dados segue os seguintes princípios:</p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Finalidade:</strong> Tratamento para propósitos específicos e legítimos</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Adequação:</strong> Compatível com as finalidades informadas</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Necessidade:</strong> Limitado ao mínimo necessário</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Transparência:</strong> Informações claras e acessíveis</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Segurança:</strong> Medidas técnicas e administrativas adequadas</li>
          </ul>
        </>
      )
    },
    {
      id: 3,
      title: 'Seus Direitos como Titular',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>',
      content: (
        <>
          <p className="mb-4">A LGPD garante diversos direitos sobre seus dados pessoais:</p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Confirmação da existência de tratamento</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Acesso aos dados</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Correção de dados incompletos ou desatualizados</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Anonimização, bloqueio ou eliminação de dados desnecessários</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Portabilidade dos dados a outro fornecedor</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Eliminação dos dados tratados com seu consentimento</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Informação sobre o compartilhamento de dados</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Revogação do consentimento</li>
          </ul>
        </>
      )
    },
    {
      id: 4,
      title: 'Bases Legais para Tratamento',
      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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>',
      content: (
        <>
          <p className="mb-4">Tratamos seus dados com base nas seguintes hipóteses legais:</p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Consentimento do titular</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Cumprimento de obrigação legal ou regulatória</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Execução de contrato ou procedimentos preliminares</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Exercício regular de direitos</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Legítimos interesses do controlador</li>
          </ul>
        </>
      )
    },
    {
      id: 5,
      title: 'Compartilhamento 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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" /></svg>',
      content: (
        <>
          <p className="mb-4">Seus dados podem ser compartilhados com:</p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Prestadores de serviços de pagamento</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Provedores de infraestrutura tecnológica</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Autoridades governamentais (quando exigido por lei)</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Parceiros comerciais (com seu consentimento)</li>
          </ul>
          <p className="mt-4">
            Todos os terceiros são obrigados a manter a confidencialidade e segurança de seus dados.
          </p>
        </>
      )
    },
    {
      id: 6,
      title: 'Segurança dos 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 className="mb-4">Implementamos medidas de segurança técnicas e organizacionais:</p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Criptografia de dados sensíveis</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Controles de acesso rigorosos</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Monitoramento contínuo de segurança</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Treinamento regular da equipe</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Plano de resposta a incidentes</li>
          </ul>
        </>
      )
    },
    {
      id: 7,
      title: 'Retençã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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
      content: (
        <p>
          Mantemos seus dados pessoais apenas pelo tempo necessário para cumprir as finalidades para
          as quais foram coletados, incluindo requisitos legais, contratuais, de resolução de disputas
          e aplicação de nossos acordos. Após esse período, os dados são eliminados ou anonimizados de
          forma segura.
        </p>
      )
    },
    {
      id: 8,
      title: 'Encarregado de Proteção de Dados (DPO)',
      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 className="mb-4">
            Nosso Encarregado de Proteção de Dados está disponível para esclarecer dúvidas e receber
            solicitações relacionadas aos seus direitos:
          </p>
          <div className="bg-white p-4 rounded-lg border-l-4 mt-4" style={{borderColor: '#B9CF33'}}>
            <p className="font-semibold text-gray-800 mb-2">Contato do DPO:</p>
            <p className="text-gray-700">
              <a href="mailto:lgpd@photum.com.br" className="font-semibold hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
                lgpd@photum.com.br
              </a>
            </p>
          </div>
        </>
      )
    },
    {
      id: 9,
      title: 'Autoridade Nacional de Proteção de Dados (ANPD)',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#492E61" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>',
      content: (
        <>
          <p className="mb-4">
            Você tem o direito de apresentar reclamação à Autoridade Nacional de Proteção de Dados:
          </p>
          <div className="bg-white p-4 rounded-lg border-l-4" style={{borderColor: '#492E61'}}>
            <p className="font-semibold text-gray-800 mb-2">ANPD:</p>
            <p className="text-gray-700">
              Website:{' '}
              <a href="https://www.gov.br/anpd" target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity" style={{color: '#492E61'}}>
                www.gov.br/anpd
              </a>
            </p>
          </div>
        </>
      )
    }
  ];

  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-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
            Lei Geral de Proteção de Dados
          </h1>
          <p className="text-gray-600 text-lg">Transparência e segurança no tratamento dos seus dados</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>
  );
};