<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Youthrev Custom Knives - Choose Your Knife</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #f8f8f8; color: #000; line-height: 1.6; }
        header { background: linear-gradient(135deg, #cc0000 0%, #990000 100%); padding: 1.5rem; text-align: center; }
        .logo h1 { font-size: 1.8rem; color: #fff; text-transform: uppercase; letter-spacing: 2px; }
        .tagline { color: #ffcccc; margin-top: 0.3rem; font-style: italic; font-size: 0.9rem; }
        .free-shipping { background: #000; color: #fff; padding: 0.5rem; font-weight: bold; font-size: 0.9rem; }
        main { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }
        .hero { text-align: center; margin-bottom: 2rem; }
        .hero h2 { font-size: 1.6rem; margin-bottom: 0.5rem; color: #cc0000; }
        .hero p { color: #555; }
        .knife-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
        .knife-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; border: 3px solid transparent; }
        .knife-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); border-color: #cc0000; }
        .knife-preview { height: 200px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 1rem; }
        .knife-img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .knife-info { padding: 1.2rem; text-align: center; }
        .knife-name { font-size: 1.3rem; font-weight: bold; color: #222; margin-bottom: 0.3rem; }
        .knife-price { color: #cc0000; font-weight: bold; font-size: 1.1rem; }
        .knife-desc { color: #666; font-size: 0.85rem; margin-top: 0.5rem; }
        .select-btn { display: inline-block; margin-top: 1rem; background: #cc0000; color: #fff; padding: 0.7rem 1.5rem; border-radius: 25px; font-weight: bold; transition: background 0.2s; }
        .knife-card:hover .select-btn { background: #990000; }
        footer { text-align: center; padding: 2rem; color: #666; font-size: 0.85rem; margin-top: 2rem; border-top: 2px solid #cc0000; }
        .checkout-info { background: #fff; padding: 1.5rem; border-radius: 12px; margin-top: 2rem; border-left: 4px solid #cc0000; }
        .checkout-info h3 { color: #cc0000; margin-bottom: 1rem; }
        .checkout-info ol { padding-left: 1.2rem; color: #444; }
        .checkout-info li { margin-bottom: 0.5rem; }
    </style>
</head>
<body>
    <header>
        <div class="logo"><img src="logo.jpg" alt="Youthrev Custom Knives" style="max-width:300px;"></div>
        <p class="tagline">Custom Knives - Your Design, Your Way</p>
        <div class="free-shipping">🚚 FREE SHIPPING ON ALL ORDERS!</div>
    </header>
    <main>
        <section class="hero">
            <h2>Choose Your Knife Style</h2>
            <p>Click on any knife to design your custom version</p>
        </section>
        
        <div class="knife-grid">
            <!-- Trapper -->
            <a href="design.html?knife=trapper" class="knife-card" style="text-decoration:none;color:inherit;display:block;">
                <div class="knife-preview">
                    <img src="trapper.png" alt="Trapper Knife" class="knife-img">
                </div>
                <div class="knife-info">
                    <div class="knife-name">Trapper</div>
                    <div class="knife-price">$45</div>
                    <div class="knife-desc">Two blades, classic folding design</div>
                    <span class="select-btn">Design This →</span>
                </div>
            </a>
            
            <!-- Barlow -->
            <a href="design.html?knife=barlow" class="knife-card" style="text-decoration:none;color:inherit;display:block;">
                <div class="knife-preview">
                    <img src="barlow.png" alt="Barlow Knife" class="knife-img">
                </div>
                <div class="knife-info">
                    <div class="knife-name">Barlow</div>
                    <div class="knife-price">$45</div>
                    <div class="knife-desc">Single blade, extra large handle</div>
                    <span class="select-btn">Design This →</span>
                </div>
            </a>
            
            <!-- Copperhead -->
            <a href="design.html?knife=copperhead" class="knife-card" style="text-decoration:none;color:inherit;display:block;">
                <div class="knife-preview">
                    <img src="copperhead.png" alt="Copperhead Knife" class="knife-img">
                </div>
                <div class="knife-info">
                    <div class="knife-name">Copperhead</div>
                    <div class="knife-price">$45</div>
                    <div class="knife-desc">Double blade, copper scales</div>
                    <span class="select-btn">Design This →</span>
                </div>
            </a>
            
            <!-- Mini Trapper -->
            <a href="design.html?knife=minitrapper" class="knife-card" style="text-decoration:none;color:inherit;display:block;">
                <div class="knife-preview">
                    <img src="minitrapper.png" alt="Mini Trapper Knife" class="knife-img">
                </div>
                <div class="knife-info">
                    <div class="knife-name">Mini Trapper</div>
                    <div class="knife-price">$45</div>
                    <div class="knife-desc">Pocket-sized, two blades</div>
                    <span class="select-btn">Design This →</span>
                </div>
            </a>
            
            <!-- Muskrat -->
            <a href="design.html?knife=muskrat" class="knife-card" style="text-decoration:none;color:inherit;display:block;">
                <div class="knife-preview">
                    <img src="muskrat.png" alt="Muskrat Knife" class="knife-img">
                </div>
                <div class="knife-info">
                    <div class="knife-name">Muskrat</div>
                    <div class="knife-price">$45</div>
                    <div class="knife-desc">Two blades, split handle</div>
                    <span class="select-btn">Design This →</span>
                </div>
            </a>
        </div>
        
        <div class="checkout-info">
            <h3>How Ordering Works</h3>
            <ol>
                <li><strong>Choose your knife</strong> - Select from 5 classic styles above</li>
                <li><strong>Upload your image</strong> - Add your photo or design to personalize the handle</li>
                <li><strong>Preview your custom knife</strong> - See exactly how it'll look before paying</li>
                <li><strong>Checkout</strong> - Enter your shipping info and pay securely with Stripe</li>
                <li><strong>We make & ship</strong> - Your custom knife is crafted and delivered FREE!</li>
            </ol>
        </div>
    </main>
    <footer>
        <p>&copy; 2026 Youth-rev Custom Knives. All rights reserved.</p>
    </footer>
</body>
</html>
