"use client";
import Image from "next/image";
import CCStyle from "@/app/components/co-creators/ccTheme";
import { TextLink } from "@/app/components/button";
import { LinkButton } from "@/app/components/form/forms";
import { Suspense, lazy } from "react";
import { BtnLink } from "@/app/components/button";

const ProjectList = lazy(() => import("@/app/components/project/projectList"));
const CoCreatorsList = lazy(
  () => import("@/app/components/co-creation/cc-co-creators"),
);
const StoreThumbs = lazy(
  () => import("@/app/components/co-creation/cc-store-thumbs"),
);
const CCProfileSwiper = lazy(
  () => import("@/app/components/co-creators/profile-swiper"),
);
const DesignHouseCC = lazy(
  () => import("@/app/components/co-creation/cc-design-house"),
);

export default function CoCreatorDetails(props: any) {
  return (
    <>
      {props.children}
      <style jsx global>
        {CCStyle}
      </style>
      <div className="flex flex-col pt-12">
        <div className="cc-hero relative overflow-hidden">
          <div className="absolute flex items-center left-0 top-0 h-[100%] w-[100%] z-1 scale-320 cc-mesh"></div>
          <div className="mob-noise absolute z-2 top-0 left-0 h-full w-full"></div>
          <div className="icon-big-open-flower absolute top-0 right-0 z-10 h-30 w-30 bg-teal-600 opacity-50 md:h-60 md:w-60"></div>
          <div className="relative z-30">
            <div className="icon-big-open-flower absolute -bottom-5 -left-[5%] z-10 h-60 w-60 bg-teal-600 opacity-50 md:h-100 md:w-100"></div>
            <div className="wrapper">
              <div className="flex w-full py-4">
                <TextLink
                  id="link_view_all_design-house"
                  href="/co-creators"
                  label="View all Co-Creators"
                  color="gray"
                />
              </div>
              <div className="flex w-full pt-5 pb-15">
                <div className="mx-auto flex w-full flex-col md:w-[40%]">
                  <div className="relative flex w-full">
                    <div className="flex w-full flex-col items-center justify-center gap-4 text-center">
                      <div className="icon-bud-flower-thread mx-auto h-14.5 w-15 items-center justify-center bg-teal-300 md:h-24 md:w-25"></div>
                      <h1>hardik tuTeja</h1>
                      <div className="font-bogart text-md align-middle">
                        <span className="top:0 relative mr-1 md:top-0.5">
                          <i className="icon-[bx--map]"></i>
                        </span>
                        Faridabad, Haryana India
                      </div>
                      <p className="font-bogart text-xl font-light">
                        Engineer with a love for nature with a unique approach
                        to fashion design
                      </p>
                      <div className="flex flex-col gap-1">
                        <p className="label">Interests</p>
                        <ul className="list-chips *:text-xs">
                          <li>AI artwork</li>
                          <li>South Asian Fusion</li>
                          <li>Skilled Handcrafting</li>
                          <li>Eco Prints</li>
                          <li>Hand Embroidery</li>
                        </ul>
                      </div>
                      <div className="mx-auto hidden w-full pt-5 md:flex md:w-[75%]">
                        <div className="btn-hairline relative flex w-full flex-col">
                          <span className="hairline absolute top-[6px] -left-[6px] z-2 inline-flex h-12 w-full"></span>
                          <button className="relative z-20 flex h-12 w-full justify-center px-6 py-3 align-middle font-medium tracking-wider uppercase duration-300">
                            Create with us
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="wrapper">
              <div className="relative grid grid-cols-1 overflow-hidden pt-5 pb-20 align-middle md:grid-cols-2">
                <div className="relative z-30 flex flex-col items-end justify-end">
                  <div className="flex w-full md:w-[80%]">
                    <Suspense fallback={<p>Loading showcases...</p>}>
                      <CCProfileSwiper />
                    </Suspense>
                  </div>
                </div>
                <div className="flex h-full w-full flex-col py-10 md:py-0">
                  <div className="font-bogart text-md mx-auto flex h-full w-[90%] flex-col items-center justify-center gap-4 font-light md:w-[75%] md:gap-8 md:text-xl">
                    <p>
                      Discover{" "}
                      <span className="font-medium">Hardik Tuteja</span>, a
                      unique co-creator on the Morni platform, where his
                      engineering background and love for nature intertwine to
                      shape his distinctive approach to fashion design. Hardik
                      {"'"}s career in the supply chain of cannabis and
                      mushrooms places him at the intersection of nature and
                      technology. This blend of interests and experiences has
                      led him to embrace clothing as a canvas for his artistic
                      expression, allowing him to delve into a creative realm
                      that reflects his passions and perspectives.
                    </p>
                    <p>
                      Collaborating with all the design houses on the Morni
                      platform, Hardik has brought to life a series of designs
                      that resonate with his deep appreciation for the natural
                      world. A prominent theme in his collection is his
                      fascination with mushrooms, symbolizing his connection to
                      these natural elements. Each piece in Hardik{"'"}s
                      collection is not just a garment but a narrative that
                      combines the precision of his engineering insight with the
                      organic beauty of nature.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="project-bg-grad relative pt-20 pb-10">
          <div className="mob-noise absolute top-0 left-0 z-3 h-full w-full"></div>
          <div className="mob-noise absolute top-0 left-0 z-3 h-full w-full"></div>
          <div className="relative z-30">
            <div className="wrapper">
              <div className="flex w-full flex-col gap-20 md:flex-row">
                <div className="relative flex-col md:flex md:w-[60%] md:pt-20">
                  <div>
                    <div className="flex w-full flex-col gap-5 md:w-[60%]">
                      <h1>
                        Featured
                        <br />
                        Projects
                      </h1>
                      <p className="font-bogart text-xl font-light">
                        Welcome to the heart and soul of Hardik Tuteja{"'"}s
                        creative universe: our Design Houses, where your visions
                        become reality.
                      </p>
                    </div>
                  </div>
                  <Suspense fallback={<p>Loading projects...</p>}>
                    <ProjectList />
                  </Suspense>
                </div>
                <div className="top-[64px] flex w-full flex-col md:sticky md:h-screen md:w-[40%]">
                  <Suspense fallback={<p>Loading products...</p>}>
                 <StoreThumbs /> 
                  </Suspense>

                  <div className="flex w-full py-8">
                    <BtnLink
                      id="link_cc_store"
                      href="/category"
                      label="Go to store"
                      color="gray"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="cc-other-sec relative flex w-full flex-col py-10 md:py-20">
          <div className="mob-noise absolute top-0 left-0 z-1 h-full w-full"></div>
          <div className="wrapper relative z-10">
            <div className="heading-title">
              EXPLORE OTHER
              <br />
              Co-Creators
            </div>
            <Suspense fallback={<p>Loading co-creators...</p>}>
              <CoCreatorsList />
            </Suspense>
          </div>
        </div>
      </div>
    </>
  );
}