<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body{font-family:Arial,sans-serif;background:#f4f6fb;margin:0;padding:30px 0;}
    .wrap{max-width:520px;margin:0 auto;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.08);}
    .header{background:linear-gradient(135deg,#4f8ef7,#7c3aed);padding:28px 32px;text-align:center;}
    .header h1{color:#fff;font-size:22px;margin:0;}
    .header p{color:rgba(255,255,255,0.75);font-size:12px;margin:4px 0 0;}
    .body{padding:32px;color:#374151;}
    .body p{font-size:14px;line-height:1.7;margin:0 0 16px;}
    .ticket{background:linear-gradient(135deg,#0f1729,#162040);color:#fff;border-radius:12px;padding:24px;margin:20px 0;position:relative;}
    .ticket-title{font-size:11px;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
    .ticket-event{font-size:20px;font-weight:700;margin-bottom:16px;}
    .ticket-row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:13px;}
    .ticket-label{color:rgba(255,255,255,0.6);}
    .ticket-value{font-weight:600;}
    .ticket-number{text-align:center;background:rgba(79,142,247,0.2);border:1px solid rgba(79,142,247,0.4);border-radius:8px;padding:12px;margin-top:16px;}
    .ticket-number .tn-label{font-size:10px;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:1px;}
    .ticket-number .tn-value{font-size:18px;font-weight:700;color:#7eb8ff;letter-spacing:2px;font-family:monospace;}
    .badge{background:#d1fae5;color:#065f46;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;display:inline-block;margin-bottom:16px;}
    .footer{text-align:center;padding:16px 32px 24px;font-size:11px;color:#9ca3af;}
  </style>
</head>
<body>
<div class="wrap">
  <div class="header">
    <h1>🎓 ECA</h1>
    <p>Education Consultancy Association</p>
  </div>

  <div class="body">
    <p>Hi <b>{{ $memberName }}</b>,</p>
    <div class="badge">🎫 Ticket Confirmed!</div>
    <p>Your payment was successful and your event
       ticket has been confirmed!</p>

    {{-- TICKET CARD --}}
    <div class="ticket">
      <div class="ticket-title">Event Ticket</div>
      <div class="ticket-event">{{ $eventTitle }}</div>

      <div class="ticket-row">
        <span class="ticket-label">📅 Date</span>
        <span class="ticket-value">{{ $eventDate }}</span>
      </div>
      <div class="ticket-row">
        <span class="ticket-label">⏰ Time</span>
        <span class="ticket-value">{{ $eventTime }}</span>
      </div>
      <div class="ticket-row">
        <span class="ticket-label">📍 Location</span>
        <span class="ticket-value">{{ $location }}</span>
      </div>
      <div class="ticket-row">
        <span class="ticket-label">💳 Amount Paid</span>
        <span class="ticket-value">₹{{ $amount }}</span>
      </div>

      <div class="ticket-number">
        <div class="tn-label">Your Ticket Number</div>
        <div class="tn-value">{{ $ticketNumber }}</div>
      </div>
    </div>

    <p style="font-size:13px;color:#6b7280;">
      Please show this ticket number at the event entrance.
      Keep this email for your records.
    </p>
  </div>

  <div class="footer">
    &copy; {{ date('Y') }} ECA — Education Consultancy Association
  </div>
</div>
</body>
</html>