import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {ArrowRight, Scale, ShieldCheck, CalendarDays, FileText, Users, Bell, MessageSquare, ChevronRight, Menu, X, Search, Plus, Download, Upload, CheckCircle2, Clock3, MapPin, Phone, Mail} from 'lucide-react';
import './styles.css';

const cases=[{title:'Mehta Industries v. R K Suppliers',no:'CS (COMM) 218/2025',type:'Corporate',court:'Delhi High Court',next:'12 Aug 2026',status:'Active',client:'Mehta Industries'},{title:'Ananya Sharma v. Karan Sharma',no:'MAT.APP.(F.C.) 41/2026',type:'Family',court:'Family Court, Saket',next:'18 Aug 2026',status:'Pending',client:'Ananya Sharma'},{title:'Greenview Residency Dispute',no:'CS(OS) 72/2026',type:'Property',court:'Delhi High Court',next:'25 Aug 2026',status:'Active',client:'Greenview RWA'}];
const services=[['Criminal Defence','Confident representation at every stage, from bail to trial and appeal.'],['Civil Litigation','Practical dispute resolution before courts and tribunals.'],['Corporate Law','Commercial clarity for contracts, governance and transactions.'],['Property & Real Estate','Diligent support for title, transactions and property disputes.'],['Family Law','Sensitive, considered counsel for family matters.'],['Arbitration & Dispute Resolution','Focused strategy for efficient commercial resolution.']];
const blogs=[['How Property Disputes Are Resolved in India','Property Law','Learn the path from documentation and notices to court-led remedies.'],['Understanding Bail Procedures in India','Criminal Law','A straightforward overview of regular, anticipatory and interim bail.'],['Important Legal Documents Every Business Should Have','Corporate Law','The essential legal foundation for growing Indian businesses.']];
function Logo(){return <div className="logo"><span>LEX</span><i>O</i><span>RA</span><small>LEGAL ASSOCIATES</small></div>}
function PublicNav({go}){const [open,setOpen]=useState(false);return <><nav className="public-nav"><Logo/><div className={open?'links open':'links'}>{['Home','About','Services','Advocates','Insights','Contact'].map(x=><a key={x} onClick={()=>{go(x.toLowerCase());setOpen(false)}}>{x}</a>)}<button className="gold small" onClick={()=>go('consult')}>Book Consultation</button></div><button className="menu" onClick={()=>setOpen(!open)}>{open?<X/>:<Menu/>}</button></nav></>}
function Home({go}){return <><section className="hero"><div className="hero-copy"><p className="eyebrow">NEW DELHI · PAN-INDIA REPRESENTATION</p><h1>Experienced Advocates.<br/><em>Trusted</em> Legal Representation.</h1><p>Providing strategic legal solutions in litigation, corporate advisory, property disputes, and legal consultancy across India.</p><div className="actions"><button className="gold" onClick={()=>go('consult')}>Book Consultation <ArrowRight/></button><button className="outline" onClick={()=>go('contact')}>Contact Our Office</button></div><div className="trust"><span><ShieldCheck/>Client confidentiality</span><span><Scale/>15+ years of practice</span><span><CheckCircle2/>Court-ready strategy</span></div></div><div className="hero-art"><div className="arch"><Scale size={92}/></div><p>Lexora Legal Associates<br/><b>Strategic counsel. Lasting confidence.</b></p></div></section><section className="intro section"><p className="eyebrow dark">THE LEXORA STANDARD</p><h2>Clarity when it matters most.</h2><p className="lead">We pair careful legal reasoning with commercial awareness, so every client understands their position and their next move.</p><div className="stats"><div><b>15+</b><span>Years of combined leadership</span></div><div><b>6</b><span>Core practice areas</span></div><div><b>Pan-India</b><span>Legal representation</span></div></div></section><ServiceGrid go={go}/><section className="cta"><p className="eyebrow">LET’S DISCUSS YOUR MATTER</p><h2>Legal counsel that feels<br/>considered and decisive.</h2><button className="gold" onClick={()=>go('consult')}>Request a consultation <ArrowRight/></button></section></>}
function ServiceGrid({go}){return <section className="section ash"><p className="eyebrow dark">PRACTICE AREAS</p><div className="row-title"><h2>Built for the matters<br/>that shape your future.</h2><button className="text-btn" onClick={()=>go('services')}>View all services <ArrowRight/></button></div><div className="service-grid">{services.map(([t,d],i)=><article className="service" key={t}><span>0{i+1}</span><Scale/><h3>{t}</h3><p>{d}</p><button onClick={()=>go('services')}><ArrowRight/></button></article>)}</div></section>}
function About(){return <section className="section page"><p className="eyebrow dark">ABOUT LEXORA</p><h1>Principled counsel.<br/><em>Practical</em> outcomes.</h1><div className="two-col"><div><p className="lead">Lexora Legal Associates is a full-service Indian law firm providing legal consultation and representation before courts, tribunals, and legal authorities.</p><p>Based in New Delhi, our team brings disciplined preparation, candid advice, and unwavering discretion to every mandate. We build lasting relationships through work that is rigorous, responsive and focused on the client’s objectives.</p></div><div className="quote">“The best legal strategy is one a client can understand and trust.”<small>OUR PROFESSIONAL APPROACH</small></div></div><div className="values"><div><b>Mission</b><p>To make high-quality legal counsel accessible, strategic and dependable.</p></div><div><b>Vision</b><p>To be the trusted legal partner for people and businesses navigating consequential decisions.</p></div><div><b>Confidentiality</b><p>Every conversation, record and instruction is handled with the utmost professional confidence.</p></div></div></section>}
function Services(){return <section className="section page"><p className="eyebrow dark">OUR EXPERTISE</p><h1>Focused expertise across<br/>India’s legal landscape.</h1><div className="service-list">{services.map(([t,d])=><article key={t}><Scale/><div><h3>{t}</h3><p>{d} Our advocates provide precise, client-focused advice from initial consultation through resolution.</p></div><button className="text-btn">Learn more <ChevronRight/></button></article>)}</div></section>}
function Advocates(){return <section className="section page"><p className="eyebrow dark">OUR PEOPLE</p><h1>Advocates with the<br/><em>judgment</em> to lead.</h1><div className="people"><article><div className="portrait">RM</div><p className="eyebrow dark">FOUNDER & MANAGING PARTNER</p><h2>Advocate Rohan Mehta</h2><p>15+ years’ experience in Corporate Law and Civil Litigation, advising businesses and individuals on complex commercial and civil disputes.</p><button className="text-btn">View profile <ArrowRight/></button></article><article><div className="portrait goldtone">AK</div><p className="eyebrow dark">SENIOR ASSOCIATE</p><h2>Advocate Ananya Kapoor</h2><p>Trusted counsel for Family Law and Property Matters, combining empathetic advice with detail-oriented legal preparation.</p><button className="text-btn">View profile <ArrowRight/></button></article></div></section>}
function Insights(){return <section className="section page"><p className="eyebrow dark">LEXORA INSIGHTS</p><h1>Legal perspective,<br/>made <em>clearer.</em></h1><div className="blog-grid">{blogs.map(([t,c,d],i)=><article key={t}><div className={'blog-image b'+i}><FileText/></div><p className="eyebrow dark">{c}</p><h3>{t}</h3><p>{d}</p><button className="text-btn">Read article <ArrowRight/></button></article>)}</div></section>}
function Contact({consult=false}){const [sent,setSent]=useState(false);return <section className="section page contact"><p className="eyebrow dark">{consult?'BEGIN A CONVERSATION':'CONTACT LEXORA'}</p><h1>{consult?'How can we help?':'Our office is here to help.'}</h1><div className="contact-grid"><form onSubmit={e=>{e.preventDefault();setSent(true)}}>{sent?<div className="success"><CheckCircle2/><h2>Thank you.</h2><p>Your consultation request has been securely received. Our office will be in touch shortly.</p></div>:<><label>Full Name<input required placeholder="Your full name"/></label><label>Phone Number<input required type="tel" placeholder="+91"/></label><label>Email<input required type="email" placeholder="you@example.com"/></label><label>Legal Category<select><option>Choose a practice area</option>{services.map(s=><option key={s[0]}>{s[0]}</option>)}</select></label><label>Message<textarea required placeholder="Briefly tell us about your matter"/></label><small>This form includes a spam protection placeholder. Submission is encrypted in production.</small><button className="gold">Submit securely <ArrowRight/></button></>}</form><aside><h3>Lexora Legal Associates</h3><p><MapPin/> Connaught Place, New Delhi, India</p><p><Phone/> +91 98765 43210</p><p><Mail/> contact@lexoralegal.in</p><div className="map">NEW DELHI<br/><span>Map integration placeholder</span></div></aside></div></section>}
function Footer(){return <footer><Logo/><p><b>DISCLAIMER:</b> As per the rules of the Bar Council of India, this website does not solicit work or advertise. The information provided is for general informational purposes only and should not be considered legal advice. Viewing this website or contacting the firm does not create an advocate-client relationship.</p><div>© 2026 Lexora Legal Associates · Privacy Policy · Terms & Conditions · Disclaimer</div></footer>}
function Public(){const [page,setPage]=useState('home');let content={home:<Home go={setPage}/>,about:<About/>,services:<Services/>,advocates:<Advocates/>,insights:<Insights/>,contact:<Contact/>,consult:<Contact consult/>}[page]||<Home go={setPage}/>;return <><PublicNav go={setPage}/>{content}<Footer/></>}
function Portal({client=false,onExit}){const [tab,setTab]=useState('Overview');const [toast,setToast]=useState('');const nav=client?['Overview','My Cases','Documents','Appointments','Messages']:['Overview','Cases','Clients','Documents','Calendar','Messages','Reports']; const notify=t=>{setToast(t);setTimeout(()=>setToast(''),2500)};return <div className="portal"><aside className="sidebar"><Logo/><div className="workspace">{client?'CLIENT PORTAL':'ADVOCATE WORKSPACE'}</div>{nav.map(n=><button className={tab===n?'active':''} onClick={()=>setTab(n)} key={n}>{({Overview:Scale,Cases:FileText,Clients:Users,Documents:FileText,Calendar:CalendarDays,Messages:MessageSquare,Reports:Bell,'My Cases':Scale,Appointments:CalendarDays}[n]||Scale)()} {n}</button>)}<button className="exit" onClick={onExit}>← View public site</button></aside><main className="portal-main"><header><div><p className="eyebrow dark">{client?'WELCOME BACK, ANANYA':'TUESDAY, 29 JULY 2026'}</p><h2>{tab==='Overview'?(client?'Your legal matters, at a glance.':'Good morning, Rohan.'):tab}</h2></div><div className="head-actions"><button><Search/></button><button><Bell/></button><div className="avatar">{client?'AS':'RM'}</div></div></header>{tab==='Overview'?<Dashboard client={client} setTab={setTab}/>:<PortalContent tab={tab} client={client} notify={notify}/>}</main>{toast&&<div className="toast"><CheckCircle2/>{toast}</div>}</div>}
function Dashboard({client,setTab}){let metrics=client?[['My Cases','2','Active matters'],['Next Hearing','12 Aug','Delhi High Court'],['Documents','8','Available files'],['Messages','3','Unread updates']]:[['Total Cases','48','+4 this month'],['Active Cases','31','64.5% of all cases'],['Upcoming Hearings','9','Next 7 days'],['Total Clients','76','+6 this month'],['Pending Documents','14','Requires review']];return <><section className="metrics">{metrics.map(([a,b,c])=><article key={a}><span>{a}</span><b>{b}</b><small>{c}</small></article>)}</section><section className="portal-grid"><article className="panel large"><div className="panel-title"><h3>{client?'My case progress':'Recent cases'}</h3><button onClick={()=>setTab(client?'My Cases':'Cases')}>View all</button></div>{cases.map(c=><div className="case-row" key={c.no}><div className="case-icon"><Scale/></div><div><b>{c.title}</b><small>{c.no} · {c.court}</small></div><span className={'badge '+c.status.toLowerCase()}>{c.status}</span><strong>{c.next}</strong></div>)}</article><article className="panel"><div className="panel-title"><h3>Upcoming hearings</h3><CalendarDays/></div>{cases.map((c,i)=><div className="hearing" key={c.no}><b>{12+i*6}<small>AUG</small></b><span>{c.title}<small>{c.court} · 10:30 AM</small></span></div>)}</article></section><section className="portal-grid"><article className="panel large"><div className="panel-title"><h3>{client?'Latest documents':'Case activity'}</h3><button>View all</button></div><div className="activity"><FileText/><span><b>Court order uploaded</b><small>Greenview Residency Dispute · 2 hours ago</small></span></div><div className="activity"><MessageSquare/><span><b>Client message received</b><small>Ananya Sharma · 4 hours ago</small></span></div></article><article className="panel chart"><h3>Cases by category</h3><div className="bars"><i style={{height:'64%'}}/><i style={{height:'82%'}}/><i style={{height:'46%'}}/><i style={{height:'70%'}}/><i style={{height:'38%'}}/></div><small>Corporate · Civil · Property · Family · Criminal</small></article></section></>}
function PortalContent({tab,client,notify}){if(tab==='Calendar'||tab==='Appointments')return <section className="panel calendar"><div className="panel-title"><h3>{tab==='Calendar'?'Hearing calendar':'Consultation appointments'}</h3><button className="gold small" onClick={()=>notify('New appointment request created')}><Plus/> Add event</button></div><div className="calendar-days">{Array.from({length:31},(_,i)=><span className={[5,12,18,25].includes(i+1)?'has-event':''} key={i}>{i+1}</span>)}</div><h3>Scheduled this month</h3>{cases.map(c=><div className="case-row" key={c.no}><CalendarDays/><div><b>{c.next} · 10:30 AM</b><small>{c.title} · {c.court}</small></div><span className="badge active">Confirmed</span></div>)}</section>;
if(tab==='Messages')return <section className="messages panel"><div className="inbox">{['Ananya Sharma','Mehta Industries','Greenview RWA'].map((x,i)=><button key={x} className={i===0?'selected':''}><div className="avatar">{x.split(' ').map(a=>a[0]).join('')}</div><span><b>{x}</b><small>Thank you for the update…</small></span></button>)}</div><div className="conversation"><div className="panel-title"><h3>Ananya Sharma</h3><span className="badge active">Secure channel</span></div><p className="bubble">Good afternoon. The next hearing has been scheduled for 18 August.</p><p className="bubble sent">Thank you. Please let me know if any documents are needed from my side.</p><div className="composer"><input placeholder="Write a secure message…"/><button className="gold" onClick={()=>notify('Secure message sent')}>Send</button></div></div></section>;
if(tab==='Reports')return <section className="report-grid"><article className="panel chart wide"><h3>Monthly case activity</h3><div className="linechart">╱╲____╱╲___╱╲____</div><small>January — July 2026</small></article><article className="panel"><h3>Case status</h3><div className="donut">64%<small>Active</small></div></article></section>;
let isDocs=tab==='Documents';return <section className="panel"><div className="panel-title"><h3>{tab==='Cases'||tab==='My Cases'?'Case management':tab==='Clients'?'Client database':'Document library'}</h3><button className="gold small" onClick={()=>notify(isDocs?'Document upload ready':'New record form opened')}><Plus/>{isDocs?'Upload document':'Create '+(tab==='Clients'?'client':'case')}</button></div>{isDocs?['Court Order — Greenview.pdf','FIR Copy — Mehta Industries.pdf','Agreement Draft v3.docx','Identity Documents — A Sharma.zip'].map((x,i)=><div className="case-row" key={x}><div className="case-icon"><FileText/></div><div><b>{x}</b><small>{['Court Orders','FIR','Agreements','Identity Documents'][i]} · Uploaded 2 days ago</small></div><button className="icon" onClick={()=>notify('Download queued')}><Download/></button></div>):cases.map(c=><div className="case-row" key={c.no}><div className="case-icon"><Scale/></div><div><b>{tab==='Clients'?c.client:c.title}</b><small>{tab==='Clients'?c.title:c.no+' · '+c.court}</small></div><span className={'badge '+c.status.toLowerCase()}>{c.status}</span><button className="icon"><ChevronRight/></button></div>)}</section>}
function App(){const [mode,setMode]=useState('public');return mode==='public'?<><div className="demo-bar">Prototype preview <span>Explore the secure portal as:</span><button onClick={()=>setMode('admin')}>Advocate/Admin</button><button onClick={()=>setMode('client')}>Client</button></div><Public/></>:<Portal client={mode==='client'} onExit={()=>setMode('public')}/>};
createRoot(document.getElementById('root')).render(<App/>);