import { landingDict } from "@/features/landing/dict";
import Image from "next/image";

export function LandingBenefits() {
  return (
    <section className="px-4 py-16 sm:px-6 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <div className="flex gap-2 lg:flex-row flex-col">
          <div className="flex-1">
            <h2 className="text-center text-2xl font-bold text-foreground sm:text-3xl">
              {landingDict.benefits.title}
            </h2>
            <ul className="mx-auto mt-10 grid max-w-3xl gap-3">
              {landingDict.benefits.items.map((item) => (
                <li
                  key={item}
                  className="flex items-start gap-3 rounded-2xl bg-card px-4 py-3 text-sm text-card-foreground shadow-soft-sm"
                >
                  <span className="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
                    ✓
                  </span>
                  {item}
                </li>
              ))}
            </ul>
          </div>
          <Image className="m-auto" src="/landing/1.jpg" alt="Benefits" width={400} height={400} unoptimized />

        </div>
      </div>
    </section>
  );
}