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

const About = () => {
    const [isContactOpen, setIsContactOpen] = useState(false);
    return (
        <div className="about1-section-area sp1" id="about">
            <img src="/assets/img/elements/elements9.png" alt="" className="elements9" />
            <div className="container">
                <div className="row align-items-center">
                    <div className="col-lg-6">
                        <div className="about-images-area" style={{ position: 'relative' }}>
                            <img src="/assets/img/elements/elements10.png" alt="" className="elements10" />
                            <img
                                src="/assets/img/home/section2/about.webp"
                                alt="About MetatronCube Solutions"
                                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }}
                            />
                        </div>
                    </div>

                    <div className="col-lg-1"></div>
                    <div className="col-lg-5">
                        <div className="about-glass-container about-header-area heading2">
                            <GsapReveal y={20}>
                                <h5><span><img src="/assets/img/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>About MetatronCube Solutions</h5>
                            </GsapReveal>
                            <div className="space24"></div>
                            <GsapReveal y={20} delay={0.2}>
                                <h2 className="text-anime-style-3">Complete App Development Solutions</h2>
                            </GsapReveal>
                            <div className="space16"></div>
                            <p data-aos="fade-left" data-aos-duration="800">We don’t just build apps — we create digital products that solve real business problems.</p>
                            <p>From idea validation and wireframing to UI/UX design, development, and deployment, our team ensures your app is strategically built for performance, user engagement, and long-term scalability.</p>
                            <p>Whether you need a customer-facing mobile app, an internal business app, or a scalable startup MVP — we deliver solutions that perform.
                            </p>
                            <div className="space28"></div>

                            {/* <div className="about-specialties" data-aos="fade-left" data-aos-duration="900">
                                <h6>We specialize in:</h6>
                                <div className="specialty-row mt-3">
                                    <ul className="specialty-list">
                                        <li><i className="fas fa-check"></i> iOS App Development</li>
                                        <li><i className="fas fa-check"></i> Android App Development</li>
                                        <li><i className="fas fa-check"></i> Cross-Platform Apps</li>
                                    </ul>
                                    <ul className="specialty-list">
                                        <li><i className="fas fa-check"></i> UI/UX Design</li>
                                        <li><i className="fas fa-check"></i> App Store Optimization</li>
                                    </ul>
                                </div>
                            </div> */}

                            {/* <div className="space28"></div>
                            <div className="pera-box" data-aos="fade-left" data-aos-duration="1000">
                                <p>Our team combines strategy, design, development, and marketing expertise to create mobile apps that don’t just look great — they perform flawlessly.</p>
                            </div> */}
                            <div className="space28"></div>
                            <div className="btn-area1" data-aos="fade-left" data-aos-duration="1200">
                                <button onClick={() => setIsContactOpen(true)} className="vl-btn2">
                                    Start Your App Project Today <i className="fa-solid fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
        </div>
    );
};

export default About;
