https://www.wikibubbles.com/_app/immutable/nodes/38.BJASN1vM.js

1import{i as xe,p as fe,b as v,h as me,F as he,u as r,k as x,d as a,x as H,y as be,a as n,l as ge,t,j as p,q as d,e as we,g as V,$ as ye,H as ke,w as i,N as f,V as _e,v as F,U as Me,z as w,A as Z,D as Ce,C as ze}from"../chunks/B9CB7g5B.js";import{F as Be}from"../chunks/DJM9LsI9.js";import{b as je,c as Pe,d as G,e as Ee}from"../chunks/3tjEUML2.js";var Ae=v('<meta name="description" content="Gift 1 year of WikiBubbles Premium to your favorite ocean lover. Instant email delivery with App Store redemption code." class="svelte-pu3sx7"/> <meta property="og:title" content="Gift Premium Access | WikiBubbles" class="svelte-pu3sx7"/> <meta property="og:description" content="Gift 1 year of WikiBubbles Premium to your favorite ocean lover. Instant email delivery." class="svelte-pu3sx7"/> <meta property="og:type" content="website" class="svelte-pu3sx7"/> <meta property="og:image" content="https://www.wikibubbles.com/images/freediving.webp" class="svelte-pu3sx7"/> <link rel="preconnect" href="https://fonts.googleapis.com" class="svelte-pu3sx7"/> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" class="svelte-pu3sx7"/> <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&amp;

1family=Outfit:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet" class="svelte-pu3sx7"/>',1),Se=v('<div class="sparkle-particle svelte-pu3sx7"></div>'),He=v('<div class="absolute top-2 right-2 w-2.5 h-2.5 rounded-full bg-gradient-to-br from-[#f0c420] to-[#d4af37] shadow-sm shadow-[#d4af37]/50 svelte-pu3sx7"></div>'),Ve=v('<div class="absolute top-2 right-2 w-2.5 h-2.5 rounded-full bg-gradient-to-br from-[#f0c420] to-[#d4af37] shadow-sm shadow-[#d4af37]/50 svelte-pu3sx7"></div>'),Fe=v(`<div class="space-y-5 svelte-pu3sx7"><div class="svelte-pu3sx7"><label for="friendEmail" class="block font-outfit text-sm font-medium text-slate-300 mb-2 svelte-pu3sx7">Friend's Email <span class="text-[#f0c420] svelte-pu3sx7">*</span></label> <input type="email" id="friendEmail" placeholder="[email protected]" required class="w-full px-5 py-4 bg-white/[0.03] border border-white/[0.08] rounded-xl font-outfit text-white placeholder:text-slate-600 transition-all duration-300 focus:outline-none focus:border-[#d4af37]/50 focus:bg-white/[0.05] focus:ring-2 focus:ring-[#d4af37]/20 svelte-pu3sx7"/></div> <div class="svelte-pu3sx7"><label for="senderName" class="block font-outfit text-sm font-medium text-slate-300 mb-2 svelte-pu3sx7">Your Name <span class="text-slate-500 font-normal svelte-pu3sx7">(optional)</span></label> <input type="text" id="senderName" placeholder="How you'd like to sign the gift" class="w-full px-5 py-4 bg-white/[0.03] border border-white/[0.08] rounded-xl font-outfit text-white placeholder:text-slate-600 transition-all duration-300 focus:outline-none focus:border-[#d4af37]/50 focus:bg-white/[0.05] focus:ring-2 focus:ring-[#d4af37]/20 svelte-pu3sx7"/></div> <div class="svelte-pu3sx7"><label for="personalMessage" class="block font-outfit text-sm font-medium text-slate-300 mb-2 svelte-pu3sx7">Personal Message <span class="text-slate-500 font-normal svelte-pu3sx7">(optional)</span></label> <textarea id="personalMessage" placeholder="Add a heartfelt note..." rows="3" class="w-full px-5 py-4 bg-white/[0.03] border border-white/[0.08] rounded-xl font-outfit text-white placeholder:text-slate-600 transition-all duration-300 focus:outline-none focus:border-[#d4af37]/50 focus:bg-white/[0.05] focus:ring-2 focus:ring-[#d4af37]/20 resize-none svelte-pu3sx7"></textarea></div></div>`),Ge=v('<div class="svelte-pu3sx7"><label for="myEmail" class="block font-outfit text-sm font-medium text-slate-300 mb-2 svelte-pu3sx7">Your Email <span class="text-[#f0c420] svelte-pu3sx7">*</span></label> <input type="email" id="myEmail" placeholder="[email protected]" required class="w-full px-5 py-4 bg-white/[0.03] border border-white/[0.08] rounded-xl font-outfit text-white placeholder:text-slate-600 transition-all duration-300 focus:outline-none focus:border-[#d4af37]/50 focus:bg-white/[0.05] focus:ring-2 focus:ring-[#d4af37]/20 svelte-pu3sx7"/> <p class="font-outfit text-xs text-slate-500 mt-2 svelte-pu3sx7">Redemption code and voucher will be sent here</p></div>'),Le=v('<div class="flex items-center gap-3 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 svelte-pu3sx7"><svg class="w-5 h-5 text-rose-400 flex-shrink-0 svelte-pu3sx7" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" class="svelte-pu3sx7"></path></svg> <p class="font-outfit text-sm text-rose-300 svelte-pu3sx7"> </p></div>'),De=v('<span class="flex items-center gap-2 svelte-pu3sx7"><svg class="animate-spin h-5 w-5 svelte-pu3sx7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25 svelte-pu3sx7" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75 svelte-pu3sx7" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Processing...</span>'),$e=ze('<svg class="relative w-5 h-5 text-white group-hover:translate-x-1.5 transition-transform duration-300 svelte-pu3sx7" fill="none" stroke="currentColor" viewBox="0 0 24 24">

1<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" class="svelte-pu3sx7"></path></svg>'),Te=v(`<main class="gift-page svelte-pu3sx7"><div class="fixed inset-0 -z-20 svelte-pu3sx7"><div class="absolute inset-0 bg-gradient-to-b from-[#020810] via-[#051525] to-[#0a2540] svelte-pu3sx7"></div> <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg viewBox=%220 0 256 256%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noise%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noise)%22/%3E%3C/svg%3E')] opacity-[0.03] svelte-pu3sx7"></div></div> <div class="fixed inset-0 -z-10 overflow-hidden pointer-events-none svelte-pu3sx7"><div class="caustic-layer absolute inset-0 opacity-20 svelte-pu3sx7"></div></div> <div class="fixed inset-0 overflow-hidden pointer-events-none -z-5 svelte-pu3sx7"></div> <div class="fixed inset-0 pointer-events-none -z-5 overflow-hidden svelte-pu3sx7"><div class="absolute w-[800px] h-[800px] -top-[300px] -left-[300px] bg-[radial-gradient(circle,rgba(212,175,55,0.06)_0%,transparent_60%)] animate-drift-slow svelte-pu3sx7"></div> <div class="absolute w-[600px] h-[600px] top-[20%] right-[-200px] bg-[radial-gradient(circle,rgba(0,210,190,0.05)_0%,transparent_60%)] animate-drift-slow [animation-delay:3s] svelte-pu3sx7"></div> <div class="absolute w-[700px] h-[700px] bottom-[5%] left-[30%] bg-[radial-gradient(circle,rgba(255,107,129,0.04)_0%,transparent_60%)] animate-drift-slow [animation-delay:6s] svelte-pu3sx7"></div></div> <section class="relative min-h-[100vh] flex flex-col items-center justify-center px-6 pt-24 pb-16 overflow-hidden svelte-pu3sx7"><div class="relative max-w-5xl mx-auto text-center z-10 svelte-pu3sx7"><div class="inline-flex items-center gap-3 px-5 py-2.5 mb-8 rounded-full bg-gradient-to-r from-[#d4af37]/10 to-[#f0c420]/10 backdrop-blur-md border border-[#d4af37]/20 animate-fade-down [animation-delay:0.1s] svelte-pu3sx7"><div class="relative w-7 h-7 svelte-pu3sx7"><div class="absolute inset-0 rounded-lg bg-gradient-to-br from-[#d4af37] to-[#f0c420] animate-spin-slow svelte-pu3sx7"></div> <div class="absolute inset-[2px] rounded-[6px] bg-[#051525] flex items-center justify-center svelte-pu3sx7"><svg class="w-3.5 h-3.5 text-[#f0c420] svelte-pu3sx7" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z" clip-rule="evenodd" class="svelte-pu3sx7"></path><path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z" class="svelte-pu3sx7"></path></svg></div></div> <span class="font-outfit text-xs font-medium tracking-[0.2em] uppercase text-[#d4af37] svelte-pu3sx7">A Gift They'll Treasure</span></div> <h1 class="font-fraunces text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-medium text-white mb-6 leading-[0.95] tracking-tight animate-fade-up [animation-delay:0.2s] svelte-pu3sx7"><span class="block svelte-pu3sx7">Unlock a Year of</span> <span class="relative inline-block mt-2 svelte-pu3sx7"><span class="relative z-10 italic font-normal bg-gradient-to-r from-[#d4af37] via-[#f7e98e] to-[#d4af37] bg-clip-text text-transparent bg-[length:200%_100%] animate-shimmer-gold svelte-pu3sx7">Ocean Magic</span> <svg class="absolute -bottom-2 left-0 w-full h-4 text-[#d4af37]/30 svelte-pu3sx7" viewBox="0 0 200 12" preserveAspectRatio="none"><path d="M0 8 Q50 0, 100 8 T200 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="svelte-pu3sx7"></path></svg></span></h1> <p class="font-outfit text-lg md:text-xl text-slate-300/80 max-w-xl mx-auto mb-12 leading-relaxed animate-fade-up [animation-delay:0.35s] svelte-pu3sx7">Give the gift of endless underwater exploration.<br class="hidden sm:block svelte-pu3sx7"/> <span class="text-white/90 svelte-pu3sx7">Delivered instantly</span> with a stunning digital voucher.</p> <div class="relative inline-block animate-fade-up [animation-delay:0.5s] svelte-pu3sx7"><div class="absolute -inset-4 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/20 to-[#d4af37]/0 rounded-[2rem] blur-xl animate-pulse-subtle svelte-pu3sx7"></div> <div class="relative flex items-center gap-6 px-8 py-6 rounded-2xl bg-gradient-to-br from-white/[0.04] to-white/[0.01] backdrop-blur-xl border border-white/[0.08] shadow-2xl shadow-black/20 svelte-pu3sx7"><div class="text-left svelte-pu3sx7"><span class="block font-outfit text-[10px] font-medium tracking-[0.25em] uppercase text-slate-500 mb-1 svelte-pu3sx7">

1One-time</span> <div class="flex items-baseline gap-1 svelte-pu3sx7"><span class="font-fraunces text-5xl md:text-6xl font-medium text-white svelte-pu3sx7">$10</span></div></div> <div class="w-px h-16 bg-gradient-to-b from-transparent via-[#d4af37]/40 to-transparent svelte-pu3sx7"></div> <div class="text-left svelte-pu3sx7"><div class="flex items-center gap-2 mb-1.5 svelte-pu3sx7"><div class="w-5 h-5 rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center shadow-lg shadow-emerald-500/30 svelte-pu3sx7"><svg class="w-3 h-3 text-white svelte-pu3sx7" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class="svelte-pu3sx7"></path></svg></div> <span class="font-outfit font-semibold text-emerald-400 svelte-pu3sx7">Full Premium</span></div> <span class="font-outfit text-sm text-slate-400 svelte-pu3sx7">12 months of discovery</span></div></div></div></div> <div class="relative w-full max-w-6xl mx-auto mt-20 px-4 animate-fade-up [animation-delay:0.65s] svelte-pu3sx7"><div class="relative flex justify-center items-end gap-4 md:gap-8 svelte-pu3sx7"><div class="relative group flex-shrink-0 translate-y-8 md:translate-y-12 -rotate-6 transition-all duration-700 hover:rotate-0 hover:translate-y-4 hover:scale-105 hover:z-20 svelte-pu3sx7"><div class="absolute -inset-3 bg-gradient-to-br from-cyan-400/20 to-teal-600/20 rounded-[2rem] blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 svelte-pu3sx7"></div> <div class="relative svelte-pu3sx7"><img src="/images/wikibubbles_app_screenshot_sitemap.png" alt="WikiBubbles dive sites map" class="w-[180px] md:w-[200px] lg:w-[220px] h-auto rounded-2xl shadow-2xl shadow-black/50 ring-1 ring-white/10 svelte-pu3sx7"/> <div class="absolute inset-0 rounded-2xl bg-gradient-to-t from-black/40 via-transparent to-transparent svelte-pu3sx7"></div></div> <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 whitespace-nowrap svelte-pu3sx7"><span class="font-outfit text-xs font-medium text-cyan-400/80 svelte-pu3sx7">8,000+ sites</span></div></div> <div class="relative group z-10 flex-shrink-0 transition-all duration-700 hover:scale-110 svelte-pu3sx7"><div class="absolute -inset-6 bg-gradient-to-br from-[#d4af37]/30 via-orange-500/20 to-[#d4af37]/30 rounded-[2.5rem] blur-3xl opacity-60 group-hover:opacity-100 transition-opacity duration-500 svelte-pu3sx7"></div> <div class="relative svelte-pu3sx7"><img src="/images/wikibubbles_app_screenshot_weather.png" alt="WikiBubbles weather forecast" class="w-[220px] md:w-[260px] lg:w-[300px] h-auto rounded-3xl shadow-2xl shadow-black/60 ring-1 ring-white/10 svelte-pu3sx7"/> <div class="absolute inset-0 rounded-3xl bg-gradient-to-t from-black/30 via-transparent to-transparent svelte-pu3sx7"></div></div> <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap text-center svelte-pu3sx7"><span class="font-outfit text-sm font-semibold text-[#f0c420] svelte-pu3sx7">Live Conditions</span></div></div> <div class="relative group flex-shrink-0 translate-y-8 md:translate-y-12 rotate-6 transition-all duration-700 hover:rotate-0 hover:translate-y-4 hover:scale-105 hover:z-20 svelte-pu3sx7"><div class="absolute -inset-3 bg-gradient-to-br from-emerald-400/20 to-teal-600/20 rounded-[2rem] blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 svelte-pu3sx7"></div> <div class="relative svelte-pu3sx7"><img src="/images/wikibubbles_app_screenshot_logbook.png" alt="WikiBubbles dive logbook" class="w-[180px] md:w-[200px] lg:w-[220px] h-auto rounded-2xl shadow-2xl shadow-black/50 ring-1 ring-white/10 svelte-pu3sx7"/> <div class="absolute inset-0 rounded-2xl bg-gradient-to-t from-black/40 via-transparent to-transparent svelte-pu3sx7"></div></div> <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 whitespace-nowrap svelte-pu3sx7"><span class="font-outfit text-xs font-medium text-emerald-400/80 svelte-pu3sx7">Personal logbook</span></div></div></div></div> <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-fade-in [animation-delay:1s] svelte-pu3sx7"><div class="flex flex-col items-center gap-2 text-slate-500 svelte-pu3sx7"><span class="font-outfit text-[10px] tracking-[0.3em] uppercase svelte-pu3sx7">Scroll</span> <div class="w-5 h-8 rounded-full border border-slate-600/50 flex items-start justify-center p-1.5 svelte-pu3sx7"><div class="w-1 h-1.5 rounded-full bg-[#d4af37] animate-scroll-bounce svelte-pu3sx7"></div></div></div></div></section> <section class="relative py-24 px-6 svelte-pu3sx7"><div class="absolute inset-0 bg-gradient-to-b from-transparent via-[#d4af37]/[0.02] to-transparent pointer-events-none svelte-pu3sx7"></div> <div class="max-w-lg mx-auto relative svelte-pu3sx7"><div class="relative svelte-pu3sx7"><div class="absolute -inset-2 bg-gradient-to-r from-[#d4af37]/20 via-rose-500/10 to-[#d4af37]/20 rounded-[2.5rem] blur-3xl op

1acity-60 svelte-pu3sx7"></div> <div class="absolute -inset-1 bg-gradient-to-br from-[#d4af37]/10 to-transparent rounded-[2.2rem] blur-xl svelte-pu3sx7"></div> <div class="relative bg-gradient-to-br from-[#0c1f35]/95 to-[#081828]/95 backdrop-blur-2xl rounded-[2rem] p-8 md:p-10 border border-[#d4af37]/20 shadow-2xl shadow-black/40 overflow-hidden svelte-pu3sx7"><div class="absolute top-0 left-0 w-24 h-24 pointer-events-none svelte-pu3sx7"><svg class="w-full h-full text-[#d4af37]/20 svelte-pu3sx7" viewBox="0 0 100 100" fill="none"><path d="M0 50 Q0 0 50 0" stroke="currentColor" stroke-width="1" fill="none" class="svelte-pu3sx7"></path><circle cx="50" cy="0" r="2" fill="currentColor" opacity="0.5" class="svelte-pu3sx7"></circle></svg></div> <div class="absolute top-0 right-0 w-24 h-24 pointer-events-none rotate-90 svelte-pu3sx7"><svg class="w-full h-full text-[#d4af37]/20 svelte-pu3sx7" viewBox="0 0 100 100" fill="none"><path d="M0 50 Q0 0 50 0" stroke="currentColor" stroke-width="1" fill="none" class="svelte-pu3sx7"></path><circle cx="50" cy="0" r="2" fill="currentColor" opacity="0.5" class="svelte-pu3sx7"></circle></svg></div> <div class="absolute bottom-0 left-0 w-24 h-24 pointer-events-none -rotate-90 svelte-pu3sx7"><svg class="w-full h-full text-[#d4af37]/20 svelte-pu3sx7" viewBox="0 0 100 100" fill="none"><path d="M0 50 Q0 0 50 0" stroke="currentColor" stroke-width="1" fill="none" class="svelte-pu3sx7"></path><circle cx="50" cy="0" r="2" fill="currentColor" opacity="0.5" class="svelte-pu3sx7"></circle></svg></div> <div class="absolute bottom-0 right-0 w-24 h-24 pointer-events-none rotate-180 svelte-pu3sx7"><svg class="w-full h-full text-[#d4af37]/20 svelte-pu3sx7" viewBox="0 0 100 100" fill="none"><path d="M0 50 Q0 0 50 0" stroke="currentColor" stroke-width="1" fill="none" class="svelte-pu3sx7"></path><circle cx="50" cy="0" r="2" fill="currentColor" opacity="0.5" class="svelte-pu3sx7"></circle></svg></div> <div class="text-center mb-10 relative svelte-pu3sx7"><div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-[#d4af37] to-[#b8942d] shadow-xl shadow-[#d4af37]/30 mb-6 relative svelte-pu3sx7"><svg class="w-8 h-8 text-[#051525] svelte-pu3sx7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" class="svelte-pu3sx7"></path></svg> <div class="absolute -top-1 -right-1 w-3 h-3 svelte-pu3sx7"><svg class="w-full h-full text-white animate-sparkle-pulse svelte-pu3sx7" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z" class="svelte-pu3sx7"></path></svg></div></div> <h2 class="font-fraunces text-3xl md:text-4xl font-medium text-white mb-3 svelte-pu3sx7">Send Your Gift</h2> <p class="font-outfit text-slate-400 svelte-pu3sx7">Instant delivery • Beautiful PDF voucher</p></div> <form class="space-y-6 svelte-pu3sx7"><div class="svelte-pu3sx7"><p class="font-outfit text-xs font-medium tracking-[0.2em] uppercase text-slate-500 mb-3 svelte-pu3sx7">Choose Delivery</p> <div class="grid grid-cols-2 gap-3 svelte-pu3sx7"><button type="button"><div>🎁</div> <span>Send to Friend</span> <!></button> <button type="button"><div>✨</div> <span>For Myself</span> <!></button></div></div> <!> <div class="relative flex items-start gap-4 p-4 rounded-xl bg-gradient-to-br from-teal-500/10 to-cyan-500/5 border border-teal-500/20 overflow-hidden svelte-pu3sx7"><div class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-teal-400/10 to-transparent rounded-bl-full svelte-pu3sx7"></div> <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center flex-shrink-0 shadow-lg shadow-teal-500/20 svelte-pu3sx7"><svg class="w-5 h-5 text-white svelte-pu3sx7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" class="svelte-pu3sx7"></path></svg></div> <div class="relative svelte-pu3sx7"><p class="font-outfit text-sm font-semibold text-white mb-0.5 svelte-pu3sx7">Beautiful PDF Voucher</p> <p class="font-outfit text-xs text-slate-400 svelte-pu3sx7">Printable gift card with redemption code</p></div></div> <!> <button type="submit" class="group relative w-full flex items-center justify-center gap-3 py-5 px-8 rounded-xl font-outfit font-semibold text-lg overflow-hidden transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-xl hover:shadow-rose-500/20 active:scale-[0.98] svelte-pu3sx7"><div class="absolute inset-0 bg-gradient-to-r from-rose-500 via-rose-400 to-rose-500 bg-[length:200%_100%] animate-gradient-flow svelte-pu3sx7"></div> <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-out svelte-pu3sx7"></div> <span class="relative text-white drop-shadow-sm svelte-pu3sx7"><!></span> <!></button></form> <div class="flex items-center justify-center gap-2 mt-6 pt-6 border-t border-white/[0.04] svelte-pu3sx7"><svg class="w-4 h-4 text-slate-500 svelte-pu3sx7" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" class="svelte-pu3sx7"></path></svg> <span class="font-outfit text-xs text-slate-500 svelte-pu3sx7">Secure checkout via Stripe</span></div></div></div></div></section> <section class="relative py-24 px-6 overflow-hidden svelte-pu3sx7"><div class="absolute inset-0 pointer-events-none svelte-pu3sx7"><div class="absolute top-20 left-1/4 w-64 h-64 bg-[radial-gradient(circle,rgba(212,175,55,0.04)_0%,transparent_60%)] svelte-pu3sx7"></div> <div class="absolute bottom-20 right-1/4 w-64 h-64 bg-[radial-gradient(circle,rgba(0,210,190,0.04)_0%,transparent_60%)] svelte-pu3sx7"></div></div> <div class="max-w-5xl mx-auto relative svelte-pu3sx7"><div class="text-center mb-16 svelte-pu3sx7"><span class="inline-block font-outfit text-xs font-medium tracking-[0.3em] uppercase text-[#d4af37] mb-4 svelte-pu3sx7">Quick & Easy</span> <h2 class="font-fraunces text-4xl md:text-5xl font-medium text-white mb-4 svelte-pu3sx7">How It Works</h2>

1 <p class="font-outfit text-slate-400 max-w-md mx-auto svelte-pu3sx7">Three simple steps to gift underwater adventures</p></div> <div class="relative svelte-pu3sx7"><div class="hidden md:block absolute top-[60px] left-[calc(16.66%+28px)] right-[calc(16.66%+28px)] h-px bg-gradient-to-r from-transparent via-[#d4af37]/30 to-transparent svelte-pu3sx7"></div> <div class="grid md:grid-cols-3 gap-8 md:gap-6 svelte-pu3sx7"><div class="group relative text-center svelte-pu3sx7"><div class="relative inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-400 to-cyan-600 shadow-xl shadow-cyan-500/30 mb-6 transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-3 svelte-pu3sx7"><svg class="w-7 h-7 text-white svelte-pu3sx7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" class="svelte-pu3sx7"></path></svg> <div class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-[#051525] border-2 border-cyan-400 flex items-center justify-center svelte-pu3sx7"><span class="font-fraunces text-xs font-bold text-cyan-400 svelte-pu3sx7">1</span></div></div> <h3 class="font-fraunces text-xl font-medium text-white mb-3 svelte-pu3sx7">Purchase</h3> <p class="font-outfit text-slate-400 text-sm leading-relaxed max-w-[260px] mx-auto svelte-pu3sx7">Enter email and complete secure checkout with Stripe</p></div> <div class="group relative text-center svelte-pu3sx7"><div class="relative inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-[#d4af37] to-[#b8942d] shadow-xl shadow-[#d4af37]/30 mb-6 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3 svelte-pu3sx7"><svg class="w-7 h-7 text-[#051525] svelte-pu3sx7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" class="svelte-pu3sx7"></path></svg> <div class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-[#051525] border-2 border-[#d4af37] flex items-center justify-center svelte-pu3sx7"><span class="font-fraunces text-xs font-bold text-[#d4af37] svelte-pu3sx7">2</span></div></div> <h3 class="font-fraunces text-xl font-medium text-white mb-3 svelte-pu3sx7">Instant Delivery</h3> <p class="font-outfit text-slate-400 text-sm leading-relaxed max-w-[260px] mx-auto svelte-pu3sx7">Beautiful email with code and printable PDF voucher</p></div> <div class="group relative text-center svelte-pu3sx7"><div class="relative inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 shadow-xl shadow-emerald-500/30 mb-6 transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-3 svelte-pu3sx7"><svg class="w-7 h-7 text-white svelte-pu3sx7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" class="svelte-pu3sx7"></path></svg> <div class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-[#051525] border-2 border-emerald-400 flex items-center justify-center svelte-pu3sx7"><span class="font-fraunces text-xs font-bold text-emerald-400 svelte-pu3sx7">3</span></div></div> <h3 class="font-fraunces text-xl font-medium text-white mb-3 svelte-pu3sx7">Redeem & Dive</h3> <p class="font-outfit text-slate-400 text-sm leading-relaxed max-w-[260px] mx-auto svelte-pu3sx7">Recipient redeems in App Store for Premium access</p></div></div></div></div></section> <section class="relative py-16 px-6 svelte-pu3sx7"><div class="max-w-3xl mx-auto svelte-pu3sx7"><div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 border border-white/[0.06] p-8 md:p-10 svelte-pu3sx7"><div class="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-slate-600/20 via-trans

1parent to-transparent rounded-bl-full svelte-pu3sx7"></div> <div class="relative flex items-start gap-5 svelte-pu3sx7"><div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-slate-600 to-slate-800 flex items-center justify-center flex-shrink-0 shadow-lg svelte-pu3sx7"><svg class="w-7 h-7 text-white svelte-pu3sx7" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" class="svelte-pu3sx7"></path></svg></div> <div class="svelte-pu3sx7"><h3 class="font-fraunces text-lg font-medium text-white mb-2 svelte-pu3sx7">App Store Redemption</h3> <p class="font-outfit text-sm text-slate-400 leading-relaxed svelte-pu3sx7">The gift code is an official Apple App Store promo code. The recipient needs an iPhone or iPad with WikiBubbles installed to redeem and unlock their Premium subscription.</p></div></div></div></div></section> <!></main>`);function Oe(K,X){fe(X,!0);let l=p("friend"),y=p(""),k=p(""),_=p(""),M=p(""),m=p(!1),u=p("");function L(e){t(l)!==e&&(d(l,e,!0),je(e))}async function ee(){const e=t(l)==="friend"?t(y):t(M);if(Pe(t(l)),!e||!e.includes("@")){d(u,"Please enter a valid email address"),G("Invalid email address",t(l));return}d(m,!0),d(u,"");try{const o=await(await fetch("/api/gift/checkout",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({recipientEmail:e,senderName:t(l)==="friend"?t(k)||"A friend":"Self purchase",personalMessage:t(l)==="friend"?t(_):"",deliveryMethod:t(l)})})).json();o.url?(Ee(t(l)),window.location.href=o.url):(d(u,o.error||"Failed to create checkout session",!0),G(t(u),t(l)))}catch{d(u,"An error occurred. Please try again."),G(t(u),t(l))}finally{d(m,!1)}}var C=Te();me("pu3sx7",e=>{var s=Ae();V(14),we(()=>{ye.title="Gift WikiBubbles iOS Pro Access | WikiBubbles"}),n(e,s)});var z=a(r(C),4);he(z,20,()=>Array(40),ke,(e,s)=>{var o=Se();_e(o,`
2          --x: ${5+Math.random()*90}%;
3          --y: ${5+Math.random()*90}%;
4          --size: ${1+Math.random()*3}px;
5          --duration: ${8+Math.random()*12}s;
6          --delay: ${Math.random()*8}s;
7          --drift: ${-20+Math.random()*40}px;
8        `),n(e,o)}),i(z);var B=a(z,6),D=a(r(B),2),$=r(D),T=a(r($),4),j=a(r(T),10),P=r(j),W=a(r(P),2),h=r(W);h.__click=()=>L("friend");var N=r(h),I=a(N,2),te=a(I,2);{var se=e=>{var s=He();n(e,s)};x(te,e=>{t(l)==="friend"&&e(se)})}i(h);var g=a(h,2);g.__click=()=>L("myself");var O=r(g),Q=a(O,2),ae=a(Q,2);{var le=e=>{var s=Ve();n(e,s)};x(ae,e=>{t(l)==="myself"&&e(le)})}i(g),i(W),i(P);var R=a(P,2);{var ie=e=>{var s=Fe(),o=r(s),c=a(r(o),2);F(c),i(o);var S=a(o,2),Y=a(r(S),2);F(Y),i(S);var U=a(S,2),J=a(r(U),2);Me(J),i(U),i(s),w(c,()=>t(y),b=>d(y,b)),w(Y,()=>t(k),b=>d(k,b)),w(J,()=>t(_),b=>d(_,b)),n(e,s)},re=e=>{var s=Ge(),o=a(r(s),2);F(o),V(2),i(s),w(o,()=>t(M),c=>d(M,c)),n(e,s)};x(R,e=>{t(l)==="friend"?e(ie):e(re,!1)})}var q=a(R,4);{var oe=e=>{var s=Le(),o=a(r(s),2),c=r(o,!0);i(o),i(s),H(()=>Z(c,t(u))),n(e,s)};x(q,e=>{t(u)&&e(oe)})}var E=a(q,2),A=a(r(E),4),ne=r(A);{var de=e=>{var s=De();n(e,s)},ve=e=>{var s=Ce();H(()=>Z(s,t(l)==="friend"?"Send Gift Now":"Get My Voucher")),n(e,s)};x(ne,e=>{t(m)?e(de):e(ve,!1)})}i(A);var ue=a(A,2);{var pe=e=>{var s=$e();n(e,s)};x(ue,e=>{t(m)||e(pe)})}i(E),i(j),V(2),i(T),i($),i(D),i(B);var ce=a(B,6);Be(ce,{}),i(C),H(()=>{f(h,1,`relative group flex flex-col items-center justify-center p-5 rounded-xl transition-all duration-300 ${t(l)==="friend"?"bg-gradient-to-br from-[#d4af37]/15 to-[#d4af37]/5 border-2 border-[#d4af37]/50 shadow-lg shadow-[#d4af37]/10":"bg-white/[0.02] border-2 border-white/[0.06] hover:border-white/[0.12] hover:bg-white/[0.04]"}`,"svelte-pu3sx7"),f(N,1,`text-3xl mb-2 transition-transform duration-300 group-hover:scale-110 ${t(l)==="friend"?"animate-wiggle":""}`,"svelte-pu3sx7"),f(I,1,`font-outfit text-sm font-medium ${t(l)==="friend"?"text-[#f0c420]":"text-slate-400"}`,"svelte-pu3sx7"),f(g,1,`relative group flex flex-col items-center justify-center p-5 rounded-xl transition-all duration-300 ${t(l)==="myself"?"bg-gradient-to-br from-[#d4af37]/15 to-[#d4af37]/5 border-2 border-[#d4af37]/50 shadow-lg shadow-[#d4af37]/10":"bg-white/[0.02] border-2 border-white/[0.06] hover:border-white/[0.12] hover:bg-white/[0.04]"}`,"svelte-pu3sx7"),f(O,1,`text-3xl mb-2 transition-transform duration-300 group-hover:scale-110 ${t(l)==="myself"?"animate-wiggle":""}`,"svelte-pu3sx7"),f(Q,1,`font-outfit text-sm font-medium ${t(l)==="myself"?"text-[#f0c420]":"text-slate-400"}`,"svelte-pu3sx7"),E.disabled=t(m)}),be("submit",j,e=>{e.preventDefault(),ee()}),n(K,C),ge()}xe(["click"]);export{Oe as component};