// Club structure / staff tree.
// Reads CLUB_STAFF (senior staff) + JUNIOR_TEAMS (junior/youth managers) from data.jsx.

// A single staff member line inside a team card.
const StaffLine = ({ name, role, lead }) => (
  <div style={{
    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
    gap: 10, padding: '7px 0', borderBottom: '1px dashed var(--line-soft)',
  }}>
    <span style={{ fontSize: 14, fontWeight: lead ? 700 : 500, color: 'var(--ink)' }}>{name}</span>
    <span className="mono" style={{
      fontSize: 9, letterSpacing: '0.12em', color: lead ? 'var(--red)' : 'var(--muted)',
      textTransform: 'uppercase', fontWeight: 700, whiteSpace: 'nowrap',
    }}>{role}</span>
  </div>
);

// A card for a senior team (First Team / Reserves / U18) listing all its staff.
const SeniorCard = ({ node }) => (
  <div style={{
    background: '#fff', border: '1px solid var(--line-soft)', padding: '24px 24px', position: 'relative',
  }}>
    <div style={{ position: 'absolute', top: 0, left: 0, height: 4, width: '100%', background: 'var(--red)' }} />
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--red)', fontWeight: 700 }}>
      {node.tag.toUpperCase()}
    </div>
    <div className="display" style={{ fontSize: 38, lineHeight: 1, margin: '6px 0 16px', textTransform: 'uppercase' }}>
      {node.team}
    </div>
    <div>
      {node.staff.map((s, i) => (
        <StaffLine key={i} name={s.name} role={s.role} lead={/manager/i.test(s.role) && !/assistant/i.test(s.role)} />
      ))}
    </div>
  </div>
);

// A compact card for a junior/youth team: team name + manager.
const TeamManagerCard = ({ name, manager }) => {
  const tbc = manager === 'TBC';
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--line-soft)', padding: '18px 20px', position: 'relative',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, height: 3, width: 28,
        background: tbc ? 'var(--line-soft)' : 'var(--red)',
      }} />
      <div className="display" style={{ fontSize: 30, lineHeight: 1, textTransform: 'uppercase' }}>{name}</div>
      <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px dashed var(--line-soft)' }}>
        <div className="mono" style={{ fontSize: 9, letterSpacing: '0.16em', color: 'var(--muted)', fontWeight: 700 }}>
          {tbc ? 'MANAGER' : 'MANAGER'}
        </div>
        <div style={{ fontSize: 15, fontWeight: 700, color: tbc ? 'var(--muted)' : 'var(--ink)', marginTop: 3 }}>
          {tbc ? 'To be confirmed' : manager}
        </div>
      </div>
    </div>
  );
};

// Connector tick under the crest, purely decorative.
const TreeStem = () => (
  <div style={{ display: 'flex', justifyContent: 'center' }}>
    <div style={{ width: 2, height: 40, background: 'var(--line-soft)' }} />
  </div>
);

const PhaseHead = ({ kicker, title, note }) => (
  <div style={{ marginTop: 56, marginBottom: 24 }}>
    <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700, marginBottom: 8 }}>
      {kicker}
    </div>
    <h2 className="display" style={{
      fontSize: 'clamp(32px, 5vw, 56px)', margin: 0, textTransform: 'uppercase',
      borderBottom: '1px solid var(--ink)', paddingBottom: 12,
    }}>{title}</h2>
    {note && <p style={{ fontSize: 13.5, color: 'var(--muted)', margin: '12px 0 0', maxWidth: 640, lineHeight: 1.6 }}>{note}</p>}
  </div>
);

const ClubStructure = () => {
  const youth = JUNIOR_TEAMS.filter(t => t.phase === 'Youth Phase');
  const junior = JUNIOR_TEAMS.filter(t => t.phase === 'Junior Phase');

  return (
    <section style={{ background: 'var(--paper)', padding: '56px 0 96px' }} id="structure">
      <div className="container">
        {/* Crest node at the top of the tree */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <div style={{
            background: 'var(--ink)', color: '#fff', padding: '22px 36px',
            display: 'inline-flex', alignItems: 'center', gap: 16,
          }}>
            <img src="assets/logo.jpg" alt="" style={{ width: 52, height: 52, border: '2px solid #fff', objectFit: 'cover' }} />
            <div style={{ textAlign: 'left' }}>
              <div className="display" style={{ fontSize: 30, lineHeight: 0.95 }}>BLACKPOOL WREN ROVERS FC</div>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.24em', color: 'var(--red)', marginTop: 5 }}>
                CLUB STRUCTURE · 2026/27
              </div>
            </div>
          </div>
        </div>

        <TreeStem />

        {/* Senior teams */}
        <PhaseHead
          kicker="SENIOR FOOTBALL"
          title="First Team, Reserves & U18s"
          note="The senior pathway — from the Under 18s up through the Reserves to the First Team."
        />
        <div data-structure-senior style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {CLUB_STAFF.senior.map((node, i) => <SeniorCard key={i} node={node} />)}
        </div>

        {/* Youth phase */}
        <PhaseHead
          kicker="YOUTH PHASE"
          title="U12 — U14"
          note="Eleven-a-side football as our young players step up through the age groups."
        />
        <div data-structure-youth style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {youth.map((t, i) => <TeamManagerCard key={i} name={t.name} manager={t.manager} />)}
        </div>

        {/* Junior phase */}
        <PhaseHead
          kicker="JUNIOR PHASE"
          title="U8 — U11"
          note="Where it all starts — Saturday-morning football for our youngest Rovers, boys and girls."
        />
        <div data-structure-junior style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {junior.map((t, i) => <TeamManagerCard key={i} name={t.name} manager={t.manager} />)}
        </div>

        {/* Volunteer CTA */}
        <div style={{
          marginTop: 56, background: 'var(--ink)', color: '#fff', padding: '40px 40px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap',
        }}>
          <div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700 }}>
              EVERY TEAM IS RUN BY VOLUNTEERS
            </div>
            <div className="display" style={{ fontSize: 36, marginTop: 6, lineHeight: 0.98 }}>
              Fancy getting involved?
            </div>
          </div>
          <Btn variant="primary" size="lg" as="a" href="mailto:oliverperkins@blackpoolwrenrovers.co.uk">Become a Coach or Volunteer</Btn>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ClubStructure });