);
}
/* ── scroll-reveal hook ────────────────────────────── */
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll(".reveal");
if (!("IntersectionObserver" in window)) { els.forEach(e => e.classList.add("in")); return; }
const io = new IntersectionObserver((ents) => {
ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
}, { threshold: 0.12, rootMargin: "0px 0px -7% 0px" });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
}
/* ── carousel ──────────────────────────────────────── */
function Carousel() {
const [i, setI] = useState(0);
const n = SLIDES.length;
const go = d => setI(p => (p + d + n) % n);
useEffect(() => {
const t = setInterval(() => setI(p => (p + 1) % n), 6000);
return () => clearInterval(t);
}, [n]);
return (
{SLIDES.map((s, k) => (
{s.idx}
{s.title}
{s.copy}
{s.tags.map((t, j) => {t[0]})}
))}
{SLIDES.map((_, k) => (
);
}
/* ── request form ──────────────────────────────────── */
function RequestForm() {
const [color, setColor] = useState("Red");
const [size, setSize] = useState("L");
const [qty, setQty] = useState(1);
const [name, setName] = useState("");
const [number, setNumber] = useState("");
const [map, setMap] = useState(false);
const [done, setDone] = useState(false);
const [busy, setBusy] = useState(false);
const [err, setErr] = useState("");
async function submit(e) {
e.preventDefault();
setErr("");
const f = e.target;
const email = f.email.value.trim();
const state = f.ship_state.value;
if (!email) { setErr("Please add an email so we can send your price."); return; }
if (!state) { setErr("Please pick the state we'd ship to."); return; }
setBusy(true);
const data = {
email,
ship_state: state,
color, size, quantity: qty,
name_on_back: name || "—",
number_on_back: number || "—",
map_on_back: map ? "Yes" : "No",
notes: f.notes.value || "—",
_subject: `MY26TH request · ${color} ${size} → ${state}`,
};
try {
const r = await fetch(FORMSPREE, {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify(data),
});
if (r.ok) setDone(true);
else setErr("Something went wrong. Email hello@pozadigital.com and we'll sort it.");
} catch {
setErr("Network hiccup. Try again, or email hello@pozadigital.com.");
} finally { setBusy(false); }
}
if (done) return (
Request received.
We'll email your exact price within 1–2 days with a simple way to pay. Nothing is printed until you say go — pay as you go, then we print and ship to your state.
Your range: $35–$50 · print on demand
);
return (
);
// (preview state is read by parent via context-free lift — see App)
}
/* ── App ───────────────────────────────────────────── */
function App() {
// lifted preview state shared between form + preview
const [pv, setPv] = useState({ color: "Red", size: "L", name: "", number: "", map: false });
useReveal();
return (
{/* ribbon */}
A LibPrintz dropPowered by POZA DigitalPrint on demand · pay as you go
{/* nav */}
{/* hero */}
One gear · two events
MY26TH
The July 26th Liberia Independence tee — built for the Twin Cities. Wear it to Minnesota United v Liberia on the 25th, wear it home on the 26th. Your color, your size, your name and number, the map on your back.
{/* footer */}
);
}
/* LiveForm wraps RequestForm fields but syncs to preview state */
function LiveForm({ pv, setPv }) {
const [done, setDone] = useState(false);
const [busy, setBusy] = useState(false);
const [err, setErr] = useState("");
const set = patch => setPv(p => ({ ...p, ...patch }));
async function submit(e) {
e.preventDefault();
setErr("");
const f = e.target;
const email = f.email.value.trim();
const state = f.ship_state.value;
if (!email) { setErr("Please add an email so we can send your price."); return; }
if (!state) { setErr("Please pick the state we'd ship to."); return; }
setBusy(true);
const data = {
email, ship_state: state,
color: pv.color, size: pv.size, quantity: pv.qty || 1,
name_on_back: pv.name || "\u2014",
number_on_back: pv.number || "\u2014",
map_on_back: pv.map ? "Yes" : "No",
notes: f.notes.value || "\u2014",
_subject: `MY26TH request \u00b7 ${pv.color} ${pv.size} \u2192 ${state}`,
};
try {
const r = await fetch(FORMSPREE, { method:"POST", headers:{ "Content-Type":"application/json", Accept:"application/json" }, body: JSON.stringify(data) });
if (r.ok) setDone(true);
else setErr("Something went wrong. Email hello@pozadigital.com and we'll sort it.");
} catch { setErr("Network hiccup. Try again, or email hello@pozadigital.com."); }
finally { setBusy(false); }
}
if (done) return (
Request received.
We'll email your exact price within 1–2 days with a simple way to pay. Nothing prints until you say go — pay as you go, then we make it and ship to {pv.shipState || "your state"}.
