import type { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import {
    Users, Smile, MapPin, Award,
    Zap, Briefcase, Clock, Coffee, Layout, MousePointerClick, Gem
} from 'lucide-react';
import styles from './careers.module.css';

export const metadata: Metadata = {
    title: 'Careers - Join SocialBuddy',
    description: 'Join our team and help shape the future of social media management.',
};

export default function CareersPage() {
    return (
        <div className={styles.careersPage}>
            {/* Hero Section */}
            <section className={styles.hero}>
                <div className="container">
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>Careers</h1>

                        <div className={styles.breadcrumb}>
                            <Link href="/">Home</Link> <span>/</span> <span className={styles.active}>Careers</span>
                        </div>
                    </div>
                </div>
            </section>

            {/* 1. What We Offer (Left Content, Right 3 Images) */}
            <section className={styles.offerSection}>
                <div className="container">
                    <div className={styles.offerContainer}>
                        {/* Left Content */}
                        <div className={styles.offerContent}>
                            <span className={styles.subTitle}>What We Do</span>
                            <h2>We Are Building The Future of Social Media</h2>
                            <p>
                                At SocialBuddy, we don't just build tools; we build connections. Our platform empowers over 10,000 businesses to reach their potential audiences effectively.
                            </p>
                            <p>
                                We work with cutting-edge technologies like AI and Machine Learning to solve complex scale problems. If you love challenges and innovation, this is the place for you.
                            </p>
                            <button className="btn btn-primary">See Open Roles</button>
                        </div>

                        {/* Right Image Grid (3 Images) */}
                        <div className={styles.offerImageGrid}>
                            <div className={`${styles.gridImgWrapper} ${styles.img1}`}>
                                <Image
                                    src="/about-image.png"
                                    alt="Team Collaboration"
                                    width={400}
                                    height={500}
                                    className={styles.gridImg}
                                />
                            </div>
                            <div className={`${styles.gridImgWrapper} ${styles.img2}`}>
                                <Image
                                    src="/images/about/workspace.png"
                                    alt="Our Workspace"
                                    width={300}
                                    height={200}
                                    className={styles.gridImg}
                                />
                            </div>
                            <div className={`${styles.gridImgWrapper} ${styles.img3}`}>
                                <Image
                                    src="/images/about/team-meeting.png"
                                    alt="Meeting"
                                    width={300}
                                    height={200}
                                    className={styles.gridImg}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* 2. Stats Section (BG + Overlay) */}
            <section className={styles.statsSection}>
                <div className="container">
                    <div className={styles.statsGrid}>
                        <div className={styles.statItem}>
                            <div className={styles.statIconWrapper}><Users size={48} /></div>
                            <div className={styles.statNumber}>54</div>
                            <div className={styles.statLabel}>Happy Team</div>
                        </div>
                        <div className={styles.statItem}>
                            <div className={styles.statIconWrapper}><Smile size={48} /></div>
                            <div className={styles.statNumber}>340</div>
                            <div className={styles.statLabel}>Completed Projects</div>
                        </div>
                        <div className={styles.statItem}>
                            <div className={styles.statIconWrapper}><MapPin size={48} /></div>
                            <div className={styles.statNumber}>15</div>
                            <div className={styles.statLabel}>Countries</div>
                        </div>
                        <div className={styles.statItem}>
                            <div className={styles.statIconWrapper}><Award size={48} /></div>
                            <div className={styles.statNumber}>25</div>
                            <div className={styles.statLabel}>Awards Won</div>
                        </div>
                    </div>
                </div>
            </section>

            {/* 3. Hiring Process (Timeline) */}
            <section className={styles.hiringSection}>
                <div className="container">
                    <div className={styles.hiringGrid}>
                        {/* Left: Image */}
                        <div className={styles.hiringImageWrapper}>
                            <Image
                                src="/about-image-2.png"
                                alt="Hiring Process"
                                width={500}
                                height={600}
                                className={styles.hiringImg}
                            />
                        </div>

                        {/* Right: Process List */}
                        <div className={styles.processList}>
                            <div>
                                <span className={styles.subTitle}>Hiring Process</span>
                                <h2 style={{ fontSize: '2.5rem', fontWeight: 800, marginBottom: '2rem' }}>
                                    Join in 3 Simple Steps
                                </h2>
                            </div>

                            <div className={styles.processItem}>
                                <div className={styles.processNumber}>01</div>
                                <div className={styles.processContent}>
                                    <h4>Provide details</h4>
                                    <p>Submit your application with your resume and portfolio. Tell us about your journey.</p>
                                </div>
                            </div>
                            <div className={styles.processItem}>
                                <div className={styles.processNumber}>02</div>
                                <div className={styles.processContent}>
                                    <h4>Schedule Interview</h4>
                                    <p>We'll schedule a call to discuss your skills, experience, and cultural fit.</p>
                                </div>
                            </div>
                            <div className={styles.processItem}>
                                <div className={styles.processNumber}>03</div>
                                <div className={styles.processContent}>
                                    <h4>Get Hired</h4>
                                    <p>Receive an offer and join our amazing team. Welcome aboard!</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* 4. Ultimate Experience (Dotted Cards) */}
            <section className={styles.benefitsSection}>
                <div className="container">
                    <div className={styles.benefitsGrid}>
                        {/* Left Content */}
                        <div className={styles.benefitsContent}>
                            <span className={styles.subTitle}>Why Choose Us?</span>
                            <h2>Ultimate Experience for <br /> Your Career</h2>
                            <p className={styles.benefitsText}>
                                Completely empower your career journey with robust opportunities. We enable front-end and back-end developers to thrive in an environment of innovation.
                            </p>
                            <button className="btn btn-primary btn-large">Learn More +</button>
                        </div>

                        {/* Right Connected Cards */}
                        <div className={styles.connectedCards}>
                            <div className={styles.connCard}>
                                <div className={styles.connIcon} style={{ color: '#ec4899', background: '#fce7f3' }}>
                                    <Layout />
                                </div>
                                <div className={styles.connContent}>
                                    <h4>Future Technology</h4>
                                    <p>Work with the latest modern stack.</p>
                                </div>
                            </div>

                            <div className={styles.connCard} style={{ background: 'linear-gradient(135deg, #2563eb, #8b5cf6)', color: 'white' }}>
                                <div className={styles.connIcon} style={{ background: 'rgba(255,255,255,0.2)', color: 'white', borderColor: 'transparent' }}>
                                    <MousePointerClick />
                                </div>
                                <div className={styles.connContent}>
                                    <h4 style={{ color: 'white' }}>Drag & Drop Builder</h4>
                                    <p style={{ color: 'rgba(255,255,255,0.9)' }}>Intuitive tools for every task.</p>
                                </div>
                            </div>

                            <div className={styles.connCard}>
                                <div className={styles.connIcon} style={{ color: '#10b981', background: '#d1fae5' }}>
                                    <Gem />
                                </div>
                                <div className={styles.connContent}>
                                    <h4>Most Eco Friendly</h4>
                                    <p>Sustainable practices at core.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}