ifixkart-storefront/components/legal/LegalPage.tsx

'use client';

import React, { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
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 { buildPrivacyDoc, buildTermsDoc } from '@/lib/legalContent';

export type LegalTab = 'terms' | 'privacy';

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

export function LegalPage({ initialTab }: { initialTab: LegalTab }) {
  const [tab, setTab] = useState<LegalTab>(initialTab);
  const [footer, setFooter] = useState<FooterInfo>(MOCK_FOOTER_INFO);
  const [settings, setSettings] = useState<StorefrontSettings>({ store_name: 'iFixKart' });

  useEffect(() => {
    setTab(initialTab);
  }, [initialTab]);

  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 address = footer.address || '';

  const doc = useMemo(
    () => (tab === 'privacy' ? buildPrivacyDoc(storeName) : buildTermsDoc(storeName)),
    [tab, 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]">
            Terms & Policy
          </h1>
          <p className="text-[14px] text-gray-500 mt-2 max-w-2xl">
            Please read these terms and our privacy notice before using {storeName}.
          </p>

          <article className="mt-8 bg-white border border-gray-200 rounded-xl overflow-hidden">
            <div className="flex border-b border-gray-200">
              <Link
                href="/terms"
                onClick={() => setTab('terms')}
                className={`flex-1 text-center text-[14px] font-semibold py-3.5 px-4 transition-colors ${
                  tab === 'terms'
                    ? 'text-primary border-b-2 border-primary -mb-px bg-primary/[0.04]'
                    : 'text-gray-500 hover:text-[#1E293B] hover:bg-gray-50'
                }`}
              >
                Terms & Conditions
              </Link>
              <Link
                href="/privacy"
                onClick={() => setTab('privacy')}
                className={`flex-1 text-center text-[14px] font-semibold py-3.5 px-4 transition-colors ${
                  tab === 'privacy'
                    ? 'text-primary border-b-2 border-primary -mb-px bg-primary/[0.04]'
                    : 'text-gray-500 hover:text-[#1E293B] hover:bg-gray-50'
                }`}
              >
                Privacy Policy
              </Link>
            </div>

            <div className="p-6 md:p-8">
            <h2 className="text-[22px] font-bold text-[#1E293B]">{doc.heading}</h2>
            <p className="text-[13px] text-gray-500 mt-1 mb-6">Last updated: 10 September 2026</p>
            <p className="text-[14px] text-gray-600 leading-relaxed mb-8">{doc.intro}</p>

            <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>

            <section className="mt-8 pt-6 border-t border-gray-100">
              <h3 className="text-[16px] font-bold text-[#1E293B] mb-2">Grievance officer</h3>
              <p className="text-[14px] text-gray-600 leading-relaxed">
                In accordance with the Information Technology Act, 2000 and applicable consumer
                protection rules, you may write to {storeName} for complaints about these terms or
                our privacy practices.
              </p>
              <div className="mt-3 text-[14px] text-[#1E293B] space-y-1">
                {address ? <p>{address}</p> : null}
                {email ? (
                  <p>
                    Email:{' '}
                    <a href={`mailto:${email}`} className="text-primary font-semibold hover:underline">
                      {email}
                    </a>
                  </p>
                ) : null}
                {phone ? (
                  <p>
                    Phone:{' '}
                    <a href={telHref(phone)} className="text-primary font-semibold hover:underline">
                      {phone}
                    </a>
                  </p>
                ) : null}
                <p className="text-gray-500">Monday to Saturday, 10:00 AM – 6:30 PM</p>
              </div>
            </section>
            </div>
          </article>
        </div>
      </main>
      <Footer />
      <FloatingButtons />
    </div>
  );
}