import React, { useState } from 'react';

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

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

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

  const sections: Section[] = [
    {
      id: 1,
      title: 'Aceitação dos Termos',
      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-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
      content: (
        <p>
          Ao acessar e usar os serviços da Photum Formaturas, você concorda em cumprir e estar vinculado
          a estes Termos de Uso. Se você não concordar com algum destes termos, não utilize nossos serviços.
        </p>
      )
    },
    {
      id: 2,
      title: 'Descrição dos Serviços',
      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 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" /></svg>',
      content: (
        <>
          <p className="mb-4">A Photum Formaturas oferece:</p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Serviços de fotografia para formaturas</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Álbuns digitais e físicos</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Galeria online para visualização e download de fotos</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Serviços personalizados de acordo com as necessidades do cliente</li>
          </ul>
        </>
      )
    },
    {
      id: 3,
      title: 'Conta de Usuário',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>',
      content: (
        <>
          <p className="mb-4">Para acessar alguns recursos, você precisará criar uma conta. Você concorda em:</p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Fornecer informações precisas e atualizadas</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Manter a segurança de sua senha</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Notificar-nos sobre qualquer uso não autorizado de sua conta</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Ser responsável por todas as atividades em sua conta</li>
          </ul>
        </>
      )
    },
    {
      id: 4,
      title: 'Direitos de Propriedade Intelectual',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#492E61" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" strokeWidth={2} /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 9a3 3 0 00-3-3 3 3 0 00-3 3m0 6a3 3 0 003 3 3 3 0 003-3" /></svg>',
      content: (
        <p>
          Todas as fotografias e conteúdos produzidos pela Photum Formaturas são protegidos por direitos autorais.
          Os clientes recebem uma licença para uso pessoal das fotos adquiridas, mas a reprodução comercial
          requer autorização prévia.
        </p>
      )
    },
    {
      id: 5,
      title: 'Pagamentos e Reembolsos',
      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 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /></svg>',
      content: (
        <>
          <p className="mb-4">Nossos termos de pagamento incluem:</p>
          <ul className="list-none space-y-2">
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Pagamento parcial na reserva do serviço</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Saldo remanescente até a data do evento</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Reembolsos disponíveis conforme política específica</li>
            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Cancelamentos devem ser notificados com antecedência mínima</li>
          </ul>
        </>
      )
    },
    {
      id: 6,
      title: 'Responsabilidades e Limitações',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#FFA500" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>',
      content: (
        <p>
          A Photum Formaturas se esforça para fornecer serviços de alta qualidade, mas não se responsabiliza
          por circunstâncias além de nosso controle, como condições climáticas adversas ou problemas técnicos
          no local do evento.
        </p>
      )
    },
    {
      id: 7,
      title: 'Modificações nos Termos',
      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>',
      content: (
        <p>
          Reservamo-nos o direito de modificar estes Termos de Uso a qualquer momento. Alterações significativas
          serão notificadas aos usuários. O uso continuado dos serviços após mudanças constitui aceitação dos
          novos termos.
        </p>
      )
    },
    {
      id: 8,
      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 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>',
      content: (
        <p>
          Para dúvidas sobre estes Termos de Uso, 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' }}>
            Termos de Uso
          </h1>
          <p className="text-gray-600 text-lg">Condições para uso de nossos serviços</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>
  );
};