/* =============================================================================
   Consultants section — renders the full HealSpace team from
   window.HEALSPACE_CONSULTANTS as REAL, crawlable HTML text.
   Headshots are <img> with descriptive alt; all bios/credentials are <h3>/<p>/<li>.
   ============================================================================= */
function Consultants() {
  const all = window.HEALSPACE_CONSULTANTS || [];
  const cats = ['All', 'Psychologist', 'Counselor', 'Psychiatrist'];
  const order = { Psychologist: 0, Counselor: 1, Psychiatrist: 2 };
  // Manual lead order for psychologists (Head psychologist first, then deputies)
  const lead = { galacgac: 0, maunahan: 1, toledo: 2 };
  const hasInPerson = c => /in-person/i.test(c.avail || '') ? 0 : 1;
  const rank = c => c.creds.some(x => /Fellow/i.test(x)) ? 0 : c.creds.some(x => /Diplomate/i.test(x)) ? 1 : 2;
  const sorted = [...all].sort((a, b) => {
    if (order[a.cat] !== order[b.cat]) return (order[a.cat] ?? 9) - (order[b.cat] ?? 9);
    if (a.cat === 'Psychiatrist') { // In-person first, then Fellows → Diplomates → General
      if (hasInPerson(a) !== hasInPerson(b)) return hasInPerson(a) - hasInPerson(b);
      if (rank(a) !== rank(b)) return rank(a) - rank(b);
    }
    const la = lead[a.slug] ?? 99, lb = lead[b.slug] ?? 99;
    if (la !== lb) return la - lb;                  // pinned leads first
    return hasInPerson(a) - hasInPerson(b);         // then in-person available
  });
  const [filter, setFilter] = React.useState('All');
  const label = { All: 'Everyone', Psychiatrist: 'Psychiatrists', Psychologist: 'Psychologists', Counselor: 'Counselors' };
  const list = filter === 'All' ? sorted : sorted.filter(c => c.cat === filter);

  return (
    <Section id="consultants" style={{ padding: '64px 0 32px' }}>
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 30px' }}>
        <Eyebrow>Meet our consultants</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,3vw,40px)', color: 'var(--hs-teal)', margin: '12px 0 12px' }}>A team you can trust</h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--hs-ink-2)' }}>
          Licensed psychiatrists, psychologists and guidance counselors — each ready to listen without judgment, online or in person.
        </p>
      </div>

      {/* Category filter */}
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 36 }}>
        {cats.map(c => {
          const active = filter === c;
          const n = c === 'All' ? all.length : all.filter(x => x.cat === c).length;
          return (
            <button key={c} onClick={() => setFilter(c)} style={{
              cursor: 'pointer', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14,
              padding: '9px 18px', borderRadius: 'var(--r-pill)',
              background: active ? 'var(--hs-sky)' : '#fff',
              color: active ? '#fff' : 'var(--hs-teal)',
              border: `1.5px solid ${active ? 'var(--hs-sky)' : 'var(--hs-line)'}`,
              transition: 'all var(--dur) var(--ease-soft)',
            }}>{label[c]} <span style={{ opacity: .7, fontWeight: 700 }}>· {n}</span></button>
          );
        })}
      </div>

      <div className="hs-consult-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 22 }}>
        {list.map(c => <ConsultantCard key={c.slug} c={c} />)}
      </div>
    </Section>
  );
}

function ConsultantCard({ c }) {
  const [h, setH] = React.useState(false);
  const catColor = { Psychiatrist: 'var(--hs-sky)', Psychologist: 'var(--hs-sprout-deep)', Counselor: 'var(--hs-coral)' }[c.cat] || 'var(--hs-sky)';
  return (
    <article onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
      background: '#fff', borderRadius: 'var(--r-xl)', overflow: 'hidden',
      boxShadow: h ? 'var(--shadow-lg)' : 'var(--shadow-md)',
      transform: h ? 'translateY(-3px)' : 'none', transition: 'all var(--dur) var(--ease-soft)',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', gap: 18, padding: 20 }}>
        <img src={window.asset(`./assets/consultants/${c.slug}.${c.ext || 'jpg'}`)} alt={`Portrait of ${c.name}, ${c.role} at HealSpace Psychological Clinic`} loading="lazy"
          style={{ width: 104, height: 128, objectFit: 'cover', objectPosition: 'center', borderRadius: 'var(--r-lg)', flex: '0 0 auto', background: 'var(--hs-cream)', position: 'static' }} />
        <div style={{ minWidth: 0 }}>
          <span style={{ display: 'inline-block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 10.5, letterSpacing: '.1em', textTransform: 'uppercase', color: catColor, marginBottom: 6 }}>{c.headtag || c.cat}</span>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--hs-teal)', margin: '0 0 3px', lineHeight: 1.2 }}>{c.name}</h3>
          {c.role !== c.cat && c.role !== c.headtag && (
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: catColor, marginBottom: c.creds.length ? 6 : 0 }}>{c.role}</div>
          )}
          {c.creds.map((cr, i) => (
            <div key={i} style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--hs-ink-3)', lineHeight: 1.45 }}>{cr}</div>
          ))}
          {c.avail && (
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 10 }}>
              {c.avail.split('&').map(a => a.trim()).map(a => (
                <span key={a} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 11.5,
                  padding: '4px 10px', borderRadius: 'var(--r-pill)',
                  background: a === 'Online' ? 'var(--hs-sky-soft)' : 'var(--hs-sprout-soft)',
                  color: a === 'Online' ? 'var(--hs-sky-deep)' : 'var(--hs-sprout-deep)',
                }}>
                  <Icon name={a === 'Online' ? 'video' : 'map-pin'} size={13} />{a}
                </span>
              ))}
            </div>
          )}
        </div>
      </div>

      <div style={{ padding: '0 20px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {c.training && (
          <Detail label="Psychotherapy training" color={catColor}>
            {c.training.map((t, i) => <div key={i}>{t}</div>)}
          </Detail>
        )}
        <Detail label="Education" color={catColor}>
          {c.education.map((e, i) => (
            <div key={i} style={{ marginBottom: 4 }}>
              <span style={{ fontWeight: 700, color: 'var(--hs-teal)' }}>{e.d}</span>
              {e.n && <span style={{ color: catColor, fontWeight: 600 }}> · {e.n}</span>}
              {e.s && <><br />{e.s}</>}
            </div>
          ))}
        </Detail>
        {c.internship && (
          <Detail label="Internship" color={catColor}>
            {c.internship.map((t, i) => <div key={i}>{t}</div>)}
          </Detail>
        )}

        <div>
          <DetailLabel color={catColor}>Areas of practice</DetailLabel>
          <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginTop: 8 }}>
            {c.expertise.map((t, i) => (
              <span key={i} style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12, padding: '5px 12px', borderRadius: 'var(--r-pill)', background: 'var(--hs-cream)', color: 'var(--hs-teal)', border: '1px solid var(--hs-line)' }}>{t}</span>
            ))}
          </div>
        </div>

        {c.sees && (
          <Detail label="Sees" color={catColor}>{c.sees}</Detail>
        )}
        {c.languages && (
          <div>
            <DetailLabel color={catColor}>Languages</DetailLabel>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--hs-ink-2)', marginTop: 4 }}>{c.languages.join(' · ')}</div>
          </div>
        )}
      </div>
    </article>
  );
}

function DetailLabel({ children, color }) {
  return <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase', color: color }}>{children}</div>;
}
function Detail({ label, color, children }) {
  return (
    <div>
      <DetailLabel color={color}>{label}</DetailLabel>
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--hs-ink-2)', marginTop: 5 }}>{children}</div>
    </div>
  );
}
Object.assign(window, { Consultants });