import React from 'react';
import HeaderSection from './HeaderSection';
import InstructionsSection from './InstructionsSection';
import FormSection from './FormSection';
import FooterSection from './FooterSection';

const Layout: React.FC = () => {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      width: '100%',
      minHeight: '100vh',
      background: 'linear-gradient(180deg, rgba(210,232,246,1) 25%, rgba(249,244,241,1) 75%)',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '20px',
      boxSizing: 'border-box',
    }}>
      <HeaderSection style={{ flexGrow: 1, width: '100%', maxWidth: '1032.59px' }} />
      <InstructionsSection style={{ flexGrow: 1, width: '100%', maxWidth: '1032px' }} />
      <FormSection style={{ flexGrow: 1, width: '100%', maxWidth: '1032px' }} />
      <FooterSection style={{ flexGrow: 0, width: '100%', maxWidth: '773.81px', height: 'auto' }} />
    </div>
  );
};

export default Layout;