<app-breadcrumb [breadcrumb]="breadcrumb" />

<!-- About Section Start -->
@if(data?.seller?.about?.status){
<section class="saller-poster-section">
  <div class="container-fluid-lg">
    <div class="row">
      @if(data?.seller?.about?.image_url){
      <div class="col-12">
        <div class="poster-box">
          <div class="poster-image">
            <img
              [src]="storageURL + data?.seller?.about?.image_url"
              class="img-fluid"
              [alt]="data?.seller?.about?.title"
            />
          </div>
        </div>
      </div>
      }

      <div class="col-12">
        <div class="seller-title h-100 d-flex align-items-center">
          <div>
            <h2>{{ data?.seller?.about?.title }}</h2>
            <p>{{ data?.seller?.about?.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
}
<!-- About Section End -->

<!-- Service Section Start -->
@if(data?.seller?.services?.status){
<section class="become-service section-b-space">
  <div class="container-fluid-lg">
    <div class="row g-md-4 g-3">
      <div class="col-xxl-3 col-lg-4 col-sm-6">
        <div class="service-box">
          @if(data?.seller?.services?.service_1?.image_url){
          <div class="service-svg">
            <img
              [src]="storageURL +  data?.seller?.services?.service_1?.image_url"
              class="img-fluid"
              [alt]="data?.seller?.services?.service_1?.title"
            />
          </div>
          }
          <div class="service-detail">
            <h4>{{ data?.seller?.services?.service_1?.title }}</h4>
            <p>{{ data?.seller?.services?.service_1?.description }}</p>
          </div>
        </div>
      </div>
      <div class="col-xxl-3 col-lg-4 col-sm-6">
        <div class="service-box">
          @if(data?.seller?.services?.service_2?.image_url){
          <div class="service-svg">
            <img
              [src]="storageURL + data?.seller?.services?.service_2?.image_url"
              class="img-fluid"
              [alt]="data?.seller?.services?.service_2?.title"
            />
          </div>
          }
          <div class="service-detail">
            <h4>{{ data?.seller?.services?.service_2?.title }}</h4>
            <p>{{ data?.seller?.services?.service_2?.description }}</p>
          </div>
        </div>
      </div>
      <div class="col-xxl-3 col-lg-4 col-sm-6">
        <div class="service-box">
          @if(data?.seller?.services?.service_3?.image_url){
          <div class="service-svg">
            <img
              [src]="storageURL + data?.seller?.services?.service_3?.image_url"
              class="img-fluid"
              [alt]="data?.seller?.services?.service_3?.title"
            />
          </div>
          }
          <div class="service-detail">
            <h4>{{ data?.seller?.services?.service_3?.title }}</h4>
            <p>{{ data?.seller?.services?.service_3?.description }}</p>
          </div>
        </div>
      </div>
      <div class="col-xxl-3 col-lg-4 col-sm-6">
        <div class="service-box">
          @if(data?.seller?.services?.service_4?.image_url){
          <div class="service-svg">
            <img
              [src]="storageURL + data?.seller?.services?.service_4?.image_url"
              class="img-fluid"
              [alt]="data?.seller?.services?.service_4?.image_url"
            />
          </div>
          }
          <div class="service-detail">
            <h4>{{ data?.seller?.services?.service_4?.title }}</h4>
            <p>{{ data?.seller?.services?.service_4?.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
}
<!-- Service Section End -->

<!-- Business Section Start -->
@if(data?.seller?.steps?.status){
<section class="business-section section-b-space">
  <div class="container-fluid-lg">
    <div class="vendor-title mb-5">
      <h5>{{ data?.seller?.steps?.title }}</h5>
    </div>
    <div class="business-contain">
      <div class="row g-xl-4 g-3">
        <div class="col-xl-4 col-sm-6">
          <div class="business-box">
            <div>
              <div class="business-number">
                <h2>{{ '1' | translate }}</h2>
              </div>
              <div class="business-detail">
                <h4>{{ data?.seller?.steps?.step_1?.title }}</h4>
                <p>{{ data?.seller?.steps?.step_1?.description }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-4 col-sm-6">
          <div class="business-box">
            <div>
              <div class="business-number">
                <h2>{{ '2' | translate }}</h2>
              </div>
              <div class="business-detail">
                <h4>{{ data?.seller?.steps?.step_2?.title }}</h4>
                <p>{{ data?.seller?.steps?.step_2?.description }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-4 col-sm-6">
          <div class="business-box">
            <div>
              <div class="business-number">
                <h2>{{ '3' | translate }}</h2>
              </div>
              <div class="business-detail">
                <h4>{{ data?.seller?.steps?.step_3?.title }}</h4>
                <p>{{ data?.seller?.steps?.step_3?.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
}
<!-- Business Section End -->

<!-- Selling Section Start -->
@if(data?.seller?.start_selling?.status){
<section class="selling-section section-b-space">
  <div class="container-fluid-lg">
    <div class="vendor-title">
      <h5>{{ data?.seller?.start_selling?.title }}</h5>
      <p>{{ data?.seller?.start_selling?.description }}</p>

      @if(data?.general?.seller_register_url){
      <a
        href="{{data?.general?.seller_register_url}}"
        class="btn btn-animation theme-bg-color d-inline-block mt-3"
        >{{ 'start_selling' | translate }}
      </a>
      }
    </div>
  </div>
</section>
}
<!-- Selling Section End -->
