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

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

    // Using specific colors and icons to match a premium aesthetic. 
    // Fallback images are retained, but we prioritise a clean icon look if possible.
    const features = [
        {
            img: "/assets/images/Mobile-app-development-service/retail.webp",
            text: "E-commerce & Retail",
            bgColor: "#E3F2FD", // Light Blue
            iconColor: "#2196F3",
            delay: ".1s",
            icon: "fas fa-shopping-cart"
        },
        {
            img: "/assets/images/Mobile-app-development-service/fitness.webp",
            text: "Healthcare & Fitness",
            bgColor: "#FBE9E7", // Light Orange
            iconColor: "#FF5722",
            delay: ".2s",
            icon: "fas fa-heartbeat"
        },
        {
            img: "/assets/images/Mobile-app-development-service/education.webp",
            text: "Education & E-learning",
            bgColor: "#F3E5F5", // Light Purple
            iconColor: "#9C27B0",
            delay: ".3s",
            icon: "fas fa-graduation-cap"
        },
        {
            img: "/assets/images/Mobile-app-development-service/finance.webp",
            text: "Finance & Banking",
            bgColor: "#E8F5E9", // Light Green
            iconColor: "#4CAF50",
            delay: ".4s",
            icon: "fas fa-university"
        },
        // Second Row
        {
            img: "/assets/images/Mobile-app-development-service/food.webp",
            text: "Food Delivery & Restaurants",
            bgColor: "#FFF3E0", // Light Amber
            iconColor: "#FF9800",
            delay: ".15s",
            icon: "fas fa-utensils"
        },
        {
            img: "/assets/images/Mobile-app-development-service/transport.webp",
            text: "Transport & Logistics",
            bgColor: "#E0F2F1", // Light Teal
            iconColor: "#009688",
            delay: ".25s",
            icon: "fas fa-truck"
        },
        {
            img: "/assets/images/Mobile-app-development-service/entertainment.webp",
            text: "Entertainment & Media",
            bgColor: "#FFEBEE", // Light Red
            iconColor: "#E91E63",
            delay: ".35s",
            icon: "fas fa-music"
        },
    ];

    const firstRow = features.slice(0, 4);
    const secondRow = features.slice(4, 7);

    return (
        <>
            <style jsx>{`
                .industry-serve-area {
                    padding: 80px 0;
                    background-image: linear-gradient(rgba(10, 28, 54, 0.92), rgba(10, 28, 54, 0.92)), 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;
                }
                .section-subtitle {
                    color: rgba(255, 255, 255, 0.8) !important;
                }
                .industry-card {
                    background: rgba(255, 255, 255, 0.07) !important;
                    backdrop-filter: blur(8px);
                    border: 1px solid rgba(255, 255, 255, 0.1) !important;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                }
                .industry-text h4 {
                    color: #fff !important;
                }
                .industry-icon {
                    background: rgba(255, 255, 255, 0.15) !important;
                    transition: all 0.3s ease;
                }
                .industry-icon i {
                    color: #fff !important;
                    transition: none !important;
                }
                .industry-card:hover .industry-icon {
                    background: #3779b9 !important;
                }
                .industry-card:hover .industry-icon i {
                    color: #fff !important;
                }
                .industry-card:hover {
                    background: rgba(255, 255, 255, 0.12) !important;
                    transform: translateY(-8px) scale(1.03);
                    border-color: rgba(255, 255, 255, 0.3) !important;
                }
                .abouts-button a {
                    background: #3779b9;
                    color: #fff;
                    padding: 15px 35px;
                    border-radius: 50px;
                    font-weight: 700;
                    display: inline-block;
                    text-decoration: none;
                    transition: all 0.3s ease;
                    box-shadow: 0 10px 25px rgba(55, 121, 185, 0.3);
                }
                .abouts-button a:hover {
                    background: #fff;
                    color: #3779b9;
                    transform: translateY(-3px);
                }
            `}</style>

            <div className="industry-serve-area">
                <div className="container">

                    <div className="row justify-content-center text-center">
                        <div className="col-lg-12">
                            <div className="consen-section-title">
                                <h2>
                                    Apps That Power <span>Every Industry</span>
                                </h2>
                                <p className="section-subtitle">We build scalable solutions tailored to your specific business needs.</p>
                            </div>
                        </div>
                    </div>

                    <div className="industry-grid-container">
                        {/* First Row: 4 Items */}
                        <div className="row industry-row mb-4 justify-content-center">
                            {firstRow.map((feature, index) => (
                                <div className="col-lg-3 col-md-6 mb-4" key={index}>
                                    <div
                                        className="industry-card wow fadeInUp"
                                        data-wow-delay={feature.delay}
                                    >
                                        <div className="industry-icon">
                                            {/* Using FontAwesome for cleaner scalable icons as per screenshot aesthetic 
                                                If you prefer images, uncomment the image tag and comment out the i tag */}
                                            <i className={feature.icon}></i>
                                            {/* <img src={feature.img} alt={feature.text} className="img-fluid" /> */}
                                        </div>
                                        <div className="industry-text">
                                            <h4>{feature.text}</h4>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>

                        {/* Second Row: 3 Items */}
                        <div className="row industry-row justify-content-center">
                            {secondRow.map((feature, index) => (
                                <div className="col-lg-4 col-md-6 mb-4" key={index + 4}>
                                    <div
                                        className="industry-card wow fadeInUp"
                                        data-wow-delay={feature.delay}
                                    >
                                        <div className="industry-icon">
                                            <i className={feature.icon}></i>
                                        </div>
                                        <div className="industry-text">
                                            <h4>{feature.text}</h4>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    <div className="col-lg-12 pl-0 text-center mt-4">
                        <div className="abouts-button">
                            <div className="new-button mb-3">
                                <Link legacyBehavior href="/about">
                                    <a
                                        className="mt-4"
                                        href="#"
                                        onClick={(e) => {
                                            e.preventDefault();
                                            setShowPopup(true);
                                        }}
                                    >
                                        See Case Studies in Your Industry
                                    </a>
                                </Link>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
        </>
    );
};

export default WeServe;