"use client"
import { useState, useEffect } from "react"
import Link from "next/link"
import Rehabilitation from "@/utils/Rehabilitation.utils"
import Accident from "@/utils/Accident.utils"
import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils"
import { servicesList } from "@/utils/Services.utils"

export default function Footer2() {
    const [email, setEmail] = useState("");

    useEffect(() => {
        const user = "bloor";
        const domain = "rapharehab.ca";
        setEmail(`${user}@${domain}`);
    }, []);

    const servicesCols = [
        servicesList.slice(0, 13),
        servicesList.slice(13, 25),
        servicesList.slice(25, 37),
    ];

    return (
        <>
            <footer className="main-footer">
                <div className="pattern-layer">
                    <div
                        className="pattern-1"
                        style={{ backgroundImage: "url(/assets/images/shape/shape-23.png)" }}
                    ></div>
                    <div
                        className="pattern-2"
                        style={{ backgroundImage: "url(/assets/images/shape/shape-24.png)" }}
                    ></div>
                    <div
                        className="pattern-3"
                        style={{ backgroundImage: "url(/assets/images/shape/shape-25.png)" }}
                    ></div>
                    <div className="pattern-4"></div>
                </div>

                <div className="widget-section pt_90 pb_100">
                    <div className="auto-container">
                        <div className="row clearfix">
                            <div className="col-lg-3 col-md-6 col-sm-12 footer-column">
                                <div className="footer-widget logo-widget">
                                    <figure className="footer-logo">
                                        <Link href="/" aria-label="Logo">
                                            <img src="/assets/images/footer-logo.png" alt="rapharehab" />
                                        </Link>
                                    </figure>
                                    <p>
                                        Welcome to Rapha Rehab Physiotherapy & Massage Therapy Clinic in Etobicoke.
                                    </p>
                                    <ul className="social-links clearfix">
                                        <li>
                                            <Link href="https://www.instagram.com/elrapharehab/" target="_blank"
                                                rel="noopener noreferrer" aria-label="Instagram"><i className="icon-4"></i></Link>
                                        </li>
                                        <li>
                                            <Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank"
                                                rel="noopener noreferrer" aria-label="Facebook"><i className="icon-7" ></i></Link>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div className="col-lg-9 col-md-12 col-sm-12 footer-column">
                                <div className="footer-widget links-widget">
                                    <div className="widget-title text-center">
                                        <h3>SERVICES</h3>
                                    </div>
                                    <div className="row">
                                        {servicesCols.map((col, index) => (
                                            <div
                                                key={index}
                                                className="col-lg-4 col-md-4 col-sm-12 widget-content"
                                            >
                                                <ul className="links-list clearfix">
                                                    {col.map((item) => (
                                                        <li key={item.id}>
                                                            <Link
                                                                href={`/etobicoke-treatment-service/${item.slug}`}
                                                            aria-label="Etobicoke treatment service">
                                                                {item.shortTitle}
                                                            </Link>
                                                        </li>
                                                    ))}
                                                </ul>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="row clearfix">
                            <div className="col-lg-3 col-md-6 col-sm-12 footer-column">
                                <div className="footer-widget links-widget">
                                    <div className="widget-title">
                                        <h3>AREA OF INJURY</h3>
                                    </div>
                                    <div className="widget-content">
                                        <ul className="links-list clearfix">
                                            {areaOfInjuryData.map((item) => (
                                                <li key={item.id}>
                                                    <Link href={`/area-of-injury/${item.slug}`} aria-label="Area of injury">
                                                        {item.title}
                                                    </Link>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div className="col-lg-3 col-md-6 col-sm-12 footer-column">
                                <div className="footer-widget links-widget">
                                    <div className="widget-title">
                                        <h3>ACCIDENT</h3>
                                    </div>
                                    <div className="widget-content">
                                        <ul className="links-list clearfix">
                                            {Accident.map((item) => (
                                                <li key={item.id}>
                                                    <Link href={`/accident/${item.slug}`} aria-label="Accident title">
                                                        {item.title}
                                                    </Link>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div className="col-lg-3 col-md-6 col-sm-12 footer-column">
                                <div className="footer-widget links-widget">
                                    <div className="widget-title">
                                        <h3>REHABILITATION</h3>
                                    </div>
                                    <div className="widget-content">
                                        <ul className="links-list clearfix">
                                            {Rehabilitation.map((item) => (
                                                <li key={item.id}>
                                                    <Link href={`/rehabilitation/${item.slug}`} aria-label="rehabilitation title">
                                                        {item.title}
                                                    </Link>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div className="col-lg-3 col-md-6 col-sm-12 footer-column">
                                <div className="footer-widget contact-widget">
                                    <div className="widget-title">
                                        <h3>CONTACT US</h3>
                                    </div>
                                    <div className="widget-content">
                                        <ul className="info-list">
                                            <li>
                                                <img
                                                    src="/assets/images/icons/icon-1.png"
                                                    alt="location"
                                                />5 – 4335 Bloor Street West Etobicoke, M9C 2A5
                                            </li>
                                            <li>
                                                <i className="icon-2"></i>
                                                <Link href="tel:647-722-3434" aria-label="647-722-3434">647-722-3434</Link>
                                            </li>
                                            <li>
                                                <i className="icon-26"></i>
                                                {email ? (
                                                    <Link href={`mailto:${email}`} aria-label={email}>
                                                        {email}
                                                    </Link>
                                                ) : (
                                                    <span>Loading...</span>
                                                )}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="footer-bottom">
                    <div className="auto-container">
                        <div className="bottom-inner d-flex justify-content-center text-center">
                            <div className="copyright">
                                <p>
                                    © Copyright {new Date().getFullYear()} Rapha Rehab | Powered by{" "}
                                    <a
                                        href="https://metatroncubesolutions.com/"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        style={{ color: "#fff", fontWeight: "700" }}
                                     aria-label="Metatroncubesolutions">
                                        MetatronCube
                                    </a>{" "}
                                    All Rights Reserved
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </>
    )
}