import type { HomeAboutProps } from '@frontend/types/pages/home';
import { marketingRoute } from '@frontend/lib/marketing-route';
import { Link } from '@inertiajs/react';

const ABOUT_EYEBROW = 'Who we are';

export function HomeAbout({
    title,
    intro,
    counterNumber,
    counterSymbol,
    counterText,
    smallImageUrl,
    largeImageUrl,
}: HomeAboutProps) {
    return (
        <section className="about-style bg-linear-gradient">
            <div className="container">
                <div className="row position-relative border-bottom mb-1-9 mb-md-2-9 mb-lg-6 pb-1-9 pb-md-2-9 pb-lg-6 z-index-9 mt-n2">
                    <div className="col-lg-3 mt-2">
                        <div className="wow fadeInUp" data-wow-delay="100ms">
                            <div className="title-style01">
                                <div>
                                    <i className="fa-solid fa-asterisk text-primary rotate"></i>
                                    <span className="sub-title">{ABOUT_EYEBROW}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-9 mt-2">
                        <div className="heading-animation animation-style2">
                            <h2 className="title-font display-4 font-weight-800 lh-1 ls-minus-2px mb-4">{title}</h2>
                            <p className="mb-0 w-lg-80 wow fadeInUp" data-wow-delay="300ms">
                                {intro}
                            </p>
                        </div>
                    </div>
                </div>
                <div className="row mt-n1-9">
                    <div className="col-lg-5 mt-1-9">
                        <div className="row justify-content-lg-between mt-n1-9">
                            <div className="col-sm-6 col-md-4 col-lg-6 mt-1-9 wow fadeInUp" data-wow-delay="100ms">
                                <div className="display-custom-4 text-primary ls-minus-2px">
                                    {counterNumber ? (
                                        <>
                                            <div className="odometer linear-gradient-text" data-count={counterNumber}>
                                                1
                                            </div>
                                            {counterSymbol ? <sup>{counterSymbol}</sup> : null}
                                        </>
                                    ) : null}
                                </div>
                                <h3 className="mb-0 h5 font-weight-500 w-xxl-80">{counterText}</h3>
                            </div>
                            <div className="col-sm-6 col-md-4 col-lg-5 mt-1-9 wow fadeInUp" data-wow-delay="200ms">
                                <div className="image-hover">
                                    <img src={smallImageUrl} alt="" title="" className="rounded w-100" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-7 mt-1-9">
                        <div className="row justify-content-between mt-n1-9">
                            <div className="col-sm-8 mt-1-9 wow fadeInUp" data-wow-delay="300ms">
                                <div className="image-hover">
                                    <img src={largeImageUrl} alt="" title="" className="rounded w-100" />
                                </div>
                            </div>
                            <div className="col-sm-4 mt-1-9 wow fadeInUp" data-wow-delay="400ms">
                                <div className="text-end">
                                    <Link href={marketingRoute('about')} className="circle-btn circle-hover ms-sm-auto">
                                        <span className="btn-text">Learn More</span>
                                        <i className="btn-dot"></i>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}