---
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';
import HeroSection from '../components/sections/HeroSection.astro';
import BentoGrid from '../components/sections/BentoGrid.astro';
import ContactSection from '../components/sections/ContactSection.astro';
import FallbackSection from '../components/sections/FallbackSection.astro';
import { loadWaasConfigs } from '../utils/configLoader';
import { THEME_PRESETS } from '../utils/themePresets';

const { siteConfig, themeConfig, smtpConfig } = loadWaasConfigs(Astro.request.headers.get('user-agent') ?? '');
const activePreset = THEME_PRESETS[themeConfig.activePreset] || THEME_PRESETS.corporateDark;
const colors = activePreset.colors;

const sectionComponents: Record<string, any> = {
  hero: HeroSection,
  bento: BentoGrid,
  services: BentoGrid,
  contact: ContactSection
};
---

<Layout title={siteConfig.siteName} description={siteConfig.metaDescription}>
  <div 
    class="min-h-screen transition-colors duration-500 font-sans relative overflow-hidden"
    style={`background-color: ${themeConfig.customColors?.bg || colors.bg}; color: ${colors.text};`}
  >
    <Navbar />

    <main>
      {siteConfig.sectionsOrder.map((sectionKey) => {
        if (sectionKey === 'hero') {
          return <HeroSection config={siteConfig.hero} />;
        }
        if (sectionKey === 'bento' || sectionKey === 'services') {
          return <BentoGrid config={siteConfig.bento} />;
        }
        if (sectionKey === 'contact') {
          return <ContactSection contactConfig={siteConfig.contact} smtpConfig={smtpConfig} />;
        }
        return <FallbackSection sectionName={sectionKey} />;
      })}
    </main>

    <Footer />
  </div>
</Layout>