<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Autumn Harvest - Pumpkins & Persimmons</title>
  <meta name="description" content="Welcome to Autumn Harvest, your online shop for the freshest pumpkins and persimmons." />

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

  <!-- Stylesheet -->
  <link rel="stylesheet" href="assets/css/style.css?v=<?php echo time(); ?>">

  <!-- Open Graph / Twitter Meta -->
  <?php
    $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Welcome to Autumn Harvest, your online shop for the freshest pumpkins and persimmons.';
    $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
  ?>
  <meta property="og:title" content="Autumn Harvest - Pumpkins & Persimmons" />
  <meta property="twitter:title" content="Autumn Harvest - Pumpkins & Persimmons" />
  <?php if ($projectDescription): ?>
    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
    <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
    <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
  <?php endif; ?>
  <?php if ($projectImageUrl): ?>
    <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
    <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
  <?php endif; ?>
</head>
<body>
  <audio id="background-music" src="https://www.bensound.com/bensound-music/bensound-rainyday.mp3" loop></audio>
  <div id="music-toggle">
    <svg id="sound-on-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
      <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
      <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
    </svg>
    <svg id="sound-off-icon" style="display:none;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-x">
        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
        <line x1="23" y1="9" x2="17" y2="15"></line>
        <line x1="17" y1="9" x2="23" y2="15"></line>
    </svg>
  </div>

  <header class="main-header">
    <div class="container">
      <a href="/" class="shop-name">Autumn Harvest</a>
      <nav class="main-nav">
        <a href="#home">Home</a>
        <a href="#products">Products</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero" id="home">
      <div class="hero-text-box">
        <h1>Taste of Autumn</h1>
        <p>Fresh from the farm, our pumpkins and persimmons are the perfect touch for your seasonal celebrations.</p>
      </div>
      <a href="#products" class="cta-button">Shop Now</a>
    </section>

    <div class="product-section-background">
      <section class="product-section" id="products">
        <div class="container">
          <h2>Our Pumpkins</h2>
          <div class="product-grid">
            <!-- Product 1: Pumpkins -->
            <div class="product-card">
              <img src="assets/pasted-20251013-104427-e367c0e6.jpg?v=<?php echo time(); ?>" alt="Pumpkin">
              <div class="product-info">
                <h3>Festive Pumpkins</h3>
                <p>Perfect for carving, decorating, or making delicious pies.</p>
                <div class="product-price">$12.99</div>
              </div>
            </div>

            <!-- Product 2: More Pumpkins -->
            <div class="product-card">
              <img src="assets/pasted-20251013-104527-870b56ba.jpg?v=<?php echo time(); ?>" alt="Cinderella pumpkin">
              <div class="product-info">
                <h3>Heirloom Pumpkins</h3>
                <p>A variety of shapes and sizes for the perfect autumn display.</p>
                <div class="product-price">$15.99</div>
              </div>
            </div>

            <!-- Product 3: Small Pumpkins -->
            <div class="product-card">
              <img src="assets/pasted-20251013-104632-6da13ed6.jpg?v=<?php echo time(); ?>" alt="Jarrahdale pumpkin">
              <div class="product-info">
                <h3>Mini Pumpkins</h3>
                <p>Ideal for tabletop decorations and adding a festive touch.</p>
                <div class="product-price">$7.99 / set of 3</div>
              </div>
            </div>

          </div>
        </div>
      </section>

      <section class="product-section" id="persimmons">
        <div class="container">
          <h2>Our Persimmons</h2>
          <div class="product-grid">
            <!-- Product 1: Persimmons -->
            <div class="product-card">
              <img src="assets/pasted-20251013-104838-d263cbfd.jpg?v=<?php echo time(); ?>" alt="Fuyu persimmon">
              <div class="product-info">
                <h3>Sweet Persimmons</h3>
                <p>Juicy, sweet, and ready to eat. A true taste of autumn.</p>
                <div class="product-price">$8.99 / lb</div>
              </div>
            </div>

            <!-- Product 2: More Persimmons -->
            <div class="product-card">
              <img src="assets/pasted-20251013-105020-30d37036.png?v=<?php echo time(); ?>" alt="Hachiya persimmon">
              <div class="product-info">
                <h3>Fuyu Persimmons</h3>
                <p>Crisp, sweet, and non-astringent. Perfect for salads.</p>
                <div class="product-price">$9.99 / lb</div>
              </div>
            </div>

            <!-- Product 3: Dried Persimmons -->
            <div class="product-card">
              <img src="assets/pasted-20251013-105058-e81307c0.webp?v=<?php echo time(); ?>" alt="Triumph persimmon">
              <div class="product-info">
                <h3>Dried Persimmons</h3>
                <p>A sweet and chewy snack, naturally preserved.</p>
                <div class="product-price">$19.99 / bag</div>
              </div>
            </div>

          </div>
        </div>
      </section>
    </div>
  </main>

  <footer class="main-footer" id="about">
    <div class="container">
      <p>&copy; <?php echo date("Y"); ?> Autumn Harvest. All Rights Reserved.</p>
      <p>A delightful little shop for all your autumn needs.</p>
    </div>
  </footer>

<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>
