import { Head } from '@inertiajs/react';
import { PageProps } from '@/types';
import Guest from '@/Layouts/GuestLayout';
import Authenticated from '@/Layouts/AuthenticatedLayout';
import ProjectBanner from '@/Components/ProjectBanner';

const About = ({ auth }: PageProps) => {
    const renderAboutContent = () => (
        <div id="About" className="px-6 py-4">
            <div id="project-desc" className="hero my-16 pb-16 rounded-lgmin-h-screen bg-cover"
                            style={{backgroundImage: 'url(assets/images/img-banner.png)'}}>
                <div className="hero-content flex-row">
                    <ProjectBanner />

                    <article id="description" className="w-full">
                        <h2 className="my-8 p-4 bg-secondary-background font-bold text-3xl leading-[44px]">About Project CodeHub</h2>
                        <p className="text-justify font-normal text-lg leading-[28px]">Project CodeHub is a website accessible for the Department of Science and Technology (DOST) IT Department,
                            which curates repositories of source codes and instructional materials
                            about different web technologies and programming languages
                            that would help the IT Department employees build their own projects easily.</p>
                    </article>
                </div>
            </div>

            
            <div className="divider"><p className="my-8 p-4 bg-secondary-background font-bold text-3xl leading-[44px]">Technology Stack</p></div>

            <div id="techStack">
                <div className="flex justify-center mt-12 mb-8 stats shadow">
                    <div className="stat bg-primary-background">
                        <div className="stat-value font-semibold text-3xl leading-[44px]">Web Technologies</div>
                        <div className="stat-actions">
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">HTML</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">PHP</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">CSS</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline">JS</div>
                        </div>
                    </div>

                    <div className="stat bg-primary-background">
                        <div className="stat-value font-semibold text-3xl leading-[44px]">Development Frameworks</div>
                        <div className="stat-actions">
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">Node.js</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline">Composer</div>
                        </div>
                    </div>

                    <div className="stat bg-primary-background">
                        <div className="stat-value font-semibold text-3xl leading-[44px]">Database</div>
                        <div className="stat-actions">
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">Apache Server</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">phpMyAdmin</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline">MySQL</div>
                        </div>
                    </div>
                </div>

                <div className="flex justify-center mt-4 mb-12 stats shadow">
                    <div className="stat bg-primary-background">
                        <div className="stat-value font-semibold text-3xl leading-[44px]">Backend Frameworks</div>
                        <div className="stat-actions">
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">Laravel</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline">Axios</div>
                        </div>
                    </div>

                    <div className="stat bg-primary-background">
                        <div className="stat-value font-semibold text-3xl leading-[44px]">Frontend Frameworks</div>
                        <div className="stat-actions">
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">ReactJS</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">TailwindCSS</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">daisyUI</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">StorySet</div>
                            <div className="badge badge-lg bg-info-background text-info-main badge-outline">FeatherIcons</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );

    return (
        <>
            <Head title="About" />
            <div>
                {auth.user ? (
                    <Authenticated user={auth.user}>
                        {renderAboutContent()}
                    </Authenticated>
                ) : (
                    <>
                        <Guest>
                            {renderAboutContent()}
                        </Guest>
                    </>
                )}
            </div>
        </>
    );
}
 
export default About;