"use client";

/**
 * Figma: "Type / ContentLockup" (see registry)
 */

import { memo } from "react";
import ContentLockupView from "./ContentLockup.view";
import type { ContentLockupProps, VariantStyle } from "./ContentLockup.types";

const ContentLockupContainer = memo<ContentLockupProps>(
  ({
    title,
    subtitle,
    description,
    ctaText,
    ctaHref,
    buttonClassName = "",
    variant: variantProp = "hero",
    linkText,
    linkHref,
    alignment: alignmentProp = "center",
    titleId,
    titleContent,
  }) => {
    const variant = variantProp;
    const alignment = alignmentProp;
    // Variant-specific styling
    const variantStyles: Record<string, VariantStyle> = {
      hero: {
        container:
          "flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10",
        textContainer:
          "flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]",
        titleGroup: "flex flex-col xl:gap-0",
        titleContainer:
          "flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",
        title:
          "font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[110%] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)] [font-variation-settings:'opsz'_14,'wdth'_100]",
        subtitle:
          "font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[110%] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)] [font-variation-settings:'opsz'_14,'wdth'_100]",
        description:
          "text-small-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph text-[var(--color-content-inverse-primary)]",
        shape:
          "w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]",
      },
      feature: {
        container: "flex flex-col gap-[var(--space-400,16px)] md:gap-[var(--space-500,20px)] relative z-10",
        textContainer: "flex flex-col gap-[var(--space-100,4px)] md:gap-[var(--space-150,6px)]",
        titleGroup: "flex flex-col gap-[var(--space-100,4px)] md:gap-[var(--space-150,6px)]",
        titleContainer: "flex items-center",
        title:
          "font-bricolage-grotesque font-medium text-[18px] leading-[22px] md:text-[length:var(--sizing-600,24px)] md:leading-[32px] text-[var(--color-content-default-primary)]",
        subtitle:
          "text-small-paragraph md:text-medium-paragraph text-[var(--color-content-default-secondary)]",
        description:
          "font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-default-secondary)]",
        shape:
          "w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]",
      },
      about: {
        container:
          "flex flex-col gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-016)] relative z-10",
        textContainer:
          "flex flex-col gap-[var(--spacing-scale-008)] lg:gap-[var(--spacing-scale-004)]",
        titleGroup:
          "flex flex-col gap-[var(--spacing-scale-008)] lg:gap-[var(--spacing-scale-004)]",
        titleContainer:
          "flex flex-wrap items-center gap-[var(--spacing-scale-010)] xl:gap-[var(--spacing-scale-012)]",
        title:
          "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] md:text-large-display xl:text-x-large-display text-[var(--color-content-default-primary,white)]",
        subtitle:
          "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] lg:text-[18px] lg:leading-[22px] xl:text-[32px] xl:leading-[1.1] text-[var(--color-content-default-primary,white)]",
        description:
          "text-x-large-paragraph text-[var(--color-content-default-secondary)] whitespace-pre-line lg:text-small-paragraph xl:text-x-large-paragraph",
        shape:
          "w-[20px] h-[20px] md:w-[28px] md:h-[28px]",
      },
      book: {
        container:
          "flex flex-col gap-[var(--spacing-scale-016)] lg:gap-[var(--spacing-scale-020)] relative z-10",
        textContainer:
          "flex flex-col gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)]",
        titleGroup: "flex flex-col gap-0",
        titleContainer: "flex flex-wrap items-center gap-[var(--spacing-scale-008)]",
        title:
          "font-bricolage-grotesque font-medium text-[18px] leading-[22px] lg:text-[length:var(--spacing-scale-020)] lg:leading-[24px] xl:text-[length:var(--spacing-scale-032)] xl:leading-[1.1] text-[var(--color-content-default-primary)]",
        subtitle:
          "font-bricolage-grotesque font-medium text-[18px] leading-[22px] lg:text-[length:var(--spacing-scale-020)] lg:leading-[24px] xl:text-[length:var(--spacing-scale-032)] xl:leading-[1.1] text-[var(--color-content-default-primary)]",
        description:
          "text-small-paragraph text-[var(--color-content-default-secondary)] whitespace-pre-line lg:text-medium-paragraph xl:text-x-large-paragraph",
        shape:
          "w-[20px] h-[20px] md:w-[28px] md:h-[28px]",
      },
      learn: {
        container:
          "flex flex-col gap-[var(--spacing-scale-012)] relative z-10 pt-[var(--spacing-scale-016)] pb-[var(--spacing-scale-016)] px-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-040)] sm:pb-0 md:pt-[var(--spacing-scale-056)] md:px-[var(--spacing-scale-032)] lg:pt-[var(--spacing-scale-056)] lg:px-[var(--spacing-scale-064)]",
        textContainer:
          "flex flex-col gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-016)]",
        titleGroup:
          "flex flex-col gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-016)] lg:gap-[var(--spacing-scale-008)]",
        titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
        title:
          "font-bricolage-grotesque font-medium max-md:text-[28px] max-md:leading-[36px] tracking-[0] md:text-medium-display lg:text-large-display text-[var(--color-content-default-primary)]",
        subtitle:
          "font-space-grotesk text-medium-paragraph tracking-[0] lg:text-x-large-label text-[var(--color-content-default-primary)]",
        description:
          "font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-default-secondary)]",
        shape:
          "w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]",
      },
      ask: {
        container: "flex flex-col gap-[var(--spacing-scale-008)] relative z-10",
        textContainer: "flex flex-col gap-[var(--spacing-scale-008)]",
        titleGroup: "flex flex-col gap-[var(--spacing-scale-008)]",
        titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
        title:
          "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] tracking-[0] md:text-medium-display text-[var(--color-content-default-brand-primary)]",
        subtitle:
          "text-large-paragraph tracking-[0] md:text-x-large-paragraph text-[var(--color-content-default-primary)]",
        shape:
          "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]",
      },
      "ask-inverse": {
        container: "flex flex-col gap-[var(--spacing-scale-008)] relative z-10 w-full",
        textContainer: "flex flex-col gap-[var(--spacing-scale-008)]",
        titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full",
        titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
        title:
          "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] tracking-[0] md:text-medium-display text-[var(--color-content-inverse-primary)]",
        subtitle:
          "text-large-paragraph tracking-[0] md:text-x-large-paragraph text-[var(--color-content-invert-secondary)]",
        shape:
          "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]",
      },
      modal: {
        container:
          "flex flex-col gap-[var(--spacing-scale-008)] items-start justify-center py-[12px] relative w-full",
        textContainer: "flex flex-col gap-[var(--spacing-scale-008)] w-full",
        titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full",
        titleContainer: "flex items-center justify-start w-full",
        title:
          "font-bricolage-grotesque text-medium-heading tracking-[0] text-[var(--color-content-default-primary)] text-left",
        subtitle:
          "text-medium-paragraph tracking-[0] text-[var(--color-content-default-tertiary)] text-left",
        description:
          "text-medium-paragraph tracking-[0] text-[var(--color-content-default-tertiary)] text-left",
        shape: "w-[16px] h-[16px]",
      },
      login: {
        container:
          "flex flex-col gap-[var(--spacing-scale-012)] items-start justify-center relative w-full",
        textContainer: "flex flex-col gap-[var(--spacing-scale-012)] w-full",
        titleGroup: "flex flex-col gap-[var(--spacing-scale-012)] w-full",
        titleContainer: "flex items-center justify-start w-full",
        title:
          "font-bricolage-grotesque text-x-large-heading tracking-[0] text-[var(--color-content-default-primary)] text-left",
        subtitle:
          "text-large-paragraph tracking-[0] text-[var(--color-content-default-tertiary)] text-left",
        description:
          "text-large-paragraph tracking-[0] text-[var(--color-content-default-tertiary)] text-left",
        shape: "w-[16px] h-[16px]",
      },
    };

    const styles = variantStyles[variant] || variantStyles.hero;

    return (
      <ContentLockupView
        title={title}
        subtitle={subtitle}
        description={description}
        ctaText={ctaText}
        ctaHref={ctaHref}
        buttonClassName={buttonClassName}
        variant={variant}
        linkText={linkText}
        linkHref={linkHref}
        alignment={alignment}
        titleId={titleId}
        titleContent={titleContent}
        styles={styles}
      />
    );
  },
);

ContentLockupContainer.displayName = "ContentLockup";

export default ContentLockupContainer;
