"use client";
import React, { useState } from 'react';
import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
import ServiceCard from '@/components/mobile-app-development-service/support/cards/ServiceCard';
import { services } from '@/utils/data';
import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup';

const Service = () => {
    const [isContactOpen, setIsContactOpen] = useState(false);
    return (
        <div className="service1-section-area sp2 service-parallax" id="services" style={{ backgroundImage: 'url(/assets/img-app/home/section3/bg.webp)', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundAttachment: 'fixed', position: 'relative' }}>
            <div className="section-overlay" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 0 }}></div>
            <div className="container" style={{ position: 'relative', zIndex: 1 }}>
                {/* Header + intro image row */}
                <div className="row align-items-center g-4 space-margin60">
                    <div className="col-lg-7">
                        <div className="service-header heading2">
                            <GsapReveal y={20}>
                                <h5 className="text-white"><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Services</h5>
                            </GsapReveal>
                            <div className="space24"></div>
                            <GsapReveal y={20} delay={0.15}>
                                <h2 className="text-anime-style-3 text-white">App Development Services Designed for Business Growth</h2>
                            </GsapReveal>
                            {/* <div className="space20"></div>
                            <GsapReveal y={20} delay={0.25}>
                                <p data-aos="fade-up" data-aos-duration="800" style={{ maxWidth: 520, color: 'rgba(255,255,255,0.8)' }}>
                                    From cybersecurity and cloud solutions to software development and managed support — we deliver end-to-end IT services that drive growth, efficiency and resilience for your business.
                                </p>
                            </GsapReveal> */}
                        </div>
                    </div>
                    <div className="col-lg-5" data-aos="zoom-in" data-aos-duration="900">
                        <div className="service-intro-img" style={{ position: 'relative' }}>
                            <img
                                src="/assets/img-app/home/section3/top-right.webp"
                                alt="Our IT Services"
                                style={{ width: '100%', borderRadius: '20px 0 20px 0', objectFit: 'cover', height: 280, boxShadow: '0 20px 50px rgba(0,0,0,0.15)' }}
                            />
                        </div>
                    </div>
                </div>

                {/* Service Cards */}
                <div className="row g-4">
                    {services.slice(6, 12).map((service, i) => (
                        <div key={service.id} className="col-lg-4 col-md-6 d-flex" data-aos="zoom-in" data-aos-duration={800 + i * 100}>
                            <ServiceCard service={service} />
                        </div>
                    ))}
                </div>

                {/* Bottom CTA Area */}
                <div className="row justify-content-center mt-5">
                    <div className="col-lg-8 text-center" data-aos="fade-up" data-aos-duration="1000">
                        <div className="service-bottom-cta mt-50">
                            <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
                                Request Free Proposal <i className="fa-solid fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
        </div>
    );
};

export default Service;