"use client";

import { FiPhone, FiArrowRight } from "react-icons/fi";
import Link from "next/link";
import { type RichTextRoot, renderLexical } from "../utils";

import { playfair, montserrat } from "@/lib/fonts";


type CtaBannerBlock = {
  type?: string;
  props?: {
    headline?: RichTextRoot | string | null;
    body?: RichTextRoot | string | null;
    style?: string | null;
    ctas?: {
      id?: string | null;
      label?: string | null;
      href?: string | null;
      style?: string | null;
      ctaId?: string | null;
    }[];
    meta?: {
      anchorId?: string | null;
    } | null;
  } | null;
};

type ScillyPageData = {
  layout?: CtaBannerBlock[];
};

function isCtaBannerBlock(block: any): block is CtaBannerBlock {
  return block?.type === "ctaBannerV1";
}

function normalizeHref(href?: string | null) {
  if (!href) return null;
  if (href.startsWith("#")) return href;
  if (href.startsWith("http://") || href.startsWith("https://")) return href;
  return `https://${href}`;
}

export default function ReadyToExperienceParadise({
  data,
}: {
  data?: ScillyPageData;
}) {
  const block = data?.layout?.find(isCtaBannerBlock);
  if (!block?.props) return null;

  const { headline, body, ctas, meta } = block.props;

  const primaryCta = ctas?.find((c) => c.style === "primary") || ctas?.[0];
  const outlineCta = ctas?.find((c) => c.style === "outline") || ctas?.[1];

  const primaryHref = normalizeHref(primaryCta?.href) || "#";
  const outlineHref = normalizeHref(outlineCta?.href) || "#";

  return (
    <section id={meta?.anchorId || undefined} className="w-full bg-[#85714D]/10">
      <div className="mx-auto flex w-full max-w-[1440px] justify-center px-[20px] py-[48px] md:px-[80px] md:py-[60px] xl:px-[325px] xl:py-[74px]">
        <div className="flex w-full max-w-[790px] flex-col items-center text-center">
          {headline ? (
            <h2
              className={`${playfair.className} text-[22px] leading-[1.1] tracking-[1px] text-[#85714D] md:text-[48px] xl:text-[50px]`}
            >
              {renderLexical(headline)}
            </h2>
          ) : null}

          {body ? (
            <p className="mt-[32px] max-w-[790px] text-[12px] leading-[1.55] text-[#5F5A54] md:text-[24px]">
              {renderLexical(body)}
            </p>
          ) : null}

          <div className="mt-[32px] flex w-full flex-col items-center justify-center gap-[10px] sm:flex-row sm:gap-[48px]">
            {primaryCta ? (
              <Link
                href={primaryHref}
                id={primaryCta.ctaId ?? undefined}
                className={`group flex h-[36.1px] w-full max-w-[271.5px] items-center justify-center gap-[10px] rounded-full bg-[#85714D] px-[28px] ${montserrat.className} text-[15px] font-semibold uppercase leading-none tracking-[0.02em] text-white transition-all duration-300 hover:scale-105 hover:bg-[#85714D] hover:shadow-lg sm:h-[52px] sm:max-w-[350px] sm:text-[22px]`}
              >
                <span>{primaryCta.label || "Book Now"}</span>
                <svg
                  viewBox="0 0 39 14"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-auto w-[20px] transition-transform duration-300 group-hover:translate-x-1 sm:h-[14px] sm:w-[38.07px]"
                >
                  <path
                    d="M1 7H38M31 1L38 7L31 13"
                    stroke="currentColor"
                    strokeWidth="1.59"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </Link>
            ) : null}

            {outlineCta ? (
              <Link
                href={outlineHref}
                id={outlineCta.ctaId ?? undefined}
                className={`group flex h-[36.1px] w-full max-w-[271.5px] items-center justify-center gap-[10px] rounded-full bg-white px-[28px] ${montserrat.className} text-[15px] font-semibold uppercase leading-none tracking-[0.02em] text-[#85714D] transition-all duration-300 hover:scale-105 hover:bg-[#fcfcfc] hover:shadow-lg sm:h-[52px] sm:max-w-[350px] sm:text-[22px]`}
              >
                <span>{outlineCta.label || "Call Us"}</span>
                <FiPhone className="text-[15px] transition-transform duration-300 group-hover:scale-110 sm:text-[22px]" />
              </Link>
            ) : null}
          </div>
        </div>
      </div>
    </section>
  );
}