import {useEffect,useState} from 'react';import {ArrowRight,CalendarCheck,HeartHandshake,MessageCircle,PlayCircle} from 'lucide-react';import {Link} from 'react-router-dom';import api from '../api/client';
export default function DashboardPage(){const[d,setD]=useState(null);useEffect(()=>{api.get('/community/home/').then(r=>setD(r.data))},[]);if(!d)return <div className="portal-loading">Preparing your community…</div>;return <><section className="member-hero"><div><span className="portal-kicker">YOUR CAMPUS. YOUR COMMUNITY.</span><h1>Grow in faith.<br/>Move with purpose.</h1><p>Stay connected to what God is doing through HSM—on your campus and across the global family.</p><div className="hero-actions"><Link to="/portal/attendance" className="portal-btn light"><CalendarCheck size={17}/>Register attendance</Link><Link to="/portal/give" className="portal-btn glass"><HeartHandshake size={17}/>Give now</Link></div></div><div className="verse-card"><span>WORD FOR THE JOURNEY</span><blockquote>“Let us consider how we may spur one another on toward love and good deeds.”</blockquote><small>HEBREWS 10:24</small></div></section><section className="pulse-grid"><Link to="/portal/forum"><MessageCircle/><span><strong>{d.forum_count}</strong><small>Community conversations</small></span><ArrowRight/></Link><Link to="/portal/attendance"><CalendarCheck/><span><strong>{d.attendance_count}</strong><small>Services attended</small></span><ArrowRight/></Link><Link to="/portal/media"><PlayCircle/><span><strong>{d.sermons.length}</strong><small>Latest sermons</small></span><ArrowRight/></Link></section><div className="portal-grid"><section className="portal-card wide"><div className="card-head"><div><span>STAY INFORMED</span><h2>Announcements</h2></div></div>{d.announcements.length?d.announcements.map(a=><article className="announcement" key={a.id}><i className={a.audience==='ALL'?'hq':'campus'}/><div><span>{a.audience==='ALL'?'HQ · ALL MEMBERS':a.campus_name}</span><h3>{a.title}</h3><p>{a.body}</p></div></article>):<Empty text="No announcements right now."/>}</section><section className="portal-card"><div className="card-head"><div><span>UPCOMING</span><h2>Campus calendar</h2></div><Link to="/portal/attendance">View all</Link></div>{d.services.map(s=><article className="service-mini" key={s.id}><time>{new Date(s.starts_at).toLocaleDateString(undefined,{month:'short',day:'numeric'})}</time><div><strong>{s.title}</strong><small>{s.venue}</small></div></article>)}{!d.services.length&&<Empty text="No upcoming services."/>}</section></div></>};function Empty({text}){return <div className="portal-empty">{text}</div>}
