import { Link, usePage } from '@inertiajs/react';
import { homeTestimonials, testimonialOwlOptions } from '@frontend/content/home-page';
import { testimonialsPageHero } from '@frontend/content/testimonials-page';
import { siteTemplateAsset } from '@frontend/content/site-assets';
import { breadcrumbBackgroundUrl } from '@frontend/lib/marketing-backgrounds';
import { marketingRoute } from '@frontend/lib/marketing-route';
import type { TestimonialsPageProps } from '@frontend/types/pages/testimonials';
import type { SharedData } from '@/types';

export function TestimonialsMain({ testimonials, clients }: TestimonialsPageProps) {
    const { marketingBackgrounds } = usePage<SharedData>().props;

    return (
        <>
            <section
                className="page-title-section top-position1 bg-img cover-background secondary-overlay"
                data-overlay-dark="8"
                data-background={breadcrumbBackgroundUrl(marketingBackgrounds)}
            >
                <div className="container">
                    <div className="row">
                        <div className="col-md-12 text-center">
                            <h1>{testimonialsPageHero.heading}</h1>
                            <ul>
                                <li>
                                    <Link href={marketingRoute('home')}>Home</Link>
                                </li>
                                <li>{testimonialsPageHero.breadcrumbCurrent}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section className="bg-secondary">
                <div className="container">
                    <div className="row justify-content-between mt-n2-6 mb-1-9 mb-md-6 mb-lg-10">
                        <div className="col-xxl-5 mt-2-6">
                            <div className="heading-animation animation-style2">
                                <div className="title-style01">
                                    <div className="mb-2">
                                        <i className="fa-solid fa-asterisk text-white rotate"></i>
                                        <span className="sub-title primary">{homeTestimonials.eyebrow}</span>
                                    </div>
                                    <h2 className="title-font display-4 font-weight-800 lh-1 ls-minus-2px mb-2-9 text-white">{testimonials.title}</h2>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-lg-8">
                                    <div>
                                        <div className="display-custom-2 font-weight-700">
                                            <div className="odometer linear-gradient-text" data-count={testimonials.counterNumber}>
                                                1
                                            </div>
                                            {testimonials.counterSymbol}
                                        </div>
                                        <h3 className="mb-2 h5 font-weight-500 text-white">{testimonials.counterText}</h3>
                                        <div>
                                            <i className="fa-solid fa-star display-28 text-primary"></i>
                                            <i className="fa-solid fa-star display-28 text-primary"></i>
                                            <i className="fa-solid fa-star display-28 text-primary"></i>
                                            <i className="fa-solid fa-star display-28 text-primary"></i>
                                            <i className="fa-solid fa-star display-28 text-primary"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-xxl-6 mt-2-6">
                            <div className="owl-carousel testimonial-carousel-one" data-owl={JSON.stringify(testimonialOwlOptions)}>
                                {testimonials.items.map((item) => (
                                    <div key={item.id}>
                                        <p className="display-sm-24 text-white font-weight-300 lh-lg mb-2-2">{item.quote}</p>
                                        <div className="d-flex align-items-center">
                                            <div className="flex-shrink-0 me-4 position-relative">
                                                <img src={item.avatarUrl} alt="" title="" className="rounded-circle" />
                                                <div className="testimonial-carousel-quote">
                                                    <img src={siteTemplateAsset('img/icons/quote-01.png')} alt="" title="" className="w-40px" />
                                                </div>
                                            </div>
                                            <div className="flex-grow-1">
                                                <h4 className="h6 mb-0 text-white">{item.name}</h4>
                                                <span className="display-31 text-white opacity6">{item.role}</span>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                    {clients.logos.length > 0 ? (
                        <div className="border-top border-color-light-white client-style01 pt-6">
                            <div className="row justify-content-center mt-n2-9">
                                {clients.logos.map((client) => (
                                    <div className="col-sm-4 col-lg mt-2-9" key={client.logo}>
                                        <div className="text-center client-logo">
                                            <img src={client.logo} alt={client.name} title={client.name} />
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ) : null}
                </div>
            </section>
        </>
    );
}