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 Projects from '../components/Beka/Projects';
import PageHero from '../components/Beka/PageHero';
import Footer from '../components/Beka/Footer';
import WhatsAppButton from '../components/Beka/WhatsAppButton';

export default function Projeler() {
  return (
    <div className="min-h-screen bg-white font-sans selection:bg-amber-600/30 selection:text-amber-900">
      <Head>
        <title>{getPageTitle('Projelerimiz | Beka Kaplama')}</title>
        <meta name="description" content="Tamamladığımız modern kaplama ve dekorasyon projelerimizden örnekler." />
      </Head>

      <Navbar />
      
      <main className="pt-0">
        <PageHero 
          title="Projelerimiz" 
          subtitle="Referanslarımız" 
          image="https://images.pexels.com/photos/1571470/pexels-photo-1571470.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
        />
        <Projects />
      </main>

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

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