"use client";
import { useEffect } from "react";
import Header from "@/components/shared/layout/header/Header";
import Footer from "@/components/shared/layout/footer/Footer";
import SupportCenterHero from "@/components/pages/support/SupportCenterHero";
import SupportCenterContent from "@/components/pages/support/SupportCenterContent";
import { useState } from "react";
import { generateMetadata as createMetadata } from "@/lib/seo/metadata";

type ModalType = 'create' | 'knowledge' | 'status' | null;

const SupportCenterPage = () => {
  // Set metadata for client component
  useEffect(() => {
<<<<<<< HEAD
    // Only run on client side
    if (typeof window === 'undefined' || typeof document === 'undefined') return;
=======
    const metadata = createMetadata({
      title: "Support Center - Enterprise Support & Help Desk",
      description: "Get 24/7 enterprise support from GNX Soft. Access our knowledge base, create support tickets, check ticket status, and get help with our software solutions and services.",
      keywords: [
        "Support Center",
        "Customer Support",
        "Help Desk",
        "Technical Support",
        "Knowledge Base",
        "Support Tickets",
        "Enterprise Support",
        "IT Support",
      ],
      url: "/support-center",
    });

    const titleString = typeof metadata.title === 'string' ? metadata.title : "Support Center | GNX Soft";
    document.title = titleString;
>>>>>>> d7d7a2757a183aa1abd9dbabff804c45298df4e5
    
    try {
      const metadata = createMetadata({
        title: "Support Center - Enterprise Support & Help Desk",
        description: "Get 24/7 enterprise support from GNX Soft. Access our knowledge base, create support tickets, check ticket status, and get help with our software solutions and services.",
        keywords: [
          "Support Center",
          "Customer Support",
          "Help Desk",
          "Technical Support",
          "Knowledge Base",
          "Support Tickets",
          "Enterprise Support",
          "IT Support",
        ],
        url: "/support-center",
      });

      const titleString = typeof metadata.title === 'string' ? metadata.title : "Support Center | GNX Soft";
      document.title = titleString;
      
      let metaDescription = document.querySelector('meta[name="description"]');
      if (!metaDescription) {
        metaDescription = document.createElement('meta');
        metaDescription.setAttribute('name', 'description');
        document.head.appendChild(metaDescription);
      }
      metaDescription.setAttribute('content', metadata.description || 'Get enterprise support from GNX Soft');
    } catch (error) {
      // Silently handle metadata errors
      console.error('Error setting metadata:', error);
    }
  }, []);
  const [activeModal, setActiveModal] = useState<ModalType>(null);

  return (
    <div className="tp-app">
      <Header />
      <main>
        <SupportCenterHero onFeatureClick={setActiveModal} />
        <SupportCenterContent 
          activeModal={activeModal} 
          onClose={() => setActiveModal(null)} 
          onOpenModal={setActiveModal}
        />
      </main>
      <Footer />
    </div>
  );
};

export default SupportCenterPage;

