import Link from 'next/link';
import styles from './CTA.module.css';

export default function CTA() {
    return (
        <section className={styles.ctaSection}>
            <div className="container">
                <div className={styles.ctaCard}>
                    <div className={styles.background}>
                        <div className={styles.circle1}></div>
                        <div className={styles.circle2}></div>
                        <div className={styles.circle3}></div>
                    </div>

                    <div className={styles.content}>
                        <div className={styles.badge}>
                            <span>🚀</span>
                            <span>Get Started Today</span>
                        </div>

                        <h2 className={styles.title}>
                            Ready to Transform Your <span className={styles.highlight}>Social Media</span> Strategy?
                        </h2>

                        <p className={styles.subtitle}>
                            Join thousands of businesses and creators who are already using SocialBuddy to grow their online presence.
                            Start your free trial today—no credit card required.
                        </p>

                        <div className={styles.features}>
                            <div className={styles.feature}>
                                <span className={styles.checkIcon}>✓</span>
                                <span>14-day free trial</span>
                            </div>
                            <div className={styles.feature}>
                                <span className={styles.checkIcon}>✓</span>
                                <span>No credit card required</span>
                            </div>
                            <div className={styles.feature}>
                                <span className={styles.checkIcon}>✓</span>
                                <span>Cancel anytime</span>
                            </div>
                            <div className={styles.feature}>
                                <span className={styles.checkIcon}>✓</span>
                                <span>24/7 customer support</span>
                            </div>
                        </div>

                        <div className={styles.buttons}>
                            <a href="https://app.socialbuddy.co/signup" className={`btn btn-primary btn-large ${styles.primaryBtn}`}>
                                Start Free Trial
                                <span className={styles.arrow}>→</span>
                            </a>
                            <Link href="/pricing" className={`btn btn-secondary btn-large ${styles.secondaryBtn}`}>
                                View Pricing
                            </Link>
                        </div>

                        <div className={styles.trustBadges}>
                            <div className={styles.trustBadge}>
                                <span className={styles.badgeIcon}>🔒</span>
                                <span>Secure & Encrypted</span>
                            </div>
                            <div className={styles.trustBadge}>
                                <span className={styles.badgeIcon}>⭐</span>
                                <span>4.9/5 Rating</span>
                            </div>
                            <div className={styles.trustBadge}>
                                <span className={styles.badgeIcon}>👥</span>
                                <span>10,000+ Users</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}