"use client";
import dynamic from "next/dynamic";

const SafeHtmlRenderer = dynamic(
  () => import("../../components/SafeHtmlRenderer"),
  { ssr: false }
);

import { Clock, Mail, MapPin, Phone } from "lucide-react";

interface AppealProps {
  main: any;
  web: any;
}

function Appeal({ main, web }: AppealProps) {
  return (
    <div className="container m-auto overflow-hidden">
      <div className="container m-auto overflow-hidden">
        <div className="mx-auto max-w-4xl px-4 text-center">
          <h1 className="mb-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
            {main?.pageTitle}
          </h1>
        </div>
      </div>

      <div className="">
        {/* Hero Section */}
        <div className="container mx-auto px-4 py-16 md:py-16 md:w-[87%] m-auto">
          <div className="flex flex-col md:flex-row justify-between items-center gap-12">
            <div className="safe">
              <SafeHtmlRenderer htmlContent={main?.shortContent} />
              {main?.fullContent && (
                <div className="safe">
                  <SafeHtmlRenderer htmlContent={main?.fullContent} />
                </div>
              )}
              <div
                className="cursor-pointer font-bold text-blue text-xl"
                onClick={() =>
                  window.open(`mailto:${main?.pageSubTitle}`, "_blank")
                }
              >
                {main?.pageSubTitle}
              </div>
            </div>
            <div className="w-full md:w-1/2">
              <div className="bg-btn p-8 md:pl-0  rounded-3xl ">
                <main className="">
                  <div className="max-w-3xl mx-auto">
                    <div className="bg-white shadow-xl overflow-hidden">
                      <div className="p-6 space-y-8">
                        {/* Office Address */}
                        <div className="flex items-start space-x-4">
                          <div className="flex-shrink-0">
                            <div className="p-3 bg-btn-ob  rounded-full">
                              <MapPin className="w-6 h-6 text-blue-600" />
                            </div>
                          </div>
                          <div>
                            <h2 className="text-xl font-semibold text-gray-900 mb-2">
                              Registered Office Address
                            </h2>
                            <p className="text-gray-600 leading-relaxed">
                              {web?.address}
                            </p>
                          </div>
                        </div>

                        {/* Phone */}
                        <div className="flex items-start space-x-4">
                          <div className="flex-shrink-0">
                            <div className="p-3 bg-btn-ob  rounded-full">
                              <Phone className="w-6 h-6 text-blue-600" />
                            </div>
                          </div>
                          <div>
                            <h2 className="text-xl font-semibold  mb-2">
                              Phone
                            </h2>
                            <a
                              href={`tel:${web?.phone}`}
                              className="text-gray-600 hover:text-blue-800 text-lg"
                            >
                              {web?.phone}
                            </a>
                          </div>
                        </div>

                        {/* Support */}
                        <div className="flex items-start space-x-4">
                          <div className="flex-shrink-0">
                            <div className="p-3 bg-btn-ob  rounded-full">
                              <Mail className="w-6 h-6 text-blue-600" />
                            </div>
                          </div>
                          <div>
                            <h2 className="text-xl font-semibold text-gray-900 mb-2">
                              Need Support
                            </h2>
                            <a
                              href="https://www.iaab.us"
                              className="text-gray-600 hover:text-blue-800 text-lg"
                            >
                              {web?.websiteUrl}
                            </a>
                          </div>
                        </div>
                        <div className="flex items-start space-x-4">
                          <div className="flex-shrink-0">
                            <div className="p-3 bg-btn-ob  rounded-full">
                              <Clock className="w-6 h-6 text-blue-600" />
                            </div>
                          </div>
                          <div>
                            <h2 className="text-xl font-semibold text-gray-900 mb-2">
                              Working Hours
                            </h2>
                            <p className="text-gray-600 hover:text-blue-800 text-lg">
                              {web?.otherContent}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </main>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Appeal;