https://fazazaeat.co.uk/product/1

[fazaza2020]

import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { Briefcase, Heart, Coffee, Star, Upload, FileType, CheckCircle2 } from 'lucide-react';
import { useToast } from '@/components/ui/use-toast';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

const CareersPage = () => {
const { toast } = useToast();
const [selectedJob, setSelectedJob] = useState(null);
const [isApplyModalOpen, setIsApplyModalOpen] = useState(false);
const [file, setFile] = useState(null);
const [fileError, setFileError] = useState("");

const handleApplyClick = (job) => {
setSelectedJob(job);
setFile(null);
setFileError("");
setIsApplyModalOpen(true);
};

const handleFileChange = (e) => {
const selectedFile = e.target.files[0];
if (!selectedFile) return;

const validTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];

if (!validTypes.includes(selectedFile.type)) {
  setFileError("Invalid file type. Please upload a PDF, DOC, or DOCX file.");
  setFile(null);
} else {
  setFileError("");
  setFile(selectedFile);
}

};

const handleSubmitApplication = (e) => {
e.preventDefault();
if (!file) {
setFileError("Please upload your CV/Resume to continue.");
return;
}

// Simulate upload delay
toast({
  title: "Submitting Application",
  description: "Uploading your resume...",
});

setTimeout(() => {
  setIsApplyModalOpen(false);
  toast({
    title: "Application Successful!",
    description: `Your application for ${selectedJob?.title} has been received. We'll be in touch soon.`,
    variant: "default",
  });
}, 1500);

};

const jobs = [
{
title: "Delivery Driver",
department: "Logistics",
location: "Belfast, NI",
type: "Full-time / Part-time",
desc: "Join our fleet delivering premium meals to our customers with a smile. Flexible hours available."
},
{
title: "Customer Support Specialist",
department: "Support",
location: "Remote (UK)",
type: "Full-time",
desc: "Help our customers have the best experience possible by resolving inquiries and providing top-notch support."
},
{
title: "Marketing Coordinator",
department: "Marketing",
location: "Belfast, NI",
type: "Full-time",
desc: "Shape the voice of Fazaza Eat across social media, campaigns, and partnerships."
}
];

return (

<title>Careers | Join Our Team | Fazaza Eat</title>

  {/* Hero Section */}
  <section className="relative py-24 px-4 overflow-hidden">
    <div className="absolute inset-0 z-0">
      <img 
        src="https://images.unsplash.com/photo-1637622124152-33adfabcc923" 
        alt="Fazaza Eat Team Culture" 
        className="w-full h-full object-cover opacity-20 dark:opacity-10"
      />
      <div className="absolute inset-0 bg-gradient-to-b from-background/80 to-background"></div>
    </div>
    
    <div className="container mx-auto max-w-4xl relative z-10 text-center">
      <motion.h1 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-4xl md:text-6xl font-bold mb-6 text-foreground"
      >
        Join Our Team
      </motion.h1>
      <motion.p 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1 }}
        className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto"
      >
        Build your career with a company that values innovation, community, and great food.
      </motion.p>
    </div>
  </section>

  {/* Culture & Benefits */}
  <section className="py-20 bg-muted/20">
    <div className="container mx-auto px-4 max-w-6xl">
      <div className="text-center mb-16">
        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">Why Work With Us?</h2>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          We offer more than just a paycheck. Experience a supportive culture and excellent perks.
        </p>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
        {[
          { icon: Heart, title: "Health & Wellbeing", desc: "Comprehensive health coverage and mental wellness days." },
          { icon: Briefcase, title: "Career Growth", desc: "Continuous learning budgets and internal promotion paths." },
          { icon: Coffee, title: "Free Meals", desc: "Enjoy complimentary premium meals during your shifts." },
          { icon: Star, title: "Great Culture", desc: "Inclusive, diverse, and vibrant team environment." }
        ].map((benefit, i) => (
          <motion.div 
            key={i}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: i * 0.1 }}
            className="bg-card p-6 rounded-xl border border-border text-center hover:shadow-md transition-all"
          >
            <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-4">
              <benefit.icon size={24} />
            </div>
            <h3 className="font-bold text-lg mb-2 text-foreground">{benefit.title}</h3>
            <p className="text-sm text-muted-foreground">{benefit.desc}</p>
          </motion.div>
        ))}
      </div>
    </div>
  </section>

  {/* Open Positions */}
  <section className="py-20">
    <div className="container mx-auto px-4 max-w-5xl">
      <h2 className="text-3xl font-bold mb-10 text-foreground text-center">Open Positions</h2>
      
      <div className="space-y-6">
        {jobs.map((job, i) => (
          <motion.div 
            key={i}
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="bg-card p-6 md:p-8 rounded-xl border border-border shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-6"
          >
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-2">
                <h3 className="text-2xl font-bold text-foreground">{job.title}</h3>
                <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-bold rounded-full">
                  {job.department}
                </span>
              </div>
              <div className="text-sm text-muted-foreground mb-4 flex gap-4">
                <span>📍 {job.location}</span>
                <span>⏱️ {job.type}</span>
              </div>
              <p className="text-muted-foreground text-sm">{job.desc}</p>
            </div>
            <div className="shrink-0">
              <Button onClick={() => handleApplyClick(job)} className="bg-primary text-primary-foreground hover:bg-primary/90 w-full md:w-auto">
                Apply Now
              </Button>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  </section>

  {/* Application Dialog */}
  <Dialog open={isApplyModalOpen} onOpenChange={setIsApplyModalOpen}>
    <DialogContent className="sm:max-w-[425px]">
      <DialogHeader>
        <DialogTitle>Apply for {selectedJob?.title}</DialogTitle>
        <DialogDescription>
          Upload your CV/Resume to apply for this position. We accept PDF, DOC, and DOCX formats.
        </DialogDescription>
      </DialogHeader>
      
      <form onSubmit={handleSubmitApplication} className="space-y-6 py-4">
        <div className="space-y-4">
          <Label htmlFor="resume">CV / Resume *</Label>
          <div className={`border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center cursor-pointer transition-colors ${file ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'}`}>
            <input 
              type="file" 
              id="resume" 
              accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
              className="hidden" 
              onChange={handleFileChange}
            />
            <label htmlFor="resume" className="cursor-pointer w-full flex flex-col items-center">
              {file ? (
                <>
                  <CheckCircle2 className="h-10 w-10 text-primary mb-2" />
                  <p className="font-medium text-foreground">{file.name}</p>
                  <p className="text-xs text-muted-foreground mt-1">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
                </>
              ) : (
                <>
                  <Upload className="h-10 w-10 text-muted-foreground mb-2" />
                  <p className="font-medium text-foreground">Click to upload or drag and drop</p>
                  <p className="text-xs text-muted-foreground mt-1">PDF, DOC, DOCX (Max 5MB)</p>
                </>
              )}
            </label>
          </div>
          {fileError && <p className="text-sm text-destructive">{fileError}</p>}
        </div>

        <div className="space-y-4">
          <div className="grid gap-2">
            <Label htmlFor="fullName">Full Name</Label>
            <Input id="fullName" placeholder="John Doe" required className="bg-background text-foreground" />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="john@example.com" required className="bg-background text-foreground" />
          </div>
        </div>

        <DialogFooter>
          <Button type="button" variant="outline" onClick={() => setIsApplyModalOpen(false)}>
            Cancel
          </Button>
          <Button type="submit" disabled={!file}>
            Submit Application
          </Button>
        </DialogFooter>
      </form>
    </DialogContent>
  </Dialog>
</div>

);
};

export default CareersPage;