<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
  <link rel="icon" href="{{ site_branding.favicon_url }}">
    <title>{{ site_branding.browser_title }}</title>
    <style>
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: Arial, "Microsoft YaHei", sans-serif;
            background: #f5f5f7;
            color: #222;
            font-size: 15px;
        }
        a { text-decoration: none; color: inherit; }

        .topbar {
            background: #111;
            color: #fff;
            padding: 14px 24px;
        }
        .topbar-inner, .header-inner, .container {
            width: 1200px;
            max-width: calc(100vw - 48px);
            margin: 0 auto;
        }
        .topbar-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }
        .topbar-brand a {
            color: #fff;
            font-size: 20px;
            font-weight: 800;
        }
        .top-links {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .top-links a, .top-links span {
            color: #e8e8e8;
            font-size: 14px;
            white-space: nowrap;
        }
        .top-user {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px 6px 8px;
            background: rgba(255,255,255,0.08);
            border-radius: 999px;
        }
        .top-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            background: #eee;
        }

        .header {
            background: #fff;
            border-bottom: 1px solid #ececec;
        }
        .header-inner {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 20px 0;
        }
        .logo {
            min-width: 180px;
            font-size: 30px;
            font-weight: 800;
            letter-spacing: 0.5px;
        }
        .logo a { color: inherit; }
        .search {
            flex: 1;
            display: flex;
            gap: 10px;
        }
        .search input {
            flex: 1;
            height: 46px;
            border: 2px solid #111;
            border-radius: 12px;
            padding: 0 14px;
            font-size: 15px;
            outline: none;
        }
        .search button {
            width: 104px;
            border: none;
            background: #111;
            color: #fff;
            border-radius: 12px;
            font-size: 15px;
            cursor: pointer;
        }
        .header-actions a {
            margin-left: 16px;
            color: #333;
            font-size: 15px;
        }

        .container {
            margin-top: 24px;
            margin-bottom: 44px;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 220px 1fr 250px;
            gap: 18px;
            margin-bottom: 28px;
        }

        .panel, .quick-item, .shop-card, .product-card {
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .category-panel {
            padding: 18px;
        }
        .category-panel h3,
        .service-panel h3 {
            margin: 0 0 14px;
            font-size: 18px;
            font-weight: 800;
        }
        .category-panel a {
            display: block;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
            color: #333;
        }
        .category-panel a:last-child {
            border-bottom: none;
            color: #666;
        }

        .banner-panel {
            padding: 26px 28px;
            background: linear-gradient(135deg, #f9fafc 0%, #ffffff 100%);
        }
        .banner-panel h1 {
            margin: 0 0 12px;
            font-size: 34px;
            line-height: 1.3;
        }
        .banner-panel p {
            margin: 0 0 20px;
            color: #666;
            line-height: 1.8;
        }
        .btn-light, .btn-dark {
            display: inline-block;
            padding: 12px 18px;
            border-radius: 12px;
            font-size: 14px;
            margin-right: 10px;
        }
        .btn-light {
            background: #efefef;
            color: #222;
        }
        .btn-dark {
            background: #111;
            color: #fff;
        }

        .service-panel {
            padding: 18px;
        }
        .service-card {
            background: #fafafa;
            border-radius: 14px;
            padding: 14px 14px 12px;
            margin-bottom: 12px;
        }
        .service-card:last-child { margin-bottom: 0; }
        .service-card strong {
            display: block;
            margin-bottom: 8px;
            font-size: 15px;
        }
        .service-card p {
            margin: 0 0 10px;
            color: #666;
            line-height: 1.7;
            font-size: 13px;
        }
        .service-card a {
            color: #111;
            font-size: 13px;
            font-weight: 700;
        }

        .quick-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 14px;
            margin-bottom: 28px;
        }
        .quick-item {
            padding: 18px 10px;
            text-align: center;
        }
        .quick-item .icon {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .quick-item .label {
            font-size: 14px;
            color: #333;
        }

        .section {
            margin-bottom: 30px;
        }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .section-header h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 800;
        }
        .section-header a {
            color: #666;
            font-size: 14px;
        }

        .shop-card {
            padding: 24px;
        }
        .shop-card h3 {
            margin: 0 0 12px;
            font-size: 22px;
        }
        .shop-card p {
            margin: 0 0 14px;
            color: #666;
            line-height: 1.8;
        }
        .shop-navs {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .shop-navs a {
            padding: 8px 14px;
            background: #f5f5f5;
            border-radius: 999px;
            font-size: 14px;
            color: #333;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }
        .product-card {
            overflow: hidden;
            padding-bottom: 18px;
        }
        .product-card img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            display: block;
            background: #f0f0f0;
        }
        .product-card .product-name {
            font-size: 16px;
            font-weight: 700;
            padding: 14px 16px 8px;
        }
        .product-card .product-meta {
            color: #666;
            font-size: 13px;
            padding: 0 16px 4px;
        }
        .product-card .price {
            color: #d70018;
            font-size: 22px;
            font-weight: 800;
            padding: 8px 16px 12px;
        }
        .product-card .btn {
            display: inline-block;
            margin: 0 16px;
            padding: 10px 14px;
            background: #111;
            color: #fff;
            border-radius: 10px;
            font-size: 14px;
        }

        .footer {
            background: #111;
            color: #ddd;
            padding: 28px 0 36px;
            margin-top: 40px;
        }
        .footer .header-inner {
            display: block;
            padding: 0;
        }
        .footer-links a {
            margin-right: 18px;
            color: #ddd;
            font-size: 14px;
        }

        @media (max-width: 1100px) {
            .hero-grid { grid-template-columns: 1fr; }
            .quick-grid { grid-template-columns: repeat(3, 1fr); }
            .product-grid { grid-template-columns: repeat(2, 1fr); }
        }
    </style>
</head>
<body>
    <div class="topbar">
        <div class="topbar-inner">
            <div class="topbar-brand"><a href="/">{{ site_branding.site_name }}</a></div>
            <div class="top-links">
                <a href="/">首页</a>
                <a href="/products">全部商品</a>
                <a href="/cart">购物车</a>
                <a href="/orders">我的订单</a>
                <a href="/wallet">我的钱包</a>
                <a href="/addresses">地址管理</a>
                <a href="/account">用户主页</a>

                {% if session.get("biz_is_merchant") %}
                    <a href="/merchant/dashboard">商家后台主页</a>
                {% else %}
                    <a href="/merchant/apply">商家入驻申请</a>
                {% endif %}

                {% if session.get("biz_is_admin") %}
                    <a href="/admin/">管理员后台主页</a>
                    <a href="/admin/site-branding">站点设置</a>
                {% endif %}

                {% if session.get("biz_user_id") %}
                    <span class="top-user">
                        <img class="top-avatar" src="{{ session.get('biz_avatar_url') or '/uploads/avatars/default-avatar.png' }}" alt="头像">
                        <span>你好，{{ session.get("biz_display_name") }}</span>
                    </span>
                    <a href="/logout">退出</a>
                {% else %}
                    <a href="/firebase-login">登录</a>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="header">
        <div class="header-inner">
            <div class="logo"><a href="/">{{ site_branding.header_name }}</a></div>
            <form class="search" method="get" action="/search">
                <input type="text" name="q" placeholder="搜索商品、店铺、用户">
                <button type="submit">搜索</button>
            </form>
            <div class="header-actions">
                <a href="/products">全部商品</a>
                <a href="/wallet">我的钱包</a>
                <a href="/addresses">地址管理</a>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="hero-grid">
            <div class="panel category-panel">
                <h3>商品分类</h3>
                {% for c in categories %}
                    <a href="/products?category_id={{ c.category_id }}">{{ c.category_name }}</a>
                {% endfor %}
                <a href="/products">查看更多分类</a>
            </div>

            <div class="panel banner-panel">
                <h1>精选好物，轻松逛购<br>热门商品与优质店铺一站直达</h1>
                <p>随时浏览热销商品、发现优质店铺，购物车、订单、地址和钱包入口都已为你准备好。</p>
                <div>
                    <a class="btn-light" href="/products">立即购物</a>
                    <a class="btn-dark" href="/orders">查看订单</a>
                </div>
            </div>

            <div class="panel service-panel">
                <h3>商城服务</h3>
                <div class="service-card">
                    <strong>订单服务</strong>
                    <p>查询订单状态、支付情况和物流进度。</p>
                    <a href="/orders">查看订单</a>
                </div>
                <div class="service-card">
                    <strong>地址服务</strong>
                    <p>管理默认地址，提交订单时自动写入地址快照。</p>
                    <a href="/addresses">管理地址</a>
                </div>
                <div class="service-card">
                    <strong>钱包服务</strong>
                    <p>查看钱包余额与流水记录。</p>
                    <a href="/wallet">进入钱包</a>
                </div>
            </div>
        </div>

        <div class="quick-grid">
            <a class="quick-item" href="/products"><div class="icon">🛍️</div><div class="label">全部商品</div></a>
            <a class="quick-item" href="/cart"><div class="icon">🛒</div><div class="label">购物车</div></a>
            <a class="quick-item" href="/orders"><div class="icon">📦</div><div class="label">我的订单</div></a>
            <a class="quick-item" href="/wallet"><div class="icon">💳</div><div class="label">我的钱包</div></a>
            <a class="quick-item" href="/addresses"><div class="icon">📍</div><div class="label">地址管理</div></a>
        </div>

        <div class="section">
            <div class="section-header">
                <h2>推荐店铺</h2>
                <a href="/shops">查看更多</a>
            </div>

            {% if recommended_shops %}
            <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;">
                {% for shop in recommended_shops %}
                <div style="background:#fff; border-radius:18px; box-shadow:0 2px 10px rgba(0,0,0,0.05); padding:20px;">
                    <div style="display:flex; align-items:center; gap:14px; margin-bottom:14px;">
                        <img src="{{ shop.logo_url or '/uploads/avatars/default-avatar.png' }}" alt="{{ shop.shop_name }}"
                             style="width:72px; height:72px; border-radius:18px; object-fit:cover; background:#f0f0f0; border:1px solid #e9e9e9;">
                        <div style="min-width:0;">
                            <div style="font-size:20px; font-weight:800; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ shop.shop_name }}</div>
                            
                        </div>
                    </div>

                    <div style="color:#555; font-size:14px; line-height:1.8; min-height:76px; margin-bottom:14px;">
                        {{ shop.intro or '这个店铺暂时还没有填写简介。' }}
                    </div>

                    <a href="/shop/{{ shop.shop_slug }}"
                       style="display:inline-block; padding:10px 14px; background:#111; color:#fff; border-radius:10px; font-size:14px;">
                        进入店铺主页
                    </a>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="shop-card">
                <p>暂无推荐店铺</p>
            </div>
            {% endif %}
        </div>

        <div class="section">
            <div class="section-header">
                <h2>热门商品</h2>
                <a href="/products">查看全部</a>
            </div>
            <div class="product-grid">
                {% for p in featured_products %}
                <div class="product-card">
                    <img src="{{ p.media_url }}" alt="{{ p.product_name }}">
                    <div class="product-name">{{ p.product_name }}</div>
                    <div class="product-meta">{{ p.category_name or '未分类' }}</div>
                    <div class="product-meta">库存：{{ p.stock }}</div>
                    <div class="product-meta">累计销量：{{ p.sold_count or 0 }}</div>
                    <div class="price">¥ {{ "%.2f"|format(p.price) }}</div>
                    <a class="btn" href="/products/{{ p.product_id }}">查看详情</a>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="header-inner">
            <div style="font-size:20px; font-weight:bold; margin-bottom:12px;">{{ site_branding.header_name }}</div>
            <div style="margin-bottom:10px;">当前数据概况：{{ product_count }} 个商品 · {{ shop_count }} 个店铺</div>
            <div class="footer-links">
                <a href="/">首页</a>
                <a href="/products">全部商品</a>
                <a href="/orders">我的订单</a>
                <a href="/wallet">我的钱包</a>
                <a href="/addresses">地址管理</a>
            </div>
        </div>
    </div>
</body>
</html>
