---

import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Pricing";

---

<BaseLayout pageTitle={pageTitle}>
    <style>
        .card {
            border: solid 2px #ccc;
            border-radius: 10px;
            padding: 1rem;
            max-width: 300px;

            flex-grow: 1;
            margin:.25rem;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            height: 60vh;
        }
        .price {
            font-size: 2rem;
            font-weight: bold;
        }

        :root {
          --toggle-width: 200px;
          --toggle-height: 48px;
          --transition-speed: 0.3s;
        }

        .toggle-container {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px;
        }

        /* Hide the actual checkbox */
        .toggle-input {
          display: none;
        }

        .toggle-label {
          position: relative;
          display: flex;
          width: var(--toggle-width);
          height: var(--toggle-height);
          background-color: #ffffff;
          border: 1px solid #e0e0e0;
          border-radius: 12px;
          cursor: pointer;
          padding: 4px;
          /* Applying a subtle 3-layer version of your white shadow for depth */
          box-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.05),
            0 4px 10px rgba(0, 0, 0, 0.05);
        }

        /* The Black Sliding Box */
        .toggle-switch {
          position: absolute;
          top: 4px;
          left: 4px;
          width: calc(50% - 4px);
          height: calc(100% - 8px);
          background-color: #000000;
          border-radius: 8px;
          transition: transform var(--transition-speed) ease;
          z-index: 1;
        }

        /* Move the black box when checked */
        .toggle-input:checked + .toggle-label .toggle-switch {
          transform: translateX(100%);
        }

        /* Text Styling */
        .label-text {
          flex: 1;
          text-align: center;
          line-height: calc(var(--toggle-height) - 8px);
          font-family: sans-serif;
          font-size: 14px;
          font-weight: 600;
          z-index: 2;
          transition: color var(--transition-speed) ease;
          user-select: none;
        }

        /* Color Logic */
        .monthly {
          color: #ffffff; /* Starts selected */
        }

        .annual {
          color: #000000;
        }

        /* Swap colors based on state */
        .toggle-input:checked + .toggle-label .monthly {
          color: #000000;
        }

        .toggle-input:checked + .toggle-label .annual {
          color: #ffffff;
        }
        


    </style>
    <div class="flx(column) middle center is-full">
        <h2>Pricing:</h2>
        <div class="toggle-container">
          <input type="checkbox" id="billing-toggle" class="toggle-input" checked="false" >
          <label for="billing-toggle" class="toggle-label">
            <span class="toggle-switch"></span>
            <span class="label-text monthly">Monthly</span>
            <span class="label-text annual">Annual</span>
          </label>
        </div>
        <div class="flx(wrap) space-evenly top is-full">
            <div class="card flx(column) space-evenly middle">
                <h3>Standard:</h3>
                <p class="price">$10<span>/month</span></p>
                <p>what u get:</p>
                <ul>
                    <li>*Free Website migration</li>
                    <li>*Free Node.js eccommerce conversion</li>
                    <li>*1 hour of free support per month</li>
                    <li>*Free Social media posting, and part of the VFP media Directory</li>
                    <li>*5 gb of free disk space</li>
                </ul>
                <a href="mailto:vfpmedia@airmail.cc" class="btn(large) is-round is-primary is-disabled">Buy</a>
            </div>
            <div class="card flx(column) space-evenly middle">
                <h3>Plus:</h3>
                <p class="price">$15<span>/month</span></p>
                <p>what u get:</p>
                <ul>
                    <li>Everything Included in Standard plus...</li>
                    <li>*2 hours of free support per month</li>
                    <li>*10 gb of free disk space</li>
                    <li>*Custom website technology stack (non node.js websites)</li>

                </ul>
                <a href="mailto:vfpmedia@airmail.cc" class="btn(large) is-round is-primary is-disabled">Buy</a>
            </div>
            <div class="card flx(column) space-evenly middle">
                <h3> Custom: </h3>
                <p class="price">$--<span>/month</span></p>
                <p style="font-weight: 400;">You need more than a simple store eccommerce; you need a whole custom solution</p>
                <p style="font-weight: 400;">email us your vision, and we will figure out your specific needs, perhaps a new non ai tech or business venture?
                    only the boldest entreprenuers pick this option;
                </p>
                <a href="mailto:vfpmedia@airmail.cc" class="btn(large) is-round is-success">Send Email</a>
            </div>
        </div>
    </div>
    <script>
        const toggle = document.querySelector('#billing-toggle');

        toggle.addEventListener('change', (event) => {
            console.log(event.target.checked);
          if (event.target.checked) {
            // Logic for Annual billing
            updatePrices('annual',event.target.checked);
          } else {
            // Logic for Monthly billing
            updatePrices('monthly',event.target.checked);
          }
        });
        // toggle.addEventListener('onload', (event) => {
        //     console.log(event.target);
        //    if (event.target.checked) {
        //     // Logic for Annual billing
        //     updatePrices('annual');
        //   } else {
        //     // Logic for Monthly billing
        //     updatePrices('monthly');
        //   }
        //})

        function updatePrices(plan,event) {
          console.log(`Switching UI to ${plan} rates...`);
          
          // Here you would update the text content of your pricing cards
          document.querySelectorAll('.price').forEach((node,a)=>{
            let reg = /^-?\d*(\.\d+)?$/;
            let b = node.textContent;
            // console.log(node);
            // console.log(b.match(/\d+/));
            const number = Number(b.match(/\d+/));
            // console.log(number)
            //number converts null into 0 for some reason...
            if (number !== 0 && event !== 'load') {
                console.log(event)
                if (plan === 'annual') {
                    node.textContent = `$${number*12}/year`
                } else if (plan === 'monthly') {
                    node.textContent = `$${number/12}/month`
                }
            }
            else if(number !== 0) {
                //loading state here. initial state is always monthly
                if (plan === 'annual') {
                    node.textContent = `$${number*12}/year`
                } else if (plan === 'monthly') {
                    node.textContent = `$${number}/month`
                }
            }
            
          })
        }
        console.log(toggle.checked);
        //updatePrices('monthly', toggle.checked);
        if (toggle.checked) {
            // Logic for Annual billing
            updatePrices('annual','load');
          } else {
            // Logic for Monthly billing
            updatePrices('monthly','load');
          }
    </script>
</BaseLayout>