// World Cup 2026 Prediction Game poster.
//
// Two layout variants share the same canvas (1837×2603 ≈ A3) and the
// same lower row (QR + body text + Flip icon card). They differ in the
// upper composition:
//
//   v1 ("Centered") — Figma node 429-9422
//      • Headline stacked across two centered lines at the top
//      • Two-phone composite mockup (assets/wc2026/app-mockup.png)
//      • Subheadline centered below the mockup
//
//   v2 ("Split") — Figma node Wc2026-vertical (3)
//      • Headline split: line 1 centered at top, lines 2+ stacked to the
//        RIGHT of the phone
//      • Single tilted phone on the LEFT (assets/wc2026/app-mockup-v2.png)
//      • Subheadline centered below the phone
//
// All sizes scale from a 1837 px base. Pass `width` to render at A3
// (3508 px @ 300dpi) or A5 (1748 px @ 300dpi).

// Legal disclaimer required because "FIFA" and "FIFA World Cup" are
// trademarks; this poster is a Flip-internal employee tool unrelated to
// the official body. Shown on every poster, both variants.
const DISCLAIMER = {
  en: 'This app is not affiliated with or endorsed by FIFA or the FIFA World Cup.',
  de: 'Diese App ist weder mit der FIFA noch mit der FIFA Fußball-Weltmeisterschaft verbunden oder von ihnen unterstützt.',
};

function TplWC26({ p, width }) {
  const { appUrl, headline, subheadline, bodyText, logoUrl } = p;
  const variant = p.variant || 'v1';
  const language = p.language === 'de' ? 'de' : 'en';
  const aspect = 2603 / 1837;
  const height = width * aspect;
  const scale = width / 1837;
  const s = (v) => v * scale;

  const blue   = '#2151F5';   // Flip swirl blue
  const black  = '#000000';
  const headFont = '"Clash Grotesk", system-ui, sans-serif';

  // Defaults from the Figma copy
  const defHead = headline    || 'World Cup 2026\nPrediction Game';
  const defSub  = subheadline || 'On your\nEmployee App!';
  const defBody = bodyText    ||
    "If you don't have it already, scan the QR to download the app and start playing!";

  // Split headline once; v2 uses line 1 separately from the rest.
  const headLines = defHead.split('\n');
  const headTop = headLines[0] || '';
  const headRight = headLines.slice(1).join('\n');

  // Common headline / subhead style — used by both variants.
  // Weight 500 (medium) per design spec; previously 700 (bold).
  const headlineStyle = {
    fontSize: s(160), fontWeight: 500, letterSpacing: 0,
    lineHeight: 1.0, color: '#FFFFFF', whiteSpace: 'pre-line',
  };

  return (
    <div style={{
      width, height, position: 'relative', overflow: 'hidden',
      background: black,
      fontFamily: headFont, color: '#FFFFFF',
      isolation: 'isolate',
    }}>
      {/* ================ UPPER COMPOSITION (per variant) =============== */}

      {variant === 'v1' && <V1Upper s={s} headlineStyle={headlineStyle}
                                     defHead={defHead}/>}
      {variant === 'v2' && <V2Upper s={s} headlineStyle={headlineStyle}
                                     headTop={headTop} headRight={headRight}/>}

      {/* ================ SUBHEADLINE — shared, same y for both ========= */}
      {/* Figma v1 node 429:9426 and v2 node 428:7043 both at y=1596 */}

      <div style={{
        ...headlineStyle, position: 'absolute',
        left: s(128), right: s(128), top: s(1596),
        textAlign: 'center',
      }}>{defSub}</div>

      {/* ================ BOTTOM ROW — shared by both variants ========== */}
      {/* QR · body text · Flip icon */}

      {/* QR — white modules on black, no card backdrop */}
      <div style={{
        position: 'absolute', left: s(98), top: s(2179),
        width: s(276), height: s(276),
      }}>
        <QRCode
          value={appUrl || 'https://app.flip.com'}
          size={s(276)}
          fg="#FFFFFF"
          bg="#000000"
        />
      </div>

      {/* Body caption — centered between QR and logo, vertically centered
          on the same midline as the corner blocks. Clash Grotesk
          regular 400, size 50, letter-spacing 0%. */}
      <div style={{
        position: 'absolute',
        left: s(562), top: s(2179),
        width: s(713), height: s(276),
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        textAlign: 'center',
        fontSize: s(50), fontWeight: 400, fontFamily: headFont,
        letterSpacing: 0, lineHeight: 1.30, color: '#FFFFFF',
      }}>{defBody}</div>

      {/* Flip icon card — white rounded square, blue swirl centered.
          Logo override fills the entire white block. */}
      <div style={{
        position: 'absolute', left: s(1463), top: s(2179),
        width: s(276), height: s(276),
        background: '#FFFFFF',
        borderRadius: s(56),
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 22px rgba(0,0,0,0.22)',
        overflow: 'hidden',
      }}>
        {logoUrl ? (
          <img src={logoUrl} alt=""
               style={{
                 width: '100%', height: '100%',
                 objectFit: 'contain',
                 display: 'block',
               }}/>
        ) : (
          <FlipSwirl size={s(103)} color={blue}/>
        )}
      </div>

      {/* ================ FIFA DISCLAIMER — shared, both variants ======= */}
      {/* Sits below the bottom row (corner cards end at y=2455) within
          the 148 px of unused space at the foot of the canvas. Small,
          low-emphasis, white at 60% opacity. Language is controlled by
          the EN/DE toggle in the left panel (params.language). */}
      <div style={{
        position: 'absolute',
        left: s(98), right: s(98), bottom: s(50),
        textAlign: 'center',
        fontFamily: headFont,
        fontSize: s(26), fontWeight: 400, letterSpacing: 0,
        lineHeight: 1.30,
        color: 'rgba(255, 255, 255, 0.6)',
      }}>{DISCLAIMER[language]}</div>
    </div>
  );
}

// ── Variant 1: Centered double-phone ────────────────────────────────
function V1Upper({ s, headlineStyle, defHead }) {
  // Image dims and centering math:
  //   Mockup native: 1837 × 2360 (aspect 0.778)
  //   Headline ends at y=485, Subheadline starts at y=1596
  //   Image rendered at width 1700 (~92% of canvas) so the *phones* read
  //   as prominently as in the Figma reference. The halo's transparent
  //   edges feather behind the headline / subheadline.
  const HEAD_TOP = 165;
  const HEAD_BOTTOM = 485;
  const SUB_TOP = 1596;
  const IMG_WIDTH = 1700;
  const IMG_HEIGHT = IMG_WIDTH * (2360 / 1837);
  const IMG_TOP = (HEAD_BOTTOM + SUB_TOP) / 2 - IMG_HEIGHT / 2;

  return (
    <>
      <div style={{
        ...headlineStyle, position: 'absolute',
        left: s(120), right: s(120), top: s(HEAD_TOP),
        textAlign: 'center',
      }}>{defHead}</div>

      <img
        src="assets/wc2026/app-mockup.png"
        alt=""
        style={{
          position: 'absolute',
          left: '50%', top: s(IMG_TOP),
          transform: 'translateX(-50%)',
          width: s(IMG_WIDTH),
          height: s(IMG_HEIGHT),
          pointerEvents: 'none', userSelect: 'none',
        }}
      />
    </>
  );
}

// ── Variant 2: Split headline + single tilted phone (left) ──────────
// Source: Figma node 428-7039 (Brand-System file).
//
// Exact spec from the user / Figma:
//   "World Cup 2026"   — text  at x=175, y=216, w=1320 (text-align: center)
//   Phone mockup       — image at x=0,   y=340, w=1202, h=1316
//                        (left edge flush with canvas; halo cropped to
//                        the specified box via object-fit: cover so the
//                        phone retains its natural aspect ratio)
//   "Prediction Game"  — text  at x=562, y=783, w=1137 (text-align: LEFT —
//                        the only left-aligned text in the layout)
function V2Upper({ s, headlineStyle, headTop, headRight }) {
  return (
    <>
      {/* Headline "World Cup 2026" — text NOT left-aligned (only the
          subheadline below is). Container at x=175 w=1320; text
          centered within that container. */}
      <div style={{
        ...headlineStyle, position: 'absolute',
        left: s(175), top: s(216), width: s(1320),
        textAlign: 'center',
      }}>{headTop}</div>

      {/* Phone mockup — width 1500 (≈82% of canvas) keeps the phone
          visually prominent. Vertically aligned with the "Prediction
          Game" text:
            text  at y=783, height = 2 lines × 160 = 320 → center y=943
            image height 1346 → top = 943 − 673 = 270
          object-fit: cover trims the surplus halo top/bottom equally
          (the phone is centered in the PNG) without affecting the
          device. Image bottom lands at y=1616 — 20 px past subhead top
          (1596), but only the transparent halo edge overlaps. */}
      <img
        src="assets/wc2026/app-mockup-v2.png"
        alt=""
        style={{
          position: 'absolute',
          left: s(0), top: s(270),
          width: s(1500), height: s(1346),
          objectFit: 'cover',
          pointerEvents: 'none', userSelect: 'none',
        }}
      />

      {/* "Prediction" / "Game" — text-align LEFT, positioned to the
          right of the visible phone device so it does NOT overlap the
          phone. The phone's visible right edge sits at ~x=900 (50% of
          the 1500-wide image, plus the tilt cropping the device). */}
      <div style={{
        ...headlineStyle, position: 'absolute',
        left: s(950), top: s(783), width: s(800),
        textAlign: 'left',
      }}>{headRight}</div>
    </>
  );
}

window.TplWC26 = TplWC26;