import { homePricing } from '@frontend/content/home-page';
import { marketingRoute } from '@frontend/lib/marketing-route';
import type { HomePricingProps, HomeRotatingTextProps, HomeUpdatesProps } from '@frontend/types/pages/home';
import { Link } from '@inertiajs/react';

type HomePricingBlogProps = {
    readonly pricing: HomePricingProps;
    readonly rotatingText: HomeRotatingTextProps;
    readonly updates: HomeUpdatesProps;
};

export function HomePricingBlog({ pricing, rotatingText, updates }: HomePricingBlogProps) {
    return (
        <>
            <section className="bg-linear-gradient pb-0">
                <div className="container">
                    <div className="row justify-content-between mt-n1-6">
                        <div className="col-xl-4 col-xxl-3 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-primary rotate"></i>
                                        <span className="sub-title">{homePricing.eyebrow}</span>
                                    </div>
                                    <h2 className="title-font display-4 font-weight-800 lh-1 ls-minus-2px mb-lg-2-9">{homePricing.title}</h2>
                                </div>
                            </div>
                            <div className="pricing-text rotating d-none d-lg-block wow fadeInUp" data-wow-delay="200ms">
                                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
                                    <path
                                        id="textPathTwo"
                                        d="M 85,0 A 85,85 0 0 1 -85,0 A 85,85 0 0 1 85,0"
                                        transform="translate(100,100)"
                                        fill="none"
                                        strokeWidth="0"
                                    ></path>
                                    <g fontSize="23.4px">
                                        <text textAnchor="start">
                                            <textPath className="coloring" xlinkHref="#textPathTwo" startOffset="0%">
                                                {rotatingText.pricing}
                                            </textPath>
                                        </text>
                                    </g>
                                </svg>
                                <div className="about-icon">
                                    <img src={homePricing.icon} alt="" title="" className="w-40px" />
                                </div>
                            </div>
                        </div>
                        <div className="col-xl-8 mt-1-6">
                            {pricing.plans.map((plan, index) => (
                                <div
                                    key={plan.id}
                                    className={plan.isMostPopular
                                        ? 'bg-primary rounded p-1-9 p-md-2-9 p-lg-6 position-relative wow fadeInUp'
                                        : 'bg-white border border-color-light-black rounded p-1-9 p-md-2-9 p-lg-6 mb-1-9 wow fadeInUp'}
                                    data-wow-delay={`${(index + 1) * 100}ms`}
                                >
                                    {plan.isMostPopular ? (
                                        <span className="d-inline-block text-primary rounded-bottom lh-1 px-4 pt-2 pb-3 bg-white position-absolute top-0 start-5">
                                            Most Popular
                                        </span>
                                    ) : null}
                                    <div className={`row align-items-center mt-n1-6${plan.isMostPopular ? ' pt-1-9 pt-md-0' : ''}`}>
                                        <div className="col-md-4 mt-1-6">
                                            <h3 className={`mb-4 h2${plan.isMostPopular ? ' text-white' : ''}`}>{plan.name}</h3>
                                            <p className={`mb-0${plan.isMostPopular ? ' text-white opacity8' : ''}`}>{plan.description}</p>
                                        </div>
                                        <div className="col-md-4 mt-1-6">
                                            <ul className="list-unstyled mb-0 list-style05 ps-0">
                                                {plan.features.map((feature) => (
                                                    <li className={plan.isMostPopular ? 'white' : ''} key={`${plan.id}-${feature}`}>
                                                        {feature}
                                                    </li>
                                                ))}
                                            </ul>
                                        </div>
                                        <div className="col-md-4 mt-1-6">
                                            <div className="ps-lg-4">
                                                <h4 className={`display-5 font-weight-800 mb-1-6${plan.isMostPopular ? ' text-white' : ''}`}>
                                                    <sup className="display-22 font-weight-600">$</sup>
                                                    {plan.price}
                                                    <span className="display-28 font-weight-600">{plan.billingSuffix}</span>
                                                </h4>
                                                <Link href={marketingRoute('contact')} className={plan.isMostPopular ? 'butn-style01 white' : 'butn-style01'}>
                                                    Get Started
                                                </Link>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div className="container position-relative z-index-1">
                    <div className="mb-1-9 text-center 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">Latest Updates</span>
                                </div>
                                <h2 className="title-font display-4 font-weight-800 lh-1 ls-minus-2px mb-0 w-sm-80 w-md-70 w-lg-60 w-xl-45 mx-auto">
                                    News updates
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div className="row g-xxl-5 mt-n1-9">
                        {updates.items.map((post, idx) => (
                            <div className="col-md-6 col-lg-4 mt-1-9 wow fadeInUp" data-wow-delay={`${(idx + 1) * 100}ms`} key={post.id}>
                                <article className="card card-style02">
                                    <div className="image-hover">
                                        <Link href={marketingRoute('updates.show', { update: post.slug })}>
                                            <img src={post.imageUrl} alt="" title="" className="rounded mb-1-6" />
                                        </Link>
                                    </div>
                                    <div className="card-body">
                                        <div className="d-flex align-items-center mb-3 card-text flex-wrap">
                                            <div className="card-img-text">
                                                <a href="#">{post.tag}</a>
                                            </div>
                                            <div className="card-line">
                                                <span className="d-block small font-weight-600 text-uppercase ps-2-9">{post.date}</span>
                                            </div>
                                        </div>
                                        <h3 className="h4 mb-0">
                                            <Link href={marketingRoute('updates.show', { update: post.slug })}>{post.title}</Link>
                                        </h3>
                                    </div>
                                </article>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </>
    );
}