import React from "react";
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
import equipments from "@/data/maintenance";

const Performance = () => {
  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });

  return (
    <div ref={ref} className="px-4 sm:px-8 py-8 sm:py-12">
      <div
        className={`max-w-7xl mx-auto transition-all duration-1000 ${
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
        }`}
      >
        {/* 제목 */}
        <div className="text-center mb-8 sm:mb-12 lg:mb-16">
          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-blue-900 font-['Noto_Sans_KR'] antialiased mb-6">
            정보통신설비 유지관리 및 성능점검
          </h1>
          <div className="w-20 h-1 bg-blue-900 mx-auto"></div>
        </div>

        {/* 인증 및 평가 */}
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-blue-800 mb-4">
            검증된 정보통신 유지보수(성능점검) 전문 기업
          </h2>
          {/*<p className="text-gray-700 text-sm mb-6">*/}
          {/*  반도산전(주)는 27년간 전국 2,500여 개 건축물의 전기·통신·소방 설비공사를 준공한 외감 법인입니다.<br/>*/}
          {/*  도급순위 상위 0.3% 이내, 건설안전 NICE디앤비 1등급(SA1), ESG 2등급(중소기업 최고등급) 보유.<br/>*/}
          {/*  정보통신기술자 특급 5명 외 45명 보유.*/}
          {/*</p>*/}
            <div className="text-gray-700 text-sm mb-6 leading-relaxed">
                반도산전(주)는 27년간 전국 2,500여 개 건축물의 전기·통신·소방 설비공사를 준공한 외감 법인입니다.<br />
                도급순위 상위 0.3% 이내, 건설안전 NICE디앤비 1등급(SA1), ESG 2등급(중소기업 최고등급) 보유.<br />
                정보통신기술자 특급 5명 외 45명 보유.
            </div>

            <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center">
            <div className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
              <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
                <p className="font-bold text-blue-900">ISO 45001</p>
              </div>
              <div className="space-y-2">
                <p className="text-sm text-gray-600">안전보건경영시스템</p>
                <div className="w-full h-px bg-gray-200 my-2"></div>
                <p className="text-blue-600 font-medium">신용등급 BBB0</p>
              </div>
            </div>

            <div
              className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
              <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
                <p className="font-bold text-blue-900">ISO 9001</p>
              </div>
              <div className="space-y-2">
                <p className="text-sm text-gray-600">품질경영시스템</p>
                <div className="w-full h-px bg-gray-200 my-2"></div>
                <p className="text-blue-600 font-medium">현금흐름 A</p>
              </div>
            </div>

            <div
              className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
              <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
                <p className="font-bold text-blue-900">ISO 14001</p>
              </div>
              <div className="space-y-2">
                <p className="text-sm text-gray-600">환경경영시스템</p>
                <div className="w-full h-px bg-gray-200 my-2"></div>
                <p className="text-blue-600 font-medium">ESG</p>
              </div>
            </div>

            <div
              className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
              <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
                <p className="font-bold text-blue-900">나이스디앤비</p>
              </div>
              <div className="space-y-2">
                <p className="text-sm text-gray-600">건설안전관리보고서</p>
                <div className="w-full h-px bg-gray-200 my-2"></div>
                <p className="text-blue-600 font-medium">정보통신기술자 특급 5명 외 45명 보유</p>
              </div>
            </div>
          </div>
        </section>

        {/* 장비 보유현황 */}
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-blue-800 mb-4">
            정보통신설비 유지보수·관리 및 성능점검 법정장비 보유현황
          </h2>
            <div className="text-gray-700 text-sm mb-6 leading-relaxed">
                광섬유영역반사계, 네트워크측정기, 오실로스코프, 광케이블접속기, 광파워메타, 광심선대조기,<br />
                TV ANT 레벨측정기, 방송음향 측정기, 복합가스 측정기, LAN 측정기, 적외선 온도측정기,<br />
                AC/DC/저항 측정기, 절연저항 측정기 등 보유.
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-7 gap-4">
            {equipments.map(({ title, imageSrc }) => (
              <div className="flex flex-col items-center" key={title}>
                <img
                  src={imageSrc}
                  alt={title}
                  className="w-32 h-32 object-contain mb-2 rounded-md hover:scale-105 hover:shadow-md transition-all duration-300"
                />
                <p className="font-medium text-sm text-gray-700 text-center">{title}</p>
              </div>
            ))}
          </div>
        </section>

          {/* 제도 도입 배경 */}
          <section className="mb-12">
              <h2 className="text-2xl font-bold text-blue-800 mb-4 ">
                  제도 도입 배경
              </h2>
              <div className="border border-gray-200 rounded-lg  overflow-hidden">
              {/*<table className="min-w-full text-sm sm:text-base bg-white border border-gray-200 rounded-lg shadow-sm">*/}
                  <table className="min-w-full text-sm sm:text-base bg-white">
                  <colgroup>
                      <col className="w-1/5" /> {/* 20% */}
                      <col className="w-4/5" /> {/* 80% */}
                  </colgroup>
                  <tbody>
                  <tr className="bg-white">
                      <td className="border-b border-r border-gray-200 px-2 py-3 font-semibold text-center text-gray-700 bg-blue-50">
                          근거 법령
                      </td>
                      {/*<td className="border-b border-gray-200 px-4 py-3 text-gray-700 leading-relaxed">*/}
                      <td className="border-b border-gray-200 px-4 py-2 text-gray-700 leading-relaxed">
                          「정보통신공사업법」 (법률 제19546호, 2023.7.18. 개정, 2024.7.19. 시행)
                      </td>
                  </tr>
                  <tr className="bg-gray-50">
                      <td className="border-b border-r border-gray-200 px-2 py-3 font-semibold text-center text-gray-700 bg-blue-50">
                          목적
                      </td>
                      <td className="border-b border-gray-200 px-4 py-2 text-gray-700 leading-relaxed">
                          건축물 정보통신설비의 안전 확보와 통신서비스 품질 향상을 위한 유지보수·관리 제도 도입
                      </td>
                  </tr>
                  </tbody>
              </table>
              </div>
          </section>





          {/* 관리자 선임 기준 */}
          <section className="mb-12">
              <h2 className="text-2xl font-bold text-blue-800 mb-4">
                  관리자 선임 기준
              </h2>

              <div className="overflow-x-auto">
                  <div className="overflow-y-auto max-h-[400px] sm:max-h-[500px] border border-gray-200 rounded-lg shadow-sm">
                      <table className="min-w-full text-xs sm:text-sm table-fixed bg-white">
                          <thead>
                          <tr className="bg-blue-50 text-center sticky top-0 z-10">
                              <th className="border-b border-r border-gray-200 px-2 py-3 font-semibold text-gray-700 w-1/2">
                                  건축물 연면적
                              </th>
                              <th className="border-b border-gray-200 px-2 py-3 font-semibold text-gray-700 w-1/2">
                                  기술자 등급
                              </th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr className="bg-white  transition-colors">
                              <td className="border-b border-r border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
                                  6만㎡ 이상
                              </td>
                              <td className="border-b border-gray-200 px-2 py-2 text-center text-gray-700">
                                  특급 기술자
                              </td>
                          </tr>
                          <tr className="bg-gray-50  transition-colors">
                              <td className="border-b border-r border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
                                  3만 ~ 6만㎡
                              </td>
                              <td className="border-b border-gray-200 px-2 py-2 text-center text-gray-700">
                                  고급 기술자 이상
                              </td>
                          </tr>
                          <tr className="bg-white  transition-colors">
                              <td className="border-b border-r border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
                                  1.5만 ~ 3만㎡
                              </td>
                              <td className="border-b border-gray-200 px-2 py-2 text-center text-gray-700">
                                  중급 기술자 이상
                              </td>
                          </tr>
                          <tr className="bg-gray-50  transition-colors">
                              <td className="border-b border-r border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
                                  0.5만 ~ 1.5만㎡
                              </td>
                              <td className="border-b border-gray-200 px-2 py-2 text-center text-gray-700">
                                  초급 기술자 이상
                              </td>
                          </tr>
                          </tbody>
                      </table>
                  </div>
              </div>
          </section>


          {/* 과태료 기준 */}
          <section className="mb-12">
              <h2 className="text-2xl font-bold text-blue-800 mb-4">
                  과태료 기준
              </h2>
              <div className="overflow-x-auto">
                  <div className="overflow-y-auto max-h-[400px] sm:max-h-[500px] border border-gray-200 rounded-lg shadow-sm">
                      <table className="min-w-full text-xs sm:text-sm table-fixed bg-white">
                          <thead>
                          <tr className="bg-blue-50 text-center sticky top-0 z-10">
                              <th className="border-b border-r border-gray-200 px-2 py-3 font-semibold text-gray-700 w-2/3">
                                  위반행위
                              </th>
                              <th className="border-b border-gray-200 px-2 py-3 font-semibold text-gray-700 w-1/3">
                                  과태료 금액
                              </th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr className="bg-white  transition-colors">
                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
                                  유지보수 관리기준 미준수
                              </td>
                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
                                  300만원
                              </td>
                          </tr>
                          <tr className="bg-gray-50  transition-colors">
                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
                                  점검기록 미작성 또는 거짓 작성
                              </td>
                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
                                  300만원
                              </td>
                          </tr>
                          <tr className="bg-white  transition-colors">
                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
                                  유지보수‧관리자 미선임 또는 해임 후 30일 내 미선임
                              </td>
                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
                                  300만원
                              </td>
                          </tr>
                          <tr className="bg-gray-50  transition-colors">
                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
                                  점검기록 미보존
                              </td>
                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
                                  150만원
                              </td>
                          </tr>
                          <tr className="bg-white  transition-colors">
                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
                                  지자체 미제출
                              </td>
                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
                                  100만원
                              </td>
                          </tr>
                          <tr className="bg-gray-50  transition-colors">
                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
                                  선·해임 신고 미이행 또는 허위신고
                              </td>
                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
                                  100만원
                              </td>
                          </tr>
                          </tbody>
                      </table>
                  </div>
              </div>
              <p className="text-sm text-gray-600 mt-3 text-center">
                  ※ 과태료 처분만으로 의무 이행이 완료되는 것은 아니며, 30일 이내 미선임 시 반복 부과될 수 있습니다.
              </p>
          </section>


          {/* 대상설비 세부항목 */}
          <section className="mb-12">
              {/*<div className="text-center mb-6 sm:mb-8">*/}
              {/*    <div className="inline-block font-bold text-lg sm:text-xl lg:text-2xl text-gray-800 border-b-2 border-blue-900 pb-2">*/}
              {/*        대상설비 세부항목*/}
              {/*    </div>*/}
              {/*</div>*/}
              <h2 className="text-2xl font-bold text-blue-800 mb-4">
                  대상설비 세부항목
              </h2>
              <div className=" rounded-lg overflow-hidden">
              <table className="w-full text-xs sm:text-sm md:text-base table-fixed bg-white border border-gray-200 rounded-lg shadow-sm">
                  <thead>
                  <tr className="bg-blue-50 text-center">
                      <th className="border-b border-r border-gray-200 px-4 py-3 font-semibold text-gray-700 w-1/4">
                          구분
                      </th>
                      <th className="border-b border-gray-200 px-4 py-3 font-semibold text-gray-700 w-3/4">
                          점검대상
                      </th>
                  </tr>
                  </thead>
                  <tbody>
                  {/* 통신설비 */}
                  <tr className="bg-white  transition-colors align-middle">
                      <td className="border-b border-r border-gray-200 px-3 py-4 text-center font-medium">
                          <div className="flex flex-col items-center">
                              <img
                                  src="/image/maintenance/통신설비.png"
                                  alt="통신설비"
                                  className="max-w-[70%] h-auto object-contain mb-2"
                              />
                              <span className="text-gray-800">통신설비</span>
                          </div>
                      </td>
                      <td className=" border-gray-200 px-4 py-4 leading-relaxed">
                          <ul className="list-none text-left grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 rounded-md">
                              <li className="border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
                                  케이블설비
                              </li>
                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
                                  배관설비
                              </li>
                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
                                  국선인입설비
                              </li>
                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
                                  단자함설비
                              </li>
                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
                                  이동통신구내선로설비
                              </li>
                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
                                  전화설비
                              </li>
                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
                                  방송 공동수신 안테나 시설
                              </li>
                              <li className="px-3 py-1.5 font-semibold text-gray-700 ">
                                  종합유선방송 구내전송선로설비
                              </li>
                          </ul>
                      </td>
                  </tr>

                  {/* 방송설비 */}
                  <tr className="bg-gray-50  transition-colors align-middle">
                      <td className="border-b border-r border-gray-200 px-3 py-4 text-center font-medium">
                          <div className="flex flex-col items-center">
                              <img
                                  src="/image/maintenance/방송설비.png"
                                  alt="방송설비"
                                  className="max-w-[70%] h-auto object-contain mb-2"
                              />
                              <span className="text-gray-800">방송설비</span>
                          </div>
                      </td>
                      <td className="px-4 py-4">
                          <ul className="list-none text-left grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 rounded-md">
                              <li className="px-3 py-1.5 font-semibold text-gray-700 ">
                                  방송음향설비
                              </li>
                          </ul>
                      </td>

                  </tr>

                  {/* 정보설비 */}
                  <tr className="bg-white  transition-colors align-middle">
                      <td className="border-b border-r border-gray-200 px-3 py-4 text-center font-medium">
                          <div className="flex flex-col items-center">
                              <img
                                  src="/image/maintenance/정보설비.png"
                                  alt="정보설비"
                                  className="max-w-[70%] h-auto object-contain mb-2"
                              />
                              <span className="text-gray-800">정보설비</span>
                          </div>
                      </td>
                      <td className="  px-4 py-4 leading-relaxed">
                          <ul className="list-none text-left grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1   rounded-md">
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  네트워크설비
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  전자출입(통제)시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  원격검침시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  주차관제시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  주차유도시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  무인택배시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  비상벨설비
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  영상정보처리기기 시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  홈 네트워크 이용자 설비
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  빌딩안내시스템(BIS)
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  전기시계시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  통합 SI시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  시설관리시스템(FMS)
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  건물에너지관리시스템(BEMS)
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  지능형 인원계수 시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  지능형 경계 감시 시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  스마트 병원 설비
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  스마트 도난방지 시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  스마트 공장 시스템
                              </li>
                              <li className=" px-3 py-1.5 font-semibold text-gray-700 ">
                                  스마트 도서관 시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  지능형 이상 음원 시스템
                              </li>
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  IoT 기반 지하공간 안전관리 시스템
                              </li>
                              <li className="px-3 py-1.5 font-semibold text-gray-700 ">
                                  디지털 사이니지
                              </li>
                          </ul>
                      </td>
                  </tr>


                  {/* 기타설비 */}
                  <tr className="bg-gray-50  transition-colors align-middle">
                      <td className="border-b border-r border-gray-200 px-3 py-4 text-center font-medium">
                          <div className="flex flex-col items-center">
                              <img
                                  src="/image/maintenance/기타설비.png"
                                  alt="기타설비"
                                  className="max-w-[70%] h-auto object-contain mb-2"
                              />
                              <span className="text-gray-800">기타설비</span>
                          </div>
                      </td>
                      <td className="  px-4 py-4">
                          <ul className="list-none text-left grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 rounded-md">
                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
                                  통신용 전원설비
                              </li>
                              <li className="px-3 py-1.5 font-semibold text-gray-700 ">
                                  통신접지설비
                              </li>
                          </ul>
                      </td>
                  </tr>

                  </tbody>
              </table>
              </div>
          </section>



          {/* 주요내용 */}
          <section className="mb-12">
              {/*<div className="text-center mb-6 sm:mb-8">*/}
              {/*    <div className="inline-block font-bold text-lg sm:text-xl lg:text-2xl text-gray-800 border-b-2 border-blue-900 pb-2">*/}
              {/*        유지보수·관리 및 성능점검 주요내용*/}
              {/*    </div>*/}
              {/*</div>*/}
              <h2 className="text-2xl font-bold text-blue-800 mb-4">
                  유지보수·관리 및 성능점검 주요내용
              </h2>
              <div className=" rounded-lg overflow-hidden">
              <table className="min-w-full text-xs sm:text-sm table-fixed bg-white border border-gray-200 rounded-lg shadow-sm">
                  <thead>
                  <tr className="bg-blue-50 text-center">
                      <th className="border-b border-r border-gray-200 px-4 py-3 font-semibold text-gray-700 w-1/5">
                          구분
                      </th>
                      <th className="border-b border-r border-gray-200 px-4 py-3 font-semibold text-gray-700 w-2/5">
                          유지보수·관리
                      </th>
                      <th className="border-b border-gray-200 px-4 py-3 font-semibold text-gray-700 w-2/5">
                          성능점검
                      </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr className="bg-white  transition-colors">
                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
                          주요내용
                      </td>
                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
                          일상적 점검을 통해 설비 기능 유지 및 안전 확보
                      </td>
                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
                          설비 운용에 필요한 성능 점검
                      </td>
                  </tr>
                  <tr className="bg-gray-50  transition-colors">
                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
                          주기
                      </td>
                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
                          반기별 1회 이상
                      </td>
                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
                          연 1회 이상
                      </td>
                  </tr>
                  <tr className="bg-white  transition-colors">
                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
                          주요업무
                      </td>
                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
                          외관, 기능, 안전 상태 점검 및 기록
                      </td>
                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
                          점검결과 기록 후 5년간 보존 및 지자체 제출
                      </td>
                  </tr>
                  <tr className="bg-gray-50 transition-colors">
                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
                          업무위탁
                      </td>
                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
                          공사업자
                      </td>
                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
                          공사업자 또는 용역업자
                      </td>
                  </tr>
                  </tbody>
              </table>
              </div>
          </section>

          {/* 연락처 */}
          <div className="mt-16 text-center text-gray-700">
              <h3 className="text-xl sm:text-2xl font-bold text-blue-900 mb-4">
                  [견적요청 및 문의]
              </h3>
              <div className="space-y-2 text-base sm:text-lg">
                  <p>
                      <span className="font-semibold text-gray-800">E-MAIL :</span>{" "}
                      <a href="mailto:bando@bdsj.kr">
                          bando@bdsj.kr
                      </a>
                  </p>
                  <p>
                      <span className="font-semibold text-gray-800">대표번호 :</span> 051-808-8556
                  </p>
              </div>
              <div className="mt-6">
                  <a
                      href="/download/견적요청서.hwp"
                      download
                      className="inline-block px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-colors"
                  >
                      견적서 다운로드
                  </a>
              </div>
          </div>




      </div>
    </div>
  );
};

export default Performance;