// About, KeyStats, Career sections

const About = () => {
  const p = window.PLAYER;
  const [ref, inView] = window.useInView();
  const photo = window.PLAYER_PHOTO || p.photo;
  const [imgError, setImgError] = React.useState(false);

  return (
    <section id="about" ref={ref} style={{ background: 'var(--surface)', padding: 'clamp(4rem,8vh,7rem) clamp(1.5rem,5vw,5rem)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'clamp(3rem,6vw,6rem)', alignItems: 'center' }}>

        {/* Photo column */}
        <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateX(-24px)', transition: 'opacity 0.7s, transform 0.7s' }}>
          <div style={{ position: 'relative', maxWidth: 400 }}>
            {!imgError ? (
              <img src={photo} alt="Sander Verhoof — profile"
                onError={() => setImgError(true)}
                style={{ width: '100%', aspectRatio: '3/4', objectFit: 'cover', objectPosition: 'top', display: 'block', borderRadius: 4 }} />
            ) : (
              <window.Placeholder label="Profile photo — sander.jpg" height={420} style={{ borderRadius: 4 }} />
            )}
            {/* Red accent bar */}
            <div style={{ position: 'absolute', left: -8, top: '10%', bottom: '10%', width: 3, background: 'var(--red)', borderRadius: 2 }} />
          </div>
        </div>

        {/* Text column */}
        <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateX(24px)', transition: 'opacity 0.7s 0.15s, transform 0.7s 0.15s' }}>
          <window.SectionLabel>About</window.SectionLabel>
          <window.SectionTitle>The Complete<br/>Forward</window.SectionTitle>
          <window.RedLine />

          <p style={{ fontFamily: "'Inter',sans-serif", color: 'var(--muted)', fontSize: '0.95rem', lineHeight: 1.8, marginBottom: '1.25rem' }}>
            {p.bio}
          </p>
          <p style={{ fontFamily: "'Inter',sans-serif", color: 'var(--muted)', fontSize: '0.95rem', lineHeight: 1.8, marginBottom: '2rem' }}>
            {p.playstyle}
          </p>

          <p style={{ fontFamily: "'Barlow Condensed',sans-serif", letterSpacing: '0.2em', fontSize: '0.65rem', fontWeight: 700, color: 'var(--red)', textTransform: 'uppercase', marginBottom: '1rem' }}>Strengths</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
            {p.strengths.map(s => (
              <span key={s} style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 600, fontSize: '0.78rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text)', background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 3, padding: '5px 12px' }}>
                {s}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const StatCard = ({ label, value, suffix = '', delay = 0, inView }) => {
  const num = window.useCounter(typeof value === 'number' ? value : 0, inView);
  const display = typeof value === 'number' ? num : value;
  return (
    <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, padding: 'clamp(1.25rem,2.5vw,2rem)', opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(20px)', transition: `opacity 0.6s ${delay}s, transform 0.6s ${delay}s`, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: 'var(--red)', opacity: 0.7 }} />
      <p style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: 'clamp(2.2rem,4vw,3.2rem)', lineHeight: 1, color: 'var(--text)', marginBottom: '0.35rem' }}>
        {display}{suffix}
      </p>
      <p style={{ fontFamily: "'Barlow Condensed',sans-serif", letterSpacing: '0.2em', fontSize: '0.65rem', fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase' }}>{label}</p>
    </div>
  );
};

const KeyStats = () => {
  const p = window.PLAYER;
  const [ref, inView] = window.useInView();

  const cards = [
    { label: 'Games Played',    value: p.stats.gamesPlayed },
    { label: 'Goals',           value: p.stats.goals },
    { label: 'Assists',         value: p.stats.assists },
    { label: 'Total Points',    value: p.stats.points },
    { label: 'Penalty Mins',    value: p.stats.penaltyMinutes },
    { label: '+/- Rating',      value: p.stats.plusMinus, suffix: '' },
    { label: 'PP Goals',        value: p.stats.ppGoals },
    { label: 'Seasons Active',  value: p.stats.seasonsActive },
    { label: 'Faceoff Win %',   value: p.stats.faceoffPct, suffix: '%' },
  ];

  return (
    <section id="stats" ref={ref} style={{ background: 'var(--bg)', padding: 'clamp(4rem,8vh,7rem) clamp(1.5rem,5vw,5rem)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: '3rem', opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(16px)', transition: 'opacity 0.6s, transform 0.6s' }}>
          <window.SectionLabel>Career Statistics</window.SectionLabel>
          <window.SectionTitle>By The Numbers</window.SectionTitle>
          <window.RedLine />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: '1rem' }}>
          {cards.map((c, i) => (
            <StatCard key={c.label} {...c} delay={i * 0.06} inView={inView} />
          ))}
        </div>
      </div>
    </section>
  );
};

const Career = () => {
  const p = window.PLAYER;
  const [ref, inView] = window.useInView();
  const [hovered, setHovered] = React.useState(null);

  const cols = ['Season', 'Team', 'League', 'GP', 'G', 'A', 'PTS', 'Notes'];

  return (
    <section id="career" ref={ref} style={{ background: 'var(--surface)', padding: 'clamp(4rem,8vh,7rem) clamp(1.5rem,5vw,5rem)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: '3rem', opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(16px)', transition: 'opacity 0.6s, transform 0.6s' }}>
          <window.SectionLabel>Playing Experience</window.SectionLabel>
          <window.SectionTitle>Career History</window.SectionTitle>
          <window.RedLine />
        </div>

        <div style={{ opacity: inView ? 1 : 0, transition: 'opacity 0.7s 0.2s', overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: "'Inter',sans-serif", fontSize: '0.875rem' }}>
            <thead>
              <tr style={{ borderBottom: '2px solid var(--red)' }}>
                {cols.map(c => (
                  <th key={c} style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '0.65rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)', padding: '0.75rem 1rem', textAlign: c === 'Notes' ? 'left' : 'left', whiteSpace: 'nowrap' }}>{c}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {p.career.map((row, i) => (
                <tr key={i}
                  onMouseEnter={() => setHovered(i)}
                  onMouseLeave={() => setHovered(null)}
                  style={{
                    borderBottom: '1px solid var(--border)',
                    background: hovered === i ? 'rgba(180,20,20,0.06)' : i % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.015)',
                    transition: 'background 0.2s',
                    opacity: inView ? 1 : 0,
                    transform: inView ? 'none' : 'translateY(8px)',
                    animationDelay: `${i * 0.05}s`,
                  }}>
                  <td style={{ padding: '0.9rem 1rem', color: 'var(--muted)', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 600, letterSpacing: '0.05em', whiteSpace: 'nowrap' }}>{row.season}</td>
                  <td style={{ padding: '0.9rem 1rem', color: 'var(--text)', fontWeight: 600, whiteSpace: 'nowrap' }}>{row.team}</td>
                  <td style={{ padding: '0.9rem 1rem', color: 'var(--muted)', whiteSpace: 'nowrap' }}>{row.league}</td>
                  <td style={{ padding: '0.9rem 1rem', color: 'var(--text)', textAlign: 'center', fontWeight: 600 }}>{row.gp}</td>
                  <td style={{ padding: '0.9rem 1rem', color: 'var(--text)', textAlign: 'center', fontWeight: 700 }}>{row.g}</td>
                  <td style={{ padding: '0.9rem 1rem', color: 'var(--text)', textAlign: 'center', fontWeight: 700 }}>{row.a}</td>
                  <td style={{ padding: '0.9rem 1rem', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: '1rem', color: hovered === i ? 'var(--red)' : 'var(--text)', textAlign: 'center', transition: 'color 0.2s' }}>{row.pts}</td>
                  <td style={{ padding: '0.9rem 1rem', color: 'var(--muted)', fontSize: '0.8rem', whiteSpace: 'nowrap' }}>
                    {row.notes && <span style={{ background: 'rgba(180,20,20,0.12)', color: 'var(--red)', border: '1px solid rgba(180,20,20,0.2)', borderRadius: 3, padding: '2px 8px', fontSize: '0.7rem', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 600, letterSpacing: '0.05em' }}>{row.notes}</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { About, KeyStats, Career });