import React from "react";
import Bg1 from "../assets/icons/bg1.svg";
import { GrLocation } from "react-icons/gr";
import { BiEdit } from "react-icons/bi";
import { FaRegStar } from "react-icons/fa";
import { PiCoffee } from "react-icons/pi";
import { IoMdTime } from "react-icons/io";
import { LuCalendar1 } from "react-icons/lu";
import Vector11 from "../assets/icons/Vector11.svg";
import Vector12 from "../assets/icons/Vector12.svg";
import Vector13 from "../assets/icons/Vector13.svg";
import Vector14 from "../assets/icons/Vector14.svg";
import Vector15 from "../assets/icons/Vector15.svg";
import Vector9 from "../assets/icons/Vector9.svg";
import Vector16 from "../assets/icons/Vector16.svg";
import Sperso from "../assets/icons/sperso.svg";
import Coffee2 from "../assets/icons/coffee2.svg";
import Coffee1 from "../assets/icons/coffee1.svg";
import Coffee3 from "../assets/icons/coffee3.svg";
import Edit from "../assets/icons/edit.svg";

const CafeManagement = () => {
  return (
    <section>
      <h3 className="text-[#402E32] font-bold">ادیت کافه ترنج</h3>

      <div className="mt-9 border-2 border-[#8b8886] p-10 rounded-2xl flex gap-4">
        <div>
          <img className="w-[461px]" src={Bg1} alt="Logo" />
        </div>

        <div className="relative flex flex-col gap-4.5">
          <div className="absolute top-2 left-0 -mt-5">
            <button className="border-2 border-[#bb8f70] w-25 h-10 rounded-3xl text-[#402e32] hover:bg-[#7f4629] hover:text-white transition-all duration-300 hover:border-none">
              انصراف
            </button>
            <button className="border-2 border-[#bb8f70] bg-[#7f4629] text-white w-25 h-10 rounded-3xl mr-4 hover:bg-[#5f494f] transition-all duration-300 hover:border-none">
              تایید
            </button>
          </div>
          <BiEdit className="w-4.5 h-4.5 -mt-1" />
          <h3 className="font-bold text-base">کافه ترنج</h3>
          <hr className="w-38 -mt-3 border-1 text-[#80931e]" />
          <div className="flex items-center gap-2">
            <GrLocation />
            <span className="text-base">اصفهان - خیابان آذر </span>
          </div>
          <hr className="w-38 -mt-3 border-1 text-[#80931e]" />

          <div className="flex items-center gap-2">
            <FaRegStar />
            <span className="text-base">3.9</span>
          </div>
          <h3 className="font-bold text-base">درباره کافه</h3>
          <span className="text-base">
            کافه ترنج، یک کافی شاپ با محیطی دنج و دلچسب در شهر اصفهان و یکی از
            ممتازترین کافی‌ شاپ‌های ابن شهر است. از جمله خدمات این کافه می‌توان
            به اینترنت رایگان و ارائه کتاب‌هایی برای مطالعه در داخل کافه اشاره
            کرد.
          </span>
          <hr className="w-[104%] -mt-3 border-1 text-[#80931e]" />

          <button className="mt-15 flex gap-2 items-center text-center w-[133%] h-15 -mr-72 px-130 rounded-4xl border-2 border-[#7f4629] hover:bg-[#7f4629] hover:text-white transition-all duration-200 hover:border-none text-[#402e32">
            <BiEdit />
            <span className="font-bold">ادیت منو کافه</span>
          </button>

          <h3 className="text-[#402E32] font-bold mt-10 relative -right-71">
            ویژگی ها
          </h3>

          <div className="relative -mr-71 mt-5 flex gap-3">
            <div className="bg-[#e1d5c2] w-[140px] h-[137.6px] flex flex-col items-center gap-8 text-center rounded-4xl transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
              <img src={Coffee3} className="w-6 h-6 text-[#402E32] mt-5" />
              <span className="text-[#402E32] font-medium whitespace-nowrap">
                منو کافه:
              </span>
            </div>

            <div className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
              <img src={Vector15} className="w-6 h-6 text-[#402E32] mt-5" />
              <span>ساعت کاری:</span>
              <span> 23 - 8</span>
            </div>

            <div className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
              <img src={Vector14} className="w-6 h-6 text-[#402E32] mt-5" />
              <span>رزرو :</span>
              <span>رزرو آنلاین</span>
            </div>
            <div className="flex flex-col gap-4 text-[#402E32] font-medium w-[170.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
              <img src={Vector11} className="w-6 h-6 text-[#402E32] mt-5" />
              <span>موسیقی :</span>
              <span>موسیقی زنده آخر هفته</span>
            </div>

            <div className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
              <img src={Vector13} className="w-6 h-6 text-[#402E32] mt-5" />
              <span>پارکینگ :</span>
              <span>عمومی</span>
            </div>

            <div className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
              <img src={Vector12} className="w-6 h-6 text-[#402E32] mt-5" />
              <span>دسترسی آسان :</span>
              <span>مناسب افراد ناتوان</span>
            </div>

            <div className="flex justify-center items-center w-[150.5px] h-[137.6px] bg-[#5e5450] rounded-4xl transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
              <img src={Vector9} className="w-6 h-6 text-[#402E32]" />
            </div>
          </div>
          <div>
            <div className="mt-10 flex gap-10 justify-between -mr-71 text-[#402E32] font-medium">
              <div className="flex items-center gap-2 justify-center">
                <img src={Vector16} alt="Logo" />
                <span>عنوان</span>
              </div>
              <span>نوشیدنی سرد</span>
              <span>نوشیدنی گرم</span>
              <span>کیک و دسر</span>
              <span>صبحانه</span>
              <span>ساندویچ و برگر</span>
              <span>سالاد و پیش غذا</span>
            </div>
            <hr className="w-[134%] -mr-77 mt-3 border-2 rounded-3xl  text-[#939393]" />

            <div className="mt-9 flex items-center gap-2 -mr-71 text-[#a79fa1] font-bold">
              <img src={Vector16} alt="Logo" />
              <h3>افزودن زیر عنوان</h3>
            </div>

            <div className="mt-9 flex items-center gap-2 -mr-71 text-[#66585b] font-bold">
              <img className="w-5.5 h-5.5" src={Edit} alt="Logo" />
              <img className="w-6 h-6" src={Coffee3} alt="Logo" />
              <h3>قهوه ها</h3>
              <hr className="mt-9 -mr-15 w-[5%] border-1 text-[#80931e]" />
            </div>

            <div className="grid grid-cols-3 gap-5 -mr-64">
              <div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                <h1 className="text-[#402E32] font-bold  -mr-50">اسپرسو100%</h1>
                <img src={Sperso} alt="Logo" className="mt-5" />
                <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                  <span>قیمت</span>
                  <span>118.000</span>
                </div>
                <p className="font-normal text-[#66585b] -mr-58 mt-2">
                  محتویات
                </p>
                <span className="font-light text-[#66585b] mt-2 break-words mr-4 text-[14.90px]">
                  45 میلی لیتر، قهوه، 100% عربیکا، دم شده با دستگاه اسپرسو ساز،
                  به همراه یک عدد آب معدنی مینی
                </span>
                <hr className="mt-5 w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
              </div>

              <div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                <h1 className="text-[#402E32] font-bold  -mr-50">
                  کارامل ماکیاتو
                </h1>
                <img src={Coffee1} alt="Logo" className="mt-5" />
                <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                  <span>قیمت</span>
                  <span>149.000</span>
                </div>
                <p className="font-normal text-[#66585b] -mr-58 mt-2">
                  محتویات
                </p>
                <span className="font-light text-[#66585b] mt-2 break-words mr-4 text-[14.90px]">
                  220 میلی لیتر، 2 شات اسپرسو 30% روبوستا، 70% عربیکا، یک لکه
                  فوم شیر، سیروپ کارامل
                </span>
                <hr className="mt-5 w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
              </div>

              <div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                <h1 className="text-[#402E32] font-bold  -mr-47">
                  اسپرسو آفوگاتو
                </h1>
                <img src={Coffee2} alt="Logo" className="mt-5" />
                <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                  <span>قیمت</span>
                  <span>118.000</span>
                </div>
                <p className="font-normal text-[#66585b] -mr-58 mt-2">
                  محتویات
                </p>
                <span className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
                  اسپرسو، یک اسکوپ بستنی وانیلی
                </span>
                <hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
              </div>

              <div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                <h1 className="text-[#402E32] font-bold  -mr-47">
                  اسپرسو آفوگاتو
                </h1>
                <img src={Coffee2} alt="Logo" className="mt-5" />
                <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                  <span>قیمت</span>
                  <span>118.000</span>
                </div>
                <p className="font-normal text-[#66585b] -mr-58 mt-2">
                  محتویات
                </p>
                <span className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
                  اسپرسو، یک اسکوپ بستنی وانیلی
                </span>
                <hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
              </div>

              <div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                <h1 className="text-[#402E32] font-bold  -mr-47">
                  اسپرسو آفوگاتو
                </h1>
                <img src={Coffee2} alt="Logo" className="mt-5" />
                <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                  <span>قیمت</span>
                  <span>118.000</span>
                </div>
                <p className="font-normal text-[#66585b] -mr-58 mt-2">
                  محتویات
                </p>
                <span className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
                  اسپرسو، یک اسکوپ بستنی وانیلی
                </span>
                <hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
              </div>

              <div className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
                <h1 className="text-[#402E32] font-bold  -mr-47">
                  اسپرسو آفوگاتو
                </h1>
                <img src={Coffee2} alt="Logo" className="mt-5" />
                <div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
                  <span>قیمت</span>
                  <span>118.000</span>
                </div>
                <p className="font-normal text-[#66585b] -mr-58 mt-2">
                  محتویات sgjksldkk
                </p>

                <span className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
                  اسپرسو، یک اسکوپ بستنی وانیلی
                </span>
                <hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CafeManagement;

// import React from "react";
// import Search from "../assets/icons/search.svg";
// import Arrow from "../assets/icons/arrow.svg";
// import Vector7 from "../assets/icons/Vector7.svg";
// import Pic from "../assets/icons/pic.png";

// const Header = () => {
//   return (
//     <header className="flex items-center justify-between gap-4 mb-6 mt-90">
//       <h3 className="text-[#402E32] w-[90%] font-bold mt-6">{title}</h3>
//       <div className="w-12 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
//         <img src={Search} alt="لوگو" />
//       </div>
//       <div className="w-35 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
//         <img src={Pic} className="w-10 h-10 shadow-2xl ml-1" alt="لوگو" />
//         <p className="text-[#402E32] -mt-1.5 pl-1.5">سارا راد</p>
//         <img src={Arrow} alt="لوگو" />
//       </div>
//       <img src={Vector7} alt="لوگو" />
//       <h1>hello!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
//     </header>
//   );
// };

// export default Header;