'use client'

import * as React from 'react'
import { Property } from '@/lib/types'
import { Header } from '@/components/layout/header'
import { Footer } from '@/components/layout/footer'
import { HeroSection } from '@/components/home/hero-section'
import { ListingsSection } from '@/components/home/listings-section'
import { AboutSection } from '@/components/home/about-section'
import { ContactSection } from '@/components/home/contact-section'
import { PropertyDetailModal } from '@/components/property/property-detail-modal'

export default function HomePage() {
  const [selectedProperty, setSelectedProperty] = React.useState<Property | null>(null)

  return (
    <>
      <Header variant="transparent" />
      
      <main>
        <HeroSection />
        <ListingsSection onSelectProperty={setSelectedProperty} />
        <AboutSection />
        <ContactSection />
      </main>

      <Footer />

      <PropertyDetailModal
        property={selectedProperty}
        open={selectedProperty !== null}
        onOpenChange={(open) => !open && setSelectedProperty(null)}
      />
    </>
  )
}