'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Layout, Typography, Button, Space } from 'antd';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import EnhancedHero from '@/components/sections/EnhancedHero';
import WHOOSHShowcase from '@/components/sections/WHOOSHShowcase';
import BZZZShowcase from '@/components/sections/BZZZShowcase';
import SLURPShowcase from '@/components/sections/SLURPShowcase';
import COOEEShowcase from '@/components/sections/COOEEShowcase';
import IntegrationShowcase from '@/components/sections/IntegrationShowcase';
import SectionNavigation from '@/components/ui/SectionNavigation';
import ProgressIndicator from '@/components/ui/ProgressIndicator';

const { Content } = Layout;
const { Title, Paragraph } = Typography;

// Animation variants for Framer Motion
const fadeInUp = {
  hidden: { opacity: 0, y: 30 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: { duration: 0.6, ease: 'easeOut' }
  }
};

export default function HomePage() {
  return (
    <>
      <Header />
      <Layout className="min-h-screen bg-chorus-charcoal">
        <Content>
        {/* Enhanced Hero Section */}
        <EnhancedHero />

        {/* Component Showcase Sections */}
        <WHOOSHShowcase />
        <BZZZShowcase />
        <SLURPShowcase />
        <COOEEShowcase />
        <IntegrationShowcase />

        {/* CTA Section */}
        <section className="section-padding-sm">
          <div className="container-chorus">
            <motion.div
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              variants={fadeInUp}
              className="text-center max-w-3xl mx-auto"
            >
              <div className="glass-effect rounded-2xl p-8 md:p-12">
                <Title level={2} className="text-white mb-4">
                  Ready to Transform Your AI Workflow?
                </Title>
                <Paragraph className="text-lg text-gray-300 mb-8">
                  Join the next generation of AI orchestration with CHORUS Services.
                </Paragraph>
                <Space size="large" className="flex flex-wrap justify-center">
                  <Button 
                    type="primary" 
                    size="large"
                    className="btn-primary min-w-[140px] h-12"
                  >
                    Get Started
                  </Button>
                  <Button 
                    size="large"
                    className="btn-secondary min-w-[140px] h-12"
                  >
                    Learn More
                  </Button>
                </Space>
              </div>
            </motion.div>
          </div>
        </section>
        </Content>
      </Layout>
      <Footer />
      
      {/* Progress Indicator */}
      <ProgressIndicator />
      
      {/* Floating Section Navigation */}
      <SectionNavigation />
    </>
  );
}