import FeaturedJob from "../components/FeaturedJob";
import JobFilters from "../components/JobFilters";
import JobCard from "../components/JobCard";

export default function JobsPage() {
  return (
    <div className="max-w-[1200px] mx-auto space-y-6">
      
      {/* En-tête de la page */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-2">
        <div className="flex flex-col gap-2">
          <h1 className="text-4xl font-black tracking-tight text-[#111418] dark:text-white">
            Offres pour vous
          </h1>
          <p className="text-[#617589] dark:text-gray-400 text-lg">
            Sélectionnées selon vos compétences et votre position.
          </p>
        </div>
        
        {/* Barre de recherche et Filtre (Ajouté ici pour combler le header) */}
        <div className="flex gap-2 w-full md:w-auto">
          <div className="flex bg-white dark:bg-[#1a202c] border border-[#dbe0e6] dark:border-[#2d3748] rounded-xl px-4 py-3 items-center gap-2 flex-1 md:w-64 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary transition-all shadow-sm">
            <span className="material-symbols-outlined text-gray-400">search</span>
            <input 
              className="bg-transparent border-none focus:outline-none text-sm w-full text-[#111418] dark:text-white placeholder-gray-400" 
              placeholder="Rechercher un métier..." 
              type="text" 
            />
          </div>
          <button className="flex items-center gap-2 bg-white dark:bg-[#1a202c] border-2 border-[#dbe0e6] dark:border-[#2d3748] px-4 py-3 rounded-xl font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-all shadow-sm text-[#111418] dark:text-white">
            <span className="material-symbols-outlined">tune</span>
            <span className="hidden sm:inline">Filtres</span>
          </button>
        </div>
      </div>

      {/* Barre de filtres (Chips) */}
      <JobFilters />

      {/* Carte "Perfect Match" */}
      <FeaturedJob />

      {/* Titre section grille */}
      <h2 className="text-2xl font-bold mb-6 text-[#111418] dark:text-white">
        Autres opportunités
      </h2>

      {/* Grille des offres (Data simulée) */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <JobCard 
          title="Assistant Entrepôt"
          company="LogiTrans Global"
          matchScore={88}
          matchReason="Match compétences : Port de charges & Organisation."
          tags={[]}
          image="https://lh3.googleusercontent.com/aida-public/AB6AXuD2EbpFrzha8Fpf3YuYdl1SGE6NQFX_SuOW1piDnTBx1zoagFXgIi6axr6dmeRMp7-Q_VYHZMKQCvIJ4QeHoehTXw5rxybHrVki2N-9FKaSQilhPINnbzGEiZr6eFiwQO3IJsTtOfeGvYQYwdpSfSJfRoIbwqlpVRHnznaOGSVDVt5bOSn_X7uLx1uVK3VKFIh_yjH6lE5q2xeNNXZ3dekhg9KTvsihpJLGbQbX-9xC_u0ch3bvXDQ2dkvT0WCBpd1lgBy_Y4mW"
        />
        <JobCard 
          title="Employé de Rayon (Nuit)"
          company="Super Marché Frais"
          matchScore={82}
          matchReason="Correspond à votre dispo : Horaires de nuit."
          tags={[]}
          image="https://lh3.googleusercontent.com/aida-public/AB6AXuBLcnKUzkq6qJ5Z5NDhj3SpMRHtR8wt2H3HXebyW6v-AWDD-GpUSFLulRWTsdRBGdu4sstA8Nj2ckGgslewwcMtdMEeneZcDSry2SSbiFKYR9DsYx9Qja-evnoHd1BJmHc9bDEN8Y1hL7gOBu_r9khwpoFJ7VPXjDSRdzJ-ZUGAGffVtnxyLTIlRmjjQHwVDOFl5SEHSO4pZlnMpD0WMWmOVIR_hnhla_TnKugNgVJdGV288dH2GsezqWiWMRno9IncIFdFsy7b"
        />
        <JobCard 
          title="Support Client Bilingue"
          company="CommsLink Center"
          matchScore={75}
          matchReason="Match compétences : Anglais & Français."
          tags={[]}
          image="https://lh3.googleusercontent.com/aida-public/AB6AXuBc5FVH7jpu8E0WJyMA2jC3uOuqEq2uKyTn7hs7_8Etxqbczr5yM5axgcg4aj4y3fy5tyQ3jrHpSfqpwkZ8WXrRgD4fOuh5XZzo7jI1JlTW3Na9_Ou_lBp2AOofQ8RZbH6wsFdJUzwFDXOcjpj7EsnskCyR_l-nQQ4iK5DAHWMYzGjl052g6hE5gahp5G40geRI_RapOknsEwFHouHIw3S-dISLqt5BKd8UNDnkB45-vWiLD3rEOrnjQYeNnNMhV7axE9m3Awiv"
        />
      </div>

      {/* Bouton "Voir plus" */}
      <div className="mt-12 flex justify-center pb-8">
        <button className="flex items-center gap-2 px-8 py-4 bg-white dark:bg-[#1a202c] border-2 border-[#dbe0e6] dark:border-[#2d3748] rounded-xl font-bold text-[#617589] dark:text-gray-200 hover:border-primary hover:text-primary transition-all shadow-sm">
          Voir 15 autres offres
          <span className="material-symbols-outlined">arrow_downward</span>
        </button>
      </div>

    </div>
  );
}