import { compareDesc, parseISO } from "date-fns";

import { allPortfolioExamplesPosts } from "contentlayer/generated";
import { sortBlogs } from "@/lib/onehour/utils";
import BlogMain from "@/components/onehoursite/blog/BlogMain";

export default async function InspirationHomePage() {
  const allPosts = allPortfolioExamplesPosts
    .filter((post) => post.isPublished)
    .sort((a, b) => {
      return compareDesc(parseISO(a.updatedAt), parseISO(b.updatedAt));
    });
  return (
    <div className="container-large ">
      <div className=" left-0 top-0 min-h-full w-full">
        <div className=" min-h-full w-full bg-[#f9fafc]">
          <div className="section mx-auto mt-0 max-w-[1440px] bg-[#f7fcfd] ">
            <section className=" relative flex flex-col bg-[url('/oneHour/marketer/marketer_hero.png')] bg-contain bg-[50%_0%]  bg-repeat pb-24 pt-0 font-garamond_normal sm:pb-40">
              <div className="container relative mx-auto flex max-w-[1440px] flex-wrap  px-4 py-0 md:px-8">
                <div className="row flex w-full flex-wrap justify-center lg:-mx-5">
                  <div className="column flex w-full max-w-full flex-shrink-0 flex-grow-0 basis-full break-words px-5 pt-4 md:w-[75%] md:max-w-[75%] md:basis-3/4 md:pt-16  xl:pt-32">
                    <div className="content-wrapper w-full">
                      <div className="column-content1 w-full">
                        <div>
                          <h1 className="pb-8 text-center text-[2.5rem] font-bold leading-[2.75rem] text-midnightBlue md:text-[3rem] md:leading-[3rem] xl:text-[4.25rem] xl:leading-[5rem]">
                            <span>Portfolio Inspirations</span>
                          </h1>
                          <p className="pb-8 text-center  text-[1.25rem] font-medium leading-[1.75rem] text-midnightBlue   md:text-[1.5rem] md:leading-[1.75] xl:text-[1.75rem] xl:leading-[2.5rem]">
                            <span>
                              Browse top portfolio examples across professions
                              to inspire your next project and showcase your
                              unique skills
                            </span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>

      <div className="relative bg-[#f7fcfd] pb-24 pt-[10px] md:pt-[20px] lg:pt-[30px]">
        <div className="px-2 md:px-5 lg:px-20">
          <section>
            <div className="mx-2 pb-8 md:mx-3 md:pb-12 lg:mx-5 lg:pb-16">
              <div className="flex flex-col items-center justify-center px-1 md:px-2 lg:px-5">
                <h2 className="font-garamond_normal  text-[1.5rem]  font-extrabold leading-[1.75rem] text-midnightBlue md:text-[1.75rem] md:leading-[1.5rem] xl:text-[2.5rem] xl:leading-[3.75rem]">
                  All Posts
                </h2>
              </div>
            </div>

            <div>
              <BlogMain allblogposts={allPosts} />
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}