---
import "swiper/swiper-bundle.css";
import Layout from "../../../layouts/Layout_3.astro";
import ImageXiazai from '../../../../public/template_2/xiazai.svg';
import { Image } from 'astro:assets';
import { getConfig, getTp3Extra } from "../../../../utils/config";
import { TP2_COLUMN_ABOUT_US, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from "../../../../utils/const";
import { newsIndex } from "../../../../utils/rpc";
const config = getConfig(Astro)
const extra = getTp3Extra(config.app_extra_tag);
const {code, data} = await newsIndex(config.id, 3);

const breadcrumb = [{
    title: TP2_COLUMN_INDEX,
    url: TP2_COLUMN_INDEX_URL
}]
---

<Layout
    title={`${config.app_name}`}
    description={config.app_description}
    keywords={config.app_keywords}
    breadcrumb={breadcrumb}
>
    <!-- =========== Hero Section Start =========== -->
    <section
        class="sc1 relative pt-32 pb-32 overflow-x-hidden from-slate-500/10 bg-[url(../images/home/bg-1.png)] bg-no-repeat bg-cover"
        id="home">
        <div class="container">

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 items-center">
                <div class="text-sm py-20 px-10">
                    <span
                        class="inline-flex py-2 text-lg text-black font-medium items-center justify-center rounded-full">
                        <i data-lucide="minus"></i> {extra?.sc1?.text1}</span>
                    <h1 class="md:text-6xl/tight text-4xl text-dark tracking-normal leading-normal font-bold mb-4 mt-6">
                        {extra?.sc1?.text2} <span class="text-primary"> {config.app_name} </span></h1>
                    <p class="text-base font-medium text-muted leading-7 mt-5 capitalize">{extra?.sc1?.text3}</p>
                </div>

                <div class="mt-4 pt-2 sm:mt-0 sm:pt-0 relative">
                    <img src="template_3/furniture.png" alt="" class="h-[600px] max-w-full mx-auto">

                    <div class="absolute bottom-3/4 -end-14 2xl:end-8 hidden xl:block">
                        <div class="flex items-center gap-2 p-2 pe-6 rounded-full bg-white shadow-2xl">
                            <div class="rounded-full bg-primary h-9 w-9 items-center justify-center flex">
                                <Image src="/template_3/book.svg" class="h-6 w-6 text-white" width={100} height={100} alt="客服"/>
                            </div>
                            <div class="">
                                <h6 class="text-base font-medium text-default-900">{extra?.sc1?.text5}</h6>
                            </div>
                        </div>
                    </div>


                    <div class="absolute bottom-28 start-6 hidden xl:block">
                        <div class="flex items-center gap-2 p-2 pe-6 rounded-full bg-white shadow-2xl">
                            <div class="rounded-full bg-primary h-9 w-9 items-center justify-center flex">
                                <Image src="/template_3/kefu.svg" class="h-6 w-6 text-white" width={100} height={100} alt="客服"/>
                            </div>
                            <div class="">
                                <h6 class="text-base font-medium text-default-900">{extra?.sc1?.text4}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- Services Start sc2 -->
    <section id="services" class="py-20">
        <div class="container">
            <div class="max-w-2xl mx-auto text-center">
                <span
                    class="text-sm text-primary uppercase font-semibold tracking-wider text-default-950">{extra?.sc2?.text1}</span>
                <h2 class="text-3xl md:text-4xl/tight font-semibold text-black mt-4">{extra?.sc2?.text2}</h2>
                <p class="text-base font-medium mt-4 text-muted">{extra?.sc2?.text3}</p>
            </div>

            <div
                class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-x-3 gap-y-6 md:gap-y-12 lg:gap-y-24 md:pt-20 pt-12">

                <div class="text-center">
                    <div class="flex items-center justify-center">
                        <div
                            class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
                            <Image src={`/template_3/sc2_1.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
                        </div>
                    </div>
                    <h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text4}</h1>
                    <p class="text-base text-gray-600 mt-2">{extra?.sc2?.text5}</p>
                </div>

                <div class="text-center">
                    <div class="flex items-center justify-center">
                        <div
                            class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
                            <Image src={`/template_3/sc2_2.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
                        </div>
                    </div>
                    <h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text6}</h1>
                    <p class="text-base text-gray-600 mt-2">{extra?.sc2?.text7}</p>
                </div>

                <div class="text-center">
                    <div class="flex items-center justify-center">
                        <div
                            class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
                            <Image src={`/template_3/sc2_3.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
                        </div>
                    </div>
                    <h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text8}</h1>
                    <p class="text-base text-gray-600 mt-2">{extra?.sc2?.text9}</p>
                </div>

                <div class="text-center">
                    <div class="flex items-center justify-center">
                        <div
                            class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
                            <Image src={`/template_3/sc2_4.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
                        </div>
                    </div>
                    <h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text10}</h1>
                    <p class="text-base text-gray-600 mt-2">{extra?.sc2?.text11}</p>
                </div>

                <div class="text-center">
                    <div class="flex items-center justify-center">
                        <div
                            class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
                            <Image src={`/template_3/sc2_5.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
                        </div>
                    </div>
                    <h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text12}</h1>
                    <p class="text-base text-gray-600 mt-2">{extra?.sc2?.text13}</p>
                </div>

                <div class="text-center">
                    <div class="flex items-center justify-center">
                        <div
                            class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
                            <Image src={`/template_3/sc2_6.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
                        </div>
                    </div>
                    <h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text14}</h1>
                    <p class="text-base text-gray-600 mt-2">{extra?.sc2?.text15}
                    </p>
                </div>

                <div class="text-center">
                    <div class="flex items-center justify-center">
                        <div
                            class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
                            <Image src={`/template_3/sc2_7.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
                        </div>
                    </div>
                    <h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text16}</h1>
                    <p class="text-base text-gray-600 mt-2">{extra?.sc2?.text17}</p>
                </div>

                <div class="text-center">
                    <div class="flex items-center justify-center">
                        <div
                            class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
                            <Image src={`/template_3/sc2_8.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
                        </div>
                    </div>
                    <h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text18}</h1>
                    <p class="text-base text-gray-600 mt-2">{extra?.sc2?.text19}</p>
                </div>
            </div>

        </div>
    </section>
    <!-- Services End -->

    <!-- Feature Start -->
    <section id="features" class="py-20">
        <div class="container">

            <div class="grid lg:grid-cols-2 items-center gap-6">
                <div class="flex items-center">
                    <img src="template_3/feature.jpg" class="h-[650px] rounded-xl mx-auto" alt="feature section">
                </div>

                <div class="lg:ms-5 ms-8">
                    <span class="text-sm text-primary uppercase font-semibold tracking-wider text-default-950">{extra?.sc3?.text1}</span>
                    <h2 class="text-3xl md:text-4xl/tight font-semibold text-black mt-4">{extra?.sc3?.text2}</h2>
                    <hr class="border-gray-200 my-6">
                    </hr>

                    <div class="flex items-start gap-5">
                        <div>
                            <div
                                class="w-12 h-12 rounded-full border border-dashed border-primary/40 bg-primary/10 flex items-center justify-center">
                                <Image src={`/template_3/sc3_1.svg`} height={24} width={24} alt="pic" class="text-base text-blue-600" />
                            </div>
                        </div>

                        <div>
                            <h4 class="text-xl font-semibold">{extra?.sc3?.text3}</h4>
                            <p class="text-base font-normal text-gray-500 mt-2">{extra?.sc3?.text4}</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-5 mt-8">
                        <div>
                            <div
                                class="w-12 h-12 rounded-full border border-dashed border-primary/40 bg-primary/10 flex items-center justify-center">
                                <Image src={`/template_3/sc3_2.svg`} height={24} width={24} alt="pic" class="text-base text-blue-600" />
                            </div>
                        </div>

                        <div>
                            <h4 class="text-xl font-semibold">{extra?.sc3?.text5}</h4>
                            <p class="text-base font-normal text-gray-500 mt-2">{extra?.sc3?.text6}</p>
                        </div>

                    </div>

                    <div class="flex items-start gap-5 mt-8">
                        <div>
                            <div
                                class="w-12 h-12 rounded-full border border-dashed border-primary/40 bg-primary/10 flex items-center justify-center">
                                <Image src={`/template_3/sc3_3.svg`} height={24} width={24} alt="pic" class="text-base text-blue-600" />
                            </div>
                        </div>

                        <div>
                            <h4 class="text-xl font-semibold">{extra?.sc3?.text7}</h4>
                            <p class="text-base font-normal text-gray-500 mt-2">{extra?.sc3?.text8}</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Feature End -->

    <!-- About Start -->
    <section id="about" class="py-20">
        <div class="container">

            <div class="grid lg:grid-cols-2 items-center gap-6">
                <div class="lg:ms-5 ms-8">
                    <div>
                        <span
                            class="text-sm text-primary uppercase font-semibold tracking-wider text-default-950">{extra?.sc5?.text1}</span>
                    </div>
                    <h2 class="text-3xl md:text-4xl/tight font-semibold text-black mt-4">{extra?.sc5?.text2}</h2>
                    <p class="text-base font-normal text-muted mt-6">{extra?.sc5?.text3}</p>
                </div>

                <div class="flex items-center">
                    <img src="template_3/feature-iphone.png" class="h-auto rounded-xl mx-auto"
                        alt="feature-image">
                </div>

            </div>
        </div>
    </section>
    <!-- About End -->

    <!-- Faqs Start -->
    <!-- Faqs End -->

    <!-- Testimonial Start -->
    <section id="testimonial" class="py-20">
        <div class="container">
            <div class="">
                <div class="text-center max-w-xl mx-auto">
                    <span class="text-sm text-primary uppercase font-semibold tracking-wider text-default-950">评价</span>
                    <h2 class="text-3xl md:text-4xl/tight font-semibold mt-4">获得广泛好评</h2>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-6 mt-14 items-center">
                <div class="relative">
                    <div class="swiper testi-swiper rounded-md relative px-1">
                        <div class="swiper-wrapper">
                            {
                                extra?.sc7?.text1?.map(item => {
                                    return <div class="swiper-slide">
                                        <div class="p-6 rounded-xl border border-default-200">
                                            <h3 class="text-xl font-semibold text-default-950">{item?.title}</h3>
                                            <p class="text-base font-normal mt-4 mb-4 text-muted">
                                                {item?.desc}
                                            </p>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Testimonial End -->

    <!-- Client Start -->
    <section class="py-20 bg-gray-50">
        <div class="container relative">
            <div class="">
                <div class="text-center max-w-xl mx-auto">
                    <h3 class="text-3xl md:text-4xl/tight font-semibold">{extra?.sc8?.text1}</h3>
                </div>
            </div>

            <div class="grid md:grid-cols-6 grid-cols-2 justify-center gap-[30px] mt-14">
                {
                    extra?.sc8?.logo.map(item => {
                        return <div class="mx-auto py-4">
                                    <img src={item.url} class="h-20" alt="">
                                </div>
                    })
                }
            </div>
        </div>
    </section>
    <!-- Client Start -->

    <!-- Blog Start -->
    <section id="blog" class="py-20">
        <div class="container">
            <div class="">
                <div class="text-center max-w-xl mx-auto">
                    <span
                        class="text-sm text-primary uppercase font-semibold tracking-wider text-default-950">{extra?.sc9?.text1}</span>
                    <h2 class="text-3xl md:text-4xl/tight font-semibold mt-4">{extra?.sc9?.text2}</h2>
                </div>
            </div>

            <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6 mt-14 items-center">
                {
                    data.map(item => {
                        return <div class="bg-white rounded-xl border">
                                    <div class="relative">
                                        <img style="aspect-ratio: 4 / 3;object-fit:cover" class="rounded-t-xl" src={item.cover} alt="">
                                    </div>
                                    <div class="flex py-6 px-6">
                                        <div>
                                            <a href={`/news/${item.id}`} class="text-xl text-black font-semibold line-clamp-2">{item.title}</a>
                                            <p class="mt-4 mb-6 text-gray-500 leading-6 desc">{item.description}</p>

                                            <div class="flex items-center justify-between gap-3 mt-4">
                                                <p class="flex font-medium text-muted">{item.created_at}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                    })
                }
            </div>
        </div>
    </section>
    <!-- Blog End -->
</Layout>
<style>
    .desc {
        -webkit-line-clamp: 1;
        overflow: hidden;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
</style>