"use client";

import { memo } from "react";
import type {
  FourQuestionTone,
  FourQuestionsViewProps,
} from "./FourQuestions.types";

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

function FourQuestionsView({
  heading,
  cards,
  wishHeading,
  wishParagraphs,
  statsHeading,
  statsSource,
  stats,
}: FourQuestionsViewProps) {
  return (
    <section
      data-figma-node="24230:852"
      className="flex flex-col gap-11 border-b border-[var(--color-border-default-secondary)] bg-black px-[var(--space-400)] py-16 lg:gap-14 lg:px-[var(--space-2400)] lg:py-20"
      aria-labelledby="about-four-questions-heading"
    >
      <h2
        id="about-four-questions-heading"
        className="max-w-[768px] font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)] lg:text-heading-xxl"
      >
        {heading}
      </h2>
      <ul className="m-0 grid list-none grid-cols-1 gap-4 p-0 md:grid-cols-2 md:gap-6">
        {cards.map((card) => (
          <li
            key={card.question}
            className={`flex flex-col gap-3 rounded-[var(--radius-300)] p-6 lg:gap-4 lg:rounded-[var(--radius-500)] lg:p-8 ${TONE_CLASS[card.tone]}`}
          >
            <h3 className="font-bricolage-grotesque text-display-xs text-[var(--color-content-invert-primary)]">
              {card.question}
            </h3>
            <p className="font-inter text-paragraph-s text-[var(--color-content-invert-tertiary)] lg:text-paragraph-m">
              {card.line}
            </p>
          </li>
        ))}
      </ul>
      <div className="flex max-w-[736px] flex-col gap-6">
        <h2 className="font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)] lg:text-heading-xxl">
          {wishHeading}
        </h2>
        <div className="flex flex-col gap-[1lh]">
          {wishParagraphs.map((paragraph) => (
            <p
              key={paragraph}
              className="font-inter text-paragraph-m text-[var(--color-content-default-secondary)] lg:text-paragraph-l"
            >
              {paragraph}
            </p>
          ))}
        </div>
      </div>
      <div className="flex flex-col gap-3">
        <div className="flex flex-col gap-2 lg:gap-3">
          <h3 className="font-bricolage-grotesque text-display-s text-[var(--color-content-default-primary)]">
            {statsHeading}
          </h3>
          <p className="font-inter text-paragraph-s text-[var(--color-content-default-tertiary)] lg:text-paragraph-m">
            {statsSource}
          </p>
        </div>
        <dl className="m-0 flex flex-col pt-0 lg:flex-row lg:gap-16 lg:pt-10">
          {stats.map((stat) => (
            <div
              key={stat.value}
              className="flex flex-col gap-2.5 border-t border-[var(--color-border-default-secondary)] py-6 lg:flex-1 lg:gap-4 lg:border-t-0 lg:py-0"
            >
              <dt className="font-bricolage-grotesque text-display-s text-[var(--color-content-default-primary)] lg:text-display-xl">
                {stat.value}
              </dt>
              <dd className="m-0 font-inter text-paragraph-s text-[var(--color-content-default-secondary)] lg:text-paragraph-m">
                {stat.line}
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

FourQuestionsView.displayName = "FourQuestionsView";

export default memo(FourQuestionsView);