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

const LAYOUT = "what_we_offer";

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

export type WhatWeOfferData = z.infer<typeof WhatWeOfferSchema>;

export function WhatWeOffer({ data }: { data: WhatWeOfferData }) {
  const isGreen = data.accent === "green";
  return (
    <section
      className="sec"
      style={{ background: "#fff", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}
      data-screen-label="What We Offer"
    >
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48, alignItems: "start" }}>
          <div>
            {data.eyebrow ? (
              <span className={isGreen ? "eyebrow green" : "eyebrow"}>
                <span className="pip" />
                {data.eyebrow}
              </span>
            ) : null}
            {data.title_lines.length > 0 ? (
              <h2 className={isGreen ? "h-section green" : "h-section"}>
                {data.title_lines.map((line, i) => (
                  <span
                    key={i}
                    dangerouslySetInnerHTML={{
                      __html: line + (i < data.title_lines.length - 1 ? "<br/>" : ""),
                    }}
                  />
                ))}
              </h2>
            ) : null}
            {data.lede ? <p className="lede">{data.lede}</p> : null}
          </div>
          <div className="offer-grid">
            {data.items.map((item, i) => (
              <div key={i} className={isGreen ? "offer green" : "offer"}>
                <span className="n">{item.num}</span>
                <div>
                  <div className="ttl">{item.title}</div>
                  <p className="desc">{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

registerSection<WhatWeOfferData>(LAYOUT, WhatWeOffer);
registerSchema(LAYOUT, WhatWeOfferSchema);