import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import { ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

export default function Staffing() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <Navigation />
      <section className="pt-32 pb-20 px-4 md:px-8 bg-cover bg-center" style={{ backgroundImage: 'url(/images/slide2.png)' }}>
        <div className="bg-black/50 backdrop-blur-sm h-full w-full py-20">
          <div className="container max-w-4xl mx-auto text-center space-y-6">
            <h1 className="text-4xl md:text-6xl font-bold text-white">Staffing & Talent</h1>
            <p className="text-lg md:text-xl text-white/80 max-w-3xl mx-auto">
              Build high‑performing teams with our recruitment and talent management solutions.
            </p>
            <Button
              onClick={() => document.getElementById('content')?.scrollIntoView({ behavior: 'smooth' })}
              className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 inline-flex items-center gap-2"
            >
              Learn More
              <ArrowRight size={20} />
            </Button>
          </div>
        </div>
      </section>
      <section id="content" className="py-20 px-4 md:px-8">
        <div className="container max-w-5xl mx-auto space-y-8">
          <h2 className="text-3xl md:text-4xl font-bold">Our Approach</h2>
          <p className="text-muted-foreground">
            Our staffing services focus on sourcing top talent, streamlining onboarding and fostering employee engagement. We partner with you to understand your organisational culture and hiring needs, delivering candidates who not only fit the role but also align with your values.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">Talent Acquisition</h3>
              <p className="text-muted-foreground">
                Utilising robust screening and assessment, we identify professionals who bring the right skills and attitude.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">Workforce Planning</h3>
              <p className="text-muted-foreground">
                We help forecast workforce needs and build pipelines of talent to support your growth strategy.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">HR Consulting</h3>
              <p className="text-muted-foreground">
                Our experts advise on best practices for retention, performance management and HR compliance.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-foreground">Training & Development</h3>
              <p className="text-muted-foreground">
                We offer learning programmes that upskill your workforce and nurture future leaders.
              </p>
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}