/* ------------------------------------------------------------------ *
 * YeetPDF landing page — pure markup + palette maths.
 *
 * Everything here is browser-free: `pageHtml()` returns a plain HTML
 * string and touches no `document`/`window`. That's deliberate — it lets
 * the Vite build call `pageHtml()` to prerender the landing page into
 * dist/index.html (see the prerender plugin in vite.config.ts) so crawlers
 * get real HTML instead of an empty SPA shell. The interactive bits
 * (mounting, click-wiring, the dot-matrix canvas) live in landing.ts.
 *
 * Layout, colours, dot-matrix effect and structure adapted from the
 * Folio reference design; content is YeetPDF's.
 * ------------------------------------------------------------------ */

const YEAR = new Date().getFullYear();

/* ---- accent palette (mirrors the reference's colour maths) -------- */
const ACCENT = '#FFD400';

function hexToRgb(hex: string): [number, number, number] {
  const h = hex.replace('#', '');
  const n = h.length === 3 ? h.split('').map((c) => c + c).join('') : h;
  return [parseInt(n.slice(0, 2), 16), parseInt(n.slice(2, 4), 16), parseInt(n.slice(4, 6), 16)];
}
function toHex(r: number, g: number, b: number): string {
  return '#' + [r, g, b].map((v) => Math.round(v).toString(16).padStart(2, '0')).join('');
}
function mix(hex: string, pct: number): string {
  const [r, g, b] = hexToRgb(hex);
  return toHex(r + (255 - r) * pct, g + (255 - g) * pct, b + (255 - b) * pct);
}
function darken(hex: string, pct: number): string {
  const [r, g, b] = hexToRgb(hex);
  return toHex(r * (1 - pct), g * (1 - pct), b * (1 - pct));
}

const accent = ACCENT;
const accentSoft = mix(accent, 0.82);
const accentLine = mix(accent, 0.5);
const accentDeep = darken(accent, 0.42);

/** Accent as an [r,g,b] triple — consumed by the dot-matrix canvas in landing.ts. */
export const accentRgb = hexToRgb(accent);

/** Brand wordmark — "Yeet" in the accent yellow, "PDF" in near-black. */
const wm = `<span class="wm"><span class="wm-yeet">Yeet</span><span class="wm-pdf">PDF</span></span>`;

/* Small subset of the real toolbar's icon glyphs (mirrors src/ui/icons.ts),
 * inlined here since the hero mockup is a raw HTML string, not DOM built via
 * the shared h()/icon() helpers — used to make the product-window preview's
 * tool rail read as our actual tools rather than generic placeholder boxes. */
const MOCK_PATHS: Record<string, string> = {
  cursor: '<path d="M4 3l7 17 2.5-6.5L20 11 4 3z"/>',
  text: '<path d="M5 5h14M12 5v14M8 19h8"/>',
  pen: '<path d="M4 20l4-1 10-10-3-3L5 16l-1 4z"/><path d="M14 6l3 3"/>',
  rect: '<rect x="4" y="6" width="16" height="12" rx="1.5"/>',
  ellipse: '<ellipse cx="12" cy="12" rx="8" ry="6"/>',
  highlight: '<path d="M4 20h6"/><path d="M13 4l7 7-8 8H6l-2-2 9-9z"/>',
  note: '<path d="M20 4H4v13h4v3l4-3h8z"/>',
  signature: '<path d="M3 18c3 0 3-9 6-9s2 6 4 6 3-8 8-8"/><path d="M3 21h18"/>',
};
function mi(key: string, size = 14, color = '#605A50'): string {
  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${MOCK_PATHS[key]}</svg>`;
}

/* ---- markup ------------------------------------------------------- */

export function pageHtml(): string {
  return `
  <input type="file" id="lp-file" accept="application/pdf,.pdf" style="display:none;" />

  <!-- ===================== NAV ===================== -->
  <div style="position:sticky; top:0; z-index:20; background:rgba(252,252,251,0.82); backdrop-filter:blur(10px); border-bottom:1px solid #EDECE8;">
    <div class="f-nav" style="max-width:1200px; margin:0 auto; height:66px; display:flex; align-items:center; gap:28px; padding:0 28px;">
      <a href="#" style="display:flex; align-items:center; gap:9px;">
        <img src="/favicon.svg" alt="YeetPDF logo" width="30" height="30" style="width:30px; height:30px; flex:none;" />
        <span class="brand-wm" style="font-size:21px;">${wm}</span>
      </a>
      <div style="flex:1;"></div>
      <div class="f-navlinks" style="display:flex; align-items:center; gap:26px; font-size:14.5px; color:#5C564D; font-weight:500;">
        <a href="#features" style="color:inherit;">Features</a>
        <a href="#privacy" style="color:inherit;">Privacy</a>
        <a href="#how" style="color:inherit;">How it works</a>
      </div>
      <a class="f-navlinks" href="https://buymeacoffee.com/formulational" target="_blank" rel="noopener noreferrer" style="display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:9px; background:${accentSoft}; border:1px solid ${accentLine}; color:${accentDeep}; font-weight:600; font-size:13.5px;">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h13v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V8z"></path><path d="M17 9h1.5a2.5 2.5 0 0 1 0 5H17"></path><path d="M8 3c0 1-1 1-1 2M12 3c0 1-1 1-1 2"></path></svg>
        Support this project
      </a>
      <div class="f-navlinks" style="width:1px; height:22px; background:#E7E6E1;"></div>
      <a href="#" data-open-editor style="display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:9px; background:${accent}; color:#241F13; font-weight:600; font-size:14px; box-shadow:0 1px 1px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.05);">
        Open editor
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
      </a>
    </div>
  </div>

  <!-- ===================== HERO ===================== -->
  <div style="position:relative; overflow:hidden;">
    <canvas data-dots style="position:absolute; inset:0; width:100%; height:100%; pointer-events:none;"></canvas>
    <div style="position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 34%, rgba(252,252,251,0.72) 0%, rgba(252,252,251,0.15) 55%, rgba(252,252,251,0) 100%); pointer-events:none;"></div>

    <div class="f-hero" style="position:relative; max-width:1000px; margin:0 auto; padding:88px 28px 52px; text-align:center;">
      <div style="display:inline-flex; align-items:center; gap:9px; height:32px; padding:0 14px 0 10px; border-radius:100px; background:#FFFFFF; border:1px solid #EAE9E4; box-shadow:0 1px 2px rgba(20,18,12,0.05); font-size:13px; font-weight:500; color:#5C564D; margin-bottom:30px;">
        <span style="width:7px; height:7px; border-radius:50%; background:${accent}; box-shadow:0 0 0 3px ${accentSoft};"></span>
        No paywall or sign-in · Runs in your browser
      </div>
      <h1 class="f-h1" style="font-family:'Newsreader',serif; font-weight:700; font-size:72px; line-height:1.02; letter-spacing:-0.02em; margin:0 0 24px; color:#1D1914;">Edit any PDF for free.<br>No&nbsp;catches.</h1>
      <p style="max-width:600px; margin:0 auto 38px; font-size:19px; line-height:1.55; color:#5C564D;">YeetPDF is a full-power PDF editor that runs entirely in your browser. Edit, sign, merge, convert, redact and OCR — your files never leave your device.</p>
      <div style="display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:20px; flex-wrap:wrap;">
        <a href="#" data-open-file style="display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 22px; border-radius:11px; background:${accent}; color:#241F13; font-weight:600; font-size:16px; box-shadow:0 2px 6px rgba(214,178,0,0.28), inset 0 0 0 1px rgba(0,0,0,0.05);">
          Open a PDF
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
        </a>
        <a href="#how" style="display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 20px; border-radius:11px; background:#FFFFFF; color:#37352F; font-weight:600; font-size:16px; border:1px solid #E7E6E1; box-shadow:0 1px 2px rgba(20,18,12,0.04);">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"></path></svg>
          See how it works
        </a>
      </div>
      <div style="display:flex; align-items:center; justify-content:center; gap:20px; font-size:13.5px; color:#8A857B; font-weight:500; flex-wrap:wrap;">
        <span style="display:inline-flex; align-items:center; gap:6px;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="${accentDeep}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"></path></svg> Works offline</span>
        <span style="display:inline-flex; align-items:center; gap:6px;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="${accentDeep}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"></path></svg> No account needed</span>
        <span style="display:inline-flex; align-items:center; gap:6px;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="${accentDeep}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"></path></svg> Free &amp; open</span>
      </div>
    </div>

    <!-- product window — mirrors the real editor's chrome (menubar + tool
         rail + pages + canvas + properties), with skeleton placeholders
         standing in for anything that would otherwise be fake document text. -->
    <div class="f-window-wrap" style="position:relative; max-width:1120px; margin:0 auto; padding:0 28px 96px;">
      <div style="border-radius:16px; background:#FFFFFF; box-shadow:0 2px 4px rgba(20,18,12,0.05), 0 30px 70px -20px rgba(20,18,12,0.28); overflow:hidden; border:1px solid #EAE9E4;">
        <!-- browser chrome -->
        <div style="height:42px; display:flex; align-items:center; gap:14px; padding:0 16px; border-bottom:1px solid #EDECE8; background:#FBFBF9;">
          <div style="display:flex; gap:7px;">
            <span style="width:11px; height:11px; border-radius:50%; background:#F0EFEB;"></span>
            <span style="width:11px; height:11px; border-radius:50%; background:#F0EFEB;"></span>
            <span style="width:11px; height:11px; border-radius:50%; background:#F0EFEB;"></span>
          </div>
          <div style="flex:1; display:flex; justify-content:center;">
            <div style="display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 14px; border-radius:7px; background:#FFFFFF; border:1px solid #EAE9E4; font-size:12px; color:#8A857B;">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="${accentDeep}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="11" rx="2"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3"></path></svg>
              yeetpdf.com/editor
            </div>
          </div>
          <div style="width:56px;"></div>
        </div>
        <!-- editor menubar (UI chrome — real labels; nothing here is document content) -->
        <div style="height:38px; display:flex; align-items:center; gap:16px; padding:0 14px; border-bottom:1px solid #EDECE8; background:#FFFFFF; font-size:11px;">
          <img src="/favicon.svg" alt="" width="16" height="16" style="width:16px; height:16px; flex:none;" />
          <div style="display:flex; align-items:center; gap:13px; font-weight:500; color:#8A857B;">
            <span>File</span><span>Edit</span><span>View</span><span>Insert</span><span>Tools</span>
          </div>
          <div class="sk" style="width:88px; height:14px; border-radius:4px; margin-left:2px;"></div>
          <div style="flex:1;"></div>
          <div style="display:flex; align-items:center; gap:5px; color:#A6A29A; font-size:10.5px;">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 16.5A4.5 4.5 0 0 0 16 8a6 6 0 0 0-11.5 1.5A4 4 0 0 0 5 17"></path><path d="M9 13l2 2 4-4"></path></svg>
            Saved locally
          </div>
          <div style="height:22px; padding:0 11px; border-radius:6px; background:${accent}; color:#241F13; font-weight:700; font-size:10.5px; display:flex; align-items:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);">Export</div>
        </div>
        <!-- workspace: tool rail · pages · canvas · properties (same 4 regions as the real editor) -->
        <div class="f-miniedit" style="display:flex; height:432px; font-size:11px;">
          <!-- tool rail -->
          <div class="f-rail" style="width:112px; flex:0 0 112px; border-right:1px solid #EDECE8; background:#FCFCFB; padding:10px 8px; display:flex; flex-direction:column; gap:11px;">
            <div>
              <div style="font-size:8px; font-weight:700; letter-spacing:0.06em; color:#B6B2AB; text-transform:uppercase; padding-left:2px; margin-bottom:5px;">Basics</div>
              <div style="display:grid; grid-template-columns:1fr 1fr; gap:5px;">
                <div style="height:28px; border-radius:6px; background:${accent}; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);">${mi('cursor', 13, '#241F13')}</div>
                <div style="height:28px; border-radius:6px; background:#F2F1ED; display:flex; align-items:center; justify-content:center;">${mi('text', 13)}</div>
              </div>
            </div>
            <div>
              <div style="font-size:8px; font-weight:700; letter-spacing:0.06em; color:#B6B2AB; text-transform:uppercase; padding-left:2px; margin-bottom:5px;">Shapes</div>
              <div style="display:grid; grid-template-columns:1fr 1fr; gap:5px;">
                <div style="height:28px; border-radius:6px; background:#F2F1ED; display:flex; align-items:center; justify-content:center;">${mi('rect', 13)}</div>
                <div style="height:28px; border-radius:6px; background:#F2F1ED; display:flex; align-items:center; justify-content:center;">${mi('ellipse', 13)}</div>
              </div>
            </div>
            <div>
              <div style="font-size:8px; font-weight:700; letter-spacing:0.06em; color:#B6B2AB; text-transform:uppercase; padding-left:2px; margin-bottom:5px;">Markup</div>
              <div style="display:grid; grid-template-columns:1fr 1fr; gap:5px;">
                <div style="height:28px; border-radius:6px; background:#F2F1ED; display:flex; align-items:center; justify-content:center;">${mi('highlight', 13)}</div>
                <div style="height:28px; border-radius:6px; background:#F2F1ED; display:flex; align-items:center; justify-content:center;">${mi('note', 13)}</div>
              </div>
            </div>
            <div>
              <div style="font-size:8px; font-weight:700; letter-spacing:0.06em; color:#B6B2AB; text-transform:uppercase; padding-left:2px; margin-bottom:5px;">Insert</div>
              <div style="display:grid; grid-template-columns:1fr 1fr; gap:5px;">
                <div style="height:28px; border-radius:6px; background:#F2F1ED; display:flex; align-items:center; justify-content:center;">${mi('signature', 13)}</div>
                <div style="height:28px; border-radius:6px; background:#F2F1ED;"></div>
              </div>
            </div>
          </div>
          <!-- pages -->
          <div style="width:88px; flex:0 0 88px; border-right:1px solid #EDECE8; background:#FCFCFB; padding:10px 7px; display:flex; flex-direction:column; gap:9px; align-items:center;">
            <div style="width:100%; aspect-ratio:0.77; background:#FFFFFF; border-radius:5px; box-shadow:0 0 0 2px ${accent}, 0 4px 10px rgba(20,18,12,0.08); padding:8px;">
              <div class="sk" style="width:60%; height:5px; border-radius:2px; margin-bottom:6px;"></div>
              <div class="sk" style="width:100%; height:3px; border-radius:2px; margin-bottom:3px;"></div>
              <div class="sk" style="width:82%; height:3px; border-radius:2px;"></div>
            </div>
            <div style="width:100%; aspect-ratio:0.77; background:#FFFFFF; border-radius:5px; box-shadow:0 0 0 1px #E7E6E1;"></div>
            <div style="width:100%; aspect-ratio:0.77; background:#FFFFFF; border-radius:5px; box-shadow:0 0 0 1px #E7E6E1;"></div>
          </div>
          <!-- canvas -->
          <div style="flex:1; background:#F5F5F3; display:flex; flex-direction:column; min-width:0;">
            <div style="flex:1; overflow:hidden; padding:26px 30px; display:flex; justify-content:center;">
              <div style="width:100%; max-width:320px; background:#FFFFFF; border-radius:3px; box-shadow:0 10px 26px rgba(20,18,12,0.12); padding:26px 28px;">
                <div class="sk" style="width:72%; height:19px; border-radius:4px; margin-bottom:8px;"></div>
                <div class="sk" style="width:48%; height:19px; border-radius:4px; margin-bottom:18px;"></div>
                <div style="outline:1.5px solid ${accent}; outline-offset:6px; border-radius:1px; margin-bottom:20px; display:flex; flex-direction:column; gap:6px;">
                  <div class="sk" style="width:100%; height:7px; border-radius:2px;"></div>
                  <div class="sk" style="width:91%; height:7px; border-radius:2px;"></div>
                  <div class="sk" style="width:58%; height:7px; border-radius:2px;"></div>
                </div>
                <div style="display:flex; gap:10px;">
                  <div class="sk" style="width:26px; height:20px; border-radius:5px; flex:none;"></div>
                  <div style="flex:1; display:flex; flex-direction:column; gap:6px;">
                    <div class="sk" style="width:42%; height:9px; border-radius:2px;"></div>
                    <div class="sk" style="width:100%; height:6px; border-radius:2px;"></div>
                    <div class="sk" style="width:78%; height:6px; border-radius:2px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- properties -->
          <div class="f-inspector" style="width:150px; flex:0 0 150px; border-left:1px solid #EDECE8; background:#FFFFFF; padding:13px;">
            <div style="display:flex; align-items:center; gap:7px; margin-bottom:15px;"><span style="width:16px; height:16px; border-radius:4px; background:${accentSoft};"></span><span class="sk" style="width:34px; height:10px; border-radius:2px;"></span></div>
            <div style="font-size:8px; font-weight:700; letter-spacing:0.06em; color:#B6B2AB; margin-bottom:7px;">FONT</div>
            <div class="sk" style="width:100%; height:24px; border-radius:6px; margin-bottom:6px;"></div>
            <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:10px;">
              <div style="height:24px; border-radius:5px; background:${accentSoft}; box-shadow:inset 0 0 0 1px ${accentLine}; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; color:#8C6A00;">B</div>
              <div style="height:24px; border-radius:5px; background:#F7F7F5; box-shadow:inset 0 0 0 1px #ECEBE7; display:flex; align-items:center; justify-content:center; font-style:italic; font-size:11px; color:#605A50;">I</div>
              <div style="height:24px; border-radius:5px; background:#F7F7F5; box-shadow:inset 0 0 0 1px #ECEBE7;"></div>
              <div style="height:24px; border-radius:5px; background:#F7F7F5; box-shadow:inset 0 0 0 1px #ECEBE7;"></div>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:5px;">
              <div class="sk" style="height:24px; border-radius:5px;"></div>
              <div class="sk" style="height:24px; border-radius:5px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ===================== FEATURES ===================== -->
  <div id="features" class="f-section" style="max-width:1120px; margin:0 auto; padding:92px 28px 40px;">
    <div style="max-width:560px; margin-bottom:52px;">
      <div style="font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:${accentDeep}; margin-bottom:14px;">Everything, on-device</div>
      <p style="font-size:17px; color:#5C564D; margin:0;">YeetPDF treats a PDF the way a design tool treats a canvas — every element is selectable, editable, and yours.</p>
    </div>

    <div class="f-grid3" style="display:grid; grid-template-columns:repeat(3,1fr); gap:20px;">
      <div style="background:#FFFFFF; border:1px solid #EAE9E4; border-radius:16px; padding:26px; box-shadow:0 1px 2px rgba(20,18,12,0.04);">
        <div style="width:44px; height:44px; border-radius:11px; background:${accentSoft}; display:flex; align-items:center; justify-content:center; margin-bottom:18px;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#8C6A00" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 6V4h14v2"></path><path d="M12 4v16"></path><path d="M9 20h6"></path></svg>
        </div>
        <div style="font-family:'Newsreader',serif; font-weight:600; font-size:21px; margin-bottom:8px;">Edit text directly</div>
        <p style="font-size:14.5px; color:#5C564D; margin:0; line-height:1.55;">Retype paragraphs, swap fonts, recolor, and reflow — with the same font controls you already know.</p>
      </div>
      <div style="background:#FFFFFF; border:1px solid #EAE9E4; border-radius:16px; padding:26px; box-shadow:0 1px 2px rgba(20,18,12,0.04);">
        <div style="width:44px; height:44px; border-radius:11px; background:${accentSoft}; display:flex; align-items:center; justify-content:center; margin-bottom:18px;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#8C6A00" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17c2 .5 3-4 5-4s1 3 3 3 3-8 5-8 2 3 5 3"></path></svg>
        </div>
        <div style="font-family:'Newsreader',serif; font-weight:600; font-size:21px; margin-bottom:8px;">Sign &amp; fill forms</div>
        <p style="font-size:14.5px; color:#5C564D; margin:0; line-height:1.55;">Draw or type a signature, drop it anywhere, and complete form fields in a couple of clicks.</p>
      </div>
      <div style="background:#FFFFFF; border:1px solid #EAE9E4; border-radius:16px; padding:26px; box-shadow:0 1px 2px rgba(20,18,12,0.04);">
        <div style="width:44px; height:44px; border-radius:11px; background:${accentSoft}; display:flex; align-items:center; justify-content:center; margin-bottom:18px;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#8C6A00" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="8" height="8" rx="1.5"></rect><circle cx="16.5" cy="15.5" r="4.5"></circle></svg>
        </div>
        <div style="font-family:'Newsreader',serif; font-weight:600; font-size:21px; margin-bottom:8px;">Shapes &amp; images</div>
        <p style="font-size:14.5px; color:#5C564D; margin:0; line-height:1.55;">Add redaction boxes, highlights, logos, and stamps with pixel-precise placement and snapping.</p>
      </div>
    </div>

    <div class="f-plus" style="margin-top:26px; display:inline-flex; align-items:center; gap:10px; font-size:15px; color:#5C564D; font-weight:500;">
      <span style="width:7px; height:7px; border-radius:50%; background:${accent}; box-shadow:0 0 0 3px ${accentSoft};"></span>
      Plus split, merge, convert, OCR, compress, and more.
    </div>
  </div>

  <!-- ===================== PRIVACY / DOT STATEMENT ===================== -->
  <div id="privacy" style="position:relative; margin:72px 0 0; overflow:hidden; background:#1D1914;">
    <canvas data-dots data-dark style="position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none;"></canvas>
    <div style="position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 60% 62% at 50% 50%, rgba(29,25,20,0.94) 0%, rgba(29,25,20,0.6) 46%, rgba(29,25,20,0) 100%); pointer-events:none;"></div>
    <div class="f-priv" style="position:relative; z-index:2; max-width:900px; margin:0 auto; padding:104px 28px; text-align:center;">
      <div style="display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; border-radius:100px; border:1px solid rgba(255,255,255,0.16); font-size:13px; font-weight:500; color:#D8D4CB; margin-bottom:28px;">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="${accent}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="11" rx="2"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3"></path></svg>
        Private by design
      </div>
      <h2 class="f-h2-priv" style="font-family:'Newsreader',serif; font-weight:700; font-size:52px; line-height:1.06; letter-spacing:-0.02em; margin:0 0 22px; color:#FBFBF9;">Your documents never<br>leave your&nbsp;machine.</h2>
      <p style="max-width:560px; margin:0 auto; font-size:18px; line-height:1.6; color:#B4AFA5;">There is no server upload, because there is no server. Every operation is done on your device so confidential documents stay confidential.</p>
    </div>
  </div>

  <!-- ===================== HOW IT WORKS ===================== -->
  <div id="how" class="f-section" style="max-width:1120px; margin:0 auto; padding:96px 28px 40px;">
    <div style="text-align:center; max-width:560px; margin:0 auto 60px;">
      <div style="font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:${accentDeep}; margin-bottom:14px;">How it works</div>
      <h2 style="font-family:'Newsreader',serif; font-weight:700; font-size:44px; line-height:1.08; letter-spacing:-0.015em; margin:0;">Three steps, zero waiting.</h2>
    </div>
    <div class="f-grid3" style="display:grid; grid-template-columns:repeat(3,1fr); gap:24px;">
      <div>
        <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;"><div style="width:34px; height:34px; border-radius:9px; background:${accent}; color:#241F13; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Newsreader',serif;">1</div><div style="flex:1; height:1px; background:#EDECE8;"></div></div>
        <div style="font-family:'Newsreader',serif; font-weight:600; font-size:22px; margin-bottom:8px;">Drop in a PDF</div>
        <p style="font-size:15px; color:#5C564D; margin:0; line-height:1.55;">Drag a file in or open one from your device. Nothing uploads anywhere.</p>
      </div>
      <div>
        <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;"><div style="width:34px; height:34px; border-radius:9px; background:${accent}; color:#241F13; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Newsreader',serif;">2</div><div style="flex:1; height:1px; background:#EDECE8;"></div></div>
        <div style="font-family:'Newsreader',serif; font-weight:600; font-size:22px; margin-bottom:8px;">Edit everything</div>
        <p style="font-size:15px; color:#5C564D; margin:0; line-height:1.55;">Text, pages, signatures, forms and markup - all in a single canvas.</p>
      </div>
      <div>
        <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;"><div style="width:34px; height:34px; border-radius:9px; background:${accent}; color:#241F13; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Newsreader',serif;">3</div><div style="flex:1; height:1px; background:#EDECE8;"></div></div>
        <div style="font-family:'Newsreader',serif; font-weight:600; font-size:22px; margin-bottom:8px;">Save it back</div>
        <p style="font-size:15px; color:#5C564D; margin:0; line-height:1.55;">Export instantly. The original never left your machine to begin with.</p>
      </div>
    </div>
  </div>

  <!-- ===================== CTA ===================== -->
  <div style="max-width:1120px; margin:64px auto 0; padding:0 28px 96px;">
    <div class="f-cta" style="position:relative; overflow:hidden; border-radius:22px; background:${accent}; padding:72px 40px; text-align:center; box-shadow:0 20px 50px -18px rgba(214,178,0,0.5);">
      <canvas data-dots data-cta style="position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0.55;"></canvas>
      <div style="position:relative;">
        <h2 class="f-h2-cta" style="font-family:'Newsreader',serif; font-weight:700; font-size:50px; line-height:1.05; letter-spacing:-0.02em; margin:0 0 16px; color:#241F13;">Open a PDF. Start editing.</h2>
        <p style="max-width:480px; margin:0 auto 32px; font-size:18px; color:#4A4230;">No sign-up, no upload, no waiting. Just your document and a proper editor.</p>
        <a href="#" data-open-editor style="display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 26px; border-radius:12px; background:#211D18; color:#FBFBF9; font-weight:600; font-size:17px; box-shadow:0 6px 18px rgba(33,29,24,0.28);">
          Launch the editor
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- ===================== FOOTER ===================== -->
  <div style="border-top:1px solid #EDECE8; background:#FBFBF9;">
    <div style="max-width:1120px; margin:0 auto; padding:44px 28px; display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap;">
      <div style="max-width:280px;">
        <div style="display:flex; align-items:center; gap:9px; margin-bottom:12px;">
          <img src="/favicon.svg" alt="YeetPDF logo" width="26" height="26" style="width:26px; height:26px; flex:none;" />
          <span class="brand-wm" style="font-size:19px;">${wm}</span>
        </div>
        <p style="font-size:13.5px; color:#8A857B; margin:0; line-height:1.55;">Yeet PDF is a client-side PDF editor. Your files stay on your device, always.</p>
      </div>
      <div style="display:flex; gap:56px; flex-wrap:wrap;">
        <div style="display:flex; flex-direction:column; gap:10px; font-size:13.5px;">
          <span style="font-weight:700; color:#37352F; margin-bottom:2px;">Product</span>
          <a href="#features" style="color:#8A857B;">Features</a>
          <a href="#privacy" style="color:#8A857B;">Privacy</a>
          <a href="#" data-open-editor style="color:#8A857B;">Editor</a>
        </div>
        <div style="display:flex; flex-direction:column; gap:10px; font-size:13.5px;">
          <span style="font-weight:700; color:#37352F; margin-bottom:2px;">Legal</span>
          <a href="#/privacy" style="color:#8A857B;">Privacy Policy</a>
          <a href="#/terms" style="color:#8A857B;">Terms</a>
        </div>
        <div style="display:flex; flex-direction:column; gap:10px; font-size:13.5px;">
          <span style="font-weight:700; color:#37352F; margin-bottom:2px;">More</span>
          <a href="/yeetpdf-source.zip" style="color:#8A857B;">Source</a>
          <a href="mailto:hello@yeetpdf.com" style="color:#8A857B;">Contact</a>
        </div>
      </div>
    </div>
    <div style="max-width:1120px; margin:0 auto; padding:0 28px 40px; font-size:12.5px; color:#B6B2AB;">© ${YEAR} ${wm}. Runs entirely in your browser.</div>
  </div>
  `;
}
