import { useState } from “react”;

const gold = “#c9a96e”;
const goldLt = “#e2c896”;
const navy = “#0f1623”;
const navy2 = “#1a2438”;
const cream = “#faf7f2”;
const grey = “#8a8f9e”;
const greyLt = “#dddfe6”;
const green = “#4caf84”;
const amber = “#e8a936”;
const red = “#e05c5c”;

const S = {
// root
root: { fontFamily: “‘Poppins’, sans-serif”, background: cream, color: navy, lineHeight: “1.6”, display: “block”, width: “100%”, WebkitFontSmoothing: “antialiased” },
// hero
hero: { background: navy, padding: “56px 28px 72px”, textAlign: “center”, position: “relative”, overflow: “hidden” },
heroBg: { position: “absolute”, inset: 0, background: “radial-gradient(ellipse 80% 55% at 50% 110%, rgba(201,169,110,0.18) 0%, transparent 65%)”, pointerEvents: “none” },
heroEye: { fontSize: 10, letterSpacing: “0.22em”, textTransform: “uppercase”, color: gold, marginBottom: 14, display: “block”, fontWeight: 500 },
heroH1: { fontFamily: “‘Cormorant’, Georgia, serif”, fontSize: “clamp(38px,6vw,62px)”, fontWeight: 300, color: “#fff”, lineHeight: 1.12, marginBottom: 12 },
heroEm: { fontStyle: “italic”, color: goldLt },
heroSub: { color: grey, fontSize: 14, fontWeight: 300, maxWidth: 460, margin: “0 auto”, lineHeight: 1.75 },
// wrap
wrap: { maxWidth: 820, margin: “-32px auto 0”, padding: “0 18px 60px”, position: “relative”, zIndex: 5 },
// card
card: { background: “#fff”, borderRadius: 3, boxShadow: “0 8px 48px rgba(15,22,35,.13), 0 2px 8px rgba(15,22,35,.06)”, padding: “38px 38px 30px”, marginBottom: 20, borderTop: `3px solid ${gold}` },
cardM: { background: “#fff”, borderRadius: 3, boxShadow: “0 8px 48px rgba(15,22,35,.13), 0 2px 8px rgba(15,22,35,.06)”, padding: “24px 20px”, marginBottom: 20, borderTop: `3px solid ${gold}` },
cardTitle: { fontFamily: “‘Cormorant’, Georgia, serif”, fontSize: 24, fontWeight: 600, color: navy, marginBottom: 5, display: “block” },
cardSub: { fontSize: 13, color: grey, marginBottom: 26, display: “block”, lineHeight: 1.7 },
// tabs
tabs: { display: “flex”, borderBottom: `2px solid ${greyLt}`, marginBottom: 24 },
tab: (on) => ({ padding: “10px 18px”, fontSize: 11, fontWeight: 600, letterSpacing: “0.09em”, textTransform: “uppercase”, color: on ? gold : grey, cursor: “pointer”, border: “none”, borderBottom: on ? `2px solid ${gold}` : “2px solid transparent”, marginBottom: -2, background: “none”, fontFamily: “‘Poppins’, sans-serif”, transition: “color .18s” }),
// field
field: { marginBottom: 14 },
label: { display: “block”, fontSize: 10, fontWeight: 700, letterSpacing: “0.14em”, textTransform: “uppercase”, color: navy2, marginBottom: 7 },
input: { width: “100%”, padding: “13px 15px”, border: `1.5px solid ${greyLt}`, borderRadius: 2, fontFamily: “‘Poppins’, sans-serif”, fontSize: 14, color: navy, background: cream, outline: “none”, WebkitAppearance: “none”, appearance: “none” },
inputF: { width: “100%”, padding: “13px 15px”, border: `1.5px solid ${gold}`, borderRadius: 2, fontFamily: “‘Poppins’, sans-serif”, fontSize: 14, color: navy, background: “#fff”, outline: “none”, boxShadow: “0 0 0 3px rgba(201,169,110,.14)”, WebkitAppearance: “none”, appearance: “none” },
row2: { display: “grid”, gridTemplateColumns: “1fr 1fr”, gap: 13 },
// button
btn: { display: “flex”, alignItems: “center”, justifyContent: “center”, gap: 10, width: “100%”, padding: “14px 22px”, background: navy, color: goldLt, border: “none”, borderRadius: 2, fontFamily: “‘Poppins’, sans-serif”, fontSize: 12, fontWeight: 700, letterSpacing: “0.13em”, textTransform: “uppercase”, cursor: “pointer”, marginTop: 8 },
err: { background: “rgba(224,92,92,.08)”, border: `1px solid rgba(224,92,92,.3)`, borderRadius: 2, padding: “10px 13px”, fontSize: 12, color: red, marginTop: 11 },
// result
resHead: { background: navy, borderRadius: “2px 2px 0 0”, padding: “16px 20px”, display: “flex”, alignItems: “center”, justifyContent: “space-between”, gap: 12, flexWrap: “wrap” },
resLbl: { fontSize: 10, letterSpacing: “0.14em”, textTransform: “uppercase”, color: grey, display: “block”, marginBottom: 3 },
resNum: { fontFamily: “‘Cormorant’, Georgia, serif”, fontSize: 20, color: goldLt, fontWeight: 600, display: “block” },
badge: { padding: “5px 14px”, borderRadius: 100, fontSize: 10, fontWeight: 700, letterSpacing: “0.08em”, textTransform: “uppercase”, whiteSpace: “nowrap”, background: “rgba(232,169,54,.15)”, color: amber, border: `1px solid rgba(232,169,54,.3)` },
resBody: { border: `1.5px solid ${greyLt}`, borderTop: “none”, borderRadius: “0 0 2px 2px”, padding: “22px 18px”, background: “#fff” },
metaRow: { display: “grid”, gridTemplateColumns: “repeat(3,1fr)”, gap: 13, marginBottom: 22, paddingBottom: 20, borderBottom: `1px solid ${greyLt}` },
metaLbl: { fontSize: 9, letterSpacing: “0.14em”, textTransform: “uppercase”, color: grey, display: “block”, marginBottom: 3 },
metaVal: { fontSize: 13, fontWeight: 600, color: navy, display: “block” },
// timeline
tlItem: { display: “flex”, gap: 13, paddingBottom: 18 },
tlL: { display: “flex”, flexDirection: “column”, alignItems: “center”, flexShrink: 0, width: 15 },
dot: (type) => ({ width: type===”now”?13:10, height: type===”now”?13:10, borderRadius: “50%”, background: type===”now”?gold:type===”done”?green:greyLt, border: `2px solid ${type===”now”?gold:type===”done”?green:greyLt}`, flexShrink: 0, marginTop: 3, boxShadow: type===”now”?”0 0 0 4px rgba(201,169,110,.18)”:undefined }),
tlLine: { flex: 1, width: 1.5, background: greyLt, marginTop: 3, minHeight: 12 },
tlEvt: (dim) => ({ fontSize: 13, fontWeight: dim?400:600, color: dim?grey:navy, marginBottom: 1, lineHeight: 1.4, display: “block” }),
tlDate: { fontSize: 11, color: grey, display: “block” },
tlLoc: { fontSize: 11, color: grey, fontStyle: “italic”, marginTop: 1, display: “block” },
resActions: { marginTop: 20, paddingTop: 17, borderTop: `1px solid ${greyLt}`, display: “flex”, gap: 10, flexWrap: “wrap” },
abtnP: { padding: “9px 17px”, borderRadius: 2, fontFamily: “‘Poppins’, sans-serif”, fontSize: 10, fontWeight: 700, letterSpacing: “0.09em”, textTransform: “uppercase”, textDecoration: “none”, display: “inline-block”, background: navy, color: goldLt, border: “none” },
abtnS: { padding: “9px 17px”, borderRadius: 2, fontFamily: “‘Poppins’, sans-serif”, fontSize: 10, fontWeight: 700, letterSpacing: “0.09em”, textTransform: “uppercase”, textDecoration: “none”, display: “inline-block”, background: “transparent”, color: navy, border: `1.5px solid ${greyLt}` },
// side card
sideCard: { background: “#fff”, borderRadius: 3, boxShadow: “0 4px 24px rgba(15,22,35,.07)”, padding: “30px 34px”, marginBottom: 20, borderLeft: `3px solid ${gold}` },
sideH2: { fontFamily: “‘Cormorant’, Georgia, serif”, fontSize: 22, fontWeight: 600, color: navy, marginBottom: 5 },
sideP: { fontSize: 13, color: grey, marginBottom: 18, lineHeight: 1.7 },
linkGrid: { display: “grid”, gridTemplateColumns: “repeat(auto-fill, minmax(180px,1fr))”, gap: 10 },
extA: { display: “flex”, alignItems: “center”, gap: 11, padding: “12px 14px”, border: `1.5px solid ${greyLt}`, borderRadius: 2, textDecoration: “none”, color: navy, background: cream, transition: “all .18s” },
extIco: { fontSize: 20, flexShrink: 0, width: 30, textAlign: “center” },
extName: { fontSize: 12, fontWeight: 600, display: “block”, color: navy },
extDesc: { fontSize: 10, color: grey, display: “block” },
extArr: { marginLeft: “auto”, color: greyLt, fontSize: 13, flexShrink: 0 },
// info grid
infoGrid: { display: “grid”, gridTemplateColumns: “1fr 1fr”, gap: 14, marginBottom: 20 },
infoBox: { background: “#fff”, borderRadius: 2, padding: “22px 20px”, boxShadow: “0 2px 12px rgba(15,22,35,.05)” },
infoIco: { fontSize: 24, display: “block”, marginBottom: 10 },
infoH3: { fontFamily: “‘Cormorant’, Georgia, serif”, fontSize: 16, fontWeight: 600, color: navy, marginBottom: 7, lineHeight: 1.3 },
infoP: { fontSize: 12, color: grey, lineHeight: 1.8, margin: 0 },
// faq
faqCard: { background: “#fff”, borderRadius: 3, boxShadow: “0 4px 24px rgba(15,22,35,.07)”, padding: “30px 34px”, marginBottom: 20 },
faqH2: { fontFamily: “‘Cormorant’, Georgia, serif”, fontSize: 22, fontWeight: 600, color: navy, marginBottom: 20 },
faqItem: { borderBottom: `1px solid ${greyLt}` },
faqQ: { width: “100%”, display: “flex”, alignItems: “center”, justifyContent: “space-between”, padding: “15px 0”, fontSize: 13, fontWeight: 600, color: navy, cursor: “pointer”, background: “none”, border: “none”, textAlign: “left”, gap: 14, fontFamily: “‘Poppins’, sans-serif”, lineHeight: 1.45 },
faqA: { paddingBottom: 15, fontSize: 12, color: grey, lineHeight: 1.85 },
// contact
contactBar: { background: navy, borderRadius: 3, padding: “28px 34px”, display: “flex”, alignItems: “center”, justifyContent: “space-between”, gap: 18, flexWrap: “wrap” },
contactH3: { fontFamily: “‘Cormorant’, Georgia, serif”, fontSize: 20, fontWeight: 600, color: “#fff”, marginBottom: 4 },
contactP: { fontSize: 12, color: grey, margin: 0 },
contactBtn: { padding: “11px 22px”, border: `1.5px solid ${gold}`, borderRadius: 2, color: gold, fontFamily: “‘Poppins’, sans-serif”, fontSize: 11, fontWeight: 700, letterSpacing: “0.1em”, textTransform: “uppercase”, textDecoration: “none”, whiteSpace: “nowrap”, display: “inline-block” },
};

const carriers = [
{ ico: “📦”, name: “CJPacket”, desc: “Primary CJ carrier”, url: “https://www.cjpacket.com/” },
{ ico: “🌐”, name: “17TRACK”, desc: “Universal tracker”, url: “https://www.17track.net/en” },
{ ico: “✈️”, name: “DHL Express”, desc: “3–7 day express”, url: “https://www.dhl.com/gb-en/home/tracking.html” },
{ ico: “🚀”, name: “FedEx”, desc: “Express courier”, url: “https://www.fedex.com/en-gb/tracking.html” },
{ ico: “📬”, name: “UPS”, desc: “Express courier”, url: “https://www.ups.com/track?loc=en_GB” },
{ ico: “👑”, name: “Royal Mail”, desc: “UK domestic”, url: “https://www.royalmail.com/track-your-item” },
];

const timeline = [
{ dot: “now”, evt: “In Transit — Departed Origin Country”, date: “Today, 09:42”, loc: “Shanghai, China” },
{ dot: “done”, evt: “Cleared Export Customs”, date: “Yesterday, 16:18”, loc: “Shanghai, China” },
{ dot: “done”, evt: “Quality Checked & Packed”, date: “2 days ago, 11:05”, loc: “CJdropshipping Warehouse, China” },
{ dot: “done”, evt: “Order Received & Processing”, date: “3 days ago, 08:30”, loc: “CJdropshipping System” },
{ dot: “”, evt: “Arriving at UK Customs”, date: “Estimated in 3–5 days”, dim: true },
{ dot: “”, evt: “Delivered to You”, date: “Estimated in 10–15 business days”, dim: true },
];

const faqs = [
{ q: “I haven’t received my tracking number yet — what should I do?”, a: “Check your spam or junk folder first. If your order was placed more than 7 business days ago and you still haven’t received a dispatch email, contact us with your order number and we’ll investigate right away.” },
{ q: “My tracking says \”delivered\” but I haven’t received my parcel”, a: “Check with neighbours, your building reception, and any safe spots (porch, shed) where couriers sometimes leave parcels. If you still can’t find it, contact us within 3 days of the \”delivered\” status and we’ll open a formal investigation.” },
{ q: “My order hasn’t arrived within the estimated delivery window”, a: “Delivery estimates are approximate and may be affected by customs, carrier volumes, or seasonal demand. If your order hasn’t arrived within 60 days of dispatch, contact us and we’ll open a claim with CJdropshipping for a replacement or full refund.” },
{ q: “I received a damaged or incorrect item”, a: “Contact us within 48 hours of delivery with clear photos of the item and packaging. We’ll arrange a replacement or full refund at no cost to you. Please keep the original packaging until the issue is resolved.” },
{ q: “Why does my tracking number start with \”CJP\”?”, a: “\”CJP\” numbers are issued by CJPacket — CJdropshipping’s own carrier service for international parcels. Track these at cjpacket.com or 17track.net. Other formats (1Z, JD, etc.) belong to UPS, DHL, or local postal services.” },
{ q: “Can I change my delivery address after ordering?”, a: “Address changes can only be made before your order is dispatched. Contact us immediately after ordering if you need to update your address. Once dispatched we cannot redirect parcels.” },
];

export default function TrackingPage() {
const [tab, setTab] = useState(“tracking”);
const [trackVal, setTrackVal] = useState(“”);
const [orderVal, setOrderVal] = useState(“”);
const [emailVal, setEmailVal] = useState(“”);
const [focusId, setFocusId] = useState(null);
const [errT, setErrT] = useState(false);
const [errO, setErrO] = useState(false);
const [loading, setLoading] = useState(false);
const [result, setResult] = useState(null);
const [openFaq, setOpenFaq] = useState(null);

function doTrack() {
if (tab === “tracking”) {
if (!trackVal.trim()) { setErrT(true); return; }
setErrT(false);
} else {
if (!orderVal.trim() || !emailVal.trim()) { setErrO(true); return; }
setErrO(false);
}
setLoading(true);
setTimeout(() => {
setLoading(false);
setResult(tab === “tracking” ? trackVal.trim() : orderVal.trim());
}, 1400);
}

return (