https://motor-city-shine.lovable.app/assets/shop._id-Ce6nSTi8.js

1import{E as y,r,F as v,b as w,u as k,n as C,j as e,L as u,p as z}from"./main-DgYAUjs3.js";import{C as S}from"./chevron-left-tkZAfFgK.js";function q(){const{product:p,id:o}=y.useLoaderData(),[s,h]=r.useState(p);r.useEffect(()=>{s||v().then(t=>{const x=t.find(N=>N.id===o);x&&h(x)})},[o,s]);const{products:n}=w(),{addItem:f}=k(),b=C(),[a,c]=r.useState(void 0),[i,d]=r.useState(1),[l,g]=r.useState("front");if(r.useEffect(()=>{s&&a===void 0&&c(s.sizes?.[1]??s.sizes?.[0])},[s,a]),!s)return e.jsx("div",{className:"pt-32 pb-20 text-center",children:e.jsx("p",{className:"text-foreground/70",children:"Loading product…"})});const j=l==="back"&&s.hoverImage?s.hoverImage:s.image;function m(t){s&&(s.sizes&&!a||(f({id:s.id,name:s.name,price:s.price,image:s.image,size:a},i),t&&b({to:"/cart"})))}return e.jsx("section",{className:"bg-background pt-24 pb-20 min-h-screen",children:e.jsxs("div",{className:"container-x max-w-6xl",children:[e.jsxs(u,{to:"/shop",className:"inline-flex items-center text-sm text-foreground/70 hover:text-primary mb-6",children:[e.jsx(S,{className:"h-4 w-4 mr-1"})," Back to Shop"]}),e.jsxs("div",{className:"grid gap-10 md:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx("div",{className:"aspect-square bg-muted border border-border overflow-hidden",children:e.jsx("img",{src:j,alt:s.alt,className:"w-full h-full object-cover"})}),s.hoverImage&&e.jsx("div",{className:"mt-3 grid grid-cols-2 gap-3",children:[{key:"front",src:s.image,label:"Front"},{key:"back",src:s.hoverImage,label:"Back"}].map(t=>e.jsx("button",{type:"button",onClick:()=>g(t.key),className:`aspect-square bg-muted border overflow-hidden ${l===t.key?"border-primary":"border-border"}`,"aria-label":t.label,children:e.jsx("img",{src:t.src,alt:t.label,className:"w-full h-full object-cover",loading:"lazy",decoding:"async"})},t.key))})]}),e.jsxs("div",{children:[e.jsx("h1",{className:"font-condensed text-3xl md:text-4xl uppercase tracking-wide text-foreground",children:s.name}),e.jsxs("p",{className:"mt-2 text-2xl font-sans font-semibold text-foreground",children:["$",s.price.toFixed(2)]}),e.jsx("p",{className:"mt-6 text-sm text-foreground/70 leading-relaxed",children:s.description}),s.sizes&&e.jsxs("div",{className:"mt-6",children:[e.jsx("p",{className:"text-xs font-semibold uppercase tracking-wide text-foreground/70 mb-2",children:"Size"}),e.jsx("div",{className:"flex flex-wrap gap-2",children:s.sizes.map(t=>e.jsx("button",{type:"button",onClick:()=>c(t),className:`min-w-[48px] px-3 py-2 border text-sm font-semibold ${a===t?"border-primary bg-primary text-white":"border-input text-foreground hover:border-foreground

1/40"}`,children:t},t))})]}),e.jsxs("div",{className:"mt-6",children:[e.jsx("p",{className:"text-xs font-semibold uppercase tracking-wide text-foreground/70 mb-2",children:"Quantity"}),e.jsxs("div",{className:"inline-flex items-center border border-input",children:[e.jsx("button",{type:"button",onClick:()=>d(Math.max(1,i-1)),className:"px-3 py-2 hover:bg-muted",children:"−"}),e.jsx("span",{className:"px-4 text-sm min-w-[2ch] text-center",children:i}),e.jsx("button",{type:"button",onClick:()=>d(i+1),className:"px-3 py-2 hover:bg-muted",children:"+"})]})]}),e.jsxs("div",{className:"mt-8 flex flex-col sm:flex-row gap-3",children:[e.jsx("button",{type:"button",onClick:()=>m(!1),className:"flex-1 inline-flex items-center justify-center border border-primary text-primary px-6 py-3 font-sans text-sm font-semibold hover:bg-primary hover:text-white transition-colors",children:"Add to Cart"}),e.jsx("button",{type:"button",onClick:()=>m(!0),className:"flex-1 inline-flex items-center justify-center bg-primary text-white px-6 py-3 font-sans text-sm font-semibold hover:bg-primary/90",children:"Buy Now"})]}),e.jsx("p",{className:"mt-4 text-xs text-foreground/60",children:"Online payment coming soon — for now, checkout submits an order inquiry and we’ll follow up with pickup details."})]})]}),e.jsxs("div",{className:"mt-20",children:[e.jsx("h2",{className:"font-condensed text-2xl uppercase tracking-wide text-foreground mb-6",children:"More Merch"}),e.jsx("div",{className:"grid gap-6 sm:grid-cols-2 lg:grid-cols-4",children:(n.length>0?n:z).filter(t=>t.id!==s.id).map(t=>e.jsxs(u,{to:"/shop/$id",params:{id:t.id},className:"group block bg-card border border-border",children:[e.jsx("div",{className:"aspect-square bg-muted overflow-hidden",children:e.jsx("img",{src:t.image,alt:t.alt,className:"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300",loading:"lazy",decoding:"async"})}),e.jsxs("div",{className:"p-3",children:[e.jsx("p",{className:"font-sans text-sm font-semibold",children:t.name}),e.jsxs("p",{className:"text-xs text-foreground/70 mt-0.5",children:["$",t.price.toFixed(2)]})]})]},t.id))})]})]})})}export{q as component};