import{ArrowLeft,Info,MoreHorizontal,Paperclip,Search,Send,ShieldCheck}from"lucide-react";import{SiteHeader}from"../../components/site-shell";
export default function Messages(){return <div className="messages-page"><SiteHeader compact/><main className="message-app"><aside className="conversation-sidebar"><div className="conversation-head"><a href="/dashboard/buyer"><ArrowLeft size={19}/></a><div><h1>Messages</h1><p>Buyer ↔ seller conversations</p></div></div><label><Search size={17}/><input placeholder="Search conversations"/></label><div className="conversation-tabs"><button className="active">All <b>3</b></button><button>Unread <b>3</b></button><button>Archived</button></div>{[{initial:"A",name:"Afterglow Productions",event:"Neon Harbor Festival",text:"Parking opens at 4:30 PM.",time:"2m",unread:2,color:"purple"},{initial:"W",name:"West Coast Live",event:"Courtside Legends",text:"Your seats are together in Row B.",time:"1h",unread:1,color:"orange"},{initial:"G",name:"Gather California",event:"Taste of the Coast",text:"Thanks for reaching out!",time:"Tue",unread:0,color:"green"}].map((c,i)=><button className={`conversation-item ${i===0?"active":""}`} key={c.name}><span className={`conversation-avatar ${c.color}`}>{c.initial}</span><span><b>{c.name}</b><small>{c.event}</small><em>{c.text}</em></span><i>{c.time}{c.unread>0&&<b>{c.unread}</b>}</i></button>)}</aside><section className="message-thread"><header><div><span className="conversation-avatar purple">A</span><div><b>Afterglow Productions</b><small><i/> Online · Usually replies within 2 hours</small></div></div><span><button><Info size={19}/></button><button><MoreHorizontal size={20}/></button></span></header><div className="thread-safety"><ShieldCheck size={16}/><span><b>Keep it on EasyPay.</b> Never pay or transfer tickets outside this platform.</span></div><div className="thread-body"><span className="thread-date">Today</span><div className="thread-event-card"><span style={{background:"linear-gradient(145deg,#ff5b79,#8a3ffc,#1726a7)"}}><b>19</b>SEP</span><div><b>Neon Harbor Festival</b><small>Order EPT-48291 · 2 tickets</small></div><a href="/event/neon-harbor-festival">View event</a></div><div className="bubble seller">Hi James! Thanks for getting tickets. Let us know if you have any questions before the event.<small>1:52 PM</small></div><div className="bubble buyer">Hi, is parking available at the venue?<small>2:08 PM · Read</small></div><div className="bubble seller">Yes! The south lot opens at 4:30 PM and costs $12. Rideshare drop-off is free at Gate C.<small>2:10 PM</small></div></div><form className="message-compose"><button type="button"><Paperclip size={19}/></button><input aria-label="Message seller" placeholder="Write a message…"/><button className="send-message" type="submit"><Send size={18}/></button></form></section><aside className="message-details"><h2>Conversation details</h2><div className="details-event"><span style={{background:"linear-gradient(145deg,#ff5b79,#8a3ffc,#1726a7)"}}/><b>Neon Harbor Festival</b><small>Sep 19 · Costa Mesa</small></div><dl><dt>Order</dt><dd>EPT-48291</dd><dt>Tickets</dt><dd>2 × General Admission</dd><dt>Seller chat</dt><dd><span className="status success">Enabled</span></dd></dl><button>View order</button><button className="report-button">Report conversation</button><p>Messages may be reviewed by EasyPay only when reported, risk-flagged or needed for support.</p></aside></main></div>}
