"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(() => {
    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');
  }, []);
  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;