ifixkart-storefront/app/help/page.tsx

'use client';

import React, { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import {
  CircleHelp,
  CreditCard,
  LifeBuoy,
  Mail,
  Phone,
  RotateCcw,
  ShoppingBag,
  Truck,
  Wrench,
} from 'lucide-react';
import { AnnouncementBar } from '@/layout/AnnouncementBar';
import { Header } from '@/layout/Header';
import { Navbar } from '@/layout/Navbar';
import { Footer } from '@/layout/Footer';
import { StickyHeaderSpacer } from '@/components/StickyHeaderSpacer';
import { FloatingButtons } from '@/components/FloatingButtons';
import {
  storefrontService,
  type FooterInfo,
  type StorefrontSettings,
  MOCK_FOOTER_INFO,
} from '@/services/api/storefrontService';
import { buildHelpDoc } from '@/lib/helpCenterContent';

const TOPIC_ICONS = {
  faqs: CircleHelp,
  orders: Truck,
  payments: CreditCard,
  returns: RotateCcw,
  repairs: Wrench,
  shop: ShoppingBag,
} as const;

function telHref(phone: string): string {
  return `tel:${phone.replace(/[^\d+]/g, '')}`;
}

export default function HelpCenterPage() {
  const [footer, setFooter] = useState<FooterInfo>(MOCK_FOOTER_INFO);
  const [settings, setSettings] = useState<StorefrontSettings>({ store_name: 'iFixKart' });

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      storefrontService.getFooterInfo(),
      storefrontService.getSettings(),
    ]).then(([info, store]) => {
      if (cancelled) return;
      if (info) setFooter(info);
      if (store) setSettings(store);
    });
    return () => {
      cancelled = true;
    };
  }, []);

  const storeName = settings.store_name || 'iFixKart';
  const phone = footer.phone || settings.support_phone || '';
  const email = footer.email || '';
  const doc = useMemo(() => buildHelpDoc(storeName), [storeName]);

  return (
    <div className="min-h-screen bg-[#F8F9FB] text-[#1E293B] flex flex-col font-sans">
      <AnnouncementBar />
      <Header />
      <StickyHeaderSpacer />
      <Navbar />

      <main className="flex-grow py-10 pb-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[900px]">
          <h1 className="text-[28px] md:text-[32px] font-bold text-[#1E293B]">
            {doc.heading}
          </h1>
          <p className="text-[14px] text-gray-500 mt-2 max-w-2xl">{doc.intro}</p>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
            {doc.topics.map((item) => {
              const Icon = TOPIC_ICONS[item.id as keyof typeof TOPIC_ICONS] || CircleHelp;
              return (
                <Link
                  key={item.id}
                  href={item.href}
                  className="bg-white border border-gray-200 rounded-xl p-5 hover:border-primary/40 transition-colors"
                >
                  <div className="w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-3">
                    <Icon className="w-5 h-5" />
                  </div>
                  <h2 className="text-[16px] font-bold text-[#1E293B]">{item.title}</h2>
                  <p className="text-[13px] text-gray-500 mt-1 leading-relaxed">
                    {item.detail}
                  </p>
                </Link>
              );
            })}
          </div>

          <div className="mt-4 bg-white border border-gray-200 rounded-xl p-5 md:p-6">
            <h2 className="text-[13px] font-bold text-[#1E293B]">Browse FAQs</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-3">
              {doc.faqLinks.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="rounded-lg border border-gray-200 px-4 py-3 hover:border-primary/40 transition-colors"
                >
                  <p className="text-[14px] font-bold text-[#1E293B]">{item.title}</p>
                  <p className="text-[12px] text-gray-500 mt-0.5 leading-relaxed">
                    {item.detail}
                  </p>
                </Link>
              ))}
            </div>
          </div>

          {(phone || email) && (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
              {phone ? (
                <a
                  href={telHref(phone)}
                  className="bg-white border border-gray-200 rounded-xl p-5 hover:border-primary/40 transition-colors"
                >
                  <div className="w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-3">
                    <Phone className="w-5 h-5" />
                  </div>
                  <h2 className="text-[12px] font-bold uppercase tracking-wide text-gray-400">
                    Phone
                  </h2>
                  <p className="text-[16px] font-bold text-[#1E293B] mt-1">{phone}</p>
                  <p className="text-[12px] text-gray-500 mt-1">Call customer support</p>
                </a>
              ) : null}
              {email ? (
                <a
                  href={`mailto:${email}`}
                  className="bg-white border border-gray-200 rounded-xl p-5 hover:border-primary/40 transition-colors"
                >
                  <div className="w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-3">
                    <Mail className="w-5 h-5" />
                  </div>
                  <h2 className="text-[12px] font-bold uppercase tracking-wide text-gray-400">
                    Email
                  </h2>
                  <p className="text-[16px] font-bold text-[#1E293B] mt-1 break-all">{email}</p>
                  <p className="text-[12px] text-gray-500 mt-1">Write to our support team</p>
                </a>
              ) : null}
            </div>
          )}

          <article className="mt-8 bg-white border border-gray-200 rounded-xl overflow-hidden">
            <div className="p-6 md:p-8">
              <div className="flex items-center gap-2 text-primary mb-6">
                <LifeBuoy className="w-5 h-5" />
                <p className="text-[13px] font-semibold">
                  Support is available Monday to Saturday, 10:00 AM – 6:30 PM
                </p>
              </div>

              <div className="space-y-7">
                {doc.sections.map((section) => (
                  <section key={section.id} id={section.id}>
                    <h3 className="text-[16px] font-bold text-[#1E293B] mb-2">
                      {section.title}
                    </h3>
                    {section.paragraphs.map((p, i) => (
                      <p
                        key={i}
                        className="text-[14px] text-gray-600 leading-relaxed mb-3 last:mb-0"
                      >
                        {p}
                      </p>
                    ))}
                  </section>
                ))}
              </div>

              <p className="text-[13px] text-gray-500 mt-8 pt-6 border-t border-gray-100">
                Prefer a full contact page?{' '}
                <Link href="/contact" className="text-primary font-semibold hover:underline">
                  Contact Us
                </Link>
              </p>
            </div>
          </article>
        </div>
      </main>

      <Footer />
      <FloatingButtons />
    </div>
  );
}