import { BtnLink } from "../button";
import HomeYBYWImgSlider from "./ybyw-img-slider";

export default function HomeYourBrandWay() {
  return (
    <div className="moq-wrap relative flex w-full flex-col overflow-hidden border-t-2 border-gray-950/25 md:border-b-2">
      <div className="moq-motif-wrap absolute -bottom-[30%] left-[2%] z-1 h-[600px] w-[600px]">
        <span className="bg-home-lotus"></span>
      </div>
      <div className="relative z-12 grid w-full grid-cols-1 md:grid-cols-2">
        <div className="flex h-full w-full flex-col justify-center align-middle">
          <div className="mx-auto flex w-[90%] flex-col gap-10 py-15 md:w-[70%]">
            <div>
              <div className="flex w-full justify-between">
                <div>
                  <span className="bg-fabric-flower"></span>
                  <span className="bg-fabric-flower"></span>
                  <span className="bg-fabric-flower"></span>
                </div>
                <div>
                  <span className="bg-fabric-flower"></span>
                  <span className="bg-fabric-flower"></span>
                  <span className="bg-fabric-flower"></span>
                </div>
              </div>
            </div>
            <div className="flex w-full flex-col gap-5">
              <h4 className="heading-title">Your Brand<br/>Your Way</h4>
              <p className="font-bogart text-2xl/6">
                For businesses tired of industrial bulk and templated designs.
              </p>
            </div>
            <div className="hidden md:flex w-full">
              <BtnLink
                id="link_ybyw"
                href="https://brands.mymorni.com/"
                label="Get started"
                color="silver"
                target={false}
              />
            </div>
            <div className="mt-10 hidden w-[80%] flex-col gap-4 text-xs font-medium sm:flex">
              <p>
                Morni is hand-stitched, small-batch, bespoke. An envelope for
                your brand{"'"}s character.
              </p>
              <p>
                Ideate, Design, and Launch your sustainable clothing line in
                weeks.
              </p>
            </div>
            <div className="hidden w-full justify-end md:flex">
              <p className="font-hasiant flex -rotate-20 flex-col gap-4 text-right text-6xl/8">
                <span>Minimise Waste</span>
                <span>Maximise Expression</span>
              </p>
            </div>
          </div>
        </div>
        <HomeYBYWImgSlider />
        
        <div className="mx-auto flex w-[90%] flex-col gap-4 text-xs font-medium sm:hidden">
          <div className="relative -mt-15">
            <p className="font-hasiant flex -rotate-20 flex-col gap-4 text-4xl/4">
              <span>Minimise Waste</span>
              <span>Maximise Expression</span>
            </p>
          </div>
          <div className="mt-15 pb-20 flex flex-col gap-4">
            <p>
              Morni is hand-stitched, small-batch, bespoke. An envelope for your
              brand{"'"}s character.
            </p>
            <p>
              Ideate, Design, and Launch your sustainable clothing line in weeks
            </p>
            <div className="flex w-full mt-4">
              <BtnLink
                id="link_ybyw_mobile"
                href="https://stories.mymorni.ai/brand-partners"
                label="Get started"
                color="silver"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}