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 { useEffect, useState } from "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 Software Solutions | Innovative & User-Centric Tech Services in Waterloo" description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth." />
            <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/about.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">
                                        Metatroncube Software Solutions was born from a passion for technology and a vision to
                                        revolutionize digital interactions. Based in the heart of Waterloo's tech hub, we have
                                        been pioneering custom software solutions since 2019.
                                    </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="Innovative technology and strategy by Metatron Cube Solutions." className="me-3 pr-3" />
                                            <div>
                                                <h5>Innovative Solutions</h5>
                                                <p>Tailoring cutting-edge web and mobile applications that set industry standards.</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="digital solutions team" className="me-3 pr-3" />
                                            <div>
                                                <h5>Expert Teamwork</h5>
                                                <p>A synergy of skilled developers and creative designers committed to your success.</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="Future-ready strategy by Metatron Cube Solutions." className="me-3 pr-3" />
                                            <div>
                                                <h5>Future-Ready Approach</h5>
                                                <p>Anticipating market trends to keep your business ahead of the curve.</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>Watch Us Live</h5>
                                        <h2>An Agency That</h2>
                                        <h2><span>Gets Excited </span>About Your Mission</h2>
                                    </div>
                                    <div className="dreamit-smart-title pt-2">
                                        <p className="slill-text-dark">
                                            Every project we take on is personal. We get excited about your goals, your grit, and the journey you’re on.
                                        </p>
                                        <p>
                                            Whether you’re launching something new or leveling up an existing brand, we bring fresh energy, deep expertise, and full-stack creativity to your table. We don’t just work for you, we work with you, as committed collaborators invested in your long-term growth.
                                        </p>
                                    </div>
                                </div>
                                <div className="dreamit-icon-box">
                                    <div className="dreamit-icon-list">
                                        <ul>
                                            <li>
                                                <i className="bi bi-arrow-right-circle" />
                                                <span> Urgent development solutions</span>
                                            </li>
                                            <li>
                                                <i className="bi bi-arrow-right-circle" />
                                                <span> Top quality services with reasonable price</span>
                                            </li>
                                            <li>
                                                <i className="bi bi-arrow-right-circle" />
                                                <span> Professional & experienced team</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>Experience US</h5>
                                    <h2>We Offer & Do</h2>
                                    <h2><span>More than</span> Ever Platforms.</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 state-of-the-art digital products that drive growth, efficiency, and connectivity.
                                                    We strive to be at the forefront of innovation, delivering web and mobile solutions
                                                    that exceed expectations.
                                                </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>
                                                    Integrity and Trust,
                                                    Innovation and Excellence,
                                                    Collaboration and Empowerment,
                                                    Adaptability and Learning,
                                                    Customer-Centric Approach,
                                                    Sustainability and Responsibility.
                                                </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">Projects Completed</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">Active 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">Expert People</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">Happy Clients</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="process-shape">
                            <div className="service-shape">
                                <img src="/assets/images/elements/right-top-element .webp" alt="Metatron Cube Solutions." />
                            </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>What Our Customers are  </h2>
                                    <h2>Talking<span> About us.</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!1s0x89d4d4dc0e01490b: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="Metatron Cube Solutions." />
                            </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">Let’s Get Started New Project</h5>
                                    <h2 className="call-do-action-area-h2">Your success story begins with us.</h2>
                                </div>
                                <div className="new-button">
                                    <Link legacyBehavior href="/contact">
                                        <a className="btn btn-primary px-4 mt-3">Contact Us</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;