// import React from 'react';
// import { Typography, Button } from 'antd';
// import { ArrowRightOutlined } from '@ant-design/icons';
// import VideoBackground from './VideoBackground';
// import styled from 'styled-components';

// const { Title, Paragraph } = Typography;


// const CustomFont = styled.div`
//   @font-face {
//     font-family: 'CustomFont';
//     src: url('../assets/fonts/ProtestStrike-Regular.ttf') format('truetype');
//   }
//   font-family: 'CustomFont', sans-serif;
// `;

// const MainSection = () => {
//   return (
//     <div style={{
//       width: '100%',
//       height: '100vh',
//       overflow: 'hidden'
//     }}>
//       <div style={{
//         position: 'absolute',
//         top: 0,
//         left: 0,
//         width: '100%',
//         height: '100%',
//         zIndex: 1
//       }}>
//         <VideoBackground />
//       </div>
     
//       <div style={{
//           position: 'relative',
//           zIndex: 2,
//           display: 'flex',
//           flexDirection: 'column',
//           justifyContent: 'center',
//           alignItems: 'center',
//           textAlign: 'center',
//           height: '100%',
//           padding: '20px',
//           backgroundColor: 'rgba(255, 255, 255, 0)'
//       }}>
        
//         <CustomFont>
//           <Title style={{ color: '#ffffff', fontSize: '84px', marginBottom: '5px' }}>
//             <span style={{ fontWeight: '900' }}>
//               <p style={{marginBottom: '0px'}}>qWickPost</p>
//               </span>
//           </Title>
//         </CustomFont>
        

//         <Title level={2} style={{ color: '#ffffff', fontSize:'45px', marginBottom:'5px' }}>
//           <span style={{ fontWeight: 'bold' }}>Упростите ваш социальный маркетинг</span>
//         </Title>
//         <Paragraph style={{ fontSize: 20, color: '#ffffff', maxWidth: '800px', margin: '20px auto' }}>
//           Планируйте, создавайте и публикуйте ваш контент для всех социальных сетей из одного места.
//           Экономьте время и развивайте свой бренд в интернете.
//         </Paragraph>
//         <Button type="primary" size="large" style={{ background: 'rgba(255, 255, 255, 0)', borderWidth: 3, borderColor: '#ffffff', fontSize:'18px', fontWeight:900,  marginTop: '20px' }}>
//           <p style = {{}}>Попробуйте бесплатно! </p>
//           <ArrowRightOutlined />
//         </Button>
//       </div>
     
//     </div>
//   );
// };
// export default MainSection;


// import React from 'react';
// import { Typography, Button } from 'antd';
// import { ArrowRightOutlined } from '@ant-design/icons';
// import VideoBackground from './VideoBackground';
// import styled from 'styled-components';
// import translations from '../translations.json';
// import { useLanguage } from '../contexts/LanguageContext';

// const { Title, Paragraph } = Typography;


// const CustomFont = styled.div`
//   @font-face {
//     font-family: 'CustomFont';
//     src: url('../assets/fonts/ProtestStrike-Regular.ttf') format('truetype');
//   }
//   font-family: 'CustomFont', sans-serif;
// `;

// const MainSection = () => {
//   const { language } = useLanguage();
//   const t = translations.mainSection[language];

//   return (
//     <div style={{
//       width: '100%',
//       height: '100vh',
//       overflow: 'hidden'
//     }}>
//       <div style={{
//         position: 'absolute',
//         top: 0,
//         left: 0,
//         width: '100%',
//         height: '100%',
//         zIndex: 1
//       }}>
//         <VideoBackground />
//       </div>
     
//       <div style={{
//           position: 'relative',
//           zIndex: 2,
//           display: 'flex',
//           flexDirection: 'column',
//           justifyContent: 'center',
//           alignItems: 'center',
//           textAlign: 'center',
//           height: '100%',
//           padding: '20px',
//           backgroundColor: 'rgba(255, 255, 255, 0)'
//       }}>
        
//         <CustomFont>
//           <Title style={{ color: '#ffffff', fontSize: '84px', marginBottom: '5px' }}>
//             <span style={{ fontWeight: '900' }}>
//               <p style={{marginBottom: '0px'}}>{t.title}</p>
//             </span>
//           </Title>
//         </CustomFont>
        
//         <Title level={2} style={{ color: '#ffffff', fontSize:'30px', marginBottom:'-5px' }}>
//           <span style={{ fontWeight: 'bold' }}>{t.subtitle}</span>
//         </Title>
//         <Title level={3} style={{ color: '#ffffff', fontSize:'45px', marginBottom:'0px' }}>
//           <span style={{ fontWeight: 'bold' }}>{t.description}</span>
//         </Title>
//         <Paragraph style={{ fontSize: 20, color: '#ffffff', maxWidth: '800px', margin: '20px auto' }}>
//           {t.descriptionn}
//         </Paragraph>
//         <Button 
//           href="http://app.qwickpost.com/"
//           type="primary" 
//           size="large" 
//           style={{ 
//             background: 'rgba(255, 255, 255, 0)', 
//             borderWidth: 3, 
//             borderColor: '#ffffff', 
//             fontSize:'18px', 
//             fontWeight: 900,  
//             marginTop: '20px' 
//           }}
//         >
//           <p>{t.tryButton}</p>
//           <ArrowRightOutlined />
//         </Button>
//       </div>
//     </div>
//   );
// };

// export default MainSection;

import React from 'react';
import { Typography, Button } from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';
import VideoBackground from './VideoBackground';
import styled from 'styled-components';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';

const { Title, Paragraph } = Typography;

const CustomFont = styled.div`
  @font-face {
    font-family: 'CustomFont';
    src: url('../assets/fonts/ProtestStrike-Regular.ttf') format('truetype');
  }
  font-family: 'CustomFont', sans-serif;
`;

const MainSection = () => {
  const { language } = useLanguage();
  const t = translations.mainSection[language];

  return (
    <div style={{
      width: '100vw',
      height: '100vh',
      overflow: 'hidden',
      marginLeft: 'calc(-50vw + 50%)',
      marginRight: 'calc(-50vw + 50%)',
      position: 'relative'
    }}>
      {/* Фон с видео */}
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        zIndex: 1
      }}>
        <VideoBackground />
      </div>
     
      {/* Контент */}
      <div style={{
        position: 'relative',
        zIndex: 2,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        textAlign: 'center',
        height: '100%',
        padding: '20px',
        backgroundColor: 'rgba(255, 255, 255, 0)'
      }}>
        <CustomFont>
          <Title style={{ 
            color: '#ffffff', 
            fontSize: 'clamp(40px, 8vw, 84px)',
            marginBottom: '5px',
            wordBreak: 'break-word'
          }}>
            <span style={{ fontWeight: '900' }}>
              <p style={{marginBottom: '0px'}}>{t.title}</p>
            </span>
          </Title>
        </CustomFont>
        
        <Title level={2} style={{ 
          color: '#ffffff', 
          fontSize: 'clamp(20px, 4vw, 30px)',
          marginBottom: '-5px'
        }}>
          <span style={{ fontWeight: 'bold' }}>{t.subtitle}</span>
        </Title>

        <Title level={3} style={{ 
          color: '#ffffff', 
          fontSize: 'clamp(24px, 5vw, 45px)',
          marginBottom: '0px'
        }}>
          <span style={{ fontWeight: 'bold' }}>{t.description}</span>
        </Title>

        <Paragraph style={{ 
          fontSize: 'clamp(16px, 2.5vw, 20px)', 
          color: '#ffffff', 
          maxWidth: '800px', 
          margin: '20px auto',
          padding: '0 15px'
        }}>
          {t.descriptionn}
        </Paragraph>

        <Button
          href="http://app.qwickpost.com/"
          type="primary"
          size="large"
          style={{
            background: 'rgba(255, 255, 255, 0)',
            borderWidth: 3,
            borderColor: '#ffffff',
            fontSize: 'clamp(14px, 2vw, 18px)',
            fontWeight: 900,
            marginTop: '20px',
            height: 'auto',
            padding: '10px 20px'
          }}
        >
          <p style={{ margin: 0 }}>{t.tryButton}</p>
          <ArrowRightOutlined />
        </Button>
      </div>
    </div>
  );
};

export default MainSection;