"use client";
import ConsenHead from "@/src/ConsenHead";
import Link from "next/link";
import { useState } from "react";
import ContactPopup from "./ContactPopup";

const KeyFeatures = () => {
  const [showPopup, setShowPopup] = useState(false);

  const features = [
    {
      img: "/assets/images/Mobile-app-development-service/user-friendly.webp",
      title: "User-Friendly & Engaging Designs",
      desc: "Intuitive interfaces designed to delight every user."
    },
    {
      img: "/assets/images/Mobile-app-development-service/speed.webp",
      title: "High Performance & Speed",
      desc: "Optimized code for ultra-fast and lag-free response."
    },
    {
      img: "/assets/images/Mobile-app-development-service/secure.webp",
      title: "100% Secure & Scalable",
      desc: "Advanced security built to grow with your business."
    },
    {
      img: "/assets/images/Mobile-app-development-service/cloud.webp",
      title: "Cloud-Integrated Solutions",
      desc: "Reliable cloud storage for seamless accessibility."
    },
    {
      img: "/assets/images/Mobile-app-development-service/app.webp",
      title: "App Store Optimization Support",
      desc: "Data-driven ASO strategy to maximize downloads."
    },
    {
      img: "/assets/images/Mobile-app-development-service/post.webp",
      title: "Post-Launch Maintenance",
      desc: "Reliable ongoing support and regular app updates."
    },
    {
      img: "/assets/images/Mobile-app-development-service/dedicated.webp",
      title: "Dedicated Project Managers",
      desc: "Clear communication and expert management."
    }
  ];

  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."
      />

      <style jsx>{`
        .stand-out-area {
          padding: 80px 0;
          background-image: linear-gradient(rgba(10, 28, 54, 0.9), rgba(10, 28, 54, 0.9)), url('/assets/images/Mobile-app-development-service/banner-bg.webp');
          background-size: cover;
          background-position: center;
          background-attachment: fixed;
          position: relative;
          overflow: hidden;
        }
        .consen-section-title h2 {
          color: #fff !important;
        }
        .stand-out-card {
          background: rgba(255, 255, 255, 0.05);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 20px;
          padding: 40px 30px;
          transition: all 0.4s ease;
          height: 100%;
        }
        .stand-out-title {
          color: #fff !important;
          margin-top: 20px;
        }
        .stand-out-desc {
          color: rgba(255, 255, 255, 0.7) !important;
        }
        .stand-out-icon-box {
          background: rgba(255, 255, 255, 0.1) !important;
          width: 70px;
          height: 70px;
          border-radius: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 25px;
        }
        .stand-out-icon-box img {
          max-width: 35px;
          filter: brightness(0) invert(1);
          transition: all 0.3s ease;
        }
        .stand-out-card:hover {
          transform: translateY(-10px);
          background: rgba(255, 255, 255, 0.12);
          border-color: #3779b9;
        }
        .consen-button a {
          background: #3779b9;
          color: #fff;
          padding: 15px 40px;
          border-radius: 50px;
          font-weight: 700;
          text-decoration: none;
          display: inline-block;
          box-shadow: 0 10px 25px rgba(55, 121, 185, 0.3);
          transition: all 0.3s ease;
        }
        .consen-button a:hover {
          background: #fff;
          color: #3779b9;
          transform: translateY(-3px);
        }
      `}</style>

      <div className="stand-out-area">
        <div className="container">
          <div className="row align-items-center mb-50">
            <div className="col-lg-12 text-center">
              <div className="consen-section-title">
                <h2>Why Our Apps <span>  Stand Out </span></h2>
              </div>
            </div>
          </div>

          <div className="row justify-content-center">
            {features.map((feature, index) => (
              <div key={index} className="col-lg-3 col-md-6 mb-4">
                <div className="stand-out-card wow fadeInUp" data-wow-delay={`${0.1 * (index + 1)}s`}>
                  <div className="stand-out-icon-box">
                    <img
                      src={feature.img}
                      alt={feature.title}
                      className="img-fluid"
                    />
                  </div>
                  <h4 className="stand-out-title">{feature.title}</h4>
                  <p className="stand-out-desc">{feature.desc}</p>

                  {/* <div className="stand-out-arrow">
                    <i className="bi bi-arrow-right"></i>
                  </div> */}
                </div>
              </div>
            ))}
          </div>

          <div className="row">
            <div className="col-lg-12 text-center mt-4">
              <div className="consen-button">
                <a
                  href="#"
                  onClick={(e) => {
                    e.preventDefault();
                    setShowPopup(true);
                  }}
                >
                  Book a Free Demo Call
                </a>
              </div>
            </div>
          </div>

        </div>
      </div>
      <ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
    </>
  );
};
export default KeyFeatures;