import React from 'react';
import { Container, Row, Col, Button, ButtonGroup } from 'react-bootstrap';
import illustration from '../../../../assets/images/illustration/Illustration.png';
import illustration2 from '../../../../assets/images/illustration/Illustration2.png';
import SvgService from '../../../../assets/images/illustration/service.png';
import SvgHero from '../../../../assets/images/Decoration.png';
import Feature1 from '../../../../assets/images/feature1.png';
import Feature2 from '../../../../assets/images/feature2.png';
import Feature3 from '../../../../assets/images/feature3.png';
import Feature4 from '../../../../assets/images/feature4.png';

const Home = () => {
  return (
    <div className='bg-white landing-page'>
        <section id='hero' className='bg-gd h-screen position-relative'>
            <Container className='pt-5 position-relative' style={{zIndex:"2"}}>
                <Row>   
                    <Col lg={6} className="col-12 pe-5 text-white d-flex flex-column">
                        <h1 className='fw-bold display-4'>Your Learning, <br /> Your Way</h1>
                        <p className='pe-5 fs-5 mt-4'>Transform the way you learn <span className='text-warning'>English</span> with exercises that adapt to your pace and style.</p>
                        <div className="d-flex w-100 pe-5 mt-4 flex-column flex-sm-row">
                            <Button variant='warning' size='lg' className='rounded-4 me-3 mb-3 mb-sm-0 w-100 text-dark'>SIGN UP</Button>
                            <Button variant='outline-light' size='lg' className='rounded-4 w-100'>READ MORE</Button>
                        </div>
                    </Col>
                    <Col lg={6} className="col-12 d-none d-lg-flex items-center">
                        <img src={illustration} alt="/" className='w-100'/>
                    </Col>
                </Row>
            </Container>
            <div className="svg-background position-absolute bottom-0 w-100" style={{zIndex:"1"}}>
                <img src={SvgHero} alt="" className='w-100'/>
            </div>
        </section>
        <section id='whatis'>
            <Container className='mt-5'>
                <Row>
                    <Col md={6} className='col-12 d-none d-md-block'>
                        <img src={illustration2} alt="/" className='w-75'/>
                    </Col>
                    <Col md={6} className='col-12 d-flex flex-column justify-content-center'>
                        <div className='d-flex align-items-center mb-3'>
                            <h4 className='text-secondary mb-0'>What is</h4>
                            <div className='ms-2 border-top border-3 border-secondary' style={{width:"180px"}}></div>
                        </div>
                        <h1 className='text-blue fw-bold pb-2 mb-3'>Smart Adaptive Learning System (SEALS) ?</h1>
                        <p className='fs-5'>
                            <span className='text-blue fw-bold'>SEALS</span> refers to a personalized approach to language education that adjusts to the individual learner's needs, pace, and skill level.
                        </p>
                        <div className="d-flex flex-column flex-sm-row">
                            <Button variant='gd' size='lg' className='rounded-4 w-100 me-3 mb-3 mb-sm-0'>Basic Learning</Button>
                            <Button variant='gd' size='lg' className='rounded-4 w-100'>Advance Learning</Button>
                        </div>
                    </Col>
                </Row>
            </Container>
        </section>
        <section id='feature'>
            <Container className='mt-5 bg-blue-50 rounded-5 p-4'>
                <h1 className='text-blue fw-bold text-center w-100'>Feature Section for You</h1>
                <h5 className='mx-auto text-center mb-5' style={{maxWidth:"645px"}}>
                    Develop your skills by studying the topics in each section below with the level determining your 
                    <span className='text-blue fw-bold'> English</span> skills.
                </h5>
                <Row>
                    <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
                        <div className='p-4 rounded rounded-4 bg-white'>
                            <img src={Feature1} alt="/" />
                            <h4 className='my-3'>Listening</h4>
                            <p className='text-secondary fs-7 m-0 truncate truncate-4'>
                                It typically consists of a series of audio recordings, such as conversations, lectures, or monologues, that are played for the test-taker, who must then answer a set of questions based on the content of the recordings.
                            </p>
                        </div>
                    </Col>
                    <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
                        <div className='p-4 rounded rounded-4 bg-white'>
                            <img src={Feature2} alt="/" />
                            <h4 className='my-3'>Reading</h4>
                            <p className='text-secondary fs-7 m-0 truncate truncate-4'>
                                It typically consists of a series of audio recordings, such as conversations, lectures, or monologues, that are played for the test-taker, who must then answer a set of questions based on the content of the recordings.
                            </p>
                        </div>
                    </Col>
                    <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
                        <div className='p-4 rounded rounded-4 bg-white'>
                            <img src={Feature3} alt="/" />
                            <h4 className='my-3'>Grammar</h4>
                            <p className='text-secondary fs-7 m-0 truncate truncate-4'>
                                It typically consists of a series of audio recordings, such as conversations, lectures, or monologues, that are played for the test-taker, who must then answer a set of questions based on the content of the recordings.
                            </p>
                        </div>
                    </Col>
                    <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
                        <div className='p-4 rounded rounded-4 bg-white'>
                            <img src={Feature4} alt="/" />
                            <h4 className='my-3'>Vocabulary</h4>
                            <p className='text-secondary fs-7 m-0 truncate truncate-4'>
                                It typically consists of a series of audio recordings, such as conversations, lectures, or monologues, that are played for the test-taker, who must then answer a set of questions based on the content of the recordings.
                            </p>
                        </div>
                    </Col>
                </Row>
            </Container>
        </section>
        <section id='youget'>
            <Container className='mt-5'>
                <Row>
                    <Col md={6} className='col-12 d-none d-md-block'>
                        <img src={SvgService} alt="/" className='w-75'/>
                    </Col>
                    <Col md={6} className='col-12'>
                        <h1 className='fw-bold'>What Will You <span className='text-blue'>Get </span>?</h1>
                        <p className='text-secondary'>In sem orci feugiat nibh. Rhoncus sit integer sed sit pla feugiat elementum suscipit ac ut rhoncus sit.</p>
                        <div className="p-3 mb-3 rounded-3 shadow shadow-sm d-flex">
                            <div className='me-3'>
                                <div className="bg-blue ratio-1 rounded-3 d-flex items-center" style={{width:"40px",height:"40px"}}>
                                    <i className="bi bi-check-lg text-white fs-4"></i>
                                </div>
                            </div>
                            <div>
                                <h6>Feugiat varius imperdiet ultrices pretium.</h6>
                                <p className='text-secondary fs-7 m-0'>Arcu venenatis iaculis et arcu quis sed. Sed sollicitudin nulla sagittis id et diam lobortis</p>
                            </div>
                        </div>
                        <div className="p-3 mb-3 rounded-3 shadow shadow-sm d-flex">
                            <div className='me-3'>
                                <div className="bg-blue ratio-1 rounded-3 d-flex items-center" style={{width:"40px",height:"40px"}}>
                                    <i className="bi bi-check-lg text-white fs-4"></i>
                                </div>
                            </div>
                            <div>
                                <h6>Feugiat varius imperdiet ultrices pretium.</h6>
                                <p className='text-secondary fs-7 m-0'>Arcu venenatis iaculis et arcu quis sed. Sed sollicitudin nulla sagittis id et diam lobortis</p>
                            </div>
                        </div>
                        <div className="p-3 mb-3 rounded-3 shadow shadow-sm d-flex">
                            <div className='me-3'>
                                <div className="bg-blue ratio-1 rounded-3 d-flex items-center" style={{width:"40px",height:"40px"}}>
                                    <i className="bi bi-check-lg text-white fs-4"></i>
                                </div>
                            </div>
                            <div>
                                <h6>Feugiat varius imperdiet ultrices pretium.</h6>
                                <p className='text-secondary fs-7 m-0'>Arcu venenatis iaculis et arcu quis sed. Sed sollicitudin nulla sagittis id et diam lobortis</p>
                            </div>
                        </div>
                    </Col>
                </Row>
            </Container>
        </section>
        <section id='contacts'>
            <Container className='bg-blue-50 p-4 rounded-5'>
                <Row>
                    <Col className='d-flex flex-column items-center'>
                        <h1 className='fw-bold'>What Are You <span className='text-blue'>Waiting </span> for ?</h1>
                        <p className='text-secondary'>Start your efficient <span className='text-blue'>English</span> learning journey today!</p>
                        <Button variant='warning' size='lg' className='rounded-4 px-5 mt-4'>JOIN NOW</Button>
                    </Col>
                </Row>
            </Container>
        </section>

        {/* <section className='bg-gd d-flex flex-column items-center text-white'>
            <div className="w-100 mb-5" style={{marginTop:'-1px'}}>
                <img src={SvgFooter} alt="" className='w-100' />
            </div>
            <h1>What Are You Waiting For?</h1>
            <p>Start your efficient <span className='text-warning'>English</span> learning journey today!</p>
            <Button variant="warning" className='px-5 fw-bold text-dark'>Join Now</Button>
        </section> */}


        <footer className='positon-relative text-white py-5'>
            {/* <div className="position-absolute w-100" style={{zIndex:"1",marginTop:"-3rem"}}>
                <img src={SvgFooter} alt="/" className='w-100' />
            </div> */}
            <Container className='position-relative' style={{zIndex:"2"}}>
                <Row>
                    <Col md={6} className='col-12 pe-5'>
                        <div>
                            <h4>SEALS</h4>
                            <p className='text-blue-50'>The first free end-to-end analytics service for the site, designed to work with enterprises of various levels and business segments.</p>
                        </div>
                        <div className='mt-5 d-flex justify-content-between align-items-end'>
                            <div className="social-icon-box d-flex flex-column">
                                <div className="d-flex">
                                    <a href="/">
                                        <i className="bi bi-instagram"></i>
                                    </a>
                                </div>
                                <div className='d-flex'>
                                    <a href="/">
                                        <i className="bi bi-facebook"></i>
                                    </a>
                                    <a href="/">
                                        <i className="bi bi-tiktok"></i>
                                    </a>
                                </div>
                                <div className='d-flex'>
                                    <a href="/">
                                        <i className="bi bi-twitter-x"></i>
                                    </a>
                                    <a href="/">
                                        <i className="bi bi-youtube"></i>
                                    </a>
                                </div>
                            </div>
                            <p className='m-0'>
                                ©2024 — Copyright <br />
                                All Rights reserved
                            </p>
                        </div>
                    </Col>
                    <Col md={6} className='col-12 ps-5 d-none d-md-flex flex-column justify-content-between'>
                        <div className="d-flex">
                            <a href="#whatis" className='me-4 text-white text-decoration-none'>What is.</a>
                            <a href="#feature" className='me-4 text-white text-decoration-none'>Feature.</a>
                            <a href="#youget" className='me-4 text-white text-decoration-none'>You Get.</a>
                            <a href="#contacts" className='me-4 text-white text-decoration-none'>Contacts.</a>
                        </div>
                        <div className="d-flex justify-content-between align-items-end">
                            <div>
                                <h5>Contact Us</h5>
                                <p className='text-blue-50 m-0'>
                                    +62 (999) 888-77-66 <br /> 
                                    hello@adaptivelearning.com
                                </p>

                                <h5 className='mt-3'>Location</h5>
                                <p className='text-blue-50 m-0'>
                                    483920, Indonesia, <br />
                                    Number Office 22/2/5
                                </p>
                            </div>
                            <div>
                                <h6>Languages</h6>
                                <ButtonGroup size='sm' aria-label="Basic example">
                                    <Button variant="ts" className='text-white'>ENG</Button>
                                    <Button variant="ts" className='text-white'>IND</Button>
                                </ButtonGroup>
                            </div>
                        </div>
                    </Col>
                </Row>
            </Container>
        </footer>

        {/* <footer className='bg-gd w-100 py-3 border-top'>
            <h6 className='text-center text-white m-0'>Copyright © Adaptive English Learning</h6>
        </footer> */}
    </div>
  );
};

export default Home;