import React from 'react';
import Styles from "./Home.module.css";
import videoSource from "../../assets/videos/FreeGo-web.mp4"
import img1 from '../../assets/images/home/img1.png';
import img2 from '../../assets/images/home/img2.png';
import img3 from '../../assets/images/home/img3.png';
import code from '../../assets/images/home/code.png';
import {useTranslation} from "react-i18next";
// 首页内容组件
const Home = () => {
    const {t} = useTranslation();
    return (
        <main className={Styles.root}>
            <div className={Styles.videoContainer}>
                <video className={Styles.video}
                       controls
                       loop
                       autoPlay
                       muted={true}
                       playsInline>
                    <source src={videoSource} type="video/mp4"/>
                    {t('videoNotSupport')}
                </video>
            </div>
            <div className={Styles.imagAndFontContainer}>
                <div className={Styles.contentContainer}>
                    <div className={Styles.fontContainer}>
                        <p className={Styles.boldFont}>{t('homeTip1-1')}</p>
                        <p className={Styles.boldFont} style={{marginBottom: 16}}>{t('homeTip1-2')}</p>
                        <p className={Styles.normalFont}>{t('homeTip1-3')}</p>
                        <p className={Styles.normalFont}>{t('homeTip1-4')}</p>
                    </div>
                    <img className={Styles.image} src={img1}/>
                </div>
                <div className={Styles.contentContainer}>
                    <img className={Styles.image} src={img2}/>
                    <div className={Styles.fontContainer}>
                        <p className={Styles.boldFont}>{t('homeTip2-1')}</p>
                        <p className={Styles.boldFont} style={{marginBottom: 16}}>{t('homeTip2-2')}</p>
                        <p className={Styles.normalFont}>{t('homeTip2-3')}</p>
                        <p className={Styles.normalFont}>{t('homeTip2-4')}</p>
                    </div>
                </div>
                <div className={Styles.contentContainer}>
                    <div className={Styles.fontContainer}>
                        <p className={Styles.boldFont}>{t('homeTip3-1')}</p>
                        <p className={Styles.boldFont}>{t('homeTip3-2')}</p>
                        <p className={Styles.normalFont}>{t('homeTip3-3')}</p>
                        <p className={Styles.normalFont}>{t('homeTip3-4')}</p>
                    </div>
                    <img className={Styles.image} src={img3}/>
                </div>
            </div>

            <div className={Styles.bottomContainerBg}>
                <p className={Styles.bottomTitle}>{t('bottomTitle')}</p>
                <p className={Styles.bottomSubtitle1}>{t('bottomSubtitle1')}</p>
                <p className={Styles.bottomSubtitle2}>{t('bottomSubtitle2')}</p>
                <div className={Styles.scanContainer}>
                    <img className={Styles.bottomCode} src={code}/>
                    <p className={Styles.bottomCodeText}>{t('scanCode')}</p>
                </div>
            </div>
        </main>
    )

};

export default Home;