{% extends "base.html" %}
{% block title %}Services | {{ site_settings.site_name }}{% endblock %}

{% block content %}

<!-- Professional Services for International Trade -->
<!-- Professional Services for International Trade -->
<section class="py-12 lg:py-16 bg-white relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-12" data-aos="fade-up">

            <h2 class="text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight mb-5"
                style="font-family: serif;">Professional Services for International Trade</h2>
            <p class="text-base text-slate-600 leading-relaxed font-medium">
                International business requires more than simply finding a product or supplier. Trade California
                provides support to help businesses better understand, communicate, and operate within the U.S. trade
                environment.
            </p>
        </div>

        <style>
            .custom-prose-list ul {
                list-style: none;
                padding-left: 0;
                margin-top: 0.75rem;
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
            }

            .custom-prose-list li {
                position: relative;
                padding-left: 1.25rem;
                font-size: 0.875rem;
                /* text-sm */
                color: #334155;
                /* slate-700 */
                line-height: 1.4;
            }

            .custom-prose-list li::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0.125rem;
                width: 0.875rem;
                /* 14px small tick icon */
                height: 0.875rem;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E");
                background-size: contain;
                background-repeat: no-repeat;
            }
        </style>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            <!-- Service 1 -->
            <div class="bg-white border border-slate-200 rounded-xl p-6 hover:border-indigo-200 hover:shadow-lg transition-all duration-300 flex flex-col h-full"
                data-aos="fade-up" data-aos-delay="100">
                <div
                    class="w-12 h-12 bg-indigo-50 border border-indigo-100 rounded-lg flex items-center justify-center mb-5">
                    <svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
                    </svg>
                </div>
                <h3 class="text-lg font-bold text-slate-900 mb-3 tracking-tight" style="font-family: serif;">U.S.
                    Logistics Support</h3>
                <p class="text-slate-600 text-sm leading-relaxed mb-4">
                    International trade requires careful coordination between suppliers, buyers, shipping companies,
                    ports, customs authorities, and logistics partners. Our logistics support may include:
                </p>
                <div class="custom-prose-list flex-grow mb-6">
                    <ul>
                        <li>Supplier & shipment coordination</li>
                        <li>Export logistics communication</li>
                        <li>Port & shipping coordination</li>
                        <li>Freight & transportation support</li>
                        <li>Documentation coordination</li>
                        <li>International shipment communication</li>
                    </ul>
                </div>
                <div class="mt-auto pt-4 border-t border-slate-100">
                    <p class="text-xs text-slate-500 font-medium leading-relaxed">
                        Our goal is to help make the movement of products from the United States to international
                        markets more efficient and organized.
                    </p>
                </div>
            </div>

            <!-- Service 2 -->
            <div class="bg-white border border-slate-200 rounded-xl p-6 hover:border-indigo-200 hover:shadow-lg transition-all duration-300 flex flex-col h-full"
                data-aos="fade-up" data-aos-delay="200">
                <div
                    class="w-12 h-12 bg-indigo-50 border border-indigo-100 rounded-lg flex items-center justify-center mb-5">
                    <svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
                    </svg>
                </div>
                <h3 class="text-lg font-bold text-slate-900 mb-3 tracking-tight" style="font-family: serif;">
                    International Business Consultancy</h3>
                <p class="text-slate-600 text-sm leading-relaxed mb-4">
                    Entering a new international market can be challenging. Trade California provides business
                    consultancy support for companies seeking to:
                </p>
                <div class="custom-prose-list flex-grow mb-6">
                    <ul>
                        <li>Identify international business opportunities</li>
                        <li>Explore U.S. products & suppliers</li>
                        <li>Develop international partnerships</li>
                        <li>Understand market opportunities</li>
                        <li>Connect with buyers & distributors</li>
                        <li>Develop cross-border business strategies</li>
                    </ul>
                </div>
                <div class="mt-auto pt-4 border-t border-slate-100">
                    <p class="text-xs text-slate-500 font-medium leading-relaxed">
                        We help businesses transform international opportunities into practical business relationships.
                    </p>
                </div>
            </div>

            <!-- Service 3 -->
            <div class="bg-white border border-slate-200 rounded-xl p-6 hover:border-indigo-200 hover:shadow-lg transition-all duration-300 flex flex-col h-full"
                data-aos="fade-up" data-aos-delay="300">
                <div
                    class="w-12 h-12 bg-indigo-50 border border-indigo-100 rounded-lg flex items-center justify-center mb-5">
                    <svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
                    </svg>
                </div>
                <h3 class="text-lg font-bold text-slate-900 mb-3 tracking-tight" style="font-family: serif;">U.S.
                    Product Consultancy</h3>
                <p class="text-slate-600 text-sm leading-relaxed mb-4">
                    Finding the right American product or supplier requires market knowledge, product understanding, and
                    professional communication. Our services may support:
                </p>
                <div class="custom-prose-list flex-grow mb-6">
                    <ul>
                        <li>Product identification</li>
                        <li>Supplier research</li>
                        <li>Product category analysis</li>
                        <li>U.S. manufacturer communication</li>
                        <li>Export opportunity assessment</li>
                        <li>International buyer requirements</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Alternative Design 1: Suggested Services Categories -->
<section class="py-12 lg:py-16 bg-slate-50 border-t border-slate-100 relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-12" data-aos="fade-up">
            <h2 class="text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight mb-5"
                style="font-family: serif;">SERVICES</h2>
            <p class="text-base text-slate-600 leading-relaxed font-medium mb-6">
                Use Services for expertise, consulting, technology, and business support.
            </p>

        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-6xl mx-auto">
            {% for service in services %}
            <div class="bg-blue-600 border border-blue-700 rounded-xl p-4 flex items-center justify-center text-center hover:bg-blue-700 hover:-translate-y-1 transition-all duration-300"
                data-aos="fade-up" data-aos-delay="{% cycle '100' '150' '200' '250' '300' '350' '400' '450' %}">
                <span class="font-bold text-white text-sm leading-tight">{{ service.title }}</span>
            </div>
            {% empty %}
            <div class="bg-blue-600 border border-blue-700 rounded-xl p-4 flex items-center justify-center text-center hover:bg-blue-700 hover:-translate-y-1 transition-all duration-300"
                data-aos="fade-up" data-aos-delay="100">
                <span class="font-bold text-white text-sm leading-tight">Business Matching & Partner</span>
            </div>
            <div class="bg-blue-600 border border-blue-700 rounded-xl p-4 flex items-center justify-center text-center hover:bg-blue-700 hover:-translate-y-1 transition-all duration-300"
                data-aos="fade-up" data-aos-delay="150">
                <span class="font-bold text-white text-sm leading-tight">U.S. Supplier Sourcing</span>
            </div>
            <div class="bg-blue-600 border border-blue-700 rounded-xl p-4 flex items-center justify-center text-center hover:bg-blue-700 hover:-translate-y-1 transition-all duration-300"
                data-aos="fade-up" data-aos-delay="200">
                <span class="font-bold text-white text-sm leading-tight">Export & Import Support</span>
            </div>
            <div class="bg-blue-600 border border-blue-700 rounded-xl p-4 flex items-center justify-center text-center hover:bg-blue-700 hover:-translate-y-1 transition-all duration-300"
                data-aos="fade-up" data-aos-delay="250">
                <span class="font-bold text-white text-sm leading-tight">Logistics & Supply-Chain
                    Coordination</span>
            </div>
            <div class="bg-blue-600 border border-blue-700 rounded-xl p-4 flex items-center justify-center text-center hover:bg-blue-700 hover:-translate-y-1 transition-all duration-300"
                data-aos="fade-up" data-aos-delay="300">
                <span class="font-bold text-white text-sm leading-tight">International Business
                    Representation</span>
            </div>
            <div class="bg-blue-600 border border-blue-700 rounded-xl p-4 flex items-center justify-center text-center hover:bg-blue-700 hover:-translate-y-1 transition-all duration-300"
                data-aos="fade-up" data-aos-delay="350">
                <span class="font-bold text-white text-sm leading-tight">Energy Project Consulting</span>
            </div>
            <div class="bg-blue-600 border border-blue-700 rounded-xl p-4 flex items-center justify-center text-center hover:bg-blue-700 hover:-translate-y-1 transition-all duration-300"
                data-aos="fade-up" data-aos-delay="400">
                <span class="font-bold text-white text-sm leading-tight">Healthcare Technology Consulting</span>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

{% if services_settings.bottom_large_image %}
<!-- Dynamic Large Image Section -->
<section class="py-12 lg:py-16 bg-white relative">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="rounded-3xl overflow-hidden shadow-2xl" data-aos="fade-up">
            <img src="{{ services_settings.bottom_large_image.url }}" alt="Services Banner"
                class="w-full h-auto object-cover max-h-[350px]">
        </div>
    </div>
</section>
{% endif %}





{% endblock %}