<style>
.container { max-width:1200px; margin:auto; padding:60px 20px; font-family: Arial, sans-serif; }
h1 { text-align:center; font-size:42px; margin-bottom:10px; }
.subtitle { text-align:center; color:#666; margin-bottom:40px; }
.filters { margin-bottom:30px; }
.filter-group { margin-bottom:20px; }
.filter-group h3 { font-size:14px; text-align:center; margin-bottom:15px; }
.buttons { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
button { padding:8px 16px; border-radius:20px; border:1px solid #ccc; background:white; cursor:pointer; }
button.active { background:black; color:white; border-color:black; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:25px; }
.card { background:white; border-radius:12px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,0.08); }
.card img { width:100%; height:220px; object-fit:cover; }
.card-content { padding:20px; }
.card h2 { margin:0 0 8px 0; font-size:20px; }
.meta { font-size:12px; color:#777; margin-bottom:6px; }
.bio { font-size:14px; color:#444; margin-bottom:15px; }
.card a { text-decoration:none; font-size:14px; color:black; border:1px solid black; padding:6px 12px; border-radius:20px; }
.counter { text-align:center; margin-bottom:25px; font-size:14px; color:#555; }
.clear-btn { display:block; margin:0 auto 30px auto; background:#eee; }
</style>

<div class="container">
<h1>Our Creators</h1>
<p class="subtitle">Select multiple languages and categories to refine your search.</p>

<div class="filters">
<div class="filter-group">
<h3>Language (Multi-select)</h3>
<div class="buttons" id="language-filters"></div>
</div>

<div class="filter-group">
<h3>Content Categories (Multi-select)</h3>
<div class="buttons" id="category-filters"></div>
</div>

<button class="clear-btn" onclick="clearFilters()">Clear All Filters</button>
</div>

<div class="counter" id="counter"></div>
<div class="grid" id="creators-grid"></div>
</div>

<script>
const creators = [
{ name:"Steve", languages:["French","English"], categories:["Food & Dining","Travel & Adventure","Lifestyle & Home"], bio:"Food, travel and lifestyle storyteller.", image:"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=800" },
{ name:"Charlotte", languages:["French"], categories:["Fitness & Wellness","Sports & Athletics","Family & Parenting"], bio:"Wellness and sports creator.", image:"https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=800" }
];

const languages = ["French","English"];
const categories = ["Beauty & Lifestyle","Fashion & Style","Food & Dining","Fitness & Wellness","Sports & Athletics","Travel & Adventure","Family & Parenting","Lifestyle & Home","Tech","Humor"];

let activeLanguages = [];
let activeCategories = [];

function renderFilters() {
const langContainer = document.getElementById("language-filters");
const catContainer = document.getElementById("category-filters");

languages.forEach(lang => {
const btn = document.createElement("button");
btn.innerText = lang;
btn.onclick = () => toggleLanguage(lang, btn);
langContainer.appendChild(btn);
});

categories.forEach(cat => {
const btn = document.createElement("button");
btn.innerText = cat;
btn.onclick = () => toggleCategory(cat, btn);
catContainer.appendChild(btn);
});
}

function toggleLanguage(lang, btn) {
if (activeLanguages.includes(lang)) {
activeLanguages = activeLanguages.filter(l => l !== lang);
btn.classList.remove("active");
} else {
activeLanguages.push(lang);
btn.classList.add("active");
}
renderCreators();
}

function toggleCategory(cat, btn) {
if (activeCategories.includes(cat)) {
activeCategories = activeCategories.filter(c => c !== cat);
btn.classList.remove("active");
} else {
activeCategories.push(cat);
btn.classList.add("active");
}
renderCreators();
}

function clearFilters() {
activeLanguages = [];
activeCategories = [];
document.querySelectorAll(".buttons button").forEach(b => b.classList.remove("active"));
renderCreators();
}

function renderCreators() {
const grid = document.getElementById("creators-grid");
const counter = document.getElementById("counter");
grid.innerHTML = "";

const filtered = creators.filter(c => {
const langMatch = activeLanguages.length === 0 || activeLanguages.some(l => c.languages.includes(l));
const catMatch = activeCategories.length === 0 || activeCategories.every(cat => c.categories.includes(cat));
return langMatch && catMatch;
});

counter.innerText = filtered.length + " creator(s) found";

filtered.forEach(c => {
const card = document.createElement("div");
card.className = "card";
card.innerHTML = `
<img src="${c.image}" />
<div class="card-content">
<h2>${c.name}</h2>
<div class="meta">${c.languages.join(" • ")}</div>
<div class="meta">${c.categories.join(" • ")}</div>
<div class="bio">${c.bio}</div>
<a href="#">View Profile</a>
</div>`;
grid.appendChild(card);
});
}

renderFilters();
renderCreators();
</script>