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 = {
    description: 'Join our team of social media experts, content creators, and strategists.',
};

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}>
                            <h2>Engineering Intelligent Automation</h2>
                            <p>
                                At SocialBuddy, we're building the future of social management. From intelligent automation rules that work 24/7 to secure encrypted login systems, we empower teams to manage multiple profiles with total confidence.
                            </p>
                            <p>
                                Join us to build unify dashboards that oversee every interaction. We value "Security," "Speed," and "Smart Engagement." If you want to create tools that help brands boost their community presence instantly, you belong here.
                            </p>
                            <Link href="/about">
                                <button className="btn btn-primary">
                                    View Open Positions
                                </button>
                            </Link>
                        </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}>Data-Driven Experts</div>
                        </div>
                        <div className={styles.statItem}>
                            <div className={styles.statIconWrapper}><Smile size={48} /></div>
                            <div className={styles.statNumber}>340</div>
                            <div className={styles.statLabel}>Campaigns Optimized</div>
                        </div>
                        <div className={styles.statItem}>
                            <div className={styles.statIconWrapper}><MapPin size={48} /></div>
                            <div className={styles.statNumber}>15</div>
                            <div className={styles.statLabel}>Industries Served</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>Share Your Expertise</h4>
                                    <p>Submit your application highlighting your experience in social strategy, content execution, or client support.</p>
                                </div>
                            </div>
                            <div className={styles.processItem}>
                                <div className={styles.processNumber}>02</div>
                                <div className={styles.processContent}>
                                    <h4>Alignment Call</h4>
                                    <p>We'll discuss how your skills align with our core values of data-led performance and efficient execution.</p>
                                </div>
                            </div>
                            <div className={styles.processItem}>
                                <div className={styles.processNumber}>03</div>
                                <div className={styles.processContent}>
                                    <h4>Join the Mission</h4>
                                    <p>Receive an offer and start helping global brands turn social activity into business wins.</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>Work on Tools That Matter</h2>
                            <p className={styles.benefitsText}>
                                We're not just a service—we're a technology company. Join our team to build Smart Replies, Comment Management systems, and Spam Control filters that keep online communities clean, active, and thriving.
                            </p>
                            <Link href="/features">
                                <button className="btn btn-primary btn-large">
                                    Explore Innovation
                                </button>
                            </Link>
                        </div>

                        {/* Right Connected Cards */}
                        <div className={styles.connectedCards}>
                            <div className={styles.connCard}>
                                <div className={styles.connIcon} style={{ color: '#ec4899', background: '#fce7f3' }}>
                                    <Zap />
                                </div>
                                <div className={styles.connContent}>
                                    <h4>Workflow Automation</h4>
                                    <p>Intelligent rules working 24/7.</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' }}>
                                    {/* Using View or Layout as placeholder for Dashboard/Login */}
                                    <Layout />
                                </div>
                                <div className={styles.connContent}>
                                    <h4 style={{ color: 'white' }}>Secure & Unified</h4>
                                    <p style={{ color: 'rgba(255,255,255,0.9)' }}>Encrypted login & single dashboard.</p>
                                </div>
                            </div>

                            <div className={styles.connCard}>
                                <div className={styles.connIcon} style={{ color: '#10b981', background: '#d1fae5' }}>
                                    <Smile />
                                </div>
                                <div className={styles.connContent}>
                                    <h4>Smart Engagement</h4>
                                    <p>Instant likes, replies, and spam control.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}