{{ define "content" }}
<!-- Organization 结构化数据 -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "{{ .name }}",
    "url": "https://{{ .host }}/",
    "logo": "{{ .logo }}",
    "description": "{{ .description }}"
}
</script>

<!-- 轮播图区域 (放置在页面最上方) -->
<section class="banner" aria-label="首页轮播图">
    <div class="carousel">
        <div class="carousel-track">
            <div class="carousel-item active">
                <img src="/static/images/banner/home_banner_1.jpg" alt="{{.title}} - 首页轮播图1" loading="eager">
            </div>
            <div class="carousel-item">
                <img src="/static/images/banner/home_banner_2.jpg" alt="{{.title}} - 首页轮播图2" loading="lazy">
            </div>
        </div>
    </div>
</section>

<!-- 关于我们区域 -->
<section class="page-section about-section" aria-labelledby="about-title">
    <div class="page-container about-container">
        <div class="about-image animate-on-scroll slide-left">
            <img src="/static/images/banner/home_self.jpg" alt="{{.title}} - 公司简介图片" loading="lazy">
        </div>
        <div class="about-content animate-on-scroll slide-right">
            <h2 id="about-title" class="about-title">关于我们</h2>
            <p class="about-sub-title">ABOUT US</p>
            <div class="about-description">
                <p>{{.company_history}}</p>
            </div>
        </div>
    </div>
</section>

<!-- 我们的产品区域 -->
<section class="page-section page-section--dark products-section" aria-labelledby="product-title">
    <div class="page-container products-container">
        <h2 id="product-title" class="page-title animate-on-scroll fade-blur">我们的产品</h2>
        <p class="page-subtitle animate-on-scroll fade-blur delay-1">OUR PRODUCTS</p>
        
        <div class="products-content">
            <!-- 左侧产品分类菜单 -->
            <div class="product-categories">
                <ul>
                    {{ range $index, $category := .product_categories }}
                    {{ if eq $index 0 }}
                    <li class="active"><a href="#" category="{{ $category.id }}">{{ $category.name }}</a></li>
                    {{ else }}
                    <li><a href="#" category="{{ $category.id }}">{{ $category.name }}</a></li>
                    {{ end }}
                    {{ end }}
                </ul>
            </div>
            <!-- 右侧产品展示网格 -->
            <div class="product-grid">
                {{ range $index, $product := .products.products }}
                <a href="/products/{{ $product.id }}" class="product-card-link hover-shine" data-category="{{ $product.CategoryName }}">
                    <div class="product-card">
                        <div class="product-image">
                            <img src="{{ $product.image }}" alt="{{ $product.name }} - {{$.title}}产品" loading="lazy">
                        </div>
                        <div class="product-info">
                            <h3>{{ $product.name }}</h3>
                        </div>
                    </div>
                </a>
                {{ end }}
            </div>
        </div>
        
        <!-- 查看更多按钮 -->
        <div class="view-more">
            <a href="/products" class="btn-primary view-more-btn">查看更多产品</a>
        </div>
    </div>
</section>

<!-- 新闻资讯区域 -->
<section class="page-section news-section" aria-labelledby="news-title">
    <div class="page-container news-container">
        <h2 id="news-title" class="page-title animate-on-scroll fade-blur">新闻资讯</h2>
        <p class="page-subtitle animate-on-scroll fade-blur delay-1">NEWS</p>
        
        <div class="news-grid">
            {{ range $index, $news := .news_list }}
                {{ if lt $index 4 }}
                <a href="/news/{{ $news.id}}" class="animate-on-scroll slide-up">
                    <div class="news-card hover-shine">
                        <div class="news-info">
                            <h3>{{ $news.title }}</h3>
                            <p class="news-date">发布日期: {{ $news.date }}</p>
                        </div>
                    </div>
                </a>
                {{ end }}
            {{ end }}
        </div>
        
        <!-- 查看更多按钮 -->
        <div class="view-more">
            <a href="/news" class="btn-primary view-more-btn news-more-btn">查看更多新闻</a>
        </div>
    </div>
</section>

<!-- 合作伙伴区域 -->
<section class="page-section partners-section animate-on-scroll fade-up" aria-labelledby="partners-title">
    <div class="page-container partners-container">
        <h2 id="partners-title" class="page-title partners-title animate-on-scroll fade-blur">合作伙伴</h2>
        <p class="page-subtitle partners-sub-title animate-on-scroll fade-blur delay-1">PARTNERS</p>
        
        <div class="partners-slider">
            <div class="partners-track">
                {{range .partners}}
                    <div class="partner-item">
                        <img src="{{.logo}}" alt="合作伙伴: {{.website}}" loading="lazy">
                    </div>
                {{end}}
            </div>
        </div>
    </div>
</section>

{{ end }}