import { useState, useEffect } from "react";
import Abou from "@/src/components/services-details-banner/abou.js";
import Counter from "@/src/components/Counter";
import Faqs from "@/src/components/Faqs";
import LogoSlider from "@/src/components/LogoSlider";
import Layout from "@/src/layout/Layout";
import { testimonial_list_slider } from "@/src/sliderProps";
import Link from "next/link";
import { Nav, Tab } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
import { brandListProps2 } from "@/src/sliderProps";
import SubCard from "@/src/components/AboveFooter";
import ConsenHead from "@/src/ConsenHead";
import GoogleReviewsBranding from "@/src/components/GoogleReviewsBranding";



const About = () => {
    const [reviews, setReviews] = useState([]);
    const [loading, setLoading] = useState(true);
    const [expandedReview, setExpandedReview] = useState(null);
    const [isClient, setIsClient] = useState(false);

    useEffect(() => {
        setIsClient(true);
        async function loadReviews() {
            try {
                // console.log("About: Fetching reviews...");
                const res = await fetch("/api/reviews");
                const data = await res.json();
                // console.log("About: Received data:", data);
                const cleaned = (data.reviews || []).filter(r =>
                    (r.text || r.description || r.snippet || r.review_text || r.body || r.content) &&
                    r.rating >= 4
                );
                // console.log("About: Cleaned reviews (rating >= 4):", cleaned.length);
                setReviews(cleaned);
            } catch (error) {
                // console.error("About: Failed to fetch reviews", error);
            } finally {
                setLoading(false);
            }
        }
        loadReviews();
    }, []);

    const displayedReviews = reviews.length > 0 && reviews.length < 3
        ? [...reviews, ...reviews, ...reviews]
        : reviews;

    function renderStars(rating) {
        return [...Array(5)].map((_, i) => (
            <span key={i} className={`fas fa-star ${i < rating ? "text-warning" : "text-secondary"}`} style={{ marginRight: "2px" }}></span>
        ));
    }

    function getReviewText(r) {
        return r.text || r.description || r.snippet || r.review_text || r.body || r.content || "";
    }

    function truncateText(text) {
        return text.length > 150 ? text.substring(0, 150) + "..." : text;
    }

    function getProfileImage(r) {
        // Check multiple possible field names for profile images
        const url = r.profile_photo_url ||
            r.author_profile_photo_url ||
            r.user?.thumbnail ||
            r.user?.profile_photo_url ||
            r.thumbnail ||
            r.profile_picture ||
            r.avatar;

        if (!url) return null;

        // If it's already a full URL, return it
        if (url.startsWith("http")) {
            return url;
        }

        // Otherwise, construct the Googleusercontent URL
        return `https://lh3.googleusercontent.com/${url}`;
    }

    function getInitials(name) {
        if (!name) return "U";
        return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
    }
    return (
        <>
            <ConsenHead title="About MetatronCube - Web, App & Digital Marketing Experts" description="Discover MetatronCube India - a leading company in web development, mobile apps, SEO, digital marketing, UI/UX, and graphic design." />
            <Layout header={3} footer={3}>
                <Abou pageName={"ABOUT US"} />
                {/* ========================================================= */}
                {/* Start abouts area  */}
                {/* ========================================================= */}
                <div className="about-area new-style bg-white">
                    <div className="container">
                        <div className="row align-items-center">

                            <div className="col-lg-6 mb-4 mb-lg-0">
                                <div className="about-thumb">
                                    <img src="/assets/images/about/aboutpage.webp" alt="Our story" className="img-fluid" />
                                </div>
                            </div>

                            <div className="col-lg-6">
                                <div className="consen-section-title mb-4">
                                    <div className="consen-section-title">
                                        <h5>About Us</h5>
                                        <h2>Our<span> Story</span></h2>
                                    </div>
                                    <p className="about-text2 pt-3">
                                        Metatron Cube India was founded with a clear mission - to transform ideas into impactful digital solutions. With a passion for technology and innovation, we have been helping businesses achieve growth through <b>website development, mobile app development, SEO, digital marketing, UI/UX, and graphic design services</b>. Over the years, we’ve built a reputation for delivering scalable, creative, and results-driven digital experiences.
                                    </p>
                                </div>

                                <div className="row g-3">
                                    <div className="col-12">
                                        <div className="d-flex align-items-start mb-3">
                                            <img src="/assets/images/about/innovative.webp " alt="icon" className="me-3 pr-3" />
                                            <div>
                                                <h5>Next-Gen Solutions</h5>
                                                <p>We design cutting-edge websites, apps, and digital strategies that not only meet industry standards but also set new benchmarks for quality and performance.</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="col-12">
                                        <div className="d-flex align-items-start mb-3">
                                            <img src="/assets/images/about/teamwork.webp" alt="icon" className="me-3 pr-3" />
                                            <div>
                                                <h5>Team-Driven Success</h5>
                                                <p>Our skilled developers, designers, and strategists work as one - combining creativity with technical expertise to deliver projects that exceed expectations.</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="col-12">
                                        <div className="d-flex align-items-start mb-3">
                                            <img src="/assets/images/about/future.webp " alt="icon" className="me-3 pr-3" />
                                            <div>
                                                <h5>Future-Focused Vision</h5>
                                                <p>By anticipating market trends and adopting the latest technologies, we ensure your business is always one step ahead in the fast-evolving digital landscape.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>

                {/*==================================================*/}
                {/* End abouts Area */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start Brand Area */}
                {/*==================================================*/}
                <div className="about brand-section new-style">
                    <div className="container">
                        <div className="row">
                            <Swiper {...brandListProps2} className="brand-list2 owl-carousel">
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-1.webp" alt="BigCommerce Partner logo, symbolizing a strong e-commerce alliance." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-2.webp" alt="Shopify logo with a green shopping bag icon." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-3.webp" alt="Constant Contact logo with a stylized '@' symbol." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-4.webp" alt="HIKE SEO logo depicting a rising graph within the letter 'K'." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-1.webp" alt="BigCommerce Partner logo, symbolizing a strong e-commerce alliance." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-2.webp" alt="Shopify logo with a green shopping bag icon." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-3.webp" alt="Constant Contact logo with a stylized '@' symbol." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-4.webp" alt="HIKE SEO logo depicting a rising graph within the letter 'K'." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                            </Swiper>
                        </div>
                    </div>
                </div>

                {/*==================================================*/}
                {/* End brand Area */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start consen Skill Area Css */}
                {/*==================================================*/}
                <div className="skill-area style-two">
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-md-6">
                                <div className="extra-animation-div">
                                    <div className="consen-section-title">
                                        <h5>Discover Our Approach</h5>
                                        <h2>An Agency That</h2>
                                        <h2><span>Turning Your Vision </span>Into Reality</h2>
                                    </div>
                                    <div className="dreamit-smart-title pt-2">
                                        <p className="slill-text-dark">
                                            Every project we take on goes beyond execution - it’s a true collaboration. We’re motivated by your goals, your drive, and your journey, and our role is to strengthen and accelerate it.
                                        </p>
                                        <p>
                                            Whether you’re launching a new idea, expanding an established brand, or reinventing your digital identity, we bring passion, deep expertise, and innovative thinking to every stage. At <b>MetatronCube India</b>, we don’t just deliver solutions - we build lasting partnerships, standing by you as committed allies focused on long-term success.
                                        </p>
                                    </div>
                                </div>
                                <div className="dreamit-icon-box">
                                    <div className="dreamit-icon-list">
                                        <ul>
                                            <li>
                                                <i className="bi bi-arrow-right-circle" />
                                                <span> <b>Rapid development delivery</b> - Agile, dependable, and scalable web & app solutions.</span>
                                            </li>
                                            <li>
                                                <i className="bi bi-arrow-right-circle" />
                                                <span>  <b>High-quality services at fair value</b> - Excellence without unnecessary costs.
                                                </span>
                                            </li>
                                            <li>
                                                <i className="bi bi-arrow-right-circle" />
                                                <span> <b>Proven and reliable team </b>- Experienced professionals dedicated to your growth.
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-6">
                                <div className="slill-single-thumb mt-4 mt-lg-0 pl-50 ml-1">
                                    <img src="/assets/images/about/watch-us-live-section.webp" alt="Agency that gets excited about" />
                                    <div className="skill-thumb-content">
                                        <div className="skill-title">
                                            <h3 className="counter"><Counter end={10} /></h3>
                                            <span>+</span>
                                            <h5>YEARS EXPERIENCE</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/* <div className="process-shape">
                            <div className="process-shape-thumb bounce-animate2">
                                <img src="assets/images/about/3.webp" alt="" />
                            </div>
                        </div> */}
                        </div>

                    </div>
                </div>

                {/*==================================================*/}
                {/* End consen Skill Area Css */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start consen case study Area */}
                {/*==================================================*/}
                <div className="why-choose-us">
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-lg-6">
                                <div className="consen-section-title">
                                    <h5>Partner With Us</h5>
                                    <h2>We Deliver More Than  <span>Just Platforms.</span> </h2>

                                    <p className="choose-text1">
                                        Appropriately enhance principle-centered innovation rather
                                        than high standards in platforms. Credibly orchestrate functional.
                                    </p>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-12">
                                <div className="row">
                                    <div className="col-12 pl-10 pr-10 mb-4">
                                        <div className="process-single-box text-white">
                                            <div className="process-title">
                                                <h3>
                                                    Our <span> Mission </span>
                                                </h3>
                                                <p>
                                                    Our mission is to empower businesses with cutting-edge digital solutions that enhance growth, efficiency, and connectivity. By combining creativity with advanced technology, we aim to deliver web and mobile applications that surpass expectations and keep brands future-ready.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-12 pl-10 pr-10">
                                        <div className="process-single-box upper">
                                            <div className="process-title text-white">
                                                <h3>
                                                    Our <span> Values </span>
                                                </h3>
                                                <p>
                                                    We are driven by trust, innovation, and excellence. Collaboration and teamwork lie at the heart of everything we do. Adaptability, continuous learning, and a customer-first mindset shape our approach, while sustainability and responsibility guide how we create solutions that make a lasting impact.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/*==================================================*/}
                {/* End consen case study Area */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start process Area */}
                {/*==================================================*/}
                <div className="process-area two">
                    <div className="container">
                        <div className="row justify-content-center text-center">
                            <div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
                                <div className="counter-single-box">
                                    <div className="counter-title">
                                        <h4 className="text-dark"><Counter end={100} /></h4>
                                        <span>+</span>
                                        <p className="text-dark">Completed Projects</p>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
                                <div className="counter-single-box">
                                    <div className="counter-title">
                                        <h4 className="text-dark"><Counter end={50} /></h4>
                                        <span>+</span>
                                        <p className="text-dark">Ongoing Clients</p>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
                                <div className="counter-single-box">
                                    <div className="counter-title">
                                        <h4 className="text-dark"><Counter end={20} /></h4>
                                        <span>+</span>
                                        <p className="text-dark">Skilled Experts</p>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
                                <div className="counter-single-box">
                                    <div className="counter-title">
                                        <h4 className="text-dark"><Counter end={50} /></h4>
                                        <span>+</span>
                                        <p className="text-dark">Satisfied Clients</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="process-shape">
                            <div className="service-shape">
                                <img src="/assets/images/elements/right-top-element .webp" alt="" />
                            </div>
                        </div>
                    </div>
                </div>

                {/*=================================================*/}
                {/* End Process Area */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start consen Testimonial Area */}
                {/*==================================================*/}
                <div className="testimonial-area new-style">
                    <div className="container">
                        <div className="row justify-content-center text-center">
                            <div className="col-lg-8">
                                <div className="consen-section-title">
                                    <h5 className="text-primary">Our Testimonials</h5>
                                    <h2> Hear From Our <span>Happy Customers</span> </h2>
                                    <GoogleReviewsBranding centered={true} />
                                </div>
                            </div>
                        </div>

                        {loading ? (
                            <div className="text-center mt-4">
                                <p>Loading reviews...</p>
                            </div>
                        ) : isClient && (
                            <Swiper {...testimonial_list_slider} className="testimonial_list owl-carousel mt-4">
                                {displayedReviews.map((r, index) => {
                                    const fullText = getReviewText(r);
                                    const isExpanded = expandedReview === index;
                                    const profileImg = getProfileImage(r);
                                    const name = r.user?.name || r.author_name || "Customer";

                                    return (
                                        <SwiperSlide key={index} className="pr-1">
                                            <div className="testimonial-single-box">
                                                <div className="testimonial-content1">
                                                    <div className="single-quote-icon">
                                                        <div className="quote-title d-flex align-items-center" style={{ marginBottom: "15px" }}>
                                                            <div className="google-avatar" style={{
                                                                width: "55px",
                                                                height: "55px",
                                                                minWidth: "55px",
                                                                borderRadius: "50%",
                                                                overflow: "hidden",
                                                                background: "#f8f9fa",
                                                                display: "flex",
                                                                alignItems: "center",
                                                                justifyContent: "center",
                                                                border: "1px solid #eee",
                                                                marginRight: "15px"
                                                            }}>
                                                                {profileImg ? (
                                                                    <img
                                                                        src={profileImg}
                                                                        alt={name}
                                                                        onError={(e) => (e.target.style.display = 'none')}
                                                                        style={{ width: "100%", height: "100%", objectFit: "cover" }}
                                                                    />
                                                                ) : (
                                                                    <span style={{ fontSize: '18px', fontWeight: 'bold', color: '#555' }}>{getInitials(name)}</span>
                                                                )}
                                                            </div>
                                                            <div className="user-details">
                                                                <h4 className="testimonial-text mb-0 fw-bold">
                                                                    {name}
                                                                </h4>
                                                                <div className="testimonial-ratting-new d-flex mt-1" style={{ color: '#ffc107', fontSize: '14px' }}>
                                                                    {renderStars(r.rating)}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="em-testimonial-text">
                                                        <p>
                                                            {fullText}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </SwiperSlide>
                                    );
                                })}
                            </Swiper>
                        )}

                        <div className="new-button d-flex justify-content-center pt-4">
                            <Link
                                legacyBehavior
                                href="https://www.google.com/maps/place/Metatron+Cube+Software+Solutions/@34.0518468,-56.3267266,3z/data=!4m8!3m7!1s0x89d4d7ff0d82df5b:0xf0ca6a97298a109c!8m2!3d34.0518468!4d-56.3267266!9m1!1b1!16s%2Fg%2F11k197xnvf?entry=ttu&g_ep=EgoyMDI1MTAxMy4wIKXMDSoASAFQAw%3D%3D"
                            >
                                <a target="_blank" className="mt-0">Review us on Google</a>
                            </Link>
                        </div>

                        <div className="testi-shape">
                            <div className="testi-shape-thumb">
                                <img src="/assets/images/elements/right-top-element-1.webp" alt="Decorative Shape" />
                            </div>
                        </div>
                    </div>
                </div>

                {/*==================================================*/}
                {/* End consen Testimonial Area */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start consen Call Do Action Area Css */}
                {/*==================================================*/}
                <div className="call-do-action-area">
                    <div className="container">
                        <div className="row justify-content-center text-center">
                            <div className="col-lg-10 col-md-12">
                                <div className="consen-section-title upper mb-4">
                                    <h5 className="text-primary">Ready to Start?</h5>
                                    <h2 className="call-do-action-area-h2">Turn your ideas into reality with us.</h2>
                                </div>
                                <div className="new-button">
                                    <Link legacyBehavior href="/contact">
                                        <a className="btn btn-primary px-4 mt-3">Start Now</a>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/*==================================================*/}
                {/* End consen Call Do Action Area Css */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start consen Subscribe Area */}
                {/*==================================================*/}
                <div className="sub">
                    <div className="container">
                        <SubCard />
                    </div>
                </div>

                {/*==================================================*/}
                {/* End consen Subscribe Area */}
                {/*==================================================*/}
            </Layout >
        </>
    );
};
export default About;