.u-section-1 .u-sheet-1 {
  min-height: 1524px;
}

.u-section-1 .u-breadcrumbs-1 {
  font-size: 0.875rem;
  margin: 25px auto 0 31px;
  padding: 10px;
}

.u-section-1 .u-products-1 {
  margin-top: 28px;
  margin-bottom: 23px;
}

.u-section-1 .u-repeater-1 {
  grid-auto-columns: calc(33.3333% - 6.66667px);
  grid-template-columns: repeat(3, calc(33.3333% - 6.66667px));
  min-height: 1404px;
  --gap: 10px;
}

.u-section-1 .u-repeater-item-1 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.15);
}

.u-section-1 .u-container-layout-1 {
  padding: 29px 30px;
}

.u-section-1 .u-image-1 {
  height: 300px;
  margin-top: 23px;
  margin-bottom: 0;
}

.u-section-1 .u-text-1 {
  margin-top: 20px;
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.u-section-1 .u-text-2 {
  margin: 20px auto 0;
}

.u-section-1 .u-product-price-1 {
  margin: 24px auto 0 0;
}

.u-section-1 .u-btn-1 {
  font-size: 0.875rem;
  border-style: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-image: none;
  margin: -34px auto 0;
  padding: 9px 40px 10px;
}

.u-section-1 .u-repeater-item-2 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.15);
}

.u-section-1 .u-container-layout-2 {
  padding: 29px 30px;
}

.u-section-1 .u-image-2 {
  height: 300px;
  margin-top: 23px;
  margin-bottom: 0;
}

.u-section-1 .u-text-3 {
  margin-top: 20px;
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.u-section-1 .u-text-4 {
  margin: 20px auto 0;
}

.u-section-1 .u-product-price-2 {
  margin: 24px auto 0 0;
}

.u-section-1 .u-btn-2 {
  font-size: 0.875rem;
  border-style: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-image: none;
  margin: -34px auto 0;
  padding: 9px 40px 10px;
}

.u-section-1 .u-repeater-item-3 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1);
}

.u-section-1 .u-container-layout-3 {
  padding: 29px 30px;
}

.u-section-1 .u-image-3 {
  height: 300px;
  margin-top: 23px;
  margin-bottom: 0;
}

.u-section-1 .u-text-5 {
  margin-top: 20px;
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.u-section-1 .u-text-6 {
  margin: 20px auto 0;
}

.u-section-1 .u-product-price-3 {
  margin: 24px auto 0 0;
}

.u-section-1 .u-btn-3 {
  font-size: 0.875rem;
  border-style: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-image: none;
  margin: -34px auto 0;
  padding: 9px 40px 10px;
}

.u-section-1 .u-repeater-item-4 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1);
}

.u-section-1 .u-container-layout-4 {
  padding: 29px 30px;
}

.u-section-1 .u-image-4 {
  height: 300px;
  margin-top: 23px;
  margin-bottom: 0;
}

.u-section-1 .u-text-7 {
  margin-top: 20px;
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.u-section-1 .u-text-8 {
  margin: 20px auto 0;
}

.u-section-1 .u-product-price-4 {
  margin: 24px auto 0 0;
}

.u-section-1 .u-btn-4 {
  font-size: 0.875rem;
  border-style: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-image: none;
  margin: -34px auto 0;
  padding: 9px 40px 10px;
}

.u-section-1 .u-repeater-item-5 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1);
}

.u-section-1 .u-container-layout-5 {
  padding: 29px 30px;
}

.u-section-1 .u-image-5 {
  height: 300px;
  margin-top: 23px;
  margin-bottom: 0;
}

.u-section-1 .u-text-9 {
  margin-top: 20px;
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.u-section-1 .u-text-10 {
  margin: 20px auto 0;
}

.u-section-1 .u-product-price-5 {
  margin: 24px auto 0 0;
}

.u-section-1 .u-btn-5 {
  font-size: 0.875rem;
  border-style: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-image: none;
  margin: -34px auto 0;
  padding: 9px 40px 10px;
}

@media (max-width: 1199px) {
  .u-section-1 .u-breadcrumbs-1 {
    margin-left: 0;
  }

  .u-section-1 .u-repeater-1 {
    grid-gap: 10px;
    min-height: 1158px;
  }

  .u-section-1 .u-image-1 {
    margin-top: 45px;
  }

  .u-section-1 .u-text-1 {
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-text-2 {
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-btn-1 {
    margin-top: 20px;
  }

  .u-section-1 .u-text-3 {
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-text-4 {
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-btn-2 {
    margin-top: 20px;
  }

  .u-section-1 .u-text-5 {
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-text-6 {
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-btn-3 {
    margin-top: 20px;
  }

  .u-section-1 .u-text-7 {
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-text-8 {
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-btn-4 {
    margin-top: 20px;
  }

  .u-section-1 .u-text-9 {
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-text-10 {
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-btn-5 {
    margin-top: 20px;
  }
}

@media (max-width: 991px) {
  .u-section-1 .u-repeater-1 {
    grid-auto-columns: calc(50% - 5px);
    grid-template-columns: repeat(2, calc(50% - 5px));
    min-height: 1996px;
  }

  .u-section-1 .u-image-1 {
    margin-top: 23px;
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-repeater-1 {
    grid-auto-columns: calc(100% - 0px);
    grid-template-columns: 100%;
  }

  .u-section-1 .u-container-layout-1 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-1 .u-image-1 {
    width: 300px;
    margin-right: 220px;
    margin-left: 0;
  }

  .u-section-1 .u-container-layout-2 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-1 .u-image-2 {
    width: 300px;
    margin-right: 220px;
    margin-left: 0;
  }

  .u-section-1 .u-container-layout-3 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-1 .u-image-3 {
    width: 300px;
    margin-right: 220px;
    margin-left: 0;
  }

  .u-section-1 .u-container-layout-4 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-1 .u-image-4 {
    width: 300px;
    margin-right: 220px;
    margin-left: 0;
  }

  .u-section-1 .u-container-layout-5 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-1 .u-image-5 {
    width: 300px;
    margin-right: 220px;
    margin-left: 0;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-repeater-1 {
    grid-auto-columns: 100%;
  }

  .u-section-1 .u-image-1 {
    margin-right: 20px;
  }

  .u-section-1 .u-image-2 {
    margin-right: 20px;
  }

  .u-section-1 .u-image-3 {
    margin-right: 20px;
  }

  .u-section-1 .u-image-4 {
    margin-right: 20px;
  }

  .u-section-1 .u-image-5 {
    margin-right: 20px;
  }
}/**
 * Home page for European travel packages website
 * Displays and manages travel package information with form and display components
 */
import React, { useState } from 'react';
import { Button } from '../components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
import { Input } from '../components/ui/input';
import { Textarea } from '../components/ui/textarea';
import { Calendar, MapPin, Clock, Edit, Save, X } from 'lucide-react';
/**
 * Interface defining the structure of a travel package
 */
interface TravelPackage {
  name: string;
  departureDate: string;
  duration: string;
  introduction: string;
  dailyProgram: string;
  includes: string;
  excludes: string;
}
/**
 * Default empty travel package template
 */
const defaultPackage: TravelPackage = {
  name: '',
  departureDate: '',
  duration: '',
  introduction: '',
  dailyProgram: '',
  includes: '',
  excludes: ''
};
export default function Home() {
  const [travelPackage, setTravelPackage] = useState(defaultPackage);
  const [isEditing, setIsEditing] = useState(true);
  /**
   * Handles input changes for form fields
   */
  const handleInputChange = (field: keyof TravelPackage, value: string) => {
    setTravelPackage(prev => ({
      ...prev,
      [field]: value
    }));
  };
  /**
   * Saves the travel package and switches to view mode
   */
  const handleSave = () => {
    setIsEditing(false);
  };
  /**
   * Resets the form and returns to editing mode
   */
  const handleEdit = () => {
    setIsEditing(true);
  };
  return (
    
      
        {/* Header */}
        
          
            Descubra a Europa
          
          
            Pacotes de viagem exclusivos para os destinos mais incríveis da Europa
          
        
        {isEditing ? (
          /* Edit Mode */
          
            
              
                
                Criar Pacote de Viagem
              
              
                Preencha os detalhes do seu pacote europeu
              
            
            
              
                
                  
                    Nome da Viagem *
                  
                   handleInputChange('name', e.target.value)}
                    placeholder="Ex: Tour pela Itália Clássica"
                    className="w-full"
                  />
                
                
                  
                    Data de Partida *
                  
                   handleInputChange('departureDate', e.target.value)}
                    className="w-full"
                  />
                
                
                  
                    Duração *
                  
                   handleInputChange('duration', e.target.value)}
                    placeholder="Ex: 10 dias / 9 noites"
                    className="w-full"
                  />
                
              
              
                
                  Introdução *
                
                 handleInputChange('introduction', e.target.value)}
                  placeholder="Descreva a experiência única desta viagem..."
                  rows={3}
                  className="w-full"
                />
              
              
                
                  Programa Diário *
                
                 handleInputChange('dailyProgram', e.target.value)}
                  placeholder="Detalhe o itinerário dia a dia..."
                  rows={4}
                  className="w-full"
                />
              
              
                
                  
                    O que está Incluído *
                  
                   handleInputChange('includes', e.target.value)}
                    placeholder="Liste todos os serviços incluídos..."
                    rows={4}
                    className="w-full"
                  />
                
                
                  
                    O que não está Incluído *
                  
                   handleInputChange('excludes', e.target.value)}
                    placeholder="Liste os serviços não incluídos..."
                    rows={4}
                    className="w-full"
                  />
                
              
              
                
                  
                  Salvar Pacote
                
                 setTravelPackage(defaultPackage)}
                  className="bg-transparent"
                >
                  
                  Limpar
                
              
            
          
        ) : (
          /* View Mode */
          
            {/* Main Trip Card */}
            
              
                
                  
                    
                      {travelPackage.name || 'Nome da Viagem'}
                    
                    
                      {travelPackage.introduction || 'Descrição da viagem'}
                    
                  
                  
                    
                    Editar
                  
                
              
              
                
                  
                    
                    
                      Data de Partida
                      
                        {travelPackage.departureDate || 'A definir'}
                      
                    
                  
                  
                  
                    
                    
                      Duração
                      
                        {travelPackage.duration || 'A definir'}
                      
                    
                  
                  
                  
                    
                    
                      Destino
                      Europa
                    
                  
                
                {/* Daily Program */}
                
                  
                    Programa Diário
                  
                  
                    
                      {travelPackage.dailyProgram || 'Programa diário a ser definido...'}
                    
                  
                
                {/* Includes & Excludes */}
                
                  
                    
                      
                        ✅ O que está Incluído
                      
                    
                    
                      
                        {travelPackage.includes ? (
                          travelPackage.includes.split('\n').map((item, index) => (
                            
                              •
                              {item}
                            
                          ))
                        ) : (
                          Serviços incluídos a definir...
                        )}
                      
                    
                  
                  
                    
                      
                        ❌ O que não está Incluído
                      
                    
                    
                      
                        {travelPackage.excludes ? (
                          travelPackage.excludes.split('\n').map((item, index) => (
                            
                              •
                              {item}
                            
                          ))
                        ) : (
                          Serviços não incluídos a definir...
                        )}
                      
                    
                  
                
              
            
            {/* Call to Action */}
            
              
                
                  Pronto para sua aventura europeia?
                
                
                  Entre em contato para mais informações e reservas
                
                
                  Solicitar Informações
                
              
            
          
        )}
      
    
  );
}