'use client';

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

export default function AboutPage() {
  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 || '';

  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-[860px]">
          <h1 className="text-[28px] md:text-[32px] font-bold text-[#1E293B]">
            About Us
          </h1>
          <p className="text-[15px] text-gray-600 leading-relaxed mt-3">
            {storeName} sells tested refurbished phones and accessories, and books device repairs.
            You can shop online, get a screen or battery replaced, or exchange the phone you
            already have.
          </p>
          <p className="text-[15px] text-gray-600 leading-relaxed mt-3">
            Repairs are done at our Bengaluru service center or at your doorstep. Refurbished
            phones are checked before listing and sold with a limited warranty.
          </p>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
            <Link
              href="/shop"
              className="bg-white border border-gray-200 rounded-xl p-5 hover:border-primary/40 transition-colors"
            >
              <Smartphone className="w-5 h-5 text-primary mb-3" />
              <h2 className="text-[16px] font-bold text-[#1E293B]">Shop</h2>
              <p className="text-[13px] text-gray-500 mt-1 leading-relaxed">
                Refurbished phones, spare parts, and accessories.
              </p>
            </Link>
            <Link
              href="/repair-services"
              className="bg-white border border-gray-200 rounded-xl p-5 hover:border-primary/40 transition-colors"
            >
              <Wrench className="w-5 h-5 text-primary mb-3" />
              <h2 className="text-[16px] font-bold text-[#1E293B]">Repair</h2>
              <p className="text-[13px] text-gray-500 mt-1 leading-relaxed">
                Screens, batteries, charging ports, and other common jobs.
              </p>
            </Link>
          </div>

          <div className="mt-8 bg-white border border-gray-200 rounded-xl p-5 md:p-6 space-y-4">
            {address ? (
              <div className="flex gap-3">
                <MapPin className="w-4 h-4 text-gray-400 mt-0.5 shrink-0" />
                <p className="text-[14px] text-gray-600 leading-relaxed">{address}</p>
              </div>
            ) : null}
            {phone ? (
              <a
                href={`tel:${phone.replace(/[^\d+]/g, '')}`}
                className="flex gap-3 text-[14px] text-gray-600 hover:text-primary"
              >
                <Phone className="w-4 h-4 text-gray-400 mt-0.5 shrink-0" />
                {phone}
              </a>
            ) : null}
            {email ? (
              <a
                href={`mailto:${email}`}
                className="flex gap-3 text-[14px] text-gray-600 hover:text-primary"
              >
                <Mail className="w-4 h-4 text-gray-400 mt-0.5 shrink-0" />
                {email}
              </a>
            ) : null}
          </div>
        </div>
      </main>

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