import { Footer } from '@/src/layout/footer/v2';
import { MainHeader } from '@/src/layout/header';

import { Portal } from '@/src/sections/portal';
// import { ServiceDetailsSection } from '@/src/sections/service-details/v1';

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'SciTech | Service details',
  description: 'SciTech - IT Solutions and Services React Nextjs Template',
};

export default function Page() {
  return (
    <>
      <MainHeader />
      {/* Background Image Section */}
      <div
        style={{
          position: 'relative',
          backgroundImage: 'url(/assets/images/service/ServicePortal.png)', // Replace with your image path
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          height: '600px', // Adjust the height as needed
        }}
      >
        {/* Background Image Section */}
        <div
          className="relative h-[600px] bg-cover bg-center sm:h-[400px] md:h-[500px]"
          style={{
            backgroundImage: 'url(/assets/images/service/ServicePortal.png)',
          }}
        >
          {/* Headline over the background image */}
          <div className="absolute left-10 top-1/2 z-10 -translate-y-1/2 transform text-left text-white sm:left-6">
            <h1 className="mb-2 text-2xl font-bold sm:text-3xl md:text-4xl lg:text-2xl">
              Service Portal Management
            </h1>
            <h3 className=" text-lg font-normal sm:text-xl md:text-xl">
              Your Gateway to Seamless Self-Service
            </h3>
          </div>
        </div>

        {/* Gradient at the bottom */}
        <div
          style={{
            position: 'absolute',
            bottom: '0',
            left: '0',
            right: '0',
            height: '100px', // Adjust the height of the fade as needed
            background:
              'linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(252, 246, 246, 0.3) 100%)', // Gradient blend
          }}
        ></div>
      </div>
      <Portal />
      <Footer />
    </>
  );
}