import React from 'react';
// import { Swiper, SwiperSlide } from 'swiper/react';
// import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import Slider from 'react-slick';
// import 'swiper/css';
// import 'swiper/css/pagination';
// import '../styles/welcome-swiper.css';
// import 'slick-carousel/slick/slick.css';
// import 'slick-carousel/slick/slick-theme.css';

const TreatmentTitle = ({ text }: { text: string }) => {
  if (text.includes('Invisalign')) {
    return (
      <>
        Alinhadores Invisíveis (Invisalign
        <span className="text-[0.5em] align-top">®</span>
        )
      </>
    );
  }
  return <>{text}</>;
};

const Welcome = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 1000,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  };

  const treatments = [
    {
      title: 'Alinhadores Invisíveis (Invisalign®)',
      formattedTitle: <TreatmentTitle text="Alinhadores Invisíveis (Invisalign®)" />,
      description: 'Sorriso alinhado de forma discreta e confortável.',
      link: '/tratamentos#alinhadores-invisiveis',
      icon: (
        <img 
          src="/images/icones/alinhadores_invisiveis.svg"
          alt="Alinhadores Invisíveis (Invisalign®)"
          className="w-16 h-16 mb-4"
        />
      )
    },
    {
      title: 'Implantes Dentários',
      description: 'Restauramos a função e a estética do seu sorriso com soluções personalizadas.',
      link: '/tratamentos#implantes-dentarios',
      icon: (
        <img 
          src="/images/icones/implantes_dentarios.svg"
          alt="Implantes Dentários"
          className="w-16 h-16 mb-4"
        />
      )
    },
    {
      title: 'Clareamento Dental',
      description: 'Dentes mais brancos e radiantes com procedimentos modernos.',
      link: '/tratamentos#clareamento-dental',
      icon: (
        <img 
          src="/images/icones/clareamento_dental.svg"
          alt="Clareamento Dental"
          className="w-16 h-16 mb-4"
        />
      )
    },
    {
      title: 'Lentes de Contato Dental',
      description: 'Corrija imperfeições para alcançar harmonia no seu sorriso.',
      link: '/tratamentos#lentes-contato',
      icon: (
        <img 
          src="/images/icones/facetas_porcelana.svg"
          alt="Facetas de Porcelana"
          className="w-16 h-16 mb-4"
        />
      )
    },
    {
      title: 'Próteses Dentárias',
      description: 'Saúde bucal para melhorar sua qualidade de vida e autoestima.',
      link: '/tratamentos#proteses-dentarias',
      icon: (
        <img 
          src="/images/icones/proteses_dentarias.svg"
          alt="Próteses Dentárias"
          className="w-16 h-16 mb-4"
        />
      )
    },
    {
      title: 'Harmonização Orofacial',
      description: 'Realce sua beleza natural com nossos procedimentos estéticos faciais.',
      link: '/tratamentos#harmonizacao-orofacial',
      icon: (
        <img 
          src="/images/icones/harmonizacao_orofacial.svg"
          alt="Harmonização Orofacial"
          className="w-16 h-16 mb-4"
        />
      )
    },
    {
      title: 'Odontologia Preventiva',
      description: ' Cuide da sua saúde bucal e previna problemas futuros. Evite cáries, doenças gengivais e outros distúrbios com nossos tratamentos preventivos.',
      link: '/tratamentos#odontologia-preventiva',
      icon: (
        <img 
          src="/images/icones/odontologia_preventiva.svg"
          alt="Odontologia Preventiva"
          className="w-16 h-16 mb-4"
        />
      )
    },
    {
      title: 'Estética em Resina',
      link: '/tratamentos#estetica-resina',
      description: 'Restaure seu sorriso com estética em resina. Recupere a função e a beleza natural dos seus dentes, sorrindo com confiança.',
      icon: (
        <img 
          src="/images/icones/reabilitacao_oral.svg"
          alt="Reabilitação Ora"
          className="w-16 h-16 mb-4"
        />
      )
    }
  ];

  const testimonials = [
    {
      stars: 5,
      text: "Você sabe quando competência técnica alia-se ao tratamento humano e o cliente sente-se seguro de não ser só cliente? É por esta razão que já se vão mais de dez anos que sou paciente da Exzellenz Odontologia com os Doutores. Pra dizer a verdade, na Exzellenz Odontologia tive a certeza que eu não vivia mais na Idade Média. Dava pra sorrir antes do serviço ficar pronto. Alquimia dos Doutores além de outros colaboradores.",
      author: "Emanual A. S. Gonçalves Matos"
    },
    {
      stars: 5,
      text: "Obrigada, Doutores! Eu sou muito grata, em primeiro lugar a Deus por ter me abençoado com mais essa dádiva e por ter me indicado a direção certa, ou seja, até vocês da Exzellenz. Profissionais altamente competentes e capacitados, além de todo o excelente atendimento recebido na clínica. Vocês me ajudaram a realizar um sonho, o qual muitas vezes cheguei a pensar ser impossível. Espero poder continuar sonhando e juntamente com vocês realizar a segunda etapa. Também fiquei muito feliz em saber que Belém não deve nada, nesse quesito, a outras grandes capitais do Brasil. Um abraço!",
      author: "Cecilia Rodrigues"
    },
    {
      stars: 5,
      text: "Eu, desde 1999, sou cliente da Exzellenz Odontologia, dos Doutores, aos quais agradeço ao tratamento a mim dispensado, pois o cuidado deles de certa forma mudou minha vida, ou seja, meu sorriso, agradeço às suas ajudantes que sempre são atenciosas e digo que minha satisfação é imensa em ser cliente da clínica, por isso tenho prazer que este depoimento seja publicado!",
      author: "Eliana Ruth de Oliveira Cardoso"
    }
  ];

  const gallerySettings = {
    dots: true,
    infinite: true,
    speed: 1000,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
  };

  return (
    <>
      <section className="py-8 md:py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-8 md:mb-12">
            <h1 className="text-2xl md:text-4xl font-medium text-black mb-4 md:mb-6 px-4">
            Clínica odontológica de excelência no bairro Umarizal em Belém
            </h1>
            <h2 className="text-base md:text-lg text-black max-w-3xl mx-auto mb-6 md:mb-8 px-4">
            Tecnologia moderna e atendimento humanizado em um ambiente acolhedor para seu conforto durante os tratamentos. 
            </h2>
            <a
              href="https://api.whatsapp.com/send?phone=559199811012&text=Ol%C3%A1,%20vim%20do%20site%20da%20cl%C3%ADnica%20e%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es%20sobre%20os%20tratamentos"
              target="_blank"
              rel="noopener noreferrer" 
              className="inline-block bg-[#96989A] text-white px-6 py-2 md:px-8 md:py-3 text-sm md:text-base hover:bg-[#C8963C] hover:text-[#ffffff] transition-colors rounded-md"
            >
              Agendar uma consulta
            </a>
          </div>

          <Slider {...gallerySettings} className="gallery-slider mb-8 md:mb-12">
            {[1, 2, 3, 4].map((num, index) => (
              <div key={index} className="px-2">
                <img
                  src={`/images/imagem-${num}.webp`}
                  alt={`Imagem ${num} da Odontologia Exzellenz`}
                  className="w-full h-[300px] object-cover rounded-lg hover:opacity-90 transition-opacity"
                />
              </div>
            ))}
          </Slider>
        </div>
      </section>

      {/* Seção combinada de tratamentos */}
      <section className="relative bg-[#C8963C]">
        {/* Banner de fundo com gradiente */}
        <div className="absolute inset-0 z-0">
          <img
            src="/images/banner_fundo_exzellenz.webp"
            alt="Banner tratamentos"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-[#000000]/80 via-transparent to-[#000000]/80"></div>
        </div>

        {/* Conteúdo da primeira parte */}
        <div className="relative z-10 pt-16 pb-12">
          <div className="container mx-auto px-4">
            <h2 className="text-4xl text-white font-normal mb-8 drop-shadow-[0_4px_4px_rgba(0,0,0,0.9)] text-center">
              Nossos tratamentos odontológicos no Umarizal
            </h2>
            <h2 className="text-white text-lg leading-relaxed max-w-4xl mb-8 drop-shadow-[0_4px_4px_rgba(0,0,0,0.9)] text-center mx-auto">
            Na Exzellenz, clínica odontológica em Belém, cuidamos do seu sorriso e bem-estar com excelência. Oferecemos tratamentos atualizados e integrados, que vão além da estética, focando na promoção da saúde bucal completa. Nosso objetivo é proporcionar um sorriso equilibrado e contribuir para o seu bem-estar geral.
            </h2>
            <div className="flex justify-center items-center mb-12">
              <a
                href="https://api.whatsapp.com/send?phone=559199811012&text=Ol%C3%A1,%20vim%20do%20site%20da%20cl%C3%ADnica%20e%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es%20sobre%20os%20tratamentos"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-block bg-[#96989A] text-white text-lg font-medium py-4 px-12 rounded-md shadow-lg hover:bg-[#C8963C] hover:text-white transition-all duration-300 transform hover:scale-105"
              >
                Agende sua Consulta
              </a>
            </div>
          </div>
        </div>

        {/* Conteúdo da segunda parte - cards */}
        <div className="relative z-10 pb-12">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
              {treatments.map((item, index) => (
                <div key={index} className="bg-white p-4 md:p-6 rounded-lg shadow-md hover:bg-[#96989A] hover:text-white transition-colors group flex flex-col">
                  <div className="flex justify-center mb-4">
                    {React.cloneElement(item.icon as React.ReactElement, {
                      className: "w-16 h-16 mb-4 group-hover:brightness-0 group-hover:invert transition-all duration-300"
                    })}
                  </div>
                  <h3 className="text-lg md:text-xl font-semibold mb-2 md:mb-3 text-[#96989A] group-hover:text-white text-center">
                  {item.formattedTitle || item.title}
                  </h3>
                  <p className="text-sm md:text-base text-[#96989A] group-hover:text-white text-center mb-4">
                    {item.description}
                  </p>
                  <button 
                    onClick={() => window.location.href = item.link} 
                    className="mt-auto bg-[#96989A] text-white group-hover:bg-white group-hover:text-[#C8963C] py-2 px-4 rounded-md transition-colors duration-300 text-sm font-medium inline-block w-full text-center"
                  >
                    Saiba mais
                  </button>
                </div>
              ))}
            </div>
            
            {/* Botão "Ver outros serviços" */}
            <div className="flex justify-center mt-12">
              <a 
                href="/tratamentos#outros-servicos" 
                className="bg-white text-[#C8963C] hover:bg-[#96989A] hover:text-white py-3 px-8 rounded-md transition-colors duration-300 text-lg font-medium shadow-lg transform hover:scale-105 cursor-pointer"
              >
                Ver outros serviços
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Nova seção - Atributos do DNA */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 items-center">
            {/* Título */}
            <div>
              <h2 className="text-4xl font-normal text-[#96989A]">
              Nossos pilares
              </h2>
            </div>

            {/* Sofisticado */}
            <div className="bg-[#F2F2F0] p-8 rounded-lg">
              <h3 className="text-3xl font-normal text-[#96989A] mb-6">
              Cuidar
              </h3>
              <ul className="space-y-4">
                <li className="text-[#96989A]">Humanidade</li>
                <li className="text-[#96989A]">Empatia</li>
                <li className="text-[#96989A]">Cuidado</li>
              </ul>
              <div className="mt-8">
              <img 
              src="/images/icones/cuidar.svg"
              alt="Ícone cuidar"
              className="w-16 h-16 mb-4"
        />
              </div>
            </div>

            {/* Aprimorado */}
            <div className="bg-[#F2F2F0] p-8 rounded-lg">
              <h3 className="text-3xl font-normal text-[#96989A] mb-6">
              Aprimorar
              </h3>
              <ul className="space-y-4">
                <li className="text-[#96989A]">Especialização</li>
                <li className="text-[#96989A]">Inovação</li>
                <li className="text-[#96989A]">Habilidade</li>
              </ul>
              <div className="mt-8">
              <img 
          src="/images/icones/aprimorar.svg"
          alt="Ícone Aprimorar"
          className="w-16 h-16 mb-4"
        />
              </div>
            </div>

            {/* Zeloso */}
            <div className="bg-[#F2F2F0] p-8 rounded-lg">
              <h3 className="text-3xl font-normal text-[#96989A] mb-6">
              Refinar
              </h3>
              <ul className="space-y-4">
                <li className="text-[#96989A]">Conforto</li>
                <li className="text-[#96989A]">Qualidade</li>
                <li className="text-[#96989A]">Precisão</li>
              </ul>
              <div className="mt-8">
              <img 
          src="/images/icones/refinar.svg"
          alt="Ícone Refinar"
          className="w-16 h-16 mb-4"
        />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Seção de Depoimentos */}
      <section className="py-12 md:py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4">
          <div className="text-center max-w-4xl mx-auto mb-8">
            <span className="text-2xl md:text-4xl font-normal text-gray-700 block leading-relaxed">
              Compartilhando experiências. 
              <br className="md:hidden" />
              <br className="hidden md:block my-2" />
              <span className="text-sm md:text-lg">
                Veja o que nossos pacientes dizem sobre nós!
              </span>
            </span>
          </div>

          <Slider {...settings} className="testimonials-slider">
            {testimonials.map((testimonial, index) => (
              <div key={index} className="px-4 h-full">
                <div className="bg-white p-8 rounded-lg shadow-md h-[500px] flex flex-col">
                  {/* Estrelas */}
                  <div className="flex mb-4">
                    {[...Array(testimonial.stars)].map((_, i) => (
                      <svg
                        key={i}
                        className="w-6 h-6 text-yellow-400"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                      >
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                    ))}
                  </div>
                  <p className="text-gray-600 mb-4 flex-grow">"{testimonial.text}"</p>
                  <p className="font-medium text-gray-700 mt-auto">{testimonial.author}</p>
                </div>
              </div>
            ))}
          </Slider>
        </div>
      </section>

      {/* Seção de Localização e Agendamento */}
      <section className="relative py-16 md:py-24 text-white">
        {/* Background Image com Overlay */}
        <div className="absolute inset-0 z-0">
          <img
            src="/images/banner-fundo-map.webp" // Ajuste o caminho da sua imagem
            alt="Background"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-[#1E2337] bg-opacity-50"></div> {/* Overlay escuro para melhor legibilidade */}
        </div>

        {/* Conteúdo */}
        <div className="relative z-10 max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
            {/* Coluna da Localização */}
            <div className="bg-[#000000] bg-opacity-30 p-8 md:p-10 rounded-xl shadow-lg transform hover:scale-[1.02] transition-transform duration-300 hover:bg-opacity-50">
              <h2 className="text-3xl md:text-4xl font-light mb-6 text-center text-white">
                Localização privilegiada em Belém
              </h2>
              <div className="text-center mb-6 text-lg text-white">
                <p className="mb-2">Rua Antônio Barreto Edifício Village Office N° 130, Salas: 1207 e 1209 | entre Visconde de Souza Franco e Almirante Wandenkolk</p>
                <p>CEP: 66055-050 Bairro: Umarizal</p>
              </div>
              <div className="w-full h-[300px] rounded-xl overflow-hidden shadow-md">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d22562.594453373687!2d-48.50577718821843!3d-1.4499137172209822!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x92a48ea065785a11%3A0x426f595dde2f8e30!2sExzellenz%20Odontologia!5e0!3m2!1spt-BR!2sbr!4v1734010196917!5m2!1spt-BR!2sbr"
                  width="100%"
                  height="100%"
                  style={{ border: 0 }}
                  allowFullScreen
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  className="shadow-lg"
                ></iframe>
              </div>
            </div>

            {/* Coluna do Agendamento */}
            <div className="bg-[#000000] bg-opacity-30 p-8 md:p-10 rounded-xl shadow-lg transform hover:scale-[1.02] transition-transform duration-300 hover:bg-opacity-50">
              <h2 className="text-3xl md:text-4xl font-light mb-6 text-center text-white">
                Agendar consulta odontológica
              </h2>
              <p className="text-center mb-10 text-lg text-white">
                Está na hora de cuidar do seu sorriso? Entre em contato e agende sua consulta com nossa equipe especializada.
              </p>
              <div className="space-y-6 max-w-md mx-auto w-full">
                <a
                  href="tel:+5591999811012"
                  className="block w-full bg-[#96989A] text-white text-center py-5 rounded-xl text-lg font-medium hover:bg-opacity-90 transition-all duration-300 shadow-md hover:shadow-xl transform hover:-translate-y-1"
                >
                  LIGAR AGORA: (91) 99981.1012
                </a>
                <a
                  href="https://api.whatsapp.com/send?phone=559199811012&text=Ol%C3%A1,%20vim%20do%20site%20da%20cl%C3%ADnica%20e%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es%20sobre%20os%20tratamentos"
                  className="block w-full bg-[#C8963C] text-white text-center py-5 rounded-xl text-lg font-medium hover:bg-opacity-90 transition-all duration-300 shadow-md hover:shadow-xl transform hover:-translate-y-1"
                >
                  AGENDE VIA WHATSAPP
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Welcome; 