:root {
  --font-family-primary: Nunito, sans-serif;
  --gradient-1: linear-gradient( 135deg, #FFD3A5 10%, #FD6585 100%);
/*   --gradient-2: linear-gradient(214deg, #8EE2F1 0%, #CDFEDF 55%); */
  --gradient-2: linear-gradient(315deg, #8EC5FC 0%, #E0C3FC 100%);
  --gradient-3: linear-gradient(210deg, #74EBD5 0%, #f7e8ad 100%);
}

* {
  box-sizing: border-box;
}

body {
  background-color: hsl(50, 12%, 98%);
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: 1.425;
}

.layout__wrapper {
  margin: auto;
  width: 990px;
}

.section {
  padding: 40px;
}

.section__title {
  color: #000000;
  font-size: 2.15rem;
  margin: 0;
  margin-bottom: 2.5rem;
}

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery--grid {
  display: grid;
  grid-auto-flow: row dense;
  grid-gap: 70px;
  grid-template-columns: repeat(3, 1fr);
  padding-left: 35px;
}

.gallery__item--highlight {
  grid-column: span 2;
}

.gallery__item:nth-child(2n) .card::before {
  background-image: var(--gradient-2);
}

.gallery__item:nth-child(3n) .card::before {
  background-image: var(--gradient-3);
}

.card {
  position: relative;
}

.card::before {
  background-image: var(--gradient-1);
  border-radius: 15px;
  box-shadow: 2px 0px 20px rgba(0, 0, 0, .1);
  bottom: 70px;
  content: '';
  left: -35px;
  position: absolute;
  right: 35px;
  top: 0;
  
}

.card {
  padding-bottom: 2.75rem;
  padding-top: 75px;
}

.card__block--main {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 2px 5px 25px rgba(0, 0, 0, .15);
  min-height: 280px;
  padding: 20px;
  padding-top: 50px;
  position: relative;
  z-index: 2;
}

.card__element--user-img img,
.card__element--user-img svg {
  --size: 65px;
  
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  left: 10px;
  position: absolute;
  top: calc(-1 * (var(--size) / 2));
  width: var(--size);
}

.card__element--user-img svg {
  background-color: hsl(35, 92%, 71%);
  fill: #000;
}

.card__title {
  font-size: 1.85rem;
  font-weight: bold;
  line-height: 1.1;
  margin: 0;
}

.card__subtitle {
  color: hsl(210, 5%, 41%);
  font-size: 1rem;
  margin-top: .33rem;
}

.card__text {
  margin-top: .66rem;
}

.trade {
  bottom: 0;
  padding-top: 1.5rem !important /* @TODO temp !!!*/;
  position: absolute;
  right: 1.5rem;
  transition: transform .2s;
}

.trade:hover {
  transform: translateY(.25rem);
}

.button {
  background-color: #000000;
  border: 1px solid #000000;
  box-shadow: 0 3px 0 #000000;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
  font-family: var(--font-family-primary);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: .15rem;
  padding: .75rem 1.5rem;
}

.button--primary {
  background-color: hsl(210, 5%, 41%);
  border-color: hsl(210, 5%, 36%);
  box-shadow: 0 5px 0 hsl(210, 5%, 20%);
}

.button--primary:hover {
  background-color: hsl(210, 5%, 51%);
  border-color: hsl(210, 5%, 41%);
}

.like {
  right: 35px;
  position: absolute;
  top: 0;
}

.like {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: .75rem;
} 

.like .button-text {
  display: none;
}

.like svg {
  fill: #fff;
  height: 25px;
  width: 25px;
} 

const {h, render, Component,} = preact;
const {useEffect, useState,} = preactHooks;

faker.seed(1258);

/** @jsx h */

const Card = (props) => {
  const {item} = props;
  return (
    <div class='card'>
      <div class='card__block card__block--main'>
        <h3 class='card__title'>
          {item.firstName + ' ' + item.lastName}
        </h3>
        <p class='card__subtitle'>
          {item.title}
        </p>
        <p class='card__text'>
          {item.biography}
        </p>
        <div class='card__element card__element--user-img'>
          {item.avatar && item.avatar.url ? (<img src={item.avatar.url} alt="" />): (<DefaultAvatar />)}
        </div>
      </div>
      <button class='button button--primary trade' type='button'>
        Trade
      </button>
      <button class='button button--secondary like'>
        <IconLike />
        <span class='button-text'>
          Like
        </span>
      </button>
    </div>
  );
};

const App = (props) => {
  const [items, setItems] = useState([]);
  
  useEffect(() => {
    const fakeItems = [
      {
        avatar: {
          url: null,
        },
        biography: 'Morgan has collected ants since they were six years old and now has many dozen ants but none in their pants.',
        firstName: 'Morgan',
        lastName: 'Sweeney',
        title: 'Ant Collector',
      }
    ];

    for (let i = 0; i < 9; ++i) {
      fakeItems.push({
        avatar: {
          url: 'https://api.adorable.io/avatars/140/' + faker.random.number() + '.png',
        },
        biography: faker.lorem.sentence(),
        firstName: faker.name.firstName(),
        lastName: faker.name.lastName(),
        title: faker.commerce.product() + ' Collector',
      })
    }
    
    setItems([...fakeItems]);
  }, []);
  
  return (
    <section class='section'>
      <h2 class='section__title'>
        {`Our collectors (${items.length})`}
      </h2>
      <div class='gallery gallery--grid'>
        {items && items.map((item, index) => (
          <div class={item.highlighted || 3 === (index % 4) ? 'gallery__item gallery__item--highlight': 'gallery__item'}>
            <Card item={item} key={'item-' + index} />
          </div>
        ))}
      </div>
    </section>
  );
}

const IconLike = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 9.229c.234-1.12 1.547-6.229 5.382-6.229 2.22 0 4.618 1.551 4.618 5.003 0 3.907-3.627 8.47-10 12.629-6.373-4.159-10-8.722-10-12.629 0-3.484 2.369-5.005 4.577-5.005 3.923 0 5.145 5.126 5.423 6.231zm-12-1.226c0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-7.962-9.648-9.028-12-3.737-2.338-5.262-12-4.27-12 3.737z"/></svg>
);

/* 
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z"/></svg>
*/

const DefaultAvatar = () => {
  return (
    <svg viewBox="0 0 100 100">
      <path d="m38.977 59.074c0 2.75-4.125 2.75-4.125 0s4.125-2.75 4.125 0" />
      <path d="m60.477 59.074c0 2.75-4.125 2.75-4.125 0s4.125-2.75 4.125 0" />
      <path d="m48.203 69.309c1.7344 0 3.1484-1.4141 3.1484-3.1484 0-0.27734-0.22266-0.5-0.5-0.5-0.27734 0-0.5 0.22266-0.5 0.5 0 1.1836-0.96484 2.1484-2.1484 2.1484s-2.1484-0.96484-2.1484-2.1484c0-0.27734-0.22266-0.5-0.5-0.5-0.27734 0-0.5 0.22266-0.5 0.5 0 1.7344 1.4141 3.1484 3.1484 3.1484z" />
      <path d="m35.492 24.371c0.42187-0.35156 0.48047-0.98438 0.125-1.4062-0.35156-0.42188-0.98438-0.48438-1.4062-0.125-5.1602 4.3047-16.422 17.078-9.5312 42.562 0.21484 0.79688 0.85547 1.4062 1.6641 1.582 0.15625 0.035156 0.31641 0.050781 0.47266 0.050781 0.62891 0 1.2344-0.27344 1.6445-0.76562 0.82812-0.98828 2.0039-1.5391 2.793-1.8203 0.56641 1.6055 1.4766 3.3594 2.9727 4.9414 2.2852 2.4219 5.4336 3.9453 9.3867 4.5547-3.6055 4.5-3.8047 10.219-3.8086 10.484-0.011719 0.55078 0.42187 1.0078 0.97656 1.0234h0.023438c0.53906 0 0.98437-0.42969 1-0.97266 0-0.054688 0.17187-4.8711 2.9805-8.7773 0.63281 1.2852 1.7266 2.5 3.4141 2.5 1.7109 0 2.7578-1.2695 3.3398-2.6172 2.8867 3.9258 3.0586 8.8359 3.0586 8.8906 0.015625 0.54297 0.46094 0.97266 1 0.97266h0.023438c0.55078-0.015625 0.98828-0.47266 0.97656-1.0234-0.007812-0.26953-0.20703-6.0938-3.9141-10.613 7.0781-1.3086 10.406-5.4219 11.969-8.9766 1.0508 0.98828 2.75 2.1992 4.793 2.1992 0.078126 0 0.15625 0 0.23828-0.003906 0.47266-0.023438 1.5781-0.074219 3.4219-4.4219 1.1172-2.6406 2.1406-6.0117 2.8711-9.4922 4.8281-22.945-4.7852-30.457-9.1445-32.621-12.316-6.1172-22.195-3.6055-28.312-0.42188-0.48828 0.25391-0.67969 0.85938-0.42578 1.3477s0.85938 0.67969 1.3477 0.42578c5.7031-2.9688 14.934-5.3047 26.5 0.4375 7.1875 3.5703 9 11.586 9.2539 17.684 0.49609 11.93-4.2617 23.91-5.7344 25.062h-0.015626c-1.832 0-3.4102-1.5742-4.0352-2.2852 0.28906-0.99609 0.44531-1.8672 0.52734-2.5117 0.62891 0.16797 1.2812 0.27344 1.9727 0.27344 0.55469 0 1-0.44922 1-1 0-0.55078-0.44531-1-1-1-7.3203 0-10.703-13.941-10.734-14.082-0.097656-0.40625-0.4375-0.71094-0.85156-0.76172-0.43359-0.050781-0.82031 0.16406-1.0117 0.53906-1.8984 3.7188-1.4297 6.7539-0.67969 8.668-6.2383-2.2852-8.9766-8.6914-9.0078-8.7617-0.17969-0.43359-0.62891-0.68359-1.1016-0.60156-0.46094 0.082032-0.80469 0.47266-0.82422 0.94141-0.14062 3.3359 0.67188 5.75 1.5 7.3164-8.3125-2.4297-10.105-11.457-10.184-11.875-0.097656-0.51562-0.57422-0.86328-1.0898-0.8125-0.51953 0.054687-0.90625 0.50391-0.89062 1.0234 0.41406 13.465-1.8516 17.766-3.2383 19.133-0.66406 0.65625-1.1992 0.67188-1.2383 0.67188-0.53906-0.050781-1.0156 0.31641-1.0938 0.85156-0.078125 0.54688 0.29688 1.0547 0.84375 1.1328 0.03125 0.003906 0.11328 0.015625 0.23828 0.015625 0.36719 0 1.1016-0.09375 1.9414-0.66406 0.050781 0.38672 0.125 0.81641 0.21875 1.2656-1.0273 0.35156-2.6211 1.0781-3.7812 2.4648-0.015625 0.019532-0.054687 0.066406-0.15625 0.046875-0.039062-0.007812-0.13281-0.039062-0.16406-0.15234-2.1875-8.1094-5.7148-28.309 8.8867-40.496zm12.711 51.828c-1.0039 0-1.5898-1.207-1.8672-2.0117 0.48047 0.023438 0.95703 0.050781 1.4531 0.050781 0.74219 0 1.4453-0.035156 2.1289-0.082031-0.24219 0.83594-0.76172 2.043-1.7148 2.043zm-13.148-30.664c1.9531 3.6211 5.6367 7.9102 12.305 8.6992 0.43359 0.046875 0.83984-0.18359 1.0234-0.57422 0.18359-0.39062 0.089844-0.85938-0.22656-1.1523-0.074219-0.070312-1.2734-1.2227-1.9688-3.6367 2 2.6094 5.3359 5.6836 10.305 6.5664 0.42187 0.070312 0.83594-0.125 1.0469-0.49219 0.21094-0.36719 0.16406-0.82812-0.11719-1.1484-0.023437-0.027344-1.9414-2.2969-1.2891-5.8906 1.2227 3.5508 3.7461 9.2227 7.8945 11.551-0.03125 0.55859-0.14844 1.668-0.55078 3.0156-0.085937 0.13672-0.125 0.28516-0.13672 0.44531-1.3008 3.8906-5.0039 9.3281-15.547 9.3281-5.375 0-9.4414-1.418-12.086-4.2109-3.5664-3.7656-3.332-8.8477-3.332-8.8984v-0.011719c1.5898-2.7227 2.5-7.3203 2.6797-13.59z" />
    </svg>
  );
}
      
render(<App />, document.getElementById('root'));