import type { Metadata } from 'next';
import styles from './about.module.css';

export const metadata: Metadata = {
    title: 'About Us - SocialBuddy',
    description: 'Learn about SocialBuddy\'s mission to empower businesses and creators with powerful social media management tools.',
};

export default function AboutPage() {
    const team = [
        {
            name: 'Alex Johnson',
            role: 'CEO & Founder',
            image: '👨‍💼',
            bio: '10+ years in social media marketing',
        },
        {
            name: 'Sarah Williams',
            role: 'CTO',
            image: '👩‍💻',
            bio: 'Former lead engineer at major tech companies',
        },
        {
            name: 'Michael Chen',
            role: 'Head of Product',
            image: '👨‍🎨',
            bio: 'Product design expert with a passion for UX',
        },
        {
            name: 'Emily Rodriguez',
            role: 'Head of Customer Success',
            image: '👩‍💼',
            bio: 'Dedicated to making customers successful',
        },
    ];

    const values = [
        {
            icon: '🎯',
            title: 'Customer First',
            description: 'Everything we do is centered around making our customers successful.',
        },
        {
            icon: '🚀',
            title: 'Innovation',
            description: 'We constantly push boundaries to deliver cutting-edge solutions.',
        },
        {
            icon: '🤝',
            title: 'Collaboration',
            description: 'We believe in the power of teamwork and community.',
        },
        {
            icon: '💡',
            title: 'Simplicity',
            description: 'Complex problems deserve simple, elegant solutions.',
        },
    ];

    const milestones = [
        { year: '2020', event: 'SocialBuddy founded', icon: '🎉' },
        { year: '2021', event: '1,000 users milestone', icon: '🎯' },
        { year: '2022', event: 'Series A funding', icon: '💰' },
        { year: '2023', event: '10,000+ active users', icon: '🚀' },
        { year: '2024', event: 'AI features launched', icon: '🤖' },
        { year: '2025', event: 'Global expansion', icon: '🌍' },
    ];

    return (
        <div className={styles.aboutPage}>
            {/* Hero Section */}
            <section className={styles.hero}>
                <div className="container">
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>
                            About <span className="gradient-text">SocialBuddy</span>
                        </h1>
                        <p className={styles.heroSubtitle}>
                            We're on a mission to empower businesses and creators to build meaningful connections
                            through social media—without the complexity.
                        </p>
                    </div>
                </div>
            </section>

            {/* Story Section */}
            <section className="section">
                <div className="container">
                    <div className={styles.storyGrid}>
                        <div className={styles.storyImage}>
                            <div className={styles.imagePlaceholder}>
                                <span className={styles.placeholderIcon}>📖</span>
                            </div>
                        </div>
                        <div className={styles.storyContent}>
                            <h2 className={styles.sectionTitle}>Our Story</h2>
                            <p className={styles.storyText}>
                                SocialBuddy was born out of frustration. Our founders spent years managing social media
                                for multiple businesses and experienced firsthand the chaos of juggling multiple platforms,
                                tools, and spreadsheets.
                            </p>
                            <p className={styles.storyText}>
                                We knew there had to be a better way. So in 2020, we set out to build the social media
                                management platform we wished existed—one that's powerful yet simple, comprehensive yet
                                intuitive, and accessible to businesses of all sizes.
                            </p>
                            <p className={styles.storyText}>
                                Today, SocialBuddy serves over 10,000 businesses and creators worldwide, helping them
                                save time, increase engagement, and grow their online presence.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {/* Values Section */}
            <section className={`section ${styles.valuesSection}`}>
                <div className="container">
                    <div className={styles.sectionHeader}>
                        <h2 className={styles.sectionTitle}>Our Values</h2>
                        <p className={styles.sectionSubtitle}>
                            The principles that guide everything we do
                        </p>
                    </div>
                    <div className={styles.valuesGrid}>
                        {values.map((value, index) => (
                            <div key={index} className={styles.valueCard}>
                                <div className={styles.valueIcon}>{value.icon}</div>
                                <h3 className={styles.valueTitle}>{value.title}</h3>
                                <p className={styles.valueDescription}>{value.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Timeline Section */}
            <section className="section">
                <div className="container">
                    <div className={styles.sectionHeader}>
                        <h2 className={styles.sectionTitle}>Our Journey</h2>
                        <p className={styles.sectionSubtitle}>
                            Key milestones in our growth story
                        </p>
                    </div>
                    <div className={styles.timeline}>
                        {milestones.map((milestone, index) => (
                            <div key={index} className={styles.timelineItem}>
                                <div className={styles.timelineIcon}>{milestone.icon}</div>
                                <div className={styles.timelineContent}>
                                    <div className={styles.timelineYear}>{milestone.year}</div>
                                    <div className={styles.timelineEvent}>{milestone.event}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Team Section */}
            <section className={`section ${styles.teamSection}`}>
                <div className="container">
                    <div className={styles.sectionHeader}>
                        <h2 className={styles.sectionTitle}>Meet Our Team</h2>
                        <p className={styles.sectionSubtitle}>
                            The passionate people behind SocialBuddy
                        </p>
                    </div>
                    <div className={styles.teamGrid}>
                        {team.map((member, index) => (
                            <div key={index} className={styles.teamCard}>
                                <div className={styles.memberImage}>{member.image}</div>
                                <h3 className={styles.memberName}>{member.name}</h3>
                                <div className={styles.memberRole}>{member.role}</div>
                                <p className={styles.memberBio}>{member.bio}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className={styles.ctaSection}>
                <div className="container">
                    <div className={styles.ctaContent}>
                        <h2 className={styles.ctaTitle}>Join Us on Our Journey</h2>
                        <p className={styles.ctaSubtitle}>
                            Be part of the future of social media management
                        </p>
                        <div className={styles.ctaButtons}>
                            <a href="https://app.socialbuddy.co/signup" className="btn btn-primary btn-large">
                                Start Free Trial
                            </a>
                            <a href="/contact" className="btn btn-secondary btn-large">
                                Contact Us
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}