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

function ServiceLearnMoreLink({ slug }: { slug: string }) {
    return (
        <Link href={marketingRoute('services.show', { service: slug })} className="butn-text">
            <span className="butn-wrap">
                <span className="butn-link">
                    <span className="butn-default">Learn More</span>
                    <span className="butn-hover">Learn More</span>
                </span>
                <span className="butn-icon">
                    <span className="icon-default">
                        <i className="ti-arrow-right"></i>
                    </span>
                    <span className="icon-hover">
                        <i className="ti-arrow-right"></i>
                    </span>
                </span>
            </span>
        </Link>
    );
}

export function ServicesMain({ hero, intro, marquee, cardsSection, cards, partners, faq, statistics, process }: ServicesPageProps) {
    const duplicatedLogos = [...partners.logos, ...partners.logos, ...partners.logos];

    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="bg-linear-gradient pb-4">
                <div className="container">
                    <div className="row mt-n1-9">
                        <div className="col-lg-8 mt-1-9">
                            <div className="row align-items-end justify-content-between mb-1-9">
                                <div className="col-lg-8 col-xxl-7">
                                    <div className="heading-animation animation-style2">
                                        <div className="title-style01 mb-1-6 mb-lg-0">
                                            <div>
                                                <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-0">{intro.title}</h2>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-lg-4">
                                    <p className="mb-0">{intro.summary}</p>
                                </div>
                            </div>
                            <div className="image-hover">
                                <img src={intro.imageMain} alt="" title="" className="rounded" />
                            </div>
                        </div>
                        <div className="col-lg-4 mt-1-9">
                            <div className="ps-xl-1-9">
                                <div className="image-hover mb-lg-2-6 d-none d-lg-block">
                                    <img src={intro.imageSide} alt="" title="" className="rounded" />
                                </div>
                                <div className="bg-secondary rounded p-4">
                                    <div className="row mt-n1-9">
                                        {intro.stats.map((stat, index) => (
                                            <div key={stat.label} className="col-sm-6 mt-1-9">
                                                <div
                                                    className={
                                                        index === 1
                                                            ? 'text-center border-sm-start border-color-light-white ps-sm-1-6 ps-xl-1-9'
                                                            : 'text-center'
                                                    }
                                                >
                                                    <div className="display-6 display-xxl-4 font-weight-800 lh-1 ls-minus-2px linear-gradient-text-primary">
                                                        <div className="odometer linear-gradient-text-primary" data-count={stat.count}>
                                                            1
                                                        </div>
                                                        +
                                                    </div>
                                                    <h3 className="mb-0 h6 text-white font-weight-700">{stat.label}</h3>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="scroll-section scroll-style01 pt-9 position-relative z-index-9">
                    <div className="scroll-track scroll-left pause-on-hover scroll-speed-6">
                        <div className="scroll-group">
                            {marquee.map((label) => (
                                <div key={label} className="scroll-item me-4">
                                    {label}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            <section className="bg-secondary">
                <div className="container">
                    <div className="row justify-content-lg-between align-items-end mb-1-9 mb-xl-6 mt-n1-6">
                        <div className="col-lg-8 mt-1-6">
                            <div className="heading-animation animation-style2">
                                <div className="title-style01 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">{cardsSection.eyebrow}</span>
                                    </div>
                                    <h2 className="title-font display-4 font-weight-800 text-white lh-1 ls-minus-2px mb-0">{cardsSection.title}</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="row mt-n1-9 mb-2-9 mb-lg-6 mb-xl-8">
                        {cards.map((card) => (
                            <div key={card.id} className="col-md-6 col-lg-4 mt-1-9">
                                <div className="card-style04">
                                    <div className="card-body">
                                        <div className="services-icon mb-6">
                                            <img src={card.iconUrl} alt="" title="" className="w-65px" />
                                        </div>
                                        <h3 className="mb-3">
                                            <Link
                                                href={marketingRoute('services.show', { service: card.slug })}
                                                className="text-white text-primary-hover"
                                            >
                                                {card.title}
                                            </Link>
                                        </h3>
                                        <p className="mb-2-9 mb-lg-6 mb-xl-9 text-white">{card.description}</p>
                                        <div className="border-top border-color-light-white mt-4 mt-lg-1-9 pt-4 pt-lg-1-9">
                                            <ServiceLearnMoreLink slug={card.slug} />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                    <div className="row align-items-center">
                        <div className="col-lg-3 d-none d-lg-block">
                            <h4 className="mb-0 text-white h6 position-relative z-index-9">Our partners</h4>
                        </div>
                        <div className="col-lg-9">
                            <div className="scroll-section">
                                <div className="scroll-track pause-on-hover scroll-left scroll-speed-9">
                                    <div className="scroll-group">
                                        {duplicatedLogos.map((logo, index) => (
                                            <div key={`${logo}-${index}`} className="scroll-item with-img">
                                                <img src={logo} alt="" title="" />
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="bg-linear-gradient faq-style01">
                <div className="container position-relative z-index-9">
                    <div className="heading-animation animation-style2">
                        <div className="title-style01 wow fadeInUp" data-wow-delay="100ms">
                            <div className="mb-2">
                                <i className="fa-solid fa-asterisk text-primary rotate"></i>
                                <span className="sub-title">{faq.eyebrow}</span>
                            </div>
                            <h2 className="title-font display-4 font-weight-800 lh-1 ls-minus-2px mb-1-9 mb-lg-2-9 w-lg-60 w-xxl-50">{faq.title}</h2>
                        </div>
                    </div>
                    <div className="row mt-n1-6 justify-content-between">
                        <div className="col-lg-5 col-xxl-4 mt-1-6 wow fadeInUp" data-wow-delay="100ms">
                            <div className="position-relative">
                                <div className="bg-primary overflow-hidden rounded position-relative">
                                    <div className="faq-name">support</div>
                                    <div className="faq-box">
                                        <h3 className="mb-0 text-white">{faq.ctaTitle}</h3>
                                        <div>
                                            <p className="text-white opacity7">{faq.ctaBody}</p>
                                            <Link href={marketingRoute('contact')} className="butn-style01 white">
                                                {faq.ctaButton}
                                            </Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="col-lg-7 mt-1-6">
                            <div className="accordion style1" id="accordion">
                                {faq.items.map((item, index) => (
                                    <div key={item.id} className="card wow fadeInUp" data-wow-delay={`${(index + 1) * 100}ms`}>
                                        <h2 className={index === 0 ? 'card-header mb-0' : 'mb-0 card-header'} id={item.headingId}>
                                            <button
                                                className={`accordion-button${item.expanded ? '' : ' collapsed'}${item.buttonClassName ? ` ${item.buttonClassName}` : ''}`}
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target={`#${item.id}`}
                                                aria-expanded={item.expanded}
                                                aria-controls={item.id}
                                            >
                                                <span>{item.question}</span>
                                            </button>
                                        </h2>
                                        <div
                                            id={item.id}
                                            className={`collapse${item.expanded ? ' show' : ''}`}
                                            role="region"
                                            aria-labelledby={item.headingId}
                                            data-bs-parent="#accordion"
                                        >
                                            <div className={`card-body${item.bodyClassName ? ` ${item.bodyClassName}` : ''}`}>
                                                <p className="mb-0">{item.answer}</p>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </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, index) => (
                            <div key={item.id} className="col-sm-6 col-lg-3 mt-2-9 wow fadeInRight" data-wow-delay={`${(index + 1) * 100}ms`}>
                                <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>

            <section className="process-style01">
                <div className="container">
                    <div className="heading-animation animation-style2">
                        <div className="title-style01 text-center mb-1-9">
                            <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 mx-auto w-sm-85 w-md-70 w-lg-60 w-xxl-40 mx-auto">{process.title}</h2>
                        </div>
                    </div>
                    <div className="row gx-xl-5 mb-2-9 mb-lg-6 mb-xl-8">
                        {process.steps.map((step, index) => (
                            <div key={step.step} className="col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay={`${(index + 1) * 100}ms`}>
                                <div className="process-box">
                                    <div className="image-hover mb-4 mb-md-1-9 mb-xl-2-9 d-inline-block rounded-pill">
                                        <img src={step.imageUrl} alt="" title="" className="rounded-pill" />
                                    </div>
                                    <span className="process-step mb-3">{step.step}</span>
                                    <h3 className="h5">{step.title}</h3>
                                    <p className="mb-0">{step.description}</p>
                                    <div className="process-line"></div>
                                </div>
                            </div>
                        ))}
                    </div>
                    <div className="text-center position-relative z-index-9 display-28 font-weight-700 text-secondary wow fadeInUp" data-wow-delay="200ms">
                        {process.trusted.prefix}
                        <div className="d-inline-block px-3 bg-primary rounded-pill display-28 font-weight-700 text-white mx-2">
                            <strong className="text-white font-weight-800 odometer" data-count={process.trusted.count}>
                                1200
                            </strong>
                            +
                        </div>
                        {process.trusted.suffix}
                    </div>
                </div>
            </section>
        </>
    );
}