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

const LAYOUT = "intro_block";

export const IntroBlockSchema = z.object({
  eyebrow: z.string().default(""),
  title_line_1: z.string().default(""),
  title_line_2: z.string().default(""),
  body_paragraphs: z.array(z.string()).default([]),
  stats: z
    .array(
      z.object({
        number_html: z.string().default(""),
        label: z.string().default(""),
      }),
    )
    .default([]),
});

export type IntroBlockData = z.infer<typeof IntroBlockSchema>;

export function IntroBlock({ data }: { data: IntroBlockData }) {
  return (
    <section className="intro" data-screen-label="02 Intro">
      <div className="wrap">
        <div className="grid">
          <div>
            {data.eyebrow ? (
              <span className="eyebrow">
                <span className="pip" />
                {data.eyebrow}
              </span>
            ) : null}
            {(data.title_line_1 || data.title_line_2) && (
              <h2>
                {data.title_line_1}
                {data.title_line_2 ? (
                  <>
                    <br />
                    <span dangerouslySetInnerHTML={{ __html: data.title_line_2 }} />
                  </>
                ) : null}
              </h2>
            )}
          </div>
          <div className="copy">
            {data.body_paragraphs.map((p, i) => (
              <p key={i}>{p}</p>
            ))}
            {data.stats.length > 0 ? (
              <div className="stats">
                {data.stats.map((stat, i) => (
                  <div key={i} className="s">
                    <div className="n" dangerouslySetInnerHTML={{ __html: stat.number_html }} />
                    <div className="lb">{stat.label}</div>
                  </div>
                ))}
              </div>
            ) : null}
          </div>
        </div>
      </div>
    </section>
  );
}

registerSection<IntroBlockData>(LAYOUT, IntroBlock);
registerSchema(LAYOUT, IntroBlockSchema);