MetatronLatestWebsite/src/components/home/MedicalServices.tsx

"use client";

import React, { useState, useEffect } from "react";

const services = [
    {
        id: 0,
        title: "Website Development",
        text: "Custom website development tailored to your business needs.",
        icon: "/assets/imgs/icon/icon-6.png",
        link: "/services-digital-solutions/web-development",
    },
    {
        id: 1,
        title: "Mobile Application Development",
        text: "High-performance mobile apps for iOS and Android.",
        icon: "/assets/imgs/icon/icon-2.png",
        link: "/services-digital-solutions/mobile-application-development",
    },
    {
        id: 2,
        title: "Graphic Designing",
        text: "Creative graphic design solutions for your brand.",
        icon: "/assets/imgs/icon/icon-3.png",
        link: "/services-digital-solutions/graphic-designing-company",
    },
    {
        id: 3,
        title: "UI / UX Designing",
        text: "User-centric design experiences that engage and convert.",
        icon: "/assets/imgs/icon/icon-4.png",
        link: "/services-digital-solutions/ui-ux-designing",
    },
    {
        id: 4,
        title: "SEO & Content Writing",
        text: "Optimization and content that drives organic growth.",
        icon: "/assets/imgs/icon/icon-5.png",
        link: "/services-digital-solutions/search-engine-optimization-seo-content-writing",
    },
    {
        id: 5,
        title: "Digital Marketing",
        text: "Strategic digital marketing to grow your online presence.",
        icon: "/assets/imgs/icon/icon-6.png",
        link: "/services-digital-solutions/digital-marketing-agency-in-canada",
    },
];

const MedicalServices = () => {
    const [activeTab, setActiveTab] = useState(0);


    const handleTabClick = (e: React.MouseEvent, id: number) => {
        e.preventDefault();
        setActiveTab(id);
    };

    return (
        <section
            className="medical-services-circle p-relative overflow-hidden"
            style={{
                backgroundImage: `url('/assets/img/all-images/blog/blog-img1.png')`,
                backgroundAttachment: 'fixed',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover'
            }}
        >
            {/* Background Overlay */}
            <div className="section-overlay" style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                background: 'rgba(7, 23, 43, 0.65)',
                zIndex: 1
            }}></div>

            {/* Decorative Elements - 4 Left, 4 Right */}
            <div className="decorative-element elem-left-1"><img src="/assets/img/elements/elements24.png" alt="shape" /></div>
            <div className="decorative-element elem-left-2"><img src="/assets/img/elements/elements23.png" alt="shape" /></div>
            {/* <div className="decorative-element elem-left-3"><img src="/assets/img/elements/elements25.png" alt="shape" style={{ opacity: 0.4 }} /></div> */}
            <div className="decorative-element elem-left-4"><img src="/assets/img/elements/elements47.png" alt="shape" style={{ opacity: 0.3 }} /></div>

            <div className="decorative-element elem-right-1"><img src="/assets/img/elements/elements25.png" alt="shape" /></div>
            <div className="decorative-element elem-right-2"><img src="/assets/img/elements/elements24.png" alt="shape" /></div>
            {/* <div className="decorative-element elem-right-3"><img src="/assets/img/elements/elements23.png" alt="shape" style={{ opacity: 0.4 }} /></div> */}
            <div className="decorative-element elem-right-4"><img src="/assets/img/elements/elements47.png" alt="shape" style={{ opacity: 0.3 }} /></div>

            <div className="container p-relative" style={{ zIndex: 5 }}>
                <div
                    className="sec-title-wrapper text-center wow fadeInUp animated"
                    data-wow-delay="0.3s"
                >
                    <div className="sec-title">
                        <div className="sec-title__shape"></div>
                        <h6 className="sec-title__tagline text-white">WELCOME</h6>
                        <h3 className="sec-title__title text-white">Driving Client <span className="inner-text">Success </span></h3>
                    </div>

                    <p className="sec-text mt-15 text-white">It is a long established fact that a reader will be distracted the readable content of <br /> a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
                </div>
                <div
                    className="service-circle wow fadeInUp animated"
                    data-wow-delay="0.4s"
                    style={{ visibility: "visible", animationDelay: "0.4s" }}
                >
                    <div className="service-circle__lines">
                        <div className="line"></div>
                        <div className="line"></div>
                        <div className="line"></div>
                        <div className="line"></div>
                    </div>
                    <nav className="service-circle__menu">
                        <ul>
                            {services.map((service, index) => (
                                <li
                                    key={service.id}
                                    style={{ "--rotate-item": `${index * 60}deg` } as React.CSSProperties}
                                    className={activeTab === index ? "active" : ""}
                                >
                                    {activeTab === index && <div className="active-tab-pointer"></div>}
                                    <a
                                        href="#"
                                        onClick={(e) => handleTabClick(e, index)}
                                        data-tab-link={index}
                                    >
                                        <img
                                            src={service.icon}
                                            alt="icon"
                                            style={{
                                                "--rotate-icon": `${-(index * 60)}deg`,
                                                "--icon-top": "30%",
                                                "--icon-left": "50%"
                                            } as React.CSSProperties}
                                        />
                                    </a>
                                </li>
                            ))}
                        </ul>
                    </nav>
                    <div className="service-circle__center">
                        {services.map((service, index) => (
                            <div
                                key={service.id}
                                className={`service-circle__item ${activeTab === index ? "active" : ""}`}
                                data-tab-no={index}
                            >
                                <h3 className="service-circle__title h4">
                                    <a href={service.link} className="text-white">{service.title}</a>
                                </h3>
                                <p className="service-circle__text text-white">{service.text}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default MedicalServices;