"use client";
import React from 'react';
import Link from 'next/link';
import GsapReveal from '@/components/common/GsapReveal';
import { pricingPlans } from '@/utils/data';

const Pricing = () => {
    return (
        <section className="pricing-section sp1 pt-0" id="pricing">
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-lg-8 text-center">
                        <div className="consen-section-title upper text-center pb-60 heading2">
                            <GsapReveal y={20}>
                                <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
                                    <span><img src="/favicon.ico" alt="" /></span>
                                    Pricing Plans
                                </h5>
                            </GsapReveal>
                            <div className="space24"></div>
                            <GsapReveal y={20} delay={0.2}>
                                <h2 className="text-anime-style-3 space-margin60">
                                    Flexible Pricing for Your <br />
                                    <span>Business Needs</span>
                                </h2>
                            </GsapReveal>
                        </div>
                    </div>
                </div>

                <div className="row g-4 justify-content-center">
                    {pricingPlans.map((plan, index) => (
                        <div key={plan.id} className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay={index * 100}>
                            <div className={`pricing-single-boxarea ${plan.isPopular ? 'box2' : ''}`} style={{
                                padding: '50px 40px',
                                borderRadius: '24px',
                                background: plan.isPopular ? '#1a1f2b' : '#fff',
                                transition: 'all 0.4s',
                                border: plan.isPopular ? 'none' : '1px solid #e3eaf4',
                                boxShadow: plan.isPopular ? '0 30px 60px rgba(0,0,0,0.15)' : 'none',
                                position: 'relative',
                                height: '100%',
                                display: 'flex',
                                flexDirection: 'column'
                            }}>
                                {plan.isPopular && (
                                    <div className="popular-badge" style={{
                                        position: 'absolute',
                                        top: '20px',
                                        right: '20px',
                                        background: '#3779b9',
                                        color: '#fff',
                                        padding: '5px 15px',
                                        borderRadius: '50px',
                                        fontSize: '12px',
                                        fontWeight: 700,
                                        textTransform: 'uppercase'
                                    }}>
                                        Popular
                                    </div>
                                )}
                                <div className="pricing-header mb-4">
                                    <h4 style={{ color: plan.isPopular ? '#fff' : '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '15px' }}>{plan.plan}</h4>
                                    <div className="price d-flex align-items-baseline">
                                        <h2 style={{ color: plan.isPopular ? '#fff' : '#1a1f2b', fontSize: '48px', fontWeight: 800, margin: 0 }}>${plan.price}</h2>
                                        <span style={{ color: plan.isPopular ? 'rgba(255,255,255,0.7)' : '#4a5568', marginLeft: '5px', fontSize: '16px' }}>/{plan.period}</span>
                                    </div>
                                </div>

                                <ul className="pricing-features list-unstyled mb-5" style={{ flexGrow: 1 }}>
                                    {plan.features.map((feature, i) => (
                                        <li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
                                            <img
                                                src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"}
                                                alt=""
                                                style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }}
                                            />
                                            {feature}
                                        </li>
                                    ))}
                                </ul>



                                <div className="pricing-btn">
                                    <Link href={plan.link} className={`vl-btn1 w-100 text-center ${plan.isPopular ? '' : 'btn-dark'}`} style={{
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        padding: '15px',
                                        borderRadius: '30px',
                                        fontWeight: 700,
                                        background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%)',
                                        backgroundSize: '200% auto',
                                        color: '#fff',
                                        transition: 'all 0.5s',
                                        textDecoration: 'none',
                                        gap: '8px'
                                    }}>
                                        Choose Plan <i className="fa-solid fa-angle-right"></i>

                                    </Link>

                                </div>

                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Pricing;