"use client";

import { useState } from "react";
import { ArrowLeft, MapPin, Building2, Phone, Mail, Calendar, Globe, Share2, ChevronDown, Clock, Bookmark } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import { DownloadAppCard } from "@/components/seeker/dashboard/DownloadAppCard";
import { DirectoryLinks } from "@/components/DirectoryLinks";
import { useCompany, useFeaturedCompanies } from "@/hooks/useCompanies";

export default function CompanyDetailsPage() {
  const params = useParams();
  const id = params?.id as string;
  const { data, isLoading } = useCompany(id);
  const company = data?.company;
  const openJobs = data?.openJobs || [];
  
  const { data: featuredCompaniesData } = useFeaturedCompanies();
  const featuredCompanies = featuredCompaniesData?.data?.slice(0, 6) || [];

  const searchParams = useSearchParams();
  const initialTab = searchParams?.get('tab') === 'jobs' ? 'jobs' : 'overview';
  const [activeTab, setActiveTab] = useState(initialTab);

  // Custom styled social icons
  const LinkedInIcon = () => (
    <svg className="w-6 h-6 text-[#0a66c2]" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
    </svg>
  );

  const XIcon = () => (
    <svg className="w-6 h-6 text-black" viewBox="0 0 24 24" fill="currentColor">
       <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
    </svg>
  );

  const FacebookIcon = () => (
    <svg className="w-6 h-6 text-[#1877f2]" viewBox="0 0 24 24" fill="currentColor">
      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.469h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.469h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
    </svg>
  );

  // Helper for mini logos
  const renderMiniLogo = (type: string) => {
    switch(type) {
      case 'neosync':
        return <div className="text-red-500 font-bold text-[18px] italic tracking-tighter">ATi</div>;
      case 'taska':
        return <div className="text-blue-500 font-bold text-[18px]">Z</div>;
      case 'taskpilot':
        return <div className="text-black font-bold text-[18px]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-5 h-5"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg></div>;
      case 'neoflow':
        return <div className="w-5 h-5 bg-gradient-to-br from-red-400 via-yellow-400 to-green-400 rounded-full"></div>;
      case 'tencent':
        return <div className="w-5 h-5 bg-black text-white rounded-full flex items-center justify-center font-bold text-[10px]">T</div>;
      case 'marketvista':
        return <div className="w-5 h-5 bg-orange-400 text-white rounded flex items-center justify-center font-bold text-[10px]"><Building2 className="w-3 h-3" /></div>;
      default:
        return <div className="w-5 h-5 bg-gray-200 rounded"></div>;
    }
  }

  return (
    <div className="bg-[#fcfdfd] min-h-screen font-sans">
      {/* Top Banner Area */}
      <div className="bg-gradient-to-r from-[#fff4ed] via-[#ffefe6] to-[#ffebd9] relative pt-6 pb-6">
         {/* Decorative Image */}
         <div className="absolute right-0 top-0 h-full w-[300px] md:w-[400px] pointer-events-none z-0">
            <div className="absolute inset-0 bg-[url('/images/company.png')] bg-cover bg-left-top bg-no-repeat opacity-100"></div>
         </div>
         
         <div className="container mx-auto max-w-7xl px-4 lg:px-8 relative z-10 flex flex-col h-full">
            {/* Back Button */}
            <div className="mb-6">
              <Link href="/companies" className="inline-flex items-center gap-2 text-gray-900 font-medium hover:text-[#ff6b00] transition-colors text-[13px]">
                <ArrowLeft className="w-4 h-4" strokeWidth={2.5} />
                Back to comapnies
              </Link>
            </div>
            
            {/* Logo, Title & Location */}
            <div className="flex items-center gap-6">
               {/* Logo Box */}
               <div className="w-[100px] h-[100px] md:w-[120px] md:h-[120px] bg-white rounded-2xl shadow-[0_4px_15px_rgba(0,0,0,0.04)] border border-gray-100 p-2 flex-shrink-0">
                  <div className="w-full h-full bg-white rounded-xl text-gray-500 flex items-center justify-center overflow-hidden">
                    {company?.c_logo ? (
                       <img src={`${process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:4001'}/${company.c_logo}`} alt={company?.c_name || ''} className="w-full h-full object-contain" onError={(e) => { e.currentTarget.src = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(company?.c_name || 'C') + '&background=random' }} />
                    ) : (
                       <span className="text-4xl font-bold">{company?.c_name?.charAt(0) || 'C'}</span>
                    )}
                  </div>
               </div>
               
               {/* Title & Location text */}
               <div>
                  <h1 className="text-xl md:text-[24px] font-bold text-gray-900 leading-tight">{company?.c_name || (isLoading ? "Loading..." : "Company Not Found")}</h1>
                  <div className="flex items-center gap-1.5 text-[12px] text-gray-500 mt-2 font-medium">
                    <MapPin className="w-3.5 h-3.5 flex-shrink-0" />
                    <span>{company?.smart_location || company?.c_location || "Location not specified"}</span>
                  </div>
               </div>
            </div>
         </div>
      </div>

      {/* Tabs Section */}
      <div className="bg-[#f9f9f9] border-b border-gray-200">
         <div className="container mx-auto">
            {/* Tabs */}
            <div className="flex pl-[140px] md:pl-[170px] gap-8">
               <button 
                 onClick={() => setActiveTab('overview')}
                 className={`py-4 border-b-[3px] font-bold text-[14px] transition-colors ${activeTab === 'overview' ? 'border-black text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-900'}`}
               >
                 Overview
               </button>
               <button 
                 onClick={() => setActiveTab('jobs')}
                 className={`py-4 border-b-[3px] font-bold text-[14px] transition-colors ${activeTab === 'jobs' ? 'border-black text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-900'}`}
               >
                 Jobs
               </button>
            </div>
         </div>
      </div>

      <div className="container mx-auto max-w-7xl px-4 lg:px-8 py-10">
        {activeTab === 'overview' ? (
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
           
           {/* LEFT COLUMN: Main Info */}
           <div className="lg:col-span-8 flex flex-col gap-6">
              
              {/* About Us */}
              <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
                <h2 className="text-[17px] font-bold text-gray-900 mb-4">About Us</h2>
                <div className="text-[13px] text-gray-700 font-medium leading-relaxed space-y-4 whitespace-pre-wrap">
                  {company?.c_about || "No details provided."}
                </div>
              </div>

              {/* Company Information */}
              <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
                <h2 className="text-[17px] font-bold text-gray-900 mb-6">Company Information</h2>
                
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-8 gap-x-6">
                   
                   <div className="flex items-start gap-4">
                     <div className="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center flex-shrink-0 text-[#ff6b00]">
                       <MapPin className="w-5 h-5" />
                     </div>
                     <div>
                       <p className="text-[11px] text-gray-500 font-medium">Location</p>
                       <p className="text-[13px] font-bold text-gray-900 mt-0.5">{company?.smart_location || company?.c_location || "-"}</p>
                     </div>
                   </div>

                   <div className="flex items-start gap-4">
                     <div className="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center flex-shrink-0 text-[#ff6b00]">
                       <Phone className="w-5 h-5" />
                     </div>
                     <div>
                       <p className="text-[11px] text-gray-500 font-medium">Phone</p>
                       <p className="text-[13px] font-bold text-gray-900 mt-0.5">{company?.c_phone || "-"}</p>
                     </div>
                   </div>

                   <div className="flex items-start gap-4">
                     <div className="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center flex-shrink-0 text-[#ff6b00]">
                       <Mail className="w-5 h-5" />
                     </div>
                     <div>
                       <p className="text-[11px] text-gray-500 font-medium">Email</p>
                       <p className="text-[13px] font-bold text-gray-900 mt-0.5 break-all">{company?.c_email || "-"}</p>
                     </div>
                   </div>

                   <div className="flex items-start gap-4">
                     <div className="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center flex-shrink-0 text-[#ff6b00]">
                       <Building2 className="w-5 h-5" />
                     </div>
                     <div>
                       <p className="text-[11px] text-gray-500 font-medium">Organization Type</p>
                       <p className="text-[13px] font-bold text-gray-900 mt-0.5">{company?.organization_type_name || "-"}</p>
                     </div>
                   </div>

                   <div className="flex items-start gap-4">
                     <div className="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center flex-shrink-0 text-[#ff6b00]">
                       <Calendar className="w-5 h-5" />
                     </div>
                     <div>
                       <p className="text-[11px] text-gray-500 font-medium">Founded Year</p>
                       <p className="text-[13px] font-bold text-gray-900 mt-0.5">{company?.c_founded_at ? new Date(company.c_founded_at).getFullYear() : "-"}</p>
                     </div>
                   </div>

                   <div className="flex items-start gap-4">
                     <div className="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center flex-shrink-0 text-[#ff6b00]">
                       <Globe className="w-5 h-5" />
                     </div>
                     <div>
                       <p className="text-[11px] text-gray-500 font-medium">Website</p>
                       {company?.c_website ? (
                         <a href={company.c_website.startsWith('http') ? company.c_website : `https://${company.c_website}`} target="_blank" rel="noopener noreferrer" className="text-[13px] font-bold text-[#ff6b00] hover:underline mt-0.5 block break-all">
                           {company.c_website}
                         </a>
                       ) : (
                         <p className="text-[13px] font-bold text-gray-900 mt-0.5">-</p>
                       )}
                     </div>
                   </div>
                   
                </div>
              </div>

              {/* Share This Profile */}
              <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
                 <h2 className="text-[15px] font-bold text-gray-900 mb-4">Share This Profile:</h2>
                 <div className="flex items-center gap-3">
                   <button className="hover:opacity-80 transition-opacity"><LinkedInIcon /></button>
                   <button className="hover:opacity-80 transition-opacity"><XIcon /></button>
                   <button className="hover:opacity-80 transition-opacity"><FacebookIcon /></button>
                 </div>
              </div>

           </div>

           {/* RIGHT COLUMN: Sidebar */}
           <div className="lg:col-span-4 flex flex-col gap-6">
              
              {/* Featured Companies */}
              <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
                <h2 className="text-[15px] font-bold text-gray-900 mb-6">Featured Companies</h2>
                <div className="grid grid-cols-3 gap-y-6 gap-x-2">
                   {featuredCompanies.map((fc: any) => (
                      <Link href={`/companies/${fc.id}`} key={fc.id} className="flex flex-col items-center gap-2 group cursor-pointer">
                        <div className="w-12 h-12 bg-white rounded-full border border-gray-100 flex items-center justify-center overflow-hidden p-1 shadow-sm group-hover:border-[#ff6b00] group-hover:shadow-md transition-all">
                          {fc.logo ? (
                            <img src={`${process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:4001'}/${fc.logo}`} alt={fc.name} className="w-full h-full object-contain rounded-full" onError={(e) => { e.currentTarget.src = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(fc.name) + '&background=random' }} />
                          ) : (
                            <div className="w-full h-full bg-gray-100 rounded-full flex items-center justify-center font-bold text-gray-700">
                              {fc.name.charAt(0).toUpperCase()}
                            </div>
                          )}
                        </div>
                        <span className="text-[9px] text-gray-500 font-medium text-center line-clamp-2 leading-tight group-hover:text-[#ff6b00] transition-colors" title={fc.name}>{fc.name}</span>
                      </Link>
                    ))}
                    {featuredCompanies.length === 0 && (
                      <div className="col-span-3 text-center text-xs text-gray-400 py-4">No featured companies</div>
                    )}
                </div>
              </div>

              {/* Promo App Card */}
              <div className="h-[340px]">
                <DownloadAppCard />
              </div>

           </div>

        </div>
        ) : (
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
           
           {/* LEFT COLUMN: Filters */}
           <div className="lg:col-span-3">
              <div className="bg-white border border-gray-200 rounded-xl p-5">
                 <div className="flex items-center justify-between mb-6">
                   <div className="flex items-center gap-2 text-gray-900 font-bold text-sm">
                     <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
                     Filters (0)
                   </div>
                   <button className="text-[11px] font-bold text-[#ff6b00] hover:underline">Clear All</button>
                 </div>

                 {/* Date posted */}
                 <div className="mb-5">
                   <div className="flex items-center justify-between mb-3"><h3 className="font-bold text-gray-900 text-[13px]">Date posted</h3><ChevronDown className="w-3.5 h-3.5 text-gray-500" /></div>
                   <div className="flex flex-col gap-2 text-[12px] text-gray-600">
                     <label className="flex items-center gap-2 cursor-pointer"><input type="radio" name="date" defaultChecked className="w-3.5 h-3.5 accent-[#ff6b00]" /><span className="font-semibold text-gray-800">All</span></label>
                     <label className="flex items-center gap-2 cursor-pointer"><input type="radio" name="date" className="w-3.5 h-3.5 accent-[#ff6b00]" /><span>Last 24 hours</span></label>
                     <label className="flex items-center gap-2 cursor-pointer"><input type="radio" name="date" className="w-3.5 h-3.5 accent-[#ff6b00]" /><span>Last 3 days</span></label>
                     <label className="flex items-center gap-2 cursor-pointer"><input type="radio" name="date" className="w-3.5 h-3.5 accent-[#ff6b00]" /><span>Last 7 days</span></label>
                   </div>
                 </div>

                 {/* Experience */}
                 <div className="mb-5">
                   <div className="flex items-center justify-between mb-1"><h3 className="font-bold text-gray-900 text-[13px]">Experience</h3><ChevronDown className="w-3.5 h-3.5 text-gray-500" /></div>
                   <p className="text-[10px] text-gray-400 mb-3">Your work experience</p>
                   <input type="range" className="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-[#ff6b00]" />
                   <div className="flex justify-between text-[9px] text-gray-400 mt-1"><span>0 yr</span><span>10 yrs</span></div>
                 </div>

                 {/* Work mode */}
                 <div className="mb-5">
                   <div className="flex items-center justify-between mb-3"><h3 className="font-bold text-gray-900 text-[13px]">Work mode</h3><ChevronDown className="w-3.5 h-3.5 text-gray-500" /></div>
                   <div className="flex flex-col gap-2 text-[12px] text-gray-600">
                     <label className="flex items-center gap-2 cursor-pointer"><input type="checkbox" className="w-3.5 h-3.5 rounded accent-[#ff6b00]" /><span>Work from home</span></label>
                     <label className="flex items-center gap-2 cursor-pointer"><input type="checkbox" className="w-3.5 h-3.5 rounded accent-[#ff6b00]" /><span>Work from office</span></label>
                     <label className="flex items-center gap-2 cursor-pointer"><input type="checkbox" className="w-3.5 h-3.5 rounded accent-[#ff6b00]" /><span>Work from field</span></label>
                   </div>
                 </div>
                 
                 {/* Work type */}
                 <div className="mb-5">
                   <div className="flex items-center justify-between mb-3"><h3 className="font-bold text-gray-900 text-[13px]">Work type</h3><ChevronDown className="w-3.5 h-3.5 text-gray-500" /></div>
                   <div className="flex flex-col gap-2 text-[12px] text-gray-600">
                     <label className="flex items-center gap-2 cursor-pointer"><input type="checkbox" className="w-3.5 h-3.5 rounded accent-[#ff6b00]" /><span>Full time</span></label>
                     <label className="flex items-center gap-2 cursor-pointer"><input type="checkbox" className="w-3.5 h-3.5 rounded accent-[#ff6b00]" /><span>Part time</span></label>
                   </div>
                 </div>

                 {/* Salary */}
                 <div className="mb-5">
                   <div className="flex items-center justify-between mb-1"><h3 className="font-bold text-gray-900 text-[13px]">Salary</h3><ChevronDown className="w-3.5 h-3.5 text-gray-500" /></div>
                   <p className="text-[10px] text-gray-400 mb-3">Minimum monthly salary</p>
                   <input type="range" className="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-[#ff6b00]" />
                   <div className="flex justify-between text-[9px] text-gray-400 mt-1"><span>0</span><span>4 Lakhs</span></div>
                 </div>

                 <button className="text-[11px] font-bold text-[#ff6b00] hover:underline w-full text-left">View More</button>
              </div>
           </div>

           {/* MIDDLE COLUMN: Job List */}
           <div className="lg:col-span-6 flex flex-col gap-4">
              <h2 className="text-[16px] font-bold text-gray-900 mb-2">{openJobs.length} Open Positions</h2>
              
              {openJobs.length === 0 ? (
                <div className="bg-white border border-gray-200 rounded-xl p-8 text-center text-gray-500 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
                  No open jobs at the moment.
                </div>
              ) : (
                openJobs.map((job: any) => (
                <Link href={`/job/${job.job_id}`} key={job.job_id} className="bg-white border border-gray-200 rounded-xl p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] flex flex-col gap-5 hover:border-[#ff6b00] hover:shadow-md transition-all group block">
                   <div className="flex justify-between items-start">
                      <div className="flex items-center gap-4">
                         <div className="w-12 h-12 flex-shrink-0 bg-gray-50 rounded-lg flex items-center justify-center overflow-hidden border border-gray-100 p-1">
                            {company?.c_logo ? (
                              <img src={`${process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:4001'}/${company.c_logo}`} alt={company.c_name} className="w-full h-full object-contain" />
                            ) : (
                              <Building2 className="w-6 h-6 text-gray-400" />
                            )}
                         </div>
                         <div>
                            <h3 className="text-[17px] font-bold text-gray-900 group-hover:text-[#ff6b00] transition-colors line-clamp-1">{job.job_title}</h3>
                            <p className="text-[13px] text-gray-500 mt-0.5">{company?.c_name}</p>
                         </div>
                      </div>
                      <button className="text-gray-400 hover:text-gray-900 transition-colors p-1 relative z-10" onClick={(e) => e.preventDefault()}>
                         <Bookmark className="w-5 h-5" />
                      </button>
                   </div>
                   
                   <div className="flex items-center justify-between">
                      <div className="flex items-center gap-4 text-[11px] text-gray-500 font-medium">
                         <div className="flex items-center gap-1.5"><MapPin className="w-3.5 h-3.5" /> {job.city_name || 'Location N/A'}</div>
                         <div className="text-gray-300">|</div>
                         <div className="flex items-center gap-1.5"><Clock className="w-3.5 h-3.5" /> {job.job_type_name || 'Full Time'}</div>
                      </div>
                      <div className="text-[13px] font-bold text-gray-800">
                         {job.job_salary_min && job.job_salary_max ? `₹${job.job_salary_min.toLocaleString()} - ₹${job.job_salary_max.toLocaleString()}` : 'Not disclosed'}
                      </div>
                   </div>

                   <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2 text-[11px] text-gray-500">
                         <MapPin className="w-3 h-3" />
                         {[job.city_name, job.state_name, job.country_name].filter(Boolean).join(', ')}
                      </div>
                      <div className="flex items-center gap-1.5 text-[11px] text-gray-400 font-medium">
                         <Clock className="w-3 h-3" />
                         {new Date(job.job_created_at).toLocaleDateString()}
                      </div>
                   </div>
                </Link>
                ))
              )}

              {/* Pagination */}
              <div className="flex items-center justify-center gap-2 mt-6 mb-8 text-[12px] font-medium text-gray-500">
                 <button className="px-2 hover:text-gray-900">Prev</button>
                 <button className="w-7 h-7 flex items-center justify-center rounded border border-[#ff6b00] text-[#ff6b00]">1</button>
                 <button className="w-7 h-7 flex items-center justify-center rounded border border-transparent hover:bg-gray-50 text-gray-600">2</button>
                 <button className="w-7 h-7 flex items-center justify-center rounded border border-transparent hover:bg-gray-50 text-gray-600">3</button>
                 <button className="px-2 hover:text-gray-900 text-black">Next</button>
              </div>
           </div>

           {/* RIGHT COLUMN: Sidebar (Featured/Promo) */}
           <div className="lg:col-span-3 flex flex-col gap-6">
              
              <div className="bg-white border border-gray-200 rounded-xl p-5 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
                 <h2 className="text-[13px] font-bold text-gray-900 mb-5">Featured Companies</h2>
                 <div className="grid grid-cols-2 gap-y-5 gap-x-2">
                    {featuredCompanies.map((fc: any) => (
                      <Link href={`/companies/${fc.id}`} key={fc.id} className="flex flex-col items-center gap-1.5 cursor-pointer group">
                        <div className="w-10 h-10 bg-white rounded-full border border-gray-100 flex items-center justify-center overflow-hidden p-1 shadow-sm group-hover:border-[#ff6b00] group-hover:shadow-md transition-all">
                          {fc.logo ? (
                            <img src={`${process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:4001'}/${fc.logo}`} alt={fc.name} className="w-full h-full object-contain rounded-full" onError={(e) => { e.currentTarget.src = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(fc.name) + '&background=random' }} />
                          ) : (
                            <div className="w-full h-full bg-gray-100 rounded-full flex items-center justify-center font-bold text-gray-700">
                              {fc.name.charAt(0).toUpperCase()}
                            </div>
                          )}
                        </div>
                        <span className="text-[8px] text-gray-500 font-semibold text-center leading-tight group-hover:text-[#ff6b00] transition-colors line-clamp-2" title={fc.name}>{fc.name}</span>
                      </Link>
                    ))}
                    {featuredCompanies.length === 0 && (
                      <div className="col-span-2 text-center text-xs text-gray-400 py-4">No featured companies</div>
                    )}
                 </div>
               </div>

              <div className="h-[300px]">
                <DownloadAppCard />
              </div>
           </div>

        </div>
        )}
      </div>
      
      {/* Directory Links Footer Section */}
      <div className="bg-white border-t border-gray-100">
        <DirectoryLinks />
      </div>

    </div>
  );
}