import * as React from 'react';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import {
Calendar,
CheckCircle2,
FileText,
MessageSquare,
Users,
VideoIcon,
} from 'lucide-react';
interface InterviewStep {
id: number;
title: string;
description: string;
icon: React.ReactNode;
duration: string;
tips: string[];
}
export default function InterviewProcess() {
const steps: InterviewStep[] = [
{
id: 1,
title: 'Application Review',
description:
'Our recruiting team reviews your resume, portfolio, and cover letter to assess your qualifications and experience.',
icon: <FileText className="h-6 w-6" />,
duration: '1-2 weeks',
tips: [
'Tailor your resume to highlight relevant experience',
'Include a link to your portfolio if applicable',
'Demonstrate how your skills align with the job requirements',
],
},
{
id: 2,
title: 'Initial Screening',
description:
'A 30-minute call with a recruiter to discuss your background, assess basic qualifications, and answer any questions about the role.',
icon: <MessageSquare className="h-6 w-6" />,
duration: '30 minutes',
tips: [
'Research our company before the call',
'Prepare questions about the role and company culture',
'Be ready to explain your interest in the position',
],
},
{
id: 3,
title: 'Technical Assessment',
description:
'Complete a take-home assignment or online assessment to demonstrate your technical skills relevant to the position.',
icon: <CheckCircle2 className="h-6 w-6" />,
duration: '3-5 days',
tips: [
'Read all instructions carefully before starting',
'Focus on quality over complexity',
'Document your thought process and decisions',
],
},
{
id: 4,
title: 'Team Interview',
description:
'A virtual panel interview with potential teammates and your direct manager to assess cultural fit and technical expertise.',
icon: <VideoIcon className="h-6 w-6" />,
duration: '1-2 hours',
tips: [
'Test your video and audio setup beforehand',
'Prepare specific examples of past work and challenges',
"Ask thoughtful questions about the team's workflow and challenges",
],
},
{
id: 5,
title: 'Final Round',
description:
'Meet with senior leadership to discuss your long-term career goals and how you can contribute to our company vision.',
icon: <Users className="h-6 w-6" />,
duration: '1 hour',
tips: [
'Reflect on how your values align with our company mission',
'Be prepared to discuss your career aspirations',
"Consider how you'd contribute beyond your immediate role",
],
},
{
id: 6,
title: 'Offer & Onboarding',
description:
"If successful, we'll extend an offer and begin the onboarding process to welcome you to the team.",
icon: <Calendar className="h-6 w-6" />,
duration: '1-2 weeks',
tips: [
'Review the offer details carefully',
"Don't hesitate to ask questions about benefits or terms",
'Prepare necessary documentation for a smooth onboarding',
],
},
];
return (
<div className="container mx-auto px-4 py-12">
<div className="mb-10 text-center">
<h2 className="mb-2 text-3xl font-bold tracking-tight">
Our Interview Process
</h2>
<p className="text-muted-foreground mx-auto max-w-2xl">
We've designed a transparent and efficient interview process to
find the best talent while giving you a clear understanding of our
company and the role.
</p>
</div>
<div className="relative">
{/* Timeline connector line */}
<div className="bg-border absolute top-0 bottom-0 left-4 w-0.5 md:left-1/2 md:-ml-0.5"></div>
{/* Steps */}
<div className="space-y-12">
{steps.map((step, index) => (
<div
key={step.id}
className={cn(
'relative flex items-start gap-6 md:gap-10',
index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'
)}
>
{/* Timeline node */}
<div className="bg-background absolute top-0 left-4 flex h-8 w-8 -translate-x-1/2 items-center justify-center rounded-full border md:left-1/2">
<span className="font-medium">{step.id}</span>
</div>
{/* Content */}
<div
className={cn(
'ml-12 w-full md:ml-0 md:w-[calc(50%-24px)]',
index % 2 === 0 ? 'md:text-right' : 'md:text-left'
)}
>
<Card>
<CardHeader>
<div
className={cn(
'flex items-center gap-3',
index % 2 === 0 ? 'md:justify-end' : ''
)}
>
<div
className={cn(
'bg-primary/10 text-primary rounded-full p-2',
index % 2 === 0 ? 'md:order-last' : ''
)}
>
{step.icon}
</div>
<div>
<CardTitle>{step.title}</CardTitle>
<CardDescription>{step.duration}</CardDescription>
</div>
</div>
</CardHeader>
<CardContent className="space-y-4">
<p>{step.description}</p>
<div>
<h4 className="font-medium">Tips for Success:</h4>
<ul
className={cn(
'text-muted-foreground mt-2 list-none space-y-1 text-sm'
)}
>
{step.tips.map((tip, i) => (
<li key={i}>{tip}</li>
))}
</ul>
</div>
</CardContent>
</Card>
</div>
</div>
))}
</div>
</div>
<div className="mt-16 flex flex-col items-center">
<h3 className="mb-4 text-xl font-semibold">Ready to Apply?</h3>
<p className="text-muted-foreground mb-6 max-w-lg text-center">
We're looking forward to learning more about you. Check out our
open positions and start your journey with us today.
</p>
<Button size="lg">View Open Positions</Button>
</div>
</div>
);
}