"use client";

import { useState } from "react";
import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup';

const floatingItems = [
    {
        className: "item-1",
        icon: "/assets/img-app/home/section1/user.webp",
        title: "User-Centered UI/UX Design",
        desc: "Intuitive User Experience",
    },
    {
        className: "item-2",
        icon: "/assets/img-app/home/section1/custom.webp",
        title: "Custom App Development",
        desc: "Tailored App Solutions",
    },
    {
        className: "item-3",
        icon: "/assets/img-app/home/section1/end.webp",
        title: "End-to-End Project Management",
        desc: "Complete Project Execution",
    },
    {
        className: "item-4",
        icon: "/assets/img-app/home/section1/platform.webp",
        title: "Cross-Platform & Native Apps",
        desc: "Multi-Platform Development",
    },
];

const BannerBottom = () => {
    const [isContactOpen, setIsContactOpen] = useState(false);

    return (
        <section className="bannerbottom-section website-service-strip">
            <div className="container">
                <div className="bottom-info-strip">
                    <div className="row align-items-center g-4">

                        {/* Left Column */}
                        <div className="col-lg-3 col-md-12">
                            <div className="info-column-left">
                                <h5 className="script-font">We Build Powerful Mobile Apps</h5>
                                <h4 className="title-font">End-to-End App Development Services</h4>
                                <p className="desc-font">
                                    We create high-performance mobile applications tailored to your business goals and user needs. From in-depth research and wireframing to intuitive UI/UX design, development, API integration, testing, and launch — we manage the complete lifecycle.
                                </p>
                                <p className="desc-font">
                                    Our apps are built for speed, security, scalability, and seamless performance across devices. Whether it’s Android, iOS, or cross-platform, we ensure your product is future-ready and built to grow with your business.</p>
                            </div>
                        </div>

                        {/* Center Column - Illustration with Floating Icons */}
                        <div className="col-lg-6 col-md-12 text-center">
                            <div className="central-illustration-wrap position-relative">
                                <div className="floating-items-container">
                                    {floatingItems.map((item, idx) => (
                                        <div key={item.className} className={`floating-item ${item.className}`}>
                                            <div className={`floating-circle ${idx % 2 === 0 ? 'floating-slow' : 'floating-fast'}`}>
                                                <img loading="lazy" src={item.icon} alt={item.title} />
                                            </div>
                                            <div className="floating-content">
                                                <h6>{item.title}</h6>
                                                <p>{item.desc}</p>
                                            </div>
                                        </div>
                                    ))}
                                </div>

                                {/* Central hero image */}
                                <img
                                    loading="lazy"
                                    src="/assets/img-app/home/section1/second-section-centre-img.webp"
                                    alt="Digital Solutions Illustration"
                                    className="main-delivery-img img-fluid mt-2"
                                />
                            </div>
                        </div>

                        {/* Right Column */}
                        <div className="col-lg-3 col-md-12">
                            <div className="info-column-right text-md-end text-center">
                                <h4 className="title-font">Secure, High-Performance & Future-Ready Apps</h4>
                                <p className="desc-font mt-2">
                                    Our mobile apps are optimized for speed, security, and scalability. We use modern development frameworks and strong backend architecture to ensure smooth functionality, data protection, and long-term growth.
                                </p>
                                <p className="desc-font mt-2">
                                    We build apps that are reliable, fast-loading, and ready for future upgrades.</p>
                            </div>
                        </div>

                    </div>
                </div>

                {/* Centered Call Box at the Bottom of Logo/Illustration */}
                <div className="row mt-5">
                    <div className="col-lg-12 text-center">
                        <div className="call-box-container" style={{ display: 'inline-block' }}>
                            <div
                                className="call-info-box d-flex align-items-center justify-content-center"
                                onClick={() => setIsContactOpen(true)}
                                style={{
                                    cursor: 'pointer',
                                    background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important',
                                    padding: '10px 25px',
                                    borderRadius: '10px',
                                    border: '1px solid rgba(55, 121, 185, 0.2)',
                                    transition: 'all 0.3s'
                                }}
                                onMouseEnter={(e) => {
                                    e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
                                    e.currentTarget.style.transform = 'translateY(-2px)';
                                }}
                                onMouseLeave={(e) => {
                                    e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
                                    e.currentTarget.style.transform = 'translateY(0)';
                                }}
                            >
                                <div className="call-icon-bg" style={{ width: '40px', height: '40px' }}>
                                    <img loading="lazy" src="/assets/img-app/icons/phn1.svg" alt="Phone Icon" />
                                </div>
                                <div className="call-details ms-2">
                                    <span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our App Experts Today </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
        </section>
    );
};

export default BannerBottom;