script.js

const usernameInput = document.getElementById('usernameInput');
const searchBtn = document.getElementById('searchBtn');
const profileCard = document.getElementById('profileCard');
const errorEl = document.getElementById('error');

// Demo data for offline use (simulated GitHub profiles)
const demoProfiles = {
  octocat: {
    name: 'The Octocat', login: 'octocat', bio: 'GitHub mascot and beloved mascot of the coding community.',
    avatar: 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=200',
    followers: 8500, following: 9, repos: 8, company: '@github', location: 'San Francisco', blog: 'octocat.github.io',
  },
  torvalds: {
    name: 'Linus Torvalds', login: 'torvalds', bio: 'Creator of Linux and Git. Finnish-American software engineer.',
    avatar: 'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=200',
    followers: 200000, following: 0, repos: 7, company: 'Linux Foundation', location: 'Portland, OR', blog: 'kernel.org',
  },
  gaearon: {
    name: 'Dan Abramov', login: 'gaearon', bio: 'Working on React. Co-author of Redux and Create React App.',
    avatar: 'https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=200',
    followers: 89000, following: 171, repos: 263, company: '@bluesky-social', location: 'London, UK', blog: 'overreacted.io',
  },
};

function searchProfile() {
  const username = usernameInput.value.trim().toLowerCase();
  if (!username) return;
  errorEl.style.display = 'none';
  profileCard.style.display = 'block';

  // Try to fetch from GitHub API, fall back to demo data
  fetch(`https://api.github.com/users/${username}`)
    .then(res => {
      if (!res.ok) throw new Error('Not found');
      return res.json();
    })
    .then(data => renderProfile({
      name: data.name || data.login,
      login: data.login,
      bio: data.bio || 'No bio available',
      avatar: data.avatar_url,
      followers: data.followers,
      following: data.following,
      repos: data.public_repos,
      company: data.company || 'N/A',
      location: data.location || 'Unknown',
      blog: data.blog || '',
    }))
    .catch(() => {
      // Fall back to demo data
      const profile = demoProfiles[username];
      if (profile) { renderProfile(profile); }
      else {
        profileCard.style.display = 'none';
        errorEl.style.display = 'block';
      }
    });
}

function renderProfile(p) {
  profileCard.innerHTML = `
    <div class="card-header"></div>
    <div class="card-body">
      <div class="avatar"><img src="${p.avatar}" alt="${p.login}" /></div>
      <h2>${p.name}</h2>
      <div class="login">@${p.login}</div>
      <p class="bio">${p.bio}</p>
      <div class="card-stats">
        <div class="stat"><div class="stat-value">${p.repos}</div><div class="stat-label">Repos</div></div>
        <div class="stat"><div class="stat-value">${p.followers.toLocaleString()}</div><div class="stat-label">Followers</div></div>
        <div class="stat"><div class="stat-value">${p.following.toLocaleString()}</div><div class="stat-label">Following</div></div>
      </div>
      <div class="card-info">
        <p><i class="fa-solid fa-building"></i> ${p.company}</p>
        <p><i class="fa-solid fa-location-dot"></i> ${p.location}</p>
        ${p.blog ? `<p><i class="fa-solid fa-link"></i> ${p.blog}</p>` : ''}
      </div>
      <a href="https://github.com/${p.login}" target="_blank" rel="noopener" class="card-link"><i class="fa-brands fa-github"></i> View on GitHub</a>
    </div>
  `;
}

searchBtn.addEventListener('click', searchProfile);
usernameInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') searchProfile(); });

searchProfile();