Lang

document.addEventListener("DOMContentLoaded", function() {

    const flowchart = document.getElementById("flowchart");

    flowchart.innerHTML = `

        <div class="question" id="q1">

            <p>How do you plan to use your Lang BBQ Smoker?</p>

            <button onclick="nextQuestion('q2a')">Residential</button>

            <button onclick="nextQuestion('q2b')">Competition</button>

            <button onclick="nextQuestion('q2c')">Commercial</button>

        </div>

        <div class="question hidden" id="q2a">

            <p>What cooking capacity do you need?</p>

            <button onclick="nextQuestion('q2a1')">Small (36” Patio)</button>

            <button onclick="nextQuestion('q2a2')">Large (48” or larger)</button>

            <button onclick="prevQuestion('q1')">Back</button>

        </div>

        <div class="question hidden" id="q2b">

            <p>Do you need a trailer-mounted smoker?</p>

            <button onclick="nextQuestion('q2b1')">Yes</button>

            <button onclick="nextQuestion('q2b2')">No</button>

            <button onclick="prevQuestion('q1')">Back</button>

        </div>

        <div class="question hidden" id="q2c">

            <p>Are you catering or running a restaurant?</p>

            <button onclick="nextQuestion('q2c1')">Restaurant</button>

            <button onclick="nextQuestion('q2c2')">Catering</button>

            <button onclick="prevQuestion('q1')">Back</button>

        </div>

        <div class="result hidden" id="q2a1">

            <p>We recommend the <strong>Lang 36” Patio</strong>. Perfect for backyard BBQ enthusiasts.</p>

            <img src="/path-to-image/lang-36.jpg" alt="Lang 36” Patio">

            <button onclick="prevQuestion('q2a')">Back</button>

        </div>

        <div class="result hidden" id="q2a2">

            <p>Consider the <strong>Lang 48” Deluxe</strong>. Ideal for bigger gatherings.</p>

            <img src="/path-to-image/lang-48.jpg" alt="Lang 48” Deluxe">

            <button onclick="prevQuestion('q2a')">Back</button>

        </div>

        <div class="result hidden" id="q2b1">

            <p>The <strong>Lang 60” or 84” Trailer</strong> is perfect for competitions.</p>

            <img src="/path-to-image/lang-60.jpg" alt="Lang 60” Trailer">

            <button onclick="prevQuestion('q2b')">Back</button>

        </div>

        <div class="result hidden" id="q2b2">

            <p>Check out the <strong>Lang 48” Hybrid</strong>. Compact yet competition-ready.</p>

            <img src="/path-to-image/lang-48-hybrid.jpg" alt="Lang 48” Hybrid">

            <button onclick="prevQuestion('q2b')">Back</button>

        </div>

        <div class="result hidden" id="q2c1">

            <p>The <strong>Lang 108” Smoker</strong> is great for high-volume cooking.</p>

            <img src="/path-to-image/lang-108.jpg" alt="Lang 108” Smoker">

            <button onclick="prevQuestion('q2c')">Back</button>

        </div>

        <div class="result hidden" id="q2c2">

            <p>The <strong>Lang 84” Fat Boy</strong> is a top choice for catering.</p>

            <img src="/path-to-image/lang-84-fatboy.jpg" alt="Lang 84” Fat Boy">

            <button onclick="prevQuestion('q2c')">Back</button>

        </div>

    `;

});

function nextQuestion(id) {

    document.querySelectorAll(".question, .result").forEach(q => q.classList.add("hidden"));

    document.getElementById(id).classList.remove("hidden");

}

function prevQuestion(id) {

    document.querySelectorAll(".question, .result").forEach(q => q.classList.add("hidden"));

    document.getElementById(id).classList.remove("hidden");

}

// Enhancements for responsiveness, animations, and UI

const style = document.createElement("style");

style.innerHTML = `

    #flowchart {

        max-width: 600px;

        margin: auto;

        font-family: Arial, sans-serif;

        text-align: center;

    }

    .question, .result {

        display: flex;

        flex-direction: column;

        align-items: center;

        padding: 20px;

        border-radius: 10px;

        background: #f8f8f8;

        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

        margin-bottom: 20px;

        transition: opacity 0.5s ease-in-out;

    }

    .hidden {

        display: none;

    }

    button {

        background-color: #0073e6;

        color: white;

        border: none;

        padding: 10px 20px;

        margin: 10px;

        border-radius: 5px;

        cursor: pointer;

        transition: background 0.3s;

    }

    button:hover {

        background-color: #005bb5;

    }

    img {

        width: 80%;

        max-width: 300px;

        margin-top: 10px;

        border-radius: 5px;

        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

    }

`;

document.head.appendChild(style);