https://ryanliwag.com/_app/immutable/nodes/6.C-WP1X5d.js

1import{i as q,_ as ee}from"../chunks/95mGF-8h.js";import"../chunks/DsnmJJEf.js";import{o as ae}from"../chunks/_4ke7Wvj.js";import{aq as te,M as _,ar as re,z as oe,j as se,v as le,as as ne,p as ie,f as ce,a as y,b as de,s as l,c as n,d as S,g as i,r as c,at as h,au as me,ae as t,av as pe,t as H,aw as ue,e as ve,ax as J}from"../chunks/koloWMfU.js";import{r as O}from"../chunks/BlnfbWk3.js";import{S as fe}from"../chunks/DMk8xJzF.js";function k(e,p,f=p){var v=new WeakSet;te(e,"input",async m=>{var r=m?e.defaultValue:e.value;if(r=T(e)?C(r):r,f(r),_!==null&&v.add(_),await re(),r!==(r=p())){var d=e.selectionStart,u=e.selectionEnd,w=e.value.length;if(e.value=r??"",u!==null){var x=e.value.length;d===u&&u===w&&x>w?(e.selectionStart=x,e.selectionEnd=x):(e.selectionStart=d,e.selectionEnd=Math.min(u,x))}}}),(oe&&e.defaultValue!==e.value||se(p)==null&&e.value)&&(f(T(e)?C(e.value):e.value),_!==null&&v.add(_)),le(()=>{var m=p();if(e===document.activeElement){var r=_;if(v.has(r))return}T(e)&&m===C(e.value)||e.type==="date"&&!m&&!e.value||m!==e.value&&(e.value=m??"")})}function T(e){var p=e.type;return p==="number"||p==="range"}function C(e){return e===""?null:+e}var xe=S(`<div class="p-12 border border-border bg-surface flex flex-col gap-4"><p class="eyebrow">Message sent</p> <h2 class="font-display text-[clamp(1.5rem,3vw,2rem)] font-bold tracking-[-0.02em] m-0">Got it — I'll be in touch.</h2> <p class="text-[0.9rem] text-text-muted leading-[1.6] m-0 mb-2">Thanks for reaching out. I usually reply within a day or two.</p> <button class="btn-ghost">Send another</button></div>`),be=S('<p class="font-mono text-[0.75rem] text-accent tracking-[0.04em]"> </p>'),ge=S(`<form class="flex flex-col gap-6" novalidate=""><div class="grid grid-cols-2 gap-4 max-md:grid-cols-1"><div class="flex flex-col gap-2"><label class="font-mono text-[0.7rem] tracking-[0.1em] uppercase text-text-muted" for="name">Name <span class="text-accent">*</span></label> <input id="name" class="bg-surface border border-border text-text font-sans text-[0.925rem] px-4 py-3 w-full outline-none transition-colors duration-200 appearance-none rounded-none focus:border-accent placeholder:text-text-muted placeholder:opacity-60" type="text" required="" autocomplete="name" placeholder="Your name"/></div> <div class="flex flex-col gap-2"><label class="font-mono text-[0.7rem] tracking-[0.1em] uppercase text-text-muted" for="email">Email <span class="text-accent">*</span></label> <input id="email" class="bg-surface border border-border text-text font-sans text-[0.925rem] px-4 py-3 w-full outline-none transition-colors duration-200 appearance-none rounded-none focus:border-accent placeholder:text-text-muted placeholder:opacity-60" type="email" required="" autocomplete="email" placeholder="[email protected]"/></div></div> <div class="flex flex-col gap-2"><label class="font-mono text-[0.7rem] tracking-[0.1em] uppercase text-text-muted" for="subject">Subject</label> <input id="subject" class="bg-surface border border-border text-text font-sans text-[0.925rem] px-4 py-3 w-full outline-none transition-colors duration-200 appearance-none rounded-none focus:border-accent placeholder:text-text-muted placeholder:opacity-60" type="text" placeholder="What's this about?"/></div> <div class="flex flex-col gap-2"><label class="font-mono text-[0.7rem] tracking-[0.1em] uppercase text-text-muted" for="message">Message <span class="text-accent">*</span></label> <textarea id="message" class="bg-surface border border-border text-text font-sans text-[0.925rem] px-4 py-3 w-full outline-none transition-colors duration-200 appearance-none rounded-none focus:border-accent placeholder:text-text-muted placeholder:opacity-60 resize-y min-h-[140px] leading-[1.6]" required="" rows="6" placeholder="Tell me about your project or idea..."></textarea></div> <!> <div class="flex items-center"><button class="btn-primary" type="submit"><!></button></div></form>`),ye=S(`<!> <div class="max-w-[1100px] mx-auto px-8 py-20 pb-32"><header class="pb-16 border-b border-border mb-16"><p class="eyebrow page-eyebrow mb-4">Contact</p> <h1 class="page-title font-display text-[clamp(3rem,8vw,6rem)] font-black tracking-[0.01em] leading-none mb-6 text-text">Let's work<br/><em class="not-italic text-accent">together.</em></h1> <p class="page-lead text-[1.05rem] text-text-muted max-w-[480px] leading-[1.7]">Have a project in mind, a question, or just want to say hello?</p></header> <div class="contact-grid grid [grid-template-columns:240px_1fr] gap-24 items-start max-md:grid-cols-1 max-md:gap-12"><aside class="flex flex-col gap-10 pt-1"><div class="flex flex-col gap-[0.4rem]"><p class="eyebrow">Email</p> <a href="mailto:[email protected]" class="block font-mono text-sm text-accent mb-[0.4rem] transition-opacity duration-200 hover:opacity-70">[email protected]</a></div> <div class="flex flex-col gap-[0.4rem]"><p class="eyebrow">Based in</p> <p class="font-mono text-[0.75rem] text-text-muted tracking-[0.01em]">Manila, Philippines</p></div> <div class="flex flex-col gap-[0.4rem]"><p class="eyebrow">Availability</p> <p class="font-mono text-[0.75rem] text-text-muted tracking-[0.01em]">Open to freelance & collaborations</p></div></aside> <div><!></div></div></div>`,1);function Ee(e,p){ie(p,!0);let f=h(""),v=h(""),m=h(""),r=h(""),d=h("idle"),u=h("");async function w(o){o.preventDefault(),t(d,"sending"),t(u,"");try{const s=await fetch("/api/contact",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:i(f),email:i(v),subject:i(m),message:i(r)})}),b=await s.json();s.ok?(t(d,"success"),t(f,""),t(v,""),t(m,""),t(r,"")):(t(u,b.error??"Something went wrong.",!0),t(d,"error"))}catch{t(u,"Network error. Please try again."),t(d,"error")}}ae(async()=>{const{gsap:o}=await ee(async()=>{const{gsap:s}=await import("../chunks/BDA7kSH2.js");return{gsap:s}},[],import.meta.url);o.from(".page-eyebrow",{y:12,opacity:0,duration:.6}),o.from(".page-title",{y:40,opacity:0,duration:.8,delay:.1,ease:"power3.out"}),o.from(".page-lead",{y:24,opacity:0,duration:.7,delay:.25,ease:"power3.out"}),o.from(".contact-grid",{y:32,opacity:0,duration:.8,delay:.35,ease:"power3.out"})});var x=ye(),I=ce(x);fe(I,{title:"Contact",description:"Get in touch with Ryan Liwag — data scientist and data designer based in Manila, Philippines.",path:"/contact"});

1var L=l(I,2),N=l(n(L),2),V=l(n(N),2),Y=n(V);{var F=o=>{var s=xe(),b=l(n(s),6);c(s),me("click",b,()=>t(d,"idle")),y(o,s)},K=o=>{var s=ge(),b=n(s),j=n(b),z=l(n(j),2);O(z),c(j);var A=l(j,2),D=l(n(A),2);O(D),c(A),c(b);var E=l(b,2),G=l(n(E),2);O(G),c(E);var M=l(E,2),R=l(n(M),2);pe(R),c(M);var W=l(M,2);{var Q=a=>{var g=be(),$=n(g,!0);c(g),H(()=>ve($,i(u))),y(a,g)};q(W,a=>{i(d)==="error"&&a(Q)})}var B=l(W,2),P=n(B),U=n(P);{var X=a=>{var g=J("Sending…");y(a,g)},Z=a=>{var g=J("Send message →");y(a,g)};q(U,a=>{i(d)==="sending"?a(X):a(Z,-1)})}c(P),c(B),c(s),H(()=>P.disabled=i(d)==="sending"),ue("submit",s,w),k(z,()=>i(f),a=>t(f,a)),k(D,()=>i(v),a=>t(v,a)),k(G,()=>i(m),a=>t(m,a)),k(R,()=>i(r),a=>t(r,a)),y(o,s)};q(Y,o=>{i(d)==="success"?o(F):o(K,-1)})}c(V),c(N),c(L),y(e,x),de()}ne(["click"]);export{Ee as component};