// lineup-variants.jsx — Four lineup layouts: Grid, Tactical, Hybrid, Landscape.
// All are mobile-sized (~440 wide) and use compact PlayerCards in slots.
// State is driven by props.slots ({ GK:[…], DEF:[…,…], MID:[…], FWD:[…] }).
//
// v2 changes (per user feedback):
//   • Smaller default scales — less scroll on mobile
//   • SpecialBar moves ABOVE the field so Fan/Coach are visible first-paint
//   • Tactical pitch uses green radial gradient + mowed-grass stripes
//     (mirrors Coach Card field tone)
//   • New Landscape variant — horizontal pitch, all 5 slots fit in one viewport
//   • Subtle football pattern background on .lu

// Helper: render a slot — empty placeholder OR FilledSlot wrapping a PlayerCard.
function renderSlot({ player, position, locale, scale = 1, onPick, onRemove, invalid }) {
  if (!player) {
    return <EmptySlot position={position} locale={locale} scale={scale} onClick={onPick} />;
  }
  return (
    <FilledSlot scale={scale} invalid={invalid} onRemove={onRemove} locale={locale} onClick={onPick}>
      <PlayerCard
        size="compact"
        locale={locale}
        tier={player.tier}
        position={player.position}
        overall={player.overall}
        statKey={player.statKey}
        statValue={player.statValue}
        playerName={player.name[locale]}
        teamName={player.team[locale]}
        playerImage={player.image}
        showWatermark={false}
      />
    </FilledSlot>
  );
}



// ──────────────────────────────────────────────────────────────────────────
// Variant B: Tactical — vertical pitch (green field), mini cards positioned
// spatially. Formation: 1 FWD · 2 MID · 1 DEF · 1 GK.
// ──────────────────────────────────────────────────────────────────────────
function VariantTactical({ locale, slots, fanCard, coachCard, score,
                            submitState, showBreakdown = true, showSpecial = true, showSponsor = true,
                            deadline, onPick, onPickFan, onPickCoach,
                            onRemoveSlot, onRemoveFan, onRemoveCoach,
                            invalidIds = new Set(), headerActions = null }) {
  const scale = 0.42;
  const screenLabel = `Lineup · Tactical (${submitState})`;

  return (
    <div className="lu lu--tactical" data-screen-label={screenLabel}>
      <LineupHeader locale={locale} deadline={deadline} actions={headerActions} />

      <div className="lu-body">
        <SpecialBar locale={locale}
                    fanCard={fanCard} coachCard={coachCard}
                    onPickFan={onPickFan} onPickCoach={onPickCoach}
                    onRemoveFan={onRemoveFan} onRemoveCoach={onRemoveCoach}
                    visible={showSpecial} compact />

        <MiniScore locale={locale} score={score}
                   complete={submitState === 'ready'} />

        <SponsorStrip locale={locale} visible={showSponsor} variant="compact" sponsorId="mci" />

        <div className="lu-pitch lu-pitch--green">
          <PitchBillboards locale={locale} side="left" />
          <PitchBillboards locale={locale} side="right" />
          <PitchMarkings />

          <div className="lu-pitch-pos lu-pitch-pos--fwd">
            {renderSlot({
              player: slots.FWD[0], position: 'FWD', locale, scale,
              onPick: () => onPick('FWD', 0),
              onRemove: slots.FWD[0] ? () => onRemoveSlot('FWD', 0) : null,
              invalid: invalidIds.has(`FWD-0`),
            })}
          </div>
          <div className="lu-pitch-pos lu-pitch-pos--mid-l">
            {renderSlot({
              player: slots.MID[0], position: 'MID', locale, scale,
              onPick: () => onPick('MID', 0),
              onRemove: slots.MID[0] ? () => onRemoveSlot('MID', 0) : null,
              invalid: invalidIds.has(`MID-0`),
            })}
          </div>
          <div className="lu-pitch-pos lu-pitch-pos--mid-r">
            {renderSlot({
              player: slots.MID[1], position: 'MID', locale, scale,
              onPick: () => onPick('MID', 1),
              onRemove: slots.MID[1] ? () => onRemoveSlot('MID', 1) : null,
              invalid: invalidIds.has(`MID-1`),
            })}
          </div>
          <div className="lu-pitch-pos lu-pitch-pos--def">
            {renderSlot({
              player: slots.DEF[0], position: 'DEF', locale, scale,
              onPick: () => onPick('DEF', 0),
              onRemove: slots.DEF[0] ? () => onRemoveSlot('DEF', 0) : null,
              invalid: invalidIds.has(`DEF-0`),
            })}
          </div>
          <div className="lu-pitch-pos lu-pitch-pos--gk">
            {renderSlot({
              player: slots.GK[0], position: 'GK', locale, scale,
              onPick: () => onPick('GK', 0),
              onRemove: slots.GK[0] ? () => onRemoveSlot('GK', 0) : null,
              invalid: invalidIds.has(`GK-0`),
            })}
          </div>
        </div>

        <SponsorStrip locale={locale} visible={showSponsor} variant="banner" sponsorId="blu" />

        <DeckSummary locale={locale} score={score}
                     showBreakdown={showBreakdown}
                     complete={submitState === 'ready'} />
      </div>

      <SubmitBar locale={locale} state={submitState} cooldown="03:42" />
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Variant D: Landscape — horizontal pitch, all 5 slots in one viewport
// Columns: GK | DEF×2 (stacked) | MID | FWD — direction matches reading order
// (RTL: GK on the right / FWD on the left; LTR: mirror)
// ──────────────────────────────────────────────────────────────────────────
function VariantLandscape({ locale, slots, fanCard, coachCard, score,
                             submitState, showBreakdown = true, showSpecial = true, showSponsor = true,
                             deadline, onPick, onPickFan, onPickCoach,
                             onRemoveSlot, onRemoveFan, onRemoveCoach,
                             invalidIds = new Set(), headerActions = null }) {
  const scale = 0.45; // 90×140 cards — fit 4 columns + DEF stacked
  const screenLabel = `Lineup · Landscape (${submitState})`;

  return (
    <div className="lu lu--landscape" data-screen-label={screenLabel}>
      <LineupHeader locale={locale} deadline={deadline} actions={headerActions} />

      <div className="lu-body">
        <SpecialBar locale={locale}
                    fanCard={fanCard} coachCard={coachCard}
                    onPickFan={onPickFan} onPickCoach={onPickCoach}
                    onRemoveFan={onRemoveFan} onRemoveCoach={onRemoveCoach}
                    visible={showSpecial} compact />

        <MiniScore locale={locale} score={score}
                   complete={submitState === 'ready'} />

        <SponsorStrip locale={locale} visible={showSponsor} variant="compact" sponsorId="mci" />

        <div className="lu-landscape-pitch">
          <PitchBillboards locale={locale} side="top" />
          <PitchBillboards locale={locale} side="bottom" />
          <LandscapePitchMarkings />
          <div className="lu-landscape-grid">
            {/* Logical order in markup: GK → DEF → MID → FWD.
                CSS direction (`dir="..."`) flips inline-start to match locale,
                so RTL puts GK on the right (closer to viewer's own goal). */}
            <div className="lu-landscape-col lu-landscape-col--gk">
              {renderSlot({
                player: slots.GK[0], position: 'GK', locale, scale,
                onPick: () => onPick('GK', 0),
                onRemove: slots.GK[0] ? () => onRemoveSlot('GK', 0) : null,
                invalid: invalidIds.has(`GK-0`),
              })}
            </div>
            <div className="lu-landscape-col lu-landscape-col--def">
              {renderSlot({
                player: slots.DEF[0], position: 'DEF', locale, scale,
                onPick: () => onPick('DEF', 0),
                onRemove: slots.DEF[0] ? () => onRemoveSlot('DEF', 0) : null,
                invalid: invalidIds.has(`DEF-0`),
              })}
            </div>
            <div className="lu-landscape-col lu-landscape-col--mid">
              {renderSlot({
                player: slots.MID[0], position: 'MID', locale, scale,
                onPick: () => onPick('MID', 0),
                onRemove: slots.MID[0] ? () => onRemoveSlot('MID', 0) : null,
                invalid: invalidIds.has(`MID-0`),
              })}
              {renderSlot({
                player: slots.MID[1], position: 'MID', locale, scale,
                onPick: () => onPick('MID', 1),
                onRemove: slots.MID[1] ? () => onRemoveSlot('MID', 1) : null,
                invalid: invalidIds.has(`MID-1`),
              })}
            </div>
            <div className="lu-landscape-col lu-landscape-col--fwd">
              {renderSlot({
                player: slots.FWD[0], position: 'FWD', locale, scale,
                onPick: () => onPick('FWD', 0),
                onRemove: slots.FWD[0] ? () => onRemoveSlot('FWD', 0) : null,
                invalid: invalidIds.has(`FWD-0`),
              })}
            </div>
          </div>
        </div>

        <SponsorStrip locale={locale} visible={showSponsor} variant="banner" sponsorId="blu" />

        <DeckSummary locale={locale} score={score}
                     showBreakdown={showBreakdown}
                     complete={submitState === 'ready'} />
      </div>

      <SubmitBar locale={locale} state={submitState} cooldown="03:42" />
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Pitch perimeter billboards — animated LED-board strips along the long edges.
// Each strip is a marquee that scrolls the 3 sponsor brands in a loop, like
// real broadcast LED panels behind the touchlines.
//
// `side` determines orientation:
//   • top / bottom → horizontal strips (used by Landscape pitch — long axis horizontal)
//   • left / right → vertical strips   (used by Tactical pitch — long axis vertical)
// ──────────────────────────────────────────────────────────────────────────
function PitchBillboards({ locale = 'fa', side = 'top' }) {
  const horizontal = (side === 'top' || side === 'bottom');
  const ids = ['mci', 'blu', 'mili'];
  const seq = [...ids, ...ids];
  return (
    <div className={`lu-billboards lu-billboards--${side} lu-billboards--${horizontal ? 'horizontal' : 'vertical'}`}
         aria-hidden="true">
      <div className="lu-billboards-track">
        {seq.map((id, i) => {
          const s = SPONSORS[id];
          if (!s) return null;
          // Vertical strips: rotate text 90° in CSS so it reads along the strip
          return (
            <div key={i} className="lu-billboard-slot"
                 style={{ '--brand': s.color, '--brand-2': s.color2 }}>
              <span className="lu-billboard-text">{s.short[locale] || s.name[locale]}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Pitch markings (vertical — used by Tactical and Hybrid)
// dim=true: extra-subtle for hybrid (just hints behind cards)
// ──────────────────────────────────────────────────────────────────────────
function PitchMarkings({ dim = false }) {
  const stroke = dim ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.18)';
  const sw = 1.2;
  return (
    <svg className="lu-pitch-svg" viewBox="0 0 400 600" preserveAspectRatio="none" aria-hidden="true">
      <rect x="8" y="8" width="384" height="584" rx="6" fill="none" stroke={stroke} strokeWidth={sw}/>
      <line x1="8" y1="300" x2="392" y2="300" stroke={stroke} strokeWidth={sw}/>
      <circle cx="200" cy="300" r="56" fill="none" stroke={stroke} strokeWidth={sw}/>
      <circle cx="200" cy="300" r="2" fill={stroke}/>
      <rect x="100" y="8" width="200" height="78" fill="none" stroke={stroke} strokeWidth={sw}/>
      <rect x="150" y="8" width="100" height="30" fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 156 86 A 60 60 0 0 0 244 86" fill="none" stroke={stroke} strokeWidth={sw}/>
      <rect x="100" y="514" width="200" height="78" fill="none" stroke={stroke} strokeWidth={sw}/>
      <rect x="150" y="562" width="100" height="30" fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 156 514 A 60 60 0 0 1 244 514" fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 8 18 A 10 10 0 0 1 18 8"   fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 382 8 A 10 10 0 0 1 392 18" fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 8 582 A 10 10 0 0 0 18 592" fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 382 592 A 10 10 0 0 0 392 582" fill="none" stroke={stroke} strokeWidth={sw}/>
    </svg>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Landscape pitch markings — full pitch rotated 90°, goalposts on both sides
// ──────────────────────────────────────────────────────────────────────────
function LandscapePitchMarkings() {
  const stroke = 'rgba(255,255,255,0.20)';
  const sw = 1.3;
  return (
    <svg className="lu-landscape-svg" viewBox="0 0 600 380" preserveAspectRatio="none" aria-hidden="true">
      {/* Outer */}
      <rect x="8" y="8" width="584" height="364" rx="6" fill="none" stroke={stroke} strokeWidth={sw}/>
      {/* Halfway line */}
      <line x1="300" y1="8" x2="300" y2="372" stroke={stroke} strokeWidth={sw}/>
      {/* Center circle */}
      <circle cx="300" cy="190" r="48" fill="none" stroke={stroke} strokeWidth={sw}/>
      <circle cx="300" cy="190" r="2" fill={stroke}/>
      {/* Left penalty box */}
      <rect x="8" y="100" width="68" height="180" fill="none" stroke={stroke} strokeWidth={sw}/>
      <rect x="8" y="140" width="26" height="100" fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 76 144 A 48 48 0 0 1 76 236" fill="none" stroke={stroke} strokeWidth={sw}/>
      {/* Right penalty box */}
      <rect x="524" y="100" width="68" height="180" fill="none" stroke={stroke} strokeWidth={sw}/>
      <rect x="566" y="140" width="26" height="100" fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 524 144 A 48 48 0 0 0 524 236" fill="none" stroke={stroke} strokeWidth={sw}/>
      {/* Corner arcs */}
      <path d="M 8 18 A 10 10 0 0 1 18 8"   fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 582 8 A 10 10 0 0 1 592 18" fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 8 362 A 10 10 0 0 0 18 372" fill="none" stroke={stroke} strokeWidth={sw}/>
      <path d="M 582 372 A 10 10 0 0 0 592 362" fill="none" stroke={stroke} strokeWidth={sw}/>
    </svg>
  );
}

// ─── styles ─────────────────────────────────────────────────────────────────
const VAR_CSS = `
  .lu {
    width: 100%;
    height: 100%;
    /* subtle football-themed backdrop: mowed-grass stripes + soft green tint */
    background:
      repeating-linear-gradient(135deg,
        transparent 0 26px,
        rgba(34,90,52,0.018) 26px 52px),
      radial-gradient(ellipse 70% 50% at 50% 0%,
        rgba(34,90,52,0.04) 0%, transparent 60%),
      radial-gradient(ellipse 80% 60% at 50% 100%,
        rgba(113,99,217,0.04) 0%, transparent 70%),
      var(--bg-deep);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text-primary);
    position: relative;
  }
  .lu-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
  }
  .lu-body::-webkit-scrollbar { width: 5px; }
  .lu-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

  /* ───── Variant B: Tactical (green pitch — Coach card field tone) ───── */
  .lu-pitch {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 2.6;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
  }
  .lu-pitch::after {
    /* mowed-grass horizontal stripes */
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.022) 0 30px,
      transparent 30px 60px
    );
    pointer-events: none;
    z-index: 1;
  }
  .lu-pitch--green {
    background:
      radial-gradient(ellipse 90% 70% at 50% 42%, #2D5A3E 0%, #1A3326 45%, #0C1812 80%, #060A07 100%);
  }
  .lu-pitch--green::before {
    /* soft vignette top + bottom for depth */
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 110% 50% at 50% 0%, rgba(0,0,0,0.35), transparent 55%),
      radial-gradient(ellipse 110% 55% at 50% 100%, rgba(0,0,0,0.40), transparent 55%);
    pointer-events: none;
    z-index: 2;
  }
  .lu-pitch-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 3;
  }

  /* ───── Pitch perimeter billboards (animated LED strips) ───── */
  .lu-billboards {
    position: absolute;
    background: #02050A;
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5),
                inset 0 0 0 1px rgba(0,0,0,0.6);
  }
  /* Horizontal strip (Landscape pitch — long axis is horizontal) */
  .lu-billboards--horizontal { height: 14px; }
  .lu-billboards--horizontal.lu-billboards--top    { top: 10px; left: 16px; right: 16px; }
  .lu-billboards--horizontal.lu-billboards--bottom { bottom: 10px; left: 16px; right: 16px; }
  .lu-billboards--horizontal .lu-billboards-track {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: max-content;
    animation: lu-led-marquee-h 22s linear infinite;
  }
  .lu-billboards--horizontal .lu-billboard-slot {
    flex: 0 0 180px;
    height: 100%;
  }
  /* RTL: track scrolls the other way so Persian content enters from right
     (matches direction Persian readers expect for tickers) */
  html[dir="rtl"] .lu-billboards--horizontal .lu-billboards-track {
    animation-name: lu-led-marquee-h-rtl;
  }

  /* Vertical strip (Tactical pitch — long axis is vertical) */
  .lu-billboards--vertical { width: 14px; }
  .lu-billboards--vertical.lu-billboards--left  { top: 14px; bottom: 14px; left: 10px; }
  .lu-billboards--vertical.lu-billboards--right { top: 14px; bottom: 14px; right: 10px; }
  .lu-billboards--vertical .lu-billboards-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: max-content;
    animation: lu-led-marquee-v 22s linear infinite;
  }
  .lu-billboards--vertical .lu-billboard-slot {
    flex: 0 0 130px;
    width: 100%;
  }

  /* Slot — the colored LED panel */
  .lu-billboard-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 92%, white) 0%,
      var(--brand) 50%,
      var(--brand-2) 100%);
    color: white;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.02em;
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.30),
      inset 0 -1px 0 rgba(0,0,0,0.30);
  }
  /* Scanline overlay — LED feel */
  .lu-billboard-slot::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      0deg,
      transparent 0 1px,
      rgba(0,0,0,0.18) 1px 2px);
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  /* Thin separator between adjacent panels */
  .lu-billboards--horizontal .lu-billboard-slot + .lu-billboard-slot {
    border-inline-start: 1px solid rgba(0,0,0,0.55);
  }
  .lu-billboards--vertical .lu-billboard-slot + .lu-billboard-slot {
    border-top: 1px solid rgba(0,0,0,0.55);
  }
  .lu-billboard-text {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.45);
    white-space: nowrap;
    padding: 0 6px;
  }
  /* Vertical strip — rotate text 90° so it reads along the strip's length.
     Each slot is 130px tall and 14px wide; the rotated text spans the slot
     vertically. We rotate based on side: left strip rotates -90° (reading
     bottom→top); right strip rotates +90° (reading top→bottom). Both face
     "inward" toward the field — like real broadcast LED panels. */
  .lu-billboards--vertical .lu-billboard-text {
    position: absolute;
    width: 100px;
    text-align: center;
    font-size: 10px;
    padding: 0;
    letter-spacing: 0;
    white-space: nowrap;
    transform-origin: center;
  }
  .lu-billboards--left .lu-billboard-text  { transform: rotate(-90deg); }
  .lu-billboards--right .lu-billboard-text { transform: rotate( 90deg); }
  html[lang="fa"] .lu-billboards--horizontal .lu-billboard-text,
  html[lang="ar"] .lu-billboards--horizontal .lu-billboard-text {
    font-size: 11px;
  }

  /* Marquee keyframes — translate 50% because the track is doubled */
  @keyframes lu-led-marquee-h    { from { transform: translateX(0); }   to { transform: translateX(-50%); } }
  @keyframes lu-led-marquee-h-rtl{ from { transform: translateX(0); }   to { transform: translateX(50%);  } }
  @keyframes lu-led-marquee-v    { from { transform: translateY(0); }   to { transform: translateY(-50%); } }
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .lu-billboards-track { animation: none !important; }
  }
  .lu-pitch-pos {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 4;
  }
  .lu-pitch-pos--fwd   { top: 14%; left: 50%; }
  .lu-pitch-pos--mid-l { top: 39%; left: 28%; }
  .lu-pitch-pos--mid-r { top: 39%; left: 72%; }
  .lu-pitch-pos--def   { top: 65%; left: 50%; }
  .lu-pitch-pos--gk    { top: 88%; left: 50%; }
  /* ───── Variant D: Landscape (horizontal pitch) ───── */
  .lu-landscape-pitch {
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 380;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    background:
      radial-gradient(ellipse 90% 70% at 50% 50%, #2D5A3E 0%, #1A3326 50%, #0C1812 85%, #060A07 100%);
    margin: 4px 0 0;
  }
  .lu-landscape-pitch::after {
    /* vertical mowed-grass stripes (perpendicular to viewer in landscape) */
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.022) 0 40px,
      transparent 40px 80px
    );
    pointer-events: none;
    z-index: 1;
  }
  .lu-landscape-pitch::before {
    /* edge vignette */
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 50% 80% at 0% 50%, rgba(0,0,0,0.35), transparent 60%),
      radial-gradient(ellipse 50% 80% at 100% 50%, rgba(0,0,0,0.35), transparent 60%);
    pointer-events: none;
    z-index: 2;
  }
  .lu-landscape-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 3;
  }
  .lu-landscape-grid {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding: 8px 6px;
  }
  .lu-landscape-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  /* MID column has 2 stacked cards */
  .lu-landscape-col--mid { gap: 6px; }
`;

const __luVarStyle = document.createElement('style');
__luVarStyle.textContent = VAR_CSS;
document.head.appendChild(__luVarStyle);

Object.assign(window, {
  VariantTactical, VariantLandscape, LineupSwitcher,
  PitchMarkings, LandscapePitchMarkings, PitchBillboards, renderSlot,
});

// ───────────────────────────────────────────────────────────────────────────────
// LineupSwitcher — wraps Tactical/Landscape with an orientation toggle in the
// header. Toggle state lives in the wrapper so the user can flip orientation
// in-product. Default orientation is set by `initialOrientation` prop.
// ───────────────────────────────────────────────────────────────────────────────
function LineupSwitcher({ initialOrientation = 'vertical', ...rest }) {
  const [orientation, setOrientation] = React.useState(initialOrientation);
  const toggle = (
    <OrientationToggle value={orientation} onChange={setOrientation} locale={rest.locale} />
  );
  const Variant = orientation === 'horizontal' ? VariantLandscape : VariantTactical;
  return <Variant {...rest} headerActions={toggle} />;
}
Object.assign(window, { LineupSwitcher });