"use client";

import React from 'react'
import dynamic from 'next/dynamic'

// Swiper (~40kB) loads only on the client after the section is ready,
// keeping it out of the home page's initial JS bundle.
const MasterpiecesSlider = dynamic(() => import('./MasterpiecesSlider'), {
  ssr: false,
  loading: () => <div className="mt-10 min-h-[240px]" aria-hidden="true" />,
});

export default function DigitalMasterpieces() {
  return (
    <div className='DigitalMasterpieces bg-[#000] py-10'>
      <div className='max-w-[1200px] px-5 mx-auto'>
        <div className='text-center'>
            <h2 data-aos="zoom-in" className="text-[30px] md:text-[30px] lg:text-[52px] font-bold text-[#FFF] Manrope">
                Our Digital Masterpieces
            </h2>
        </div>

        <div className='pb-10'>
            <div className="mx-auto mt-10">
                <MasterpiecesSlider />
            </div>
        </div>
      </div>
    </div>
  )
}
