@include('login-header')
@php
  $buttonLabel = 'Get Started';
  $isAlreadySubscribed = false;
  $stripePriceId = '';
  $isSubscribedForFullyManage = false;  
@endphp

<section class="body-section">
    <div class="max-w-content">
      <div class="body-outer-wrapper">
        <div class="pricing-body">

      @if (session('success'))
          <div class="alert alert-success">
              <div class="alert-text">{{ session('success') }}</div>
          </div>
      @endif
      @if (session('error'))
          <div class="alert alert-error">
              <div class="alert-text">{{ session('error') }}</div>
          </div>
      @endif
          <h1 class="body-main-title">Pricing</h1>
          <div class="body-main-description">Choose from one of our Composer plans, designed to fit the stage and needs of your team. Click <a href="{{env('COAI_CALENDLY_MEET_LINK')}}" target="_blank">here</a> to connect with someone on our team.</div>
          <div class="w-layout-grid pricing-grid">
            @isset($pricingAndPlans)
                <div id="regular-plan" style="display:contents;">
                  @foreach ($pricingAndPlans as $plans)
                    <!-- Display the product when toggle is OFF and plan_level is 1, 2, or 3 -->
                    <div id="w-node-_7010f690-d41c-612b-ddc3-4daef71043eb-afb9b092" class="pricing-block-container">
                        <div class="pricing-top-border {{$plans['plan_level'] === 2 ? 'orange' : ($plans['plan_level'] === 3 ? 'purple': '')}}"></div>
                        <div class="pricing-heading">{{strtoupper($plans['plan_label'])}}</div>
                        <div class="pricing-block-summary-wrapper">
                        <div class="pricing-block-summary"><strong>{{$plans['articles_per_month']}}</strong> articles per month<br></div>
                        </div>
                        <div class="w-richtext">
                        <ul role="list" class="pricing-block-description">
                            @foreach(json_decode($plans['plan_description']) as $description)
                            <li>{{$description}}</li>
                            @endforeach
                        </ul>
                        </div>
                        <div class="pricing-price-container">
                        <div class="pricing-price">${{$plans['plan_amount']}}</div>
                        <div class="pricing-per-month">/month</div>
                        </div>
                        <div class="pricing-cta-container">
                            <a href="{{env('COAI_CALENDLY_MEET_LINK')}}" class="button button-shadow purple-gradient w-inline-block">
                            <div class="button-label white-text">{{$buttonLabel}}</div>
                            <div class="button-icon-container"><img src="{{asset('images/right-arrow-white.svg')}}" loading="lazy" alt="" class="image-2"></div>
                            </a>
                        </div>
                    </div>
                  @endforeach
                </div>    
            @endisset
          </div>
          <div class="trial-container">
            <div class="trial-skip-text">Not ready to subscribe?</div>
            <a href="{{env('COAI_CALENDLY_MEET_LINK')}}" class="button button-shadow orange-gradiant w-inline-block">
              <div class="button-label white-text">Continue to Trial</div>
              <div class="button-icon-container"><img src="{{asset('images/right-arrow-white.svg')}}" loading="lazy" alt=""></div>
            </a>
          </div>
          <h1 class="body-main-title margin-top">Composer Features</h1>
          <div class="body-main-description">Here are some of the awesome features that come with our Starter, Pro, and Scale versions Composer.</div>
          <div class="w-layout-grid pricing-features-grid">
            <div id="w-node-_6f2b5ebd-17ad-d9cf-5c25-bfef934a89a8-afb9b092" class="pricing-feature-container">
              <div class="pricing-feature-title">perfect BLOG ARTICLES, IN MINUTES</div>
              <div class="pricing-feature-summary">Draft SEO-Optimized blog articles that your users want to read in under 2 minutes.</div>
            </div>
            <div id="w-node-b3073c43-8b4f-120a-63eb-3ff3c59e13ab-afb9b092" class="pricing-feature-container">
              <div class="pricing-feature-title">Customized Writer Personas</div>
              <div class="pricing-feature-summary">Choose a writer persona to align with your blog&#x27;s voice and tone, ensuring content that truly resonates with your audience.</div>
            </div>
            <div id="w-node-_263bfec0-2b2d-cb6d-759a-a2e47179e699-afb9b092" class="pricing-feature-container">
              <div class="pricing-feature-title">Versatile Article Creation</div>
              <div class="pricing-feature-summary">Effortlessly create diverse articles, including blogs, product reviews, and personal essays, all tailored to your specifications.</div>
            </div>
            <div id="w-node-c99eaf2e-fd92-b3b5-6f19-48f6e00fcc6b-afb9b092" class="pricing-feature-container">
              <div class="pricing-feature-title">ATTENTION-CAPTURING HEADLINES</div>
              <div class="pricing-feature-summary">Tools to brainstorm captivating headlines that grab your audience&#x27;s attention and significantly increase reader engagement.</div>
            </div>
            <div id="w-node-_5ce3027c-815c-9e22-f888-244f9a821fad-afb9b092" class="pricing-feature-container">
              <div class="pricing-feature-title">SEO-Driven Content Creation</div>
              <div class="pricing-feature-summary">Utilize our topic clusters and keyword tool to create content that captivates your audience and boosts organic search rankings.</div>
            </div>
            <div id="w-node-_52e50c8d-4789-36e5-7f4e-802733420135-afb9b092" class="pricing-feature-container">
              <div class="pricing-feature-title">Integrated Content Publishing</div>
              <div class="pricing-feature-summary">Easily publish your content on multiple platforms, including your website and social channels, for optimal reach and impact.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script>
    @if (!session('pricingPageViewed'))
      var pricingPage = {
        'event': 'pricingPageView',
        'isPricingViewed': true,
      };
      pushDataLayer(pricingPage);

      @php
          session(['pricingPageViewed' => true]);
      @endphp
    @endif
  </script>
@include('footer')