<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Certificate of Completion</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            background: #fff;
        }

        .certificate-page {
            width: 100%;
            height: 100%;
            @if($orientation === 'landscape')
            width: 297mm;
            min-height: 210mm;
            @else
            width: 210mm;
            min-height: 297mm;
            @endif
            padding: 15mm;
            background: linear-gradient(135deg, #fffef5 0%, #fff9e6 100%);
            position: relative;
            overflow: hidden;
        }

        /* Decorative Background Pattern */
        .certificate-page::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }

        /* Main Border */
        .outer-border {
            border: 3px solid #d4a853;
            height: 100%;
            position: relative;
        }

        .inner-border {
            border: 2px solid #f59e0b;
            margin: 4mm;
            height: calc(100% - 8mm);
            position: relative;
        }

        .decorative-border {
            border: 1px solid #fcd34d;
            margin: 3mm;
            height: calc(100% - 6mm);
            padding: 10mm;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* Corner Decorations */
        .corner-decoration {
            position: absolute;
            width: 20mm;
            height: 20mm;
            border: 2px solid #f59e0b;
        }

        .corner-decoration.top-left {
            top: 0;
            left: 0;
            border-right: none;
            border-bottom: none;
        }

        .corner-decoration.top-right {
            top: 0;
            right: 0;
            border-left: none;
            border-bottom: none;
        }

        .corner-decoration.bottom-left {
            bottom: 0;
            left: 0;
            border-right: none;
            border-top: none;
        }

        .corner-decoration.bottom-right {
            bottom: 0;
            right: 0;
            border-left: none;
            border-top: none;
        }

        /* Header Section */
        .header {
            text-align: center;
            margin-bottom: 8mm;
        }

        .logo-container {
            margin-bottom: 5mm;
        }

        .logo-placeholder {
            width: 25mm;
            height: 25mm;
            margin: 0 auto;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .organization-name {
            font-size: 14pt;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 3mm;
            margin-bottom: 3mm;
        }

        .certificate-title {
            font-family: 'Playfair Display', serif;
            font-size: 36pt;
            font-weight: 700;
            color: #d97706;
            text-transform: uppercase;
            letter-spacing: 8mm;
            margin-bottom: 2mm;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        .certificate-subtitle {
            font-size: 12pt;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 2mm;
        }

        /* Body Section */
        .body {
            text-align: center;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .intro-text {
            font-size: 11pt;
            color: #4b5563;
            margin-bottom: 5mm;
        }

        .recipient-name {
            font-family: 'Playfair Display', serif;
            font-size: 28pt;
            font-weight: 600;
            color: #1f2937;
            margin: 5mm 0;
            padding-bottom: 3mm;
            border-bottom: 2px solid #f59e0b;
            display: inline-block;
        }

        .achievement-text {
            font-size: 11pt;
            color: #4b5563;
            margin-top: 5mm;
        }

        .programme-name {
            font-family: 'Playfair Display', serif;
            font-size: 20pt;
            font-weight: 600;
            color: #d97706;
            margin: 5mm 0;
        }

        .mentor-text {
            font-size: 11pt;
            color: #4b5563;
            margin-top: 3mm;
        }

        .mentor-name {
            font-weight: 600;
            color: #374151;
        }

        .description {
            font-size: 9pt;
            color: #6b7280;
            max-width: 80%;
            margin: 8mm auto 0;
            line-height: 1.6;
            font-style: italic;
        }

        /* Footer Section */
        .footer {
            margin-top: 10mm;
        }

        .signatures {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8mm;
        }

        .signature-block {
            text-align: center;
            width: 45%;
        }

        .signature-line {
            border-top: 1px solid #d1d5db;
            padding-top: 3mm;
            margin-bottom: 2mm;
        }

        .signature-name {
            font-size: 10pt;
            font-weight: 600;
            color: #374151;
        }

        .signature-title {
            font-size: 8pt;
            color: #6b7280;
        }

        .certificate-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 5mm;
            border-top: 1px solid #e5e7eb;
        }

        .info-item {
            text-align: center;
        }

        .info-label {
            font-size: 7pt;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 1mm;
        }

        .info-value {
            font-size: 9pt;
            font-weight: 600;
            color: #374151;
            margin-top: 1mm;
        }

        .verification-code {
            font-family: 'Courier New', monospace;
            font-size: 8pt;
            color: #6b7280;
        }

        /* Seal */
        .seal {
            width: 20mm;
            height: 20mm;
            border: 2px solid #f59e0b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            background: radial-gradient(circle, #fffbeb 0%, #fef3c7 100%);
        }

        .seal-inner {
            width: 16mm;
            height: 16mm;
            border: 1px solid #f59e0b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .seal-text {
            font-size: 5pt;
            color: #d97706;
            text-align: center;
            font-weight: 600;
            text-transform: uppercase;
        }

        /* Skills Section */
        .skills-section {
            margin-top: 5mm;
            text-align: center;
        }

        .skills-label {
            font-size: 8pt;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 1mm;
            margin-bottom: 2mm;
        }

        .skills-list {
            font-size: 9pt;
            color: #374151;
        }
    </style>
</head>
<body>
    <div class="certificate-page">
        <div class="outer-border">
            <div class="inner-border">
                <div class="decorative-border">
                    {{-- Corner Decorations --}}
                    <div class="corner-decoration top-left"></div>
                    <div class="corner-decoration top-right"></div>
                    <div class="corner-decoration bottom-left"></div>
                    <div class="corner-decoration bottom-right"></div>

                    {{-- Header --}}
                    <div class="header">
                        <div class="logo-container">
                            <div class="logo-placeholder">
                                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="white"/>
                                </svg>
                            </div>
                        </div>
                        <p class="organization-name">{{ $certificate->organization_name ?? config('app.name') }}</p>
                        <h1 class="certificate-title">Certificate</h1>
                        <p class="certificate-subtitle">of Completion</p>
                    </div>

                    {{-- Body --}}
                    <div class="body">
                        <p class="intro-text">This is to certify that</p>
                        <h2 class="recipient-name">{{ $certificate->recipient_name }}</h2>
                        <p class="achievement-text">has successfully completed the mentorship programme</p>
                        <h3 class="programme-name">{{ $certificate->programme_name }}</h3>
                        @if($certificate->mentor_name)
                        <p class="mentor-text">under the guidance of <span class="mentor-name">{{ $certificate->mentor_name }}</span></p>
                        @endif
                        @if($certificate->description)
                        <p class="description">{{ $certificate->description }}</p>
                        @endif
                        @if($certificate->skills_acquired && count($certificate->skills_acquired) > 0)
                        <div class="skills-section">
                            <p class="skills-label">Skills Acquired</p>
                            <p class="skills-list">{{ implode(' • ', $certificate->skills_acquired) }}</p>
                        </div>
                        @endif
                    </div>

                    {{-- Footer --}}
                    <div class="footer">
                        <div class="signatures">
                            <div class="signature-block">
                                <div class="signature-line"></div>
                                <p class="signature-name">{{ $certificate->signatory_name ?? 'Program Director' }}</p>
                                <p class="signature-title">{{ $certificate->signatory_title ?? 'Program Director' }}</p>
                            </div>
                            <div class="seal">
                                <div class="seal-inner">
                                    <span class="seal-text">Official<br>Seal</span>
                                </div>
                            </div>
                            @if($certificate->mentor_name)
                            <div class="signature-block">
                                <div class="signature-line"></div>
                                <p class="signature-name">{{ $certificate->mentor_name }}</p>
                                <p class="signature-title">Mentor</p>
                            </div>
                            @else
                            <div class="signature-block">
                                <div class="seal">
                                    <div class="seal-inner">
                                        <span class="seal-text">Verified</span>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>

                        <div class="certificate-info">
                            <div class="info-item">
                                <p class="info-label">Certificate Number</p>
                                <p class="info-value">{{ $certificate->certificate_number }}</p>
                            </div>
                            <div class="info-item">
                                <p class="info-label">Issue Date</p>
                                <p class="info-value">{{ \Carbon\Carbon::parse($certificate->issue_date)->format('F d, Y') }}</p>
                            </div>
                            <div class="info-item">
                                <p class="info-label">Completion Date</p>
                                <p class="info-value">{{ \Carbon\Carbon::parse($certificate->completion_date)->format('F d, Y') }}</p>
                            </div>
                            <div class="info-item">
                                <p class="info-label">Verification Code</p>
                                <p class="info-value verification-code">{{ $certificate->verification_code }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
