<!doctype html>
<html
  lang="en"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:o="urn:schemas-microsoft-com:office:office"
>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="x-apple-disable-message-reformatting" />
    <!--[if mso]>
      <noscript
        ><xml
          ><o:OfficeDocumentSettings
            ><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings
          ></xml
        ></noscript
      >
    <![endif]-->
    <title>{{ page.title || 'sexy' }}</title>

    <!-- Noto Sans — progressive enhancement for clients that support web fonts -->
    <style plain>
      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&display=swap");
    </style>

    <!-- Design tokens + Tailwind preset — path resolved by render.ts -->
    <link rel="stylesheet" href="{{ cssPath }}" inline />
  </head>
  <body class="bg-background m-0 p-0 font-sans">
    <!-- Preview text (hidden) -->
    <if condition="page.previewText || previewText">
      <div class="hidden max-h-0 overflow-hidden">
        {{ page.previewText || previewText }}
        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
      </div>
    </if>

    <div class="py-8 px-4">
      <table
        class="w-full max-w-[600px] mx-auto"
        role="presentation"
        cellpadding="0"
        cellspacing="0"
        border="0"
      >
        <!-- Brand header — uses --foreground as dark bg -->
        <tr>
          <td class="bg-foreground rounded-t-2xl px-8 py-6 text-center">
            <a href="{{ baseUrl }}" style="text-decoration: none">
              <span class="text-sm font-semibold tracking-[0.22em] uppercase text-background">
                sexy<span class="text-primary">.</span>pivoine<span class="text-primary">.</span>art
              </span>
            </a>
          </td>
        </tr>

        <!-- Card body -->
        <tr>
          <td class="bg-card px-8 py-10 text-[14px] text-card-foreground leading-relaxed">
            <yield />
          </td>
        </tr>

        <!-- Footer -->
        <tr>
          <td class="bg-muted border-t border-border rounded-b-2xl px-8 py-6 text-center">
            <p class="text-[11px] text-muted-foreground m-0">
              &copy; {{ new Date().getFullYear() }} sexy &mdash; For adults only (18+)
            </p>
            <p class="text-[11px] text-muted-foreground mt-2 mb-0">
              If you did not request this email, you can safely ignore it.
            </p>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
