---
import * as config from "../config.yaml";
import core from "../core.json";
import contributors from "../contributors.json";
import { getPersonByGH } from "../lib/core.js";
import PeopleCarousel from "../components/PeopleCarousel.astro";

function findPerson(src) {
  const p = core.people.find((p) =>
    src.refs?.twitter
      ? p.refs?.twitter === src.refs.twitter
      : src.refs?.bsky
        ? p.refs.bsky === src.refs.bsky
        : {}
  );
  if (p) {
    p.ct = src;
  }
  return p;
}

function personLink(person) {
  return person.refs?.twitter
    ? `https://twitter.com/${person.refs.twitter}`
    : person.refs?.bsky
      ? `https://bsky.app/profile/${person.refs.bsky}`
      : "#";
}
---

<!-- <div class="mt-20">
    <h1><a href="https://docs.web3privacy.info/follow-us">Follow us</a></h1>
    <div class="w3pn-wgrid">
        {config.landing.follow.map((item) => (
            <a href={item.url || core.links[item.link]} target="_blank">
                <span><span class="icon" class:list={[item.ico || ""]}></span></span>
                <span class="title">{item.name}</span>
                <span>{item.text}</span>
            </a>
        ))}
    </div>
</div>
<div class="mt-10">
    <h1><a href="https://docs.web3privacy.info/communication">Coordination</a></h1>
    <div class="w3pn-wgrid">
        {config.landing.coord.map((item) => (
            <a href={item.url || core.links[item.link]} target="_blank">
                <span><span class="icon" class:list={[item.ico || ""]}></span></span>
                <span class="title">{item.name}</span>
                <span>{item.text}</span>
            </a>
        ))}
    </div>
</div> -->
<div class="mt-16">
  <h1>
    <a href="https://docs.web3privacy.info/get-involved">Join the Community</a>
  </h1>
  <div>{config.landing.community}</div>

  <h2 class="my-6">Speakers</h2>
  <div class="flex gap-3 flex-wrap items-center">
    {
      core.people
        .filter((p) => !core.teams["core-team"].includes(p.id))
        .filter((p) => p.imageUrl)
        .map((person) => (
          <div>
            <a href={personLink(person)}>
              <img
                src={person.imageUrl}
                title={person.name}
                class="w-14 rounded-full aspect-square"
              />
            </a>
          </div>
        ))
    }
  </div>

  <div class="flex gap-3 lg:gap-6 pt-4 flex-wrap mt-4 mb-14">
    <a href={core.links.cfp} class="button inverted"
      ><button>Submit your proposal (CfP)</button></a
    >
  </div>

  <h2 class="my-6">Git Contributors</h2>
  <div class="flex gap-3 flex-wrap mb-4 items-center">
    {
      // filter(p => !core.teams['core-team'].includes(getPersonByGH(p.login)?.id))
      contributors.items.map((contrib) => (
        <div>
          <a href={contrib.html_url} target="_blank" title={contrib.login}>
            <img
              src={contrib.avatar_url}
              class="w-14 rounded-full aspect-square"
            />
          </a>
        </div>
      ))
    }
  </div>

  <div class="flex gap-4 lg:gap-6 pt-4 flex-wrap">
    <a href={core.links.telegram} class="button inverted"
      ><button>Telegram</button></a
    >
    <a href={core.links.signal} class="button inverted"
      ><button>Signal</button></a
    >
    <a href={core.links.matrix} class="button inverted"
      ><button>matrix hub</button></a
    >
  </div>
</div>