%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/vacivi36/.trash/vacivitta/src/pages/
Upload File :
Create Path :
Current File : /home/vacivi36/.trash/vacivitta/src/pages/Unidades.jsx

import React, { useState, useEffect } from 'react';
import styled, { keyframes } from 'styled-components';
import { motion, AnimatePresence } from 'framer-motion';
import { FaMapMarkerAlt, FaPhone, FaClock, FaDirections, FaSearch, FaChevronDown, FaArrowRight, FaFilter, FaEnvelope } from 'react-icons/fa';

// Animations
const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const floatAnimation = keyframes`
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
`;

const PageContainer = styled.div`
  margin-top: 100px;
  padding-bottom: 60px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
`;

// Hero Section
const HeroSection = styled.section`
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), url('/homePage.png');
  background-size: cover;
  background-position: center;
  padding: 80px 60px;
  text-align: center;
  border-radius: 16px;
  margin: 0 20px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  
  @media (max-width: 768px) {
    padding: 60px 20px;
    margin: 0 10px 30px;
  }
`;

const HeroTitle = styled(motion.h1)`
  color: #0094d9;
  font-size: 2.5rem;
  margin-bottom: 20px;
  line-height: 1.2;
  
  @media (max-width: 768px) {
    font-size: 2rem;
  }
`;

const HeroSubtitle = styled(motion.p)`
  color: #333;
  font-size: 1.2rem;
  margin-bottom: 15px;
  line-height: 1.6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  
  @media (max-width: 768px) {
    font-size: 1rem;
  }
`;

const HeroCTA = styled(motion.button)`
  background-color: #0094d9;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  margin-top: 20px;
  
  &:hover {
    background-color: #0077b3;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 148, 217, 0.3);
  }
  
  @media (max-width: 768px) {
    font-size: 1rem;
  }
`;

// Search Section
const SearchSection = styled.section`
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin: 0 20px 40px;
  
  @media (max-width: 768px) {
    padding: 20px;
    margin: 0 10px 30px;
  }
`;

const SearchBar = styled.div`
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 10px;
  }
`;

const SearchInput = styled.input`
  flex: 1;
  padding: 12px 20px;
  border: 1px solid #ddd;
  border-radius: 50px 0 0 50px;
  font-size: 16px;
  
  &:focus {
    outline: none;
    border-color: #0094d9;
  }
  
  @media (max-width: 768px) {
    border-radius: 50px;
  }
`;

const SearchButton = styled.button`
  background-color: #0094d9;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 0 50px 50px 0;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  
  &:hover {
    background-color: #0077b3;
  }
  
  @media (max-width: 768px) {
    border-radius: 50px;
    justify-content: center;
  }
`;

// Units Grid
const UnitsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  padding: 0 20px;
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 10px;
  }
`;

const UnitCard = styled(motion.div)`
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  }
`;

const UnitMap = styled.iframe`
  width: 100%;
  height: 200px;
  border: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
`;

const UnitContent = styled.div`
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex: 1;
`;

const UnitTitle = styled.h3`
  color: #0094d9;
  font-size: 1.3rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
`;

const UnitInfo = styled.div`
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  
  svg {
    color: #0094d9;
    min-width: 18px;
    margin-top: 3px;
  }
  
  p {
    margin: 0;
    color: #666;
    line-height: 1.5;
  }
`;

const MapButton = styled.a`
  background-color: #3d9948;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  text-decoration: none;
  
  &:hover {
    background-color: #2d8237;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(61, 153, 72, 0.3);
  }
`;

// Map Section
const MapSection = styled.section`
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin: 40px 20px;
  
  @media (max-width: 768px) {
    margin: 30px 10px;
  }
`;

const FullMap = styled.iframe`
  width: 100%;
  height: 500px;
  border: none;
  
  @media (max-width: 768px) {
    height: 400px;
  }
`;

// Final Message Section
const FinalSection = styled.section`
  background: linear-gradient(rgba(0, 148, 217, 0.9), rgba(61, 153, 72, 0.9)), url('/mapa.png');
  background-size: cover;
  background-position: center;
  padding: 60px;
  text-align: center;
  border-radius: 16px;
  margin: 0 20px 40px;
  color: white;
  
  @media (max-width: 768px) {
    padding: 40px 20px;
    margin: 0 10px 30px;
  }
`;

const FinalTitle = styled.h2`
  font-size: 2rem;
  margin-bottom: 20px;
  color: white;
  
  @media (max-width: 768px) {
    font-size: 1.7rem;
  }
`;

const FinalMessage = styled.p`
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.6;
  color: white;
  
  @media (max-width: 768px) {
    font-size: 1rem;
  }
`;

const SectionTitle = styled.h2`
  color: #0094d9;
  font-size: 2rem;
  text-align: center;
  margin: 60px 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  
  @media (max-width: 768px) {
    font-size: 1.7rem;
    margin: 40px 0 20px;
  }
`;

function Unidades() {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredUnits, setFilteredUnits] = useState([]);
  const [allUnits, setAllUnits] = useState([]);
  const [activeMap, setActiveMap] = useState(null);

  // Vacivitta units with data from the briefing
  const units = [
    {
      id: 1,
      name: 'Vacivitta Itu - SP',
      address: 'Avenida Plaza, 70 - Chácaras Primavera, Itu/SP - 13302-100',
      phone: '(11) 2429-2154',
      mobile: '(11) 94339-4444',
      email: 'itu@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 8 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Itu+-23.264926,-47.2785293&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+Itu/@-23.2650773,-47.281248,17z/data=!4m15!1m8!3m7!1s0x94cf4ff14ef5cd4d:0x4bdeef63937f9d8f!2sAv.+Plaza,+70+-+Ch%C3%A1caras+Primavera,+Itu+-+SP,+13302-100!3b1!8m2!3d-23.2650773!4d-47.2786731!16s%2Fg%2F11c43x_lkf!3m5!1s0x94cf45555913cb93:0x73a4c3b5b78ae7eb!8m2!3d-23.264926!4d-47.2785293!16s%2Fg%2F11g9vy9v_z',
      city: 'Itu',
      cnpj: 'Vacivitta SERVICOS DE IMUNIZACAO HUMANA LTDA 26.915.400/0002-00'
    },
    {
      id: 2,
      name: 'Vacivitta Salto - SP',
      address: 'Rua Benjamin Constant, 185 - Centro, Salto/SP - 13320-120',
      phone: '(11) 4456-7060',
      mobile: '(11) 94179-7060',
      email: 'salto@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 8 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Salto+-23.2016363,-47.2907135&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+Salto+-+Cl%C3%ADnica+de+Vacinas/@-23.2016363,-47.2932884,17z/data=!3m1!4b1!4m6!3m5!1s0x94cf4e018fdcca9b:0xbbb6fea448c77fad!8m2!3d-23.2016363!4d-47.2907135!16s%2Fg%2F11c6y_h7mz',
      city: 'Salto',
      cnpj: 'Vacivitta SERVICOS DE IMUNIZACAO HUMANA LTDA - 26.915.400/0001-10'
    },
    {
      id: 3,
      name: 'Vacivitta Indaiatuba - SP',
      address: 'Rua Pedro Gonçalves, 724 - Centro, Indaiatuba/SP - 13330-210',
      phone: '(19) 3816-4991',
      mobile: '(19) 99935-2545',
      email: 'indaiatuba@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 8 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Indaiatuba+-23.0893423,-47.2183407&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+Indaiatuba+-+Cl%C3%ADnica+de+Vacinas/@-23.0893422,-47.2232116,17z/data=!4m6!3m5!1s0x94c8b5666d4a7bab:0xa13975caa0e231c0!8m2!3d-23.0893423!4d-47.2183407!16s%2Fg%2F11f62cnk2n',
      city: 'Indaiatuba',
      cnpj: 'VITTAHELP SERVICOS A SAUDE HUMANA LTDA - 44.027.730/0001-51'
    },
    {
      id: 4,
      name: 'Vacivitta Santos - SP',
      address: 'Avenida Conselheiro Nébias, 756 - Sala 1009 - Edifício Helbor - Boqueirão, Santos/SP - 11045-002',
      phone: '',
      mobile: '(13) 99183-9252',
      email: 'santos@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 9 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Santos+-23.9673536,-46.3242186&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+Santos/@-23.9673536,-46.3267935,17z/data=!3m1!4b1!4m6!3m5!1s0x94ce03137bdc69eb:0x9f7351e3dc6921eb!8m2!3d-23.9673536!4d-46.3242186!16s%2Fg%2F11pdwfbt6b',
      city: 'Santos'
    },
    {
      id: 5,
      name: 'Vacivitta Itanhaém - SP',
      address: 'Rua Leopoldino de Araújo, 39 Loja 03 - Centro, Itanhaém/SP - 13330-210',
      phone: '(13) 3366-3566',
      mobile: '(13) 99625-6832',
      email: 'itanhaem@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 9 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Itanhaem&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps?sca_esv=2020710c914fca4d&output=search&q=vacivitta+itanhaem&source=lnms&fbs=ABzOT_BtKz7R-ZruQ6npoETzOQ_nURtRYlYI1Ji-RrcDTdw2NbT_xq_dyzgoWLQmOeVBjHJU5DAIQkWYJSGQoiKqb1TEDFv1k6E6EipqcmY5YWuMBr09eifgyzWzkKUDqsrAITAQqxkSEOHZ1-XHGNAt6MArUK6zUabB1nUaSsb8a8rdG6ZWm8yFA62g6NsXqJn8fIzLHyc0nypYdw8S53Q4sah_eOUyA&entry=mc&ved=1t:200715&ictx=111',
      city: 'Itanhaém',
      cnpj: 'LITORAL SUL VACINAS - LTDA 38.211.879/0001-93'
    },
    {
      id: 6,
      name: 'Vacivitta São Paulo - SP',
      address: 'Rua Dr. Nicolau de Sousa Queirós, 177 sala 111 - Vila Mariana, São Paulo/SP - 04105-000',
      phone: '',
      mobile: '(11) 97617-5762',
      email: 'paraiso@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 9 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+São+Paulo+-23.5778029,-46.6386499&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+S%C3%A3o+Paulo/@-23.5778029,-46.6386499,17z/data=!4m14!1m7!3m6!1s0x94ce591e621135e3:0x88d513309fb907c3!2sVacivitta+S%C3%A3o+Paulo!8m2!3d-23.5778029!4d-46.6386499!16s%2Fg%2F11vk4bp6zd!3m5!1s0x94ce591e621135e3:0x88d513309fb907c3!8m2!3d-23.5778029!4d-46.6386499!16s%2Fg%2F11vk4bp6zd',
      city: 'São Paulo',
      cnpj: 'Vacivitta SERVICOS DE IMUNIZACAO HUMANA LTDA 26.915.400-0004-63'
    },
    {
      id: 7,
      name: 'Vacivitta Anápolis - GO',
      address: 'Av. Senador José Lourenço Dias nº 798, Sala T-05 - Edifício Maria Amélia - Setor Central, Anápolis/GO - 75020-010',
      phone: '',
      mobile: '(62) 9109-9098',
      email: 'anapolis@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 9 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Anápolis+-16.3257701,-48.9511853&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+An%C3%A1polis/@-16.3257701,-48.9537602,17z/data=!3m1!4b1!4m6!3m5!1s0x935ea56b6e19eeb9:0x5b270bacbbad1464!8m2!3d-16.3257701!4d-48.9511853!16s%2Fg%2F11lzw4r9cd',
      city: 'Anápolis',
      cnpj: 'Vacivitta SERVICOS DE IMUNIZACAO HUMANA LTDA 26915400/0007-06'
    },
    {
      id: 8,
      name: 'Vacivitta Brasília - DF',
      address: 'SHLS 716, Conjunto L, Torre I, Sala 102, GR 229, Centro Clínico Sul, Asa Sul, Brasília/DF - 70390-907',
      phone: '',
      mobile: '(61) 9136-2159',
      email: 'brasilia@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 9 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Brasília+-15.8255526,-47.9287773&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+Bras%C3%ADlia/@-15.8354467,-48.3662222,11.25z/data=!4m14!1m7!3m6!1s0x935a3990f7cd42af:0x44b4cdc8c277c8f4!2sVacivitta+Bras%C3%ADlia!8m2!3d-15.8255526!4d-47.9287773!16s%2Fg%2F11l33p2cjh!3m5!1s0x935a3990f7cd42af:0x44b4cdc8c277c8f4!8m2!3d-15.8255526!4d-47.9287773!16s%2Fg%2F11l33p2cjh',
      city: 'Brasília',
      cnpj: 'Vacivitta SERVICOS DE IMUNIZACAO HUMANA LTDA - 26.915.400/0003-82'
    },
    {
      id: 9,
      name: 'Vacivitta Barra - RJ',
      address: 'Link Office Mall & Stay - Av. Ayrton Senna, 2.600 - Bloco 4, Sala 226 - Barra da Tijuca, Rio De Janeiro/RJ - 22775-002',
      phone: '(21) 3549-9737',
      mobile: '',
      email: 'barra@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 9 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Barra+-22.9884798,-43.3641448&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+Barra/@-22.9884798,-43.3667197,17z/data=!3m1!4b1!4m6!3m5!1s0x9bdd416a92cb55:0xc435645b8f755842!8m2!3d-22.9884798!4d-43.3641448!16s%2Fg%2F11p3c3hmlw',
      city: 'Rio de Janeiro',
      cnpj: 'Vacivitta SERVICOS DE IMUNIZACAO HUMANA LTDA 26.915.400-0006-25'
    },
    {
      id: 10,
      name: 'Vacivitta Campinas - SP',
      address: 'Av. Brasil, 183 - Centro, Campinas/SP - 13070-178',
      phone: '',
      mobile: '(19) 97819-3527',
      email: 'campinas@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 9 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Campinas+-22.8925203,-47.0618771&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+Campinas/@-22.8925203,-47.0642589,18z/data=!4m10!1m2!2m1!1sVacivitta+campinas!3m6!1s0x94c8c9ac82219071:0x4cdedcca0059228b!8m2!3d-22.8925203!4d-47.0618771!15sChJWYWNpdml0dGEgY2FtcGluYXOSARFoZWFsdGhfY29uc3VsdGFudOABAA!16s%2Fg%2F11lzw45dth',
      city: 'Campinas',
      cnpj: 'VITTA EXPANSAO SAUDE INTEGRADA LTDA 59.256.492/0001-23'
    },
    {
      id: 11,
      name: 'Vacivitta Paulínia - SP',
      address: 'Rua Batista Perozzo, 92 - Jardim Vista Alegre, Paulínia/SP - 13140-170',
      phone: '',
      mobile: '(19) 97819-3527',
      email: 'paulinia@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 9 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Paulínia+-22.7606805,-47.1494249&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+Paul%C3%ADnia/@-22.7606805,-47.1519998,17z/data=!3m1!4b1!4m6!3m5!1s0x94c895b0eb1b1bad:0xaa65d23481fc5b16!8m2!3d-22.7606805!4d-47.1494249!16s%2Fg%2F11lzw465kw',
      city: 'Paulínia',
      cnpj: 'VITTA EXPANSAO SAUDE INTEGRADA LTDA 59.256.492/0002-04'
    },
    {
      id: 12,
      name: 'Vacivitta Sorocaba - SP',
      address: 'Avenida Professor Arthur Fonseca, 788 - Jardim Emília, Sorocaba/SP - 18030-322',
      phone: '',
      mobile: '',
      email: 'sorocaba@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 9 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Sorocaba+-23.5154163,-47.4631143&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+Sorocaba/@-23.5154163,-47.4656892,17z/data=!4m6!3m5!1s0x94c58b1bf2e57271:0x41b5526e6ccd6f5e!8m2!3d-23.5154163!4d-47.4631143!16s%2Fg%2F11x1xwc2mw',
      city: 'Sorocaba',
      cnpj: 'VITTAHELP SERVICOS A SAUDE HUMANA LTDA 44.027.730/0004-02'
    },
    {
      id: 13,
      name: 'Vacivitta Curitiba - PR',
      address: 'Rua XV de Novembro, 1155 Conj. 610 - Andar 06, Torre C - B - Cond. HUB - Homebloco HUB Home - Centro, Curitiba/PR - 80060-000',
      phone: '',
      mobile: '',
      email: 'curitiba@vacivitta.com.br',
      hours: 'Segunda a Sexta, das 9 às 18h. Sábado das 9 às 13h.',
      mapUrl: 'https://maps.google.com/maps?q=Vacivitta+Curitiba+-25.4277625,-49.2633234&t=&z=15&ie=UTF8&iwloc=&output=embed',
      directionsUrl: 'https://www.google.com/maps/place/Vacivitta+Curitiba/@-25.4277625,-49.2658983,17z/data=!3m1!4b1!4m6!3m5!1s0x94dce519faa17173:0x5e8c299e6ef5c4d5!8m2!3d-25.4277625!4d-49.2633234!16s%2Fg%2F11x0n3v7cv',
      city: 'Curitiba',
      cnpj: 'Vacivitta SERVICOS DE IMUNIZACAO HUMANA LTDA 26.915.400/0005-44'
    }
  ];

  useEffect(() => {
    setAllUnits(units);
    setFilteredUnits(units);
    
    // Verificar se há um hash na URL
    if (window.location.hash) {
      // Remover o # da URL hash
      const targetId = window.location.hash.slice(1);
      // Esperar um pouco para garantir que os elementos foram renderizados
      setTimeout(() => {
        const element = document.getElementById(targetId);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      }, 500);
    }
  }, []);

  const handleSearch = () => {
    if (searchTerm.trim() === '') {
      setFilteredUnits(allUnits);
      return;
    }

    const filtered = allUnits.filter(unit => 
      unit.city.toLowerCase().includes(searchTerm.toLowerCase()) ||
      unit.address.toLowerCase().includes(searchTerm.toLowerCase())
    );
    
    setFilteredUnits(filtered);
  };

  const scrollToMap = () => {
    document.getElementById('full-map').scrollIntoView({ behavior: 'smooth' });
  };

  const cardVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
  };

  return (
    <PageContainer>
      {/* Hero Section */}
      <HeroSection>
        <HeroTitle
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          Nossas unidades Vacivitta
        </HeroTitle>
        <HeroSubtitle
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.2 }}
        >
          Estamos presentes em diversas localidades para oferecer cuidado, saúde e bem-estar com excelência.
        </HeroSubtitle>
        <HeroCTA
          onClick={scrollToMap}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          Ver Mapa de Unidades <FaArrowRight />
        </HeroCTA>
      </HeroSection>

      {/* Search Section */}
      <SearchSection>
        <SearchBar>
          <SearchInput
            type="text"
            placeholder="Digite sua cidade ou CEP"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
          />
          <SearchButton onClick={handleSearch}>
            <FaSearch /> Procurar
          </SearchButton>
        </SearchBar>
      </SearchSection>

      {/* Units Section */}
      <SectionTitle>
        <FaMapMarkerAlt /> Nossas unidades
      </SectionTitle>
      <UnitsGrid>
        {filteredUnits.map((unit, index) => (
          <UnitCard
            key={unit.id}
            id={unit.city.toLowerCase().replace(/\s/g, '-')}
            variants={cardVariants}
            initial="hidden"
            animate="visible"
            transition={{ delay: index * 0.1 }}
            whileHover={{ y: -10 }}
          >
            <UnitMap
              src={unit.mapUrl}
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title={`Mapa de ${unit.name}`}
            />
            <UnitContent>
              <UnitTitle>
                <FaMapMarkerAlt /> {unit.name}
              </UnitTitle>
              <UnitInfo>
                <FaMapMarkerAlt />
                <p>{unit.address}</p>
              </UnitInfo>
              {unit.phone && (
                <UnitInfo>
                  <FaPhone />
                  <p>{unit.phone} {unit.mobile && `| ${unit.mobile} (WhatsApp)`}</p>
                </UnitInfo>
              )}
              {!unit.phone && unit.mobile && (
                <UnitInfo>
                  <FaPhone />
                  <p>{unit.mobile} (WhatsApp)</p>
                </UnitInfo>
              )}
              <UnitInfo>
                <FaEnvelope />
                <p>{unit.email}</p>
              </UnitInfo>
              <UnitInfo>
                <FaClock />
                <p>{unit.hours}</p>
              </UnitInfo>
              <MapButton href={unit.directionsUrl} target="_blank" rel="noopener noreferrer">
                <FaDirections /> Ver no Mapa
              </MapButton>
            </UnitContent>
          </UnitCard>
        ))}
      </UnitsGrid>

      {/* Full Map Section */}
      <MapSection id="full-map">
        <SectionTitle>
          <FaMapMarkerAlt /> Mapa de unidades
        </SectionTitle>
        <FullMap
          src="https://maps.google.com/maps?q=vacivitta&t=&z=5&ie=UTF8&iwloc=&output=embed"
          allowFullScreen=""
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          title="Mapa de unidades Vacivitta"
        />
      </MapSection>

      {/* Final Message Section */}
      <FinalSection>
        <FinalTitle>A Vacivitta está em constante crescimento!</FinalTitle>
        <FinalMessage>
          Estamos trabalhando para levar saúde e cuidado para cada canto do Brasil. 
          Em breve, chegaremos ao seu estado. Juntos, vamos construir um país mais saudável.
        </FinalMessage>
        <HeroCTA
          as="a"
          href="/fale-conosco"
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          Estamos prontos para cuidar da sua saúde, onde você estiver! <FaArrowRight />
        </HeroCTA>
      </FinalSection>
    </PageContainer>
  );
}

export default Unidades;

Zerion Mini Shell 1.0