import Link from "next/link";
import { z } from "zod";
import { registerSection } from "./registry";
import { registerSchema, LinkSchema } from "./schemas";
import { SectionIcon } from "./icons";
import { getRequestLocale } from "@/lib/i18n/strings";
import { localizeHref } from "@/lib/i18n/config";

const LAYOUT = "services_grid";

export const ServicesGridSchema = z.object({
  eyebrow: z.string().default(""),
  title_line_1: z.string().default(""),
  title_line_2: z.string().default(""),
  side_link: LinkSchema.optional(),
  items: z
    .array(
      z.object({
        key: z.string().default(""),
        tag: z.string().default(""),
        icon: z.string().default(""),
        title: z.string().default(""),
        description: z.string().default(""),
        image_url: z.string().default(""),
        image_alt: z.string().default(""),
        href: z.string().default("#"),
        cta_label: z.string().default(""),
      }),
    )
    .default([]),
});

export type ServicesGridData = z.infer<typeof ServicesGridSchema>;

export async function ServicesGrid({ data }: { data: ServicesGridData }) {
  const locale = await getRequestLocale();
  const forwardArrow = locale === "en" ? "arrow-right" : "arrow-left";
  const localizeIfInternal = (href: string): string => {
    if (!href.startsWith("/") || href.startsWith("//")) return href;
    return localizeHref(href, locale);
  };
  return (
    <section className="services" id="services" data-screen-label="03 Services">
      <div className="wrap">
        <div className="head">
          <div>
            {data.eyebrow ? (
              <span className="eyebrow">
                <span className="pip" />
                {data.eyebrow}
              </span>
            ) : null}
            {(data.title_line_1 || data.title_line_2) && (
              <h2 className="h-section">
                {data.title_line_1}
                {data.title_line_2 ? (
                  <>
                    <br />
                    <span dangerouslySetInnerHTML={{ __html: data.title_line_2 }} />
                  </>
                ) : null}
              </h2>
            )}
          </div>
          {data.side_link?.label ? (
            <div className="right">
              <Link href={localizeIfInternal(data.side_link.href)}>
                {data.side_link.label} <SectionIcon name={forwardArrow} size={16} />
              </Link>
            </div>
          ) : null}
        </div>
        <div className="svc-grid">
          {data.items.map((item) => (
            <Link key={item.key || item.title} className={`svc ${item.key}${item.image_url ? " svc--has-image" : ""}`} href={localizeIfInternal(item.href)}>
              <div
                className="visual"
                style={
                  item.image_url
                    ? {
                        backgroundImage: `linear-gradient(180deg, rgba(21,21,21,0.18) 0%, rgba(21,21,21,0.55) 100%), url('${item.image_url}')`,
                        backgroundSize: "cover",
                        backgroundPosition: "center",
                      }
                    : undefined
                }
                role={item.image_url ? "img" : undefined}
                aria-label={item.image_url ? item.image_alt || item.title : undefined}
              >
                <span className="label">{item.tag}</span>
                <span className="ico">
                  <SectionIcon name={item.icon} size={28} />
                </span>
              </div>
              <div className="body">
                <h3>{item.title}</h3>
                <p>{item.description}</p>
                {item.cta_label ? (
                  <span className="more">
                    {item.cta_label} <SectionIcon name={forwardArrow} size={14} />
                  </span>
                ) : null}
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

registerSection<ServicesGridData>(LAYOUT, ServicesGrid);
registerSchema(LAYOUT, ServicesGridSchema);