// Teams overview — men's, women's, juniors
const TeamHero = ({ id, name, tag, count, onClick, active }) => (
  <button onClick={onClick} style={{
    background: active ? 'var(--ink)' : '#fff',
    color: active ? '#fff' : 'var(--ink)',
    border: '1px solid ' + (active ? 'var(--ink)' : 'var(--line-soft)'),
    padding: '32px 28px', textAlign: 'left', cursor: 'pointer',
    transition: 'all 200ms ease', position: 'relative', overflow: 'hidden',
    minHeight: 220,
  }}>
    {active && <div style={{
      position: 'absolute', top: 0, left: 0, height: 4, width: '100%', background: 'var(--red)',
    }} />}
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: active ? 'var(--red)' : 'var(--red)', fontWeight: 700 }}>
      {tag}
    </div>
    <div className="display" style={{ fontSize: 56, lineHeight: 0.9, marginTop: 16, textTransform: 'uppercase' }}>
      {name}
    </div>
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
      marginTop: 24, paddingTop: 16, borderTop: '1px solid ' + (active ? 'rgba(255,255,255,0.15)' : 'var(--line-soft)'),
    }}>
      <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: active ? 'rgba(255,255,255,0.6)' : 'var(--muted)' }}>
        {count}
      </span>
      <span className="display" style={{ fontSize: 22 }}>VIEW SQUAD →</span>
    </div>
  </button>
);

const TeamsSection = ({ team, setTeam }) => {
  return (
    <section style={{ background: 'var(--paper)', padding: '96px 0 64px' }} id="teams">
      <div className="container">
        <SectionHead
          kicker="Our Teams"
          title="Fourteen sides. One badge."
          right={
            <p style={{ maxWidth: 380, margin: 0, color: 'var(--muted)', fontSize: 14, lineHeight: 1.55 }}>
              From U7s on Saturday mornings to the men's first team on Saturday afternoons — the same crest, the same crowd.
            </p>
          }
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          <TeamHero id="mens" name="Men's First" tag="NWCFL Premier" count="22 players · Manager B. Briggs"
            active={team === 'mens'} onClick={() => setTeam('mens')} />
          <TeamHero id="womens" name="Women's First" tag="Lancashire Women's League" count="20 players · Manager S. McCarthy"
            active={team === 'womens'} onClick={() => setTeam('womens')} />
          <TeamHero id="juniors" name="Juniors" tag="U7 → U18 · Boys & Girls" count="240+ players · 12 sides"
            active={team === 'juniors'} onClick={() => setTeam('juniors')} />
        </div>
      </div>
    </section>
  );
};

const JuniorGrid = () => (
  <section style={{ background: 'var(--paper)', padding: '0 0 96px' }}>
    <div className="container">
      <SectionHead kicker="Junior Section" title="Saturdays at the Mill."
        right={<Btn variant="dark" size="md">Register an Age Group</Btn>}
      />
      <div data-grid="juniors" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {JUNIORS.map((j, i) => (
          <div key={j.age} style={{
            background: '#fff', border: '1px solid var(--line-soft)',
            padding: '24px 22px', position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: 0, left: 0, height: 3, width: 32,
              background: i % 3 === 0 ? 'var(--red)' : i % 3 === 1 ? 'var(--ink)' : 'var(--pitch)',
            }} />
            <div className="display" style={{ fontSize: 44, lineHeight: 1 }}>{j.age}</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--muted)', marginTop: 8 }}>
              {j.count} PLAYERS
            </div>
            <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px dashed var(--line-soft)', fontSize: 12.5, lineHeight: 1.6 }}>
              <div><span style={{ color: 'var(--muted)' }}>Coach </span><strong>{j.coach}</strong></div>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', color: 'var(--ink)', marginTop: 4, textTransform: 'uppercase' }}>
                {j.day}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Safeguarding callout */}
      <div data-safeguard style={{
        marginTop: 32, background: '#fff',
        border: '2px solid var(--ink)', padding: '28px 32px',
        display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 28, alignItems: 'center',
      }}>
        <div style={{
          width: 72, height: 72, background: 'var(--ink)', display: 'flex',
          alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.8">
            <path d="M12 2 L20 6 V12 C20 17 16 21 12 22 C8 21 4 17 4 12 V6 Z" />
            <path d="M9 12 L11 14 L15 10" />
          </svg>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700 }}>
            SAFEGUARDING & WELFARE
          </div>
          <div className="display" style={{ fontSize: 30, marginTop: 4 }}>Every child plays in a safe environment.</div>
          <p style={{ fontSize: 13.5, color: 'var(--muted)', margin: '8px 0 0', maxWidth: 720 }}>
            All coaches DBS-checked and FA-accredited. Welfare officer Karen Greaves is reachable any time at <strong style={{ color: 'var(--ink)' }}>welfare@blackpoolwrenroversfc.co.uk</strong> — or speak to her at training.
          </p>
        </div>
        <Btn variant="ghost" size="md">Welfare Policy</Btn>
      </div>
    </div>
  </section>
);

Object.assign(window, { TeamsSection, JuniorGrid });