<!DOCTYPE html>

<head>

<title>MigrateIndex Search</title>

<style>

* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: sans-serif; background: transparent; padding: 1rem; }

#search-box { display: flex; gap: 10px; align-items: center; margin-bottom: 1rem; }

#search-input { flex: 1; height: 44px; border-radius: 12px; border: 1px solid #ddd; font-size: 15px; padding: 0 16px; outline: none; color: #111; background: #fff; }

#search-input:focus { border-color: #aaa; }

#search-btn { height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid #ddd; background: #fff; font-size: 14px; cursor: pointer; white-space: nowrap; color: #111; }

#search-btn:hover { background: #f5f5f5; }

#search-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#status { font-size: 13px; color: #888; margin-bottom: 1rem; min-height: 20px; }

#results { display: flex; flex-direction: column; gap: 10px; }

.agency-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: 14px; cursor: pointer; transition: border-color 0.15s; }

.agency-card:hover { border-color: #ccc; }

.agency-card.basic { opacity: 0.75; }

.logo-wrap { width: 40px; height: 40px; border-radius: 8px; background: #f5f5f5; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: #ccc; }

.card-body { flex: 1; min-width: 0; }

.card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }

.agency-name { font-size: 15px; font-weight: 500; color: #111; }

.blurred-text { filter: blur(4px); user-select: none; }

.tier-badge { font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 500; }

.tier-premium { background: #FAEEDA; color: #633806; }

.tier-verified { background: #E6F1FB; color: #0C447C; }

.tier-basic { background: #f0f0f0; color: #666; }

.agency-url { font-size: 13px; color: #888; margin-bottom: 4px; }

.agency-cap { font-size: 13px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.agency-countries { font-size: 12px; color: #aaa; margin-top: 4px; }

.match-reason { font-size: 12px; color: #aaa; margin-top: 6px; font-style: italic; }

.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }

.suggestion-chip { font-size: 13px; padding: 6px 14px; border-radius: 99px; border: 1px solid #eee; background: #f9f9f9; color: #666; cursor: pointer; }

.suggestion-chip:hover { border-color: #ccc; color: #111; }

.loading-dots { display: inline-flex; gap: 4px; align-items: center; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: #aaa; animation: bounce 1.2s infinite; }

.dot:nth-child(2) { animation-delay: 0.2s; }

.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce { 0%,80%,100%{transform:scale(1)} 40%{transform:scale(1.4)} }

.empty-state { text-align: center; padding: 2rem; color: #888; font-size: 14px; }

</style>

</head>

<body>

<button id="search-btn">Search</button>

</div>

<span class="suggestion-chip" onclick="fillAndSearch('paid media agencies in UAE')">Paid media UAE</span>

<span class="suggestion-chip" onclick="fillAndSearch('branding and creative agencies')">Branding & creative</span>

<span class="suggestion-chip" onclick="fillAndSearch('AI marketing agencies')">AI marketing</span>

<span class="suggestion-chip" onclick="fillAndSearch('PR and communications agencies')">PR & comms</span>

</div>

const WORKER_URL = 'https://migrateindex-search.iqramujtaba7.workers.dev';

const AIRTABLE_API_KEY = 'patFE5N9Q3ka1prOz.bbd92a3130927b91049c48bb236313689013a01e993e4b0d6801ad85c75e0f94';

const AIRTABLE_BASE_ID = 'app8YV8iAJsQv2Xng';

async function fetchAgencies() {

const url = `https://api.airtable.com/v0/${AIRTABLE_BASE_ID}/Agencies?pageSize=100`;

const res = await fetch(url, { headers: { Authorization: `Bearer ${AIRTABLE_API_KEY}` } });

if (!res.ok) { console.error('Airtable error:', res.status); return []; }

const data = await res.json();

return (data.records || []).map(r => ({

id: r.id,

name: r.fields['Agency Name'] || '',

tier: r.fields['Listing Tier'] || 'Basic',

url: r.fields['Web URL'] || '',

countries: r.fields['Countries Of Operation'] || '',

capabilities: r.fields['Capabilities'] || '',

short_capability: r.fields['Short Capability'] || ''

}));

}

function getTierInfo(tier) {

if (tier === 'Verified') return { label: 'Verified', cls: 'tier-verified' };

if (tier === 'Premium') return { label: 'Premium', cls: 'tier-premium' };

return { label: 'Basic', cls: 'tier-basic' };

}

function renderCard(agency) {

const tier = agency.tier || 'Basic';

const isBasic = tier === 'Basic';

const { label, cls } = getTierInfo(tier);

return `<div class="agency-card${isBasic ? ' basic' : ''}" onclick="handleCardClick('${agency.id}','${tier}')">

<span class="agency-name${isBasic ? ' blurred-text' : ''}">${agency.name}</span>

<span class="tier-badge ${cls}">${label}</span>

</div>

${!isBasic && agency.url ? `<div class="agency-url">${agency.url}</div>` : ''}

<div class="agency-cap${isBasic ? ' blurred-text' : ''}">${agency.short_capability}</div>

${agency.countries ? `<div class="agency-countries">📍 ${agency.countries}</div>` : ''}

${agency.reason ? `<div class="match-reason">${agency.reason}</div>` : ''}

</div>

</div>`;

}

function handleCardClick(recordId, tier) {

const url = tier === 'Basic'

? `https://mira9616.softr.app/agency-detail?recordId=${recordId}&blurred=true`

: `https://mira9616.softr.app/agency-detail?recordId=${recordId}`;

window.parent.location.href = url;

}

async function runSearch() {

const query = document.getElementById('search-input').value.trim();

if (!query) return;

const btn = document.getElementById('search-btn');

const status = document.getElementById('status');

const results = document.getElementById('results');

const suggestions = document.getElementById('suggestions');

btn.disabled = true;

suggestions.style.display = 'none';

results.innerHTML = '';

status.innerHTML = `<span class="loading-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span> Fetching agencies…`;

try {

const agencies = await fetchAgencies();

if (!agencies.length) { status.textContent = 'Could not load agencies.'; btn.disabled = false; return; }

status.innerHTML = `<span class="loading-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span> Finding best matches…`;

const res = await fetch(WORKER_URL, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ query, agencies })

});

const text = await res.text();

let ranked = [];

try { ranked = JSON.parse(text.replace(/```json|```/g, '').trim()); }

catch(e) { status.textContent = 'Could not parse results.'; btn.disabled = false; return; }

if (!ranked.length) {

results.innerHTML = `<div class="empty-state">No matching agencies found.</div>`;

status.textContent = '';

} else {

status.textContent = `${ranked.length} agenc${ranked.length === 1 ? 'y' : 'ies'} found for "${query}"`;

results.innerHTML = ranked.map(a => {

const full = agencies.find(ag => ag.name === a.name) || {};

return renderCard({ ...full, ...a });

}).join('');

}

} catch(err) { status.textContent = 'Something went wrong.'; console.error(err); }

btn.disabled = false;

}

function fillAndSearch(text) {

document.getElementById('search-input').value = text;

runSearch();

}

document.getElementById('search-btn').addEventListener('click', runSearch);

document.getElementById('search-input').addEventListener('keydown', e => { if (e.key === 'Enter') runSearch(); });

</script>

</body>

</html>