import { AppLayout } from '@/components/layout/AppLayout';
import { OrganizationProfileCard } from '@/features/settings/components/OrganizationProfileCard';
import { PayoutBankingCard } from '@/features/settings/components/PayoutBankingCard';
import { TeamSecurityCard } from '@/features/settings/components/TeamSecurityCard';
import { DeveloperSection } from '@/features/settings/components/DeveloperSection';
import { PaymentGatewayCard } from '@/features/settings/components/PaymentGatewayCard';

export default function Settings() {
  return (
    <AppLayout
      title="Settings"
      description="Manage platform configuration and critical operations."
    >
      <div className="space-y-6 max-w-[1200px]">
        {/* Top Grid: Identity & Banking */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto lg:h-[400px]">
          <OrganizationProfileCard />
          <PayoutBankingCard />
        </div>

        {/* Middle Grid: Gateways & Security */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto">
          <PaymentGatewayCard />
          <TeamSecurityCard />
        </div>

        {/* Collapsible Developer Section */}
        <DeveloperSection />
      </div>
    </AppLayout>
  );
}