"use client";

import { memo } from "react";
import Button from "../../buttons/Button";
import { useMessages } from "../../../contexts/MessagesContext";
import { WORKSHOP_SIGNUP_ANCHOR_ID } from "../../../../lib/workshopSignup";

const CARD_CLASS: Record<string, string> = {
  yellow:
    "bg-[var(--color-surface-invert-brand-secondary)] text-[var(--color-content-invert-brand-secondary)]",
  teal: "bg-[var(--color-surface-invert-brand-teal)] text-[var(--color-content-invert-brand-teal)]",
  lavender:
    "bg-[var(--color-surface-invert-brand-lavender)] text-[var(--color-content-invert-brand-lavender)]",
  red: "bg-[var(--color-surface-invert-brand-red)] text-[var(--color-content-invert-brand-red)]",
};

const DESKTOP_CARD_CLASS = [
  "left-[8%] top-[18%] w-[46%] -rotate-3",
  "left-[28%] top-[8%] w-[42%] rotate-[9deg]",
  "left-0 top-[34%] w-[48%] -rotate-[15deg]",
  "left-[36%] top-[42%] w-[52%] rotate-[16deg]",
];

function WorkshopHeroView({ className = "" }: { className?: string }) {
  const copy = useMessages().pages.workshops.hero;
  const href = `#${WORKSHOP_SIGNUP_ANCHOR_ID}`;

  return (
    <section
      data-figma-node="24258-40644"
      className={`bg-[var(--color-surface-default-primary)] px-[var(--space-400)] pb-[var(--space-1800)] pt-[var(--space-1200)] md:px-[var(--space-1200)] lg:px-[var(--space-2400)] lg:pb-[120px] lg:pt-[96px] ${className}`}
    >
      <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-12 lg:flex-row lg:items-center lg:gap-12">
        <div className="order-2 flex min-w-0 flex-1 flex-col gap-8 lg:order-1">
          <div className="flex flex-col gap-4">
            <p className="x-small-label-caps text-[var(--color-content-default-tertiary)]">
              {copy.eyebrow}
            </p>
            <h1 className="x-large-display text-[var(--color-content-default-primary)]">
              {copy.title}
            </h1>
            <p className="large-paragraph text-[var(--color-content-default-tertiary)]">
              {copy.body}
            </p>
          </div>
          <Button href={href} size="small">
            {copy.button}
          </Button>
          <p className="border-t border-[var(--color-border-default-secondary)] pt-6 text-[12px] leading-4 text-[var(--color-content-default-tertiary)]">
            {copy.credit}
          </p>
        </div>
        <div className="order-1 min-w-0 flex-1 lg:order-2">
          <div className="flex flex-col lg:hidden">
            {copy.cards.map((card, index) => (
              <div
                key={card.id}
                className={`rounded-[16px] px-4 py-6 ${CARD_CLASS[card.color] ?? ""} ${index > 0 ? "-mt-3" : ""}`}
              >
                <p className="small-heading">{card.label}</p>
              </div>
            ))}
          </div>
          <div className="relative hidden h-[480px] lg:block">
            {copy.cards.map((card, index) => (
              <div
                key={card.id}
                className={`absolute rounded-[16px] px-4 py-6 ${CARD_CLASS[card.color] ?? ""} ${DESKTOP_CARD_CLASS[index] ?? ""}`}
              >
                <p className="small-heading">{card.label}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default memo(WorkshopHeroView);