#!/bin/bash

# Directory where images are stored
IMAGE_DIR="../../assets/pics/organic"
OUTPUT_FILE="classic.html"

# Ensure the images directory exists
if [ ! -d "$IMAGE_DIR" ]; then
    echo "Error: Directory '$IMAGE_DIR' not found!"
    exit 1
fi

# Start writing the HTML file
cat > "$OUTPUT_FILE" <<EOL
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="../assets/favicon/site.webmanifest">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beach Party Balloons - Gallery</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
    <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=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../style.css">
    <style>
        .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; padding: 20px; max-width: 1200px; margin: auto; }
        .gallery-item { text-align: center; }
        .gallery img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
        .caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; }
        .lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
        .lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }
        .lightbox:target { display: flex; }
        .close { position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; text-decoration: none; }
    </style>
</head>
<body>

    <nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
        <div class="navbar-brand is-size-1">
            <a class="navbar-item" href="../index.html">
                <img style="background-color: white;" src="../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
            </a>
            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div id="navbarBasicExample" class="navbar-menu has-text-right">
            <div class="navbar-end">
                <a class="navbar-item" href="../index.html">Home</a>
                <a class="navbar-item" href="../about/index.html">About Us</a>
                <a class="navbar-item" href="../faq/index.html">FAQ</a>
                <a class="navbar-item" href="../terms/index.html">Terms</a>
                <a class="navbar-item is-tab is-active" href="../gallery/index.html">Gallery</a>
                <a class="navbar-item" href="../contact/index.html">Contact</a>
            </div>
        </div>
    </nav>
<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="../index.html">Gallery</a></li>
    <li class="is-active"><a href="index.html" aria-current="page">Classic</a></li>
  </ul>
</nav>
    <section class="section">
        <div class="container">
            <h1 class="title has-text-centered">Organic</h1>
            <div class="gallery">
EOL

# Add images dynamically with captions
count=1
for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
    if [[ -f "$img" ]]; then
        filename=$(basename "$img")
        caption_file="${img%.*}.txt"
        
        # Read caption if available, otherwise use default
        if [[ -f "$caption_file" ]]; then
            caption=$(cat "$caption_file")
        else
            caption=""
        fi

        echo "                <div class=\"gallery-item\">" >> "$OUTPUT_FILE"
        echo "                    <a href=\"#lightbox$count\"><img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></a>" >> "$OUTPUT_FILE"
        echo "                    <p class=\"caption\">$caption</p>" >> "$OUTPUT_FILE"
        echo "                </div>" >> "$OUTPUT_FILE"

        count=$((count+1))
    fi
done

# Add closing tags for the gallery
cat >> "$OUTPUT_FILE" <<EOL
            </div>
        </div>
    </section>
EOL

# Add lightbox overlays with captions
count=1
for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
    if [[ -f "$img" ]]; then
        filename=$(basename "$img")
        caption_file="${img%.*}.txt"
        
        if [[ -f "$caption_file" ]]; then
            caption=$(cat "$caption_file")
        else
            caption=""
        fi

        echo "        <div id=\"lightbox$count\" class=\"lightbox\">" >> "$OUTPUT_FILE"
        echo "            <a href=\"#\" class=\"close\">&times;</a>" >> "$OUTPUT_FILE"
        echo "            <img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\">" >> "$OUTPUT_FILE"
        echo "            <p class=\"caption\" style=\"color: white; text-align: center; margin-top: 10px;\">$caption</p>" >> "$OUTPUT_FILE"
        echo "        </div>" >> "$OUTPUT_FILE"

        count=$((count+1))
    fi
done

# Finish the HTML file
cat >> "$OUTPUT_FILE" <<EOL

    <footer class="footer has-background-primary-light">
        <div class="content has-text-centered">
            <h7>Copyright &copy; <span id="year"></span> Beach Party Balloons</h7>
            <h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
        </div>
    </footer>

    <div id="footer"></div>
    <script src="../script.js"></script>

</body>
</html>
EOL

echo "Gallery generated with captions! Open $OUTPUT_FILE in your browser."
