"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";

// ✅ Progress bar (optional)
const ProgressBar = ({ label, percent }) => (
  <div className="progress-box">
    <p>{label}</p>
    <div className="bar">
      <div
        className="bar-inner count-bar"
        style={{ width: `${percent}%` }}
      ></div>
      <div className="count-text">{`${percent}%`}</div>
    </div>
  </div>
);

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

  useEffect(() => {
    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);
    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

  // ✅ Image source changes by screen size
  const imageSrc = isMobile
    ? "/assets/images/home/trusted/trusted-physiotherapy-care-mbl.webp"
    : "/assets/images/home/trusted/trusted-physiotherapy-care.webp";

  return (
    <section className="solutions-section p_relative">
      <div className="auto-container">
        <div className="row clearfix">
          {/* ===== Left Column (Text) ===== */}
          <div className="col-lg-6 col-md-12 col-sm-12 content-column">
            <div className="content-box">
              <div className="sec-title mb-3">
                <span className="sub-title">Association With</span>
                <h2>Trusted Physiotherapy Care in Etobicoke</h2>
              </div>

              <p className="pr_50">
                Our highly skilled physiotherapy team in Etobicoke is dedicated
                to helping you restore mobility, relieve pain, and achieve your
                long-term health goals. With a personalized treatment approach
                and patient-focused care, we are here to support your journey
                toward better health and well-being.
              </p>

              {/* ✅ Optional Progress Bars */}
              {/* <div className="progress-inner mb_50">
                <ProgressBar label="Skilled Doctor" percent={85} />
                <ProgressBar label="Modernized Equipment" percent={90} />
                <ProgressBar label="Dedicated Team" percent={80} />
              </div> */}

              <div className="btn-box mt_50">
                <Link href="/contact" className="theme-btn btn-one">
                  <span>Contact Us</span>
                </Link>
              </div>
            </div>
          </div>

          {/* ===== Right Column (Image) ===== */}
          <div className="col-lg-6 col-md-12 col-sm-12 image-column">
            <div className="image_block_tw">
              <div className="image-box text-center">
                <Image
                  src={imageSrc}
                  alt="Trusted Physiotherapy"
                  width={600}
                  height={400}
                  priority
                  quality={70}
                  placeholder="blur"
                  blurDataURL={imageSrc}
                  sizes="(max-width: 768px) 100vw, 50vw"
                  style={{
                    width: "100%",
                    height: "auto",
                    borderRadius: "10px",
                    objectFit: "cover",
                  }}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}