"use client";

import { useState } from "react";
import Image from "next/image";

type FooterTrustBlockProps = {
  whatsapp: string | null;
};

function formatWhatsappNumber(raw: string) {
  const digits = raw.replace(/\D/g, "");
  if (digits.length === 10) {
    return `+91 ${digits.slice(0, 5)} ${digits.slice(5)}`;
  }
  return `+91 ${digits}`;
}

export default function FooterTrustBlock({ whatsapp }: FooterTrustBlockProps) {
  const [showCertificate, setShowCertificate] = useState(false);

  return (
    <div className="mt-6 space-y-4">
      {whatsapp && (
        <a
          href={`https://api.whatsapp.com/send?phone=+91${whatsapp}&text=Hello Biznie`}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={`Chat on WhatsApp at ${formatWhatsappNumber(whatsapp)}`}
          className="group flex w-full items-center gap-3 rounded-xl border border-white/15 bg-white/5 px-3.5 py-2.5 text-white backdrop-blur-sm transition-colors hover:border-[#25D366]/45 hover:bg-white/10"
        >
          <span className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-[#25D366]/35 bg-[#25D366]/12">
            <Image
              src="/whatsapp.png"
              alt="WhatsApp"
              width={22}
              height={22}
              className="h-[22px] w-[22px]"
            />
            <span className="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full border border-[#0b1220] bg-[#25D366]" />
          </span>

          <div className="min-w-0">
            <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-emerald-200/90">
              WhatsApp Support
            </p>
            <p className="mt-0.5 text-sm font-semibold leading-tight text-white">Talk to Sales</p>
            <p className="mt-0.5 truncate text-xs leading-tight text-gray-300">
              {formatWhatsappNumber(whatsapp)}
            </p>
          </div>
        </a>
      )}

      <button
        type="button"
        onClick={() => setShowCertificate(true)}
        title="Click to view Startup India certificate"
        className="w-full cursor-pointer text-left"
      >
        <div className="inline-block rounded-md bg-white px-4 py-2">
          <Image
            src="/dpiit-logo.png"
            alt="DPIIT Recognised Startup India"
            width={220}
            height={60}
            className="h-10 w-auto"
          />
        </div>
        <p className="mt-2 text-sm leading-relaxed text-gray-300">
          Recognised by Govt. of India
          <br />
          Registered with Startup India
        </p>
      </button>

      {showCertificate && (
        <div
          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 px-4"
          onClick={() => setShowCertificate(false)}
        >
          <div
            className="relative max-h-[90dvh] w-full max-w-5xl rounded-lg bg-white p-4"
            onClick={(e) => e.stopPropagation()}
          >
            <button
              type="button"
              onClick={() => setShowCertificate(false)}
              className="absolute right-2 top-2 grid h-11 w-11 place-items-center text-3xl leading-none text-gray-700 hover:text-black"
              aria-label="Close certificate"
            >
              &times;
            </button>
            <p className="mb-3 text-center text-base font-semibold text-gray-800">
              Startup India Registration Certificate
            </p>
            <div className="relative h-[60dvh] sm:h-[70dvh] w-full">
              <Image
                src="/certificate.jpeg"
                alt="Startup India Certificate"
                fill
                className="object-contain"
                sizes="(max-width: 1024px) 100vw, 900px"
                priority
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}