"use client"
import React from "react";
import Image from "next/image";
import { useEffect, useRef } from "react";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
import gsap from "gsap";
import AboutUsHero from "./aboutushero";
import Footer from "../footer";
import { useGSAP } from "@gsap/react";
import Values from "../values";





const Expertise = () => {

    useGSAP(() => {
        gsap.registerPlugin(ScrollTrigger);
    });




    const gsapContainer = useRef<HTMLDivElement>(null);
    const vSections = useRef<HTMLDivElement[]>([]);
    const wholeContainerRef = useRef<HTMLDivElement>(null);



    useEffect(() => {




        const gsapCon = gsapContainer.current;
        const vSecs = vSections.current;
        const wholeCon = wholeContainerRef.current;

        gsap.to(vSecs, {
            yPercent: -100 * (vSecs.length - 1),
            ease: 'none',


            scrollTrigger: {
                trigger: gsapCon,
                start: 'top, +=200px',
                pin: wholeCon,
                scrub: 1,
                snap: 1 / (vSecs.length - 1),
                end: '100%+=200px 50%+=200px', // Using container width for proper end calculation.
                invalidateOnRefresh: true,

            },
        });


    }, [])

    const vSecRef = (el: HTMLDivElement | null) => {
        if (el && !vSections.current.includes(el)) {
            vSections.current.push(el);
        }
    };




    return (
        <div className="w-screen" ref={wholeContainerRef}>
            <AboutUsHero />
            <div className="">
                <div className="pt-10 md:px-40 px-10 w-full  flex flex-row items-center justify-center pb-3">
                    <div className="basis-1/3 flex flex-col h-full  ">
                       
                       <div className="grow relative min-h-[460px] mr-8">
                        <Image className="rounded-3xl" alt="about us" src="/images/about_us.jpeg" layout="fill" objectFit="cover"/>
                       </div>
                    </div>
                    <div className="basis-2/3">
                    <p className="ml-2 pt-3 mb-3">About Deeba</p>
                    <p className="text-3xl md:text-7xl font-light mb-4">Our Story</p>
                       
                      <p className="mb-3">Our journey began with a vision to deliver interior design solutions that not only meet the immediate needs of our clients but also contribute to the long-term beauty and functionality of their spaces. We recognized that a well-designed interior is not just about aesthetics; it&apos;s about creating a space that improves the overall well-being of its occupants, and we set out to make a difference by offering advanced, sustainable design solutions.</p>
                      <p className="mb-3">As we grew, we forged partnerships with reputable suppliers and artisans, ensuring that our designs, from furniture to decor, are not only stunning but also environmentally responsible. This commitment to sustainability is at the heart of our brand, and it resonates with clients who share our values and prioritize eco-friendly practices in their living and working spaces. But our story is not just about providing design services; it&apos;s about creating lasting relationships and making a positive impact on the lives of our clients. Through projects like transforming family homes and creating inspiring workspaces, we have witnessed firsthand the transformative power of thoughtful design and sustainable practices.</p>
                      <p className="">At Deeba, every project is a journey of collaboration, creativity, and care. We are proud of the spaces we create and the relationships we build, always striving to exceed expectations and leave a lasting impression. Our slogan, &quot;Design, Build, and Empower Afrika,&quot; encapsulates our commitment to transforming lives through design, fostering sustainable growth, and empowering communities across the continent</p>
                    </div>
                </div>
                <div className="pt-10 md:px-40 px-10 w-full flex flex-row items-end justify-between pb-3">
                    <p className="text-sm md:text-xl inline-block text-end pb-3">Our Mission</p>
                    <div className="hidden md:block h-[80px] md:basis-5/6 basis-3/4  w-full  relative">
                        <Image alt="nice divider" src="/images/nice_dividert2.png" layout="fill" objectFit="contain" />
                    </div>
                    <div className=" md:hidden h-[70px]  basis-3/4  w-full  relative">
                        <Image alt="nice divider" src="/images/nice_divider_mobile.png" layout="fill" objectFit="contain" />
                    </div>

                </div>

                <p className="text-3xl md:text-5xl font-light text-black pt-4 md:pt-4 text-center px-10 md:px-40"> At Deeba, our mission is to create bespoke interiors that enhance the quality of
                    life for our clients. Since our inception, we have been driven by a commitment to
                    leveraging innovative design and sustainable practices to transform spaces into
                    beautiful, functional environments. </p>


            </div>
            <div className="mt-10 md:mt-32 px-10 md:px-40 mb-32 flex flex-col-reverse justify-center items-center md:flex-row w-full md:justify-center">

                <div className="basis-1/3 h-[500px] rounded-3xl w-full mr-12 bg-d-green flex justify-center items-center px-8 text-center">
                    <p className="text-4xl text-white font-light">&quot; Effective design should resonate with its intended audiences. &quot;</p>

                </div>

                <div ref={gsapContainer} className=" w-full md:basis-1/2 flex flex-col h-[500px] md:h-[500px] overflow-hidden">

                <div ref={vSecRef} className="pt-8 flex flex-col items-start justify-center min-h-[500px]">
                        <p className="text-4xl w-full  text-black  mb-8 text-center md:text-start">Our Design Philosophy</p>
                        <p className="text-xl  font-light text-black   text-center md:text-start mb-6">Effective design should resonate with its intended audiences. Design that resonates can only be the natural conclusion of a process that starts with listening and learning about people, behaviors and the world in which we live.
                        </p>
                        <div className="flex grow w-full pt-8 rounded-3xl relative">
                            <Image className="rounded-3xl" alt="soem" src='/images/design_philosophy.jpg' layout="fill" objectFit="cover" />

                        </div>

                    </div>

                    <div ref={vSecRef} className="pt-8 flex flex-col items-start justify-center min-h-[500px]">
                        <p className="text-4xl w-full  text-black  mb-8 text-center md:text-start">Our Services</p>
                        <p className="text-xl  font-light text-black   text-center md:text-start mb-6"> DEEBA is an acclaimed multidisciplinary firm specialising in <strong>architecture</strong>, <strong>interior design</strong> and <strong>construction</strong> that redefines laid back luxury</p>
                        <div className="flex grow w-full pt-8 rounded-3xl relative">
                            <Image className="rounded-3xl" alt="soem" src='/images/service.jpg' layout="fill" objectFit="cover" />

                        </div>
                    </div>

                    <div ref={vSecRef} className="pt-8 flex flex-col items-start justify-center min-h-[500px]">
                        <p className="text-4xl w-full  text-black  mb-8 text-center md:text-start">Our Expertise</p>
                        <p className="text-xl  font-light text-black   text-center md:text-start mb-6">Based in Nairobi, Kenya, Deeba&apos;s footprint is global, as it applies its distinctly refined design sensibility to <strong>residential</strong>, <strong>hospitality</strong>, and <strong>Commercial</strong> projects around the world..</p>
                        <div className="flex grow w-full pt-8 rounded-3xl relative">
                            <Image className="rounded-3xl" alt="soem" src='/images/expertise.jpg' layout="fill" objectFit="cover" />

                        </div>
                    </div>

                    

                    

                </div>

            </div>
            <Values />

            <Footer />
        </div>
    )
}

export default Expertise