// Trainers — based on real Knockout Fitness Lake Mary references
const TRAINERS = [
  {
    name: 'MIKE FRIEDMAN',
    role: 'OWNER · HEAD COACH',
    record: 'EST. 2018',
    spec: 'Personal Coaching · Nutrition',
    bio: '"Mike has gone above and beyond making sure I was on the right track with nutrition and classes." Builds personalized roadmaps for every member.',
    img: 'https://images.unsplash.com/photo-1591117207239-788bf8de6c3b?w=800&q=80', // boxing gloves on bag
  },
  {
    name: 'COACH NATE',
    role: 'KICKBOXING COACH',
    record: 'CERT.',
    spec: 'Group Classes · Technique',
    bio: 'High-energy classes, real corrections, and the patience to walk a first-timer through their first jab-cross. Trust the process.',
    img: 'https://images.unsplash.com/photo-1593079831268-3381b0db4a77?w=800&q=80', // heavy bag detail
  },
  {
    name: 'NUTRITION TEAM',
    role: 'ACCOUNTABILITY',
    record: 'INBODY',
    spec: 'Meal Plans · Body Comp',
    bio: 'Your accountability coach maps how your body metabolizes food and adjusts your plan as your composition changes. Optional meal prep delivery.',
    img: 'https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?w=800&q=80', // measuring tape / equipment
  },
  {
    name: 'THE FRONT DESK',
    role: 'COMMUNITY',
    record: '24/7',
    spec: 'Members · Support',
    bio: '"After your first class everyone remembers your name." The team that keeps the floor clean, the music loud, and the door open.',
    img: 'https://images.unsplash.com/photo-1517963879433-6ad2b056d712?w=800&q=80', // hand wraps
  },
];

function Trainers({ accent }) {
  return (
    <section className="ko-section ko-section-light" id="trainers">
      <div className="ko-container">
        <div className="ko-section-head">
          <div className="ko-mono ko-eyebrow">
            <span className="ko-eyebrow-bar" style={{ background: accent }} />
            §05 · YOUR TEAM
          </div>
          <h2 className="ko-h2">
            COACHES WHO <span style={{ color: accent, fontStyle: 'italic' }}>KNOW</span> YOU.
          </h2>
          <p className="ko-section-lead">
            Dedicated, educated, and here for the members. After your first class, everyone remembers your name.
          </p>
        </div>

        <div className="ko-trainers-grid">
          {TRAINERS.map((t, i) => (
            <article key={t.name} className="ko-trainer-card">
              <div className="ko-trainer-img-wrap">
                <img
                  src={t.img}
                  alt={t.name}
                  className="ko-trainer-img"
                  onError={(e) => { e.target.style.opacity = 0; }}
                />
                <div className="ko-trainer-num ko-mono" style={{ color: accent }}>0{i + 1}</div>
                <div className="ko-trainer-record ko-mono">
                  <span style={{ opacity: 0.5 }}>—</span> {t.record}
                </div>
              </div>
              <div className="ko-trainer-info">
                <div className="ko-mono ko-trainer-role" style={{ color: accent }}>{t.role}</div>
                <h3 className="ko-trainer-name">{t.name}</h3>
                <div className="ko-mono ko-trainer-spec">{t.spec}</div>
                <p className="ko-trainer-bio">{t.bio}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Trainers = Trainers;