'use client';

import React from 'react';
import VerticalScrollWrapper from '@/components/for-people/VerticalScrollWrapper';
import HeroSection from '@/components/for-people/HeroSection';
import PillarsSection from '@/components/for-people/PillarsSection';
import WhyLoyalySection from '@/components/for-people/WhyLoyalySection';
import DiscoverDealsSection from '@/components/for-people/DiscoverDealsSection';
import EarnRewardsSection from '@/components/for-people/EarnRewardsSection';
import SpendAnywhereSection from '@/components/for-people/SpendAnywhereSection';
import AIRecommendationsSection from '@/components/for-people/AIRecommendationsSection';
import ExperienceSection from '@/components/for-people/ExperienceSection';
import FinalCTASection from '@/components/for-people/FinalCTASection';

const SECTIONS = [
  'Intro',
  'The Gap',
  'Save More',
  'Discover',
  'Earn',
  'Spend',
  'Intelligence',
  'Experience',
  'Get Started',
];

export default function ForPeoplePage() {
  return (
    <main style={{ background: '#ffffff' }}>
      <VerticalScrollWrapper sections={SECTIONS}>
        <HeroSection />
        <WhyLoyalySection />
        <PillarsSection />
        <DiscoverDealsSection />
        <EarnRewardsSection />
        <SpendAnywhereSection />
        <AIRecommendationsSection />
        <ExperienceSection />
        <FinalCTASection />
      </VerticalScrollWrapper>
    </main>
  );
}