/* ============================================================
Shipstar — marketing landing (composes calculator + offer)
============================================================ */
const { useState:useStateLP, useEffect:useEffectLP, useRef:useRefLP } = React;
/* reveal-on-scroll (transform only) */
function useReveal(){
const ref = useRefLP(null);
useEffectLP(()=>{
const el = ref.current; if(!el) return;
const io = new IntersectionObserver(es=>es.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} }),{threshold:0.15});
el.querySelectorAll('.rv,.rv2,.rv3').forEach(n=>io.observe(n));
return ()=>io.disconnect();
},[]);
return ref;
}
const COPY = {
en:{
nav:['How it works','Calculator','Pricing','Contact'], start:'Start free', login:'Log in',
eyebrow:'Vietnam → United States & Canada',
h1a:'Launch your brand in', h1b:'North America', h1c:' — from Vietnam.',
sub:'We warehouse, pick, pack, clear US & Canadian customs, and ship — so you sell in North America without running a single warehouse abroad.',
cta1:'Calculate your savings', cta2:'See how it works',
trust:[['shipped','$120M+','shipped for VN brands'],['brands','1,042','brands launched'],['fc','4','US & CA fulfillment centers']],
hiwK:'How it works', hiwH:'From Saigon to a US doorstep — handled.',
hiwL:'Four steps. You ship to us once; we run the rest across North America.',
steps:[
['Send your inventory','Air or sea from Vietnam — we arrange freight and clear customs.','box'],
['We store & manage','Received, photographed and stocked across US & Canada FCs.','inventory'],
['An order comes in','TikTok Shop, Amazon, Shopify, Temu — synced automatically.','cart'],
['We pick, pack & ship','Duty handled, label printed, delivered in 2–3 days.','truck'],
],
calcK:'See your numbers', calcH:'How much would you save?',
calcL:'Running your own US warehouse is expensive. Drag the sliders — see the gap.',
proofK:'Trusted by Vietnamese founders', proofH:'Brands already selling across the border.',
priceK:'Pricing', priceH:'Simple plans. No hidden fees.', priceL:'Switch or cancel anytime. New sellers get Growth free for a year.',
footTagline:'Cross-border fulfillment for Vietnamese brands.',
},
vi:{
nav:['Cách hoạt động','Máy tính','Bảng giá','Liên hệ'], start:'Bắt đầu miễn phí', login:'Đăng nhập',
eyebrow:'Việt Nam → Hoa Kỳ & Canada',
h1a:'Đưa thương hiệu của bạn đến', h1b:'Bắc Mỹ', h1c:' — từ Việt Nam.',
sub:'Chúng tôi lưu kho, pick, pack, thông quan Mỹ & Canada và giao hàng — để bạn bán ở Bắc Mỹ mà không cần kho riêng ở nước ngoài.',
cta1:'Tính số tiền tiết kiệm', cta2:'Xem cách hoạt động',
trust:[['shipped','$120Tr+','đã giao cho thương hiệu Việt'],['brands','1.042','thương hiệu đã ra mắt'],['fc','4','trung tâm tại Mỹ & Canada']],
hiwK:'Cách hoạt động', hiwH:'Từ Sài Gòn đến tận cửa nhà ở Mỹ.',
hiwL:'Bốn bước. Bạn gửi hàng một lần, chúng tôi lo phần còn lại trên khắp Bắc Mỹ.',
steps:[
['Gửi hàng cho chúng tôi','Đường air hoặc sea từ Việt Nam — chúng tôi lo vận chuyển & hải quan.','box'],
['Lưu kho & quản lý','Nhận, chụp ảnh và lưu kho tại Mỹ & Canada.','inventory'],
['Có đơn hàng','TikTok Shop, Amazon, Shopify, Temu — tự động đồng bộ.','cart'],
['Pick, pack & giao','Lo thuế, in nhãn, giao trong 2–3 ngày.','truck'],
],
calcK:'Xem con số của bạn', calcH:'Bạn sẽ tiết kiệm bao nhiêu?',
calcL:'Tự vận hành kho ở Mỹ rất tốn kém. Kéo thanh trượt để thấy sự khác biệt.',
proofK:'Được nhà sáng lập Việt tin dùng', proofH:'Các thương hiệu đã bán xuyên biên giới.',
priceK:'Bảng giá', priceH:'Gói đơn giản. Không phí ẩn.', priceL:'Đổi hoặc hủy bất cứ lúc nào. Người bán mới được miễn phí Growth 1 năm.',
footTagline:'Hoàn tất đơn hàng xuyên biên giới cho thương hiệu Việt.',
},
};
function HeroVisual(){
const stage = useRefLP(null);
const [m,setM] = useStateLP({x:0,y:0});
const onMove = (e)=>{
const r = stage.current.getBoundingClientRect();
setM({ x:((e.clientX-r.left)/r.width-0.5)*2, y:((e.clientY-r.top)/r.height-0.5)*2 });
};
const lyr = (depth)=>({ transform:`translate(${m.x*depth}px,${m.y*depth}px)` });
return (
{[
['“We closed our LA warehouse. Shipstar ships faster and our landed cost dropped 31%.”','Trần Minh','Saigon Ceramics Co.','brand','SGC'],
['“Customs used to terrify me. Now I just send the container and orders go out.”','Phạm Lan','Mekong Naturals','green','MKN'],
['“TikTok Shop orders are picked and shipped same-day. My margin finally makes sense.”','Lê Quân','Hanoi Home Goods','blue','HHG'],
].map((q,i)=>(
{q[0]}
{q[1]}
{q[2]}
))}
{['Saigon Ceramics','Mekong Naturals','Hanoi Home','Da Nang Apparel','Hue Silk','Lotus Beauty','Bamboo & Co.'].map(l=>{l})}
{/* CALCULATOR */}
{c.calcK}
{c.calcH}
{c.calcL}
{/* OFFER */}
{/* PRICING */}
{c.priceK}
{c.priceH}
{c.priceL}
{/* FOOTER */}
);
}
function Trust({ v, l }){
// count up the numeric part if present
const m = String(v).match(/^([^\d]*)([\d.,]+)(.*)$/);
let display = v;
if(m){ const num = parseFloat(m[2].replace(/,/g,'')); display = ; }
return
{display}
{l}
;
}
function CountTrust({ prefix, value, raw, suffix }){
const dec = raw.includes('.')?(raw.split('.')[1].length):0;
const shown = useCountUp(value, { prefix, suffix, decimals:dec });
return <>{shown};
}
function Tier({ cls, name, price, unit, desc, feats, cta, hot, badge, go }){
return (