// Team page — editorial roster for Compass Marketing Research
// Consumes globals from shared.jsx (C, Navbar, Footer, Eyebrow, H2, CompassMark).

const { useState: useStateT } = React;

// ── Bios (verbatim from CMR Bios.txt) ───────────────────────────
const TEAM = [
{
  name: 'Scott Taylor',
  role: 'President',
  initials: 'ST',
  photo: 'team/scott-taylor.jpeg',
  bio: 'The value of a compass is determined by the integrity and accuracy of its internal working parts. The team Scott leads consists of researchers, managers and recruiters that have the experience, skills and ability to deliver our clients a true course of service and direction. Scott\u2019s previous experience of production and logistics with Kraft Foods uniquely blended with nearly 20 years in the market research industry gives him insight to our clients\u2019 real-world challenges and solutions.'
},
{
  name: 'Tonya Robinson',
  role: 'Vice President',
  initials: 'TR',
  photo: 'team/tonya-robinson.jpeg',
  bio: 'Tonya possesses an exceptionally well-suited background to leverage her role as Vice President at CMR. Under her purview, every qualitative and quantitative project is managed with excellence from beginning to end, and clients consistently receive extraordinary customer service. Tonya\u2019s superior expertise spans both operations and team leadership, honed as she previously presided in management positions for two predominant data collection firms, and as she owned and operated her own for 14 years. This solid background along with her innate sense for detail bring tangible value to every project conducted at CMR. Tonya is involved in every project to ensure that the overall experience exceeds expectations.'
},
{
  name: 'Shawn Heyward',
  role: 'Research Services Manager',
  initials: 'SH',
  photo: 'team/shawn-heyward.jpeg',
  bio: 'Shawn\u2019s research background spans call center management, data processing, client services and recruiting management. She manages the day-to-day recruiting activities including staff training and scheduling, and project briefing. Shawn\u2019s focus is on quality recruiting with the highest level of integrity and efficiency. Your project will be under Shawn\u2019s careful recruiting and quota management to ensure a great show rate and highly targeted participants.'
},
{
  name: 'Phyllis Reed',
  role: 'Admin / Accounting Manager',
  initials: 'PR',
  photo: 'team/phyllis-reed.jpeg',
  bio: 'With over twenty years of experience in accounting, payroll services, office administration and human resources, Phyllis has the ability to play many roles with various responsibilities. These experiences and skills provide our Compass team with behind-the-scenes details and tasks which ultimately lead to successful execution of each project.'
},
{
  name: 'Jermell Weaver',
  role: 'Test Kitchen Manager',
  initials: 'JW',
  photo: 'team/jermell-weaver.jpeg',
  bio: 'Highly experienced in restaurant and commercial kitchen operations, Jermell oversees the culinary team and overall kitchen operations at the Culinary Research Center. ServSafe certified, Jermell brings quality assurance with attention to timing, prep details and overall kitchen throughput. He assures all test products are served on spec.'
},
{
  name: 'Toski Adams',
  role: 'Project Manager',
  initials: 'TA',
  photo: 'team/toski-adams.jpeg',
  bio: 'In her role as Project Manager, Toski manages overall project logistics, setup, and quota management — ensuring the quality and accuracy of data collection. Her attention to detail and excellent communication skills ensure clients are always up-to-date on their projects. During project execution, she leads onsite logistics.'
},
{
  name: 'Patrick Graziosi',
  role: 'Associate Project Manager',
  initials: 'PG',
  photo: 'team/patrick-graziosi.jpeg',
  bio: 'Patrick joined the team in 2020, bringing with him twenty years of experience planning meetings and events. Having worked with two Super Bowls, The Masters Tournament, SEC Championship Game and numerous Boards of Directors Meetings, his attention to detail and willingness to do whatever it takes to make for a successful project is top notch. His smile and friendly nature make the guests feel right at home.'
}];


// Tone palette for portrait placeholders — cycles through to add visual rhythm.
const TONES = {
  navy: { bg: '#E6EEF3', silh: '#B6C8D2', accent: C.navy },
  terracotta: { bg: '#F5E4DC', silh: '#DCB5A4', accent: C.terracotta },
  amber: { bg: '#F5EAD0', silh: '#D9C68C', accent: '#A87D2E' },
  sage: { bg: '#E5ECDF', silh: '#B6C6AE', accent: C.sageDeep }
};
const TONE_ORDER = ['navy', 'terracotta', 'sage', 'amber', 'terracotta', 'navy', 'sage'];

// ── Portrait (real photo OR styled placeholder) ─────────────────
function Portrait({ person, tone, mode, shape }) {
  const t = TONES[tone] || TONES.navy;
  const radius = shape === 'arched' ? '180px 180px 14px 14px' :
  shape === 'square' ? 6 :
  14;

  // Real photo — preserves the consistent foliage backdrop nicely.
  if (person.photo) {
    return (
      <div style={{
        aspectRatio: '4 / 5',
        width: '100%',
        background: t.bg,
        borderRadius: radius,
        overflow: 'hidden',
        position: 'relative',
        border: `1px solid ${C.rule}`,
        boxShadow: '0 18px 36px rgba(1,46,66,0.12)'
      }}>
        <img
          src={person.photo}
          alt={`Portrait of ${person.name}`}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        
      </div>);

  }

  // Placeholder fallback (three Tweaks-selectable modes).
  return (
    <div style={{
      aspectRatio: '4 / 5',
      width: '100%',
      background: t.bg,
      borderRadius: radius,
      overflow: 'hidden',
      position: 'relative',
      border: `1px solid ${C.rule}`,
      boxShadow: '0 18px 36px rgba(1,46,66,0.10)'
    }}>
      {/* corner tag */}
      <div style={{
        position: 'absolute', top: 14, left: 16,
        fontSize: 10, fontWeight: 700, letterSpacing: '0.16em',
        color: t.accent, opacity: 0.55,
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace'
      }}>{person.initials}</div>

      {/* portrait artwork */}
      {mode === 'monogram' &&
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'DM Serif Display, Georgia, serif',
        fontSize: 'clamp(72px, 9vw, 120px)',
        color: t.accent, opacity: 0.55,
        letterSpacing: '-0.02em'
      }}>{person.initials}</div>
      }

      {mode === 'silhouette' &&
      <svg viewBox="0 0 120 150" preserveAspectRatio="xMidYMax meet" style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        width: '100%', height: '88%'
      }}>
          <defs>
            <linearGradient id={`silg-${person.initials}`} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={t.silh} stopOpacity="0.95" />
              <stop offset="100%" stopColor={t.silh} stopOpacity="0.7" />
            </linearGradient>
          </defs>
          {/* head */}
          <ellipse cx="60" cy="48" rx="22" ry="26" fill={`url(#silg-${person.initials})`} />
          {/* neck + shoulders */}
          <path d="M 50 70 Q 48 78 46 84 Q 18 92 14 150 L 106 150 Q 102 92 74 84 Q 72 78 70 70 Z"
        fill={`url(#silg-${person.initials})`} />
        </svg>
      }

      {mode === 'outline' &&
      <svg viewBox="0 0 120 150" preserveAspectRatio="xMidYMax meet" style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        width: '100%', height: '88%'
      }}>
          <g fill="none" stroke={t.silh} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <ellipse cx="60" cy="48" rx="22" ry="26" />
            <path d="M 50 70 Q 48 78 46 84 Q 18 92 14 150" />
            <path d="M 70 70 Q 72 78 74 84 Q 102 92 106 150" />
          </g>
        </svg>
      }

      {/* footer caption */}
      <div style={{
        position: 'absolute', bottom: 12, right: 14,
        fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: t.accent, opacity: 0.45, fontWeight: 700,
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace'
      }}>photo soon</div>
    </div>);

}

// ── Hero ────────────────────────────────────────────────────────
function TeamHero() {
  return (
    <section style={{ background: C.cream, paddingTop: 96, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -160, right: -200, opacity: 0.05, pointerEvents: 'none' }}>
        <CompassMark size={580} color={C.navy} />
      </div>
      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', padding: '110px 40px 64px' }}>
        <Eyebrow>Meet the Team</Eyebrow>
        <h1 style={{
          fontFamily: 'DM Serif Display, Georgia, serif',
          fontSize: 'clamp(40px, 5.4vw, 76px)', fontWeight: 400,
          color: C.ink, lineHeight: 1, letterSpacing: '-0.018em',
          margin: '20px 0 22px', textWrap: 'balance', maxWidth: 1000
        }}>
          The people behind <em style={{ color: C.terracotta, fontStyle: 'italic' }}>every study</em>.
        </h1>
        <p style={{ fontSize: 17, color: C.textSoft, lineHeight: 1.55, maxWidth: 680 }}>A compass is only as good as its internal working parts. Ours are the administrators, hospitality team, recruiters, and culinary professionals who keep every project on course — from the first kickoff call through the last debrief.

        </p>
      </div>
    </section>);

}

// ── Roster ──────────────────────────────────────────────────────
function TeamRoster({ portraitMode, portraitShape, accentMode }) {
  return (
    <section style={{ background: C.paper, padding: '24px 40px 80px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
          {TEAM.map((p, i) => {
            const tone = accentMode === 'rotate' ? TONE_ORDER[i % TONE_ORDER.length] :
            accentMode === 'navy' ? 'navy' :
            accentMode === 'terracotta' ? 'terracotta' :
            'navy';
            return (
              <TeamRow
                key={p.name}
                person={p}
                index={i}
                tone={tone}
                portraitMode={portraitMode}
                portraitShape={portraitShape} />);


          })}
        </div>
      </div>
    </section>);

}

function TeamRow({ person, index, tone, portraitMode, portraitShape }) {
  const reversed = index % 2 === 1;
  const t = TONES[tone];
  return (
    <article style={{
      display: 'grid',
      gridTemplateColumns: reversed ? '620px 220px' : '220px 620px',
      justifyContent: reversed ? 'end' : 'start',
      gap: 48,
      alignItems: 'center'
    }}>
      {/* Portrait column — explicitly placed so it always sits in the 220px track */}
      <div style={{ gridColumn: reversed ? 2 : 1, gridRow: 1, position: 'relative' }}>
        {/* numbered marker — editorial touch */}
        <div style={{
          position: 'absolute',
          top: -14,
          [reversed ? 'right' : 'left']: -6,
          fontFamily: 'DM Serif Display, Georgia, serif',
          fontSize: 44, fontStyle: 'italic',
          color: t.accent, opacity: 0.18, lineHeight: 1,
          pointerEvents: 'none', zIndex: 0
        }}>
          {String(index + 1).padStart(2, '0')}
        </div>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Portrait person={person} tone={tone} mode={portraitMode} shape={portraitShape} />
        </div>
      </div>

      {/* Bio column */}
      <div style={{ gridColumn: reversed ? 1 : 2, gridRow: 1 }}>
        <div style={{
          fontSize: 10, fontWeight: 700, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: t.accent, marginBottom: 10,
          display: 'flex', alignItems: 'center', gap: 12
        }}>
          <span style={{ display: 'inline-block', width: 20, height: 1.5, background: t.accent }} />
          {person.role}
        </div>
        <h2 style={{
          fontFamily: 'DM Serif Display, Georgia, serif',
          fontSize: 'clamp(24px, 2.4vw, 32px)', fontWeight: 400,
          color: C.navy, lineHeight: 1.05, letterSpacing: '-0.012em',
          marginBottom: 14, textWrap: 'balance'
        }}>
          {person.name}
        </h2>
        <p style={{
          fontSize: 14.5, color: C.text, lineHeight: 1.6,
          maxWidth: 620, textWrap: 'pretty'
        }}>
          {person.bio}
        </p>
      </div>
    </article>);

}

// ── Pull-quote divider (compass metaphor) ───────────────────────
// Sits between hero and roster — anchors the page's POV.
function TeamPullQuote() {
  return (
    <section style={{ background: C.cream, padding: '0 40px 64px' }}>
      <div style={{
        maxWidth: 980, margin: '0 auto',
        borderTop: `1px solid ${C.rule}`,
        paddingTop: 36,
        display: 'grid', gridTemplateColumns: '72px 1fr', gap: 28, alignItems: 'start'
      }}>
        <div style={{ paddingTop: 4 }}>
          <CompassMark size={52} color={C.terracotta} />
        </div>
        <div>
          <div style={{
            fontSize: 10, fontWeight: 700, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: C.terracotta, marginBottom: 10
          }}>True North</div>
          <p style={{
            fontFamily: 'DM Serif Display, Georgia, serif',
            fontSize: 'clamp(20px, 2vw, 26px)',
            color: C.ink, lineHeight: 1.32, fontWeight: 400,
            letterSpacing: '-0.005em', textWrap: 'balance'
          }}>
            The team you’ll meet on these pages is the reason clients trust us with their next study — and the next, and the next after that.
          </p>
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  TEAM, Portrait, TeamHero, TeamPullQuote, TeamRoster
});