@section('page_title')
    {{ "Composer - Pricing" }}
@endsection

@include('header')

<section class="body-section">
  <div class="content-width-container split-view">
    @include('left-split-view')
    <div class="primary-content-container">
      <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
            <div class="single-pricing-container">
              <div class="single-pricing-context-container">
                <h1 class="body-main-title">Let&#x27;s Get Started</h1>
                <div class="body-main-description">Ready to scale up your operation? We&#x27;ve designed this plan to be valuable and affordable. Get access to Composer&#x27;s expert writing staff for a hands-off solution where we handle everything from your businesses content strategy to the execution and delivery.</div>
                <div class="w-layout-grid pricing-features-grid">
                  <div id="w-node-_3b21f20a-4b0f-27c8-c9a9-a47d88130639-87f6f0f3" 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-_3b21f20a-4b0f-27c8-c9a9-a47d8813063e-87f6f0f3" 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-_3b21f20a-4b0f-27c8-c9a9-a47d88130643-87f6f0f3" 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-_3b21f20a-4b0f-27c8-c9a9-a47d88130648-87f6f0f3" 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>
              </div>
              <div class="pricing-block-container">
                <div class="pricing-top-border {{$pricingAndPlans['plan_level'] === 2 ? 'orange' : ($pricingAndPlans['plan_level'] === 3 ? 'purple': '')}}"></div>
                {{-- <div class="pricing-heading">{{strtoupper($pricingAndPlans->nickname)}}</div> --}}
                <div class="pricing-block-summary-wrapper">
                  <div class="pricing-block-summary"><strong>{{$pricingAndPlans->metadata->article_unit}}</strong> Articles /month<br></div>
                </div>
                <div class="w-richtext">
                  <ul role="list" class="pricing-block-description">
                    @foreach(json_decode($pricingAndPlans->metadata->plan_description) as $description)
                      <li>{{$description}}</li>
                    @endforeach
                  </ul>
                </div>
                <div class="pricing-price-container">
                  <div class="pricing-price">${{$pricingAndPlans->unit_amount / 100}}</div>
                  @if($pricingAndPlans->metadata->setup_fee)
                    <div class="pricing-per-month">/month + ${{isset($pricingAndPlans->metadata->setup_fee) ? ($pricingAndPlans->metadata->setup_fee) : 0}} setup</div>
                  @else
                    <div class="pricing-per-month">/month</div>
                  @endif
                </div>
                <div class="pricing-cta-container">
                  <a href="#" onclick="selectPlan('{{$pricingAndPlans->id}}', {{false}})" class="button button-shadow purple-gradient w-inline-block">
                    <div class="button-label white-text">Get Started</div>
                    <div class="button-icon-container"><img src="{{asset('images/right-arrow-white.svg')}}" loading="lazy" alt="" class="image-2"></div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@include('footer')