import Banner from "@/components/Banner";
import SwiperCardSection from "@/components/layout/SwiperCardSection";
import HonorGrids from "@/components/layout/HonorGrids";
import ParagraphSection from "@/components/layout/ParagraphSection";
import Section from "@/components/layout/Section";
import StatsRow from "@/components/layout/StatsRow/StatsRow";
import { useStore } from "@/store";
import styles from "./RuijingGroup.module.css";
import ScrollReveal from "@/components/ScrollReveal";

export default function RuijingGroup() {
    const appConfig = useStore((s) => s.appConfig);
    const data = appConfig?.business?.ruijingGroup;

    if (!data) return null;

    const banner = data.banner;
    const section1Data = data.section1Data;
    const section2Data = data.section2Data;
    const section3Data = data.section3Data;
    const section4Data = data.section4Data;

    const swiperCardData = section2Data
        ? {
              title: section2Data.title,
              cardItems: section2Data.cardItems?.map((c: { title: string; content: string; backgroundImage?: string }) => ({
                  title: c.title,
                  content: c.content,
                  backgroundImage: c.backgroundImage,
              })) ?? [],
          }
        : null;

    return (
        <div>
            <Banner
                title={banner?.title ?? ""}
                desc={banner?.content}
                titleSize={banner?.titleSize as "medium" | "large" | undefined ?? "medium"}
                backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
            />

            {section1Data && <ParagraphSection data={section1Data} />}
            {swiperCardData && <SwiperCardSection data={swiperCardData} />}

            {section3Data && (
                <Section
                    title={section3Data.title}
                    subtitle={section3Data.subtitle}
                    titleColor="#fff"
                    background="/images/bg-overview.png"
                    maskBackground="rgba(2,17,48,0.5)"
                >
                    <ScrollReveal preset="slideUp" amount={0.2} delay={0.5}>
                    <div className={styles.businessFeatureContent}>{section3Data.content}</div>
                    </ScrollReveal>
                    {section3Data.statsData && (
                        <StatsRow data={section3Data.statsData} color="#fff" />
                    )}
                </Section>
            )}

            {section4Data && <HonorGrids data={section4Data} />}
        </div>
    );
}