import { headers } from "next/headers";
import classnames from 'classnames';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';


export default async function LandingPageLayout({ children }: { children: React.ReactNode }) {
    const headersList = await headers();
    const pathname = headersList.get("x-current-path");
    const landingPageType = pathname?.split('/').pop() || "";
    const headerText = landingPageType.charAt(0).toUpperCase() + landingPageType.slice(1);

    return (
        <>
            <Navbar />
            <div className="w-full relative">
                <div className="absolute bottom-0 left-0 flex items-end w-full h-full">
                    <div className="w-1/24 h-full flex justify-end">
                        <div className="w-[calc(50%+6px)] flex flex-col">
                            <div className={classnames(
                                "relative h-full border-l-6 bg-bluetang border-atmosphere"
                            )} />
                        </div>
                    </div>
                </div>
                <div className="w-full flex justify-start items-end pt-30">
                    <div className="w-1/24 h-full flex justify-end">
                        <div className="w-[calc(50%+6px)] flex flex-col justify-end z-1 bg-deepcove">
                            <div className={classnames(
                                "h-5 -mb-[3px] relative border-b-6 border-l-6 rounded-bl-3xl rounded-out-br-3xl bg-bluetang border-atmosphere"
                                )} />
                            <div className={classnames(
                                "h-5 -mt-[3px] relative border-t-6 border-l-6 rounded-tl-3xl rounded-out-tr-3xl bg-bluetang border-atmosphere"
                                )} />
                        </div>
                    </div>
                    <div className={`w-11/12 flex flex-col justify-end mb-[14px]`}>
                        <div className={classnames(
                            "text-5xl text-left ml-10 z-1 text-shadow-[1px_1px_0,-1px_1px_0,-1px_-1px_0,1px_-1px_0] text-shadow-deepcove text-bronze"
                        )}>
                            {headerText}
                        </div>
                        <div className={classnames(
                            "w-full h-[6px] rounded-r bg-atmosphere"
                            )}>
                        </div>
                    </div>
                </div>
                <div className="w-full flex justify-center pb-30">
                    <div className="w-11/12 z-1">
                        {children}
                    </div>
                </div>
                <Footer />
            </div>
        </>
    )
}