این کد به زیبا ترین حالت ممکن طراحیش کن کاملا اصولی و درست نمیخوام رنگ بندی و جهت باکس ها تغیر کنه و کاملا تلاش  کن خیلی زیبا بشه و همچنین نمیخوام فونت و اندازه متن ها تغیر کنه و کاری که میکنی متن داخلش رو کاملش با لحن طبیعی و از کلمات و حالت ماشینی خارج بشه و متن رو بیشتر کن

'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';

interface Trophy {
  name: string;
  image: string;
}

const AwardsSection: React.FC = () => {
  const trophies: Trophy[] = [
    {
      name: 'هتل بزرگ شیراز',
      image: 'images/gold/1.png'
    },
    {
      name: 'هتل پارسیان آزادی تهران',
      image: 'images/gold/2.png'
    },
    {
      name: 'هتل اسپیناس پالاس تهران',
      image: 'images/gold/3.png'
    },
    {
      name: 'هتل مجلل درویشی مشهد',
      image: 'images/gold/4.png'
    },
    {
      name: 'گروه هتل‌های هما',
      image: 'images/gold/5.png'
    }
  ];

  const [currentIndex, setCurrentIndex] = useState<number>(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % trophies.length);
    }, 5000);
    return () => clearInterval(timer);
  }, [trophies.length]);

  return (
    <section className="awards-section">
      {/* بخش سمت چپ (جوایز و افتخارات) */}
      <div className="awards-left">
        <div className="top-left-link">
          <Link href="#" className="honors-link">
            مشاهده کامل افتخارات
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M15 4L7 12L15 20" stroke="currentColor" strokeWidth="2" />
            </svg>
          </Link>
        </div>

        <div className="left-header">
          <h3>جوایز و افتخارات</h3>
          <div className="iranija-logo">
            <span>ایرانیجا</span>
            <div className="underline"></div>
          </div>
        </div>

        <div className="trophy-wrapper">
          <div className="white-card">
            <img
              src={trophies[currentIndex].image}
              alt={trophies[currentIndex].name}
              className="trophy-image"
            />
            <div className="hotel-name">
              <span>{trophies[currentIndex].name}</span>
              <div className="name-underline"></div>
            </div>
          </div>
          <div className="navigation-dots">
            {trophies.map((_, index) => (
              <button
                key={index}
                className={`dot ${index === currentIndex ? 'active' : ''}`}
                onClick={() => setCurrentIndex(index)}
              />
            ))}
          </div>
        </div>
      </div>

   
      <div className="awards-right">
        <h6 className="right-title">
          <span>مزایای رزرو از وبسایت ایرانیجا</span>
        </h6>
        <p className="right-text">
        ایرانیجا، همراه مطمئن شما در رزرو هتل! 🏨✨ با ما می‌توانید به راحتی و در کمترین زمان، بهترین هتل‌ها را با کمترین قیمت پیدا و رزرو کنید. پشتیبانی ۲۴ ساعته ما در هر لحظه کنار شماست تا تجربه‌ای بدون دغدغه داشته باشید. 🌍💙 فرقی ندارد که سفر کاری دارید یا تفریحی، ایرنیجا همیشه بهترین انتخاب‌ها را برایتان فراهم می‌کند. سریع، مطمئن و اقتصادی، همین حالا رزرو کنید و سفری خاطره‌انگیز بسازید! 🚀✅




        </p>
        <div className="corner-design"></div>
      </div>

      <style jsx>{`
        /* ساختار کلی */
        .awards-section {
          display: flex;
          flex-wrap: wrap;
          direction: rtl;
        }
        /* هر بخش در دسکتاپ 50% */
        .awards-left,
        .awards-right {
          width: 50%;
          box-sizing: border-box;
        }

        /* === بخش سمت چپ === */
        .awards-left {
          background: #f5fbf8;
          padding: 20px 40px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .top-left-link {
          align-self: flex-start;
          margin-bottom: 16px;
        }
        .honors-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: #2d9f9a;
          font-weight: 500;
          text-decoration: none;
          border: 2px solid #2d9f9a;
          padding: 6px 16px;
          border-radius: 30px;
          transition: all 0.3s;
          font-size: 0.85rem;
        }
        .honors-link:hover {
          background: #2d9f9a;
          color: #fff;
        }
        .left-header {
          text-align: center;
          margin-bottom: 20px;
        }
        .left-header h3 {
          font-size: 24px; /* کاهش اندازه عنوان از 28px به 24px */
          color: #1a444e;
          margin-bottom: 10px;
        }
        .iranija-logo {
          position: relative;
          display: inline-block;
        }
        .iranija-logo span {
          font-size: 16px; /* کاهش اندازه از 20px به 16px */
          color: #2d9f9a;
          z-index: 1;
          position: relative;
        }
        .underline {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 6px;
          background: rgba(45, 159, 154, 0.2);
          border-radius: 4px;
        }
        .trophy-wrapper {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .white-card {
          background: #fff;
          border-radius: 24px;
          padding: 30px;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
          max-width: 360px;
          width: 100%;
          text-align: center;
          margin-bottom: 16px;
          transition: transform 0.3s;
        }
        .white-card:hover {
          transform: translateY(-5px);
        }
        .trophy-image {
          width: 160px;
          height: 160px;
          object-fit: contain;
          margin: 10px auto 20px;
        }
        .hotel-name {
          margin-top: 10px;
        }
        .hotel-name span {
          font-size: 14px; /* کاهش اندازه متن از 16px به 14px */
          color: #1a444e;
        }
        .name-underline {
          width: 50px;
          height: 3px;
          background: #2d9f9a;
          margin: 8px auto 0;
        }
        .navigation-dots {
          display: flex;
          gap: 10px;
          justify-content: center;
          margin-top: 16px;
        }
        .dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #d9d9d9;
          border: none;
          cursor: pointer;
          transition: transform 0.3s, background 0.3s;
        }
        .dot.active {
          background: #2d9f9a;
          transform: scale(1.2);
        }

        /* === بخش سمت راست === */
        .awards-right {
          background: #db2f2f;
          padding: 20px 40px;
          position: relative;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          overflow: hidden;
        }
        .right-title {
          font-size: 22px; /* کاهش اندازه از 28px به 22px */
          line-height: 1.2;
          margin-bottom: 16px;
        }
        .right-title span {
          display: block;
        }
        .right-text {
          font-size: 14px; /* کاهش اندازه از 16px به 14px */
          line-height: 2;
          max-width: 600px;
          margin-bottom: 16px;
        }
        .corner-design {
          position: absolute;
          bottom: -30px;
          left: -30px;
          width: 160px;
          height: 160px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 50%;
        }

        /* واکنش‌گرا (ریسپانسیو) */
        @media (max-width: 1024px) {
          .awards-left,
          .awards-right {
            width: 100%;
            padding: 20px 30px;
          }
          .right-title {
            font-size: 20px;
          }
          .right-text {
            font-size: 13px;
            max-width: 100%;
          }
        }
        @media (max-width: 768px) {
          .awards-section {
            flex-direction: column;
          }
          .awards-left,
          .awards-right {
            width: 100%;
            padding: 16px 20px;
          }
          .left-header h3 {
            font-size: 20px;
          }
          .iranija-logo span {
            font-size: 14px;
          }
          .white-card {
            padding: 20px;
          }
          .trophy-image {
            width: 140px;
            height: 140px;
          }
          .right-title {
            font-size: 18px;
          }
          .right-text {
            font-size: 12px;
          }
        }
        @media (max-width: 480px) {
          .awards-left,
          .awards-right {
            padding: 12px;
          }
          .honors-link {
            padding: 4px 12px;
            font-size: 12px;
          }
          .left-header h3 {
            font-size: 18px;
          }
          .iranija-logo span {
            font-size: 12px;
          }
          .right-title {
            font-size: 16px;
          }
          .right-text {
            font-size: 11px;
          }
        }
      `}</style>
    </section>
  );
};

export default AwardsSection;