import { FadeIn } from "./fade-in";
import { getCvData, type Lang } from "@/lib/cv-data";

export function MotivationSection({ lang }: { lang: Lang }) {
  const data = getCvData(lang);

  return (
    <section
      id="motivatie"
      className="mx-auto max-w-[900px]"
      style={{ padding: "20px clamp(20px, 6vw, 80px) 100px" }}
    >
      <FadeIn>
        <div
          className="pl-6"
          style={{ borderLeft: "2px solid rgba(194,51,155,0.45)" }}
        >
          <p
            className="text-[13px] font-semibold uppercase mb-3"
            style={{ color: "#c2339b", letterSpacing: 3 }}
          >
            {data.ui.motivation.label}
          </p>
          <h2
            className="font-serif font-normal mb-7"
            style={{
              fontSize: "clamp(28px, 3.5vw, 40px)",
              color: "#e8e4df",
              letterSpacing: -1,
            }}
          >
            {data.ui.motivation.heading}
          </h2>

          <div className="max-w-[760px]">
            {data.motivation.map((paragraph) => (
              <p
                key={paragraph}
                className="text-[15px] leading-[1.8] mb-5 last:mb-0"
                style={{ color: "rgba(255,255,255,0.55)" }}
              >
                {paragraph}
              </p>
            ))}
          </div>
        </div>
      </FadeIn>
    </section>
  );
}