// Achievements, Testimonials, Contact sections

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

  return (
    <section id="achievements" 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>Accolades</window.SectionLabel>
          <window.SectionTitle>Achievements &amp; Awards</window.SectionTitle>
          <window.RedLine />
        </div>

        <div style={{ position: 'relative' }}>
          {/* Vertical timeline line */}
          <div style={{ position: 'absolute', left: 'clamp(48px, 6vw, 72px)', top: 0, bottom: 0, width: 1, background: 'var(--border)', opacity: inView ? 1 : 0, transition: 'opacity 0.6s 0.3s' }} />

          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
            {p.achievements.map((a, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 'clamp(1rem,4vw,3rem)',
                opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateX(-16px)',
                transition: `opacity 0.6s ${i * 0.1 + 0.2}s, transform 0.6s ${i * 0.1 + 0.2}s`,
                padding: '1.5rem 0',
                borderBottom: i < p.achievements.length - 1 ? '1px solid transparent' : 'none',
              }}>
                {/* Year badge */}
                <div style={{ flexShrink: 0, width: 'clamp(64px, 8vw, 96px)', textAlign: 'center', position: 'relative' }}>
                  <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 48, height: 48, background: 'var(--bg)', border: '2px solid var(--red)', borderRadius: '50%', position: 'relative', zIndex: 1 }}>
                    <span style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: '0.72rem', color: 'var(--red)', letterSpacing: '0.03em' }}>{a.year}</span>
                  </div>
                </div>

                {/* Content */}
                <div style={{ flex: 1, paddingTop: '0.5rem' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.4rem', flexWrap: 'wrap' }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--red)">
                      <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/>
                    </svg>
                    <h3 style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 800, fontSize: '1.1rem', color: 'var(--text)', margin: 0, letterSpacing: '0.02em' }}>{a.title}</h3>
                  </div>
                  <p style={{ fontFamily: "'Inter',sans-serif", fontSize: '0.85rem', color: 'var(--muted)', lineHeight: 1.6, margin: 0 }}>{a.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

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

  return (
    <section id="testimonials" 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>References</window.SectionLabel>
          <window.SectionTitle>What Coaches Say</window.SectionTitle>
          <window.RedLine />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '1.5rem' }}>
          {p.testimonials.map((t, i) => (
            <div key={i} style={{
              background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4,
              padding: 'clamp(1.5rem,3vw,2.5rem)',
              opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(20px)',
              transition: `opacity 0.6s ${i * 0.15}s, transform 0.6s ${i * 0.15}s`,
              position: 'relative', overflow: 'hidden',
            }}>
              {/* Large quote mark */}
              <div style={{ position: 'absolute', top: '1rem', right: '1.5rem', fontFamily: 'Georgia, serif', fontSize: '6rem', lineHeight: 1, color: 'var(--red)', opacity: 0.12, userSelect: 'none' }}>"</div>

              {/* Top red bar */}
              <div style={{ width: 32, height: 3, background: 'var(--red)', borderRadius: 2, marginBottom: '1.5rem' }} />

              <p style={{ fontFamily: "'Inter',sans-serif", fontSize: '0.9rem', color: 'var(--text)', lineHeight: 1.8, fontStyle: 'italic', marginBottom: '1.75rem', position: 'relative', zIndex: 1 }}>
                "{t.quote}"
              </p>

              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                <div style={{ width: 40, height: 40, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" strokeWidth="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
                </div>
                <div>
                  <p style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '0.95rem', color: 'var(--text)', marginBottom: 2 }}>{t.name}</p>
                  <p style={{ fontFamily: "'Inter',sans-serif", fontSize: '0.75rem', color: 'var(--muted)' }}>{t.role}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

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

  const links = [
    { icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="2,4 12,13 22,4"/></svg>, label: 'Email', value: p.email, href: `mailto:${p.email}` },
    { icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13 19.79 19.79 0 0 1 1.61 4.27 2 2 0 0 1 3.58 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.08 6.08l1.07-.89a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 17z"/></svg>, label: 'Phone', value: p.phone, href: `tel:${p.phone}` },
    { icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>, label: 'LinkedIn', value: p.linkedin, href: `https://${p.linkedin}` },
    { icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/></svg>, label: 'Instagram', value: p.instagram, href: `https://instagram.com/${p.instagram.replace('@','')}` },
    { icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>, label: 'EliteProspects', value: 'View Profile', href: `https://${p.eliteprospects}` },
  ];

  return (
    <section id="contact" 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={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'clamp(3rem,6vw,6rem)', alignItems: 'start' }}>

          {/* Left — CTA text */}
          <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(20px)', transition: 'opacity 0.7s, transform 0.7s' }}>
            <window.SectionLabel>Availability</window.SectionLabel>
            <window.SectionTitle>Ready to Play<br/>at the Next Level</window.SectionTitle>
            <window.RedLine />
            <p style={{ fontFamily: "'Inter',sans-serif", color: 'var(--muted)', fontSize: '0.95rem', lineHeight: 1.8, marginBottom: '2rem' }}>
              {p.availability}
            </p>
            <a href={`mailto:${p.email}`}
              style={{ display: 'inline-flex', alignItems: 'center', gap: '0.6rem', background: 'var(--red)', color: '#fff', textDecoration: 'none', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: '0.85rem', letterSpacing: '0.15em', textTransform: 'uppercase', padding: '14px 32px', borderRadius: 3, transition: 'background 0.2s' }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--red-bright)'}
              onMouseLeave={e => e.currentTarget.style.background = 'var(--red)'}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="2,4 12,13 22,4"/></svg>
              Get in Touch
            </a>
          </div>

          {/* Right — contact cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
            {links.map((l, i) => (
              <a key={i} href={l.href} target="_blank" rel="noopener noreferrer"
                style={{ display: 'flex', alignItems: 'center', gap: '1rem', background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, padding: '1rem 1.25rem', textDecoration: 'none', transition: 'border-color 0.2s, background 0.2s',
                  opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateX(20px)',
                  transitionProperty: 'border-color, background, opacity, transform',
                  transitionDuration: `0.2s, 0.2s, 0.6s, 0.6s`,
                  transitionDelay: `0s, 0s, ${i * 0.1}s, ${i * 0.1}s`,
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--red)'; e.currentTarget.style.background = 'rgba(180,20,20,0.06)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.background = 'var(--card)'; }}>
                <div style={{ color: 'var(--red)', flexShrink: 0 }}>{l.icon}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <p style={{ fontFamily: "'Barlow Condensed',sans-serif", letterSpacing: '0.15em', fontSize: '0.6rem', fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 2 }}>{l.label}</p>
                  <p style={{ fontFamily: "'Inter',sans-serif", fontSize: '0.85rem', color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l.value}</p>
                </div>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" strokeWidth="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12,5 19,12 12,19"/></svg>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  const p = window.PLAYER;
  return (
    <footer style={{ background: 'var(--bg)', borderTop: '1px solid var(--border)', padding: '2rem clamp(1.5rem,5vw,5rem)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '1rem' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 28, height: 28, background: 'var(--red)', borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <span style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: '0.75rem', color: '#fff' }}>SV</span>
          </div>
          <span style={{ fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 600, fontSize: '0.8rem', color: 'var(--muted)', letterSpacing: '0.1em' }}>SANDER VERHOOF · ICE HOCKEY</span>
        </div>
        <p style={{ fontFamily: "'Inter',sans-serif", fontSize: '0.75rem', color: 'var(--muted)' }}>
          &copy; {new Date().getFullYear()} topsportcv.com · All rights reserved
        </p>
      </div>
    </footer>
  );
};

Object.assign(window, { Achievements, Testimonials, Contact, Footer });