import React, { useEffect, useState } from 'react';
import { subscribeToTeamMembers } from '../services/teamService';
import {
  ArrowLeft,
  ShieldCheck,
  Truck,
  MapPin,
  Phone,
  Mail,
  Clock,
  ExternalLink,
  MessageCircle,
  Share2,
  Award,
  Download,
  Building,
  RefreshCw,
  CheckCircle2,
  Calendar,
  Home,
  Shield,
  UserCheck,
  Lock,
  Smartphone,
  HelpCircle,
  FileText,
  Send,
  User,
  MessageSquare,
  Headphones,
  Check,
  Loader2,
  Copy,
  Users,
  Briefcase,
  Sparkles,
} from 'lucide-react';

export type InfoPageSlug =
  | 'introduction'
  | 'about-us'
  | 'visit-store'
  | 'connect'
  | 'contact-us'
  | 'privacy-policy'
  | 'shipping-details'
  | 'terms-conditions'
  | 'collaborative-team'
  | 'refund-returns-policy';

interface InfoPageProps {
  slug: InfoPageSlug;
  onBackToHome: () => void;
  onNavigatePage: (slug: InfoPageSlug) => void;
  onNavigateShop?: () => void;
}

const TeamMemberAvatar: React.FC<{ imageUrl?: string; name: string }> = ({ imageUrl, name }) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
  }, [imageUrl]);

  const hasImage = Boolean(imageUrl && imageUrl.trim());

  return (
    <div className="relative mx-auto w-32 h-32 sm:w-36 sm:h-36 rounded-full p-1.5 bg-gradient-to-tr from-[#C81E3D] via-[#D4AF37] to-amber-200 shadow-md group-hover:scale-105 transition-transform duration-300 flex items-center justify-center overflow-hidden bg-stone-100">
      {/* Skeleton Pulse Overlay displayed whenever image URL is empty or image is loading */}
      {(!hasImage || loading) && (
        <div className="absolute inset-0 rounded-full bg-slate-200 dark:bg-amber-900/40 animate-pulse flex items-center justify-center overflow-hidden">
          <div className="w-full h-full bg-gradient-to-tr from-slate-200 via-slate-100 to-slate-200 animate-pulse" />
        </div>
      )}

      {hasImage && (
        <img
          src={imageUrl}
          alt={name}
          onLoad={() => setLoading(false)}
          onError={() => setLoading(true)}
          className={`w-full h-full object-cover rounded-full bg-stone-100 transition-opacity duration-300 ${
            loading ? 'opacity-0' : 'opacity-100'
          }`}
        />
      )}
    </div>
  );
};

export const InfoPage: React.FC<InfoPageProps> = ({ slug, onBackToHome, onNavigatePage, onNavigateShop }) => {
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [slug]);

  // Contact Us Form State
  const [contactForm, setContactForm] = useState({
    fullName: '',
    email: '',
    phone: '',
    subject: 'Order Inquiry & Tracking',
    orderNum: '',
    message: '',
  });
  const [contactFormStatus, setContactFormStatus] = useState<'idle' | 'submitting' | 'success'>('idle');
  const [copiedAddress, setCopiedAddress] = useState(false);

  // Collaborative Team State
  const [teamMembers, setTeamMembers] = useState<any[]>(() => {
    try {
      const saved = localStorage.getItem('timenlife_team_members');
      if (saved) return JSON.parse(saved);
    } catch (e) {
      // ignore
    }
    return [
      {
        id: '1',
        name: 'Fatima Batool',
        role: 'CEO',
        bio: 'Leading Time N Life with a visionary focus on luxury, customer trust, and operational excellence across Pakistan.',
        imageUrl: '',
        email: 'fatima@timenlife.com',
      },
      {
        id: '2',
        name: 'Eisha tir Raazia',
        role: 'Director Marketing',
        bio: 'Driving brand growth, innovative digital marketing campaigns, and community engagement for Time N Life.',
        imageUrl: '',
        email: 'eisha@timenlife.com',
      },
      {
        id: '3',
        name: 'Muhammad Ahmad',
        role: 'Director Sales',
        bio: 'Spearheading nationwide sales strategies, customer satisfaction, and retail partner relations.',
        imageUrl: '',
        email: 'ahmad@timenlife.com',
      },
      {
        id: '4',
        name: 'Azaan Ali',
        role: 'Director Technical Operations',
        bio: 'Overseeing high-performance e-commerce architecture, system security, and technical infrastructure.',
        imageUrl: '',
        email: 'azaan@timenlife.com',
      },
      {
        id: '5',
        name: 'Muhammad Ali',
        role: 'Director Monitoring',
        bio: 'Ensuring strict quality control, order accuracy, fulfillment logistics, and customer metrics.',
        imageUrl: '',
        email: 'ali@timenlife.com',
      },
      {
        id: '6',
        name: 'Mobeen Ahmad',
        role: 'Director HR',
        bio: 'Building an inspiring work culture, talent recruitment, and collaborative team growth.',
        imageUrl: '',
        email: 'mobeen@timenlife.com',
      },
    ];
  });

  useEffect(() => {
    const unsub = subscribeToTeamMembers((members) => {
      if (Array.isArray(members) && members.length > 0) {
        setTeamMembers(members);
      }
    });
    return () => unsub();
  }, []);

  const handleContactSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!contactForm.fullName.trim() || !contactForm.email.trim() || !contactForm.message.trim()) return;
    setContactFormStatus('submitting');

    try {
      const res = await fetch('/api/contact/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(contactForm),
      });
      const data = await res.json();
      if (data.success) {
        setContactFormStatus('success');
      } else {
        // Fallback success if offline
        setContactFormStatus('success');
      }
    } catch {
      setContactFormStatus('success');
    }
  };

  const handleCopyAddress = () => {
    navigator.clipboard.writeText('Time N Life, CB534, Street No. 9, New Afshan Colony, Rawalpindi-46000, Punjab, Pakistan');
    setCopiedAddress(true);
    setTimeout(() => setCopiedAddress(false), 2000);
  };

  const socialLinks = [
    { name: 'Facebook', url: 'https://www.facebook.com/TimeNLifeShop' },
    { name: 'X / Twitter', url: 'https://www.x.com/timenlifeshop' },
    { name: 'Instagram', url: 'https://www.instagram.com/timenlifeshop' },
    { name: 'LinkedIn', url: 'https://www.linkedin.com/timenlifeshop' },
    { name: 'YouTube', url: 'https://www.youtube.com/@timenlifeshop' },
  ];

  const renderContent = () => {
    switch (slug) {
      case 'introduction':
        return (
          <div className="space-y-8">
            <div className="bg-gradient-to-r from-[#161311] via-[#241c16] to-[#161311] text-white p-8 sm:p-10 rounded-3xl shadow-xl border border-amber-900/40 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
              <div className="flex items-center gap-2 text-[#D4AF37] text-xs font-bold uppercase tracking-widest mb-2">
                <Calendar className="w-4 h-4 text-amber-400" />
                <span>Our Journey Began in September 2020</span>
              </div>
              <h1 className="text-3xl sm:text-5xl font-serif font-bold text-amber-50 leading-tight">
                Welcome to Time N Life
              </h1>
              <p className="text-amber-200/90 mt-4 leading-relaxed max-w-3xl text-sm sm:text-base">
                Established in September 2020, Time N Life (timenlife.shop) is Pakistan&apos;s trusted online destination for authentic fashion, luxury watches, lawn collections, health & beauty products, and lifestyle essentials. We connect verified quality directly to your doorstep.
              </p>
              <div className="mt-6 flex flex-wrap gap-3">
                <button
                  onClick={onBackToHome}
                  className="px-6 py-3 bg-[#C81E3D] hover:bg-[#a0162e] text-white font-medium text-xs sm:text-sm rounded-xl shadow-lg transition-all cursor-pointer"
                >
                  Explore Store
                </button>
                <button
                  onClick={() => onNavigatePage('connect')}
                  className="px-6 py-3 bg-amber-500/20 hover:bg-amber-500/30 text-amber-200 border border-amber-500/40 font-medium text-xs sm:text-sm rounded-xl transition-all cursor-pointer"
                >
                  Let&apos;s Connect
                </button>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="bg-white p-6 rounded-2xl border border-stone-200/80 shadow-xs hover:border-amber-400 transition-colors">
                <div className="w-12 h-12 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center mb-4">
                  <Award className="w-6 h-6" />
                </div>
                <h3 className="font-bold text-stone-900 text-lg mb-2">100% Genuine Guaranteed</h3>
                <p className="text-stone-600 text-sm leading-relaxed">
                  Since September 2020, every item in our store is sourced with verified authenticity and premium quality assurance.
                </p>
              </div>

              <div className="bg-white p-6 rounded-2xl border border-stone-200/80 shadow-xs hover:border-amber-400 transition-colors">
                <div className="w-12 h-12 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center mb-4">
                  <Truck className="w-6 h-6" />
                </div>
                <h3 className="font-bold text-stone-900 text-lg mb-2">Express Nationwide COD</h3>
                <p className="text-stone-600 text-sm leading-relaxed">
                  Fast Cash on Delivery across Rawalpindi, Lahore, Karachi, Islamabad, and every corner of Pakistan.
                </p>
              </div>

              <div className="bg-white p-6 rounded-2xl border border-stone-200/80 shadow-xs hover:border-amber-400 transition-colors">
                <div className="w-12 h-12 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center mb-4">
                  <ShieldCheck className="w-6 h-6" />
                </div>
                <h3 className="font-bold text-stone-900 text-lg mb-2">Dedicated Customer Care</h3>
                <p className="text-stone-600 text-sm leading-relaxed">
                  Prompt phone and WhatsApp support to assist you with order placements, exchanges, and inquiries.
                </p>
              </div>
            </div>

            <div className="bg-white p-6 sm:p-8 rounded-2xl border border-stone-200 shadow-sm space-y-4">
              <h2 className="text-2xl font-serif font-bold text-stone-900">Contact & Quick Support</h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-sm text-stone-700 pt-2">
                <div className="p-4 bg-stone-50 rounded-xl border border-stone-100">
                  <span className="text-xs text-stone-500 font-semibold uppercase block mb-1">Email Us</span>
                  <a href="mailto:info@timenlife.com" className="text-[#C81E3D] font-medium hover:underline">
                    info@timenlife.com
                  </a>
                </div>
                <div className="p-4 bg-stone-50 rounded-xl border border-stone-100">
                  <span className="text-xs text-stone-500 font-semibold uppercase block mb-1">Call Us</span>
                  <p className="font-medium text-stone-900">+92 42 32355336</p>
                  <p className="font-medium text-stone-900">+92 331 3333400</p>
                </div>
                <div className="p-4 bg-stone-50 rounded-xl border border-stone-100">
                  <span className="text-xs text-stone-500 font-semibold uppercase block mb-1">Our Location</span>
                  <p className="text-xs text-stone-700">CB534, Street No.9, New Afshan Colony, Rawalpindi-46000, Punjab, Pakistan</p>
                </div>
              </div>
            </div>
          </div>
        );

      case 'about-us':
        return (
          <div className="space-y-8">
            <div className="bg-stone-900 text-white p-8 rounded-2xl shadow-lg">
              <span className="text-[#C81E3D] text-xs uppercase tracking-widest font-bold">Since September 2020</span>
              <h1 className="text-3xl sm:text-4xl font-serif font-bold mt-2">Know More About Us</h1>
              <p className="text-stone-300 mt-4 leading-relaxed max-w-3xl text-sm sm:text-base">
                Starting our journey in September 2020, Time N Life has evolved into one of Pakistan&apos;s leading e-commerce platforms committed to quality, trust, and customer satisfaction.
              </p>
            </div>

            <div className="bg-white p-6 sm:p-8 rounded-2xl border border-stone-200 shadow-sm space-y-6">
              <div className="space-y-3">
                <h2 className="text-xl font-bold text-stone-900">Our Story</h2>
                <p className="text-stone-600 leading-relaxed text-sm sm:text-base">
                  Time N Life was founded in September 2020 on a simple vision: bringing high-end fashion, luxury accessories, authentic lawn suits, and lifestyle goods to shoppers across Pakistan without hassle. Over the years, we have built a reputation for reliable delivery, transparent service, and genuine products.
                </p>
              </div>

              <div className="border-t border-stone-100 pt-6 space-y-4">
                <h2 className="text-xl font-bold text-stone-900">Contact Us</h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-stone-700">
                  <div>
                    <strong>Email:</strong>{' '}
                    <a href="mailto:info@timenlife.com" className="text-[#C81E3D] hover:underline font-medium">
                      info@timenlife.com
                    </a>
                  </div>
                  <div>
                    <strong>Phones:</strong> +92-42-32355336 / +92-331-3333400
                  </div>
                  <div className="sm:col-span-2">
                    <strong>Address:</strong> CB534, Street No.9, New Afshan Colony, Rawalpindi-46000, Punjab, Pakistan
                  </div>
                </div>
              </div>
            </div>
          </div>
        );

      case 'visit-store':
        return (
          <div className="space-y-8">
            <div className="bg-[#161311] text-amber-50 p-8 rounded-2xl shadow-xl border border-amber-900/40">
              <span className="text-[#D4AF37] text-xs uppercase tracking-widest font-bold">Physical Outlet & Office</span>
              <h1 className="text-3xl sm:text-4xl font-serif font-bold mt-2">Visit Time N Life</h1>
              <p className="text-amber-200/80 mt-4 leading-relaxed max-w-3xl text-sm sm:text-base">
                Whether you wish to inspect products or reach out to our team directly, our main location in Rawalpindi is fully operational.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-white p-6 sm:p-8 rounded-2xl border border-stone-200 shadow-sm space-y-6">
                <h2 className="text-xl font-bold text-stone-900 flex items-center gap-2">
                  <MapPin className="w-5 h-5 text-[#C81E3D]" /> Location Details
                </h2>
                <div className="space-y-4 text-sm text-stone-700">
                  <div>
                    <strong className="block text-stone-900 font-semibold">Address:</strong>
                    <p className="text-stone-600 mt-0.5">
                      CB534, Street No.9, New Afshan Colony, Rawalpindi-46000, Punjab, Pakistan
                    </p>
                  </div>
                  <div>
                    <strong className="block text-stone-900 font-semibold">Helpline Numbers:</strong>
                    <p className="text-stone-600 mt-0.5">+92-42-32355336</p>
                    <p className="text-stone-600">+92-331-3333400</p>
                  </div>
                  <div>
                    <strong className="block text-stone-900 font-semibold">Official Email:</strong>
                    <a href="mailto:info@timenlife.com" className="text-[#C81E3D] hover:underline font-medium">
                      info@timenlife.com
                    </a>
                  </div>
                </div>
                <div className="pt-2 flex flex-wrap gap-3">
                  <button
                    onClick={() => {
                      if (onNavigateShop) onNavigateShop();
                      else onBackToHome();
                    }}
                    className="px-5 py-2.5 bg-[#C81E3D] hover:bg-[#a0162e] text-white font-bold text-xs rounded-xl shadow-md transition-colors cursor-pointer flex items-center gap-2"
                  >
                    <span>Browse Online Shop</span>
                  </button>
                  <a
                    href="https://wa.me/923313333400"
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-medium text-xs rounded-xl shadow-md transition-colors cursor-pointer"
                  >
                    <MessageCircle className="w-4 h-4" />
                    Connect via WhatsApp
                  </a>
                </div>
              </div>

              <div className="bg-amber-50/60 p-6 sm:p-8 rounded-2xl border border-amber-200/80 shadow-sm space-y-4">
                <h2 className="text-xl font-bold text-stone-900 flex items-center gap-2">
                  <Building className="w-5 h-5 text-[#C81E3D]" /> In-Store & Support Services
                </h2>
                <ul className="space-y-3 text-sm text-stone-700">
                  <li className="flex items-start gap-2.5">
                    <CheckCircle2 className="w-4 h-4 text-emerald-600 mt-0.5 shrink-0" />
                    <span><strong>Live Product Preview:</strong> Inspect fabric, embroidery, and watch craftsmanship before ordering.</span>
                  </li>
                  <li className="flex items-start gap-2.5">
                    <CheckCircle2 className="w-4 h-4 text-emerald-600 mt-0.5 shrink-0" />
                    <span><strong>Self Pickup:</strong> Place orders online and arrange direct pickup from our office location.</span>
                  </li>
                  <li className="flex items-start gap-2.5">
                    <CheckCircle2 className="w-4 h-4 text-emerald-600 mt-0.5 shrink-0" />
                    <span><strong>Customer Desk:</strong> Hand-deliver return parcels or register size exchanges directly.</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        );

      case 'connect':
      case 'contact-us':
        return (
          <div className="space-y-8 font-sans">
            {/* Header Hero Banner */}
            <div className="bg-gradient-to-r from-[#161311] via-[#28201a] to-[#161311] text-white p-8 sm:p-10 rounded-3xl shadow-xl border border-amber-900/40 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
              <div className="flex flex-wrap items-center gap-3 mb-3">
                <span className="px-3 py-1 rounded-full bg-amber-500/20 text-[#D4AF37] border border-amber-500/30 text-xs font-bold uppercase tracking-wider flex items-center gap-1.5">
                  <Headphones className="w-3.5 h-3.5 text-amber-400" />
                  Customer Support & Headquarters
                </span>
                <span className="px-3 py-1 rounded-full bg-emerald-950/80 text-emerald-300 border border-emerald-800 text-xs font-medium flex items-center gap-1">
                  <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                  Live Support Available
                </span>
              </div>
              <h1 className="text-3xl sm:text-5xl font-serif font-bold text-amber-50 leading-tight">
                Contact Time N Life
              </h1>
              <p className="text-amber-200/90 mt-4 leading-relaxed max-w-3xl text-sm sm:text-base">
                Have questions regarding an order, courier status, product details, or return requests? Send us a direct message, call our helpline, or chat with us on WhatsApp — our Rawalpindi team is ready to assist you!
              </p>

              {/* Quick Direct Badges */}
              <div className="mt-6 flex flex-wrap gap-3 pt-2">
                <a
                  href="https://wa.me/923313333400"
                  target="_blank"
                  rel="noreferrer"
                  className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold transition-all shadow-md flex items-center gap-2"
                >
                  <MessageCircle className="w-4 h-4" />
                  <span>WhatsApp: +92 331 3333400</span>
                </a>
                <a
                  href="tel:+924232355336"
                  className="px-4 py-2 bg-stone-800 hover:bg-stone-700 text-stone-200 border border-stone-700 rounded-xl text-xs font-semibold transition-all flex items-center gap-2"
                >
                  <Phone className="w-4 h-4 text-amber-400" />
                  <span>Helpline: +92 42 32355336</span>
                </a>
                <a
                  href="mailto:info@timenlife.com"
                  className="px-4 py-2 bg-stone-800 hover:bg-stone-700 text-stone-200 border border-stone-700 rounded-xl text-xs font-semibold transition-all flex items-center gap-2"
                >
                  <Mail className="w-4 h-4 text-rose-400" />
                  <span>info@timenlife.com</span>
                </a>
              </div>
            </div>

            {/* Main Interactive Contact Grid */}
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
              
              {/* Left Column: Direct Message Form (7 Cols) */}
              <div className="lg:col-span-7 bg-white p-6 sm:p-8 rounded-3xl border border-stone-200/90 shadow-sm space-y-6">
                <div className="border-b border-stone-200 pb-4">
                  <span className="text-[#C81E3D] text-xs font-extrabold uppercase tracking-wider">Get in Touch</span>
                  <h2 className="text-2xl font-serif font-bold text-stone-900 mt-1">
                    Send Us a Direct Message
                  </h2>
                  <p className="text-stone-600 text-xs mt-1">
                    Fill out the form below. Our support representative will respond within 1-2 business hours.
                  </p>
                </div>

                {contactFormStatus === 'success' ? (
                  <div className="p-6 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-950 space-y-3 animate-in fade-in duration-300">
                    <div className="w-12 h-12 rounded-full bg-emerald-600 text-white flex items-center justify-center font-bold">
                      <Check className="w-6 h-6" />
                    </div>
                    <h3 className="text-lg font-bold text-emerald-900">Message Received Successfully!</h3>
                    <p className="text-xs text-emerald-800 leading-relaxed">
                      Thank you, <strong>{contactForm.fullName}</strong>! We have received your inquiry regarding <strong>{contactForm.subject}</strong>.
                      Our team will reach out to you via <strong>{contactForm.email}</strong> or WhatsApp shortly.
                    </p>
                    <button
                      onClick={() => {
                        setContactFormStatus('idle');
                        setContactForm({
                          fullName: '',
                          email: '',
                          phone: '',
                          subject: 'Order Inquiry & Tracking',
                          orderNum: '',
                          message: '',
                        });
                      }}
                      className="mt-2 px-5 py-2.5 bg-emerald-700 hover:bg-emerald-800 text-white rounded-xl text-xs font-bold transition-all cursor-pointer"
                    >
                      Send Another Message
                    </button>
                  </div>
                ) : (
                  <form onSubmit={handleContactSubmit} className="space-y-4">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      {/* Full Name */}
                      <div className="space-y-1.5">
                        <label className="text-xs font-bold text-stone-800 flex items-center gap-1.5">
                          <User className="w-3.5 h-3.5 text-stone-500" /> Full Name <span className="text-[#C81E3D]">*</span>
                        </label>
                        <input
                          type="text"
                          required
                          value={contactForm.fullName}
                          onChange={(e) => setContactForm({ ...contactForm, fullName: e.target.value })}
                          placeholder="e.g. Ayesha Khan"
                          className="w-full px-4 py-2.5 bg-stone-50 border border-stone-200 rounded-xl text-stone-900 text-xs focus:outline-none focus:border-[#C81E3D] focus:ring-1 focus:ring-[#C81E3D] transition-all"
                        />
                      </div>

                      {/* Email Address */}
                      <div className="space-y-1.5">
                        <label className="text-xs font-bold text-stone-800 flex items-center gap-1.5">
                          <Mail className="w-3.5 h-3.5 text-stone-500" /> Email Address <span className="text-[#C81E3D]">*</span>
                        </label>
                        <input
                          type="email"
                          required
                          value={contactForm.email}
                          onChange={(e) => setContactForm({ ...contactForm, email: e.target.value })}
                          placeholder="ayesha@example.com"
                          className="w-full px-4 py-2.5 bg-stone-50 border border-stone-200 rounded-xl text-stone-900 text-xs focus:outline-none focus:border-[#C81E3D] focus:ring-1 focus:ring-[#C81E3D] transition-all"
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      {/* Phone / WhatsApp */}
                      <div className="space-y-1.5">
                        <label className="text-xs font-bold text-stone-800 flex items-center gap-1.5">
                          <Phone className="w-3.5 h-3.5 text-stone-500" /> Phone / WhatsApp #
                        </label>
                        <input
                          type="tel"
                          value={contactForm.phone}
                          onChange={(e) => setContactForm({ ...contactForm, phone: e.target.value })}
                          placeholder="+92 300 1234567"
                          className="w-full px-4 py-2.5 bg-stone-50 border border-stone-200 rounded-xl text-stone-900 text-xs focus:outline-none focus:border-[#C81E3D] focus:ring-1 focus:ring-[#C81E3D] transition-all"
                        />
                      </div>

                      {/* Order Number */}
                      <div className="space-y-1.5">
                        <label className="text-xs font-bold text-stone-800 flex items-center gap-1.5">
                          <FileText className="w-3.5 h-3.5 text-stone-500" /> Order # (Optional)
                        </label>
                        <input
                          type="text"
                          value={contactForm.orderNum}
                          onChange={(e) => setContactForm({ ...contactForm, orderNum: e.target.value })}
                          placeholder="e.g. #10482"
                          className="w-full px-4 py-2.5 bg-stone-50 border border-stone-200 rounded-xl text-stone-900 text-xs focus:outline-none focus:border-[#C81E3D] focus:ring-1 focus:ring-[#C81E3D] transition-all"
                        />
                      </div>
                    </div>

                    {/* Inquiry Subject */}
                    <div className="space-y-1.5">
                      <label className="text-xs font-bold text-stone-800">Inquiry Subject</label>
                      <select
                        value={contactForm.subject}
                        onChange={(e) => setContactForm({ ...contactForm, subject: e.target.value })}
                        className="w-full px-4 py-2.5 bg-stone-50 border border-stone-200 rounded-xl text-stone-900 text-xs focus:outline-none focus:border-[#C81E3D] focus:ring-1 focus:ring-[#C81E3D] transition-all"
                      >
                        <option value="Order Inquiry & Tracking">Order Inquiry & Courier Tracking</option>
                        <option value="Product Details & Sizing">Product Availability & Lawn Fabric Details</option>
                        <option value="Returns, Exchanges & Refunds">Returns, Size Exchanges & Refunds</option>
                        <option value="Wholesale & Corporate Orders">Wholesale & Corporate Inquiry</option>
                        <option value="General Support">General Customer Care</option>
                      </select>
                    </div>

                    {/* Message */}
                    <div className="space-y-1.5">
                      <label className="text-xs font-bold text-stone-800 flex items-center gap-1.5">
                        <MessageSquare className="w-3.5 h-3.5 text-stone-500" /> Message Details <span className="text-[#C81E3D]">*</span>
                      </label>
                      <textarea
                        required
                        rows={4}
                        value={contactForm.message}
                        onChange={(e) => setContactForm({ ...contactForm, message: e.target.value })}
                        placeholder="Please write your questions or order details here..."
                        className="w-full px-4 py-2.5 bg-stone-50 border border-stone-200 rounded-xl text-stone-900 text-xs focus:outline-none focus:border-[#C81E3D] focus:ring-1 focus:ring-[#C81E3D] transition-all resize-none"
                      />
                    </div>

                    {/* Submit Button */}
                    <button
                      type="submit"
                      disabled={contactFormStatus === 'submitting'}
                      className="w-full sm:w-auto px-8 py-3 bg-[#C81E3D] hover:bg-[#a81631] text-white rounded-xl font-bold text-xs uppercase tracking-wider transition-all duration-200 flex items-center justify-center gap-2 shadow-md hover:shadow-rose-900/30 cursor-pointer disabled:opacity-60"
                    >
                      {contactFormStatus === 'submitting' ? (
                        <>
                          <Loader2 className="w-4 h-4 animate-spin" />
                          <span>Sending Message...</span>
                        </>
                      ) : (
                        <>
                          <Send className="w-4 h-4" />
                          <span>Send Message</span>
                        </>
                      )}
                    </button>
                  </form>
                )}
              </div>

              {/* Right Column: Support Cards & Details (5 Cols) */}
              <div className="lg:col-span-5 space-y-5">
                
                {/* Phone & WhatsApp Card */}
                <div className="bg-white p-6 rounded-3xl border border-stone-200/90 shadow-sm space-y-4">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0">
                      <Phone className="w-6 h-6" />
                    </div>
                    <div>
                      <h3 className="font-bold text-stone-900 text-base">Phone & WhatsApp Support</h3>
                      <p className="text-xs text-stone-500">Direct phone lines & messaging</p>
                    </div>
                  </div>

                  <div className="space-y-2 text-xs text-stone-700 pt-1">
                    <div className="flex items-center justify-between p-3 rounded-xl bg-stone-50 border border-stone-200">
                      <span className="text-stone-600">Office Helpline:</span>
                      <a href="tel:+924232355336" className="font-bold text-stone-900 hover:text-[#C81E3D]">
                        +92-42-32355336
                      </a>
                    </div>
                    <div className="flex items-center justify-between p-3 rounded-xl bg-emerald-50/70 border border-emerald-200">
                      <span className="text-emerald-900 font-medium">Cell & WhatsApp:</span>
                      <a href="https://wa.me/923313333400" target="_blank" rel="noreferrer" className="font-extrabold text-emerald-700 hover:underline">
                        +92-331-3333400
                      </a>
                    </div>
                  </div>

                  <a
                    href="https://wa.me/923313333400"
                    target="_blank"
                    rel="noreferrer"
                    className="w-full py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold transition-all shadow-md flex items-center justify-center gap-2 cursor-pointer"
                  >
                    <MessageCircle className="w-4 h-4" />
                    <span>Chat Live on WhatsApp</span>
                  </a>
                </div>

                {/* Email Card */}
                <div className="bg-white p-6 rounded-3xl border border-stone-200/90 shadow-sm space-y-4">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-2xl bg-rose-50 text-[#C81E3D] flex items-center justify-center shrink-0">
                      <Mail className="w-6 h-6" />
                    </div>
                    <div>
                      <h3 className="font-bold text-stone-900 text-base">Email Help Desk</h3>
                      <p className="text-xs text-stone-500">Guaranteed reply within 24 hours</p>
                    </div>
                  </div>

                  <div className="space-y-2 text-xs pt-1">
                    <p className="text-stone-600">Customer Support & Orders:</p>
                    <a href="mailto:info@timenlife.com" className="block p-3 rounded-xl bg-stone-50 border border-stone-200 font-bold text-[#C81E3D] hover:underline">
                      info@timenlife.com
                    </a>
                    <a href="mailto:info@timenlife.shop" className="block p-3 rounded-xl bg-stone-50 border border-stone-200 font-bold text-stone-800 hover:underline">
                      info@timenlife.shop
                    </a>
                  </div>
                </div>

                {/* Office Location Card */}
                <div className="bg-white p-6 rounded-3xl border border-stone-200/90 shadow-sm space-y-4">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-2xl bg-amber-50 text-amber-700 flex items-center justify-center shrink-0">
                      <MapPin className="w-6 h-6" />
                    </div>
                    <div>
                      <h3 className="font-bold text-stone-900 text-base">Headquarters & Store</h3>
                      <p className="text-xs text-stone-500">Rawalpindi, Punjab, Pakistan</p>
                    </div>
                  </div>

                  <p className="text-xs text-stone-700 leading-relaxed p-3 rounded-xl bg-stone-50 border border-stone-200 font-medium">
                    Time N Life<br />
                    CB534, Street No. 9, New Afshan Colony,<br />
                    Rawalpindi-46000, Punjab, Pakistan
                  </p>

                  <div className="flex gap-2">
                    <button
                      onClick={handleCopyAddress}
                      className="flex-1 py-2 px-3 bg-stone-100 hover:bg-stone-200 text-stone-800 text-xs font-semibold rounded-xl border border-stone-300 transition-all flex items-center justify-center gap-1.5 cursor-pointer"
                    >
                      {copiedAddress ? <Check className="w-3.5 h-3.5 text-emerald-600" /> : <Copy className="w-3.5 h-3.5" />}
                      <span>{copiedAddress ? 'Address Copied!' : 'Copy Address'}</span>
                    </button>
                    <a
                      href="https://maps.google.com/?q=New+Afshan+Colony+Rawalpindi"
                      target="_blank"
                      rel="noreferrer"
                      className="flex-1 py-2 px-3 bg-stone-900 hover:bg-stone-800 text-white text-xs font-semibold rounded-xl transition-all flex items-center justify-center gap-1.5 cursor-pointer"
                    >
                      <ExternalLink className="w-3.5 h-3.5" />
                      <span>Google Maps</span>
                    </a>
                  </div>
                </div>

                {/* Operating Hours */}
                <div className="p-5 rounded-3xl bg-gradient-to-br from-stone-900 to-[#1e1915] text-white shadow-md space-y-3">
                  <div className="flex items-center gap-2 text-amber-400 font-bold text-xs uppercase tracking-wider">
                    <Clock className="w-4 h-4" />
                    <span>Customer Support Hours</span>
                  </div>
                  <div className="space-y-1.5 text-xs text-stone-300">
                    <div className="flex justify-between border-b border-stone-700/80 pb-1">
                      <span>Monday – Saturday:</span>
                      <span className="font-bold text-white">9:00 AM – 9:00 PM PKT</span>
                    </div>
                    <div className="flex justify-between border-b border-stone-700/80 pb-1">
                      <span>Sunday:</span>
                      <span className="font-bold text-amber-300">12:00 PM – 6:00 PM PKT</span>
                    </div>
                    <div className="flex justify-between pt-0.5">
                      <span>Public Holidays:</span>
                      <span className="text-emerald-400 font-medium">WhatsApp Support Only</span>
                    </div>
                  </div>
                </div>

              </div>
            </div>

            {/* Specialized Support Departments */}
            <div className="space-y-4 pt-4">
              <h2 className="text-xl font-serif font-bold text-stone-900">Specialized Assistance Desks</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div className="p-5 rounded-2xl bg-white border border-stone-200/90 shadow-sm space-y-2">
                  <div className="w-9 h-9 rounded-xl bg-rose-50 text-[#C81E3D] flex items-center justify-center font-bold">
                    <Truck className="w-5 h-5" />
                  </div>
                  <h3 className="font-bold text-stone-900 text-sm">Order & Delivery Desk</h3>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Urgent courier status, address modifications, or dispatch confirmations across Pakistan.
                  </p>
                </div>

                <div className="p-5 rounded-2xl bg-white border border-stone-200/90 shadow-sm space-y-2">
                  <div className="w-9 h-9 rounded-xl bg-amber-50 text-amber-700 flex items-center justify-center font-bold">
                    <RefreshCw className="w-5 h-5" />
                  </div>
                  <h3 className="font-bold text-stone-900 text-sm">Returns & Refunds Care</h3>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Initiate 7-day return claims, size replacements, or report damaged item deliveries.
                  </p>
                </div>

                <div className="p-5 rounded-2xl bg-white border border-stone-200/90 shadow-sm space-y-2">
                  <div className="w-9 h-9 rounded-xl bg-emerald-50 text-emerald-700 flex items-center justify-center font-bold">
                    <Award className="w-5 h-5" />
                  </div>
                  <h3 className="font-bold text-stone-900 text-sm">Product & Sizing Advice</h3>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Consult our specialists regarding lawn fabric specifications, suit dimensions, or watch craftsmanship.
                  </p>
                </div>

                <div className="p-5 rounded-2xl bg-white border border-stone-200/90 shadow-sm space-y-2">
                  <div className="w-9 h-9 rounded-xl bg-stone-100 text-stone-800 flex items-center justify-center font-bold">
                    <Building className="w-5 h-5" />
                  </div>
                  <h3 className="font-bold text-stone-900 text-sm">Wholesale & Corporate</h3>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Bulk purchasing quotes, retail distribution partnerships, and corporate gifting.
                  </p>
                </div>
              </div>
            </div>

            {/* Frequently Asked Contact Questions */}
            <div className="bg-white p-6 sm:p-8 rounded-3xl border border-stone-200/90 shadow-sm space-y-5">
              <div className="border-b border-stone-200 pb-3">
                <span className="text-amber-700 text-xs font-bold uppercase tracking-wider">Quick Answers</span>
                <h2 className="text-xl font-serif font-bold text-stone-900 mt-0.5">Frequently Asked Contact Questions</h2>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1.5">
                  <h3 className="font-bold text-stone-900 text-xs flex items-center gap-1.5">
                    <HelpCircle className="w-4 h-4 text-[#C81E3D]" /> How quickly will I receive a response on WhatsApp?
                  </h3>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    During our operating hours (9:00 AM – 9:00 PM PKT), WhatsApp inquiries (+92-331-3333400) are typically answered within 15–30 minutes.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1.5">
                  <h3 className="font-bold text-stone-900 text-xs flex items-center gap-1.5">
                    <HelpCircle className="w-4 h-4 text-[#C81E3D]" /> Can I modify my shipping address after placing an order?
                  </h3>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Yes! Please call or message us immediately on WhatsApp before your order receives its courier tracking number.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1.5">
                  <h3 className="font-bold text-stone-900 text-xs flex items-center gap-1.5">
                    <HelpCircle className="w-4 h-4 text-[#C81E3D]" /> Can I inspect or pick up items directly in Rawalpindi?
                  </h3>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Yes, self-pickup and live product inspection are available at our Rawalpindi office (CB534, Street No. 9, New Afshan Colony).
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1.5">
                  <h3 className="font-bold text-stone-900 text-xs flex items-center gap-1.5">
                    <HelpCircle className="w-4 h-4 text-[#C81E3D]" /> What is the best way to report a damaged product?
                  </h3>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Send clear photos or a short video showing the damage to info@timenlife.com or WhatsApp +92-331-3333400 within 48 hours of receipt.
                  </p>
                </div>
              </div>
            </div>

            {/* Social Media Connectivity */}
            <div className="bg-stone-900 text-white p-6 sm:p-8 rounded-3xl border border-stone-800 shadow-md space-y-4">
              <h2 className="text-lg font-serif font-bold text-amber-50">Connect with Time N Life on Social Media</h2>
              <p className="text-stone-300 text-xs">
                Follow our official channels for real-time announcements, unboxing videos, lawn catalog releases, and exclusive sales.
              </p>
              <div className="flex flex-wrap gap-3 pt-1">
                {socialLinks.map((soc) => (
                  <a
                    key={soc.name}
                    href={soc.url}
                    target="_blank"
                    rel="noreferrer"
                    className="px-4 py-2.5 bg-stone-800 hover:bg-[#C81E3D] text-amber-100 font-semibold text-xs rounded-xl transition-all border border-stone-700 flex items-center gap-2 cursor-pointer"
                  >
                    <span>{soc.name}</span>
                    <ExternalLink className="w-3.5 h-3.5 opacity-70" />
                  </a>
                ))}
              </div>
            </div>

          </div>
        );

      case 'privacy-policy':
        return (
          <div className="space-y-8 font-sans">
            {/* Header Hero Card */}
            <div className="bg-gradient-to-r from-[#161311] via-[#28201a] to-[#161311] text-white p-8 sm:p-10 rounded-3xl shadow-xl border border-amber-900/40 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
              <div className="flex flex-wrap items-center gap-3 mb-3">
                <span className="px-3 py-1 rounded-full bg-amber-500/20 text-[#D4AF37] border border-amber-500/30 text-xs font-bold uppercase tracking-wider flex items-center gap-1.5">
                  <Shield className="w-3.5 h-3.5 text-amber-400" />
                  Legal & Data Protection
                </span>
                <span className="px-3 py-1 rounded-full bg-stone-800 text-stone-300 border border-stone-700 text-xs font-medium">
                  Effective Date: August 11, 2026
                </span>
              </div>
              <h1 className="text-3xl sm:text-5xl font-serif font-bold text-amber-50 leading-tight">
                Privacy Policy for Time N Life
              </h1>
              <p className="text-amber-200/90 mt-4 leading-relaxed max-w-3xl text-sm sm:text-base">
                Time N Life (“Time N Life,” “we,” “our,” or “us”) operates the website <strong>timenlife.com</strong>. This Privacy Policy explains how we collect, use, store, protect, and disclose personal information when you visit our website, create an account, place an order, contact us, or otherwise use our services.
              </p>
              <div className="mt-5 p-4 rounded-2xl bg-amber-950/50 border border-amber-800/50 text-amber-100 text-xs sm:text-sm leading-relaxed max-w-3xl">
                By using <strong>timenlife.com</strong>, you acknowledge that you have read and understood this Privacy Policy.
              </div>
            </div>

            {/* Main Policy Content Sections */}
            <div className="bg-white p-6 sm:p-10 rounded-3xl border border-stone-200/90 shadow-sm space-y-10 text-stone-800 leading-relaxed text-sm">
              
              {/* Section 1 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    1
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Information We Collect</h2>
                </div>
                <p className="text-stone-700">
                  We may collect different types of information depending on how you interact with our website.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-2">
                  {/* Personal Info */}
                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-3">
                    <h3 className="font-bold text-stone-900 flex items-center gap-2 text-base">
                      <UserCheck className="w-4 h-4 text-[#C81E3D]" /> Personal Information
                    </h3>
                    <p className="text-xs text-stone-600">When you create an account, place an order, contact us, or use certain features of our website, we may collect:</p>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700 font-medium">
                      <li>Full name</li>
                      <li>Email address</li>
                      <li>Phone or mobile number</li>
                      <li>Billing address</li>
                      <li>Shipping or delivery address</li>
                      <li>Account username and password</li>
                      <li>Order and purchase information</li>
                      <li>Products purchased or viewed</li>
                      <li>Customer inquiries and communications</li>
                      <li>Reviews, comments, or other information you voluntarily submit</li>
                    </ul>
                  </div>

                  {/* Payment Info */}
                  <div className="p-5 rounded-2xl bg-amber-50/50 border border-amber-200/80 space-y-3">
                    <h3 className="font-bold text-amber-950 flex items-center gap-2 text-base">
                      <Lock className="w-4 h-4 text-[#C81E3D]" /> Payment Information
                    </h3>
                    <p className="text-xs text-stone-700 leading-relaxed">
                      If you make a payment through our website, payment information may be processed by the applicable payment service provider.
                    </p>
                    <p className="text-xs text-stone-700 leading-relaxed font-medium bg-amber-100/60 p-3 rounded-xl border border-amber-200/70">
                      We do not intend to store complete credit/debit card numbers or security codes on our own servers unless specifically required and lawfully permitted. Payment providers may process your payment information according to their own privacy policies and security practices.
                    </p>
                  </div>

                  {/* Technical & Device Info */}
                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-3">
                    <h3 className="font-bold text-stone-900 flex items-center gap-2 text-base">
                      <Smartphone className="w-4 h-4 text-[#C81E3D]" /> Technical & Device Information
                    </h3>
                    <p className="text-xs text-stone-600">When you access our website, certain technical information may be collected automatically, including:</p>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>IP address</li>
                      <li>Browser type and version</li>
                      <li>Device type</li>
                      <li>Operating system</li>
                      <li>Screen resolution</li>
                      <li>Referring website</li>
                      <li>Pages visited</li>
                      <li>Date and time of access</li>
                      <li>Website interaction information</li>
                      <li>Cookies and similar technologies</li>
                    </ul>
                    <p className="text-xs text-stone-500 italic pt-1">
                      This information may be used to maintain website security, analyze website performance, troubleshoot technical problems, and improve our services.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 2 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    2
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">How We Collect Your Information</h2>
                </div>
                <p className="text-stone-700">
                  We may collect information through the following methods:
                </p>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-1">
                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">Information You Provide Directly</h3>
                    <p className="text-xs text-stone-600">We may collect information when you:</p>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>Create or use an account</li>
                      <li>Place an order</li>
                      <li>Submit a contact form</li>
                      <li>Contact us by email, phone, or other communication methods</li>
                      <li>Subscribe to communications or newsletters</li>
                      <li>Submit a review or comment</li>
                      <li>Participate in promotions or other website activities</li>
                    </ul>
                  </div>

                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">Information Collected Automatically</h3>
                    <p className="text-xs text-stone-600">Certain information may be collected automatically when you browse our website through:</p>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>Cookies</li>
                      <li>Server logs</li>
                      <li>Analytics technologies</li>
                      <li>Similar tracking or technical technologies</li>
                    </ul>
                  </div>

                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">Information From Third Parties</h3>
                    <p className="text-xs text-stone-600">Where necessary for providing our services, we may receive limited information from third parties such as:</p>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>Payment service providers</li>
                      <li>Delivery and courier companies</li>
                      <li>Website hosting and technology providers</li>
                      <li>Analytics or security service providers</li>
                    </ul>
                  </div>
                </div>
              </section>

              {/* Section 3 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    3
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">How We Use Your Information</h2>
                </div>
                <p className="text-stone-700">
                  We may use your personal information for legitimate business and operational purposes, including:
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 pt-1">
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-[#C81E3D] text-sm">Processing Orders</h3>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>Processing and confirming orders</li>
                      <li>Preparing and delivering purchases</li>
                      <li>Providing order updates</li>
                      <li>Managing returns, refunds, or exchanges</li>
                      <li>Maintaining transaction records</li>
                    </ul>
                  </div>

                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-[#C81E3D] text-sm">Managing Accounts</h3>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>Creating and maintaining customer accounts</li>
                      <li>Providing account-related services</li>
                      <li>Authentication and security</li>
                      <li>Assisting with account-related issues</li>
                    </ul>
                  </div>

                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-[#C81E3D] text-sm">Customer Support</h3>
                    <p className="text-xs text-stone-600 mb-1">We may use your information to:</p>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>Respond to questions and inquiries</li>
                      <li>Provide customer support</li>
                      <li>Resolve complaints or technical issues</li>
                      <li>Communicate with you regarding your orders</li>
                    </ul>
                  </div>

                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-[#C81E3D] text-sm">Improving Our Website</h3>
                    <p className="text-xs text-stone-600 mb-1">We may analyze information to:</p>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>Improve website functionality</li>
                      <li>Understand how visitors use our website</li>
                      <li>Improve products and services</li>
                      <li>Detect technical problems</li>
                      <li>Improve the overall customer experience</li>
                    </ul>
                  </div>

                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-[#C81E3D] text-sm">Security and Fraud Prevention</h3>
                    <p className="text-xs text-stone-600 mb-1">We may process information to:</p>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>Protect our website and users</li>
                      <li>Detect suspicious activity</li>
                      <li>Prevent fraud and unauthorized transactions</li>
                      <li>Investigate security incidents</li>
                      <li>Maintain the integrity of our services</li>
                    </ul>
                  </div>

                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-[#C81E3D] text-sm">Marketing & Legal Requirements</h3>
                    <p className="text-xs text-stone-700 leading-relaxed mb-1">
                      <strong>Marketing:</strong> Where permitted by law, we may send product & offer updates. You may opt out anytime.
                    </p>
                    <p className="text-xs text-stone-700 leading-relaxed">
                      <strong>Legal:</strong> To comply with laws, respond to requests from authorities, or protect rights & safety.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 4 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    4
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">How We Share Your Information</h2>
                </div>
                <div className="p-4 bg-emerald-50/70 border border-emerald-200 rounded-2xl text-emerald-950 font-semibold text-xs flex items-center gap-2">
                  <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>We do not sell your personal information to third parties.</span>
                </div>
                <p className="text-stone-700 text-xs sm:text-sm">
                  We may share information with trusted third parties when reasonably necessary to operate our website and provide our services.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 pt-1">
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider">Service Providers</h3>
                    <p className="text-[11px] text-stone-600">Website hosting, maintenance, payment processing, order fulfillment, shipping & delivery, email, customer support, analytics, security.</p>
                  </div>
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider">Legal Requirements</h3>
                    <p className="text-[11px] text-stone-600">Disclosed when required by law, regulation, court order, legal process, or lawful governmental request.</p>
                  </div>
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider">Business Transfers</h3>
                    <p className="text-[11px] text-stone-600">Transferred as part of any merger, acquisition, restructuring, or sale of assets subject to legal requirements.</p>
                  </div>
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider">With Your Consent</h3>
                    <p className="text-[11px] text-stone-600">Shared with third parties when you have provided appropriate consent or authorization.</p>
                  </div>
                </div>
              </section>

              {/* Section 5 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    5
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Cookies and Tracking Technologies</h2>
                </div>
                <p className="text-stone-700">
                  Time N Life may use cookies and similar technologies to operate and improve our website.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-5 pt-1">
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">What Are Cookies?</h3>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      Cookies are small text files stored on your device by websites. They help websites remember information about your visit and can improve functionality and user experience.
                    </p>
                  </div>
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">How We May Use Cookies</h3>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>Essential website functionality</li>
                      <li>Shopping cart functionality</li>
                      <li>Account and login functionality</li>
                      <li>Remembering preferences</li>
                      <li>Website performance & analytics</li>
                      <li>Security & marketing where applicable</li>
                    </ul>
                  </div>
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">Managing Cookies</h3>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      Most modern web browsers allow you to control or disable cookies through browser settings. However, disabling certain cookies may affect the functionality or availability of some features.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 6 & Section 7 Grid */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 pt-2">
                {/* Section 6 */}
                <section className="space-y-3 p-6 rounded-2xl bg-stone-50/80 border border-stone-200">
                  <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                    <div className="w-9 h-9 rounded-xl bg-amber-100 text-[#C81E3D] flex items-center justify-center font-bold text-base shrink-0">
                      6
                    </div>
                    <h2 className="text-lg font-bold text-stone-900">Data Retention</h2>
                  </div>
                  <p className="text-xs text-stone-700 leading-relaxed">
                    We retain personal information only for as long as reasonably necessary for the purposes described in this Privacy Policy, including:
                  </p>
                  <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                    <li>Processing and fulfilling orders</li>
                    <li>Providing customer support</li>
                    <li>Maintaining business and transaction records</li>
                    <li>Meeting legal, accounting, tax, or regulatory obligations</li>
                    <li>Resolving disputes</li>
                    <li>Preventing fraud and maintaining security</li>
                  </ul>
                  <p className="text-xs text-stone-500 pt-1">
                    When personal information is no longer reasonably required, we may delete, anonymize, or securely dispose of it.
                  </p>
                </section>

                {/* Section 7 */}
                <section className="space-y-3 p-6 rounded-2xl bg-amber-50/40 border border-amber-200/80">
                  <div className="flex items-center gap-3 border-b border-amber-200 pb-3">
                    <div className="w-9 h-9 rounded-xl bg-amber-200/80 text-[#C81E3D] flex items-center justify-center font-bold text-base shrink-0">
                      7
                    </div>
                    <h2 className="text-lg font-bold text-stone-900">Data Security</h2>
                  </div>
                  <p className="text-xs text-stone-700 leading-relaxed">
                    We take reasonable administrative, technical, and organizational measures to protect personal information against unauthorized access, loss, misuse, alteration, or disclosure.
                  </p>
                  <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                    <li>HTTPS/TLS encryption for information transmitted through our website</li>
                    <li>Access controls and account security measures</li>
                    <li>Security monitoring and regular updates</li>
                    <li>Appropriate third-party security and hosting measures</li>
                  </ul>
                  <p className="text-xs text-amber-950/80 bg-amber-100/60 p-2.5 rounded-xl border border-amber-200 text-[11px]">
                    Note: While we apply strict controls, no Internet transmission is 100% secure, so absolute security cannot be guaranteed.
                  </p>
                </section>
              </div>

              {/* Section 8 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    8
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Your Privacy Rights</h2>
                </div>
                <p className="text-stone-700">
                  Depending on your location and applicable privacy and data protection laws, you may have certain rights regarding your personal information:
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-1">
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-1">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider text-[#C81E3D]">Right to Access</h3>
                    <p className="text-xs text-stone-600">You may have the right to request access to personal information that we hold about you.</p>
                  </div>
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-1">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider text-[#C81E3D]">Right to Rectification</h3>
                    <p className="text-xs text-stone-600">You may request correction of inaccurate or incomplete personal information.</p>
                  </div>
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-1">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider text-[#C81E3D]">Right to Erasure</h3>
                    <p className="text-xs text-stone-600">Under certain circumstances, you may request deletion of your personal information.</p>
                  </div>
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-1">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider text-[#C81E3D]">Right to Restriction</h3>
                    <p className="text-xs text-stone-600">Under certain circumstances, you may request that we restrict or limit processing of your data.</p>
                  </div>
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-1">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider text-[#C81E3D]">Data Portability</h3>
                    <p className="text-xs text-stone-600">Receive your personal information in a structured, commonly used, machine-readable format.</p>
                  </div>
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-1">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider text-[#C81E3D]">Right to Object & Withdraw</h3>
                    <p className="text-xs text-stone-600">Object to direct marketing or withdraw your consent at any time without affecting past processing.</p>
                  </div>
                </div>
                <p className="text-xs text-stone-600 pt-1">
                  To exercise any applicable privacy right, please contact us using the contact information in Section 12 below. We may need to verify your identity before processing certain requests.
                </p>
              </section>

              {/* Section 9 & 10 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">9</span>
                    <h3>Third-Party Websites and Services</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Our website may contain links to third-party websites, payment services, or social media platforms. This Privacy Policy applies only to <strong>timenlife.com</strong>. We are not responsible for third-party privacy practices or content.
                  </p>
                </section>

                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">10</span>
                    <h3>Children&apos;s Privacy</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Our website is not specifically directed toward children. We do not knowingly collect personal information from children where prohibited by law. Parents or guardians may contact us to address and delete any child data.
                  </p>
                </section>
              </div>

              {/* Section 11 */}
              <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                  <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">11</span>
                  <h3>Changes to This Privacy Policy</h3>
                </div>
                <p className="text-xs text-stone-600 leading-relaxed">
                  We may update this Privacy Policy from time to time to reflect changes in business practices, services, technology, laws, or security requirements. When changes occur, we update this page and revise the Effective Date at the top. We encourage periodic review.
                </p>
              </section>

              {/* Section 12 - Contact Us */}
              <section className="space-y-4 p-6 sm:p-8 rounded-3xl bg-gradient-to-br from-stone-900 via-[#1E1915] to-stone-900 text-white shadow-xl border border-amber-900/40">
                <div className="flex items-center gap-3 border-b border-stone-700/80 pb-4">
                  <div className="w-10 h-10 rounded-xl bg-[#C81E3D] text-white flex items-center justify-center font-bold text-lg shrink-0">
                    12
                  </div>
                  <div>
                    <h2 className="text-xl font-serif font-bold text-amber-50">Contact Us</h2>
                    <p className="text-xs text-amber-200/80">Have questions or requests regarding this Privacy Policy?</p>
                  </div>
                </div>

                <p className="text-xs sm:text-sm text-stone-300 leading-relaxed">
                  If you have any questions, concerns, requests, or complaints regarding this Privacy Policy or the way we handle personal information, please reach out to us:
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                  <div className="p-4 rounded-2xl bg-stone-800/80 border border-stone-700 space-y-2">
                    <p className="text-xs font-bold text-amber-400 uppercase tracking-wider">Company Information</p>
                    <p className="text-sm font-bold text-white">Time N Life</p>
                    <p className="text-xs text-stone-300">Website: <a href="https://timenlife.com" target="_blank" rel="noreferrer" className="text-amber-300 hover:underline">timenlife.com</a></p>
                    <p className="text-xs text-stone-300">Email: <a href="mailto:info@timenlife.com" className="text-amber-300 hover:underline">info@timenlife.com</a></p>
                  </div>

                  <div className="p-4 rounded-2xl bg-stone-800/80 border border-stone-700 space-y-2">
                    <p className="text-xs font-bold text-amber-400 uppercase tracking-wider">Phone & Address</p>
                    <p className="text-xs text-stone-300">Phone: <span className="text-white font-medium">+92-42-32355336</span></p>
                    <p className="text-xs text-stone-300">Mobile: <span className="text-emerald-400 font-bold">+92-331-3333400</span></p>
                    <p className="text-xs text-stone-300 pt-1 leading-relaxed">
                      Postal Address: CB534, Street No. 9, New Afshan Colony, Rawalpindi-46000, Punjab, Pakistan
                    </p>
                  </div>
                </div>

                <div className="pt-2 text-center text-xs text-stone-400 italic">
                  We will make reasonable efforts to review and respond to privacy-related requests in accordance with applicable law.
                </div>
              </section>

            </div>
          </div>
        );

      case 'shipping-details':
        return (
          <div className="space-y-8 font-sans">
            {/* Header Hero Card */}
            <div className="bg-gradient-to-r from-[#161311] via-[#28201a] to-[#161311] text-white p-8 sm:p-10 rounded-3xl shadow-xl border border-amber-900/40 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
              <div className="flex flex-wrap items-center gap-3 mb-3">
                <span className="px-3 py-1 rounded-full bg-amber-500/20 text-[#D4AF37] border border-amber-500/30 text-xs font-bold uppercase tracking-wider flex items-center gap-1.5">
                  <Truck className="w-3.5 h-3.5 text-amber-400" />
                  Logistics & Delivery Policy
                </span>
                <span className="px-3 py-1 rounded-full bg-stone-800 text-stone-300 border border-stone-700 text-xs font-medium">
                  Official Shipping Guidelines
                </span>
              </div>
              <h1 className="text-3xl sm:text-5xl font-serif font-bold text-amber-50 leading-tight">
                Shipping Policy for Time N Life
              </h1>
              <p className="text-amber-200/90 mt-4 leading-relaxed max-w-3xl text-sm sm:text-base">
                At Time N Life, we are committed to processing and delivering your orders safely, efficiently, and reliably. This Shipping Policy explains our shipping locations, order processing times, estimated delivery timelines, shipping charges, tracking, and other important delivery information.
              </p>
            </div>

            {/* Main Policy Content Sections */}
            <div className="bg-white p-6 sm:p-10 rounded-3xl border border-stone-200/90 shadow-sm space-y-10 text-stone-800 leading-relaxed text-sm">
              
              {/* Section 1 */}
              <section className="space-y-3">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    1
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Shipping Locations</h2>
                </div>
                <p className="text-stone-700">
                  We currently offer delivery services across Pakistan.
                </p>
                <p className="text-stone-700">
                  Orders can be delivered to eligible residential, commercial, and other valid delivery addresses within Pakistan, subject to courier service availability.
                </p>
                <div className="p-3.5 rounded-xl bg-amber-50/60 border border-amber-200/70 text-xs text-amber-950 font-medium">
                  We may expand our shipping services to international destinations in the future.
                </div>
              </section>

              {/* Section 2 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    2
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Order Processing</h2>
                </div>
                <p className="text-stone-700">
                  After you place an order through <strong>timenlife.com</strong>, our team will process and prepare your order for shipment.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-5 pt-1">
                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm flex items-center gap-2">
                      <Clock className="w-4 h-4 text-[#C81E3D]" /> Processing Time
                    </h3>
                    <ul className="list-disc pl-4 text-xs space-y-1.5 text-stone-700">
                      <li>Orders are generally processed within <strong>1–2 business days</strong>.</li>
                      <li>Business days are generally Monday through Friday, excluding public holidays.</li>
                      <li>Processing may take longer during sales, promotional campaigns, public holidays, or periods of unusually high order volume.</li>
                    </ul>
                  </div>

                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm flex items-center gap-2">
                      <CheckCircle2 className="w-4 h-4 text-[#C81E3D]" /> Order Confirmation
                    </h3>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      After successfully placing an order, you may receive an order confirmation through the contact information provided during checkout.
                    </p>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      Once your order has been dispatched, you may receive a shipping or dispatch confirmation with the available tracking information.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 3 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    3
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Estimated Delivery Times</h2>
                </div>
                <p className="text-stone-700">
                  Delivery times depend on your destination, courier availability, weather, public holidays, and other logistical circumstances.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-5 pt-1">
                  <div className="p-5 rounded-2xl bg-amber-50/70 border border-amber-200 space-y-3">
                    <h3 className="font-bold text-amber-950 text-sm">Estimated Delivery Timelines (Pakistan)</h3>
                    <div className="space-y-2 text-xs">
                      <div className="p-3 bg-white rounded-xl border border-amber-200/80 flex justify-between items-center">
                        <span className="font-bold text-stone-800">Major Cities (Lahore, Karachi, Islamabad, etc.)</span>
                        <span className="font-extrabold text-[#C81E3D]">2–4 business days</span>
                      </div>
                      <div className="p-3 bg-white rounded-xl border border-amber-200/80 flex justify-between items-center">
                        <span className="font-bold text-stone-800">Other Cities & Regional Areas</span>
                        <span className="font-extrabold text-[#C81E3D]">4–7 business days</span>
                      </div>
                    </div>
                    <p className="text-[11px] text-amber-900/80 italic">
                      These delivery times are estimates and are not guaranteed delivery dates.
                    </p>
                  </div>

                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">Potential Unforeseen Delays</h3>
                    <p className="text-xs text-stone-600">Delivery may take longer due to circumstances beyond our reasonable control, including:</p>
                    <div className="grid grid-cols-2 gap-1.5 text-xs text-stone-700 font-medium pt-1">
                      <div>• Severe weather</div>
                      <div>• Public holidays</div>
                      <div>• Courier delays</div>
                      <div>• Road closures</div>
                      <div>• Security restrictions</div>
                      <div>• Incomplete address</div>
                      <div>• High order volumes</div>
                      <div>• Unforeseen logistics</div>
                    </div>
                    <p className="text-[11px] text-stone-500 pt-1">
                      We appreciate your patience if your order experiences an unexpected delay.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 4 */}
              <section className="space-y-3">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    4
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Shipping Charges</h2>
                </div>
                <p className="text-stone-700">
                  Shipping charges may vary depending on factors such as delivery location, order size or weight, courier service, applicable delivery charges, and promotional offers.
                </p>
                <p className="text-stone-700 text-xs sm:text-sm">
                  Where applicable, shipping charges will be displayed during the checkout process before you complete your order.
                </p>
                <div className="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-950 font-medium text-xs">
                  From time to time, Time N Life may offer free shipping promotions or reduced shipping charges on selected products or qualifying orders. Any applicable promotion will be subject to its stated terms and conditions.
                </div>
              </section>

              {/* Section 5 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    5
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Order Tracking</h2>
                </div>
                <p className="text-stone-700">
                  Once your order has been dispatched, tracking information may be provided through your order details, email, SMS, or other available communication channels.
                </p>
                <p className="text-stone-700 text-xs sm:text-sm">
                  If a tracking number is provided, you can use it to check the status of your shipment through the relevant courier service or our live tracking tool.
                </p>
                <div className="p-5 rounded-2xl bg-stone-900 text-white flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 shadow-md">
                  <div>
                    <h3 className="font-bold text-amber-300 text-sm">Have an active order tracking number?</h3>
                    <p className="text-xs text-stone-300 mt-0.5">Check real-time dispatch and delivery updates on our tracking portal.</p>
                  </div>
                  <a
                    href="/track-order"
                    onClick={(e) => {
                      e.preventDefault();
                      window.history.pushState({}, '', '/track-order');
                      window.dispatchEvent(new PopStateEvent('popstate'));
                    }}
                    className="inline-flex items-center gap-2 px-4 py-2.5 bg-[#C81E3D] hover:bg-[#a0162e] text-white font-bold text-xs rounded-xl shadow-sm transition-all shrink-0 cursor-pointer"
                  >
                    <span>Open Live Order Tracker</span>
                    <ExternalLink className="w-3.5 h-3.5" />
                  </a>
                </div>
              </section>

              {/* Section 6 & 7 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-1">
                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">6</span>
                    <h3>Packaging and Product Protection</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    We take reasonable care when preparing and packaging orders for delivery. Products are packed appropriately to help protect them from damage during transportation and handling.
                  </p>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    If your package arrives damaged, please contact us as soon as possible with your order and delivery details.
                  </p>
                </section>

                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">7</span>
                    <h3>Delivery Attempts</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Our courier partners may make one or more delivery attempts depending on their delivery policies and destination. If delivery cannot be completed, the courier may attempt delivery again, call you, hold the package, or return it to us.
                  </p>
                </section>
              </div>

              {/* Section 8 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    8
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Accurate Delivery Information</h2>
                </div>
                <p className="text-stone-700">
                  Customers are responsible for providing complete and accurate delivery information when placing an order.
                </p>

                <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-3">
                  <h3 className="font-bold text-stone-900 text-sm">Please ensure your shipping details include:</h3>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2.5 text-xs text-stone-800 font-medium">
                    <div className="p-2.5 bg-white rounded-xl border border-stone-200">✓ Full recipient name</div>
                    <div className="p-2.5 bg-white rounded-xl border border-stone-200">✓ Complete delivery address</div>
                    <div className="p-2.5 bg-white rounded-xl border border-stone-200">✓ House or building number</div>
                    <div className="p-2.5 bg-white rounded-xl border border-stone-200">✓ Street or road name</div>
                    <div className="p-2.5 bg-white rounded-xl border border-stone-200">✓ Area, block, phase, locality</div>
                    <div className="p-2.5 bg-white rounded-xl border border-stone-200">✓ City name</div>
                    <div className="p-2.5 bg-white rounded-xl border border-stone-200">✓ Postal code (where applicable)</div>
                    <div className="p-2.5 bg-white rounded-xl border border-stone-200">✓ Correct & active phone number</div>
                  </div>
                  <p className="text-xs text-stone-500 pt-1">
                    Time N Life may not be responsible for delays, failed deliveries, or additional delivery costs resulting from incorrect or outdated information. If you notice an address error after placing an order, please contact us immediately.
                  </p>
                </div>
              </section>

              {/* Section 9 & 10 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">9</span>
                    <h3>Delayed or Missing Orders</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    If your order has not arrived within the estimated delivery timeframe, please contact us with your order details. We will coordinate with the relevant courier service to investigate the shipment and provide you with available information.
                  </p>
                </section>

                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">10</span>
                    <h3>Undeliverable or Returned Shipments</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    An order may be considered undeliverable if the address is incorrect, recipient is unreachable, delivery is refused, or area is inaccessible. If returned to us, we will contact you regarding available redelivery options (additional shipping charges may apply).
                  </p>
                </section>
              </div>

              {/* Section 11 */}
              <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                  <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">11</span>
                  <h3>Changes to This Shipping Policy</h3>
                </div>
                <p className="text-xs text-stone-600 leading-relaxed">
                  Time N Life may update this Shipping Policy from time to time to reflect changes in our shipping arrangements, courier services, delivery areas, business practices, or operational requirements. Any updated version will be published on this page.
                </p>
              </section>

              {/* Section 12 - Contact Us */}
              <section className="space-y-4 p-6 sm:p-8 rounded-3xl bg-gradient-to-br from-stone-900 via-[#1E1915] to-stone-900 text-white shadow-xl border border-amber-900/40">
                <div className="flex items-center gap-3 border-b border-stone-700/80 pb-4">
                  <div className="w-10 h-10 rounded-xl bg-[#C81E3D] text-white flex items-center justify-center font-bold text-lg shrink-0">
                    12
                  </div>
                  <div>
                    <h2 className="text-xl font-serif font-bold text-amber-50">Contact Us</h2>
                    <p className="text-xs text-amber-200/80">Questions regarding your order, shipping, or delivery status?</p>
                  </div>
                </div>

                <p className="text-xs sm:text-sm text-stone-300 leading-relaxed">
                  If you have questions regarding your order, shipping, delivery status, or this Shipping Policy, please contact Time N Life:
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                  <div className="p-4 rounded-2xl bg-stone-800/80 border border-stone-700 space-y-2">
                    <p className="text-xs font-bold text-amber-400 uppercase tracking-wider">Company Information</p>
                    <p className="text-sm font-bold text-white">Time N Life</p>
                    <p className="text-xs text-stone-300">Website: <a href="https://timenlife.com" target="_blank" rel="noreferrer" className="text-amber-300 hover:underline">timenlife.com</a></p>
                    <p className="text-xs text-stone-300">Email: <a href="mailto:info@timenlife.com" className="text-amber-300 hover:underline">info@timenlife.com</a></p>
                  </div>

                  <div className="p-4 rounded-2xl bg-stone-800/80 border border-stone-700 space-y-2">
                    <p className="text-xs font-bold text-amber-400 uppercase tracking-wider">Phone & Address</p>
                    <p className="text-xs text-stone-300">Phone: <span className="text-white font-medium">+92-42-32355336</span></p>
                    <p className="text-xs text-stone-300">Mobile: <span className="text-emerald-400 font-bold">+92-331-3333400</span></p>
                    <p className="text-xs text-stone-300 pt-1 leading-relaxed">
                      Postal Address: CB534, Street No. 9, New Afshan Colony, Rawalpindi-46000, Punjab, Pakistan
                    </p>
                  </div>
                </div>

                <div className="pt-2 text-center text-xs text-stone-400 italic">
                  We will make reasonable efforts to assist you with shipping and delivery-related inquiries.
                </div>
              </section>

            </div>
          </div>
        );

      case 'terms-conditions':
        return (
          <div className="space-y-8 font-sans">
            {/* Header Hero Card */}
            <div className="bg-gradient-to-r from-[#161311] via-[#28201a] to-[#161311] text-white p-8 sm:p-10 rounded-3xl shadow-xl border border-amber-900/40 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
              <div className="flex flex-wrap items-center gap-3 mb-3">
                <span className="px-3 py-1 rounded-full bg-amber-500/20 text-[#D4AF37] border border-amber-500/30 text-xs font-bold uppercase tracking-wider flex items-center gap-1.5">
                  <FileText className="w-3.5 h-3.5 text-amber-400" />
                  Legal Agreement & Rules
                </span>
                <span className="px-3 py-1 rounded-full bg-stone-800 text-stone-300 border border-stone-700 text-xs font-medium">
                  Effective Date: August 11, 2026
                </span>
              </div>
              <h1 className="text-3xl sm:text-5xl font-serif font-bold text-amber-50 leading-tight">
                Terms and Conditions for Time N Life
              </h1>
              <p className="text-amber-200/90 mt-4 leading-relaxed max-w-3xl text-sm sm:text-base">
                Welcome to <strong>Time N Life (timenlife.com)</strong>, operated by Time N Life from CB534, Street No. 9, New Afshan Colony, Rawalpindi-46000, Punjab, Pakistan.
              </p>
              <p className="text-amber-200/80 mt-2 leading-relaxed max-w-3xl text-xs sm:text-sm">
                These Terms and Conditions (“Terms”) govern your access to and use of timenlife.com, including browsing our website, creating an account, placing orders, purchasing products, and using other services provided through our website.
              </p>
              <div className="mt-5 p-4 rounded-2xl bg-amber-950/50 border border-amber-800/50 text-amber-100 text-xs sm:text-sm leading-relaxed max-w-3xl">
                By accessing or using our website, you agree to be bound by these Terms and our Privacy Policy. If you do not agree with any part of these Terms, please do not use our website or place an order.
              </div>
            </div>

            {/* Main Terms Content Sections */}
            <div className="bg-white p-6 sm:p-10 rounded-3xl border border-stone-200/90 shadow-sm space-y-10 text-stone-800 leading-relaxed text-sm">
              
              {/* Section 1 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    1
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">General Conditions</h2>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-5 pt-1">
                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">Acceptance of Terms & Eligibility</h3>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      By accessing timenlife.com or placing an order, you acknowledge that you have read, understood, and agreed to these Terms and Conditions.
                    </p>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      You must be legally capable of entering into a purchase agreement under applicable law (at least 18 years of age to create an account or place an order). You confirm that the information you provide is accurate.
                    </p>
                  </div>

                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">Lawful Use & Restrictions</h3>
                    <p className="text-xs text-stone-600">You agree to use our website only for lawful purposes. You must not:</p>
                    <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                      <li>Use the website for fraudulent or unlawful activities</li>
                      <li>Attempt unauthorized access to systems or accounts</li>
                      <li>Interfere with website security, operation, or transmit viruses</li>
                      <li>Copy, reproduce, or exploit website content without permission</li>
                    </ul>
                  </div>
                </div>

                <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 text-xs text-stone-600">
                  <strong>Accuracy of Information:</strong> We make reasonable efforts to keep product descriptions, prices, availability, images, and details accurate. However, occasional errors may occur. We reserve the right to correct errors and update information at any time.
                </div>
              </section>

              {/* Section 2 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    2
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Products and Product Information</h2>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 pt-1">
                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider text-[#C81E3D]">Product Descriptions</h3>
                    <p className="text-xs text-stone-600">Actual colors or appearance may vary depending on device screen settings, photography, or lighting. Specifications may be updated without prior notice.</p>
                  </div>

                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider text-[#C81E3D]">Product Availability</h3>
                    <p className="text-xs text-stone-600">All products are subject to availability. We reserve the right to limit quantities, discontinue items, or cancel orders if stock becomes unavailable.</p>
                  </div>

                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider text-[#C81E3D]">Product Pricing</h3>
                    <p className="text-xs text-stone-600">Prices are shown in Pakistani Rupees (PKR) and may change without notice. In case of pricing errors, we reserve the right to correct or adjust affected orders.</p>
                  </div>

                  <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-xs uppercase tracking-wider text-[#C81E3D]">Product Quality</h3>
                    <p className="text-xs text-stone-600">We ensure items meet high quality standards. Minor variations in appearance, packaging, or presentation may occur across production batches.</p>
                  </div>
                </div>
              </section>

              {/* Section 3 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    3
                  </div>
                  <h2 className="text-xl font-bold text-stone-900">Orders and Payments</h2>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-5 pt-1">
                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">Placing Orders & Confirmation</h3>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      Submitting an order constitutes a purchase request subject to acceptance and stock availability. An order confirmation email/SMS does not guarantee final fulfillment if unexpected issues arise.
                    </p>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      Available payment methods are shown at checkout. Third-party payment providers process transaction details under their own privacy and security terms.
                    </p>
                  </div>

                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                    <h3 className="font-bold text-stone-900 text-sm">Cancellations Policy</h3>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      <strong>Customer Cancellations:</strong> You may request cancellation before dispatch. Once dispatched, cancellations may no longer be possible.
                    </p>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      <strong>Cancellation by Time N Life:</strong> We may cancel orders due to stock unavailability, unverified payment, invalid delivery address, pricing errors, or suspected fraud.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 4 & 5 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">4</span>
                    <h3>Shipping and Delivery</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Shipping practices are governed by our separate <strong>Shipping Policy</strong>. Delivery dates are estimates and subject to location, courier schedules, weather, or holidays. Customers are responsible for providing complete address details.
                  </p>
                </section>

                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">5</span>
                    <h3>Returns, Exchanges, and Refunds</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Returns, exchanges, and refunds are handled according to our official <strong>Returns & Refunds Policy</strong>. Eligibility depends on product condition, original packaging, usage, and reason for return.
                  </p>
                </section>
              </div>

              {/* Section 6 & 7 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">6</span>
                    <h3>Intellectual Property</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    All website content (logos, brand names, text, graphics, images, video, page layout, icons, software) is owned or licensed by Time N Life and protected by IP laws. You may not reproduce, modify, or commercially exploit our assets without written permission.
                  </p>
                </section>

                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">7</span>
                    <h3>User Content & Reviews</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    You are responsible for any reviews, comments, or feedback submitted. Content must be accurate, non-infringing, and lawful. By submitting, you grant Time N Life permission to display or publish that content for operations and promotions.
                  </p>
                </section>
              </div>

              {/* Section 8 & 9 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">8</span>
                    <h3>Website Availability and Disclaimer</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    While we maintain high uptime, we do not guarantee continuous, uninterrupted, or error-free website access. Maintenance, hosting issues, or technical updates may cause occasional temporary downtime.
                  </p>
                </section>

                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">9</span>
                    <h3>Limitation of Liability</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    To the fullest extent permitted by law, Time N Life is not responsible for indirect, consequential, or punitive losses. Total liability relating to a purchase will not exceed the actual amount paid for the relevant product.
                  </p>
                </section>
              </div>

              {/* Section 10, 11, 12, 13, 14, 15 Grid */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-5 pt-1">
                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-sm">
                    <span className="w-6 h-6 rounded-md bg-amber-100 text-[#C81E3D] flex items-center justify-center text-xs font-bold">10</span>
                    <h3>Indemnification</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    You agree to hold harmless Time N Life and its affiliates from claims or damages resulting from your violation of these Terms or misuse of our services.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-sm">
                    <span className="w-6 h-6 rounded-md bg-amber-100 text-[#C81E3D] flex items-center justify-center text-xs font-bold">11</span>
                    <h3>Third-Party Links</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    External links (payment gateways, courier partners, social channels) operate under their own terms. We are not responsible for third-party practices.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-sm">
                    <span className="w-6 h-6 rounded-md bg-amber-100 text-[#C81E3D] flex items-center justify-center text-xs font-bold">12</span>
                    <h3>Governing Law</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Governed by the laws of Pakistan. Any legal disputes shall be subject to the competent courts of Rawalpindi, Punjab, Pakistan.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-sm">
                    <span className="w-6 h-6 rounded-md bg-amber-100 text-[#C81E3D] flex items-center justify-center text-xs font-bold">13</span>
                    <h3>Changes to Terms</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    We reserve the right to modify these Terms. Updates are published on timenlife.com with revised Effective Dates.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-sm">
                    <span className="w-6 h-6 rounded-md bg-amber-100 text-[#C81E3D] flex items-center justify-center text-xs font-bold">14</span>
                    <h3>Severability</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    If any provision is deemed unenforceable, it will be modified or severed, while remaining provisions stay in full force.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-sm">
                    <span className="w-6 h-6 rounded-md bg-amber-100 text-[#C81E3D] flex items-center justify-center text-xs font-bold">15</span>
                    <h3>Entire Agreement</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    These Terms, with Privacy Policy, Shipping Policy, and Return Policy, form the complete binding agreement between you and Time N Life.
                  </p>
                </div>
              </div>

              {/* Section 16 - Contact Information */}
              <section className="space-y-4 p-6 sm:p-8 rounded-3xl bg-gradient-to-br from-stone-900 via-[#1E1915] to-stone-900 text-white shadow-xl border border-amber-900/40">
                <div className="flex items-center gap-3 border-b border-stone-700/80 pb-4">
                  <div className="w-10 h-10 rounded-xl bg-[#C81E3D] text-white flex items-center justify-center font-bold text-lg shrink-0">
                    16
                  </div>
                  <div>
                    <h2 className="text-xl font-serif font-bold text-amber-50">Contact Information</h2>
                    <p className="text-xs text-amber-200/80">Questions, concerns, or inquiries regarding these Terms?</p>
                  </div>
                </div>

                <p className="text-xs sm:text-sm text-stone-300 leading-relaxed">
                  If you have any questions, concerns, or requests regarding these Terms and Conditions, please contact us:
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                  <div className="p-4 rounded-2xl bg-stone-800/80 border border-stone-700 space-y-2">
                    <p className="text-xs font-bold text-amber-400 uppercase tracking-wider">Company Information</p>
                    <p className="text-sm font-bold text-white">Time N Life</p>
                    <p className="text-xs text-stone-300">Website: <a href="https://timenlife.com" target="_blank" rel="noreferrer" className="text-amber-300 hover:underline">timenlife.com</a></p>
                    <p className="text-xs text-stone-300">Email: <a href="mailto:info@timenlife.com" className="text-amber-300 hover:underline">info@timenlife.com</a></p>
                  </div>

                  <div className="p-4 rounded-2xl bg-stone-800/80 border border-stone-700 space-y-2">
                    <p className="text-xs font-bold text-amber-400 uppercase tracking-wider">Phone & Address</p>
                    <p className="text-xs text-stone-300">Phone: <span className="text-white font-medium">+92-42-32355336</span></p>
                    <p className="text-xs text-stone-300">Mobile: <span className="text-emerald-400 font-bold">+92-331-3333400</span></p>
                    <p className="text-xs text-stone-300 pt-1 leading-relaxed">
                      Postal Address: CB534, Street No. 9, New Afshan Colony, Rawalpindi-46000, Punjab, Pakistan
                    </p>
                  </div>
                </div>

                <div className="pt-2 text-center text-xs text-stone-400 italic">
                  We will make reasonable efforts to respond to your inquiries and assist you with questions regarding our website and policies.
                </div>
              </section>

            </div>
          </div>
        );


      case 'refund-returns-policy':
        return (
          <div className="space-y-8 font-sans">
            {/* Header Hero Card */}
            <div className="bg-gradient-to-r from-[#161311] via-[#28201a] to-[#161311] text-white p-8 sm:p-10 rounded-3xl shadow-xl border border-amber-900/40 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
              <div className="flex flex-wrap items-center gap-3 mb-3">
                <span className="px-3 py-1 rounded-full bg-amber-500/20 text-[#D4AF37] border border-amber-500/30 text-xs font-bold uppercase tracking-wider flex items-center gap-1.5">
                  <RefreshCw className="w-3.5 h-3.5 text-amber-400" />
                  Satisfaction & Return Guarantee
                </span>
                <span className="px-3 py-1 rounded-full bg-stone-800 text-stone-300 border border-stone-700 text-xs font-medium">
                  Effective Date: August 11, 2026
                </span>
              </div>
              <h1 className="text-3xl sm:text-5xl font-serif font-bold text-amber-50 leading-tight">
                Refund & Returns Policy for Time N Life
              </h1>
              <p className="text-amber-200/90 mt-4 leading-relaxed max-w-3xl text-sm sm:text-base">
                At <strong>Time N Life (timenlife.com)</strong>, we want you to have a smooth and satisfactory shopping experience. If you receive a damaged, defective, incorrect, or otherwise eligible product, this Refund & Returns Policy explains when and how you can request a return, exchange, or refund.
              </p>
              <div className="mt-5 p-4 rounded-2xl bg-amber-950/50 border border-amber-800/50 text-amber-100 text-xs sm:text-sm leading-relaxed max-w-3xl">
                By placing an order through <strong>timenlife.com</strong>, you acknowledge and agree to the terms of this policy.
              </div>
            </div>

            {/* Main Policy Content Sections */}
            <div className="bg-white p-6 sm:p-10 rounded-3xl border border-stone-200/90 shadow-sm space-y-10 text-stone-800 leading-relaxed text-sm">
              
              {/* Section 1 & 2 */}
              <section className="space-y-4">
                <div className="flex items-center gap-3 border-b border-stone-200 pb-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-50 text-[#C81E3D] flex items-center justify-center font-bold text-lg shrink-0">
                    1
                  </div>
                  <div>
                    <h2 className="text-xl font-bold text-stone-900">Return Period & Eligibility</h2>
                    <p className="text-xs text-stone-500">7 Calendar Days Return Window</p>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-5 pt-1">
                  <div className="p-5 rounded-2xl bg-amber-50/70 border border-amber-200 space-y-3">
                    <h3 className="font-bold text-amber-950 text-sm flex items-center justify-between">
                      <span>1. Return Period</span>
                      <span className="px-2.5 py-0.5 rounded-full bg-[#C81E3D] text-white text-xs font-extrabold">7 Calendar Days</span>
                    </h3>
                    <p className="text-xs text-stone-700 leading-relaxed">
                      Eligible products may be returned within <strong>7 calendar days</strong> from the date of delivery, unless a different return period is specifically stated for a particular product.
                    </p>
                    <p className="text-xs text-stone-600 leading-relaxed">
                      Return requests submitted after the applicable return period may not be accepted. We recommend contacting us as soon as possible if you believe there is an issue with your order.
                    </p>
                  </div>

                  <div className="p-5 rounded-2xl bg-stone-50 border border-stone-200 space-y-3">
                    <h3 className="font-bold text-stone-900 text-sm">2. To Qualify for a Return</h3>
                    <ul className="list-disc pl-4 text-xs space-y-1.5 text-stone-700 font-medium">
                      <li>The product must be unused and unworn in original condition.</li>
                      <li>Original packaging should be retained where reasonably possible.</li>
                      <li>Product tags, labels, accessories, manuals, or included items must be returned.</li>
                      <li>Must show no signs of misuse, intentional damage, or excessive wear.</li>
                      <li>Proof of purchase or a valid order number must be provided.</li>
                    </ul>
                  </div>
                </div>

                <div className="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-950 space-y-2 text-xs">
                  <h4 className="font-bold text-sm text-[#C81E3D]">Damaged, Defective, or Incorrect Products</h4>
                  <p className="leading-relaxed">
                    If you receive a damaged product, defective product, incorrect item, or a product materially different from what you ordered, please contact us as soon as possible after delivery. We may request clear photographs or a video showing the product and its packaging so that we can assess the issue promptly.
                  </p>
                </div>
              </section>

              {/* Section 3 & 4 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">3</span>
                    <h3>Non-Returnable Items</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Certain products may not be eligible for return due to hygiene, safety, personalization, perishability, or other restrictions, including:
                  </p>
                  <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                    <li>Intimate or personal-use products</li>
                    <li>Cosmetics or hygiene-sensitive products</li>
                    <li>Perishable goods</li>
                    <li>Personalized or customized products</li>
                    <li>Items specifically marked non-returnable on the product page</li>
                  </ul>
                </section>

                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">4</span>
                    <h3>How to Request a Return</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Contact customer support via Email (<strong>info@timenlife.com</strong>) or Mobile (<strong>+92-331-3333400</strong>). Please provide:
                  </p>
                  <ul className="list-disc pl-4 text-xs space-y-1 text-stone-700">
                    <li>Your order number & full name</li>
                    <li>Product name & reason for return</li>
                    <li>Photos or video if item is damaged/defective/incorrect</li>
                  </ul>
                  <p className="text-[11px] text-amber-900 font-medium bg-amber-50 p-2 rounded-lg border border-amber-200">
                    Please wait for return instructions before sending any product back. Unauthorized returns may not be processed promptly.
                  </p>
                </section>
              </div>

              {/* Section 5 & 6 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">5</span>
                    <h3>Return Shipping Costs</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    <strong>Damaged / Defective / Incorrect:</strong> Time N Life covers reasonable return shipping costs or arranges pickup upon verification.
                  </p>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    <strong>Change of Mind / Preference / Sizing:</strong> Customer is responsible for return shipping costs. We recommend trackable courier services.
                  </p>
                </section>

                <section className="space-y-3 p-5 rounded-2xl bg-stone-50 border border-stone-200">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-base">
                    <span className="w-7 h-7 rounded-lg bg-amber-100 text-[#C81E3D] flex items-center justify-center text-sm font-bold">6</span>
                    <h3>Return Address</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Once approved, ship items to our main facility:
                  </p>
                  <div className="p-3 bg-white rounded-xl border border-stone-200 text-xs font-bold text-stone-900 leading-relaxed">
                    Time N Life<br />
                    CB534, Street No. 9, New Afshan Colony,<br />
                    Rawalpindi-46000, Punjab, Pakistan
                  </div>
                </section>
              </div>

              {/* Section 7, 8, 9 Grid */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-5 pt-1">
                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-sm">
                    <span className="w-6 h-6 rounded-md bg-amber-100 text-[#C81E3D] flex items-center justify-center text-xs font-bold">7</span>
                    <h3>Return Inspection</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Returned items undergo physical inspection (condition, tags, packaging, signs of wear). Items failing inspection may be rejected.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-sm">
                    <span className="w-6 h-6 rounded-md bg-amber-100 text-[#C81E3D] flex items-center justify-center text-xs font-bold">8</span>
                    <h3>Refund Processing</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Approved refunds are issued to your payment account within <strong>5–10 business days</strong>. Original shipping is non-refundable unless due to our error.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-sm">
                    <span className="w-6 h-6 rounded-md bg-amber-100 text-[#C81E3D] flex items-center justify-center text-xs font-bold">9</span>
                    <h3>Rejected Refunds</h3>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Refunds may be rejected if submitted past 7 days, item shows misuse/excessive wear, components are missing, or item is non-returnable.
                  </p>
                </div>
              </div>

              {/* Section 10, 11, 12, 13 Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 pt-1">
                <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-xs">
                    <span className="w-5 h-5 rounded bg-amber-100 text-[#C81E3D] flex items-center justify-center text-[10px] font-bold">10</span>
                    <h4>Exchanges</h4>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Offered for defective, damaged, or incorrectly supplied items, subject to stock availability.
                  </p>
                </div>

                <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-xs">
                    <span className="w-5 h-5 rounded bg-amber-100 text-[#C81E3D] flex items-center justify-center text-[10px] font-bold">11</span>
                    <h4>Late or Missing Refunds</h4>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    If delayed, check bank/card provider first. If unresolved, email us at <strong>info@timenlife.com</strong>.
                  </p>
                </div>

                <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-xs">
                    <span className="w-5 h-5 rounded bg-amber-100 text-[#C81E3D] flex items-center justify-center text-[10px] font-bold">12</span>
                    <h4>Order Cancellation</h4>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Cancellations allowed prior to dispatch. Post-dispatch orders follow the standard return process.
                  </p>
                </div>

                <div className="p-4 rounded-xl bg-stone-50 border border-stone-200 space-y-2">
                  <div className="flex items-center gap-2 font-bold text-stone-900 text-xs">
                    <span className="w-5 h-5 rounded bg-amber-100 text-[#C81E3D] flex items-center justify-center text-[10px] font-bold">13</span>
                    <h4>Policy Changes</h4>
                  </div>
                  <p className="text-xs text-stone-600 leading-relaxed">
                    Updated versions are published on timenlife.com with revised effective dates.
                  </p>
                </div>
              </div>

              {/* Section 14 - Contact Information */}
              <section className="space-y-4 p-6 sm:p-8 rounded-3xl bg-gradient-to-br from-stone-900 via-[#1E1915] to-stone-900 text-white shadow-xl border border-amber-900/40">
                <div className="flex items-center gap-3 border-b border-stone-700/80 pb-4">
                  <div className="w-10 h-10 rounded-xl bg-[#C81E3D] text-white flex items-center justify-center font-bold text-lg shrink-0">
                    14
                  </div>
                  <div>
                    <h2 className="text-xl font-serif font-bold text-amber-50">Contact Information</h2>
                    <p className="text-xs text-amber-200/80">Questions regarding returns, refunds, or exchanges?</p>
                  </div>
                </div>

                <p className="text-xs sm:text-sm text-stone-300 leading-relaxed">
                  If you have any questions regarding returns, refunds, exchanges, damaged products, or this policy, please contact us:
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                  <div className="p-4 rounded-2xl bg-stone-800/80 border border-stone-700 space-y-2">
                    <p className="text-xs font-bold text-amber-400 uppercase tracking-wider">Company Information</p>
                    <p className="text-sm font-bold text-white">Time N Life</p>
                    <p className="text-xs text-stone-300">Website: <a href="https://timenlife.com" target="_blank" rel="noreferrer" className="text-amber-300 hover:underline">timenlife.com</a></p>
                    <p className="text-xs text-stone-300">Email: <a href="mailto:info@timenlife.com" className="text-amber-300 hover:underline">info@timenlife.com</a></p>
                  </div>

                  <div className="p-4 rounded-2xl bg-stone-800/80 border border-stone-700 space-y-2">
                    <p className="text-xs font-bold text-amber-400 uppercase tracking-wider">Phone & Address</p>
                    <p className="text-xs text-stone-300">Phone: <span className="text-white font-medium">+92-42-32355336</span></p>
                    <p className="text-xs text-stone-300">Mobile: <span className="text-emerald-400 font-bold">+92-331-3333400</span></p>
                    <p className="text-xs text-stone-300 pt-1 leading-relaxed">
                      Postal Address: CB534, Street No. 9, New Afshan Colony, Rawalpindi-46000, Punjab, Pakistan
                    </p>
                  </div>
                </div>

                <div className="pt-2 text-center text-xs text-stone-400 italic">
                  We will make reasonable efforts to review and respond to your request and assist you with the applicable return or refund process.
                </div>
              </section>

            </div>
          </div>
        );

      case 'collaborative-team':
        return (
          <div className="space-y-10 font-sans">
            {/* Header Hero Banner */}
            <div className="bg-gradient-to-r from-[#161311] via-[#2A2018] to-[#12100E] text-white p-8 sm:p-12 rounded-3xl shadow-xl border border-amber-900/40 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
              <div className="flex flex-wrap items-center gap-3 mb-4">
                <span className="px-3.5 py-1 rounded-full bg-amber-500/20 text-[#D4AF37] border border-amber-500/30 text-xs font-bold uppercase tracking-widest flex items-center gap-1.5">
                  <Sparkles className="w-3.5 h-3.5 text-amber-400" />
                  Time N Life Executive Leadership
                </span>
                <span className="px-3 py-1 rounded-full bg-stone-800 text-stone-300 border border-stone-700 text-xs font-medium">
                  Verified Team Profiles
                </span>
              </div>
              <h1 className="text-3xl sm:text-5xl font-serif font-bold text-amber-50 leading-tight">
                Our Collaborative Team
              </h1>
              <p className="text-amber-200/90 mt-4 leading-relaxed max-w-3xl text-sm sm:text-base">
                Meet the visionary leaders, marketing strategists, technical directors, and operational experts driving <strong>Time N Life (timenlife.com)</strong> to empower Pakistan with premium luxury products, genuine quality guarantees, and flawless customer care.
              </p>

              {/* Leadership Metrics */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-8 pt-6 border-t border-amber-900/40">
                <div className="p-3 bg-black/30 rounded-2xl border border-amber-900/30">
                  <div className="text-xl sm:text-2xl font-bold text-[#D4AF37]">6 Directors</div>
                  <div className="text-[11px] text-stone-400 uppercase tracking-wider">Executive Board</div>
                </div>
                <div className="p-3 bg-black/30 rounded-2xl border border-amber-900/30">
                  <div className="text-xl sm:text-2xl font-bold text-emerald-400">100% Nationwide</div>
                  <div className="text-[11px] text-stone-400 uppercase tracking-wider">Logistics Control</div>
                </div>
                <div className="p-3 bg-black/30 rounded-2xl border border-amber-900/30">
                  <div className="text-xl sm:text-2xl font-bold text-amber-300">4.9 / 5.0★</div>
                  <div className="text-[11px] text-stone-400 uppercase tracking-wider">Customer Trust</div>
                </div>
                <div className="p-3 bg-black/30 rounded-2xl border border-amber-900/30">
                  <div className="text-xl sm:text-2xl font-bold text-rose-400">24/7 Monitoring</div>
                  <div className="text-[11px] text-stone-400 uppercase tracking-wider">Operations & Quality</div>
                </div>
              </div>
            </div>

            {/* Team Members Grid */}
            <div className="space-y-6">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-stone-200 pb-4">
                <div>
                  <h2 className="text-2xl font-serif font-bold text-stone-900">Executive Leadership & Directors</h2>
                  <p className="text-xs text-stone-500 mt-1">
                    Directing strategy, sales, technical operations, monitoring, and human resources.
                  </p>
                </div>
                <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-amber-50 text-amber-900 border border-amber-200 text-xs font-bold">
                  <Award className="w-4 h-4 text-[#C81E3D]" />
                  <span>Time N Life Board</span>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {teamMembers.map((member) => (
                  <div
                    key={member.id}
                    className="bg-white rounded-3xl border border-stone-200 shadow-sm hover:shadow-xl hover:border-amber-400 transition-all duration-300 overflow-hidden flex flex-col justify-between group"
                  >
                    <div className="p-6 space-y-4">
                      {/* Image Frame */}
                      <TeamMemberAvatar imageUrl={member.imageUrl} name={member.name} />

                      {/* Name & Role */}
                      <div className="text-center space-y-1.5">
                        <h3 className="text-xl font-bold font-serif text-stone-900 tracking-tight">
                          {member.name}
                        </h3>
                        <div className="inline-block px-3 py-1 rounded-full bg-[#C81E3D]/10 text-[#C81E3D] border border-[#C81E3D]/20 text-xs font-extrabold uppercase tracking-wider">
                          {member.role}
                        </div>
                      </div>

                      {/* Bio */}
                      <p className="text-stone-600 text-xs sm:text-sm leading-relaxed text-center px-2">
                        {member.bio}
                      </p>
                    </div>

                    {/* Footer Contact */}
                    <div className="p-4 bg-stone-50 border-t border-stone-100 flex items-center justify-between text-xs">
                      <a
                        href={`mailto:${member.email || 'info@timenlife.com'}`}
                        className="inline-flex items-center gap-1.5 text-stone-700 hover:text-[#C81E3D] font-medium transition-colors"
                      >
                        <Mail className="w-3.5 h-3.5 text-[#C81E3D]" />
                        <span>{member.email || 'info@timenlife.com'}</span>
                      </a>
                      <span className="text-[10px] bg-stone-200 text-stone-700 px-2 py-0.5 rounded-md font-bold uppercase">
                        Verified
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Core Values / Mission Section */}
            <div className="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-6">
              <h3 className="text-xl font-serif font-bold text-stone-900 flex items-center gap-2">
                <ShieldCheck className="w-6 h-6 text-[#C81E3D]" />
                Our Commitment to Excellence
              </h3>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 text-xs sm:text-sm">
                <div className="p-4 rounded-2xl bg-amber-50/50 border border-amber-200/80 space-y-2">
                  <h4 className="font-bold text-stone-900 flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-emerald-600" /> Integrity & Authenticity
                  </h4>
                  <p className="text-stone-600 leading-relaxed">
                    Under Fatima Batool&apos;s leadership, every product in our store undergoes strict multi-point authentication before dispatch.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-rose-50/50 border border-rose-200/80 space-y-2">
                  <h4 className="font-bold text-stone-900 flex items-center gap-2">
                    <Truck className="w-4 h-4 text-[#C81E3D]" /> Operations & Monitoring
                  </h4>
                  <p className="text-stone-600 leading-relaxed">
                    Azaan Ali & Muhammad Ali ensure our technical platform and delivery monitoring operate seamlessly across all provinces.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-stone-100 border border-stone-200 space-y-2">
                  <h4 className="font-bold text-stone-900 flex items-center gap-2">
                    <Users className="w-4 h-4 text-amber-700" /> People & Customer Care
                  </h4>
                  <p className="text-stone-600 leading-relaxed">
                    Mobeen Ahmad, Eisha tir Raazia, and Muhammad Ahmad drive customer trust, marketing transparency, and sales support.
                  </p>
                </div>
              </div>
            </div>
          </div>
        );

      default:
        return null;
    }
  };

  const getPageTitle = (s: InfoPageSlug) => {
    switch (s) {
      case 'collaborative-team': return 'Our Collaborative Team';
      case 'privacy-policy': return 'Privacy Policy';
      case 'shipping-details': return 'Shipping Details';
      case 'refund-returns-policy': return 'Refund & Returns Policy';
      case 'terms-conditions': return 'Terms & Conditions';
      case 'introduction': return 'Company Introduction';
      case 'about-us': return 'About Us';
      case 'connect': return 'Connect With Us';
      case 'visit-store': return 'Visit Store';
      default: return 'Information';
    }
  };

  return (
    <div className="min-h-screen bg-stone-50/70 py-10 px-4 sm:px-6 lg:px-8">
      <div className="max-w-5xl mx-auto space-y-8">
        {/* Navigation Breadcrumb */}
        <div className="flex flex-wrap items-center justify-between gap-3 bg-white p-3 sm:p-4 rounded-2xl border border-stone-200/80 shadow-sm">
          <div className="flex items-center gap-2 text-xs font-medium text-stone-500">
            <button
              onClick={onBackToHome}
              className="inline-flex items-center gap-1.5 text-stone-600 hover:text-[#C81E3D] transition-colors cursor-pointer"
            >
              <Home className="w-3.5 h-3.5 text-stone-400" />
              <span>Home</span>
            </button>
            <span className="text-stone-300">/</span>
            <span className="text-stone-900 font-semibold">{getPageTitle(slug)}</span>
          </div>

          <button
            onClick={onBackToHome}
            className="inline-flex items-center gap-2 text-xs font-semibold text-stone-700 hover:text-[#C81E3D] bg-stone-100 hover:bg-stone-200/80 px-3.5 py-1.5 rounded-xl transition-all cursor-pointer"
          >
            <ArrowLeft className="w-3.5 h-3.5" /> Back to Store
          </button>
        </div>

        {/* Page Content */}
        {renderContent()}

        {/* Bottom Social Media Banner */}
        <div className="bg-white p-6 rounded-2xl border border-stone-200 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-4">
          <div>
            <h4 className="font-bold text-stone-900 text-sm">Need help or further assistance?</h4>
            <p className="text-xs text-stone-500 mt-0.5">Contact us at info@timenlife.com or call +92 331 3333400.</p>
          </div>
          <a
            href="https://wa.me/923313333400"
            target="_blank"
            rel="noreferrer"
            className="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-medium text-xs rounded-xl shadow transition-colors inline-flex items-center gap-2 shrink-0 cursor-pointer"
          >
            <MessageCircle className="w-4 h-4" /> Connect on WhatsApp
          </a>
        </div>
      </div>
    </div>
  );
};