"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils";

export default function AreaOfInjury() {
  const [isMobile, setIsMobile] = useState(false);

  // ✅ Detect mobile screen (same logic as Header2)
  useEffect(() => {
    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);
    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

  return (
    <section className="team-section sec-pad centred bg-color-1">
      {/* ===== Background Patterns ===== */}
      <div className="pattern-layer">
        <div className="pattern-1">
          <Image
            src="/assets/images/shape/shape-13.webp"
            alt="Physiotherapy Background"
            fill
            style={{ objectFit: "cover" }}
          />
        </div>
        <div className="pattern-2">
          <Image
            src="/assets/images/shape/shape-14.webp"
            alt="Physiotherapy Background"
            fill
            style={{ objectFit: "cover" }}
          />
        </div>
      </div>

      <div className="shape">
        <div className="shape-2"></div>
      </div>

      {/* ===== Section Header ===== */}
      <div className="auto-container">
        <div className="sec-title mb_50 centred">
          <span className="sub-title-1 new-color2">
            Start Your Treatment Today! <br /> Visit our healthcare team in
            Etobicoke.
          </span>
          <h2 className="tex-color-1">Area Of Injury</h2>
        </div>

        {/* ===== Injuries Grid ===== */}
        <div className="row clearfix">
          {areaOfInjuryData.slice(0, 8).map((area, index) => {
            // ✅ Same concept as Header logo switching
            const imageSrc = isMobile
              ? area.mobileImage || area.image // if mobile image exists, use it
              : area.image;

            return (
              <div
                key={index}
                className="col-lg-3 col-md-6 col-6 team-block d-flex"
              >
                <div className="team-block-one wow fadeInUp animated d-flex flex-column flex-grow-1">
                  <div className="inner-box d-flex flex-column flex-grow-1">
                    <div className="image-box">
                      <figure className="image">
                        {/* ✅ Using Next/Image for automatic optimization */}
                        <Image
                          src={imageSrc}
                          alt={area.title}
                          width={400}
                          height={400}
                          quality={75}
                          priority={index < 4} // first few load faster
                          sizes="(max-width: 768px) 100vw, 33vw"
                          style={{
                            width: "100%",
                            height: "auto",
                            objectFit: "cover",
                            borderRadius: "10px",
                          }}
                        />
                      </figure>
                    </div>

                    <div className="lower-content mt-auto">
                      <h3>
                        <Link href={`/area-of-injury/${area.slug}`} aria-label="Area of injury title">
                          {area.title}
                        </Link>
                      </h3>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}

          {/* ===== View All Button ===== */}
          <div className="col-12 text-center">
            <div className="btn-box">
              <Link href="/area-of-injury" className="theme-btn btn-one-new" aria-label="View all">
                <span>View All</span>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}