import React, { ReactElement } from 'react';
import Head from 'next/head';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import Navbar from '../components/Beka/Navbar';
import Services from '../components/Beka/Services';
import PageHero from '../components/Beka/PageHero';
import Footer from '../components/Beka/Footer';
import WhatsAppButton from '../components/Beka/WhatsAppButton';

export default function Hizmetler() {
  return (
    <div className="min-h-screen bg-white font-sans selection:bg-amber-600/30 selection:text-amber-900">
      <Head>
        <title>{getPageTitle('Hizmetlerimiz | Beka Kaplama')}</title>
        <meta name="description" content="Akustik panel, PU cephe lambri, PVC mermer plaka ve 3D uygulamalar ile mekanlarınıza estetik ve güç katıyoruz." />
      </Head>

      <Navbar />
      
      <main className="pt-0">
        <PageHero 
          title="Hizmetlerimiz" 
          subtitle="Uzmanlık Alanlarımız" 
          image="https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
        />
        <Services />
      </main>

      <Footer />
      
      <WhatsAppButton />
    </div>
  );
}

Hizmetler.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};