// Day panel - renders a single day's content
function DayPanel({ day }) {
  return (
    <div className="day-panel">
      {/* Day header strip */}
      <div className="day-header">
        <div className="day-meta">
          <div className="eyebrow">{day.date}</div>
          <h2 className="day-title">{day.label}</h2>
        </div>
        <div className="day-stats">
          <div className="day-stat">
            <div className="day-stat-num">{day.holes}</div>
            <div className="day-stat-lbl">HOLES</div>
          </div>
          <div className="day-stat-divider" />
          <div className="day-stat">
            <div className="day-stat-num">{day.points}</div>
            <div className="day-stat-lbl">POINTS</div>
          </div>
          {day.decider && (
            <>
              <div className="day-stat-divider" />
              <div className="day-stat decider">
                <div className="day-stat-num">2×</div>
                <div className="day-stat-lbl">WEIGHT</div>
              </div>
            </>
          )}
        </div>
      </div>

      {day.intro && <p className="day-intro">{day.intro}</p>}

      {/* Course card */}
      <div className="course-card">
        <div className="course-art">
          {day.course.photo ? (
            <div className="course-photo" style={{ backgroundImage: `url("${day.course.photo}")`, backgroundPosition: day.course.photoPosition || 'center' }}>
              <div className="course-photo-tag mono">{day.course.name.toUpperCase()}</div>
            </div>
          ) : (
            <CourseArt palette={day.course.art} label={day.course.name.toUpperCase()} />
          )}
        </div>
        <div className="course-body">
          <div className="eyebrow gold">The Course</div>
          <h3 className="course-name">{day.course.name}</h3>
          <div className="course-tee">
            <span className="mono">TEE</span> <strong>{day.course.tee}</strong>
            <span className="dot" />
            <a href={`https://${day.course.url}`} target="_blank" rel="noreferrer" className="course-link">{day.course.url}</a>
          </div>
          <p className="course-blurb">{day.course.blurb}</p>
        </div>
      </div>

      <p className="day-note">{day.note}</p>

      {/* Standard matchups table */}
      {day.matchups && (
        <div className="matchups">
          <div className="matchups-head">
            <div>Matchups</div>
            <div className="matchups-pts">{day.points / 4} pts / match</div>
          </div>
          {day.matchups.map((m, i) => (
            <Matchup key={i} m={m} idx={i + 1} />
          ))}
        </div>
      )}

      {/* Swap til you drop */}
      {day.swap && (
        <SwapPanel day={day} />
      )}
    </div>
  );
}

function Matchup({ m, idx }) {
  return (
    <div className="matchup">
      <div className="matchup-row">
        <div className="matchup-num">M{idx}</div>
        <div className="matchup-side usa">
          <div className="side-flag" />
          <div className="side-name">{m.usa}</div>
        </div>
        <div className="matchup-vs">
          <div className="vs-line" />
          <div className="vs-text">vs</div>
          <div className="vs-line" />
        </div>
        <div className="matchup-side euro">
          <div className="side-name">{m.euro}</div>
          <div className="side-flag euro-flag" />
        </div>
      </div>
      <div className="matchup-detail">
        {m.tee && (
          <div className="detail-row">
            <div className="detail-label">TEE TIME</div>
            <div className="detail-value mono-detail">{m.tee}</div>
          </div>
        )}
        <div className="detail-row">
          <div className="detail-label">SCRAMBLE HCP</div>
          <div className="detail-value">{m.scrHcp}</div>
        </div>
        <div className="detail-row">
          <div className="detail-label">STROKES GIVEN</div>
          <div className="detail-value">{m.strokes}</div>
        </div>
        <div className="detail-row">
          <div className="detail-label">BEST BALL / SHAMBLE</div>
          <div className="detail-value mono-detail">{m.bb}</div>
        </div>
      </div>
    </div>
  );
}

function SwapPanel({ day }) {
  return (
    <div className="swap-panel">
      <div className="swap-head">
        <div>
          <div className="eyebrow gold">Swap Til You Drop</div>
          <h3 className="swap-title">The Foursomes</h3>
        </div>
      </div>

      <div className="swap-nines">
        <div className="swap-nine">
          <div className="swap-nine-head">
            <div className="swap-nine-tag mono">FRONT 9</div>
            <div className="swap-nine-sub">Each team's first 9 — before the swap</div>
          </div>
          <div className="foursomes">
            {day.front.map((g, i) => (
              <div key={i} className={`foursome ${g.team.startsWith('USA') ? 'usa' : 'euro'}`}>
                <div className="foursome-tag">{g.team}</div>
                {(g.tee || g.start) && (
                  <div className="foursome-tee mono">
                    {g.tee}{g.tee && g.start ? ' · ' : ''}{g.start}
                  </div>
                )}
                <div className="foursome-players">{g.players}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="swap-arrow" aria-hidden="true">
          <div className="swap-arrow-line" />
          <div className="swap-arrow-label mono">SWAP</div>
          <div className="swap-arrow-line" />
        </div>

        <div className="swap-nine">
          <div className="swap-nine-head">
            <div className="swap-nine-tag mono">BACK 9</div>
            <div className="swap-nine-sub">Reshuffled foursomes — after the swap</div>
          </div>
          <div className="foursomes">
            {day.back.map((g, i) => (
              <div key={i} className={`foursome ${g.team.startsWith('USA') ? 'usa' : 'euro'}`}>
                <div className="foursome-tag">{g.team}</div>
                {(g.tee || g.start) && (
                  <div className="foursome-tee mono">
                    {g.tee}{g.tee && g.start ? ' · ' : ''}{g.start}
                  </div>
                )}
                <div className="foursome-players">{g.players}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="swap-rules">
        <div className="rules-col">
          <div className="eyebrow gold">The Rules</div>
          <ol className="rules-list">
            {day.rules.map((r, i) => <li key={i}>{r}</li>)}
          </ol>
        </div>
        <div className="rules-col">
          <div className="eyebrow gold">Scoring · 3 pts (scratch)</div>
          <p className="scoring-intro">
            Each segment compares <strong>both USA foursomes' combined gross</strong> vs. <strong>both Euro foursomes' combined gross</strong>. Lowest combined team total wins the point. Tied = halved.
          </p>
          <div className="scoring-list">
            <div className="scoring-item">
              <div className="scoring-pts">1 pt</div>
              <div className="scoring-body">
                <div className="scoring-what">Front 9 combined</div>
                <div className="scoring-detail">USA G1 + USA G2 (front nine) vs. Euro G1 + Euro G2 (front nine).</div>
              </div>
            </div>
            <div className="scoring-item">
              <div className="scoring-pts">1 pt</div>
              <div className="scoring-body">
                <div className="scoring-what">Back 9 combined</div>
                <div className="scoring-detail">USA G1 + USA G2 (back nine) vs. Euro G1 + Euro G2 (back nine).</div>
              </div>
            </div>
            <div className="scoring-item">
              <div className="scoring-pts">1 pt</div>
              <div className="scoring-body">
                <div className="scoring-what">Full 18 combined</div>
                <div className="scoring-detail">All four USA scores added together vs. all four Euro scores added together.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DayPanel, Matchup, SwapPanel });