"use client";

import { useTranslations } from "next-intl";
import LeftColumn from "./LeftColumn";
import RightColumn from "./RightColumn";

export default function OurFeaturesSection() {
  const t = useTranslations("ourFeatures.features");

  const features = [
    {
      title: t("feature1.title"),
      description: t("feature1.description"),
      variant: "dark" as const,
    },
    {
      title: t("feature2.title"),
      description: t("feature2.description"),
      variant: "light" as const,
    },
    {
      title: t("feature3.title"),
      description: t("feature3.description"),
      variant: "dark" as const,
    },
    {
      title: t("feature4.title"),
      description: t("feature4.description"),
      variant: "light" as const,
    },
  ];

  return (
    <section id="features" className="bg-background-dark scroll-mt-24 md:scroll-mt-28">
      <div className="p-4 sm:p-6 md:p-10 lg:p-16 xl:pt-20 grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 md:gap-12 lg:gap-16 xl:gap-20 lg:pb-1">
        <LeftColumn />
        <RightColumn features={features} />
      </div>
    </section>
  );
}