344 lines
11 KiB
TypeScript
344 lines
11 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useRef, useState } from 'react';
|
||
import { SITE, GITEA_URL, GITEA_USERNAME } from '@/lib/config';
|
||
|
||
const TURNSTILE_SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY;
|
||
|
||
declare global {
|
||
interface Window {
|
||
turnstile?: {
|
||
render: (
|
||
container: string | HTMLElement,
|
||
options: {
|
||
sitekey: string;
|
||
theme?: 'light' | 'dark' | 'auto';
|
||
callback?: (token: string) => void;
|
||
'expired-callback'?: () => void;
|
||
'error-callback'?: () => void;
|
||
}
|
||
) => string;
|
||
reset: (widgetId?: string) => void;
|
||
};
|
||
}
|
||
}
|
||
|
||
type Status = 'idle' | 'loading' | 'sent' | 'error';
|
||
|
||
export default function Contact() {
|
||
const [status, setStatus] = useState<Status>('idle');
|
||
const [errorMessage, setErrorMessage] = useState('');
|
||
const [turnstileToken, setTurnstileToken] = useState('');
|
||
const widgetIdRef = useRef<string | null>(null);
|
||
const turnstileRef = useRef<HTMLDivElement | null>(null);
|
||
const startedAtRef = useRef<number>(Date.now());
|
||
|
||
useEffect(() => {
|
||
if (!TURNSTILE_SITE_KEY) {
|
||
setErrorMessage('Captcha is not configured correctly.');
|
||
return;
|
||
}
|
||
|
||
const scriptId = 'cf-turnstile-script';
|
||
|
||
const renderWidget = () => {
|
||
if (!window.turnstile || !turnstileRef.current || widgetIdRef.current) return;
|
||
|
||
widgetIdRef.current = window.turnstile.render(turnstileRef.current, {
|
||
sitekey: TURNSTILE_SITE_KEY,
|
||
theme: 'dark',
|
||
callback: token => {
|
||
setTurnstileToken(token);
|
||
setErrorMessage('');
|
||
},
|
||
'expired-callback': () => {
|
||
setTurnstileToken('');
|
||
},
|
||
'error-callback': () => {
|
||
setTurnstileToken('');
|
||
setErrorMessage('Captcha failed to load. Please try again.');
|
||
},
|
||
});
|
||
};
|
||
|
||
if (document.getElementById(scriptId)) {
|
||
renderWidget();
|
||
return;
|
||
}
|
||
|
||
const script = document.createElement('script');
|
||
script.id = scriptId;
|
||
script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
|
||
script.async = true;
|
||
script.defer = true;
|
||
script.onload = renderWidget;
|
||
document.body.appendChild(script);
|
||
}, []);
|
||
|
||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
setStatus('loading');
|
||
setErrorMessage('');
|
||
|
||
const form = e.currentTarget;
|
||
const fd = new FormData(form);
|
||
|
||
const payload = {
|
||
name: String(fd.get('name') || '').trim(),
|
||
email: String(fd.get('email') || '').trim(),
|
||
message: String(fd.get('message') || '').trim(),
|
||
company: String(fd.get('company') || '').trim(),
|
||
turnstileToken,
|
||
formStartedAt: String(fd.get('formStartedAt') || ''),
|
||
};
|
||
|
||
if (!payload.name || !payload.email || !payload.message) {
|
||
setStatus('error');
|
||
setErrorMessage('Please complete all fields.');
|
||
return;
|
||
}
|
||
|
||
if (!payload.turnstileToken) {
|
||
setStatus('error');
|
||
setErrorMessage('Please complete the captcha.');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const res = await fetch('/api/contact', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload),
|
||
});
|
||
|
||
const data = await res.json();
|
||
|
||
if (!res.ok) {
|
||
throw new Error(data?.error || 'Failed to send message.');
|
||
}
|
||
|
||
setStatus('sent');
|
||
form.reset();
|
||
startedAtRef.current = Date.now();
|
||
setTurnstileToken('');
|
||
|
||
if (window.turnstile && widgetIdRef.current) {
|
||
window.turnstile.reset(widgetIdRef.current);
|
||
}
|
||
} catch (err) {
|
||
setStatus('error');
|
||
setErrorMessage(
|
||
err instanceof Error ? err.message : 'Something went wrong.',
|
||
);
|
||
|
||
if (window.turnstile && widgetIdRef.current) {
|
||
window.turnstile.reset(widgetIdRef.current);
|
||
}
|
||
setTurnstileToken('');
|
||
}
|
||
}
|
||
|
||
return (
|
||
<section
|
||
id="contact"
|
||
className="py-24 px-6"
|
||
aria-labelledby="contact-heading"
|
||
>
|
||
<div className="max-w-5xl mx-auto">
|
||
<span className="label">Get in touch</span>
|
||
|
||
<h2
|
||
id="contact-heading"
|
||
className="text-[clamp(1.8rem,4vw,2.5rem)] font-black tracking-tight text-white mb-3"
|
||
>
|
||
Let’s work together.
|
||
</h2>
|
||
|
||
<p className="text-sm text-white/40 max-w-2xl mb-10">
|
||
Open to interesting roles, collaborations, and serious product ideas.
|
||
</p>
|
||
|
||
<div className="grid md:grid-cols-[280px_1fr] gap-6">
|
||
{/* Left side contact cards */}
|
||
<div className="flex flex-col gap-3">
|
||
<a
|
||
href={`mailto:${SITE.email}`}
|
||
className="glass rounded-xl p-4 flex items-center gap-3 group hover:border-white/[0.14]
|
||
hover:-translate-x-[-4px] transition-all duration-150"
|
||
>
|
||
<div
|
||
className="w-8 h-8 rounded-lg bg-white/[0.05] flex items-center justify-center flex-shrink-0"
|
||
aria-hidden="true"
|
||
>
|
||
<svg
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="rgba(255,255,255,0.5)"
|
||
strokeWidth="1.8"
|
||
>
|
||
<rect x="2" y="4" width="20" height="16" rx="2" />
|
||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
||
</svg>
|
||
</div>
|
||
<div className="min-w-0">
|
||
<p className="text-[10px] text-white/25 uppercase tracking-wider">
|
||
Email
|
||
</p>
|
||
<p className="text-xs font-medium text-white/55 truncate group-hover:text-white/80 transition-colors">
|
||
{SITE.email}
|
||
</p>
|
||
</div>
|
||
</a>
|
||
|
||
<a
|
||
href={`${GITEA_URL}/${GITEA_USERNAME}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="glass rounded-xl p-4 flex items-center gap-3 group hover:border-white/[0.14]
|
||
hover:translate-x-1 transition-all duration-150"
|
||
>
|
||
<div
|
||
className="w-8 h-8 rounded-lg bg-white/[0.05] flex items-center justify-center flex-shrink-0"
|
||
aria-hidden="true"
|
||
>
|
||
<svg
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="rgba(255,255,255,0.5)"
|
||
strokeWidth="1.8"
|
||
>
|
||
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.2c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
|
||
<path d="M9 18c-4.51 2-5-2-7-2" />
|
||
</svg>
|
||
</div>
|
||
<div className="min-w-0">
|
||
<p className="text-[10px] text-white/25 uppercase tracking-wider">
|
||
Gitea
|
||
</p>
|
||
<p className="text-xs font-medium text-white/55 truncate group-hover:text-white/80 transition-colors">
|
||
{GITEA_URL.replace(/^https?:\/\//, '')}/{GITEA_USERNAME}
|
||
</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
{/* Form */}
|
||
<form
|
||
onSubmit={handleSubmit}
|
||
className="glass rounded-xl p-6 flex flex-col gap-4 relative"
|
||
noValidate
|
||
>
|
||
<input
|
||
type="hidden"
|
||
name="formStartedAt"
|
||
value={String(startedAtRef.current)}
|
||
/>
|
||
|
||
{/* Honeypot */}
|
||
<div
|
||
className="absolute left-[-5000px] opacity-0 pointer-events-none"
|
||
aria-hidden="true"
|
||
>
|
||
<label htmlFor="company">Company</label>
|
||
<input
|
||
id="company"
|
||
name="company"
|
||
type="text"
|
||
tabIndex={-1}
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid sm:grid-cols-2 gap-4">
|
||
<label className="flex flex-col gap-1.5">
|
||
<span className="text-[10px] font-semibold uppercase tracking-wider text-white/30">
|
||
Name
|
||
</span>
|
||
<input
|
||
name="name"
|
||
type="text"
|
||
required
|
||
placeholder="Your name"
|
||
autoComplete="name"
|
||
className="bg-white/[0.03] border border-white/[0.08] rounded-lg px-3 py-2.5 text-sm
|
||
text-white placeholder-white/20 outline-none transition-colors
|
||
focus:border-white/[0.2] focus:ring-1 focus:ring-white/[0.1]"
|
||
/>
|
||
</label>
|
||
|
||
<label className="flex flex-col gap-1.5">
|
||
<span className="text-[10px] font-semibold uppercase tracking-wider text-white/30">
|
||
Email
|
||
</span>
|
||
<input
|
||
name="email"
|
||
type="email"
|
||
required
|
||
placeholder="you@example.com"
|
||
autoComplete="email"
|
||
className="bg-white/[0.03] border border-white/[0.08] rounded-lg px-3 py-2.5 text-sm
|
||
text-white placeholder-white/20 outline-none transition-colors
|
||
focus:border-white/[0.2] focus:ring-1 focus:ring-white/[0.1]"
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
<label className="flex flex-col gap-1.5">
|
||
<span className="text-[10px] font-semibold uppercase tracking-wider text-white/30">
|
||
Message
|
||
</span>
|
||
<textarea
|
||
name="message"
|
||
required
|
||
placeholder="What’s on your mind?"
|
||
rows={5}
|
||
className="bg-white/[0.03] border border-white/[0.08] rounded-lg px-3 py-2.5 text-sm
|
||
text-white placeholder-white/20 outline-none resize-none transition-colors
|
||
focus:border-white/[0.2] focus:ring-1 focus:ring-white/[0.1]"
|
||
/>
|
||
</label>
|
||
|
||
<div>
|
||
{TURNSTILE_SITE_KEY ? (
|
||
<div ref={turnstileRef} />
|
||
) : (
|
||
<p className="text-xs text-red-300/80">
|
||
Captcha is not configured correctly.
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4 flex-wrap">
|
||
<button
|
||
type="submit"
|
||
disabled={status === 'loading'}
|
||
className="btn btn-primary disabled:opacity-60 disabled:cursor-not-allowed"
|
||
>
|
||
{status === 'loading'
|
||
? 'Sending…'
|
||
: status === 'sent'
|
||
? 'Message sent'
|
||
: 'Send message'}
|
||
</button>
|
||
|
||
{status === 'sent' && (
|
||
<p className="text-xs text-white/45">
|
||
Thanks — your message has been sent.
|
||
</p>
|
||
)}
|
||
|
||
{status === 'error' && errorMessage && (
|
||
<p className="text-xs text-red-300/80">{errorMessage}</p>
|
||
)}
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|