<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Membership Certificate</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 210mm;
            height: 148mm;
            font-family: DejaVu Sans, Arial, sans-serif;
            background: #ffffff;
            color: #1a1a2e;
        }

        .certificate {
            width: 100%;
            height: 148mm;
            padding: 8mm 12mm;
            border: 3px solid #1a3a5c;
            position: relative;
            background: #ffffff;
        }

        .certificate-inner {
            width: 100%;
            height: 100%;
            border: 1px solid #c9a84c;
            padding: 6mm 10mm;
            display: block;
        }

        .header {
            text-align: center;
            margin-bottom: 4mm;
        }

        .logo {
            max-height: 40px;
            max-width: 120px;
            display: block;
            margin: 0 auto 3mm auto;
        }

        .title {
            font-size: 16pt;
            font-weight: bold;
            color: #1a3a5c;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 1mm;
        }

        .subtitle {
            font-size: 7pt;
            color: #666666;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .divider {
            border: none;
            border-top: 1px solid #c9a84c;
            margin: 3mm 0;
        }

        .certify-text {
            text-align: center;
            font-size: 8pt;
            color: #555555;
            margin-bottom: 2mm;
        }

        .member-name {
            text-align: center;
            font-size: 18pt;
            font-weight: bold;
            color: #1a3a5c;
            margin-bottom: 2mm;
            font-style: italic;
        }

        .body-text {
            text-align: center;
            font-size: 8pt;
            color: #333333;
            line-height: 1.5;
            margin-bottom: 1mm;
        }

        .category-text {
            text-align: center;
            font-size: 8pt;
            color: #555555;
            margin-bottom: 3mm;
        }

        .footer {
            margin-top: 3mm;
        }

        .footer-info {
            border-top: 1px solid #c9a84c;
            padding-top: 2mm;
            margin-bottom: 3mm;
        }

        .footer-info table {
            width: 100%;
        }

        .footer-info td {
            font-size: 7pt;
            color: #444444;
        }

        .footer-info td.right {
            text-align: right;
        }

        .signatures {
            width: 100%;
        }

        .signatures table {
            width: 100%;
        }

        .sig-cell {
            width: 45%;
            text-align: center;
            font-size: 7pt;
            color: #333333;
        }

        .sig-line {
            border-top: 1px solid #333333;
            margin: 0 auto 1mm auto;
            width: 80%;
        }

        .sig-title {
            font-weight: bold;
            font-size: 7pt;
            color: #1a3a5c;
        }
    </style>
</head>
<body>
<div class="certificate">
    <div class="certificate-inner">

        {{-- Header --}}
        <div class="header">
            @if($logoBase64)
                <img src="{{ $logoBase64 }}" class="logo" alt="Logo">
            @endif
            <div class="title">Membership Certificate</div>
            <div class="subtitle">{{ $organizationName }}</div>
        </div>

        <hr class="divider">

        {{-- Body --}}
        <div class="certify-text">This is to certify that:</div>

        <div class="member-name">{{ $memberName }}</div>

        <div class="body-text">
            is recognized as a member of <strong>{{ $organizationName }}</strong> with all rights and privileges<br>
            valid for one year starting from <strong>{{ $startDate }}</strong>
        </div>

        @if($categoryName)
            <div class="category-text">Membership Category: <strong>{{ $categoryName }}</strong></div>
        @endif

        {{-- Footer --}}
        <div class="footer">
            <div class="footer-info">
                <table>
                    <tr>
                        <td>Certificate No: <strong>{{ $certificateNumber }}</strong></td>
                        <td class="right">Valid Till: <strong>{{ $validTillDate }}</strong></td>
                    </tr>
                </table>
            </div>

            <div class="signatures">
                <table>
                    <tr>
                        <td class="sig-cell">
                            <div class="sig-line"></div>
                            <div class="sig-title">SSHIA Secretary</div>
                        </td>
                        <td style="width:10%"></td>
                        <td class="sig-cell">
                            <div class="sig-line"></div>
                            <div class="sig-title">SSHIA President</div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

    </div>
</div>
</body>
</html>
