/* VARA5 Careers — Homepage app
   People carousel + role-list render + Tweaks (accent / typography) */

const TYPE_PAIRINGS = {
  'editorial': { label: 'Editorial', display: '"Cormorant Garamond", Georgia, serif', body: '"Manrope", "Helvetica Neue", sans-serif' },
  'classic':   { label: 'Classic',   display: '"EB Garamond", Georgia, serif',        body: '"Work Sans", "Helvetica Neue", sans-serif' },
  'modern':    { label: 'Modern',    display: '"Italiana", Georgia, serif',           body: '"Outfit", "Helvetica Neue", sans-serif' }
};
const ACCENTS = {
  'copper':    '#B07C54',
  'olive':     '#7C7A4E',
  'terracotta':'#A85C44',
  'slate':     '#4E6072'
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "copper",
  "typePairing": "editorial"
}/*EDITMODE-END*/;

function applyTheme(t) {
  const root = document.documentElement;
  const hex = ACCENTS[t.accent] || ACCENTS.copper;
  root.style.setProperty('--accent', hex);
  const tp = TYPE_PAIRINGS[t.typePairing] || TYPE_PAIRINGS.editorial;
  root.style.setProperty('--font-display', tp.display);
  root.style.setProperty('--font-body', tp.body);
}

/* ---------- People carousel (vanilla, into existing #people-track) ----------
   EDIT ME → the 10 people. Paste each person's name and their Cloudinary
   image URL. Leave img as '' to show a "portrait" placeholder until ready. */
const PEOPLE = [
  { name: 'Ravneet Bhandari',  role: 'Founder/Director',                         img: '/project/assets/RAVNEET AVATAR.jpeg' },
  { name: 'Nikhil Nath',       role: 'Founder/Director',                         img: '/project/assets/NIKHIL AVATAR.jpeg' },
  { name: 'Deepti Sethi',      role: 'Principal Curator',                        img: '/project/assets/DEEPTI AVATAR.jpeg' },
  { name: 'Pranav Dhiman',     role: "Founder's Office Innovation Associate",    img: '/project/assets/PRANAV.png' },
  { name: 'Palak Mahajan',     role: 'Marketing Manager',                        img: '/project/assets/PALAK AVATAR.jpeg' },
  { name: 'Manan Gupta',       role: "Founder's Office Associate",               img: '/project/assets/Manan AVATAR.jpeg' },
  { name: 'Kanika Gupta',      role: 'Travel Designer',                          img: '/project/assets/KANIKA AVATAR.jpeg' },
  { name: 'Manveen Bhinder',      role: 'People Architect',                      img: '/project/assets/MANVEEN Avatar.jpeg' },
];

function renderPeople() {
  const track = document.getElementById('people-track');
  if (!track) return;
  track.innerHTML = PEOPLE.map(p => `
    <article class="person-card">
      <div class="pc-photo">
        ${p.img
          ? `<img src="${p.img}" alt="${p.role}" loading="lazy">`
          : `<div class="ph">portrait</div>`}
      </div>
      ${p.role ? `<div class="pc-role">${p.role}</div>` : ''}
    </article>
  `).join('');

  const prev = document.getElementById('ppl-prev');
  const next = document.getElementById('ppl-next');
  const step = () => {
    const card = track.querySelector('.person-card');
    const gap = parseFloat(getComputedStyle(track).columnGap) || 18;
    return card ? card.offsetWidth + gap : track.clientWidth * 0.8;
  };
  prev && prev.addEventListener('click', () => track.scrollBy({ left: -step(), behavior: 'smooth' }));
  next && next.addEventListener('click', () => track.scrollBy({ left:  step(), behavior: 'smooth' }));
}

/* ---------- Role list (homepage teaser → 3 departments) ---------- */
const HOME_DEPARTMENTS = [
  { id: 'operations', title: 'Travel Operations',        note: '' },
  { id: 'tech',       title: 'Technology',         note: '' },
  { id: 'founders',   title: "Founder's Office",   note: '' },
];
function renderRoles() {
  const el = document.getElementById('role-list');
  if (!el) return;
  el.innerHTML = HOME_DEPARTMENTS.map(d => `
    <a class="role-row" href="department.html?dept=${d.id}">
      <div class="r-title">${d.title}</div>
      <div class="r-dept">${d.note}</div>
      <div class="r-loc">View open positions</div>
      <div class="r-arr">→</div>
    </a>
  `).join('');
}

/* ---------- Tweaks ---------- */
function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTheme(t); }, [t.accent, t.typePairing]);
  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakColor label="Accent"
                  value={ACCENTS[t.accent]}
                  options={Object.values(ACCENTS)}
                  onChange={(hex) => {
                    const k = Object.keys(ACCENTS).find(x => ACCENTS[x] === hex) || 'copper';
                    setTweak('accent', k);
                  }} />
      <TweakSection label="Typography" />
      <TweakRadio label="Pairing"
                  value={t.typePairing}
                  options={['editorial', 'classic', 'modern']}
                  onChange={(v) => setTweak('typePairing', v)} />
    </TweaksPanel>
  );
}

/* ---------- Boot ---------- */
renderPeople();
renderRoles();
const mount = document.createElement('div');
document.body.appendChild(mount);
ReactDOM.createRoot(mount).render(<TweaksApp />);