"use client";
import React, { useState } from 'react';
import Link from 'next/link';
import GsapReveal from '@/components/common/GsapReveal';
import ContactPopup from '@/components/common/ContactPopup/ContactPopup';

const Work = () => {
    const [isContactOpen, setIsContactOpen] = useState(false);
    return (
        <>
            <div
                className="work-others-section"
                style={{
                    backgroundImage: 'url(/assets/img/home/section5/bg.webp)',
                    backgroundPosition: 'center',
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: 'cover',
                }}
            >
                <img src="/assets/img/home/section5/top-element-2.webp" alt="" className="elements16" />
                <img src="/assets/img/home/section5/top-element-1.webp" alt="" className="elements1 keyframe5" />

                <div className="container">
                    <div className="row align-items-center g-5">

                        {/* LEFT: Full Image */}
                        <div className="col-12 col-xl-5">
                            <GsapReveal y={30} duration={1}>
                                <img
                                    src="/assets/img/home/section5/left.webp"
                                    alt="How It Works"
                                // style={{
                                //     width: '100%',
                                //     height: '100%',
                                //     minHeight: '670px',
                                //     objectFit: 'cover',
                                //     display: 'block',
                                //     borderRadius: '16px',
                                // }}
                                />
                            </GsapReveal>
                        </div>

                        {/* RIGHT: Heading + Paragraph + Steps List + CTA */}
                        <div className="col-12 col-xl-7">
                            <div className="work-content-area heading1">
                                <GsapReveal y={20}>
                                    <h5><span><img src="/assets/img/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>OUR DEVELOPMENT PROCESS</h5>
                                </GsapReveal>
                                <div className="space24"></div>
                                <GsapReveal y={20} delay={0.15}>
                                    <h2 className="text-anime-style-3">Our Proven App Development Process</h2>
                                </GsapReveal>

                                <div className="space28"></div>

                                {/* Step List */}
                                <div className="work-steps-list">
                                    {[
                                        { num: '01', title: 'Requirement Analysis', desc: 'Understanding your business model, audience, and goals.' },

                                        { num: '02', title: 'Wireframing & UI/UX Design', desc: 'Creating user-friendly and engaging app layouts.' },

                                        { num: '03', title: ' Development', desc: 'Frontend & backend development using modern frameworks.' },

                                        { num: '04', title: 'Testing & Quality Assurance', desc: 'Thorough testing for performance, security, and usability.' },

                                        { num: '05', title: 'Deployment', desc: 'App Store & Google Play submission support.' },

                                        { num: '06', title: 'Post-Launch Support', desc: 'Ongoing maintenance and feature enhancements.' },
                                    ].map((step, i) => (
                                        <div key={i} className="work-step-row" data-aos="fade-up" data-aos-duration={600 + i * 80}>
                                            <div className="work-step-num">{step.num}</div>
                                            <div className="work-step-body">
                                                <h4>{step.title}</h4>
                                                <p>{step.desc}</p>
                                            </div>
                                        </div>
                                    ))}
                                </div>

                                <div className="space40"></div>
                                <GsapReveal y={20} delay={0.4}>
                                    <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
                                        Let’s Build Your App <i className="fa-solid fa-arrow-right"></i>
                                    </button>
                                </GsapReveal>
                            </div>
                        </div>

                    </div>
                    {/* <div className="space80"></div> */}
                </div>
            </div>
            <ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
        </>
    );
};

export default Work;
