import { Link } from '@inertiajs/react';
import { MarketingTestimonialsPartners } from '@frontend/components/sections/MarketingTestimonialsPartners';
import { marketingRoute } from '@frontend/lib/marketing-route';
import type { AboutPageProps } from '@frontend/types/pages/about';

export function AboutMain({ hero, intro, statistics, testimonials, partners, whoWeAre }: AboutPageProps) {
    return (
        <>
            <section
                className="page-title-section top-position1 bg-img cover-background secondary-overlay"
                data-overlay-dark="8"
                data-background={hero.backgroundData}
            >
                <div className="container">
                    <div className="row">
                        <div className="col-md-12 text-center">
                            <h1>{hero.heading}</h1>
                            <ul>
                                <li>
                                    <Link href={marketingRoute('home')}>Home</Link>
                                </li>
                                <li>{hero.breadcrumbCurrent}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section className="about-style8 bg-linear-gradient">
                <div className="container">
                    <div className="row align-items-xl-center mt-n1-9">
                        <div className="col-lg-6 mt-1-9 order-2 order-lg-1">
                            <div className="pe-lg-1-9">
                                <div className="heading-animation animation-style2">
                                    <div className="title-style01">
                                        <div className="mb-2">
                                            <i className="fa-solid fa-asterisk text-primary rotate"></i>
                                            <span className="sub-title">{intro.eyebrow}</span>
                                        </div>
                                        <h2 className="title-font display-4 font-weight-800 lh-1 ls-minus-2px mb-2-9">{intro.title}</h2>
                                    </div>
                                </div>
                                {intro.mission ? (
                                    <div className="d-flex align-items-center wow fadeInUp mb-1-6" data-wow-delay="100ms">
                                        <div className="flex-shrink-0 arrow-circle">
                                            <i className="fa-solid fa-briefcase display-28 text-primary font-weight-900"></i>
                                        </div>
                                        <div className="flex-grow-1">
                                            <p className="mb-0 w-md-70 w-xxl-55">{intro.mission}</p>
                                        </div>
                                    </div>
                                ) : null}
                                {intro.vision ? (
                                    <div className="d-flex align-items-center wow fadeInUp mb-1-6 mb-sm-2-6" data-wow-delay="200ms">
                                        <div className="flex-shrink-0 arrow-circle">
                                            <i className="fa-solid fa-eye display-28 text-primary font-weight-900"></i>
                                        </div>
                                        <div className="flex-grow-1">
                                            <p className="mb-0 w-md-70 w-xxl-55">{intro.vision}</p>
                                        </div>
                                    </div>
                                ) : null}
                                <div className="d-sm-flex align-items-center wow fadeInUp" data-wow-delay="300ms">
                                    <Link href={marketingRoute('services')} className="butn-style01 me-sm-2-2 my-2 my-sm-0">
                                        {intro.servicesCta}
                                    </Link>
                                    <div className="button-text my-2 my-sm-0 d-block d-sm-inline-block">
                                        <Link href={intro.howWeWorkHref} className="text-secondary text-primary-hover">
                                            {intro.howWeWorkLabel}
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6 mt-1-9 order-1 order-lg-2 wow fadeInUp" data-wow-delay="400ms">
                            <div className="image-hover">
                                <img src={intro.imageUrl} alt="" title="" className="rounded" />
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="counter-style01 pt-0 md">
                <div className="container-fluid px-lg-8 px-xxl-15">
                    <div className="row g-md-5 mt-n1-9">
                        {statistics.items.map((item, index) => (
                            <div
                                key={item.id}
                                className="col-sm-6 col-md-3 mt-1-9 wow fadeInUp"
                                data-wow-delay={`${(index + 1) * 100}ms`}
                            >
                                <div className="counter-block text-center">
                                    <div className="counter-inner">
                                        <div className="counter-no linear-gradient-text-secondary">
                                            {item.count ? (
                                                <>
                                                    <div className="odometer linear-gradient-text-secondary" data-count={item.count}>
                                                        1
                                                    </div>{' '}
                                                    {item.symbol}
                                                </>
                                            ) : (
                                                item.symbol
                                            )}
                                        </div>
                                    </div>
                                    <div className="counter-line"></div>
                                    <span className="display-lg-27">{item.label}</span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            <MarketingTestimonialsPartners testimonials={testimonials} partners={partners} />

            <section className="bg-linear-gradient">
                <div className="container position-relative z-index-9">
                    <div className="row align-items-start mt-n2-9">
                        <div className="col-lg-6 mt-2-9 wow fadeInUp" data-wow-delay="100ms">
                            <div className="heading-animation animation-style2">
                                <div className="title-style01">
                                    <div className="mb-2">
                                        <i className="fa-solid fa-asterisk text-primary rotate"></i>
                                        <span className="sub-title">{whoWeAre.title}</span>
                                    </div>
                                </div>
                            </div>
                            <div className="w-lg-90">
                                {whoWeAre.paragraphs.map((paragraph, index) => (
                                    <p key={paragraph} className={index < whoWeAre.paragraphs.length - 1 ? 'mb-1-6' : 'mb-0'}>
                                        {paragraph}
                                    </p>
                                ))}
                            </div>
                        </div>
                        <div className="col-lg-6 mt-2-9 wow fadeInUp" data-wow-delay="200ms">
                            <div className="ps-lg-4">
                                <div className="heading-animation animation-style2 mb-1-9">
                                    <div className="title-style01">
                                        <h2 className="title-font display-5 font-weight-800 lh-1 ls-minus-2px mb-0">{whoWeAre.objectivesTitle}</h2>
                                    </div>
                                </div>
                                <ul className="list-unstyled mb-0">
                                    {whoWeAre.objectives.map((objective) => (
                                        <li key={objective} className="d-flex mb-1-6">
                                            <div className="flex-shrink-0 me-3 mt-1">
                                                <i className="fa-solid fa-circle text-primary" style={{ fontSize: '8px' }}></i>
                                            </div>
                                            <p className="mb-0 flex-grow-1">{objective}</p>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}