import React, { useRef, useState } from 'react';
import {motion, useScroll, useMotionValueEvent, useAnimationControls, useTransform} from "framer-motion"
import yachtImg from "../Images/yacht.jpg"
import stock_man_img from "../Images/stock_about_placeholder.jpg"
import telegram_icon from "../Images/telegram_icon.png"

const AboutSection = () => {

    const { scrollYProgress } = useScroll();
    const serviceBlockRef = useRef(null);
    const {serviceScrollYProgress} = useScroll(
        {
            target: serviceBlockRef,
            offset: ["end end", "start start"],
        }
    );
    const menu_offset = useTransform(scrollYProgress, [0,1], ["-100%", "0%"]);
    const service_offset = useTransform(scrollYProgress, [0.6,0.8], ["0%", "-20%"]);
    const private_offset = useTransform(scrollYProgress, [0.6,0.8], ["0%", "30%"]);
    // const menu_offset2 = useTransform(scrollYProgress, [0,1], ["-50%", "0%"]);
    return (
        <>
            <div className='absolute inset-0'>
                <img src={yachtImg} alt="yacht" className='w-full h-full object-cover brightness-[0.2] contrast-[1.1]' />
            </div>
            <div className='w-full flex justify-center'>
                <div className='w-full max-w-[1920px] flex flex-col'>
                    <div className='flex justify-center w-full h-screen relative'>
                        <div className='flex flex-col justify-end w-full h-full max-w-[1920px] gap-8 p-4 pb-[40%] md:gap-16 md:p-12 lg:gap-16 lg:p-12 2xl:gap-28 2xl:p-20'>
                            <div className='flex items-center md:h-[230px] lg:h-[280px]'>
                                <h1 className='text-4xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl font-bold'>
                                    Консьерж-сервис для <span className=''>VIP</span> клиентов
                                </h1>
                            </div>
                            <div className='flex text-right self-end justify-end items-center max-w-[300px] lg:max-w-[400px]'>
                                <p className='text-xl md:text-2xl lg:text-3xl'>
                                    Добро пожаловать в мир непревзойденной роскоши и удобства.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div className='w-full flex flex-col'>
                        <div className='flex w-full justify-center items-center overflow-hidden gap-20 border-b-[1px] border-gray-700'>
                            <motion.h1 className='text-[11rem] whitespace-nowrap font-semibold'
                                style={{translateX: menu_offset}}
                                >
                                Lorem ipsum
                            </motion.h1>
                            <motion.h1 className='text-[11rem] whitespace-nowrap font-semibold'
                                style={{translateX: menu_offset}}
                                >
                                Lorem ipsum
                            </motion.h1>
                            <motion.h1 className='text-[11rem] whitespace-nowrap font-semibold'
                                style={{translateX: menu_offset}}
                                >
                                Lorem ipsum
                            </motion.h1>
                        </div>
                        <div className='flex w-full h-[100vh] p-16'>
                            <div className='w-[49%] flex h-full items-center justify-center text-center text-2xl px-[6%]'>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Placeat tempore aperiam perspiciatis et rerum perferendis harum, 
                                repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et?
                            </div>
                            <div className='h-full w-[1px] flex justify-center'>
                                <div className='h-full w-full bg-gray-700 '>

                                </div>
                            </div>
                            <div className='w-[49%] px-[7%] flex flex-col gap-16'>
                                <img src={stock_man_img} alt="man" className='object-cover rounded-[20%] w-full h-[80%]' />
                                <div className='w-full h-[1px] bg-gray-700 flex-shrink-0'></div>
                                <div className='w-full h-[20%] flex-shrink-0 flex justify-center items-start text-left'>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                    Placeat tempore aperiam perspiciatis et rerum perferendis harum, 
                                    repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et?
                                </div>
                            </div>
                        </div>
                        <div className='flex h-screen w-full flex-col px-20 gap-4'>
                            <div className='w-full h-[50%] flex gap-4'>
                                <div className='relative w-[33%] h-full flex bg-white rounded-2xl overflow-hidden group'>
                                    <img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
                                    <div className='absolute inset-0 w-full h-full flex justify-center items-center'>
                                        <p className='text-3xl'>LUXURY CARS</p>
                                    </div>
                                </div>
                                <div className='relative w-[33%] h-full flex bg-white rounded-2xl overflow-hidden group'>
                                    <img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
                                    <div className='absolute inset-0 w-full h-full flex justify-center items-center'>
                                        <p className='text-3xl'>FLIGHTS</p>
                                    </div>
                                </div>
                                <div className='relative w-[33%] h-full flex bg-white rounded-2xl overflow-hidden group'>
                                    <img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
                                    <div className='absolute inset-0 w-full h-full flex justify-center items-center'>
                                        <p className='text-3xl'>YACHTS</p>
                                    </div>
                                </div>
                            </div>
                            <div className='w-full h-[50%] flex'>
                                <div className='relative w-full h-full flex bg-white rounded-2xl overflow-hidden group'>
                                    <img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
                                    <div className='absolute inset-0 w-full h-full flex justify-center items-center'>
                                        {/* <p className='text-3xl'>YACHTS</p> */}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='h-[400px] w-full flex justify-between items-center px-20'>
                            <p className='text-2xl w-[40%]'>
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                                Quos fugiat aspernatur neque illo molestias reiciendis quia, 
                                rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima!
                            </p>
                            <div className='flex w-[300px] h-full items-center justify-center'>
                                <div className='w-[100px] cursor-pointer group h-[100px] border-[2px] hover:border-gray-300 transition-all duration-300 rounded-full border-gray-500 bg-transparent flex justify-center items-center'>
                                    <img src={telegram_icon} alt="telegram" className='object-cover w-[40%] h-[40%] group-hover:scale-110 transition-all duration-300' />
                                </div>
                            </div>
                        </div>
                        <div ref={serviceBlockRef} className='h-[90vh] w-full px-20 flex gap-12'>
                            <div className='h-full w-[50%] flex flex-col justify-end items-end gap-8'>
                                <motion.h2 className='text-9xl self-start' style={{translateX: private_offset}}>
                                    PRIVATE
                                </motion.h2>
                                <div className='relative w-[70%] h-[70%] flex bg-white rounded-2xl overflow-hidden group'>
                                    <img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
                                    <div className='absolute inset-0 w-full h-full flex justify-center items-center'>
                                        {/* <p className='text-3xl'>YACHTS</p> */}
                                    </div>
                                </div>
                            </div>
                            <div className='h-full w-[50%] flex flex-col justify-start gap-8'>
                                <motion.h2 className='text-9xl text-right' style={{translateX: service_offset}}>
                                    SERVICE
                                </motion.h2>
                                <div className='relative w-[70%] h-[70%] flex bg-white rounded-2xl overflow-hidden group'>
                                    <img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
                                    <div className='absolute inset-0 w-full h-full flex justify-center items-center'>
                                        {/* <p className='text-3xl'>YACHTS</p> */}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='h-[400px] w-full flex justify-center items-center px-20'>
                            <p className='text-2xl w-[800px] text-center'>
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                                Quos fugiat aspernatur neque illo molestias reiciendis quia, 
                                rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima!
                            </p>
                        </div>
                        <div className='w-full flex flex-col gap-8 h-[50vh] px-20 py-16'>
                            <h2 className='text-8xl'>Если заинтересовались</h2>
                            <div className='border-b-[1px] border-gray-700 w-[50%] h-[1px]'></div>
                            <div className='w-full h-full flex'>
                                <div className='flex w-[40%] h-full text-2xl'>
                                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni maiores reiciendis asperiores dolore, 
                                        illum doloremque placeat atque libero? Incidunt, itaque esse ea non velit exercitationem autem totam aspernatur ad. Nesciunt.
                                    </p>
                                </div>
                            </div>
                            <button className='w-[250px] h-[60px] text-xl flex-shrink-0 rounded-xl border-[1px] border-gray-700 transition-all duration-300 hover:border-gray-400'>
                                Давайте поговорим
                            </button>
                        </div>
                        <footer className='w-full h-[50vh] flex p-20'>
                            <div className='flex w-full h-full flex-col relative px-8'>
                                <p className='text-2xl'>+9 999 999-99-99</p>
                                <p className='text-2xl opacity-50 max-w-[50%]'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quas accusamus quis commodi</p>
                            </div>
                            <div className='w-[1px] h-full flex-shrink-0 bg-gray-700'/>
                            <div className='flex w-full h-full flex-col relative px-8'>
                                <p className='text-2xl opacity-50 max-w-[65%]'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quas accusamus quis commodi</p>
                                <button className='absolute left-8 bottom-0 w-[250px] h-[60px] text-xl flex-shrink-0 rounded-xl border-[1px] border-gray-700 transition-all duration-300 hover:border-gray-400'>
                                    Свяжитесь с нами
                                </button>
                            </div>
                        </footer>
                    </div>
                </div>
            </div>
        </>
    );
}

export default AboutSection;
