import Banner from "@/components/Banner";
import styles from "./Founder.module.css";
import ParagraphSection from "@/components/layout/ParagraphSection";
import { useStore } from "@/store";

export default function AboutFounder() {
    const appConfig = useStore((s) => s.appConfig);
    const founder = appConfig?.about?.founder;

    const banner = founder?.banner;
    const section1Data = founder?.section1Data;
    const section2Data = founder?.section2Data;

    if (!founder) return null;

    return (
        <div>
            <Banner
                title={banner?.title ?? ""}
                subtitle={banner?.subtitle}
                desc={banner?.content}
                showBreadcrumb={banner?.showBreadcrumb ?? false}
                backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
            />

            {section1Data && (
                <ParagraphSection data={section1Data}>
                    <div className={styles.images}>
                        {section1Data.items?.map((item, index) => (
                            <div className={styles.imageItem} key={item.title}>
                                <img src={item.image} alt={item.title} />
                                <div className={styles.imageMask} />
                                <div className={styles.imageOverlay}>
                                    <div className={styles.imageOverlayTitle}>
                                        <span>{item.title}</span>
                                    </div>
                                    <div className={styles.imageOverlayDesc}>{item.content}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </ParagraphSection>
            )}

            {section2Data && (
                <section
                    className={styles.sectionFounder}
                    style={{
                        backgroundImage: section2Data.backgroundImage
                            ? `url(${section2Data.backgroundImage})`
                            : undefined,
                    }}
                >
                    <div className={styles.founderIntroduction}>
                        <h2>{section2Data.title}</h2>
                        <p>{section2Data.subtitle}</p>
                    </div>
                    <div className={styles.founderPhoto}>
                        <img src={section2Data.sideImage} alt="个人照" />
                        <div className={styles.founderPhotoContent}>
                            <p dangerouslySetInnerHTML={{ __html: section2Data.content ?? "" }} />
                        </div>
                    </div>
                </section>
            )}
        </div>
    );
}