ifixkart-storefront/app/contact/page.tsx

'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { Mail, MapPin, Phone } 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';

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

function mapsHref(address: string): string {
  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
}

export default function ContactPage() {
  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 address = footer.address || '';
  const socials = (footer.social_links || []).filter((s) => s?.url);

  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]">
            Contact Us
          </h1>
          <p className="text-[14px] text-gray-500 mt-2 max-w-xl">
            Reach {storeName} for orders, repairs, and product support. We typically respond within one business day.
          </p>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-8">
            {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}

            {address ? (
              <a
                href={mapsHref(address)}
                target="_blank"
                rel="noopener noreferrer"
                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">
                  <MapPin className="w-5 h-5" />
                </div>
                <h2 className="text-[12px] font-bold uppercase tracking-wide text-gray-400">
                  Address
                </h2>
                <p className="text-[14px] font-semibold text-[#1E293B] mt-1 leading-relaxed">
                  {address}
                </p>
                <p className="text-[12px] text-primary font-semibold mt-2">View on map →</p>
              </a>
            ) : null}
          </div>

          {socials.length > 0 ? (
            <div className="mt-8 bg-white border border-gray-200 rounded-xl p-5">
              <h2 className="text-[13px] font-bold text-[#1E293B]">Follow us</h2>
              <div className="flex flex-wrap gap-2 mt-3">
                {socials.map((s, i) => (
                  <a
                    key={`${s.platform}-${i}`}
                    href={s.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center h-9 px-3 rounded-lg border border-gray-200 text-[13px] font-semibold text-gray-700 hover:border-primary hover:text-primary"
                  >
                    {s.platform}
                  </a>
                ))}
              </div>
            </div>
          ) : null}

          <p className="text-[13px] text-gray-500 mt-8">
            Looking for quick answers?{' '}
            <Link href="/faqs" className="text-primary font-semibold hover:underline">
              Browse FAQs
            </Link>
          </p>
        </div>
      </main>
      <Footer />
      <FloatingButtons />
    </div>
  );
}