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.breadcrumbActive}>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="/images/careers/left.webp"
                                    alt="Team Collaboration"
                                    width={400}
                                    height={500}
                                    className={styles.gridImg}
                                />
                            </div>
                            <div className={`${styles.gridImgWrapper} ${styles.img2}`}>
                                <Image
                                    src="/images/careers/top.webp"
                                    alt="Our Workspace"
                                    width={300}
                                    height={200}
                                    className={styles.gridImg}
                                />
                            </div>
                            <div className={`${styles.gridImgWrapper} ${styles.img3}`}>
                                <Image
                                    src="/images/careers/bottom.webp"
                                    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="/images/careers/hiring.webp"
                                alt="Hiring Process"
                                width={500}
                                height={600}
                                className={styles.hiringImg}
                            />
                        </div>

                        {/* Right: Solutions List */}
                        <div className={styles.processList}>
                            <div>
                                <span className={styles.subTitle}>Our Solutions Centre</span>
                                <h2 style={{ fontSize: '2.5rem', fontWeight: 800, marginBottom: '2rem' }}>
                                    Comprehensive Platform Solutions
                                </h2>
                            </div>

                            <div className={styles.processItem}>
                                <div className={styles.processNumber}>01</div>
                                <div className={styles.processContent}>
                                    <h4>Intelligent Posting Automation</h4>
                                    <p>Schedule content using engagement-driven timing recommendations that help posts reach audiences when attention levels are highest.</p>
                                </div>
                            </div>
                            <div className={styles.processItem}>
                                <div className={styles.processNumber}>02</div>
                                <div className={styles.processContent}>
                                    <h4>Interactive Planning View</h4>
                                    <p>Map out campaigns visually with a flexible content planner that helps teams align messaging weeks or months ahead.</p>
                                </div>
                            </div>
                            <div className={styles.processItem}>
                                <div className={styles.processNumber}>03</div>
                                <div className={styles.processContent}>
                                    <h4>Performance Insights & Exports</h4>
                                    <p>Access clear performance summaries with customizable reports that help evaluate results and communicate value to stakeholders.</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>
    );
}