<?php
require_once 'config.php';
require_once 'lang.php';

function tx($lang, $ja, $zh, $en) {
    if ($lang === 'zh') {
        return $zh;
    }
    if ($lang === 'en') {
        return $en;
    }
    return $ja;
}

$pdo = getDBConnection();
$currentLang = getCurrentLanguage();

if (isset($_GET['lang'])) {
    $lang = $_GET['lang'];
    if (in_array($lang, ['ja', 'zh', 'en'], true)) {
        setLanguage($lang);
    }
    $redirectParams = [];
    if (isset($_GET['purpose']) && $_GET['purpose'] !== '') {
        $redirectParams['purpose'] = $_GET['purpose'];
    }
    $redirectUrl = 'index.php';
    if (!empty($redirectParams)) {
        $redirectUrl .= '?' . http_build_query($redirectParams);
    }
    header('Location: ' . $redirectUrl);
    exit;
}

$purposeLabels = getPurposeTagLabelMap($currentLang, true, true, $pdo);

$selectedPurpose = $_GET['purpose'] ?? 'all';
if (!isset($purposeLabels[$selectedPurpose])) {
    $selectedPurpose = 'all';
}

$sql = "SELECT * FROM flowers WHERE status = 1";
$params = [];
if ($selectedPurpose !== 'all') {
    $sql .= " AND purpose_tag = ?";
    $params[] = $selectedPurpose;
}
$sql .= " ORDER BY id ASC";
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$flowers = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="<?php echo e($currentLang); ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo t('site_title'); ?></title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Shippori+Mincho+B1:wght@500;700&family=Noto+Sans+JP:wght@300;400;500&display=swap');

        :root {
            --ink:    #1a1a18;
            --body:   #fafaf7;
            --cream:  #f4f0e8;
            --line:   #e2dbd2;
            --forest: #1e3829;
            --fmid:   #2d5440;
            --gold:   #a07838;
            --muted:  #6b6b66;
            --rad:    4px;
        }

        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Noto Sans JP', sans-serif;
            font-weight: 300;
            color: var(--ink);
            background: var(--body);
            min-height: 100vh;
        }

        /* ─── SITE HEADER ─────────────────────────────────── */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: var(--forest);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            height: 60px;
            box-shadow: 0 2px 16px rgba(0,0,0,.22);
        }

        .site-logo {
            font-family: 'Cormorant Garamond', 'Shippori Mincho B1', serif;
            font-weight: 600;
            font-size: 1.25rem;
            color: #f5f0e6;
            letter-spacing: .07em;
            text-decoration: none;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 1.8rem;
        }

        .header-link {
            color: rgba(245,240,230,.75);
            text-decoration: none;
            font-size: .82rem;
            letter-spacing: .06em;
            transition: color .2s;
        }

        .header-link:hover { color: #f5f0e6; }

        .lang-switcher {
            display: flex;
            gap: 1px;
            border: 1px solid rgba(245,240,230,.22);
            border-radius: 3px;
            overflow: hidden;
        }

        .lang-switcher a {
            display: block;
            padding: .28rem .55rem;
            color: rgba(245,240,230,.65);
            text-decoration: none;
            font-size: .72rem;
            letter-spacing: .08em;
            transition: all .18s;
            background: transparent;
        }

        .lang-switcher a.active {
            background: rgba(245,240,230,.18);
            color: #f5f0e6;
        }

        .lang-switcher a:hover { color: #f5f0e6; }

        /* ─── HERO ────────────────────────────────────────── */
        .hero {
            background: linear-gradient(140deg, var(--forest) 0%, #2d5440 60%, #3a6b52 100%);
            color: #f5f0e6;
            padding: 5rem 2rem 4.5rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 60% 80% at 15% 110%, rgba(161,140,90,.18) 0%, transparent 60%),
                radial-gradient(ellipse 50% 60% at 85% -10%, rgba(90,140,110,.25) 0%, transparent 55%);
            pointer-events: none;
        }

        .hero-sub {
            font-size: .78rem;
            letter-spacing: .25em;
            color: rgba(245,240,230,.55);
            text-transform: uppercase;
            margin-bottom: 1.1rem;
        }

        .hero h1 {
            font-family: 'Cormorant Garamond', 'Shippori Mincho B1', serif;
            font-size: clamp(2.2rem, 5vw, 3.6rem);
            font-weight: 600;
            line-height: 1.15;
            letter-spacing: .02em;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: .92rem;
            color: rgba(245,240,230,.68);
            letter-spacing: .04em;
            margin-bottom: 2rem;
        }

        .hero-btns {
            display: flex;
            gap: .75rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-primary {
            display: inline-block;
            text-decoration: none;
            background: var(--gold);
            color: #fff;
            padding: .75rem 2rem;
            border-radius: var(--rad);
            font-size: .9rem;
            letter-spacing: .06em;
            font-weight: 500;
            transition: filter .18s, transform .16s;
        }

        .btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); }

        .btn-ghost {
            display: inline-block;
            text-decoration: none;
            color: rgba(245,240,230,.78);
            padding: .73rem 1.8rem;
            border-radius: var(--rad);
            border: 1px solid rgba(245,240,230,.3);
            font-size: .88rem;
            letter-spacing: .05em;
            transition: all .18s;
        }

        .btn-ghost:hover {
            background: rgba(245,240,230,.08);
            color: #f5f0e6;
        }

        /* ─── DIVIDER ─────────────────────────────────────── */
        .page-wrap {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 1.5rem 4rem;
        }

        .section-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            padding: 2.4rem 0 .9rem;
            border-bottom: 1px solid var(--line);
            margin-bottom: 1.5rem;
        }

        .section-header h2 {
            font-family: 'Cormorant Garamond', 'Shippori Mincho B1', serif;
            font-size: 1.5rem;
            font-weight: 600;
            letter-spacing: .04em;
            color: var(--forest);
        }

        .section-header .count {
            font-size: .8rem;
            color: var(--muted);
            letter-spacing: .04em;
        }

        /* ─── FILTER TABS ─────────────────────────────────── */
        .filter-bar {
            display: flex;
            gap: 0;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            border-bottom: 2px solid var(--line);
            margin-bottom: 2rem;
        }

        .filter-bar::-webkit-scrollbar { display: none; }

        .filter-tab {
            flex-shrink: 0;
            text-decoration: none;
            color: var(--muted);
            font-size: .83rem;
            letter-spacing: .07em;
            padding: .7rem 1.15rem;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: color .18s, border-color .18s;
            white-space: nowrap;
        }

        .filter-tab:hover { color: var(--forest); }

        .filter-tab.active {
            color: var(--forest);
            font-weight: 500;
            border-bottom-color: var(--forest);
        }

        /* ─── PRODUCT GRID ────────────────────────────────── */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 1.5rem;
        }

        .pcard {
            background: #fff;
            border-radius: var(--rad);
            overflow: hidden;
            text-decoration: none;
            color: inherit;
            border: 1px solid var(--line);
            transition: box-shadow .22s, transform .22s;
        }

        .pcard:hover {
            box-shadow: 0 12px 36px rgba(0,0,0,.11);
            transform: translateY(-4px);
        }

        .pcard-img {
            height: 200px;
            overflow: hidden;
            background: var(--cream);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .pcard-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .45s ease;
        }

        .pcard:hover .pcard-img img { transform: scale(1.04); }

        .pcard-img-placeholder {
            font-size: 2.5rem;
            opacity: .35;
        }

        .pcard-purpose {
            position: absolute;
            top: .6rem;
            left: .6rem;
            background: rgba(26,45,36,.72);
            color: rgba(245,240,230,.9);
            font-size: .68rem;
            letter-spacing: .1em;
            padding: .2rem .55rem;
            border-radius: 2px;
            backdrop-filter: blur(4px);
        }

        .pcard-body {
            padding: .9rem 1rem 1rem;
        }

        .pcard-name {
            font-size: .98rem;
            font-weight: 500;
            color: var(--ink);
            margin-bottom: .35rem;
            letter-spacing: .02em;
        }

        .pcard-desc {
            font-size: .8rem;
            color: var(--muted);
            line-height: 1.65;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 2.6em;
            margin-bottom: .65rem;
        }

        .pcard-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .pcard-price {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.22rem;
            font-weight: 600;
            color: var(--gold);
            letter-spacing: .02em;
        }

        .pcard-cta {
            font-size: .73rem;
            color: var(--forest);
            letter-spacing: .08em;
            border-bottom: 1px solid var(--fmid);
            padding-bottom: 1px;
        }

        /* ─── EMPTY STATE ─────────────────────────────────── */
        .empty {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--muted);
            font-size: .9rem;
            letter-spacing: .04em;
        }

        /* ─── FOOTER ──────────────────────────────────────── */
        .site-footer {
            background: var(--forest);
            color: rgba(245,240,230,.55);
            text-align: center;
            padding: 2rem 1rem;
            font-size: .78rem;
            letter-spacing: .08em;
        }

        /* ─── ANIMATIONS ──────────────────────────────────── */
        @keyframes page-in {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .page-wrap { animation: page-in .4s ease-out; }

        /* ─── RESPONSIVE ──────────────────────────────────── */
        @media (max-width: 768px) {
            .site-header { padding: 0 1rem; }
            .header-link { display: none; }
            .hero { padding: 3.5rem 1.2rem 3rem; }
            .page-wrap { padding: 0 1rem 3rem; }
            .grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
            .pcard-img { height: 150px; }
        }

        @media (max-width: 480px) {
            .grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>

<header class="site-header">
    <a class="site-logo" href="index.php"><?php echo tx($currentLang, '花の香り', '花之香', 'Hana no Kaori'); ?></a>
    <div class="header-right">
        <a class="header-link" href="reservation.php"><?php echo tx($currentLang, '予約する', '立即预约', 'Book'); ?></a>
        <a class="header-link" href="order-search.php"><?php echo tx($currentLang, '注文確認', '查询订单', 'Orders'); ?></a>
        <div class="lang-switcher">
            <a class="<?php echo $currentLang==='ja'?'active':''; ?>" href="?lang=ja&purpose=<?php echo urlencode($selectedPurpose); ?>">JA</a>
            <a class="<?php echo $currentLang==='zh'?'active':''; ?>" href="?lang=zh&purpose=<?php echo urlencode($selectedPurpose); ?>">ZH</a>
            <a class="<?php echo $currentLang==='en'?'active':''; ?>" href="?lang=en&purpose=<?php echo urlencode($selectedPurpose); ?>">EN</a>
        </div>
    </div>
</header>

<section class="hero">
    <div class="hero-sub">ONLINE FLOWER RESERVATION</div>
    <h1><?php echo tx($currentLang, '用途から選ぶ、<br>お花の予約', '按用途挑选<br>专属花束', 'Choose by Purpose,<br>Reserve Your Flowers'); ?></h1>
    <p><?php echo tx($currentLang, '誕生日・記念日・お供えなど、シーンに合わせてすぐ選べます。', '生日・周年纪念・祭祀等，按场景快速挑选。', 'Birthday, anniversary, memorial — find the perfect bouquet.'); ?></p>
    <div class="hero-btns">
        <a class="btn-primary" href="reservation.php"><?php echo tx($currentLang, '今すぐ予約', '立即预约', 'Reserve Now'); ?></a>
        <a class="btn-ghost" href="order-search.php"><?php echo tx($currentLang, '注文番号で確認', '订单号查询', 'Find by Order No.'); ?></a>
    </div>
</section>

<div class="page-wrap">
    <div class="filter-bar">
        <?php foreach ($purposeLabels as $purposeKey => $purposeLabel): ?>
            <a class="filter-tab <?php echo $selectedPurpose === $purposeKey ? 'active' : ''; ?>" href="?purpose=<?php echo urlencode($purposeKey); ?>">
                <?php echo e($purposeLabel); ?>
            </a>
        <?php endforeach; ?>
    </div>

    <div class="section-header">
        <h2><?php echo tx($currentLang, 'お花を選ぶ', '选择花束', 'Our Collection'); ?></h2>
        <span class="count"><?php echo count($flowers); ?> <?php echo tx($currentLang, '点', '件', 'items'); ?></span>
    </div>

    <?php if (!empty($flowers)): ?>
    <div class="grid">
        <?php foreach ($flowers as $flower): ?>
            <?php $purposeTag = $flower['purpose_tag'] ?: 'general'; ?>
            <a class="pcard" href="reservation.php?flower_id=<?php echo intval($flower['id']); ?>&purpose=<?php echo urlencode($selectedPurpose); ?>">
                <div class="pcard-img">
                    <?php if (!empty($flower['image']) && file_exists($flower['image'])): ?>
                        <img src="<?php echo e($flower['image']); ?>" alt="<?php echo e($flower['name_' . $currentLang] ?? $flower['name_ja']); ?>">
                    <?php else: ?>
                        <span class="pcard-img-placeholder">🌸</span>
                    <?php endif; ?>
                    <span class="pcard-purpose"><?php echo e($purposeLabels[$purposeTag] ?? ''); ?></span>
                </div>
                <div class="pcard-body">
                    <div class="pcard-name"><?php echo e($flower['name_' . $currentLang] ?? $flower['name_ja']); ?></div>
                    <div class="pcard-desc"><?php echo e($flower['description_' . $currentLang] ?? $flower['description_ja']); ?></div>
                    <div class="pcard-footer">
                        <div class="pcard-price">¥<?php echo number_format($flower['price']); ?></div>
                        <span class="pcard-cta"><?php echo tx($currentLang, '予約する →', '预约 →', 'Book →'); ?></span>
                    </div>
                </div>
            </a>
        <?php endforeach; ?>
    </div>
    <?php else: ?>
    <div class="empty">
        <?php echo tx($currentLang, '該当する商品がありません。', '该分类下暂无商品。', 'No products found in this category.'); ?>
    </div>
    <?php endif; ?>
</div>

<footer class="site-footer">
    <?php echo tx($currentLang, '© 花の香り — オンライン予約', '© 花之香 — 在线预约', '© Hana no Kaori — Online Reservation'); ?>
</footer>

</body>
</html>
