---
import data from '../data/gift.json';
const { couple, heading, message, signature, giftCards, payment } = data;

import { Image } from 'astro:assets';
import birds from '../assets/birds.webp';
---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{couple.name1} & {couple.name2}</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Poppins:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet" />

<style>
  :root {
    --ivory:        #fffdf9;
    --ivory-deep:   #f9f5ef;
    --white:        #ffffff;
    --white-warm:   #fefcfa;
    --cream:        #f4ede3;
    --gold:         #c9a96e;
    --gold-light:   #e8d5b0;
    --gold-faint:   #f0e6cf;
    --text:         #2c2420;
    --text-muted:   #7a6e67;
    --text-faint:   #b8aea7;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background-color: var(--ivory);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    min-height: 100vh;
    overflow-x: hidden;
    background-image: url('/images/wedding-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  .wc-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  .wc-bg svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .page {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px 60px;
  }

  .hero {
    text-align: center;
    padding: 64px 0 48px;
    animation: fadeUp 0.9s ease both;
  }

  .hero-date {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 20px;
  }

  .hero-names {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2.6rem, 12vw, 3.6rem);
    line-height: 1.05;
    color: var(--text);
    margin-bottom: 6px;
  }

  .hero-names .amp {
    font-style: italic;
    color: var(--gold);
    font-size: 0.85em;
  }

  .hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px 0;
  }

  .hero-divider-line {
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold));
  }

  .hero-divider-line.right {
    background: linear-gradient(to left, transparent, var(--gold));
  }

  .hero-divider-icon {
    font-size: 1rem;
  }

  .hero-heading {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.1rem, 5vw, 1.35rem);
    color: var(--text);
    line-height: 1.5;
  }

  .message-card {
    background: var(--white);
    border-radius: 20px;
    padding: 32px 28px;
    margin-bottom: 36px;
    position: relative;
    box-shadow:
      0 2px 12px rgba(217, 210, 200, 0.1),
      0 0 0 1px rgba(237, 223, 200, 0.3);
    animation: fadeUp 0.9s 0.15s ease both;
  }

  .message-card::before,
  .message-card::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: 0.18;
    pointer-events: none;
  }

  .message-card::before {
    background: var(--gold-faint);
    top: -16px;
    left: -16px;
    filter: blur(18px);
  }

  .message-card::after {
    background: var(--gold);
    bottom: -16px;
    right: -16px;
    filter: blur(22px);
  }

  .message-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 20px;
  }

  .message-signature {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gold);
    text-align: right;
  }

  .section-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 16px;
    padding-left: 2px;
    animation: fadeUp 0.9s 0.25s ease both;
  }

  .gift-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
  }

  .gift-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border-radius: 16px;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--text);
    box-shadow: 0 2px 10px rgba(217, 210, 200, 0.08), 0 0 0 1px rgba(237, 223, 200, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: fadeUp 0.9s ease both;
  }

  .gift-card:nth-child(1) { animation-delay: 0.3s; }
  .gift-card:nth-child(2) { animation-delay: 0.4s; }
  .gift-card:nth-child(3) { animation-delay: 0.5s; }

  .gift-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 6px rgba(217, 210, 200, 0.12);
  }

  .gift-card-emoji {
    font-size: 1.8rem;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-faint);
    border-radius: 12px;
  }

  .gift-card-body {
    flex: 1;
  }

  .gift-card-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 2px;
  }

  .gift-card-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 300;
  }

  .gift-card-arrow {
    color: var(--gold);
    font-size: 1.1rem;
    flex-shrink: 0;
    opacity: 0.7;
  }

  .payment-section {
    animation: fadeUp 0.9s 0.55s ease both;
  }

  .payment-link {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--gold-faint);
    border-radius: 16px;
    padding: 22px 20px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid rgba(237, 223, 200, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px rgba(217, 210, 200, 0.15);
  }

  .payment-link:active {
    transform: scale(0.98);
  }

  .payment-emoji {
    font-size: 1.8rem;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.5);
    border-radius: 12px;
  }

  .payment-body {
    flex: 1;
  }

  .payment-label {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 2px;
  }

  .payment-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 300;
  }

  .wc-bg-img {
    margin: 12px auto 0;
    width: 100%;
    height: auto;
    opacity: 0.9;
    pointer-events: none;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>
</head>
<body>

  <!-- Watercolor background blobs -->
  <div class="wc-bg">
    <svg viewBox="0 0 400 800" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="blur1"><feGaussianBlur stdDeviation="28"/></filter>
        <filter id="blur2"><feGaussianBlur stdDeviation="40"/></filter>
        <filter id="blur3"><feGaussianBlur stdDeviation="22"/></filter>
      </defs>
      <!-- Top-left beige blob -->
      <ellipse cx="60" cy="80" rx="130" ry="110" fill="#eddfc8" opacity="0.28" filter="url(#blur1)"/>
      <!-- Top-right beige blob -->
      <ellipse cx="370" cy="140" rx="100" ry="140" fill="#f5ede0" opacity="0.4" filter="url(#blur2)"/>
      <!-- Mid beige blob -->
      <ellipse cx="320" cy="420" rx="120" ry="90" fill="#f9f3e8" opacity="0.35" filter="url(#blur1)"/>
      <!-- Mid-left blob -->
      <ellipse cx="30" cy="500" rx="90" ry="110" fill="#eddfc8" opacity="0.22" filter="url(#blur3)"/>
      <!-- Bottom center -->
      <ellipse cx="200" cy="730" rx="160" ry="100" fill="#f5ede0" opacity="0.3" filter="url(#blur2)"/>
      <!-- Bottom right beige -->
      <ellipse cx="390" cy="780" rx="100" ry="80" fill="#d4c4a8" opacity="0.15" filter="url(#blur1)"/>
    </svg>
  </div>

  <div class="page">

    <!-- Hero -->
    <section class="hero">
      <p class="hero-date">{couple.weddingDate}</p>
      <h1 class="hero-names">
        {couple.name1}<br/>
        <span class="amp">&amp;</span><br/>
        {couple.name2}
      </h1>



      <div class="hero-divider">
        <div class="hero-divider-line"></div>
        <div class="hero-divider-line right"></div>
      </div>
      <p class="hero-heading">{heading}</p>      
      
      <Image
        src={birds}
        alt=""
        class="wc-bg-img"
        widths={[768, 1280, 1920]}
        sizes="100vw"
        loading="eager"
      />
    </section>


    <!-- Personal message -->
    <div class="message-card">
      <p class="message-text">{message}</p>
      <p class="message-signature">{signature}</p>
    </div>

    <!-- Gift cards -->
    <p class="section-label">Wolt dāvanu kartes</p>
    <div class="gift-list">
      {giftCards.map((card) => (
        <a href={card.url} target="_blank" rel="noopener noreferrer" class="gift-card">
          <div class="gift-card-body">
            <div class="gift-card-name">{card.name}</div>
            <div class="gift-card-desc">{card.description}</div>
          </div>
          <span class="gift-card-arrow">→</span>
        </a>
      ))}
    </div>

    <!-- Payment link -->
    <div class="payment-section">
      <p class="section-label">Ieguldījums jūsu sapņu ceļojumā</p>
      <a href={payment.url} target="_blank" rel="noopener noreferrer" class="gift-card">
        <div class="payment-body">
          <div class="payment-label">{payment.label}</div>
          <div class="payment-desc">{payment.description}</div>
        </div>
        <span class="gift-card-arrow">→</span>
      </a>
    </div>

  </div>

</body>
</html>
