<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<style>

  /* Container Styling */

  .brand-container {

    padding: 60px 120px;

    background-color: white;

  }



  /* Heading Styling */

  .brand-heading {

    text-align: center;

    margin-bottom: 30px;

    font-size: 24px;

    color: #333;

  }



  /* Description Styling */

  .brand-description {

    text-align: center;

    margin-bottom: 40px;

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;

  }



  .brand-description p {

    margin-bottom: 20px;

    line-height: 1.6;

    color: #555;

    font-size: 16px;

  }



  .brand-description p:last-child {

    margin-bottom: 0;

  }



  /* Grid Styling */

  .brand-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

    gap: 20px;

    justify-content: center;

  }



  /* Individual Brand Item */

  .brand-item {

    text-align: center;

    padding: 10px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-radius: 8px;

    background-color: #fff;

    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */

  }



  .brand-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  }



  .brand-logo {

    max-width: 100%;

    height: auto;

    margin-bottom: 8px;

    border-radius: 4px;

  }



  .brand-link {

    text-decoration: none;

    color: #333;

  }



  .brand-link:hover {

    color: #7A4397;

  }



  @media (max-width: 768px) {

    .brand-container {

      padding: 20px;

      background-color: #f9f9f9;

    }



    .brand-description {

      margin-bottom: 30px;

    }



    .brand-description p {

      font-size: 14px;

    }



    .brand-grid {

      grid-template-columns: repeat(2, 1fr);

      /* 2 items per row */

      gap: 15px;

    }



    .brand-item {

      padding: 8px;

      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      /* Lighter shadow for smaller items */

    }



    .brand-heading {

      font-size: 20px;

      margin-bottom: 24px;

    }

  }

</style>

<div id="main" class="brand-container">

  <div class="container">

    <h3 class="brand-heading">

      <?= $this->session->userdata('site_lang') == 'english' ? 'Curated with Ethics. Chosen with Care.' : 'Terkurasi dengan Etika. Dipilih dengan Cinta.'; ?>

    </h3>

    <div class="brand-description">

      <p>

        <?= $this->session->userdata('site_lang') == 'english' ? 'At Laci Asmara, every brand we carry is more than just a label — it`s a reflection of the values we stand for: safety, comfort, thoughtful design, and ethical intention. We partner only with brands that uphold responsible business practices, use body-safe materials, and create modern, functional products that never intimidate or shame.' : 'Di Laci Asmara, setiap brand bukan sekadar nama — mereka adalah representasi dari nilai yang dijunjung tinggi: keamanan, kenyamanan, fungsi, dan desain yang memberdayakan. Kami hanya bekerja sama dengan merek yang berkomitmen pada etika bisnis yang bertanggung jawab, menggunakan bahan yang aman untuk tubuh, serta merancang produk dengan pendekatan modern, tidak mengintimidasi dan inklusif.'; ?>

      </p>

      <p>

        <?= $this->session->userdata('site_lang') == 'english' ? 'From barriers to beautifully crafted intimate accessories, our curated selection is here to support your journey of self-expression with love, awareness, and trust.' : 'Mulai dari kondom, pelumas hingga alat bantu intim yang modern, dengan fitur dan fungsi yang terkurasi, semua pilihan kami hadirkan untuk mendukung ekspresi diri yang sehat, sadar, dan penuh kasih sayang.'; ?>

      </p>

    </div>

    <div class="brand-grid">

      <?php foreach ($brands as $brand) : ?>

        <div class="brand-item">

          <a href="<?= base_url('brand/' . $brand->alias); ?>" class="brand-link">

            <img

              src="<?= base_url('uploads/brand/' . $brand->logo); ?>"

              alt="<?= $brand->brand; ?>"

              title="<?= $brand->brand; ?>"

              class="brand-logo">

          </a>

        </div>

      <?php endforeach; ?>

    </div>

  </div>

</div>