@extends('home.layout.app')

@section('title', 'About Us')

@section('content')
<main>
    <!-- Hero Section -->
    <section class="ark__about-hero">
        <div class="container">
            <div class="ark_about-wp">
                <div class="ark_about-left">
                    <div class="ark__about__heading">
                        <h3>
                            <span class="ark__brick--red">
                                {{ $about->hero_heading_highlight ?? 'A Fulfillment' }}
                            </span>
                            <span class="ark_block">
                                {{ $about->hero_heading_main ?? 'Logistics Company' }}
                            </span>
                        </h3>
                    </div>
                </div>

                <div class="ark_about-right">
                    @if(!empty($about->hero_description))
                    {!! $about->hero_description !!}
                    @else
                    <p>B62 Time Inc. (also Called B62 Freight Forwarder)</p>
                    <p>Utilizing Our Proprietary Performance Analytics, We Work With Customers To Deliver Tailored Solutions For All Of Your Complex On-Dock, Pick, Ship Operations.</p>
                    <p>B62 Freight Forwarder Is Currently Warehousing An Import Facility In Ontario CA. Total Occupancy. B62 Provides "Non-stop Support" To Global Trading Clients While B62 Collaborates With Businesses To Create Strategy For Maximum Performance, Eliminating Obstacles and Wastes. B62 Use Productivity Measurements For Improved Utilization Of Labor and Resources.</p>
                    <p>B62 Freight Forwarder Has Been Supporting Many Of The Largest Retail And E-Commerce Businesses In The Country, Holding The Service Accountable To The Highest Standards And Fulfilling The Desired Outcomes Of Our Clients.</p>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- Hero Banner Image -->
    <div class="ark__hero--banner-img ark_aboutpage_banner">
        @if($about->hero_banner_image ?? false)
        <img src="{{ asset('storage/' . $about->hero_banner_image) }}" alt="About Us Banner">
        @else
        <img src="{{ asset('assets/images/aboutpage-banner.jpg') }}" alt="About Us Banner">
        @endif
    </div>

    <!-- Summary Section -->
    <section class="ark__aboutpage-summary">
        <div class="container">
            <div class="ark_aboutsummary-wp">
                <div class="ark_summary-left">
                    <div class="ark__about__heading">
                        <h3>
                            <span class="ark__brick--red">
                                {{ $about->summary_heading_highlight ?? 'Comprehensive' }}
                            </span>
                            <span class="ark_block">
                                {{ $about->summary_heading_main ?? 'End-to-End Logistics Solutions' }}
                            </span>
                        </h3>
                    </div>

                    @if($about->summary_description ?? false)
                    {!! $about->summary_description !!}
                    @else
                    <p>
                        We provide a seamless logistics experience from <strong>Order Booking</strong> to <strong>Delivery Proof</strong>,
                        ensuring efficiency and reliability at every step. Our digital platform simplifies order
                        management, while secure <strong>Warehousing</strong> offers optimized storage. Smart <strong>Dispatch &
                            Routing</strong> minimizes delays, and verified <strong>Delivery Proof</strong> guarantees transparency. With
                        real-time tracking and 24/7 support, we deliver cost-effective, scalable solutions tailored
                        to your business needs. Trust us to handle your freight with precision and care.
                    </p>
                    @endif
                </div>

                <div class="ark_summary-right">
                    <img src="{{ asset('assets/images/logistics-solution.png') }}" alt="Logistics Solution">
                </div>
            </div>
        </div>
    </section>

    <!-- Workflow Automation Section -->
    <section class="ark__workflow-automation">
        <div class="container">
            <div class="ark__workflow-automation-wp">
                <div class="workflow-header">
                    <div class="ark__about__heading">
                        <h3>
                            <span class="ark__brick--red">
                                {{ $about->workflow_heading_highlight ?? 'Workflow' }}
                            </span>
                            <span class="ark_block">
                                {{ $about->workflow_heading_main ?? 'Automation' }}
                            </span>
                        </h3>
                    </div>
                    @if($about->workflow_description)
                    {!! $about->workflow_description !!}
                    @else
                    <p>
                        Through intelligent automation to reconstruct the full-link management of freight, our
                        solution integrates AI scheduling algorithms, real-time cargo tracking and intelligent
                        document processing systems to help logistics companies reduce labor costs by 30%, improve
                        order processing efficiency by 45%, and achieve seamless digital collaboration from
                        warehousing to delivery.
                    </p>
                    @endif
                </div>

                <div class="workflow-steps">
                    @if($workflowSteps->count() > 0)
                    @foreach($workflowSteps as $index => $step)
                    <div class="workflow-step">
                        <div class="row">
                            <span class="step-number">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                            <div>
                                <h4>{{ $step->title }}</h4>
                                <p>{!! nl2br(e($step->description)) !!}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <!-- Default Static Workflow Steps -->
                    <div class="workflow-step">
                        <div class="row">
                            <span class="step-number">01</span>
                            <div>
                                <h4>Order Booking</h4>
                                <p>We streamline your order booking process with seamless digital integration. Our platform allows real-time order entry, instant confirmation, and automated documentation. Customers can track status updates, while our team ensures accuracy and efficiency. With 24/7 support, we handle bulk bookings, urgent requests, and customized logistics solutions. Advanced analytics help optimize load planning, reducing costs and improving turnaround times.</p>
                            </div>
                        </div>
                    </div>
                    <div class="workflow-step">
                        <div class="row">
                            <span class="step-number">02</span>
                            <div>
                                <h4>Warehousing</h4>
                                <p>Our secure warehousing solutions offer optimized storage, inventory management, and cross-docking services. Equipped with climate control and advanced tracking, we ensure safe handling of goods. Real-time stock visibility, automated replenishment, and flexible space allocation enhance efficiency. Whether short-term or long-term storage, we provide scalable solutions tailored to your business needs, ensuring smooth supply chain operations.</p>
                            </div>
                        </div>
                    </div>
                    <div class="workflow-step">
                        <div class="row">
                            <span class="step-number">03</span>
                            <div>
                                <h4>Dispatch & Routing</h4>
                                <p>Efficient dispatch and intelligent routing minimize delays and fuel costs. Our dynamic route optimization software adjusts for traffic, weather, and delivery windows. Real-time GPS tracking ensures transparency, while automated alerts keep stakeholders informed. We manage fleet coordination, load balancing, and last-mile logistics, ensuring timely and cost-effective deliveries tailored to your requirements.</p>
                            </div>
                        </div>
                    </div>
                    <div class="workflow-step">
                        <div class="row">
                            <span class="step-number">04</span>
                            <div>
                                <h4>Delivery Proof</h4>
                                <p>​We provide digital proof of delivery (POD) with timestamped signatures, photos, and GPS verification. Our system generates instant notifications and automated reports for full transparency. Discrepancy resolution is quick, with archived records for audits. This ensures accountability, reduces disputes, and enhances customer trust in your logistics operations.</p>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="workflow-shape">
            <img src="{{ asset('assets/images/automation-shape.png') }}" alt="workflow-automation-shape" />
        </div>
    </section>

    <!-- Fee Explained Section -->
    <section class="ark-fee-explained">
        <div class="container">
            <div>
                <div class="ark__warehouse--wrap">
                    <div class="ark__about__heading">
                        <h3>
                            <span class="ark__brick--red">
                                {{ $about->cost_heading_highlight ?? 'Know Where' }}
                            </span>
                            <span class="ark_block">
                                {{ $about->cost_heading_main ?? 'Dollar Goes' }}
                            </span>
                        </h3>
                        <p>{{ $about->cost_subtitle ?? 'Every fee explained. Every dollar maximized for your success' }}</p>
                    </div>
                    <a class="ark__btn" href="#">
                        <span class="ark__btn-text">
                            {{ $about->cost_quote_button_text ?? 'QUOTE' }}
                        </span>
                        <span class="ark__btn-icon">
                            <img src="{{ asset('assets/images/btn-arrow.svg') }}" alt="icon">
                        </span>
                    </a>
                </div>

                <div class="feature-wp">
                    <div class="feature-grid">
                        @if($features->count() > 0)
                        @foreach($features as $feature)
                        <div class="feature-card">
                            <div class="feature-card-title">{{ $feature->title }}</div>
                            <div class="feature-card-text">{!! nl2br(e($feature->description)) !!}</div>
                        </div>
                        @endforeach
                        @else
                        <!-- Default Static Features -->
                        <div class="feature-card">
                            <div class="feature-card-title">End-To-End Cost Tracking</div>
                            <div class="feature-card-text">The historical bill comparison function helps enterprises identify hidden price increase channels within 3 years...</div>
                        </div>
                        <div class="feature-card">
                            <div class="feature-card-title">Dynamic Cost Sandbox</div>
                            <div class="feature-card-text">Based on the attributes of the goods (weight/volume/category) and timeliness requirements...</div>
                        </div>
                        <div class="feature-card">
                            <div class="feature-card-title">Smart Bargaining Cockpit</div>
                            <div class="feature-card-text">It has helped electronic accessories customers accurately anchor 13 optimizeable terms...</div>
                        </div>
                        <div class="feature-card">
                            <div class="feature-card-title">Funding Dashboard</div>
                            <div class="feature-card-text">From the completion of the receipt to the tariff deduction of the whole cycle...</div>
                        </div>
                        @endif
                    </div>

                    <div class="ark__hero--banner-img ark_aboutpage_banner feature-img">
                        @if($about->cost_image ?? false)
                        <img src="{{ asset('storage/' . $about->cost_image) }}" alt="Warehouse Worker">
                        @else
                        <img src="{{ asset('assets/images/warehouse-female-worker.png') }}" alt="Warehouse Worker">
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq-section">
        <div class="container">
            <div class="faq-header">
                <div class="ark__about__heading">
                    <h3>
                        <span class="ark__brick--red">Frequently</span>
                        <span class="ark_block">Asked Questions</span>
                    </h3>
                </div>

                <div class="faqmain-wp">
                    @if($faqs->count() > 0)
                    @foreach($faqs as $index => $faq)
                    <div class="faq-item {{ $loop->first ? 'active' : '' }}">
                        <div class="faq-question">
                            <div class="question-content">
                                <span class="question-number">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                                <span class="question-text">{{ $faq->title }}</span>
                            </div>
                            <span class="toggle-icon">{{ $loop->first ? '−' : '+' }}</span>
                        </div>
                        <div class="faq-answer">
                            <div class="faq-answer-content">
                                {!! nl2br(e($faq->description)) !!}
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <!-- Default Static FAQs -->
                    <div class="faq-item active">
                        <div class="faq-question">
                            <div class="question-content">
                                <span class="question-number">01</span>
                                <span class="question-text">Where Are Your Warehouses Located? Is It Possible To
                                    Visit The Site?</span>
                            </div>
                            <span class="toggle-icon">−</span>
                        </div>
                        <div class="faq-answer">
                            <div class="faq-answer-content">
                                Our Warehouse Is Located In Los Angeles, California, Close To Major Ports And
                                Airports. Customers Can Make An Appointment To Visit In Advance, And We Welcome
                                On-Site Visits.
                            </div>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">
                            <div class="question-content">
                                <span class="question-number">02</span>
                                <span class="question-text">What Platforms Do You Support For Order
                                    Processing?</span>
                            </div>
                            <span class="toggle-icon">+</span>
                        </div>
                        <div class="faq-answer">
                            <div class="faq-answer-content">
                                We support integration with major e-commerce platforms including Shopify,
                                WooCommerce, Amazon, eBay, and custom API connections for enterprise solutions.
                            </div>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">
                            <div class="question-content">
                                <span class="question-number">03</span>
                                <span class="question-text">What Services Does The Overseas Warehouse
                                    Provide?</span>
                            </div>
                            <span class="toggle-icon">+</span>
                        </div>
                        <div class="faq-answer">
                            <div class="faq-answer-content">
                                Our overseas warehouse provides comprehensive services including inventory storage,
                                order fulfillment, pick and pack, shipping coordination, returns processing, and
                                inventory management.
                            </div>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">
                            <div class="question-content">
                                <span class="question-number">04</span>
                                <span class="question-text">How Long Does It Take To Ship?</span>
                            </div>
                            <span class="toggle-icon">+</span>
                        </div>
                        <div class="faq-answer">
                            <div class="faq-answer-content">
                                Standard shipping typically takes 3-5 business days within the continental US.
                                Expedited shipping options are available for 1-2 day delivery. International
                                shipping times vary by destination.
                            </div>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">
                            <div class="question-content">
                                <span class="question-number">05</span>
                                <span class="question-text">How Do I Connect To The System? Is The API
                                    Supported?</span>
                            </div>
                            <span class="toggle-icon">+</span>
                        </div>
                        <div class="faq-answer">
                            <div class="faq-answer-content">
                                Yes, we provide a robust RESTful API with comprehensive documentation. You can
                                integrate directly through our API, use pre-built platform plugins, or work with our
                                technical team for custom integrations.
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
</main>
@endsection