"use client";
import dhStyle from "@/app/components/design-houses/theme";
import CoCreatorsList from "@/app/components/co-creation/cc-co-creators";
import StoreThumbs from "@/app/components/co-creation/cc-store-thumbs";
import ImageSwiperDH from "@/app/components/design-houses/dh-img-swipter";
import Image from "next/image";
import Link from "next/link";
import DHTeam from "@/app/components/design-houses/dh-team";

export default function DesignHouseDeails(props: any) {
  return (
    <>
      {props.children}
      <style jsx global>
        {dhStyle}
      </style>
      <div className="flex flex-col overflow-hidden pt-12">
        <div className="dh-hero relative">
          <div className="mob-noise absolute top-0 left-0 h-full w-full"></div>
          <div className="wrapper relative z-30">
            <div className="flex w-full pt-2">
              <Link
                href="/design-houses"
                id="link_view_all_design-house"
                className="linkBtn inline-flex py-2 text-xs underline underline-offset-6 duration-300"
              >
                View all design houses
              </Link>
            </div>
            <div className="mx-auto flex h-full w-full flex-col items-center justify-center gap-2 pb-20 md:w-[75%]">
              <div>
                <Image
                  src="/designhouses/heenaagrima/heena-agrima-logo.png"
                  width={128}
                  height={128}
                  alt="logo"
                  className="img-responsive"
                />
              </div>
              <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>
                Jaipur, India
              </div>
              <ul className="list-chips mt-5 *:text-xs">
                <li>Woman Owned</li>
                <li>Naural Dyes</li>
                <li>Summer Wear</li>
                <li>Eco Prints</li>
                <li>Hand Embroidery</li>
              </ul>
              <div className="flex w-full pt-5 md:w-[30%]">
                <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>
        <ImageSwiperDH />
        <div className="dh-hero relative py-10">
          <div className="mob-noise absolute top-0 left-0 z-10 h-full w-full"></div>
          <div className="wrapper">
            <div className="relative z-20 grid grid-cols-1 items-center md:grid-cols-2">
              <div className="mx-auto flex w-full flex-col">
                <p className="font-bogart text-xl font-light">
                  At HeenaAgrima, we intricately weave timeless elegance with a
                  commitment to sustainability. Inspired by global travels and
                  the vibrant South Asian heritage, our designs celebrate the
                  earth
                  {"'"} beauty, utilizing natural dyes and meticulous
                  handcrafting to entwine tradition and modernity, all with a
                  sustainable ethos at heart. Our journey harmonizes tradition
                  with contemporary innovation, every thread echoing tales
                  passed down through centuries.
                </p>
              </div>
              <div className="mx-auto flex w-full justify-end md:w-[75%]">
                <div>
                  <Image
                    src="/designhouses/heenaagrima/icon-motif.png"
                    height={320}
                    width={320}
                    alt="motif"
                    className="img-responsive"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="sec-feature-collection flex w-full flex-col">
          <div className="mob-noise flex flex-col gap-20 py-25">
            <div className="wrapper sec-collection">
              <div className="mx-auto flex w-full flex-col gap-8 text-center md:w-[60%]">
                <h1>
                  Featured
                  <br />
                  pieces
                </h1>
                <p className="font-bogart text-xl font-light">
                  Beyond mere garments, our designs compose poetic narratives in
                  fabric-whispering history{"'"}s secrets, harmonizing with the
                  present, and leading to a future tinted with the colors of a
                  bygoneera, all created sustainably. HeenaAgrima signifies a
                  symphony, uniting nature{"'"}s allure with diverse cultures
                  while embracing sustainability. Our brand is committed to
                  honoring nature crafting elegance and cultural richness, all
                  within a sustainable framework.
                </p>
              </div>
            </div>
            <div className="wrapper">
              <StoreThumbs />
            </div>
          </div>
        </div>
        <div className="sec-dh-team flex w-full flex-col py-10 md:py-25">
          <div className="">
            <div className="mx-auto flex w-full flex-col justify-between gap-8 md:flex-row">
              <div className="mx-auto flex w-full flex-col gap-4 px-[10%] text-center md:w-[30%] md:px-0 md:pl-[10%] md:text-left">
                <p className="heading-title team-heading">Meet the team</p>
                <div className="inline-flex align-bottom">
                  <p className="text-xs">
                    An ideal mix of imagination and magical skills. The ultimate
                    team concept for achieving amazing success!
                  </p>
                </div>
              </div>
              <div className="flex w-full items-center justify-center md:w-[70%]">
                <DHTeam />
              </div>
            </div>
          </div>
        </div>
        <div className="mob-noise py-20">
          <div className="wrapper">
            <div className="heading-title">
              EXPLORE OTHER
              <br />
              Design HOUSES
            </div>
            <CoCreatorsList />
          </div>
        </div>
      </div>
    </>
  );
}