'use client';
import { useEffect, CSSProperties } from 'react';
import Header from '@/components/Header';
import Fotter from '@/components/Fotter';
import dynamic from 'next/dynamic';

// Стили для страницы контактов (аналогичные стилям страницы About)
const styles = `
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes glowPulse {
  0% {
    text-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
  50% {
    text-shadow: 0 0 20px rgba(255,127,39,0.6);
  }
  100% {
    text-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
}

@keyframes borderGlow {
  0% {
    box-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(255,127,39,0.5);
  }
  100% {
    box-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
}

.page-container {
  background: radial-gradient(circle at top right, rgba(30,30,30,0.8) 0%, rgba(15,15,15,0.8) 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.page-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/noise-texture.png'), linear-gradient(145deg, rgba(255,127,39,0.1) 0%, rgba(0,0,0,0) 70%);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

.content-container {
  animation: fadeInUp 0.6s ease-out forwards;
  width: 100%;
}

.section-title {
  color: #ff7f27;
  font-size: 3rem;
  margin-bottom: 2rem;
  font-weight: bold;
  background: linear-gradient(to right, #ff7f27, #ff5500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glowPulse 3s infinite;
  text-align: center;
  letter-spacing: -0.5px;
}

.section-subtitle {
  font-size: 1.8rem;
  margin: 2rem 0 1.5rem;
  color: #ff7f27;
  font-weight: 600;
}

.contact-section {
  margin-bottom: 3rem;
  background: rgba(0,0,0,0.3);
  border-radius: 1.5rem;
  padding: 4rem; // Увеличиваем внутренний отступ
  border: 1px solid rgba(255,127,39,0.2);
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  width: 100%; // Занимает всю доступную ширину
}

.contact-intro {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 4rem;
  line-height: 1.8;
  font-size: 1.25rem;
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
  animation-delay: 0.2s;
  color: rgba(255,255,255,0.9);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 2.5rem; // Увеличиваем размер контактных элементов
  background: rgba(0,0,0,0.2);
  border-radius: 1rem;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeInLeft 0.6s forwards;
  border-left: 1px solid rgba(255,127,39,0.1);
}

.contact-item:hover {
  background: rgba(255,127,39,0.1);
  transform: translateY(-5px);
  border-left: 3px solid #ff7f27;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.contact-item-icon {
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255,127,39,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.contact-item:hover .contact-item-icon {
  background: rgba(255,127,39,0.3);
  transform: scale(1.1);
}

.map-container {
  width: 100%;
  height: 700px; // Делаем карту выше
  border-radius: 1.5rem;
  overflow: hidden;
  margin-top: 3rem;
  border: 1px solid rgba(255,127,39,0.2);
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
  animation-delay: 0.6s;
  position: relative;
  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  box-shadow: inset 0 0 20px 10px rgba(0,0,0,0.2);
  border-radius: 1.5rem;
  z-index: 100;
}

.leaflet-container {
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  z-index: 1;
}

.social-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 3rem 0;
}

.social-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,127,39,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeInUp 0.5s forwards;
}

.social-button:hover {
  background: rgba(255,127,39,0.3);
  transform: translateY(-8px);
  box-shadow: 0 15px 25px rgba(0,0,0,0.3);
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.custom-icon {
  animation: bounce 2s infinite ease-in-out;
}

.contact-value {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.9);
  margin-top: 0.3rem;
}

.contact-title {
  color: #ff7f27;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); // Фиксируем 2 колонки для более широкого блока
  gap: 2rem;
  width: 100%;
}
`;

// Стили для главного контейнера
const mainContentStyle: CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  width: '100%',
  maxWidth: '80%', // Изменено с 95vw на 80%
  margin: '0 auto',
  flex: 1,
  paddingTop: '76px',
  paddingBottom: '50px',
};

// Используем только один динамический импорт для нашего компонента карты
const MapWithNoSSR = dynamic(
  () => import('./MapComponent'),
  { 
    ssr: false,
    loading: () => (
      <div style={{
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'rgba(0,0,0,0.5)',
        borderRadius: '1.5rem',
      }}>
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '1.5rem'
        }}>
          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <style jsx>{`
              @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
              }
              svg {
                animation: spin 1.5s linear infinite;
              }
            `}</style>
            <circle cx="12" cy="12" r="10" stroke="#ff7f27" strokeWidth="2" opacity="0.25" />
            <path d="M12 2C13.3132 2 14.6136 2.25866 15.8268 2.76121C17.0401 3.26375 18.1425 4.00035 19.0711 4.92893C20.0997 5.85752 20.9362 6.95991 21.4388 8.17317C21.9413 9.38642 22.2 10.6868 22.2 12" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" />
          </svg>
          <p style={{ color: '#ff7f27', fontWeight: 'bold', fontSize: '1.2rem' }}>Загрузка карты...</p>
        </div>
      </div>
    )
  }
);

// Основной компонент страницы
export default function Contacts() {
  // Координаты местоположения (Москва)
  const position: [number, number] = [55.7558, 37.6173];
  
  useEffect(() => {
    // Только анимация элементов
    const handleAnimateElements = () => {
      const elements = document.querySelectorAll('.animate-on-scroll');
      elements.forEach((el, index) => {
        if (el instanceof HTMLElement) {
          el.style.animationDelay = `${index * 0.1}s`;
        }
      });
    };
    
    handleAnimateElements();
  }, []);

  // Контактные данные для отображения
  const contactInfo = [
    {
      icon: 'mail',
      title: 'Электронная почта',
      value: 'info@aboutme-events.ru',
      delay: '0.3s'
    },
    {
      icon: 'phone',
      title: 'Телефон',
      value: '+7 (800) 123-45-67',
      delay: '0.4s'
    },
    {
      icon: 'map',
      title: 'Адрес',
      value: 'г. Москва, ул. Творческая, д. 42, офис 314',
      delay: '0.5s'
    },
    {
      icon: 'clock',
      title: 'Время работы',
      value: 'Пн-Пт: 10:00 - 19:00, Сб: 11:00 - 17:00',
      delay: '0.6s'
    }
  ];

  // Данные о социальных сетях
  const socials = [
    { name: 'vk', icon: 'vk', delay: '0.4s' },
    { name: 'telegram', icon: 'telegram', delay: '0.5s' },
    { name: 'youtube', icon: 'youtube', delay: '0.6s' },
    { name: 'instagram', icon: 'instagram', delay: '0.7s' }
  ];

  return (
    <div className="page-container">
      <style>{styles}</style>
      <Header />
      
      <main style={mainContentStyle} className="content-container">
        <h1 className="section-title">Контакты</h1>
        
        <p className="contact-intro">
          Мы всегда рады общению! Свяжитесь с нами любым удобным способом, 
          и мы ответим на все ваши вопросы о мероприятиях, сотрудничестве 
          или предложениях.
        </p>
        
        <section className="contact-section" style={{ animationDelay: '0.2s', width: '100%' }}>
          <h2 className="section-subtitle">Наши контакты</h2>
          
          {/* Заменяем инлайн-стиль на класс */}
          <div className="contact-grid">
            {contactInfo.map((contact, index) => (
              <div 
                key={index}
                className="contact-item" 
                style={{ animationDelay: contact.delay }}
              >
                <div className="contact-item-icon">
                  {contact.icon === 'mail' && (
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                      <path d="M22 6L12 13L2 6" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  )}
                  {contact.icon === 'phone' && (
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M22 16.92V19.92C22.0011 20.1985 21.9441 20.4742 21.8329 20.7293C21.7216 20.9845 21.5588 21.2136 21.3559 21.4019C21.1529 21.5901 20.9148 21.7335 20.6557 21.8227C20.3966 21.9119 20.1227 21.9451 19.85 21.92C16.4482 21.5856 13.1766 20.5341 10.27 18.85C7.58 17.32 5.27 15.01 3.74 12.32C2.05 9.40063 1.00013 6.12404 0.670004 2.71997C0.644943 2.44729 0.677944 2.17336 0.767073 1.91429C0.856202 1.65523 0.999882 1.41724 1.18822 1.21431C1.37657 1.01138 1.60575 0.848628 1.86088 0.737462C2.116 0.626297 2.39159 0.569302 2.67 0.569969L5.67 0.569969C6.17539 0.564872 6.66584 0.736938 7.05843 1.05471C7.45103 1.37248 7.71686 1.81526 7.8 2.30997C7.97672 3.38853 8.2574 4.45124 8.64 5.47997C8.77393 5.81025 8.81413 6.17096 8.75636 6.52298C8.6986 6.87501 8.54569 7.20249 8.31 7.46997L7.09 8.68997C8.51356 11.4922 10.7078 13.6864 13.51 15.11L14.73 13.89C14.9975 13.6543 15.325 13.5014 15.677 13.4436C16.0291 13.3858 16.3898 13.426 16.72 13.56C17.7488 13.9426 18.8115 14.2233 19.89 14.4C20.3901 14.4848 20.8369 14.754 21.1542 15.1518C21.4716 15.5496 21.6399 16.0456 21.63 16.55L22 16.92Z" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  )}
                  {contact.icon === 'map' && (
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                      <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  )}
                  {contact.icon === 'clock' && (
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="12" cy="12" r="10" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                      <path d="M12 6V12L16 14" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  )}
                </div>
                
                <div>
                  <h3 className="contact-title">
                    {contact.title}
                  </h3>
                  <p className="contact-value">{contact.value}</p>
                </div>
              </div>
            ))}
          </div>
          
          <h2 className="section-subtitle" style={{ marginTop: '4rem' }}>Мы в социальных сетях</h2>
          
          <div className="social-container">
            {socials.map((social, index) => (
              <div 
                key={index}
                className="social-button"
                style={{ animationDelay: social.delay }}
              >
                {social.icon === 'vk' && (
                  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 12C2 9.87827 2.84285 7.84344 4.34315 6.34315C5.84344 4.84285 7.87827 4 10 4H14C16.1217 4 18.1566 4.84285 19.6569 6.34315C21.1571 7.84344 22 9.87827 22 12C22 14.1217 21.1571 16.1566 19.6569 17.6569C18.1566 19.1571 16.1217 20 14 20H10C7.87827 20 5.84344 19.1571 4.34315 17.6569C2.84285 16.1566 2 14.1217 2 12Z" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M8 8.5H9.5C9.5 8.5 10 9 10.5 10.5C11 12 11.5 12 12 12C12.5 12 12.5 11.5 12.5 10.5V9.5C12.5 9 12.5 8.5 13.5 8.5H15" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M15.5 11C15.5 12.5 14 16 11.5 16C9 16 8 13 8 12" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
                {social.icon === 'telegram' && (
                  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22 2L11 13" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
                {social.icon === 'youtube' && (
                  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22.5401 6.42C22.4213 5.94541 22.1794 5.51057 21.8387 5.15941C21.4981 4.80824 21.0708 4.55318 20.6001 4.42C18.8801 4 12.0001 4 12.0001 4C12.0001 4 5.12008 4 3.40008 4.46C2.92933 4.59318 2.50206 4.84824 2.16143 5.19941C1.8208 5.55057 1.57887 5.98541 1.46008 6.46C1.14577 8.20556 0.991258 9.97631 1.00008 11.75C0.988802 13.537 1.14337 15.3213 1.46008 17.08C1.59168 17.5398 1.83666 17.9581 2.17823 18.2945C2.51981 18.6308 2.9378 18.8738 3.40008 19C5.12008 19.46 12.0001 19.46 12.0001 19.46C12.0001 19.46 18.8801 19.46 20.6001 19C21.0708 18.8668 21.4981 18.6118 21.8387 18.2606C22.1794 17.9094 22.4213 17.4746 22.5401 17C22.8524 15.2676 23.0068 13.5103 23.0001 11.75C23.0113 9.96295 22.8568 8.1787 22.5401 6.42Z" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M9.75 15.02L15.5 11.75L9.75 8.47998V15.02Z" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
                {social.icon === 'instagram' && (
                  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17 2H7C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2Z" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M16 11.37C16.1234 12.2022 15.9813 13.0522 15.5938 13.799C15.2063 14.5458 14.5932 15.1514 13.8416 15.5297C13.0901 15.9079 12.2385 16.0396 11.4078 15.9059C10.5771 15.7723 9.80977 15.3801 9.21485 14.7852C8.61993 14.1902 8.22774 13.4229 8.09408 12.5922C7.96042 11.7615 8.09208 10.9099 8.47034 10.1584C8.8486 9.40685 9.4542 8.79374 10.201 8.40624C10.9478 8.01874 11.7978 7.87658 12.63 8C13.4789 8.12588 14.2649 8.52146 14.8717 9.1283C15.4785 9.73515 15.8741 10.5211 16 11.37Z" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M17.5 6.5H17.51" stroke="#ff7f27" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </div>
            ))}
          </div>
          
          <h2 className="section-subtitle" style={{ marginTop: '4rem' }}>Наше расположение</h2>
          
          <div className="map-container">
            <MapWithNoSSR position={position} />
          </div>
        </section>
      </main>
      
      <Fotter />
    </div>
  );
}