@extends('frontend::layouts.master')
@section('title')

@section('style')

@endsection

@section('content')

    <main>
        @includeIf('frontend::banner')
        {{-- image --}}
        <div class="relative">
            <div class="product-home-bg-setting pt-8 xl:pt-24 relative z-1">
                <div class="the-container py-6 xl:pb-12 xl:pt-24 text-whiten">
                    <div class="flex flex-wrap">
                        <div class="w-full lg:w-1/2">
                            <div class="about-side-image">
                                @if (!empty($data['about']['image']))
                                    <img src="{{ asset($data['about']['image']) }}"  class="lg:hidden mb-3" alt="" srcset="">
                                @endif 
                            </div>
                        </div>
                        <div class="w-full lg:w-1/2">
                            <div class="flex items-center flex-wrap -mx-2 rounded-lg bg-opwhiten">
                                <div class=" space-y-4 lg:px-3 pb-3">
                                    {{--
                                        NOTE: เนื้อหาจริงอยู่ใน CMS หลังบ้านแล้ว (About > detail) โค้ดชุดนี้คือโครงสำรองไว้สำหรับ copy เท่านั้น
                                    <div>
                                        @if (app()->getLocale() === 'en')
                                        <div class="about-intro">
                                            <div class="about-intro__head">
                                                <p class="about-intro__eyebrow">KOMKARNCHANG</p>
                                                <h2 class="about-intro__brand">Komkarnchang</h2>
                                                <p class="about-intro__tagline">A leading provider of cutting tools and sharpening services for industrial and general manufacturing.</p>
                                            </div>
                                            <ul class="about-intro__pains">
                                                <li>Dull saw blades?</li>
                                                <li>Drill bits breaking often?</li>
                                                <li>Rough edges after cutting?</li>
                                            </ul>
                                            <p class="about-intro__solution">Komkarnchang offers both <strong>cutting tools</strong> and <strong>sharpening services</strong> that solve the problem at its source.</p>
                                            <div class="about-intro__block">
                                                <h3 class="about-intro__title">Made to your specifications &mdash; serving customers since 1974</h3>
                                                <p>Komkarnchang specializes in manufacturing and custom-making cutting tools such as circular saw blades, drill bits, end mills, CNC (Computer Numerical Control) bits, boring bits, knives and profile cutters, made from PCD (Polycrystalline Diamond), TCT (Tungsten Carbide Tipped)/carbide or HSS (High Speed Steel), with a team ready to advise you at every stage of production.</p>
                                                <p class="about-intro__label">For industrial applications</p>
                                                <ul class="about-intro__materials">
                                                    <li>Solid wood</li>
                                                    <li>All engineered wood <span>Viva Board, Shera, Conwood, MDF (Medium-Density Fiberboard), HMR (High-Moisture Resistance), laminated wood</span></li>
                                                    <li>Plastic and acrylic</li>
                                                    <li>Steel</li>
                                                    <li>Aluminium</li>
                                                    <li>Paper</li>
                                                    <li>PCB <span>Printed Circuit Board</span></li>
                                                    <li>Cement board</li>
                                                    <li>Honeycomb board/panel <span>paper, aluminium, plastic honeycomb</span></li>
                                                </ul>
                                            </div>
                                            <div class="about-intro__services">
                                                <div class="about-intro__service">
                                                    <h4>Customized Orders</h4>
                                                    <p>Cutting tools made to your specifications</p>
                                                </div>
                                                <div class="about-intro__service">
                                                    <h4>Professional Re-sharpening</h4>
                                                    <p>Re-sharpening and carbide tipping</p>
                                                </div>
                                            </div>
                                            <ul class="about-intro__trust">
                                                <li>Precise to spec</li>
                                                <li>Fast sharpening</li>
                                                <li>Made to order</li>
                                                <li>Trusted for over 50 years</li>
                                            </ul>
                                        </div>
                                        @else
                                        <div class="about-intro">
                                            <div class="about-intro__head">
                                                <p class="about-intro__eyebrow">KOMKARNCHANG</p>
                                                <h2 class="about-intro__brand">คมการช่าง</h2>
                                                <p class="about-intro__tagline">ผู้นำด้านเครื่องมือตัดและบริการลับคมสำหรับงานอุตสาหกรรมและงานผลิตทั่วไป</p>
                                            </div>
                                            <ul class="about-intro__pains">
                                                <li>ใบเลื่อยไม่คม?</li>
                                                <li>ดอกสว่านหักบ่อย?</li>
                                                <li>ตัดแล้วขอบไม่เรียบ?</li>
                                            </ul>
                                            <p class="about-intro__solution">คมการช่างมีทั้ง<strong>เครื่องมือตัด</strong>และ<strong>บริการลับคม</strong>ที่ช่วยแก้ปัญหาตรงจุด</p>
                                            <div class="about-intro__block">
                                                <h3 class="about-intro__title">สั่งผลิตตามสเปกได้ ให้บริการมาตั้งแต่ปี พ.ศ. 2517</h3>
                                                <p>คมการช่าง เราคือผู้เชี่ยวชาญด้านการผลิตและรับสั่งทำเครื่องมือตัด เช่น ใบเลื่อยวงเดือน ดอกสว่าน ดอกเอ็นมิล ดอก CNC (Computer Numerical Control) ดอกเจาะ ใบมีด ดอกขึ้นรูปตามแบบ ทำจาก PCD (Polycrystalline Diamond), TCT (Tungsten Carbide Tipped)/คาร์ไบด์ หรือเหล็กไฮสปีดเกรด HSS (High Speed Steel) พร้อมทีมงานให้คำปรึกษาทุกขั้นตอนการผลิต</p>
                                                <p class="about-intro__label">สำหรับงานอุตสาหกรรม</p>
                                                <ul class="about-intro__materials">
                                                    <li>ไม้จริง</li>
                                                    <li>ไม้เทียมทุกชนิด <span>วีว่าบอร์ด เชอร์ร่า คอนวูด MDF (Medium-Density Fiberboard) HMR (High-Moisture Resistance) ลามิเนท (Laminated wood)</span></li>
                                                    <li>พลาสติก อะคริลิค</li>
                                                    <li>เหล็ก</li>
                                                    <li>อะลูมิเนียม</li>
                                                    <li>กระดาษ</li>
                                                    <li>PCB <span>Printed Circuit Board</span></li>
                                                    <li>ซีเมนต์บอร์ด <span>Cement Board</span></li>
                                                    <li>แผ่นรังผึ้ง <span>Honeycomb Board/Panel: paper, aluminum, plastic honeycomb</span></li>
                                                </ul>
                                            </div>
                                            <div class="about-intro__services">
                                                <div class="about-intro__service">
                                                    <h4>บริการผลิตเครื่องมือตัดตามสั่ง</h4>
                                                    <p>Customized Orders</p>
                                                </div>
                                                <div class="about-intro__service">
                                                    <h4>บริการลับคมและติดคาร์ไบด์</h4>
                                                    <p>Professional Re-sharpening</p>
                                                </div>
                                            </div>
                                            <ul class="about-intro__trust">
                                                <li>แม่นยำตามสเปก</li>
                                                <li>ลับคมได้เร็ว</li>
                                                <li>สั่งผลิตได้</li>
                                                <li>ลูกค้าไว้ใจมากกว่า 50 ปี</li>
                                            </ul>
                                        </div>
                                        @endif
                                    </div>
                                    --}}

                                    {!! !empty($data['about']['detail']) ? $data['about']['detail'] : '' !!}

                                    <div class="catalog-cta-wrap pt-2">
                                        <a class="catalog-cta"
                                            href="https://online.fliphtml5.com/hdlzh/omuq/"
                                            target="_blank"
                                            rel="noopener noreferrer">
                                            <span class="catalog-cta__icon" aria-hidden="true">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                                                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                                                </svg>
                                            </span>
                                            <span class="catalog-cta__label">@lang('frontend::lang.catalog_btn')</span>
                                            <span class="catalog-cta__arrow" aria-hidden="true">→</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-bb">
                    <div class="the-container 2xl:max-w-full">
                        <div class="flex-new flex-wrap-new xl:pt-8 ">
                            <div class="xl:w-1/5"></div>
                            <div class="w-full xl:w-4/5">
                                <div class="flex-new flex-wrap-new -mx-6">
                                    <div class="lg:px-6 flex-new flex-wrap-new ">
                                        @if (!empty($data['products']['list']))
                                            <div class="splide splide-product">
                                                <div class="splide__track">
                                                    <div class="splide__list">
                                                        @foreach ($data['products']['list'] as $list)
                                                            <div class="splide__slide">
                                                                <div class="w-full p-3 the-c-lessor">
                                                                    <div class="the-c anim-slide-in-bck">
                                                                        <div class="the-c-wrapper">
                                                                            <div class="the-c-img-wrapper full-url">
                                                                                @if (!empty($list['image']))
                                                                                    <div class="the-c-img">
                                                                                        <img
                                                                                            src="{{ asset($list['image']) }}" />
                                                                                    </div>
                                                                                @endif
                                                                                @if (!empty($list['url']))
                                                                                    <a class="z-20"
                                                                                        href="{{ $list['url'] }}"></a>
                                                                                @endif
                                                                            </div>
                                                                            <div class="the-c-detail full-url">
                                                                                <p class="the-c-title">
                                                                                    {{ !empty($list['name']) ? $list['name'] : '' }}
                                                                                </p>
                                                                                <p class="sub-lg-lighten line-lim lim-6">
                                                                                    {!! !empty($list['desc']) ? $list['desc'] : '' !!}</p>
                                                                                @if (!empty($list['url']))
                                                                                    <a href="{{ $list['url'] }}"></a>
                                                                                @endif
                                                                            </div>
                                                                            @if (!empty($list['start_at']))
                                                                                <p class="fln th-3 mt-3 ml-2">
                                                                                    {{ $list['start_at'] }}</p>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="w-full flex  justify-center 2xl:hidden">
                                            <div class="py-6 mx-auto">
                                                <button class="butn-loadm butn-w-2h full-url">@lang('frontend::lang.index_msg_13')
                                                    <a
                                                        href="{{ !empty($page_init['news_url']) ? $page_init['news_url'] : '' }}"></a>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="lg:w-1/5 hidden 2xl:block"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lg:w-4/5 2xl:w-full hidden 2xl:block">
                <div class="w-full sm:w-1/2 2xl:w-full flex items-center justify-center">
                    <div class="py-8 mx-auto">
                        <button class="butn-loadm butn-w-2h full-url">@lang('frontend::lang.index_msg_13')
                            <a href="{{ !empty($page_init['products_url']) ? $page_init['products_url'] : '' }}"></a>
                        </button>
                    </div>
                </div>
            </div>

            <!-- <div class="home-bg-setting2">
            </div> -->
        </div>
        @if (!empty($data['content']) || !empty($data['knowledge']))
        <div class="product-home-bg-setting2">
        @endif
        @if (!empty($data['content']))
            <div>
                <div class="the-container py-6 lg:py-12">
                    <div class="text-center pb-8">
                        <h2 class="uppercase th-6 fs-32 text-whiten">@lang('frontend::lang.index_msg_5')</h2>
                    </div>
                    <div class="flex flex-wrap">
                        <div class="lg:w-1/3"></div>
                        <div class="lg:w-2/3"> </div>
                    </div>
                    <div class="lg:px-6 flex flex-wrap">
                        @if (!empty($data['content']))
                            @foreach ($data['content'] as $content)
                                <div class="w-full sm:w-1/2 lg:w-1/3 2xl:w-1/4 py-3 px-4 2xl:mt-26">
                                    <div class="anim-slide-in-bck">
                                        <div class="hover:shadow-drop-2-center bg-whiten blg-crd full-url pb-3 rounded overflow-hidden">
                                            @if (!empty($content['image']))
                                                <div class="img-wrapper">
                                                    <img src="{{ asset($content['image']) }}" />
                                                </div>
                                            @endif

                                            <div class="space-y-2  p-[.5rem] md:px-6">
                                                @if (!empty($content['name']))
                                                    <p class="th-5 fs-20 leading-7 line-lim lim-2">
                                                        {{ $content['name'] }}</p>
                                                @endif

                                                @if (!empty($content['desc']))
                                                    <p class="th-3 line-lim lim-3">{!! $content['desc'] !!}</p>
                                                @endif

                                            </div>
                                            @if (!empty($content['start_at']))
                                                <p class="fln th-3 mt-3 ml-2">{{ $content['start_at'] }}</p>
                                                <p class="th-3 mt-3 ml-2 text-center">@lang('frontend::lang.popup_title_4') </a>
                                               
                                            @endif
                                            <a href="{{ !empty($content['url']) ? $content['url'] : '' }}"></a>
                                        </div>
                                        
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    @if (!empty($page_init['news_url']))
                        <div class="py-6">
                            <button class="butn-loadm butn-w-2h full-url mx-auto">@lang('frontend::lang.index_msg_13')
                                <a href="{{ $page_init['news_url'] }}"></a>
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        @endif

        @if (!empty($data['knowledge']))
            <div>
                <div class="the-container py-6 lg:py-12">
                    <div class="text-center pb-8">
                        <h2 class="uppercase th-6 fs-32 text-whiten">@lang('frontend::lang.knowledge_title')</h2>
                    </div>
                    <div class="knowledge-list knowledge-list--home">
                        @foreach ($data['knowledge'] as $item)
                            <a class="knowledge-card hover:shadow-drop-2-center bg-whiten blg-crd pb-3 rounded overflow-hidden" href="{{ !empty($item['url']) ? $item['url'] : '#' }}">
                                @if (!empty($item['image']))
                                    <div class="img-wrapper">
                                        <img src="{{ asset($item['image']) }}" alt="{{ !empty($item['name']) ? $item['name'] : '' }}" />
                                    </div>
                                @endif
                                <div class="space-y-2 p-[.5rem] md:px-6">
                                    @if (!empty($item['name']))
                                        <p class="th-5 fs-20 leading-7 line-lim lim-2">{{ $item['name'] }}</p>
                                    @endif
                                </div>
                                @if (!empty($item['start_at']))
                                    <p class="fln th-3 mt-3 ml-2">{{ $item['start_at'] }}</p>
                                @endif
                            </a>
                        @endforeach
                    </div>
                    @if (!empty($page_init['knowledge_url']))
                        <div class="py-6">
                            <button class="butn-loadm butn-w-2h full-url mx-auto">@lang('frontend::lang.index_msg_13')
                                <a href="{{ $page_init['knowledge_url'] }}"></a>
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        @endif
        @if (!empty($data['content']) || !empty($data['knowledge']))
        </div>
        @endif

        {{-- FAQ Accordion --}}
        <section class="faq-section" aria-labelledby="faq-heading">
            <div class="the-container py-10 lg:py-16">
                <div class="text-center pb-8">
                    <h2 id="faq-heading" class="uppercase th-6 fs-32 text-whiten">{{ $data['faq_page']['title'] ?? '' }}</h2>
                    <p class="faq-subtitle th-3 mt-3">{{ $data['faq_page']['subtitle'] ?? '' }}</p>
                </div>
                <div class="faq-accordion mx-auto">
                    @foreach ($data['faq'] ?? [] as $faq)
                        @if (!empty($faq['name']) && !empty($faq['desc']))
                            <details class="faq-item">
                                <summary class="faq-summary">
                                    <span class="faq-question">{{ $faq['name'] }}</span>
                                    <span class="faq-icon" aria-hidden="true"></span>
                                </summary>
                                <div class="faq-answer">
                                    <p>{{ $faq['desc'] }}</p>
                                </div>
                            </details>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    </main>
@endsection

@section('script')


@endsection