// About, KeyStats, Career — Pam de Wit

const About = () => {
  const p = window.PLAYER;
  const [ref, inView] = window.useInView();
  const actionPhoto = p.actionPhoto || 'pam-actie.jpg';
  const [imgError, setImgError] = React.useState(false);

  return (
    <section id="about" ref={ref} className="section-light" style={{ background: '#ffffff', 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' }}>

        <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={actionPhoto} alt="Pam de Wit — in actie"
                onError={() => setImgError(true)}
                style={{ width: '100%', aspectRatio: '3/4', objectFit: 'cover', objectPosition: 'center', display: 'block', borderRadius: 4 }} />
            ) : (
              <window.Placeholder label="Actiefoto — pam-actie.jpg" height={420} style={{ borderRadius: 4 }} />
            )}
            <div style={{ position: 'absolute', left: -8, top: '10%', bottom: '10%', width: 4, background: '#d8ff85', borderRadius: 2, boxShadow: '0 0 12px rgba(216,255,133,0.5)' }} />
          </div>
        </div>

        <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateX(24px)', transition: 'opacity 0.7s 0.15s, transform 0.7s 0.15s' }}>
          <window.SectionLabel>Over Pam</window.SectionLabel>
          <window.SectionTitle>De Complete<br/>Middenvelder</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' }}>Kwaliteiten</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: 'Wedstrijden',        value: p.stats.gamesPlayed },
    { label: 'Doelpunten',         value: p.stats.goals },
    { label: 'Assists',            value: p.stats.assists },
    { label: 'Punten Totaal',      value: p.stats.points },
    { label: 'Penalty Corners',    value: p.stats.penaltyCorners },
    { label: 'Green Cards',        value: p.stats.greenCards },
    { label: 'Seizoenen Actief',   value: p.stats.seasonsActive },
    { label: 'Interland Caps',     value: p.stats.nationalCaps },
    { label: 'Goals per 100 Wdstr', value: p.stats.goalsPerGame, 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>Carrièrestatistieken</window.SectionLabel>
          <window.SectionTitle>De Cijfers</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 = ['Seizoen', 'Team', 'Competitie', 'WD', 'D', 'A', 'PTS', 'Notities'];

  return (
    <section id="career" ref={ref} className="section-light" style={{ background: '#ffffff', 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>Speelervaring</window.SectionLabel>
          <window.SectionTitle>Carrière Overzicht</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: '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(42,78,69,0.06)' : i % 2 === 0 ? 'transparent' : 'rgba(42,78,69,0.025)',
                    transition: 'background 0.2s',
                    opacity: inView ? 1 : 0,
                    transform: inView ? 'none' : 'translateY(8px)',
                  }}>
                  <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(216,255,133,0.25)', color: '#2a4e45', border: '1px solid rgba(216,255,133,0.5)', 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>
  );
};

const Banner = () => {
  const [ref, inView] = window.useInView();

  return (
    <section ref={ref} style={{
      position: 'relative',
      height: 'clamp(320px, 50vh, 560px)',
      overflow: 'hidden',
      display: 'flex',
      alignItems: 'center',
    }}>
      {/* Foto */}
      <img src="pam-banner.jpg" alt="Pam de Wit in actie"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />

      {/* Overlay verloop */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, rgba(22,42,35,0.92) 0%, rgba(22,42,35,0.65) 50%, rgba(22,42,35,0.2) 100%)' }} />

      {/* Content */}
      <div style={{
        position: 'relative', zIndex: 1,
        padding: '0 clamp(1.5rem,5vw,5rem)',
        maxWidth: 680,
        opacity: inView ? 1 : 0,
        transform: inView ? 'none' : 'translateY(24px)',
        transition: 'opacity 0.9s 0.1s, transform 0.9s 0.1s',
      }}>
        <p style={{ fontFamily: "'Barlow Condensed',sans-serif", letterSpacing: '0.25em', fontSize: '0.7rem', fontWeight: 700, color: '#d8ff85', textTransform: 'uppercase', marginBottom: '1.25rem' }}>
          Veldhockey · HC Rotterdam · #11
        </p>
        <h2 style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: 'clamp(2.2rem, 5vw, 4rem)', lineHeight: 1.0, color: '#ffffff', letterSpacing: '-0.01em', marginBottom: '1.5rem', textTransform: 'uppercase' }}>
          "Eerste op de training,<br/>laatste van het veld."
        </h2>
        <div style={{ width: 48, height: 3, background: '#d8ff85', borderRadius: 2, marginBottom: '1rem' }} />
        <p style={{ fontFamily: "'Inter',sans-serif", fontSize: '0.85rem', color: 'rgba(255,255,255,0.65)', letterSpacing: '0.02em' }}>
          — Sandra van den Berg, Hoofdtrainer HC Rotterdam
        </p>
      </div>

      {/* Groot rugnummer als watermark */}
      <div style={{ position: 'absolute', right: 'clamp(1rem, 5vw, 4rem)', top: '50%', transform: 'translateY(-50%)', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: 'clamp(8rem, 20vw, 18rem)', color: 'rgba(216,255,133,0.08)', lineHeight: 1, userSelect: 'none', pointerEvents: 'none', letterSpacing: '-0.05em' }}>
        11
      </div>
    </section>
  );
};

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