/* LinkedIn Newsletter Thumbnails — 1280×720 (16:9) — "The Source" */
/* The Ghost system: white ground, magenta XOR cyan, ink type, no gradients/emoji/em-dashes. */

const W = 1280;
const H = 720;

const monoChrome = {
  fontFamily: 'var(--font-mono)',
  fontSize: 15,
  fontWeight: 700,
  letterSpacing: '0.14em',
  textTransform: 'uppercase',
};

function QuoteGhost({ width = 200, rotate = 0, style = {} }) {
  return (
    <img src="quote-ghost-mark.webp" alt=""
      style={{
        width, height: 'auto',
        transform: `rotate(${rotate}deg)`,
        pointerEvents: 'none',
        ...style,
      }} />
  );
}

/* ============================================================
   V1 — DIAGNOSIS / STRIKETHROUGH (16:9)
   Two-column: headline left, mark + reframe right.
   ============================================================ */
function ThumbV1() {
  return (
    <div style={{
      width: W, height: H, background: '#fff',
      position: 'relative', overflow: 'hidden',
      fontFamily: 'var(--font-body)', color: 'var(--ghost-ink)',
    }}>
      <div style={{
        position: 'absolute', top: 0, right: 0,
        width: 220, height: 44, background: 'var(--ghost-magenta)',
      }}></div>

      <div style={{
        position: 'absolute', top: 36, left: 56, right: 56,
        display: 'flex', justifyContent: 'space-between',
        ...monoChrome, color: 'var(--ghost-ink)',
        paddingBottom: 14, borderBottom: '2px solid var(--ghost-ink)',
        whiteSpace: 'nowrap',
      }}>
        <span>// THE SOURCE</span>
        <span>05 MAY 2026</span>
      </div>

      {/* eyebrow */}
      <div style={{
        position: 'absolute', top: 100, left: 56,
        ...monoChrome, color: 'var(--ghost-magenta)', whiteSpace: 'nowrap',
      }}>The diagnosis</div>

      {/* headline — full width, 2 lines, smaller for 16:9 */}
      <h1 style={{
        position: 'absolute', top: 144, left: 56, right: 56,
        fontFamily: 'var(--font-display)', fontWeight: 900,
        fontSize: 92, lineHeight: 0.96, letterSpacing: '-0.03em',
        margin: 0, color: 'var(--ghost-ink)', textWrap: 'balance',
      }}>
        Your ghostwriter wasn't doing{' '}
        <s style={{
          textDecoration: 'line-through',
          textDecorationThickness: '0.08em',
          textDecorationColor: 'var(--ghost-magenta)',
          color: '#9a9a9a',
        }}>voice</s>.
      </h1>

      {/* reframe — sits well below */}
      <div style={{
        position: 'absolute', left: 56, bottom: 130,
        display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap',
      }}>
        <span style={{ ...monoChrome, color: 'var(--ghost-ink)', whiteSpace: 'nowrap' }}>They were doing</span>
        <span style={{
          fontFamily: 'var(--font-sub)', fontWeight: 900,
          fontSize: 64, lineHeight: 0.92, letterSpacing: '-0.01em',
          textTransform: 'uppercase', color: '#fff',
          background: 'var(--ghost-magenta)',
          padding: '0 0.16em 0.06em',
        }}>volume.</span>
      </div>

      {/* quote-ghost mark in the right margin, small enough not to crowd */}
      <QuoteGhost width={180} rotate={-4}
        style={{ position: 'absolute', right: 64, bottom: 130 }} />

      <div style={{
        position: 'absolute', left: 56, right: 56, bottom: 64,
        borderTop: '1px solid var(--ghost-ink)',
      }}></div>

      <div style={{
        position: 'absolute', left: 56, right: 56, bottom: 28,
        display: 'flex', justifyContent: 'space-between',
        ...monoChrome, whiteSpace: 'nowrap',
      }}>
        <span style={{ color: 'var(--ghost-ink)' }}>// THE SOURCE · NEWSLETTER FROM THE GHOST</span>
        <span style={{ color: '#666' }}>05 MAY 2026 · 6 MIN READ</span>
      </div>
    </div>
  );
}

/* ============================================================
   V2 — HAMMER-CAP PUNCH (16:9)
   Stacked hammer caps on the left, italic kicker top-right.
   ============================================================ */
function ThumbV2() {
  return (
    <div style={{
      width: W, height: H, background: '#fff',
      position: 'relative', overflow: 'hidden',
      fontFamily: 'var(--font-body)', color: 'var(--ghost-ink)',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        height: 56, background: 'var(--ghost-ink)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 56px',
        ...monoChrome, letterSpacing: '0.18em', color: '#fff', whiteSpace: 'nowrap',
      }}>
        <span>THE SOURCE</span>
        <span>↗</span>
      </div>

      {/* italic kicker */}
      <div style={{
        position: 'absolute', top: 92, left: 56, right: 56,
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 500, fontSize: 28, lineHeight: 1.25,
        letterSpacing: '-0.01em', color: '#222',
        maxWidth: '80%',
      }}>
        The case study every ghostwriter is privately scared of this week,
        and what it actually proves <span style={{
          color: 'var(--ghost-magenta)', fontStyle: 'normal',
          fontFamily: 'var(--font-mono)',
        }}>↘</span>
      </div>

      {/* hammer caps */}
      <div style={{ position: 'absolute', top: 220, left: 56, right: 360 }}>
        <h2 style={{
          fontFamily: 'var(--font-sub)', fontWeight: 900,
          fontSize: 132, lineHeight: 0.9, letterSpacing: '-0.02em',
          textTransform: 'uppercase', margin: 0, color: 'var(--ghost-ink)',
        }}>Voice</h2>
        <h2 style={{
          fontFamily: 'var(--font-sub)', fontWeight: 900,
          fontSize: 132, lineHeight: 0.9, letterSpacing: '-0.02em',
          textTransform: 'uppercase', margin: 0, color: '#bcbcbc',
          textDecoration: 'line-through',
          textDecorationColor: 'var(--ghost-ink)',
          textDecorationThickness: '0.07em',
        }}>wasn't</h2>
        <h2 style={{
          fontFamily: 'var(--font-sub)', fontWeight: 900,
          fontSize: 132, lineHeight: 0.9, letterSpacing: '-0.02em',
          textTransform: 'uppercase', margin: 0,
        }}>
          <span style={{
            background: 'var(--ghost-magenta)', color: '#fff',
            padding: '0 0.12em 0.05em',
          }}>the moat.</span>
        </h2>
      </div>

      {/* mark right side */}
      <QuoteGhost width={260} rotate={-4}
        style={{ position: 'absolute', right: 56, top: 250 }} />

      <div style={{
        position: 'absolute', right: 56, bottom: 40,
        ...monoChrome, color: 'var(--ghost-ink)', whiteSpace: 'nowrap',
      }}>
        <span style={{ borderTop: '2px solid var(--ghost-ink)', paddingTop: 10, display: 'inline-block' }}>
          THE SOURCE · 05 MAY 2026 · 06 MIN READ
        </span>
      </div>
    </div>
  );
}

/* ============================================================
   V3 — EDITORIAL PULL-QUOTE (16:9)
   Quote-ghost as the open quote, headline fills the frame.
   ============================================================ */
function ThumbV3() {
  return (
    <div style={{
      width: W, height: H, background: '#fff',
      position: 'relative', overflow: 'hidden',
      fontFamily: 'var(--font-body)', color: 'var(--ghost-ink)',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0,
        width: 320, height: 48, background: 'var(--ghost-magenta)',
      }}></div>
      <div style={{
        position: 'absolute', bottom: 0, right: 0,
        width: 220, height: 48, background: 'var(--ghost-cyan)',
      }}></div>

      <div style={{
        position: 'absolute', top: 72, left: 56, right: 56,
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        ...monoChrome, whiteSpace: 'nowrap',
      }}>
        <span style={{ color: 'var(--ghost-magenta)' }}>// THE SOURCE</span>
        <span style={{ color: 'var(--ghost-ink)' }}>6 MIN READ</span>
      </div>

      <div style={{
        position: 'absolute', top: 106, left: 56, right: 56,
        borderTop: '1px solid var(--ghost-ink)',
      }}></div>

      {/* quote-ghost mark IS the open-quote */}
      <QuoteGhost width={220}
        style={{ position: 'absolute', top: 138, left: 48 }} />

      {/* headline */}
      <h1 style={{
        position: 'absolute', top: 270, left: 56, right: 56,
        fontFamily: 'var(--font-display)', fontWeight: 900,
        fontSize: 72, lineHeight: 0.98, letterSpacing: '-0.025em',
        margin: 0, color: 'var(--ghost-ink)', textWrap: 'balance',
      }}>
        If 8 agents could replace your ghostwriter, your ghostwriter wasn't doing voice.
      </h1>

      <div style={{
        position: 'absolute', left: 56, right: 56, bottom: 64,
        display: 'flex', justifyContent: 'space-between',
        ...monoChrome, letterSpacing: '0.18em',
        color: 'var(--ghost-ink)', whiteSpace: 'nowrap',
      }}>
        <span>// THE SOURCE · NEWSLETTER FROM THE GHOST</span>
        <span>05 MAY 2026</span>
      </div>
    </div>
  );
}

/* ============================================================
   V4 — INVERSE / DARK (16:9)
   Headline left column, italic magenta "voice", mark right.
   ============================================================ */
function ThumbV4() {
  return (
    <div style={{
      width: W, height: H, background: 'var(--ghost-ink)',
      position: 'relative', overflow: 'hidden',
      fontFamily: 'var(--font-body)', color: '#fff',
    }}>
      <div style={{
        position: 'absolute', top: 0, right: 0,
        width: 320, height: 44, background: 'var(--ghost-magenta)',
      }}></div>

      <div style={{
        position: 'absolute', top: 64, left: 56, right: 56,
        display: 'flex', justifyContent: 'space-between',
        ...monoChrome, color: '#fff',
        paddingBottom: 14, borderBottom: '2px solid #fff',
        whiteSpace: 'nowrap',
      }}>
        <span>// THE SOURCE</span>
        <span>05 MAY 2026</span>
      </div>

      <div style={{ position: 'absolute', top: 140, left: 56, width: 760 }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 76, lineHeight: 0.98, letterSpacing: '-0.025em',
          color: '#fff',
        }}>
          If 8 agents replaced your ghostwriter,
        </div>
        <div style={{
          marginTop: 18,
          fontFamily: 'var(--font-display)', fontWeight: 900, fontStyle: 'italic',
          fontSize: 76, lineHeight: 0.98, letterSpacing: '-0.025em',
          color: 'var(--ghost-magenta)',
        }}>voice</div>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 76, lineHeight: 0.98, letterSpacing: '-0.025em',
          color: '#fff',
        }}>wasn't the work.</div>
      </div>

      <QuoteGhost width={260} rotate={-4}
        style={{ position: 'absolute', right: 56, top: 220 }} />

      <div style={{
        position: 'absolute', left: 56, right: 56, bottom: 36,
        display: 'flex', justifyContent: 'space-between',
        ...monoChrome, color: '#fff', whiteSpace: 'nowrap',
      }}>
        <span>// THE SOURCE · NEWSLETTER FROM THE GHOST</span>
        <span style={{ color: 'var(--ghost-magenta)' }}>05 MAY 2026 · 6 MIN READ</span>
      </div>
    </div>
  );
}

function App() {
  // Render-only mode — exposes each thumb as a clean 1280x720 frame with a stable
  // id (#v1..#v4) for headless screenshot capture. Triggered by `?render=batch`.
  const renderMode = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('render') === 'batch';
  if (renderMode) {
    const Frame = ({ id, children }) => (
      <div id={id} style={{ width: W, height: H, position: 'relative', overflow: 'hidden', background: '#fff' }}>
        {children}
      </div>
    );
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 0, background: '#fff' }}>
        <Frame id="v1"><ThumbV1 /></Frame>
        <Frame id="v2"><ThumbV2 /></Frame>
        <Frame id="v3"><ThumbV3 /></Frame>
        <Frame id="v4"><ThumbV4 /></Frame>
      </div>
    );
  }
  return (
    <DesignCanvas title="The Source" subtitle="LinkedIn newsletter thumbnail · 1280×720 (16:9)">
      <DCSection id="thumbs" title="LinkedIn newsletter thumbnail · 1280×720">
        <DCArtboard id="v1" label="V1 · Diagnosis (strikethrough)" width={W} height={H}>
          <ThumbV1 />
        </DCArtboard>
        <DCArtboard id="v2" label="V2 · Hammer-cap punch" width={W} height={H}>
          <ThumbV2 />
        </DCArtboard>
        <DCArtboard id="v3" label="V3 · Editorial pull-quote" width={W} height={H}>
          <ThumbV3 />
        </DCArtboard>
        <DCArtboard id="v4" label="V4 · Inverse / dark" width={W} height={H}>
          <ThumbV4 />
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);