{% extends "base.html" %}

{% block content %}
<!-- Hero Section -->
<section class="relative bg-white text-slate-900 overflow-hidden pt-8 md:pt-12 pb-10 md:pb-16">
    {% if home_settings.hero_background %}
    <div class="max-w-6xl mx-auto px-4 flex items-center justify-center relative z-0" data-aos="zoom-in" data-aos-duration="1200" data-aos-easing="ease-out-cubic">
        <img src="{{ home_settings.hero_background.url }}" alt="Hero Background"
            class="w-full h-auto max-h-[35vh] sm:max-h-[45vh] md:max-h-[50vh] object-contain object-center rounded-2xl">
    </div>
    {% endif %}

    <div
        class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6 md:mt-8 flex flex-col items-center justify-center text-center">
        {% if home_settings.hero_headline %}
        <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4" data-aos="fade-down">{{ home_settings.hero_headline }}</h1>
        {% endif %}

        {% if home_settings.hero_subtext %}
        <p class="text-base sm:text-lg md:text-xl mb-6 md:mb-8 text-slate-600 max-w-3xl px-2 sm:px-0" data-aos="fade-up" data-aos-delay="200">{{ home_settings.hero_subtext }}</p>
        {% endif %}

        {% if home_settings.hero_cta_text and home_settings.hero_cta_link %}
        <a href="{{ home_settings.hero_cta_link }}"
            class="relative overflow-hidden inline-block bg-indigo-900 text-white font-semibold py-3 px-6 rounded-lg shadow-lg group border border-transparent hover:border-indigo-900"
            data-aos="zoom-in" data-aos-delay="400">
            <span
                class="absolute inset-0 bg-white transform -translate-y-full transition-transform duration-500 ease-in-out group-hover:translate-y-0"></span>
            <span class="relative z-10 group-hover:text-indigo-900 transition-colors duration-500">{{
                home_settings.hero_cta_text }}</span>
        </a>
        {% endif %}

        <div class="mt-6 md:mt-8 mb-10 md:mb-0 w-full text-center" data-aos="fade-up" data-aos-delay="600">
            <h2 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-black tracking-[0.1em] sm:tracking-[0.2em] drop-shadow-sm uppercase leading-tight"
                style="color: #1E3A8A;">
                FROM CALIFORNIA TO THE WORLD .
            </h2>
        </div>
    </div>
</section>

<!-- Introduction Section -->
<section class="py-10 md:py-12 lg:py-16 bg-white border-b border-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="flex flex-col md:flex-row md:items-start md:gap-10 lg:gap-14 xl:gap-20">

            <!-- Left Side: Image -->
            <div class="w-full md:w-1/2 lg:w-5/12 mb-8 md:mb-0" data-aos="fade-right">
                <div
                    class="rounded-2xl overflow-hidden border border-slate-100 relative aspect-[4/3] sm:aspect-video md:aspect-square lg:aspect-[4/3]">
                    {% if home_page_settings.overview_image %}
                    <img src="{{ home_page_settings.overview_image.url }}" alt="Overview"
                        class="w-full h-full object-cover">
                    {% else %}
                    <!-- Perfect default dummy image from Unsplash -->
                    <img src="https://images.unsplash.com/photo-1586528116311-ad8ed7c508b0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"
                        alt="Global Trade" class="w-full h-full object-cover">
                    {% endif %}
                </div>
            </div>

            <!-- Right Side: All Text (Title, Tagline, Content) -->
            <div class="w-full md:w-1/2 lg:w-7/12 flex flex-col" data-aos="fade-left" data-aos-delay="100">

                <h2
                    class="text-2xl sm:text-3xl lg:text-4xl xl:text-[42px] font-extrabold text-slate-900 tracking-tight leading-tight mb-4 sm:mb-5">
                    {% if home_page_settings.overview_title %}
                    {{ home_page_settings.overview_title|safe }}
                    {% else %}
                    <span class="text-[0.75em] text-slate-600 font-bold">Connecting</span> <span
                        class="text-indigo-600">American Opportunity</span> <br class="hidden lg:block" /> <span
                        class="text-[0.75em] text-slate-600 font-bold">with</span> <span class="text-indigo-600">Global
                        Markets.</span>
                    {% endif %}
                </h2>

                {% if home_page_settings.overview_tagline %}
                <div class="mb-5 sm:mb-6">
                    <p
                        class="text-[14px] sm:text-[15px] font-medium text-slate-500 italic border-l-[3px] border-indigo-900 pl-3.5 py-0.5">
                        "{{ home_page_settings.overview_tagline }}"
                    </p>
                </div>
                {% endif %}

                <div class="space-y-3 sm:space-y-4 text-[14px] sm:text-[15px] lg:text-[16px] text-slate-700 leading-relaxed">
                    {% if home_page_settings.overview_content %}
                    {{ home_page_settings.overview_content|safe }}
                    {% else %}
                    <p>
                        Founded by <strong class="text-slate-900 font-semibold">Andrew Hughan</strong>, former USAIF
                        professional, <span class="font-medium">Trade California</span> is a Sacramento,
                        California-based
                        international trade and business development platform operated by <strong
                            class="text-slate-900 font-semibold">American Green Technology, LLC.</strong>
                    </p>
                    <p>
                        Trade California connects global buyers, distributors, governments, and business partners with
                        trusted U.S.-based products, commodities, services, and business opportunities—helping build
                        meaningful connections between American businesses and international markets.
                    </p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Products -->
<section id="featured-products" class="pt-16 md:pt-24 pb-10 md:pb-16 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <h2 class="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 text-center text-slate-900" data-aos="fade-up">Featured Trading</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
            {% for product in featured_products %}
            <div class="group block bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm hover:border-blue-900 transition-colors duration-300 flex flex-col h-full"
                data-aos="fade-up" data-aos-delay="{{ forloop.counter0|add:1 }}00">
                <div class="h-56 sm:h-64 md:h-72 bg-slate-50 relative flex-shrink-0 p-3 rounded-xl">
                    {% if product.image %}
                    <div class="w-full h-full rounded-lg overflow-hidden relative shadow-sm bg-white">
                        <img src="{{ product.image_thumbnail.url }}" alt="Featured Product"
                            class="w-full h-full object-contain" loading="lazy">
                        {% if product.is_featured %}
                        <div
                            class="absolute top-2 right-2 bg-indigo-900/40 backdrop-blur-md border border-white/30 text-white text-[9px] font-bold px-2.5 py-0.5 rounded-full shadow-sm z-10">
                            FEATURED</div>
                        {% endif %}
                    </div>
                    {% else %}
                    <div
                        class="w-full h-full flex flex-col items-center justify-center text-slate-400 bg-slate-50 relative rounded-lg overflow-hidden">
                        <svg class="w-8 h-8 mb-2 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                            </path>
                        </svg>
                        <span class="text-xs font-medium">No Image</span>
                        {% if product.is_featured %}
                        <div
                            class="absolute top-2 right-2 bg-indigo-600/60 backdrop-blur-md border border-indigo-200/30 text-white text-[9px] font-bold px-2.5 py-0.5 rounded-full shadow-sm z-10">
                            FEATURED</div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% empty %}
            <p class="col-span-full text-center text-gray-500">No featured products at the moment.</p>
            {% endfor %}
        </div>

        {% if featured_products.has_other_pages %}
        <div class="flex flex-col items-center justify-center mt-12 mb-8 w-full">
            <nav class="inline-flex rounded-xl shadow-[0_2px_10px_rgba(0,0,0,0.04)] bg-white p-1.5 border border-slate-100 w-full max-w-[280px] sm:max-w-none sm:w-auto overflow-x-auto justify-center"
                aria-label="Pagination">
                {% if featured_products.has_previous %}
                <a href="?page={{ featured_products.previous_page_number }}#featured-products"
                    class="relative inline-flex items-center px-2 sm:px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:bg-slate-50 hover:text-indigo-600 transition-all duration-200">
                    <span class="sr-only">Previous</span>
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                            clip-rule="evenodd" />
                    </svg>
                </a>
                {% endif %}

                <div class="flex space-x-1 items-center px-1 sm:px-2">
                    {% for i in featured_products.paginator.page_range %}
                    {% if featured_products.number == i %}
                    <span aria-current="page"
                        class="z-10 bg-indigo-600 text-white relative inline-flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-lg text-sm font-bold shadow-md shadow-indigo-200 transform scale-105 transition-all">
                        {{ i }}
                    </span>
                    {% else %}
                    <a href="?page={{ i }}#featured-products"
                        class="text-slate-500 hover:bg-slate-50 hover:text-indigo-600 relative inline-flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-lg text-sm font-medium transition-colors">
                        {{ i }}
                    </a>
                    {% endif %}
                    {% endfor %}
                </div>

                {% if featured_products.has_next %}
                <a href="?page={{ featured_products.next_page_number }}#featured-products"
                    class="relative inline-flex items-center px-2 sm:px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:bg-slate-50 hover:text-indigo-600 transition-all duration-200">
                    <span class="sr-only">Next</span>
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                            clip-rule="evenodd" />
                    </svg>
                </a>
                {% endif %}
            </nav>


        </div>
        {% endif %}
    </div>
</section>



<!-- About Trade California Section -->
{% if home_page_settings.about_section_title or home_page_settings.about_section_content %}
<section class="py-10 md:py-12 lg:py-16 bg-white border-t border-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row lg:items-start lg:gap-8 xl:gap-10">
            <!-- Left Side: Text -->
            <div class="w-full lg:w-[35%] xl:w-[30%] flex flex-col">
                <div class="mb-4 sm:mb-6 md:mb-8" data-aos="fade-up">
                    <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-slate-900">
                        {{ home_page_settings.about_section_title }}
                    </h2>
                </div>

                <style>
                    .about-section-content ul {
                        display: grid;
                        grid-template-columns: 1fr;
                        gap: 0.5rem;
                        margin-top: 0.75rem;
                        padding-left: 1rem;
                    }
                    .about-section-content ul li {
                        display: list-item;
                        margin-bottom: 0;
                    }
                    @media (min-width: 640px) {
                        .about-section-content ul {
                            grid-template-columns: auto auto;
                            column-gap: 2rem;
                            row-gap: 0.5rem;
                            margin-top: 1rem;
                            justify-content: start;
                            padding-left: 1.25rem;
                        }
                    }
                </style>
                <div class="text-slate-700 text-[13.5px] sm:text-[14px] md:text-[15.5px] leading-relaxed about-section-content"
                    data-aos="fade-up" data-aos-delay="100">
                    {{ home_page_settings.about_section_content|safe }}
                </div>
            </div>

            <!-- Right Side: Image -->
            <div class="w-full lg:w-[65%] xl:w-[70%] mt-10 lg:mt-0 flex flex-col justify-start" data-aos="fade-left"
                data-aos-delay="200">
                <div class="rounded-2xl overflow-hidden border border-slate-100 relative shadow-2xl w-full">
                    {% if home_page_settings.about_section_image %}
                    <img src="{{ home_page_settings.about_section_image.url }}" alt="About Trade California"
                        class="w-full h-auto block transition-transform duration-700 hover:scale-105">
                    {% else %}
                    <img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
                        alt="About Trade California"
                        class="w-full h-auto block transition-transform duration-700 hover:scale-105">
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- Big Image Section -->
<section class="py-10 md:py-12 lg:py-16 bg-white border-t border-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-center">
        <div class="w-full max-w-4xl lg:max-w-5xl rounded-xl sm:rounded-2xl shadow-lg sm:shadow-xl overflow-hidden relative border border-slate-100"
            data-aos="fade-up">
            {% if home_page_settings.bottom_large_image %}
            <img src="{{ home_page_settings.bottom_large_image.url }}" alt="Trade California"
                class="w-full h-auto block">
            {% else %}
            <img src="https://images.unsplash.com/photo-1449844908441-8829872d2607?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80"
                alt="Trade California" class="w-full h-[250px] sm:h-[400px] md:h-[500px] lg:h-[700px] object-cover">
            {% endif %}
        </div>
    </div>
</section>

{% endblock %}