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

export function HomeServices({ eyebrow, title, items }: HomeServicesProps) {
    return (
        <section className="bg-secondary service-style01">
            <div className="container">
                <div className="heading-animation animation-style2">
                    <div className="title-style01 text-center mb-2-9 mb-md-6 wow fadeInUp" data-wow-delay="100ms">
                        <div className="mb-2">
                            <i className="fa-solid fa-asterisk text-white rotate"></i>
                            <span className="sub-title primary">{eyebrow}</span>
                        </div>
                        <h2 className="title-font display-4 font-weight-800 lh-1 text-white ls-minus-2px mb-0 w-md-75 w-lg-65 w-xl-55 w-xxl-45 mx-auto">
                            {title}
                        </h2>
                    </div>
                </div>
                <div className="row mt-n1-9">
                    {items.map((svc, idx) => (
                        <div className="col-md-12 mt-1-9 wow fadeInUp" data-wow-delay={`${(idx + 1) * 100}ms`} key={svc.id}>
                            <div className="service-box">
                                <div className="row mt-n1-9">
                                    {svc.imageFirst ? (
                                        <>
                                            <div className="col-md-5 mt-1-9">
                                                <div className="service-img">
                                                    <img src={svc.imageUrl} alt="" title="" className="rounded" />
                                                    <span className="service-num">{svc.number}</span>
                                                </div>
                                            </div>
                                            <div className="col-md-7 mt-1-9">
                                                <ServiceContent svc={svc} />
                                            </div>
                                        </>
                                    ) : (
                                        <>
                                            <div className="col-md-7 mt-1-9 order-2 order-md-1">
                                                <ServiceContent svc={svc} />
                                            </div>
                                            <div className="col-md-5 mt-1-9 order-1 order-md-2">
                                                <div className="service-img">
                                                    <img src={svc.imageUrl} alt="" title="" className="rounded" />
                                                    <span className="service-num">{svc.number}</span>
                                                </div>
                                            </div>
                                        </>
                                    )}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}

function ServiceContent({ svc }: { svc: HomeServiceItemProps }) {
    return (
        <div className="service-content">
            <div>
                {svc.tag ? <span className="service-tag">{svc.tag}</span> : null}
            </div>
            <div className="service-title">
                <h3 className="h3">
                    <Link href={marketingRoute('services.show', { service: svc.slug })}>{svc.title}</Link>
                </h3>
                {svc.description ? <p className="mb-0 text-white opacity8 w-xl-80">{svc.description}</p> : null}
            </div>
        </div>
    );
}