import { chromium } from 'playwright';

const CSS = `
  :root{ --ink:#0D0E10; --ink2:#16171B; --line:#26272C; --accent:#E0FF4F; --text:#ECEAE0; --muted:#8A8A82; }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ width:1200px; height:1200px; }
  .card{ position:relative; width:1200px; height:1200px; overflow:hidden;
    background: radial-gradient(120% 120% at 20% 0%, #17181D 0%, #0D0E10 58%); }
  .grid{ position:absolute; inset:0;
    background-image:
      linear-gradient(to right, rgba(224,255,79,.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(224,255,79,.045) 1px, transparent 1px);
    background-size:40px 40px; }
  .frame{ position:absolute; inset:40px; border:1px solid rgba(224,255,79,.16); border-radius:18px; }
  .px{ position:absolute; width:10px; height:10px; background:var(--accent); }
  .p1{ top:58px; left:58px } .p2{ top:58px; right:58px } .p3{ bottom:58px; left:58px } .p4{ bottom:58px; right:58px }
  .accentline{ position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--accent); }
  .wrap{ position:absolute; inset:0; padding:104px 96px; display:flex; flex-direction:column; }
  .kicker{ display:inline-flex; align-items:center; gap:12px; font-family:"JetBrains Mono",monospace;
    font-size:16px; letter-spacing:.20em; color:var(--muted); text-transform:uppercase; }
  .kicker .sq{ width:11px; height:11px; background:var(--accent); }
  .head{ font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:92px; line-height:1.04;
    letter-spacing:-.02em; color:var(--text); margin-top:44px; }
  .head .a{ color:var(--accent); }
  .feats{ margin-top:56px; display:flex; flex-direction:column; gap:24px; }
  .feat{ display:flex; align-items:center; gap:20px; font-family:"JetBrains Mono",monospace;
    font-size:28px; color:var(--text); }
  .feat .sq{ width:14px; height:14px; background:var(--accent); flex:none; }
  .feat b{ font-weight:500; }
  .feat span{ color:var(--muted); }
  .spacer{ flex:1; }
  .brandrow{ display:flex; align-items:center; gap:18px; }
  .mark{ color:var(--accent); }
  .wm{ font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:40px; letter-spacing:-.01em; color:var(--text); line-height:1; }
  .wm .dot{ color:var(--accent); }
  .foot{ margin-top:20px; display:flex; align-items:center; justify-content:space-between; }
  .free{ font-family:"JetBrains Mono",monospace; font-size:21px; color:var(--muted); }
  .free b{ color:var(--accent); font-weight:600; }
`;

const MARK = `<svg class="mark" width="52" height="52" viewBox="0 0 64 64" shape-rendering="crispEdges" fill="currentColor">
  <rect x="30" y="4" width="4" height="2"/><rect x="28" y="6" width="8" height="2"/>
  <rect x="26" y="8" width="2" height="2"/><rect x="36" y="8" width="2" height="2"/>
  <rect x="8" y="14" width="8" height="40"/><rect x="48" y="14" width="8" height="40"/>
  <rect x="16" y="18" width="2" height="4"/><rect x="18" y="22" width="2" height="4"/>
  <rect x="20" y="26" width="2" height="4"/><rect x="22" y="30" width="2" height="4"/>
  <rect x="24" y="34" width="2" height="4"/><rect x="26" y="38" width="2" height="4"/>
  <rect x="28" y="42" width="4" height="4"/><rect x="46" y="18" width="2" height="4"/>
  <rect x="44" y="22" width="2" height="4"/><rect x="42" y="26" width="2" height="4"/>
  <rect x="40" y="30" width="2" height="4"/><rect x="38" y="34" width="2" height="4"/>
  <rect x="36" y="38" width="2" height="4"/><rect x="32" y="42" width="4" height="4"/>
  <rect x="2" y="58" width="22" height="2"/><rect x="40" y="58" width="22" height="2"/>
  <rect x="11" y="48" width="2" height="2"/><rect x="51" y="48" width="2" height="2"/>
</svg>`;

const posts = [
  { file:'monsys-post-1-compliance.png', kicker:'COMPLIANCE EVIDENCE',
    head:['Turn audits into', 'an export.'], aline:1,
    feats:[['Signed evidence packs','tamper-evident, per tenant'],['Mapped to','NIS2, ISO 27001, CIS'],['Every pack','cryptographically verifiable']],
    foot:'Built for the CISO, not just the dashboard' },
  { file:'monsys-post-2-ai.png', kicker:'AI OBSERVABILITY',
    head:['See how AI is', 'really used.'], aline:1,
    feats:[['Audit-grade visibility','into LLM and AI tooling'],['Per-app evidence','who, what, when'],['Cookieless','EU-hosted, no US SaaS']],
    foot:'Governance for the AI you already run' },
  { file:'monsys-post-3-sovereignty.png', kicker:'EU SOVEREIGNTY',
    head:['Your data stays', 'in Europe.'], aline:1,
    feats:[['Hosted in Belgium','by GoTrust BV'],['No US SaaS','on the critical path'],['NIS2-ready','by design, not bolt-on']],
    foot:'Sovereignty first, from auth to audit' },
  { file:'monsys-post-4-pricing.png', kicker:'SIMPLE PRICING',
    head:['Start free.', 'Scale cheap.'], aline:1,
    feats:[['5 servers','free forever'],['3 euro','per server per month, from #6'],['No games','no per-metric billing']],
    foot:'One command to install. Cancel anytime' },
  { file:'monsys-post-5-patch.png', kicker:'LIVE, SIGNED, PROVABLE',
    head:['Patches you', 'can prove.'], aline:1,
    feats:[['Signed emergency tokens','Ed25519, short-lived'],['Always','human-approved'],['Full','tamper-evident audit trail']],
    foot:'The agent never holds standing root' },
  { file:'monsys-post-6-oneagent.png', kicker:'ONE AGENT, ONE HUB',
    head:['Less stack.', 'More signal.'], aline:1,
    feats:[['One agent','for Linux and Windows'],['Metrics, CVEs, inventory','processes, topology'],['A lighter','Datadog and Zabbix']],
    foot:'Everything in one EU-hosted place' },
];

function render(p){
  const feats = p.feats.map(f=>`<div class="feat"><span class="sq"></span><b>${f[0]}</b>&nbsp;<span>${f[1]}</span></div>`).join('');
  const head = p.head.map((h,i)=> i===p.aline ? `<span class="a">${h}</span>` : h).join('<br>');
  return `<!doctype html><html><head><meta charset="utf-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  <style>${CSS}</style></head><body>
  <div class="card"><div class="grid"></div><div class="frame"></div>
  <span class="px p1"></span><span class="px p2"></span><span class="px p3"></span><span class="px p4"></span>
  <div class="wrap">
    <div class="kicker"><span class="sq"></span>${p.kicker}</div>
    <div class="head">${head}</div>
    <div class="feats">${feats}</div>
    <div class="spacer"></div>
    <div class="foot"><div class="brandrow">${MARK}<div class="wm">monsys<span class="dot">.ai</span></div></div>
    <div class="free">${p.foot}</div></div>
  </div>
  <div class="accentline"></div></div></body></html>`;
}

const b = await chromium.launch();
const page = await b.newPage({ viewport:{width:1200,height:1200}, deviceScaleFactor:2 });
for(const p of posts){
  await page.setContent(render(p), { waitUntil:'load' });
  await page.evaluate(()=>document.fonts.ready);
  await page.waitForTimeout(400);
  await page.screenshot({ path:'/home/user/monsys-brand/'+p.file, clip:{x:0,y:0,width:1200,height:1200} });
  console.log('rendered', p.file);
}
await b.close();
