"use client";

import { useState } from "react";
import Link from "next/link";
import ContactPopup from "./ContactPopup";
import ConsenHead from "@/src/ConsenHead";

const WhoCanBenifit = () => {
    const [showPopup, setShowPopup] = useState(false);

    const benefits = [
        {
            icon: "fas fa-rocket",
            title: "Startups",
            desc: "Turn your vision into a scalable mobile product."
        },
        {
            icon: "fas fa-chart-line",
            title: "Enterprises",
            desc: "Streamline operations with high-performance apps."
        },
        {
            icon: "fas fa-lightbulb",
            title: "Entrepreneurs",
            desc: "Bring your innovative ideas to the hands of millions."
        },
        {
            icon: "fas fa-store",
            title: "Small Businesses",
            desc: "Engage customers and boost loyalty with direct access."
        }
    ];

    return (
        <>
            <style jsx>{`
                .benefit-section {
                    padding: 80px 0;
                    background-color: #f7fbff;
                }
                .benefit-dark-card {
                    background: linear-gradient(135deg, #0a1c36 0%, #1d4d7c 100%);
                    padding: 50px;
                    border-radius: 30px;
                    color: #fff;
                    box-shadow: 0 20px 50px rgba(10, 28, 54, 0.2);
                    height: 100%;
                }
                .benefit-list-item {
                    background: rgba(255, 255, 255, 0.05);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    padding: 20px 25px;
                    border-radius: 15px;
                    margin-bottom: 20px;
                    transition: all 0.4s ease;
                    display: flex;
                    align-items: center;
                }
                .benefit-list-item:hover {
                    background: rgba(255, 255, 255, 0.12);
                    transform: translateX(15px);
                    border-color: #3779b9;
                    box-shadow: 0 10px 30px rgba(55, 121, 185, 0.2);
                }
                .benefit-icon {
                    width: 50px;
                    height: 50px;
                    background: rgba(55, 121, 185, 0.15);
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #3779b9;
                    font-size: 22px;
                    margin-right: 20px;
                    transition: all 0.3s ease;
                }
                .benefit-list-item:hover .benefit-icon {
                    background: #3779b9;
                    color: #fff;
                    transform: rotate(10deg);
                }
                .benefit-text h4 {
                    font-size: 19px;
                    font-weight: 700;
                    margin-bottom: 5px;
                    color: #fff;
                }
                .benefit-text p {
                    font-size: 14px;
                    color: rgba(255, 255, 255, 0.7);
                    margin: 0;
                }
                .benefit-image-box {
                    border-radius: 30px;
                    overflow: hidden;
                    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
                    height: 100%;
                }
                .benefit-image-box img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .benefit-btn {
                    background: #3779b9;
                    color: #fff;
                    padding: 16px 35px;
                    border-radius: 50px;
                    font-size: 16px;
                    font-weight: 700;
                    border: none;
                    transition: all 0.3s ease;
                    display: inline-flex;
                    align-items: center;
                    margin-top: 20px;
                }
                .benefit-btn:hover {
                    background: #fff;
                    color: #3779b9;
                    transform: translateY(-5px);
                    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
                }
            `}</style>

            <div className="benefit-section">
                <div className="container">
                    <div className="row justify-content-center text-center mb-60">
                        <div className="col-lg-12">
                            <div className="consen-section-title">
                                <h2 style={{ fontSize: '38px', fontWeight: 800 }}>Is This Service <span>Right for You?</span></h2>
                                <p className="mt-3" style={{ color: '#666', fontSize: '17px' }}>We empower diverse clients to succeed in the mobile-first world.</p>
                            </div>
                        </div>
                    </div>

                    <div className="row align-items-stretch">
                        <div className="col-lg-6">
                            <div className="benefit-dark-card wow fadeInLeft">
                                <div className="benefit-list">
                                    {benefits.map((item, index) => (
                                        <div key={index} className="benefit-list-item">
                                            <div className="benefit-icon">
                                                <i className={item.icon}></i>
                                            </div>
                                            <div className="benefit-text">
                                                <h4>{item.title}</h4>
                                                <p>{item.desc}</p>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                                <button
                                    className="benefit-btn"
                                    onClick={() => setShowPopup(true)}
                                >
                                    Check If We Are a Good Fit <i className="fas fa-arrow-right ms-3"></i>
                                </button>
                            </div>
                        </div>

                        <div className="col-lg-6">
                            <div className="benefit-image-box wow fadeInRight image-section">
                                <img
                                    src="/assets/images/Mobile-app-development-service/wireframing.webp"
                                    alt="Benefits of App Development"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
        </>
    );
};

export default WhoCanBenifit;