<template>
  <section class="proyecto-section">
    <div class="content">
      <h2>
        ¿Tienes un proyecto con valores?<br />
        <span> Súmate a nuestra red.</span>
      </h2>

      <div class="text-block">
        <p>
          Si elaboras productos o servicios desde una perspectiva social,
          cooperativa o sostenible, este espacio es para ti.
          <br />
          Publica tus productos, conecta con personas conscientes y crece con
          nosotras.
        </p>

        <NuxtLink to="/busqueda" class="link">
            <ButtonCTA class="btn-primary">QUIERO REGISTRARME</ButtonCTA>
          </NuxtLink>

        <small>
          Solo para entidades o personas con propuestas alineadas con la economía
          social y solidaria.
        </small>
      </div>
    </div>

    <div class="image-wrapper">
      <img
        src="/assets/img/joven-vendedor.png"
        alt="Personas intercambiando productos"
      />
    </div>
  </section>
</template>

<style lang="scss" scoped>
.proyecto-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient($color-consumo-base-light, $color-bg-light);
  border-radius: 1rem;
  padding: 2rem;
  gap: 3rem;
  margin: 2rem 0 4rem;

  @media (min-width: $desktop) {
    flex-direction: row;
    justify-content: space-between;
    padding: 3rem;
  }

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    h2 {
      font-size: $h2;
      font-weight: $bold;
      line-height: 1.3;

      span {
        display: block;
        font-weight: 700;
      }
    }

    .text-block {
      display: flex;
      flex-direction: column;
      gap: 3rem;
      margin-top: 1rem;
    
      p {
        font-size: $l;
        color: #333;
      }

      .btn-primary {
        background: $color-button;
        color: #fff;
        padding: 0.75rem 1.5rem;
        border: 1px solid transparent;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: background 0.2s ease;

        &:hover {
          background: white;
          color: $color-button;
          border: 1px solid $color-button;
        }
      }

      small {
        font-size: $m;
      }
    }
  }

  .image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;

    img {
      width: 100%;
      max-width: 500px;
      border-radius: 1rem;
      object-fit: cover;
      transform: rotate(-2deg); // para el toque inclinado que se ve en tu captura
    }
  }
}
</style>
