Layout 524

import { BackgroundCard } from "@/components/ui/card";
import { Button, type ButtonProps } from "@/components/ui/button";
import { ChevronRight } from "relume-icons";

type ImageProps = {
  src: string;
  alt?: string;
};

type BaseCardProps = {
  image: ImageProps;
  heading: string;
  description: string;
};

type CardBigProps = BaseCardProps & {
  tagline: string;
  buttons: ButtonProps[];
};

type CardSmallProps = BaseCardProps & {
  logo: ImageProps;
  button: ButtonProps;
};

type Props = {
  tagline: string;
  heading: string;
  description: string;
  cardBig: CardBigProps;
  cardsSmall: CardSmallProps[];
};

export type Layout524Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Layout524 = (props: Layout524Props) => {
  const { tagline, heading, description, cardBig, cardsSmall } = {
    ...Layout524Defaults,
    ...props,
  };

  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="mb-12 md:mb-18 lg:mb-20">
          <div className="mx-auto max-w-lg text-center">
            <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
            <h2 className="mb-5 text-h2 font-bold md:mb-6">{heading}</h2>
            <p className="text-medium">{description}</p>
          </div>
        </div>
        <div className="grid grid-cols-1 gap-6 md:gap-8 lg:grid-cols-2">
          <CardBig {...cardBig} />
          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
            {cardsSmall.map((card, index) => (
              <CardSmall key={index} {...card} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const CardBig: React.FC<CardBigProps> = ({ image, tagline, heading, description, buttons }) => (
  <BackgroundCard className="relative flex flex-col justify-center p-6 md:p-8 lg:p-12">
    <div className="absolute inset-0 z-0">
      <div className="absolute inset-0 bg-neutral-darkest/50" />
      <img src={image.src} className="size-full object-cover" alt={image.alt} />
    </div>
    <div className="relative z-10">
      <p className="mb-2 inline-block text-small font-semibold text-white">{tagline}</p>
      <h3 className="mb-5 text-h3 font-bold text-white md:mb-6">{heading}</h3>
      <p className="text-white">{description}</p>
      <div className="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
        {buttons.map((button, index) => (
          <Button key={index} {...button}>
            {button.title}
          </Button>
        ))}
      </div>
    </div>
  </BackgroundCard>
);

const CardSmall: React.FC<CardSmallProps> = ({ image, logo, heading, description, button }) => (
  <BackgroundCard className="relative flex flex-col p-6 md:p-8 lg:p-6">
    <div className="absolute inset-0 z-0">
      <div className="absolute inset-0 bg-neutral-darkest/50" />
      <img src={image.src} className="size-full object-cover" alt={image.alt} />
    </div>
    <div className="relative z-10 flex flex-1 flex-col justify-between">
      <div>
        <div className="mb-3 md:mb-4">
          <img src={logo.src} className="size-12" alt={logo.alt} />
        </div>
        <h3 className="mb-2 text-h5 font-bold text-white">{heading}</h3>
        <p className="text-white">{description}</p>
      </div>
      <div className="mt-5 flex items-center md:mt-6">
        <Button {...button}>{button.title}</Button>
      </div>
    </div>
  </BackgroundCard>
);

const cardBig: CardBigProps = {
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder background image",
  },
  tagline: "Tagline",
  heading: "Medium length section heading goes here",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
  buttons: [
    { title: "Button", variant: "secondary-alt" },
    {
      title: "Button",
      variant: "link-alt",
      size: "link",
      iconRight: <ChevronRight className="text-white" />,
    },
  ],
};

const cardSmall: CardSmallProps = {
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder background image",
  },
  logo: {
    src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon-white.svg",
    alt: "Relume logo",
  },
  heading: "Medium length section heading goes here",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  button: {
    title: "Button",
    variant: "link-alt",
    size: "link",
    iconRight: <ChevronRight className="text-white" />,
  },
};

export const Layout524Defaults: Props = {
  tagline: "Tagline",
  heading: "Short heading goes here",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  cardBig: cardBig,
  cardsSmall: [cardSmall, cardSmall, cardSmall, cardSmall],
};