// teams.jsx — the Clipper fleet registry.
//
// This is the core data primitive of the builder: the 2025-26 fleet of ten
// teams, each with a colour, mono badge (placeholder — the real team crests
// aren't shipped here), country and skipper. Templates pull a team by key and
// get name / shortName / colour / textOn / badge for free, so a podium, a
// standings row, a winners band and a host-port strip all stay consistent.
//
// Edit COLOURS / SKIPPERS freely — they were seeded from the Clipper site +
// the Instagram stills; nothing here is a shipped brand asset.

const TEAMS = [
  { key: 'gosh',     name: 'GOSH',                      short: 'GOSH', full: 'Great Ormond Street Hospital', colour: '#00a9ce', textOn: '#ffffff', country: 'United Kingdom', flag: '🇬🇧', skipper: '', mate: '' },
  { key: 'seattle',  name: 'Power of Seattle Sports',   short: 'Seattle', full: 'Power of Seattle Sports',  colour: '#00843d', textOn: '#ffffff', country: 'USA',     flag: '🇺🇸', skipper: 'Angela Brandsma', mate: 'Amy Smith' },
  { key: 'scotland', name: 'Scotland',                  short: 'Scotland', full: 'Scotland (Brand Scotland · Oban)', colour: '#0065bf', textOn: '#ffffff', country: 'Scotland', flag: '🏴󠁧󠁢󠁳󠁣󠁴󠁿', skipper: 'Heather Thomas', mate: 'Millie Apperley' },
  { key: 'lbs',      name: 'London Business School',    short: 'LBS', full: 'London Business School',        colour: '#14213d', textOn: '#ffffff', country: 'United Kingdom', flag: '🇬🇧', skipper: '', mate: '' },
  { key: 'punta',    name: 'Yacht Club Punta del Este', short: 'Punta del Este', full: 'Yacht Club Punta del Este', colour: '#0093d0', textOn: '#ffffff', country: 'Uruguay', flag: '🇺🇾', skipper: 'David Sautret', mate: "Lorraine O'Hanlon" },
  { key: 'tongyeong',name: 'Tongyeong',                 short: 'Tongyeong', full: 'Tongyeong, Gyeongnam',     colour: '#d81e34', textOn: '#ffffff', country: 'South Korea', flag: '🇰🇷', skipper: 'Lou Boorman', mate: 'Brian Uniacke' },
  { key: 'qingdao',  name: 'Qingdao',                   short: 'Qingdao', full: 'Qingdao',                   colour: '#d7222a', textOn: '#ffffff', country: 'China',   flag: '🇨🇳', skipper: 'Philip Quinn', mate: '' },
  { key: 'unicef',   name: 'UNICEF',                    short: 'UNICEF', full: 'UNICEF — for every child',   colour: '#1cabe2', textOn: '#ffffff', country: 'International', flag: '🇺🇳', skipper: 'Guy Waites', mate: 'Diana Vega' },
  { key: 'warrant',  name: 'Warrant',                   short: 'Warrant', full: 'Warrant',                   colour: '#6a4cff', textOn: '#ffffff', country: 'USA',     flag: '🇺🇸', skipper: '', mate: '' },
  { key: 'washington', name: 'Washington, DC',          short: 'Washington', full: 'Washington, DC · Events DC', colour: '#b31942', textOn: '#ffffff', country: 'USA',  flag: '🇺🇸', skipper: 'Ella Hebron', mate: '' },
];

const TEAM_BY_KEY = Object.fromEntries(TEAMS.map((t) => [t.key, t]));
function getTeam(key) { return TEAM_BY_KEY[key] || TEAMS[0]; }

// Leg → hue, from the brand guidelines' secondary palette.
const LEG_COLOURS = {
  1: '#fcb131', 2: '#8cc63f', 3: '#213f7c', 4: '#91278f',
  5: '#ec008c', 6: '#f58220', 7: '#007f49', 8: '#009eeb',
};
function legColour(n) { return LEG_COLOURS[((Number(n) - 1) % 8) + 1] || '#b1001e'; }

// Initials for the placeholder badge: up to 3 chars from the short name.
function teamInitials(t) {
  if (!t) return '';
  if (t.short && t.short.length <= 4 && t.short === t.short.toUpperCase()) return t.short;
  const words = (t.short || t.name).split(/\s+/).filter(Boolean);
  if (words.length === 1) return words[0].slice(0, 3).toUpperCase();
  return words.map((w) => w[0]).join('').slice(0, 3).toUpperCase();
}

// Real team crests. The official posts show each team's own logo in a white
// rounded chip. Drop crest files in assets/teams/<key>.png and map them here —
// TeamBadge then renders the real logo on white; until then it falls back to a
// colour monogram. (Nothing here is shipped yet, so the map is empty.)
const TEAM_LOGOS = {
  // gosh: 'assets/teams/gosh.png',
  // unicef: 'assets/teams/unicef.png',
  // …add the rest as you receive them.
};

// TeamBadge — the team's crest in a white rounded chip when a logo is mapped;
// otherwise a colour monogram standing in for it. A thin white keyline keeps it
// readable on photos (mirrors the brand's "logo always has a white keyline").
function TeamBadge({ teamKey, size = 56, radius, style }) {
  const t = getTeam(teamKey);
  const r = radius != null ? radius : Math.round(size * 0.22);
  const logo = (window.TEAM_LOGOS && window.TEAM_LOGOS[teamKey]) || t.logo;
  const keyline = '0 0 0 2px rgba(255,255,255,0.92), 0 2px 10px rgba(0,0,0,0.25)';
  if (logo) {
    return (
      <div style={{ width: size, height: size, borderRadius: r, flex: '0 0 auto', background: '#fff',
        boxShadow: keyline, display: 'flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden', ...style }}>
        <img src={logo} alt={t.name} draggable="false"
          style={{ width: '84%', height: '84%', objectFit: 'contain', display: 'block' }} />
      </div>
    );
  }
  return (
    <div style={{
      width: size, height: size, borderRadius: r, flex: '0 0 auto',
      background: t.colour, color: t.textOn,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: keyline,
      fontFamily: 'var(--font-display)', fontWeight: 900, fontStyle: 'italic',
      fontSize: size * 0.34, letterSpacing: '-0.02em', lineHeight: 1,
      textTransform: 'uppercase', overflow: 'hidden',
      ...style,
    }}>{teamInitials(t)}</div>
  );
}

window.TEAMS = TEAMS;
window.TEAM_LOGOS = TEAM_LOGOS;
window.getTeam = getTeam;
window.legColour = legColour;
window.TeamBadge = TeamBadge;
window.teamInitials = teamInitials;