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>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/team-meeting.png"
                                    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}> redefining the way you manage social media.</h3>
                            <p className={styles.storyText}>
                                In the heart of the digital age, SocialBuddy began with a simple idea: to bring exceptional social media management tools directly to your fingertips. With a passion for innovation and a commitment to convenience, we embarked on a mission to redefine the way you grow your online presence.
                            </p>
                            <p className={styles.storyText}>
                                From our humble beginnings to becoming a beloved tool for creators worldwide, our journey has been guided by one principle: to deliver results. With a dedication to quality insights and tech innovation, we invite you to join us on this flavorful adventure. Welcome to SocialBuddy, where every click tells a story of passion, growth, and the joy of shared success.
                            </p>
                            <button className={styles.storyBtn}>
                                Learn more about us
                            </button>
                        </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}>
                                <Users size={32} />
                            </div>
                            <h3>Experienced Professionals</h3>
                            <p>Our team consists of industry veterans with years of experience in social media strategies.</p>
                        </div>

                        {/* Card 2: Orange (Yellow/Peach in Ref) */}
                        <div className={`${styles.card} ${styles.cardOrange}`}>
                            <div className={styles.cardIconWrapper}>
                                <Award size={32} />
                            </div>
                            <h3>Satisfaction Guarantee</h3>
                            <p>We are committed to your success and offer a satisfaction guarantee on all our services.</p>
                        </div>

                        {/* Card 3: Pink (Red/Pink in Ref) */}
                        <div className={`${styles.card} ${styles.cardPink}`}>
                            <div className={styles.cardIconWrapper}>
                                <Zap size={32} />
                            </div>
                            <h3>Affordable Rates</h3>
                            <p>Get premium tools and insights at a fraction of the cost of enterprise solutions.</p>
                        </div>

                        {/* Card 4: Green */}
                        <div className={`${styles.card} ${styles.cardGreen}`}>
                            <div className={styles.cardIconWrapper}>
                                <ShieldCheck size={32} />
                            </div>
                            <h3>Reliable & Trustworthy</h3>
                            <p>Security and data privacy are our top priorities. Your account is safe with us.</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>Data Sync and Backup</h4>
                                        <p>Sync tasks and app settings like system color across multiple devices automatically.</p>
                                    </div>
                                </div>

                                <div className={styles.featureListItem}>
                                    <div className={styles.featureListIcon}>
                                        <CheckCircle2 size={24} />
                                    </div>
                                    <div className={styles.featureListText}>
                                        <h4>Task Attachments</h4>
                                        <p>Users can attach files, documents, or links to tasks, providing additional context.</p>
                                    </div>
                                </div>

                                <div className={styles.featureListItem}>
                                    <div className={styles.featureListIcon}>
                                        <CheckCircle2 size={24} />
                                    </div>
                                    <div className={styles.featureListText}>
                                        <h4>Real-time Analytics</h4>
                                        <p>Track performance metrics instantly as they happen, giving you the edge to adapt.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Right Image/Mockup */}
                        <div className={styles.featureSetImage}>
                            {/* Mockup Container */}
                            <div className={styles.mockupWrapper}>
                                <Image
                                    src="/images/about/app-dashboard.png"
                                    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? Let's Start with <br /> SocialBuddy
                                and Get <span className={styles.whiteGradientText}>Awesome Experience</span>
                            </h2>
                            <p className={styles.readyText}>
                                Define unique social tactics for your brand. Users can adjust the goals, visuals and audience details to ensure their content workflows are spot on.
                            </p>
                            <button className={styles.readyBtn}>
                                Learn More
                            </button>
                        </div>
                        <div className={styles.readyImageWrapper}>
                            <div className={styles.phoneFrame}>
                                <Image
                                    src="/device-mockup.png"
                                    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>
    );
}