// import { useState } from "react"
// import videoback from '../vids/backvideo2.webm'

// export default function Component() {
//   const [formData, setFormData] = useState({
//     name: '',
//     email: '',
//     message: ''
//   })

//   const handleSubmit = (e) => {
//     e.preventDefault()
//     console.log('Form submitted:', formData)
//   }

//   const handleChange = (e) => {
//     setFormData({
//       ...formData,
//       [e.target.name]: e.target.value
//     })
//   }

//   return (
//     <div id="contacts-section" className="relative w-full min-h-[700px] bg-white">
//       <div className="relative flex justify-center items-center max-w-6xl mx-auto p-8 h-full">
//         {/* Main container with video background */}
//         <div className="w-full relative p-12 rounded-3xl overflow-hidden">
//           {/* Video background */}
//           <div className="absolute inset-0 z-0">
//             <video 
//               autoPlay 
//               loop 
//               muted 
//               playsInline
//               className="w-full h-full object-cover rounded-3xl"
//             >
//               <source src={videoback} type="video/webm" />
//               Your browser does not support the video tag.
//             </video>
//             {/* Optional overlay for better text visibility */}
//             <div 
//               className="absolute inset-0 rounded-3xl"
//               style={{
//                 background: 'linear-gradient(135deg, rgba(118, 184, 42, 0.3), rgba(144, 201, 92, 0.3))',
//                 backdropFilter: 'blur(5px)',
//               }}
//             />
//           </div>
          
//           {/* Content */}
//           <div className="relative z-10 flex justify-between items-center gap-12">
//             {/* Text content */}
//             <div className="w-1/2">
//               <h2 className="text-4xl font-extrabold mb-4 text-white drop-shadow-sm">
//                 Остались вопросы?
//               </h2>
//               <p className="text-2xl font-bold text-white">
//                 Свяжитесь с нами, мы постараемся вам помочь!
//               </p>
//             </div>

//             {/* Form */}
//             <div className="w-[500px] bg-white/95 backdrop-blur-sm p-8 rounded-xl shadow-lg">
//               <h3 className="text-2xl font-bold text-center mb-6">Свяжитесь с нами!</h3>
              
//               <form onSubmit={handleSubmit} className="space-y-6">
//                 <div>
//                   <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
//                     Имя
//                   </label>
//                   <input
//                     type="text"
//                     id="name"
//                     name="name"
//                     value={formData.name}
//                     onChange={handleChange}
//                     placeholder="Введите свое имя"
//                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
//                     required
//                   />
//                 </div>
//                 <div>
//                   <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
//                     Почта
//                   </label>
//                   <input
//                     type="email"
//                     id="email"
//                     name="email"
//                     value={formData.email}
//                     onChange={handleChange}
//                     placeholder="Введите свою почту"
//                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
//                     required
//                   />
//                 </div>
//                 <div>
//                   <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
//                     Сообщение
//                   </label>
//                   <textarea
//                     id="message"
//                     name="message"
//                     value={formData.message}
//                     onChange={handleChange}
//                     placeholder="Введите сообщение, которое хотите отправить"
//                     rows={4}
//                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
//                     required
//                   />
//                 </div>
//                 <button
//                   type="submit"
//                   className="w-full bg-[#000000] text-white font-medium py-2 px-4 rounded-md hover:bg-[#90c95c] transition-colors duration-200"
//                 >
//                   Отправить
//                 </button>
//               </form>
//             </div>
//           </div>
//         </div>
//       </div>
//     </div>
//   )
// }


// import { useState } from "react";
// import videoback from '../vids/backvideo2.webm';
// import translations from '../translations.json';
// import { useLanguage } from '../contexts/LanguageContext';

// export default function ContactBlock() {
//   const { language } = useLanguage();
//   const t = translations.contacts[language];

//   function sendMessage(text)
//   {
//     const botToken = process.env.REACT_APP_TELEGRAM_BOT_TOKEN;
//     const chatId = process.env.REACT_APP_TELEGRAM_CHAT_ID;

//     const url = `https://api.telegram.org/bot${botToken}/sendMessage`;
    
//     const obj = {
//         chat_id: chatId, // Telegram chat id
//         text: text // The text to send
//     };

//     const xht = new XMLHttpRequest();
//     xht.open("POST", url, true);
//     xht.setRequestHeader("Content-type", "application/json; charset=UTF-8");
//     xht.send(JSON.stringify(obj));
//   }

//   const [formData, setFormData] = useState({
//     name: '',
//     email: '',
//     message: ''
//   });

//   // const handleSubmit = (e) => {
//   //   e.preventDefault();
//   //   console.log('Form submitted:', formData);
//   // };

//   const handleSubmit = (e) => {
//     e.preventDefault();
    
//     // Формируем текст сообщения для Telegram
//     const messageText = `
//       Новое сообщение с сайта:
//       👤 Имя: ${formData.name}
//       📧 Email: ${formData.email}
//       💬 Сообщение: ${formData.message}
//           `.trim();

//     // Отправляем сообщение в Telegram
//     sendMessage(messageText);
    
//     // Очищаем форму после отправки
//     setFormData({
//       name: '',
//       email: '',
//       message: ''
//     });

//     // Показываем уведомление об успешной отправке
//     // alert(language === 'ru' ? 'Сообщение успешно отправлено!' : 'Message sent successfully!');
//   };

//   const handleChange = (e) => {
//     setFormData({
//       ...formData,
//       [e.target.name]: e.target.value
//     });
//   };

//   return (
//     <div id="contacts-section" className="relative w-full min-h-[700px] bg-white">
//       <div className="relative flex justify-center items-center max-w-6xl mx-auto p-8 h-full">
//         {/* Main container with video background */}
//         <div className="w-full relative p-12 rounded-3xl overflow-hidden">
//           {/* Video background */}
//           <div className="absolute inset-0 z-0">
//             <video 
//               autoPlay 
//               loop 
//               muted 
//               playsInline
//               className="w-full h-full object-cover rounded-3xl"
//             >
//               <source src={videoback} type="video/webm" />
//               Your browser does not support the video tag.
//             </video>
//             {/* Optional overlay for better text visibility */}
//             <div 
//               className="absolute inset-0 rounded-3xl"
//               style={{
//                 background: 'linear-gradient(135deg, rgba(118, 184, 42, 0.3), rgba(144, 201, 92, 0.3))',
//                 backdropFilter: 'blur(5px)',
//               }}
//             />
//           </div>
          
//           {/* Content */}
//           <div className="relative z-10 flex justify-between items-center gap-12">
//             {/* Text content */}
//             <div className="w-1/2">
//               <h2 className="text-4xl font-extrabold mb-4 text-white drop-shadow-sm">
//                 {t.title}
//               </h2>
//               <p className="text-2xl font-bold text-white">
//                 {t.subtitle}
//               </p>
//             </div>

//             {/* Form */}
//             <div className="w-[500px] bg-white/95 backdrop-blur-sm p-8 rounded-xl shadow-lg">
//               <h3 className="text-2xl font-bold text-center mb-6">{t.formTitle}</h3>
              
//               <form onSubmit={handleSubmit} className="space-y-6">
//                 <div>
//                   <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
//                     {t.form.name.label}
//                   </label>
//                   <input
//                     type="text"
//                     id="name"
//                     name="name"
//                     value={formData.name}
//                     onChange={handleChange}
//                     placeholder={t.form.name.placeholder}
//                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
//                     required
//                   />
//                 </div>
//                 <div>
//                   <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
//                     {t.form.email.label}
//                   </label>
//                   <input
//                     type="email"
//                     id="email"
//                     name="email"
//                     value={formData.email}
//                     onChange={handleChange}
//                     placeholder={t.form.email.placeholder}
//                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
//                     required
//                   />
//                 </div>
//                 <div>
//                   <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
//                     {t.form.message.label}
//                   </label>
//                   <textarea
//                     id="message"
//                     name="message"
//                     value={formData.message}
//                     onChange={handleChange}
//                     placeholder={t.form.message.placeholder}
//                     rows={4}
//                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
//                     required
//                   />
//                 </div>
//                 <button                  
//                   type="submit"
//                   className="w-full bg-[#000000] text-white font-medium py-2 px-4 rounded-md hover:bg-[#90c95c] transition-colors duration-200"
//                 >
//                   {t.form.submitButton}
//                 </button>
//               </form>
//             </div>
//           </div>
//         </div>
//       </div>
//     </div>
//   );
// }

import { useState } from "react";
import videoback from '../vids/backvideo2.webm';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';

export default function ContactBlock() {
  const { language } = useLanguage();
  const t = translations.contacts[language];

  function sendMessage(text) {
    const botToken = process.env.REACT_APP_TELEGRAM_BOT_TOKEN;
    const chatId = process.env.REACT_APP_TELEGRAM_CHAT_ID;
    const url = `https://api.telegram.org/bot${botToken}/sendMessage`;
    
    const obj = {
      chat_id: chatId,
      text: text
    };

    const xht = new XMLHttpRequest();
    xht.open("POST", url, true);
    xht.setRequestHeader("Content-type", "application/json; charset=UTF-8");
    xht.send(JSON.stringify(obj));
  }

  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const messageText = `
      Новое сообщение с сайта:
      👤 Имя: ${formData.name}
      📧 Email: ${formData.email}
      💬 Сообщение: ${formData.message}
    `.trim();

    sendMessage(messageText);
    setFormData({
      name: '',
      email: '',
      message: ''
    });
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <div id="contacts-section" className="relative w-full min-h-[600px] md:min-h-[700px] bg-white">
      <div className="relative flex justify-center items-center max-w-6xl mx-auto p-4 md:p-8 h-full">
        {/* Main container */}
        <div className="w-full relative p-4 md:p-12 rounded-3xl overflow-hidden">
          {/* Video background */}
          <div className="absolute inset-0 z-0">
            <video 
              autoPlay 
              loop 
              muted 
              playsInline
              className="w-full h-full object-cover rounded-3xl"
            >
              <source src={videoback} type="video/webm" />
              Your browser does not support the video tag.
            </video>
            {/* Overlay */}
            <div 
              className="absolute inset-0 rounded-3xl"
              style={{
                background: 'linear-gradient(135deg, rgba(118, 184, 42, 0.3), rgba(144, 201, 92, 0.3))',
                backdropFilter: 'blur(5px)',
              }}
            />
          </div>
          
          {/* Content */}
          <div className="relative z-10 flex flex-col md:flex-row justify-between items-center gap-6 md:gap-12">
            {/* Text content */}
            <div className="w-full md:w-1/2 text-center md:text-left mb-6 md:mb-0">
              <h2 className="text-3xl md:text-4xl font-extrabold mb-4 text-white drop-shadow-sm">
                {t.title}
              </h2>
              <p className="text-xl md:text-2xl font-bold text-white">
                {t.subtitle}
              </p>
            </div>

            {/* Form */}
            <div className="w-full md:w-[500px] bg-white/95 backdrop-blur-sm p-6 md:p-8 rounded-xl shadow-lg">
              <h3 className="text-xl md:text-2xl font-bold text-center mb-6">
                {t.formTitle}
              </h3>
              
              <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
                <div>
                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
                    {t.form.name.label}
                  </label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    placeholder={t.form.name.placeholder}
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                    required
                  />
                </div>
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
                    {t.form.email.label}
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    placeholder={t.form.email.placeholder}
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                    required
                  />
                </div>
                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
                    {t.form.message.label}
                  </label>
                  <textarea
                    id="message"
                    name="message"
                    value={formData.message}
                    onChange={handleChange}
                    placeholder={t.form.message.placeholder}
                    rows={4}
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                    required
                  />
                </div>
                <button
                  type="submit"
                  className="w-full bg-[#000000] text-white font-medium py-2 px-4 rounded-md hover:bg-[#90c95c] transition-colors duration-200"
                >
                  {t.form.submitButton}
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}