import CheckIcon from '~icons/tabler/check.tsx';

const benefits: string[] = [
  'Various types of coffee beans',
  'Coworking area',
  'Meeting room',
];

export default function TwoColumnsWithImage() {
  return (
    <section className="container mx-auto flex flex-col items-center px-8 py-36 sm:flex-row-reverse sm:px-12">
      <div className="mb-8 w-full sm:mb-0 sm:w-1/2 sm:pl-4 md:pl-16">
        <img
          alt="Hanging out with friends"
          className="rounded-lg sm:rounded-br-[80px] sm:rounded-tl-[120px]"
          src="/images/pexels-ketut-subiyanto-4353618.jpg"
        />
      </div>
      <div className="mr-4 w-full text-center sm:w-1/2 sm:text-left">
        <h1 className="mb-6 text-3xl font-bold leading-tight dark:text-slate-50 md:text-4xl">
          Hangout, work or just relax? Got it!
        </h1>
        <p className="mb-2 leading-relaxed text-slate-700 dark:text-slate-400">
          We provide indoor & outdoor space with delighted yet affordable foods
          & beverages.
        </p>
        <ul className="mb-8 flex flex-col items-center space-y-1 dark:text-slate-400 sm:items-start">
          {benefits.map((benefit, index) => (
            <li className="flex items-end" key={index}>
              <CheckIcon className="mr-2 text-orange-300" />
              <span>{benefit}</span>
            </li>
          ))}
        </ul>
        <div className="flex flex-col space-y-3 md:flex-row md:space-x-2 md:space-y-0">
          <button className="rounded-lg border-0 bg-slate-900 px-6 py-3 text-base text-white shadow-lg shadow-slate-300 transition hover:bg-orange-300 hover:text-slate-900 hover:shadow-orange-300 dark:bg-orange-300 dark:text-black dark:shadow-sm dark:shadow-orange-300 dark:hover:bg-orange-400 sm:py-2">
            Open menu
          </button>
          <button className="rounded-lg border-0 bg-white px-6 py-3 text-base text-slate-900 shadow-lg shadow-slate-100 transition hover:bg-orange-300 hover:text-slate-900 hover:shadow-orange-300 dark:bg-slate-700 dark:text-slate-300 dark:shadow-sm dark:shadow-slate-800 dark:hover:bg-slate-600 sm:py-2">
            Explore services
          </button>
        </div>
      </div>
    </section>
  );
}

export default function SingleColumn() {
  return (
    <section className="container mx-auto px-8 py-36 text-center sm:px-12">
      <h1 className="mb-12 text-5xl font-extrabold leading-tight dark:text-slate-50 sm:text-6xl">
        Get funding for your business growth
      </h1>
      <p className="mb-12 leading-relaxed text-slate-700 dark:text-slate-400">
        UniqueFund provides access to fast and reliable financing solutions for
        SMEs. We have partnership with trusted loan providers with wide range of
        options.
      </p>
      <div className="mx-auto flex w-fit flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4">
        <button className="rounded-md border-0 bg-violet-500 px-12 py-2 text-base text-white shadow-lg shadow-violet-300 transition hover:bg-violet-600 hover:shadow-violet-400 dark:shadow-violet-900">
          Register now
        </button>
        <button className="rounded-md border-0 bg-slate-100 px-12 py-2 text-base text-dark-900 shadow-lg shadow-slate-100 transition hover:bg-white hover:shadow-slate-200 dark:shadow-slate-600">
          Learn more
        </button>
      </div>
    </section>
  );
}

export default function SingleColumnWithBlurredColors() {
  return (
    <section className="container mx-auto px-8 py-36 text-center sm:px-12">
      <div className="absolute left-0 top-64 -z-10 h-72 w-72 rounded-full bg-violet-500 opacity-10 blur-3xl dark:bg-violet-700"></div>
      <div className="absolute right-0 top-24 -z-10 h-72 w-72 rounded-full bg-danger-500 opacity-10 blur-3xl dark:bg-danger-800"></div>

      <h1 className="mb-12 text-5xl font-extrabold leading-tight dark:text-slate-50 sm:text-6xl">
        Get funding for your business growth
      </h1>
      <p className="mb-12 leading-relaxed text-slate-700 dark:text-slate-400">
        UniqueFund provides access to fast and reliable financing solutions for
        SMEs. We have partnership with trusted loan providers with wide range of
        options.
      </p>
      <div className="mx-auto flex w-fit flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4">
        <button className="rounded-md border-0 bg-violet-500 px-12 py-2 text-base text-white shadow-lg shadow-violet-300 transition hover:bg-violet-600 hover:shadow-violet-400 dark:shadow-violet-900">
          Register now
        </button>
        <button className="rounded-md border-0 bg-slate-100 px-12 py-2 text-base text-dark-900 shadow-lg shadow-slate-100 transition hover:bg-white hover:shadow-slate-200 dark:shadow-slate-600">
          Learn more
        </button>
      </div>
    </section>
  );
}

export default function TwoColumnsWithIllustration() {
  return (
    <section className="container mx-auto flex flex-col px-8 py-36 sm:flex-row-reverse sm:px-12">
      <img
        alt="Woman doing meditation"
        className="mb-8 w-full sm:mb-0 sm:ml-4 sm:w-1/2 dark:contrast-200"
        src="/illustrations/undraw_meditation_re_gll0.svg"
      />
      <div className="mr-4 w-full text-center sm:w-1/2 sm:text-left">
        <h1 className="mb-4 text-3xl font-bold leading-tight dark:text-dark-50 md:text-4xl">
          Train your mind,
          <br /> be peaceful
        </h1>
        <p className="mb-8 leading-relaxed text-slate-700 dark:text-slate-400">
          Our sanctuary is a good place to learn meditation, yoga and meet
          people with positive vibes.
        </p>
        <button className="rounded-lg border-0 bg-pink-400 px-12 py-2 text-base text-white shadow-lg shadow-pink-300 transition hover:bg-pink-500 hover:shadow-pink-400 dark:shadow-pink-900">
          Register now
        </button>
      </div>
    </section>
  );
}