"use client";

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

function WhoRunsItView({ className = "" }: { className?: string }) {
  const copy = useMessages().pages.workshops.whoRunsIt;

  return (
    <section
      data-figma-node="24265-50769"
      className={`bg-[var(--color-surface-default-primary)] py-[var(--space-1800)] pl-0 pr-[var(--space-400)] md:pr-[var(--space-1200)] lg:py-[120px] lg:pr-[var(--space-2400)] ${className}`}
    >
      <div className="flex w-full flex-col items-start gap-12 lg:flex-row lg:items-center lg:gap-20">
        <div
          className="relative aspect-square w-full max-w-[419px] shrink-0 overflow-hidden bg-[var(--color-content-invert-brand-royal)]"
          aria-hidden
        >
          {/* eslint-disable-next-line @next/next/no-img-element -- decorative Figma mark */}
          <img
            src="/assets/marketing/workshops/who-runs-it-shape.svg"
            alt=""
            className="absolute inset-0 size-full object-cover"
          />
          <div className="absolute bottom-0 left-0 h-1/2 w-full overflow-hidden bg-[var(--color-surface-invert-brand-lime)]">
            {/* eslint-disable-next-line @next/next/no-img-element -- decorative Figma mark */}
            <img
              src="/assets/marketing/workshops/who-runs-it-mark.svg"
              alt=""
              className="size-full object-cover object-left"
            />
          </div>
        </div>
        <div className="flex min-w-0 flex-1 flex-col gap-8 pr-[var(--space-400)] lg:pr-0">
          <h2 className="x-large-heading text-[var(--color-content-default-primary)]">
            {copy.title}
          </h2>
          <ul className="flex flex-col gap-8 md:flex-row md:flex-wrap md:gap-16">
            {copy.people.map((person) => (
              <li key={person.id} className="flex min-w-[240px] flex-1 gap-4">
                <div className="min-w-0 flex-1">
                  <p className="text-[16px] font-bold leading-6 text-[var(--color-content-default-primary)]">
                    {person.name}
                  </p>
                  <p className="small-paragraph text-[var(--color-content-default-secondary)]">
                    {person.bio}
                  </p>
                </div>
                {/* eslint-disable-next-line @next/next/no-img-element -- facilitator portrait from Figma */}
                <img
                  src={person.image}
                  alt={person.imageAlt}
                  width={84}
                  height={84}
                  className="size-[84px] shrink-0 rounded-full border-2 border-white/40 object-cover"
                />
              </li>
            ))}
          </ul>
          <div className="border-t border-[var(--color-border-default-secondary)] pt-6">
            <Button href={`#${WORKSHOP_SIGNUP_ANCHOR_ID}`} size="small">
              {copy.button}
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

export default memo(WhoRunsItView);