import { ButtonCatalogSection } from './components/ButtonCatalogSection';
import { IconBadgeSection } from './components/IconBadgeSection';
import { CardSection } from './components/CardSection';

export const ComponentsContent = () => {
  return (
    <div className="pt-20 px-8 pb-16 flex flex-col gap-[121.5px] items-start justify-start max-w-[1440px]">
      {/* 헤더 */}
      <div className="flex flex-col gap-2 items-start justify-start self-stretch">
        <h1
          className="text-[#dfe2f3] font-korean text-3xl leading-9 font-medium self-stretch"
          style={{ letterSpacing: '-0.75px' }}
        >
          시스템 컴포넌트 카탈로그
        </h1>
        <p className="text-[#bcc9cd] font-korean text-body-2 leading-5 font-medium max-w-2xl">
          WING-OPS 해상 물류를 위한 시각적 아이덴티티 시스템입니다. 정밀도와 미션 크리티컬한 운영을
          위해 설계된 고밀도 산업용 인터페이스입니다.
        </p>
      </div>

      {/* 섹션 */}
      <ButtonCatalogSection />
      <IconBadgeSection />
      <CardSection />

      {/* 푸터 */}
      <div
        className="border-t border-solid border-[rgba(22,78,99,0.10)] p-8 flex flex-row items-center justify-between self-stretch"
        style={{ opacity: 0.4 }}
      >
        <span
          className="text-[#64748b] font-sans text-caption leading-[15px] font-bold uppercase"
          style={{ letterSpacing: '1px' }}
        >
          © 2024 WING-OPS 해상 시스템
        </span>
        <span
          className="text-[#22d3ee] font-korean text-caption leading-[15px] font-medium uppercase"
          style={{ letterSpacing: '1px' }}
        >
          전술 네비게이터 쉘 v2.4
        </span>
      </div>
    </div>
  );
};

export default ComponentsContent;