import { Link } from "react-router-dom";
import styles from "./About.module.css";
import Banner from "@/components/Banner";
import { useStore } from "@/store";
import ScrollReveal from "@/components/ScrollReveal";

const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";

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

    const banner = overview?.banner;
    const section1Data = overview?.section1Data?.items ?? [];

    const getLinkPath = (item: any) => {
        if(item.path.includes("{id}")) {
            return item.path.replace("{id}", item.label);
        }
        return item.path;
    }
    return (
        <div>
            <Banner
                title={banner?.title ?? ""}
                desc={banner?.content}
                backgroundImage={banner?.backgroundImage}
            />

            {section1Data.map((item: { title: string; content?: string; backgroundImage?: string; links?: { label: string; path: string }[] }, index: number) => (
                <section
                    key={index}
                    className={`${styles.section} ${index % 2 === 1 ? styles.sectionRight : ""}`}
                    style={{
                        backgroundImage: `url(${item.backgroundImage}), ${FALLBACK_GRADIENT}`,
                    }}
                >
                    <div
                        className={`${styles.content} ${index % 2 === 1 ? styles.contentRight : ""}`}
                    >
                        <ScrollReveal preset="slideUp">
                            <div className={styles.textBox}>
                                <h2 className={styles.title}>{item.title}</h2>
                                <p className={styles.desc}>{item.content}</p>
                                <div className={styles.links}>
                                    {item.links?.map((link: { label: string; path: string }) => (
                                        <span key={link.label}>
                                            <Link to={getLinkPath(link)}>{link.label}</Link>
                                        </span>
                                    ))}
                                </div>
                            </div>
                        </ScrollReveal>
                    </div>
                </section>
            ))}
        </div>
    );
}