import type { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import { ShieldCheck, Users, Zap, Award, CheckCircle2 } from 'lucide-react';
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() {
    return (
        <div className={styles.aboutPage}>
            {/* Hero Section */}
            <section className={styles.hero}>
                <div className="container">
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>About Us</h1>
                        <div className={styles.breadcrumb}>
                            <a href="/">Home</a> / <span className={styles.breadcrumbActive}>About</span>
                        </div>
                    </div>
                </div>
            </section>

            {/* 1. Our Story Section (Reference Image 3) */}
            <section className={styles.storySection}>
                <div className="container">
                    <div className={styles.storyGrid}>
                        {/* Left Image with Frame */}
                        <div className={styles.storyImageContainer}>
                            <div className={styles.storyFrame}></div>
                            <div className={styles.storyImageWrapper}>
                                <Image
                                    src="/images/about/our-story.webp"
                                    alt="Our Team Story"
                                    width={600}
                                    height={700}
                                    className={styles.storyImg}
                                    objectFit="cover"
                                />
                            </div>
                        </div>

                        {/* Right Content */}
                        <div className={styles.storyContent}>
                            <h2 className={styles.storyTitle}>OUR STORY</h2>
                            <h3 className={styles.storyHeading}>Bring clarity to social media chaos.</h3>
                            <p className={styles.storyText}>
                                SocialBuddy started with a simple observation: social media management had become too complicated. Between juggling multiple platforms, analyzing disconnected data, and trying to keep up with ever-changing algorithms, marketers were losing time and focus.
                            </p>
                            <p className={styles.storyText}>
                                We set out to build a solution that puts you back in control. SocialBuddy isn't just a tool; it's your command center for digital growth. By combining powerful analytics, intuitive scheduling, and seamless collaboration into one unified platform, we empower brands to stop managing chaos and start driving real results.
                            </p>
                            <Link href="/careers">
                                <button className={styles.storyBtn}>
                                    Discover Our Mission
                                </button>
                            </Link>
                        </div>
                    </div>
                </div>
            </section>

            {/* 2. Why Choose Us Section (Reference Image 1) */}
            <section className={styles.whyChooseSection}>
                <div className="container">
                    <div className={styles.whyHeader}>
                        <h2 className={styles.sectionTitle}>Why choose us?</h2>
                        <p className={styles.sectionSubtitle}>
                            We provide comprehensive solutions tailored to your unique needs, helping you achieve your goals faster.
                        </p>
                    </div>

                    <div className={styles.cardsGrid}>
                        {/* Card 1: Purple */}
                        <div className={`${styles.card} ${styles.cardPurple}`}>
                            <div className={styles.cardIconWrapper}>
                                <Image src="/images/about/marketers.png" alt="Built by Marketers" width={32} height={32} />
                            </div>
                            <h3>Built by Marketers</h3>
                            <p>We understand the daily grind. Every feature is designed to solve real workflow challenges and save you hours every week.</p>
                        </div>

                        {/* Card 2: Orange */}
                        <div className={`${styles.card} ${styles.cardOrange}`}>
                            <div className={styles.cardIconWrapper}>
                                <Image src="/images/about/success.png" alt="Data-Driven Success" width={32} height={32} />
                            </div>
                            <h3>Data-Driven Success</h3>
                            <p>Move beyond guesswork. Our advanced analytics give you the hard numbers you need to prove ROI and refine your strategy.</p>
                        </div>

                        {/* Card 3: Pink */}
                        <div className={`${styles.card} ${styles.cardPink}`}>
                            <div className={styles.cardIconWrapper}>
                                <Image src="/images/about/power.png" alt="Enterprise Power" width={32} height={32} />
                            </div>
                            <h3>Enterprise Power</h3>
                            <p>Access the same robust tools used by top global agencies, priced perfectly for growing businesses and ambitious creators.</p>
                        </div>

                        {/* Card 4: Green */}
                        <div className={`${styles.card} ${styles.cardGreen}`}>
                            <div className={styles.cardIconWrapper}>
                                <Image src="/images/about/secure.png" alt="Secure & Reliable" width={32} height={32} />
                            </div>
                            <h3>Secure & Reliable</h3>
                            <p>Your brand's safety is non-negotiable. We prioritize expert-level security and 99.9% uptime reliability.</p>
                        </div>
                    </div>
                </div>
            </section>

            {/* 3. Features Loop Section (Reference Image 2) */}
            <section className={styles.featureSetSection}>
                <div className="container">
                    <div className={styles.featureSetGrid}>
                        {/* Left Content */}
                        <div className={styles.featureSetContent}>
                            <h2 className={styles.featureSetTitle}>
                                Comprehensive <span className="gradient-text">Feature Set</span> <br />
                                of a Social Manager App
                            </h2>

                            <div className={styles.featureList}>
                                <div className={styles.featureListItem}>
                                    <div className={styles.featureListIcon}>
                                        <CheckCircle2 size={24} />
                                    </div>
                                    <div className={styles.featureListText}>
                                        <h4>Seamless Synchronization</h4>
                                        <p>Your work follows you. Switch effortlessly between desktop and mobile without missing a beat.</p>
                                    </div>
                                </div>

                                <div className={styles.featureListItem}>
                                    <div className={styles.featureListIcon}>
                                        <CheckCircle2 size={24} />
                                    </div>
                                    <div className={styles.featureListText}>
                                        <h4>Collaborative Workflows</h4>
                                        <p>Keep your team aligned. Share assets, leave notes, and approve content directly within your calendar.</p>
                                    </div>
                                </div>

                                <div className={styles.featureListItem}>
                                    <div className={styles.featureListIcon}>
                                        <CheckCircle2 size={24} />
                                    </div>
                                    <div className={styles.featureListText}>
                                        <h4>Live Performance Tracking</h4>
                                        <p>Watch your campaigns perform in real-time and pivot instantly to maximize your engagement.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Right Image/Mockup */}
                        <div className={styles.featureSetImage}>
                            {/* Mockup Container */}
                            <div className={styles.mockupWrapper}>
                                <Image
                                    src="/images/about/comprehensive.webp"
                                    alt="Feature Dashboard"
                                    width={600}
                                    height={400}
                                    className={styles.mockupImg}
                                />
                                {/* Floating Cards simulating the ref image */}
                                {/* <div className={`${styles.floatCard} ${styles.floatCard1}`}>
                                    <span>Create Task</span>
                                    <small>17 August, 2023</small>
                                </div>
                                <div className={`${styles.floatCard} ${styles.floatCard2}`}>
                                    <span>Total Working Hours</span>
                                    <strong>44:32:00</strong>
                                </div> */}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* 4. Ready CTA Section (Reference Image Bottom) */}
            <section className={styles.readySection}>
                <div className="container">
                    <div className={styles.readyCard}>
                        <div className={styles.readyContent}>
                            <h2 className={styles.readyTitle}>
                                Ready to Transform Your <br /> Social Strategy?
                            </h2>
                            <p className={styles.readyText} style={{ color: "#ffffff" }}>
                                Join thousands of brands using SocialBuddy to streamline their workflow, amplify their voice, and grow their meaningful connections.
                            </p>
                            <a
                                href="https://app.socialbuddy.co/signup"
                            >
                                <button className={styles.readyBtn}>
                                    Get Started Today
                                </button>
                            </a>
                        </div>
                        <div className={styles.readyImageWrapper}>
                            <div className={styles.phoneFrame}>
                                <Image
                                    src="/images/about/ready-img.webp"
                                    alt="SocialBuddy App"
                                    width={300}
                                    height={600}
                                    className={styles.phoneScreen}
                                    objectFit="cover"
                                />
                                {/* Floating Overlay Card inside section */}
                                {/* <div className={styles.phoneOverlayCard}>
                                    <span>Task List</span>
                                    <div className={styles.overlayItem}>✅ Social Audit</div>
                                    <div className={styles.overlayItem}>✅ Content Plan</div>
                                </div> */}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}