// ============================================
// OVER ONS — story + team + FAQ
// ============================================

function OverPage({ navigate }) {
  const { Placeholder, Reveal, SectionHeader, Icon } = window.LM_UI;
  const { TEAM, FAQ } = window.LM_DATA;
  const { t, img } = window.LM_CMS;

  const [openFaq, setOpenFaq] = React.useState(0);

  return (
    <div>
      {/* ===== STORY ===== */}
      <section className="section" style={{ paddingBottom: 64 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 80, alignItems: 'flex-start' }} className="hero-grid">
            <Reveal>
              <div style={{ position: 'relative' }}>
                <Placeholder label="founding photo" ratio="4/5" src={img('over.hero.founding', '')} style={{ borderRadius: 20 }} />
                <div style={{
                  position: 'absolute',
                  bottom: 24, left: 24,
                  background: 'var(--surface)',
                  padding: '14px 18px',
                  borderRadius: 12,
                  boxShadow: 'var(--shadow-lg)',
                }}>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-500)' }}>{t('over.hero.foundedLabel', 'Opgericht')}</div>
                  <div className="display" style={{ fontSize: 32, lineHeight: 1, marginTop: 4 }}>{t('over.hero.foundedYear', '2008')}</div>
                </div>
              </div>
            </Reveal>

            <Reveal delay={100}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
                <span className="stripe-accent"></span>
                <span className="eyebrow">{t('over.hero.eyebrow', "Over Dance Studio")}</span>
              </div>
              <h1 className="display" style={{ fontSize: 'clamp(40px, 6vw, 72px)', margin: '0 0 24px' }}>
                {t('over.hero.title1', 'Een dansschool die')} <span className="grad-text">{t('over.hero.title2', 'beweegt')}</span> {t('over.hero.title3', 'met haar dansers.')}
              </h1>
              <p style={{ fontSize: 18, color: 'var(--ink-700)', marginBottom: 20, lineHeight: 1.65 }}>
                {t('over.hero.body1', "Wat begon als een passieproject, groeide uit tot een hechte community van dansers, docenten en families. Bij Dance Studio geloven we dat dans verbindt — over leeftijden, achtergronden en niveaus heen.")}
              </p>
              <p style={{ fontSize: 16, color: 'var(--ink-500)', marginBottom: 32, lineHeight: 1.65 }}>
                {t('over.hero.body2', 'Van de eerste tippelende kleuterdansjes tot de competitievloer van onze LMDT-teams: we bouwen elke danser op met techniek, vertrouwen en plezier.')}
              </p>

              {/* Values */}
              <div className="grid grid-2" style={{ marginTop: 32 }}>
                {[0, 1, 2, 3].map(i => ({
                  num: t(`over.values.${i}.num`, ['01','02','03','04'][i]),
                  title: t(`over.values.${i}.title`, ['Kwaliteit','Plezier','Verbinding','Inclusie'][i]),
                  text: t(`over.values.${i}.text`, [
                    'Gediplomeerde docenten en doordachte opbouw — van basis tot podium.',
                    'Hard werken is leuker als de sfeer goed zit. Dans is energie.',
                    'We zijn een tweede thuis voor onze leden en hun families.',
                    'Iedereen die wil dansen, mag dansen — daarom G-Dans.',
                  ][i]),
                })).map((v, i) => (
                  <div key={i} style={{ padding: '20px 0', borderTop: '1px solid var(--border)' }}>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--blue-600)', letterSpacing: '0.12em', marginBottom: 8 }}>{v.num}</div>
                    <div className="display" style={{ fontSize: 18, marginBottom: 6, textTransform: 'none', letterSpacing: '-0.01em' }}>{v.title}</div>
                    <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>{v.text}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ===== TEAM ===== */}
      <section className="section section-tinted">
        <div className="container">
          <SectionHeader
            eyebrow={t('over.team.eyebrow', 'Het team')}
            title={<>{t('over.team.title1', 'Docenten')} <span className="grad-text">{t('over.team.title2', 'die het verschil')}</span> {t('over.team.title3', 'maken.')}</>}
            subtitle={t('over.team.subtitle', "Beweeg met je muis over de foto's, of klik op een docent om meer over hen te lezen.")}
            align="center"
          />

          <TeamShowcase team={TEAM} />
        </div>
      </section>

      {/* ===== FAQ ===== */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)', gap: 64 }} className="hero-grid">
            <Reveal>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <span className="stripe-accent"></span>
                <span className="eyebrow">{t('over.faq.eyebrow', 'Veelgesteld')}</span>
              </div>
              <h2 className="display" style={{ fontSize: 'clamp(32px, 4.5vw, 56px)', margin: '0 0 20px' }}>
                {t('over.faq.title', 'Vraag het ons gerust.')}
              </h2>
              <p style={{ color: 'var(--ink-500)', marginBottom: 28 }}>
                {t('over.faq.body', 'Geen antwoord op je vraag? Stuur ons een berichtje — we antwoorden snel.')}
              </p>
              <button className="btn btn-ghost" onClick={() => navigate('contact')}>
                {t('over.faq.cta', 'Stuur een vraag')} <Icon.ArrowRight />
              </button>
            </Reveal>

            <Reveal delay={100}>
              <div style={{ borderTop: '1px solid var(--border)' }}>
                {FAQ.map((f, i) => (
                  <div key={i} style={{ borderBottom: '1px solid var(--border)' }}>
                    <button
                      onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                      style={{
                        width: '100%',
                        background: 'none',
                        border: 'none',
                        padding: '24px 0',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        textAlign: 'left',
                        cursor: 'pointer',
                        fontFamily: 'var(--font-body)',
                        fontWeight: 600,
                        fontSize: 17,
                        color: 'var(--ink-900)',
                      }}>
                      {f.q}
                      <span style={{
                        width: 32, height: 32, borderRadius: '50%',
                        background: openFaq === i ? 'var(--teal-500)' : 'var(--ink-100)',
                        color: openFaq === i ? 'white' : 'var(--ink-700)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        flexShrink: 0, marginLeft: 16,
                        transition: 'all .2s',
                        transform: openFaq === i ? 'rotate(45deg)' : 'rotate(0)',
                      }}>
                        <Icon.Plus />
                      </span>
                    </button>
                    <div style={{
                      maxHeight: openFaq === i ? 200 : 0,
                      overflow: 'hidden',
                      transition: 'max-height .3s ease, opacity .25s, padding .25s',
                      opacity: openFaq === i ? 1 : 0,
                      paddingBottom: openFaq === i ? 24 : 0,
                    }}>
                      <p style={{ margin: 0, color: 'var(--ink-500)', fontSize: 15, lineHeight: 1.65 }}>{f.a}</p>
                    </div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

window.LM_PAGES = window.LM_PAGES || {};
window.LM_PAGES.Over = OverPage;

// ============================================
// TEAM SHOWCASE — asymmetric photo grid + name list + click-for-detail modal
// ============================================

function TeamShowcase({ team }) {
  const { Placeholder, Reveal, Icon } = window.LM_UI;
  const [hoveredId, setHoveredId] = React.useState(null);
  const [activeId, setActiveId] = React.useState(null);

  // 5-column split for asymmetric layout — verdeel evenredig zodat kolommen in balans blijven.
  // Met 10 members: 2 / 2 / 2 / 2 / 2. Met 9: 2 / 2 / 2 / 2 / 1. Etc.
  const col1 = team.filter((_, i) => i % 5 === 0);
  const col2 = team.filter((_, i) => i % 5 === 1);
  const col3 = team.filter((_, i) => i % 5 === 2);
  const col4 = team.filter((_, i) => i % 5 === 3);
  const col5 = team.filter((_, i) => i % 5 === 4);
  // Totale foto-grid breedte: 5 × ~100px + 4 × 10px = ~540px

  const active = team.find(m => m.id === activeId);

  // Close on Escape
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setActiveId(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <Reveal>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, auto) minmax(0, 1fr)',
        gap: 56,
        alignItems: 'flex-start',
        maxWidth: 1100,
        margin: '0 auto',
      }} className="team-showcase">

        {/* ===== Left: photo columns (5 kolommen, asymmetrisch met verschillende maten + offsets) ===== */}
        <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-start', flexShrink: 0 }}>
          <TeamPhotoColumn members={col1} hoveredId={hoveredId} setHoveredId={setHoveredId} setActiveId={setActiveId}
            size={{ w: 95, h: 110 }}  marginTop={0}  />
          <TeamPhotoColumn members={col2} hoveredId={hoveredId} setHoveredId={setHoveredId} setActiveId={setActiveId}
            size={{ w: 108, h: 124 }} marginTop={42} />
          <TeamPhotoColumn members={col3} hoveredId={hoveredId} setHoveredId={setHoveredId} setActiveId={setActiveId}
            size={{ w: 100, h: 116 }} marginTop={18} />
          <TeamPhotoColumn members={col4} hoveredId={hoveredId} setHoveredId={setHoveredId} setActiveId={setActiveId}
            size={{ w: 112, h: 128 }} marginTop={52} />
          <TeamPhotoColumn members={col5} hoveredId={hoveredId} setHoveredId={setHoveredId} setActiveId={setActiveId}
            size={{ w: 98, h: 112 }}  marginTop={10} />
        </div>

        {/* ===== Right: name list — 3 kolommen zodat lange lijsten compact blijven ===== */}
        <div className="team-name-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
          gap: '18px 20px',
          paddingTop: 8,
          alignContent: 'start',
        }}>
          {team.map((m) => (
            <TeamMemberRow key={m.id} member={m} hoveredId={hoveredId} setHoveredId={setHoveredId} setActiveId={setActiveId} />
          ))}
        </div>
      </div>

      {/* Hint */}
      <p className="mono" style={{
        textAlign: 'center', marginTop: 40,
        fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: 'var(--ink-400)',
      }}>
        {(window.LM_CMS?.t || ((_, f) => f))('over.team.hint', 'Klik op een naam of foto voor meer info')}
      </p>

      {/* ===== Modal ===== */}
      {active && <TeamMemberModal member={active} onClose={() => setActiveId(null)} />}

      <style>{`
        @media (max-width: 1100px) {
          /* Op tablets: foto-kolommen iets kleiner zodat alle 5 nog passen */
          .team-photo-col { transform: scale(0.92); transform-origin: top left; }
        }
        @media (max-width: 980px) {
          .team-showcase { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
        @media (max-width: 1100px) {
          /* Op kleinere laptops: namen-lijst naar 2 kolommen i.p.v. 3 (anders te smal) */
          .team-name-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        }
        @media (max-width: 720px) {
          /* Op smartphone: horizontaal scrollbaar voor de 5 fotokolommen */
          .team-showcase > div:first-child { overflow-x: auto; padding-bottom: 12px; gap: 8px !important; }
          .team-photo-col { transform: none; flex-shrink: 0; }
          /* Namen-lijst: terug naar 1 kolom — meer ademruimte op smal scherm */
          .team-name-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </Reveal>
  );
}

function TeamPhotoColumn({ members, hoveredId, setHoveredId, setActiveId, size, marginTop }) {
  return (
    <div className="team-photo-col" style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop }}>
      {members.map(m => (
        <TeamPhotoCard key={m.id} member={m} hoveredId={hoveredId} setHoveredId={setHoveredId} setActiveId={setActiveId} size={size} />
      ))}
    </div>
  );
}

function TeamPhotoCard({ member, hoveredId, setHoveredId, setActiveId, size }) {
  const { Placeholder } = window.LM_UI;
  const isActive = hoveredId === member.id;
  const isDimmed = hoveredId !== null && !isActive;

  return (
    <div
      onMouseEnter={() => setHoveredId(member.id)}
      onMouseLeave={() => setHoveredId(null)}
      onClick={() => setActiveId(member.id)}
      style={{
        width: size.w,
        height: size.h,
        borderRadius: 14,
        overflow: 'hidden',
        cursor: 'pointer',
        flexShrink: 0,
        opacity: isDimmed ? 0.45 : 1,
        transition: 'opacity .35s ease, transform .25s ease',
        position: 'relative',
        transform: isActive ? 'translateY(-2px)' : 'translateY(0)',
        boxShadow: isActive ? '0 12px 32px rgba(14,26,38,.18)' : 'none',
      }}
    >
      <Placeholder
        label={member.role.toLowerCase()}
        ratio="auto"
        src={member.photo || ''}
        style={{
          position: 'absolute', inset: 0, borderRadius: 14, aspectRatio: 'unset',
          filter: isActive ? 'grayscale(0) brightness(1)' : 'grayscale(1) brightness(0.85)',
          transition: 'filter .5s ease',
        }}
      />
      {/* subtle gradient overlay on active for depth */}
      {isActive && (
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, transparent 60%, rgba(45,111,165,.25) 100%)',
          pointerEvents: 'none',
        }}></div>
      )}
    </div>
  );
}

function TeamMemberRow({ member, hoveredId, setHoveredId, setActiveId }) {
  const isActive = hoveredId === member.id;
  const isDimmed = hoveredId !== null && !isActive;

  return (
    <div
      onMouseEnter={() => setHoveredId(member.id)}
      onMouseLeave={() => setHoveredId(null)}
      onClick={() => setActiveId(member.id)}
      style={{
        cursor: 'pointer',
        opacity: isDimmed ? 0.4 : 1,
        transition: 'opacity .3s ease',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {/* indicator bar */}
        <span style={{
          width: isActive ? 24 : 16,
          height: 12,
          borderRadius: 4,
          // Thema-bewust: de inactieve balk was hardcoded wit-transparant (onzichtbaar
          // op lichte thema's) en de inactieve naam hardcoded donker (onleesbaar op donkere).
          background: isActive ? 'var(--teal-500)' : 'var(--ink-200)',
          flexShrink: 0,
          transition: 'all .3s ease',
        }}></span>
        <span className="display" style={{
          fontSize: 19,
          textTransform: 'none',
          letterSpacing: '-0.01em',
          fontWeight: 800,
          color: isActive ? 'var(--ink-900)' : 'var(--ink-500)',
          transition: 'color .3s ease',
          lineHeight: 1,
        }}>
          {member.name}
        </span>

        {/* "More info" indicator appears on hover */}
        <span style={{
          opacity: isActive ? 1 : 0,
          transform: isActive ? 'translateX(0)' : 'translateX(-8px)',
          transition: 'all .25s ease',
          fontSize: 11,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: 'var(--blue-600)',
          fontFamily: 'var(--font-mono)',
          fontWeight: 600,
          marginLeft: 4,
          display: 'flex',
          alignItems: 'center',
          gap: 4,
          pointerEvents: 'none',
        }}>
          info →
        </span>
      </div>
      <p className="mono" style={{
        margin: '8px 0 0',
        paddingLeft: 36,
        fontSize: 10,
        letterSpacing: '0.22em',
        textTransform: 'uppercase',
        color: 'var(--ink-500)',
        fontWeight: 500,
      }}>
        {member.role}
      </p>
    </div>
  );
}

function TeamMemberModal({ member, onClose }) {
  const { Placeholder, Icon } = window.LM_UI;

  // Lock body scroll
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, []);

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 999,
        background: 'rgba(14,26,38,.6)',
        backdropFilter: 'blur(8px)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 24,
        animation: 'fadeIn .25s ease',
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: 'var(--surface)',
          borderRadius: 20,
          maxWidth: 920,
          width: '100%',
          maxHeight: '92vh',
          overflow: 'hidden',
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.15fr)',
          boxShadow: '0 40px 80px rgba(14,26,38,.4)',
          animation: 'slideUp .35s cubic-bezier(.2,.7,.2,1)',
        }}
        className="team-modal"
      >
        {/* Photo */}
        <div style={{ position: 'relative', background: 'var(--ink-100)', minHeight: 480 }}>
          <Placeholder
            label={`${member.role.toLowerCase()} · portret`}
            ratio="auto"
            src={member.photo || ''}
            style={{ position: 'absolute', inset: 0, borderRadius: 0, aspectRatio: 'unset' }}
          />
          <div style={{
            position: 'absolute',
            bottom: 20, left: 20,
            background: 'rgba(14,26,38,.88)',
            color: 'white',
            padding: '6px 12px',
            borderRadius: 4,
            fontSize: 10,
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
            fontFamily: 'var(--font-mono)',
            backdropFilter: 'blur(6px)',
          }}>{member.experience} ervaring</div>
        </div>

        {/* Info */}
        <div style={{
          padding: 40,
          overflowY: 'auto',
          maxHeight: '92vh',
          position: 'relative',
        }}>
          <button onClick={onClose} style={{
            position: 'absolute',
            top: 16, right: 16,
            width: 36, height: 36, borderRadius: '50%',
            background: 'var(--ink-100)',
            border: 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
            color: 'var(--ink-700)',
            transition: 'all .15s',
          }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--teal-500)'; e.currentTarget.style.color = 'white'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--ink-100)'; e.currentTarget.style.color = 'var(--ink-700)'; }}
          >
            <Icon.Close />
          </button>

          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <span className="stripe-accent"></span>
            <span className="eyebrow">{member.role}</span>
          </div>
          <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 44px)', margin: '0 0 12px', textTransform: 'none', letterSpacing: '-0.015em' }}>
            {member.name}
          </h2>
          <p style={{ fontSize: 14, color: 'var(--ink-500)', margin: '0 0 24px', fontStyle: 'italic' }}>
            {member.specialty}
          </p>

          <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--ink-700)', margin: '0 0 24px' }}>
            {member.bio}
          </p>

          {/* Quote */}
          <blockquote style={{
            margin: '0 0 28px',
            padding: '16px 20px',
            borderLeft: '3px solid',
            borderImage: 'linear-gradient(180deg, var(--teal-500), var(--blue-500)) 1',
            background: 'var(--gradient-soft)',
            fontFamily: 'var(--font-display)',
            fontStyle: 'italic',
            fontSize: 17,
            color: 'var(--ink-900)',
            lineHeight: 1.4,
          }}>
            {member.quote}
          </blockquote>

          {/* Classes */}
          <div style={{ marginBottom: 24 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-500)', marginBottom: 10, fontWeight: 600 }}>
              Geeft les in
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {member.classes.map((c, i) => (
                <span key={i} className="style-tag style-tag-blue" style={{ fontSize: 11 }}>{c}</span>
              ))}
            </div>
          </div>

          {/* Achievements */}
          <div style={{ marginBottom: 24 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-500)', marginBottom: 10, fontWeight: 600 }}>
              Highlights
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {member.achievements.map((a, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--ink-700)' }}>
                  <span style={{ color: 'var(--teal-500)', marginTop: 4, flexShrink: 0 }}><Icon.Check size={14} /></span>
                  <span>{a}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Socials */}
          {member.socials && Object.keys(member.socials).length > 0 && (
            <div style={{ paddingTop: 20, borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-500)', fontWeight: 600 }}>Volg</span>
              <div style={{ display: 'flex', gap: 8 }}>
                {member.socials.instagram && (
                  <a href={member.socials.instagram} style={socialBtnStyle}><Icon.Instagram size={14} /></a>
                )}
                {member.socials.linkedin && (
                  <a href={member.socials.linkedin} style={socialBtnStyle}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>
                  </a>
                )}
                {member.socials.twitter && (
                  <a href={member.socials.twitter} style={socialBtnStyle}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                  </a>
                )}
                {member.socials.behance && (
                  <a href={member.socials.behance} style={socialBtnStyle}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22 7h-7V5h7zm1.726 10c-.442 1.297-2.029 3-5.101 3-3.074 0-5.564-1.729-5.564-5.675 0-3.91 2.325-5.92 5.466-5.92 3.082 0 4.964 1.782 5.375 4.426.078.506.109 1.188.095 2.14H15.97c.13 3.211 3.483 3.312 4.588 2.029h3.168zm-7.686-4h4.965c-.105-1.547-1.136-2.219-2.477-2.219-1.466 0-2.277.768-2.488 2.219zm-9.574 6.988H0V5.021h6.953c5.476.081 5.58 5.444 2.72 6.906 3.461 1.26 3.577 8.061-3.207 8.061zM3 11h3.584c2.508 0 2.906-3-.312-3H3zm3.391 3H3v4.022h3.341c3.055 0 2.868-4.022.05-4.022z"/></svg>
                  </a>
                )}
              </div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 720px) {
          .team-modal { grid-template-columns: 1fr !important; max-height: 92vh; }
          .team-modal > div:first-child { min-height: 280px !important; }
        }
      `}</style>
    </div>
  );
}

const socialBtnStyle = {
  width: 32, height: 32, borderRadius: 8,
  background: 'var(--ink-100)',
  color: 'var(--ink-700)',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  transition: 'all .15s',
  textDecoration: 'none',
};