'use client';

import Link from 'next/link';

import styles from './CTA.module.css';

export default function CTA() {
    return (
        <section className={styles.ctaSection}>
            <div className={styles.gridBackground}></div>

            {/* Floating Icons */}
            <div className={styles.floatingIconsContainer}>
                {/* Top Left */}
                <div className={`${styles.floatIcon} ${styles.icon1}`}>
                    <span>📣</span>
                </div>
                <div className={`${styles.floatIcon} ${styles.icon2}`}>
                    <span>▶️</span>
                </div>

                {/* Top/Mid */}
                <div className={`${styles.floatIcon} ${styles.icon3}`}>
                    <span>𝕏</span>
                </div>
                <div className={`${styles.floatIcon} ${styles.icon4}`}>
                    <span>🦋</span> {/* Bluesky/Twitter-like */}
                </div>

                {/* Left/Right Scatter */}
                <div className={`${styles.floatIcon} ${styles.icon5}`}>
                    <span>💼</span>
                </div>
                <div className={`${styles.floatIcon} ${styles.icon6}`}>
                    <span>📌</span>
                </div>

                {/* Bottom Scatter */}
                <div className={`${styles.floatIcon} ${styles.icon7}`}>
                    <span>❤️</span>
                </div>
                <div className={`${styles.floatIcon} ${styles.icon8}`}>
                    <span>🌀</span>
                </div>
            </div>

            <div className={styles.contentContainer}>
                <h2 className={styles.title}>
                    One Place to Manage Your  <br /> Social Presence
                </h2>
                <p className={styles.subtitle}>
                   Publish clearly. Stay organized. Scale.
                </p>

                <Link href="https://app.socialbuddy.co/signup" className={styles.standaloneBtn}>
                    Get started for free <span className={styles.arrow}>→</span>
                </Link>
            </div>
        </section>
    );
}