import Image from 'next/image';
import { EconomicCalendarSection } from '@/app/sections/economic-calendar/EconomicCalendarSection';
import { ChooseUsSection } from '@/app/sections/choose-us/page';
import { OurPartnerSection } from '@/app/sections/our-partner/page';
import ComplaintCenter from '../sections/contact_us/ComplaintCenter';
import { UnlockTradingSection } from '@/app/sections/unlock-trading/page';
import SliderHomeSection from '../sections/compro/home/slider_home/SliderHomeSection';

function HomeSection() {
  return (
    <div className="min-h-2 md:min-h-screen bg-linear-to-tr from-[#190D66]/70 via-[#000000]/70 to-[#190D66]/70">
      <section className="relative min-h-screen flex-row items-center justify-center overflow-hidden pb-50">
        {/* Hero Slider Section */}
        <div className="pt-20 md:pt-40 pb-40 md:pb-60">
          <div className="max-w-7xl mx-auto">
            <div className="w-full">
              {/** SliderHomeSection */}
              <SliderHomeSection />
            </div>
          </div>
        </div>

        <div className="container flex flex-col md:flex-row items-center md:ml-50">
          <div className="w-full md:max-w-3xl relative z-10 mb-6 md:mb-10 px-12 md:px-0">
            {/* About Us Title */}
            <h1 className="text-left text-[#FDD168] text-lg md:text-4xl font-light mt-8 md:mt-15 mb-6 md:mb-12">About Us</h1>

            {/* Main Heading */}
            <h2 className="text-white text-base md:text-5xl text-left mb-4 md:mb-8 leading-tight">
              Provides professional access to global forex markets, supported by advanced trading tools and reliable execution.
            </h2>

            {/* Subtitle */}
            <p className="text-gray-300 text-left text-sm md:text-lg mb-6 md:mb-12 max-w-xs md:max-w-3xl">
              Professional access to global forex markets, supported by modern trading tools and precise trade execution
            </p>
          </div>

          {/* Image Container */}
          <div className="relative w-full flex justify-center md:justify-end mt-2 md:mt-0 md:ml-auto -mr-0 md:-mr-4 lg:-mr-12">
            <div className="relative md:absolute md:-top-80 md:-right-60 rounded-2xl md:rounded-3xl overflow-hidden shadow-2xl w-64 h-60 md:w-[960px] md:h-auto">
              <Image
                src="/images/device_only.png"
                alt="Professional trading platform"
                width={400}
                height={300}
                className="w-full h-full object-cover md:w-[960px] md:h-auto max-w-none"
                priority
              />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default function HomePage() {
  return (
    <>
      {/* Home Section */}
      <section id="home">
        <HomeSection />
      </section>

      {/* Economic Calendar Section */}
      <section id="economic-calendar">
        <EconomicCalendarSection />
      </section>

      {/* Choose Us Section */}
      <section id="choose-us">
        <ChooseUsSection />
      </section>

      {/* Our Partner Section */}
      <section id="our-partner">
        <OurPartnerSection />
      </section>

      <section id="complaint-center">
        <div className="min-h-screen bg-linear-to-tr from-[#190D66]/70 via-[#000000]/70 to-[#190D66]/70">
          <ComplaintCenter />
        </div>
      </section>

      {/* Unlock Trading Section */}
      <section id="unlock-trading">
        <UnlockTradingSection />
      </section>
    </>
  );
}