import type { ServicesListBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { Check } from "lucide-react";

export function ServicesList({ block }: { block: ServicesListBlock }) {
  const { t } = useLocale();
  return (
    <section className="bg-band-cream py-16 md:py-20">
      <div className="container">
        <div className="max-w-3xl">
          <h2 className="font-display italic text-3xl sm:text-4xl md:text-5xl text-primary text-balance">
            {t(block.title)}
          </h2>
          {block.intro && (
            <div
              className="mt-4 text-base sm:text-lg leading-relaxed text-foreground/80"
              dangerouslySetInnerHTML={{ __html: t(block.intro) }}
            />
          )}
        </div>
        <div className="mt-10 grid gap-6 md:grid-cols-2">
          {block.services.map((s, i) => (
            <article
              key={i}
              className="bg-card rounded-sm border border-border/70 p-6 sm:p-8 transition-shadow hover:shadow-[0_20px_40px_-30px_hsl(var(--primary)/0.35)]"
            >
              <h3 className="font-display text-xl sm:text-2xl text-primary mb-2">
                {t(s.title)}
              </h3>
              <div
                className="text-foreground/80 leading-relaxed"
                dangerouslySetInnerHTML={{ __html: t(s.description) }}
              />
              {s.items && s.items.length > 0 && (
                <ul className="mt-4 space-y-2">
                  {s.items.map((item, j) => (
                    <li key={j} className="flex items-start gap-2 text-sm text-foreground/85">
                      <Check className="h-4 w-4 mt-0.5 text-accent shrink-0" aria-hidden />
                      <span>{t(item)}</span>
                    </li>
                  ))}
                </ul>
              )}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}