import type { HomeProcessProps, HomeStatisticsProps } from '@frontend/types/pages/home';

type HomeProcessCounterProps = {
    readonly process: HomeProcessProps;
    readonly statistics: HomeStatisticsProps;
};

export function HomeProcessCounter({ process, statistics }: HomeProcessCounterProps) {
    return (
        <>
            <section className="process-style02 bg-linear-gradient">
                <div className="container">
                    <div className="row mt-n2 mb-2-9 mb-lg-6">
                        <div className="col-lg-6 mt-2">
                            <div className="title-style01 wow fadeInUp" data-wow-delay="100ms">
                                <div className="heading-animation animation-style2">
                                    <div className="mb-2">
                                        <i className="fa-solid fa-asterisk text-primary rotate"></i>
                                        <span className="sub-title">{process.eyebrow}</span>
                                    </div>
                                    <h2 className="title-font display-4 font-weight-800 lh-1 ls-minus-2px mb-0">{process.title}</h2>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6 mt-2 wow fadeInUp" data-wow-delay="200ms">
                            <p className="mb-0 dusplay-28 display-lg-27 w-xxl-70 border-start-primary ps-lg-5">{process.summary}</p>
                        </div>
                    </div>
                    <div className="row mt-n1-9">
                        <div className="col-lg-6 mt-1-9">
                            <div className="process-right">
                                {process.steps.map((step, idx) => (
                                    <div className="process-box wow fadeInUp" data-wow-delay={`${(idx + 1) * 100}ms`} key={`${idx}-${step.heading}`}>
                                        <div className="process-icon flex-shrink-0">
                                            <span className="icon-circle">
                                                <span className="icon-inner-circle">&nbsp;</span>
                                            </span>
                                        </div>
                                        <div className="process-content flex-grow-1">
                                            {step.heading ? <h2 className="h3">{step.heading}</h2> : null}
                                            {step.text ? <p className="mb-0 w-xxl-80">{step.text}</p> : null}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <div className="col-lg-6 mt-1-9 wow fadeInUp" data-wow-delay="400ms">
                            <div className="ps-lg-4 image-hover">
                                <img src={process.imageUrl} alt="" title="" className="rounded" />
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section
                className="counter-style02 bg-img cover-background secondary-overlay"
                data-overlay-dark="9"
                data-background={statistics.backgroundUrl}
            >
                <div className="container-fluid position-relative z-index-9">
                    <div className="row mt-n2-9">
                        {statistics.items.map((item, idx) => (
                            <div className="col-sm-6 col-lg-3 mt-2-9 wow fadeInRight" data-wow-delay={`${(idx + 1) * 100}ms`} key={item.id}>
                                <div className="text-center counter-icon">
                                    <div className="counter-num">
                                        {item.count ? (
                                            <div className="odometer linear-gradient-text" data-count={item.count}>
                                                1
                                            </div>
                                        ) : null}
                                        {item.symbol}
                                    </div>
                                    <h3 className="mb-0 h5 font-weight-500 text-white">{item.label}</h3>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </>
    );
}