import type { BusinessesListBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { ExternalLink, Mail, MapPin, Phone } from "lucide-react";

export function BusinessesList({ block }: { block: BusinessesListBlock }) {
  const { t } = useLocale();
  return (
    <section className="py-16 md:py-20">
      <div className="container">
        <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 max-w-3xl text-foreground/80 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: t(block.intro) }}
          />
        )}
        <div className="mt-12 space-y-12">
          {block.categories.map((cat, ci) => (
            <div key={ci}>
              <h3 className="font-display text-2xl text-primary border-b border-border pb-2 mb-6">
                {t(cat.name)}
              </h3>
              <ul className="grid gap-5 md:grid-cols-2">
                {cat.businesses.map((b, bi) => (
                  <li
                    key={bi}
                    className="bg-card rounded-sm border border-border/70 p-6 transition-colors hover:border-primary/40"
                  >
                    <h4 className="font-display text-lg text-primary">{b.name}</h4>
                    {b.description && (
                      <div
                        className="mt-2 text-sm text-foreground/80 leading-relaxed"
                        dangerouslySetInnerHTML={{ __html: t(b.description) }}
                      />
                    )}
                    <div className="mt-4 space-y-1.5 text-sm">
                      {b.address && (
                        <p className="inline-flex items-center gap-2 text-muted-foreground">
                          <MapPin className="h-4 w-4" aria-hidden />
                          {b.address}
                        </p>
                      )}
                      {b.phone && (
                        <p>
                          <a
                            href={`tel:${b.phone.replace(/[^0-9+]/g, "")}`}
                            className="inline-flex items-center gap-2 text-primary hover:text-primary-hover transition-colors"
                          >
                            <Phone className="h-4 w-4" aria-hidden />
                            {b.phone}
                          </a>
                        </p>
                      )}
                      {b.email && (
                        <p>
                          <a
                            href={`mailto:${b.email}`}
                            className="inline-flex items-center gap-2 text-primary hover:text-primary-hover transition-colors break-all"
                          >
                            <Mail className="h-4 w-4 shrink-0" aria-hidden />
                            {b.email}
                          </a>
                        </p>
                      )}
                      {b.website && (
                        <p>
                          <a
                            href={b.website}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center gap-2 text-primary hover:text-primary-hover transition-colors"
                          >
                            <ExternalLink className="h-4 w-4" aria-hidden />
                            {b.website.replace(/^https?:\/\//, "")}
                          </a>
                        </p>
                      )}
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}