import { z } from "zod";
import { registerSection } from "./registry";
import { registerSchema } from "./schemas";
import { SectionIcon } from "./icons";

const LAYOUT = "why_us";

export const WhyUsSchema = z.object({
  eyebrow: z.string().default(""),
  accent: z.enum(["purple", "green"]).default("green"),
  title_line_1: z.string().default(""),
  title_line_2: z.string().default(""),
  lede: z.string().default(""),
  items: z
    .array(
      z.object({
        num: z.string().default(""),
        icon: z.string().default(""),
        title: z.string().default(""),
        description: z.string().default(""),
      }),
    )
    .default([]),
});

export type WhyUsData = z.infer<typeof WhyUsSchema>;

export function WhyUs({ data }: { data: WhyUsData }) {
  const isGreen = data.accent === "green";
  return (
    <section className="whyus" data-screen-label="04 Why Us">
      <div className="wrap">
        <div className="head">
          {data.eyebrow ? (
            <span className={isGreen ? "eyebrow green" : "eyebrow"}>
              <span className="pip" />
              {data.eyebrow}
            </span>
          ) : null}
          {(data.title_line_1 || data.title_line_2) && (
            <h2 className={isGreen ? "h-section green" : "h-section"}>
              {data.title_line_1}
              {data.title_line_2 ? (
                <>
                  <br />
                  <span dangerouslySetInnerHTML={{ __html: data.title_line_2 }} />
                </>
              ) : null}
            </h2>
          )}
          {data.lede ? (
            <p className="lede" style={{ margin: "14px auto 0" }}>
              {data.lede}
            </p>
          ) : null}
        </div>
        <div className="why-grid">
          {data.items.map((item, i) => (
            <div key={i} className="why-card">
              <span className="num">{item.num}</span>
              <div className="ic">
                <SectionIcon name={item.icon} size={24} />
              </div>
              <h3>{item.title}</h3>
              <p>{item.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

registerSection<WhyUsData>(LAYOUT, WhyUs);
registerSchema(LAYOUT, WhyUsSchema);