// Team2.jsx — editorial 2-up portrait spread + big pull-quote.
const _RT = (k, fb) => (typeof window !== 'undefined' && window.__resources && window.__resources[k]) || fb;

const TEAM = [
  {
    name: 'Nils Hassemer',
    role: 'Ton',
    photo: _RT('teamNils', 'uploads/IMG-20180610-WA0019.jpg'),
    specs: ['FoH-Mix', 'PA-Tuning', 'Beratung'],
    bio: 'Gründer, Toningenieur, FoH-Mensch. Macht Anlagen, die klingen wie sie sollen — egal ob Trauung, Tanzparkett oder Festival.',
    contact: { phone: '0177 88 37 650', mail: 'info@nf-audio.de' } },
  {
    name: 'Fabian Scheele',
    role: 'Licht',
    photo: _RT('teamFabian', 'assets/photos/fabian-casual.png'),
    specs: ['Show-Programming', 'Lichtdesign', 'Pult live'],
    bio: 'Lichtmensch. Programmiert die Show, fährt das Pult live. Sorgt dafür, dass jedes Stück in der richtigen Farbe steht.',
    contact: { phone: '01515 631 78 04', mail: 'info@nf-audio.de' } },
];

function Team2() {
  window.useReveal();
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  return (
    <React.Fragment>
      {/* ----- PULL QUOTE ----- */}
      <section style={{
        background: 'var(--noir)',
        paddingTop: 'clamp(80px, 14vh, 160px)',
        paddingBottom: 'clamp(80px, 14vh, 160px)',
        position: 'relative',
        overflow: 'hidden' }}>
        <div className="container">
          <div className="reveal" style={{
            display: 'grid',
            gridTemplateColumns: 'auto minmax(0, 1fr)',
            gap: 'clamp(24px, 4vw, 60px)',
            alignItems: 'flex-start',
            maxWidth: 1300, margin: '0 auto' }}>
            <span className="display" style={{
              fontSize: 'clamp(120px, 18vw, 320px)',
              lineHeight: 0.7,
              color: 'var(--neon)',
              marginTop: '-0.2em' }}>"</span>
            <div>
              <p style={{
                fontFamily: "'Barlow', sans-serif",
                fontStyle: 'italic',
                fontWeight: 300,
                fontSize: 'clamp(28px, 4vw, 64px)',
                lineHeight: 1.12,
                color: 'var(--paper)',
                margin: '0 0 32px' }}>
                Wir wollen, dass dein Event hängenbleibt — bei dir, bei deinen Gästen, in den Gesprächen am nächsten Tag. Dafür planen wir, schrauben wir, mischen wir.
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{ width: 40, height: 1, background: 'var(--neon)' }}></span>
                <span className="eyebrow" style={{ color: 'var(--paper)' }}>Nils &amp; Fabian — NF-Audio</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ----- TEAM SPREAD ----- */}
      <section id="team" style={{
        background: 'var(--noir-2)',
        paddingTop: 'clamp(80px, 14vh, 160px)',
        paddingBottom: 'clamp(80px, 14vh, 160px)' }}>
        <div className="container">
          <SectionEyebrow num="04" label="Wer wir sind" />

          <div className="reveal" style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1fr) auto',
            alignItems: 'end', gap: 40, marginBottom: 'clamp(48px, 8vh, 96px)' }}>
            <h2 className="display" style={{ fontSize: 'var(--t-display)', margin: 0, color: 'var(--paper)' }}>
              <span style={{ color: 'var(--neon)' }}>Nils & Fabian.</span><br/>
              Die richtige Crew für dein Event.
            </h2>
            <p style={{ maxWidth: 360, fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.5, margin: 0 }}>
              Nils & Fabian sind deine Ansprechpartner und die Gründer. Für größere Events bauen sie auf ein kompetentes Netzwerk aus zuverlässigen Partnern — damit jeder Wunsch erfüllt wird.
            </p>
          </div>

          {/* 2-up editorial dossier */}
          <div style={{
            position: 'relative',
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 540px))',
            gap: 'clamp(24px, 3vw, 48px)',
            justifyContent: 'start',
            alignItems: 'start' }}>
            {TEAM.map((p, i) => {
              const [first, ...rest] = p.name.split(' ');
              const last = rest.join(' ');
              return (
              <article key={i} className="reveal" style={{
                position: 'relative',
                display: 'flex', flexDirection: 'column',
                borderLeft: '1px solid var(--hair)',
                paddingLeft: 'clamp(20px, 2.5vw, 36px)' }}>

                {/* Kicker */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22, flexWrap: 'wrap' }}>
                  <span className="mono" style={{
                    fontSize: 11, color: 'var(--neon)',
                    letterSpacing: '0.22em', fontWeight: 600 }}>
                    // CREW {String(i + 1).padStart(2, '0')} / 02
                  </span>
                  <span style={{ width: 28, height: 1, background: 'var(--hair)' }}></span>
                  <span className="mono eyebrow" style={{ color: 'var(--ink-soft)' }}>
                    Abteilung {p.role}
                  </span>
                </div>

                {/* Photo */}
                <div className="team-photo" style={{
                  position: 'relative',
                  aspectRatio: '4 / 5',
                  width: '100%',
                  maxWidth: 500,
                  background: 'var(--noir-3)',
                  overflow: 'hidden',
                  marginBottom: 28 }}>

                  {/* Stencil number behind */}
                  <span className="display" aria-hidden="true" style={{
                    position: 'absolute',
                    right: '-0.06em', bottom: '-0.18em',
                    fontSize: 'clamp(220px, 30vw, 420px)',
                    color: 'transparent',
                    WebkitTextStroke: '1.5px rgba(242,240,234,0.13)',
                    pointerEvents: 'none', zIndex: 0,
                    lineHeight: 0.75,
                    letterSpacing: '-0.05em' }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>

                  <img src={p.photo} alt={p.name} style={{
                    position: 'relative', zIndex: 1,
                    width: '100%', height: '100%', objectFit: 'cover',
                    objectPosition: i === 1 ? 'center 20%' : 'center 18%',
                    filter: 'contrast(1.05)',
                    transition: 'transform 0.6s ease, filter 0.6s ease' }}
                  onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.04)'; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }} />

                  {/* Corner brackets */}
                  {[['top', 'left'], ['top', 'right'], ['bottom', 'left'], ['bottom', 'right']].map(([v, h]) => (
                    <span key={v + h} aria-hidden="true" style={{
                      position: 'absolute', zIndex: 2,
                      [v]: 12, [h]: 12,
                      width: 16, height: 16,
                      [v === 'top' ? 'borderTop' : 'borderBottom']: '1px solid var(--paper)',
                      [h === 'left' ? 'borderLeft' : 'borderRight']: '1px solid var(--paper)',
                      opacity: 0.75,
                      mixBlendMode: 'difference' }}></span>
                  ))}

                  {/* Top-left mono chip */}
                  <span className="mono" style={{
                    position: 'absolute', top: 18, left: 18, zIndex: 3,
                    padding: '4px 10px',
                    border: '1px solid rgba(242,240,234,0.45)',
                    background: 'rgba(10,10,10,0.55)',
                    backdropFilter: 'blur(8px)',
                    WebkitBackdropFilter: 'blur(8px)',
                    fontSize: 10, letterSpacing: '0.22em',
                    color: 'var(--paper)', fontWeight: 600 }}>
                    {p.role.toUpperCase()}
                  </span>
                </div>

                {/* Name */}
                <h3 className="display" style={{
                  fontSize: 'clamp(36px, 3.6vw, 56px)',
                  margin: '0 0 14px',
                  color: 'var(--paper)',
                  lineHeight: 0.88 }}>
                  {first}<br/>
                  <span style={{ color: 'var(--neon)' }}>{last}.</span>
                </h3>

                {/* Specialty chips */}
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 22 }}>
                  {p.specs.map(s => (
                    <span key={s} className="mono" style={{
                      fontSize: 10.5, letterSpacing: '0.14em',
                      color: 'var(--ink-soft)', textTransform: 'uppercase',
                      padding: '5px 10px',
                      border: '1px solid var(--hair)' }}>
                      {s}
                    </span>
                  ))}
                </div>

                {/* Bio */}
                <p style={{
                  fontSize: 16.5, lineHeight: 1.55,
                  color: 'var(--paper)',
                  margin: '0 0 26px',
                  maxWidth: 460 }}>
                  {p.bio}
                </p>

                {/* Hairline */}
                <div style={{ height: 1, background: 'var(--hair)', marginBottom: 22 }}></div>

                {/* Contact buttons */}
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <a href={`tel:${p.contact.phone.replace(/\s/g, '')}`} data-hover className="team-cta" style={{
                    display: 'inline-flex', alignItems: 'center', gap: 10,
                    padding: '11px 16px',
                    border: '1px solid var(--hair)',
                    color: 'var(--paper)',
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 12.5, letterSpacing: '0.06em',
                    transition: 'border-color 0.2s, background 0.2s, color 0.2s' }}>
                    <i data-lucide="phone" style={{ width: 14, height: 14, color: 'var(--neon)' }}></i>
                    {p.contact.phone}
                  </a>
                  <a href={`mailto:${p.contact.mail}`} data-hover className="team-cta" style={{
                    display: 'inline-flex', alignItems: 'center', gap: 10,
                    padding: '11px 16px',
                    border: '1px solid var(--hair)',
                    color: 'var(--paper)',
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 12.5, letterSpacing: '0.06em',
                    transition: 'border-color 0.2s, background 0.2s, color 0.2s' }}>
                    <i data-lucide="mail" style={{ width: 14, height: 14, color: 'var(--neon)' }}></i>
                    {p.contact.mail}
                  </a>
                </div>
              </article>
              );
            })}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
window.Team2 = Team2;