import React,{useState} from 'react';
import {createRoot} from 'react-dom/client';
import {ShoppingBag, Search, Menu, ArrowRight, X, Minus, Plus, ChevronRight, CreditCard, LockKeyhole} from 'lucide-react';
import './styles.css';

const company={name:'RYTECH DEVELOPMENT PTE. LTD.',email:'RYTECHDEVELOP@outlook.com',address:'91 BENCOOLEN STREET, #12-03, SUNSHINE PLAZA, SINGAPORE 189652'};
const categories=[
 {id:'furniture',label:'Furniture',intro:'Anchor a room with pieces that feel calm, useful and made to stay.',items:[['Orbit Lounge Chair',159,'lounge-chair'],['Meadow Daybed',239,'daybed'],['Elm Entry Bench',109,'entry-bench'],['Twelve Drawer Dresser',219,'dresser'],['Moss Cove Swivel Chair',159,'swivel-chair'],['Nesting Side Tables',79,'nesting-tables'],['Raven Bar Cabinet',199,'bar-cabinet'],['Float Wall Console',139,'wall-console'],['A-Frame Ladder Shelf',129,'ladder-shelf'],['Foldline Bistro Chair',69,'bistro-chair']]},
 {id:'soft',label:'Soft Furnishings',intro:'Tactile layers in a grounded palette for everyday softness.',items:[['Ochre Roman Shade',59,'roman-shade'],['Blue Pebble Floor Cushion',45,'floor-cushion'],['Harbor Stripe Throw',69,'stripe-throw'],['Olive Fold Screen',129,'fold-screen'],['Garden Stitch Cushion',35,'embroidered-cushion'],['Rust Door Curtain',49,'door-curtain'],['Field Table Runner',29,'table-runner'],['Pocket Wall Organizer',39,'wall-pocket'],['Moss Seat Pad',25,'seat-pad'],['Indigo Picnic Throw',79,'picnic-throw']]},
 {id:'essentials',label:'Home Essentials',intro:'Daily rituals, sorted: durable textiles and easy storage.',items:[['Cloudstep House Slippers',24,'slippers'],['Ashwood Hanger Set',19,'hangers'],['Olive Garment Cover',29,'garment-cover'],['Linen Tissue Sleeve',22,'tissue-sleeve'],['Shoe Sorter Bin',35,'shoe-sorter'],['Blue Zip Storage Cube',29,'zip-cube'],['Drawer Divide Set',25,'drawer-dividers'],['Indigo Hand Towel',18,'hand-towel'],['Drawstring Travel Pouch',21,'travel-pouch'],['Padded Press Mat',39,'press-mat']]},
 {id:'decor',label:'Decor & Lighting',intro:'Small gestures of light, scent and form that shift the mood.',items:[['Noir Fabric Pendant',79,'fabric-pendant'],['Clip Reading Light',49,'clip-light'],['Pleat Table Light',69,'pleat-lamp'],['Walnut Incense Boat',25,'incense-boat'],['Indigo Textile Hanging',59,'textile-hanging'],['Moss Memo Board',45,'memo-board'],['Carved Tray',39,'carved-tray'],['Linen Shade Cover',35,'shade-cover'],['Cloud Paper Pendant',69,'paper-pendant'],['Bedside Pocket Caddy',29,'bedside-caddy']]},
 {id:'utility',label:'Kitchen & Bath',intro:'Practical pieces with a softer point of view.',items:[['Harbor Dish Towel Set',22,'dish-towels'],['Bamboo Drawer Organizer',39,'drawer-organizer'],['Olive Spice Rack',59,'spice-rack'],['Walnut Utensil Holder',35,'utensil-holder'],['Terracotta Sink Mat',19,'sink-mat'],['Canvas Bread Bag',25,'bread-bag'],['Navy Hook Rail',29,'hook-rail'],['Line Toilet Roll Holder',29,'toilet-holder'],['Bath Ladder Rack',69,'bath-ladder'],['Overdoor Towel Hanger',39,'overdoor-hanger']]}
];
const boardFiles={furniture:'furniture',soft:'soft',essentials:'essentials',decor:'decor',utility:'utility'};
const products=categories.flatMap((c,ci)=>c.items.map((x,i)=>({id:`${c.id}-${i}`,category:c.id,categoryLabel:c.label,name:x[0],price:x[1],slug:x[2],image:`/products/${boardFiles[c.id]}-${i+1}.webp`,tag:i<2?'New':'Collected'})));
const policies={
 'Payment & checkout':<>Secure checkout is provided as a frontend demo. We display PayPal, Visa and major credit card options. Payment is only captured after you confirm your order with an authorised payment provider.</>,
 'Returns & refunds':<>Unused items may be requested for return within 30 days of delivery. Contact {company.email} with your order number and photos of the package. Approved refunds are issued to the original payment method after inspection.</>,
 'Cancellation policy':<>Orders can be cancelled before dispatch by contacting us promptly at {company.email}. Once dispatched, the request is handled under our returns policy.</>,
 'About us':<>Atelier Nest is a considered home-living collection operated by {company.name}. We select useful pieces with tactile materials, quiet color and an everyday point of view.</>,
 'Shipping policy':<>Orders are packed for standard delivery. Dispatch estimates and tracking details are shared by email. Remote-area and oversized furniture delivery may require an additional quote before dispatch.</>,
 'Track order':<>Use the tracking number in your dispatch email. If it has not arrived, contact {company.email} and include your order number.</>,
 'Terms of Service':<>1. Agreement and eligibility<br/>2. Product descriptions<br/>3. Prices and taxes<br/>4. Orders and acceptance<br/>5. Payment authorization<br/>6. Dispatch and delivery<br/>7. Returns and refunds<br/>8. Cancellations<br/>9. Product care<br/>10. Intellectual property<br/>11. User conduct<br/>12. Third-party services<br/>13. Limitation of liability<br/>14. Indemnity<br/>15. Privacy and data<br/>16. Changes to these terms<br/>17. Governing law and contact</>,
 'Privacy policy':<>We collect information needed to process orders, answer support requests and improve the storefront. We do not sell personal information. Contact {company.email} for access or correction requests.</>,
 'DMCA':<>To report a copyright concern, send the work, the relevant URL, your contact details and a good-faith statement to {company.email}. We review complete notices and respond appropriately.</>
};

function App(){
 const [view,setView]=useState('home'); const [activeCat,setActiveCat]=useState(null); const [cart,setCart]=useState([]); const [drawer,setDrawer]=useState(false); const [menu,setMenu]=useState(false); const [query,setQuery]=useState('');
 const shown=products.filter(p=>(!activeCat||p.category===activeCat)&&p.name.toLowerCase().includes(query.toLowerCase()));
 const add=(p,buy=false)=>{setCart(c=>{const found=c.find(i=>i.id===p.id);return found?c.map(i=>i.id===p.id?{...i,qty:i.qty+1}:i):[...c,{...p,qty:1}]});setDrawer(true);if(buy)setView('checkout')};
 const change=(id,n)=>setCart(c=>c.map(i=>i.id===id?{...i,qty:Math.max(0,i.qty+n)}:i).filter(i=>i.qty));
 const subtotal=cart.reduce((s,i)=>s+i.price*i.qty,0);
 const navigate=(v)=>{setView(v);setActiveCat(null);window.scrollTo({top:0,behavior:'smooth'})};
 return <div className="app">
  <div className="announcement">Free delivery on orders over $150 <span>·</span> Thoughtful pieces, shipped with care</div>
  <header><button className="icon-btn mobile" onClick={()=>setMenu(!menu)}><Menu/></button><button className="wordmark" onClick={()=>navigate('home')}>ATELIER <i>NEST</i></button><nav className={menu?'open':''}><button onClick={()=>navigate('home')}>Home</button><button onClick={()=>{setActiveCat(null);navigate('shop')}}>Shop all</button>{categories.slice(0,3).map(c=><button key={c.id} onClick={()=>{setActiveCat(c.id);navigate('shop')}}>{c.label}</button>)}</nav><div className="head-actions"><label className="search"><Search size={17}/><input placeholder="Search" value={query} onChange={e=>{setQuery(e.target.value);navigate('shop')}}/></label><button className="bag" onClick={()=>setDrawer(true)}><ShoppingBag size={18}/><span>{cart.reduce((s,i)=>s+i.qty,0)}</span></button></div></header>
  {view==='home'&&<Home navigate={navigate} setActiveCat={setActiveCat}/>} {view==='shop'&&<Shop shown={shown} categories={categories} activeCat={activeCat} setActiveCat={setActiveCat} add={add}/>} {view==='checkout'&&<Checkout cart={cart} subtotal={subtotal} navigate={navigate}/>} {view==='info'&&<Info title={activeCat}/>} {view==='admin'&&<Admin/>}
  <Footer navigate={navigate} setActiveCat={setActiveCat}/>
  {drawer&&<CartDrawer cart={cart} subtotal={subtotal} close={()=>setDrawer(false)} change={change} checkout={()=>{setDrawer(false);navigate('checkout')}}/>}
 </div>
}
function Home({navigate,setActiveCat}){return <main><section className="hero"><div className="hero-copy"><p className="eyebrow">THE SLOW EDIT · 2026</p><h1>A softer way<br/><em>to live.</em></h1><p>Furniture and everyday objects with a sense of calm. Designed for rooms that feel like you.</p><button className="primary" onClick={()=>navigate('shop')}>Explore the collection <ArrowRight size={16}/></button></div><div className="hero-art"><div className="sun"></div><div className="hero-chair"><div className="chair-back"></div><div className="chair-seat"></div><div className="leg l1"></div><div className="leg l2"></div></div><div className="hero-note">01 / 05<br/><b>Quiet forms,<br/>warm materials.</b></div></div></section><section className="intro"><p className="eyebrow">A home, edited</p><h2>Objects that earn<br/>their place.</h2><p>From the first coffee to the last light, we choose pieces that bring texture and ease to the rituals in between.</p></section><section className="category-strip"><div className="section-head"><div><p className="eyebrow">Shop by feeling</p><h2>Find your rhythm.</h2></div><button className="text-btn" onClick={()=>navigate('shop')}>View all <ArrowRight size={15}/></button></div><div className="category-grid">{categories.map((c,i)=><button className={`category-card c${i}`} key={c.id} onClick={()=>{setActiveCat(c.id);navigate('shop')}}><span>0{i+1}</span><div><h3>{c.label}</h3><p>{c.items.length} pieces</p></div><ChevronRight size={18}/></button>)}</div></section><section className="feature"><div className="feature-image"><span>Atelier note / 01</span></div><div><p className="eyebrow">Material matters</p><h2>Texture makes<br/>a room.</h2><p>We look for honest materials, considered proportions and the small details that make a piece feel personal.</p><button className="text-btn" onClick={()=>navigate('shop')}>See the edit <ArrowRight size={15}/></button></div></section></main>}
function Shop({shown,categories,activeCat,setActiveCat,add}){return <main className="shop-page"><div className="shop-hero"><p className="eyebrow">The collection</p><h1>{activeCat?categories.find(c=>c.id===activeCat)?.label:'All pieces'}</h1><p>{activeCat?categories.find(c=>c.id===activeCat)?.intro:'Useful, tactile and quietly distinctive pieces for the rooms you return to.'}</p></div><div className="filters"><div className="filter-row"><button className={!activeCat?'active':''} onClick={()=>setActiveCat(null)}>All pieces</button>{categories.map(c=><button className={activeCat===c.id?'active':''} key={c.id} onClick={()=>setActiveCat(c.id)}>{c.label}</button>)}</div><span>{shown.length} pieces</span></div><div className="product-grid">{shown.map(p=><ProductCard key={p.id} p={p} add={add}/>)}</div></main>}
function ProductCard({p,add}){return <article className="product-card"><div className="product-image"><img src={p.image} alt={p.name}/><span className="tag">{p.tag}</span><button className="quick" onClick={()=>add(p)}>Add to cart</button></div><div className="product-meta"><div><h3>{p.name}</h3><p>{p.categoryLabel}</p></div><strong>${p.price}</strong></div><button className="buy-now" onClick={()=>add(p,true)}>Buy Now · ${p.price}</button></article>}
function CartDrawer({cart,subtotal,close,change,checkout}){return <div className="overlay"><aside className="cart-drawer"><div className="drawer-head"><div><p className="eyebrow">Your selection</p><h2>Cart <small>({cart.reduce((s,i)=>s+i.qty,0)})</small></h2></div><button className="icon-btn" onClick={close}><X/></button></div>{cart.length===0?<div className="empty"><ShoppingBag size={34}/><p>Your cart is waiting for something good.</p></div>:<><div className="cart-items">{cart.map(i=><div className="cart-line" key={i.id}><img src={i.image}/><div className="cart-info"><h3>{i.name}</h3><p>${i.price}</p><div className="qty"><button onClick={()=>change(i.id,-1)}><Minus size={13}/></button><span>{i.qty}</span><button onClick={()=>change(i.id,1)}><Plus size={13}/></button></div></div><b>${i.price*i.qty}</b></div>)}</div><div className="drawer-total"><span>Subtotal</span><strong>${subtotal}</strong></div><button className="primary full" onClick={checkout}>Continue to checkout <ArrowRight size={16}/></button><p className="micro">Taxes and delivery calculated at checkout.</p></>}</aside></div>}
function Checkout({cart,subtotal,navigate}){return <main className="checkout"><div className="checkout-main"><p className="eyebrow">Secure checkout · Demo</p><h1>Make it yours.</h1><div className="checkout-step"><span>01</span><div><h3>Contact information</h3><input placeholder="Email address"/><div className="twocol"><input placeholder="First name"/><input placeholder="Last name"/></div><input placeholder="Delivery address"/><div className="twocol"><input placeholder="City"/><input placeholder="Postal code"/></div></div></div><div className="checkout-step"><span>02</span><div><h3>Payment method</h3><div className="payment-options"><button className="selected"><span>PayPal</span><b>Pay</b></button><button><span>Visa</span><b>•••• 4242</b></button><button><span>Credit card</span><b><CreditCard size={16}/></b></button></div><div className="secure"><LockKeyhole size={14}/> Encrypted checkout · Payment details are handled by your selected provider.</div></div></div><button className="primary full" onClick={()=>alert('Demo order received — connect a payment provider to accept live payments.')}>Pay ${subtotal||0} <ArrowRight size={16}/></button></div><aside className="order-summary"><p className="eyebrow">Order summary</p>{cart.map(i=><div className="summary-line" key={i.id}><img src={i.image}/><span>{i.name} <small>× {i.qty}</small></span><b>${i.price*i.qty}</b></div>)}<div className="summary-total"><span>Total</span><strong>${subtotal}</strong></div><button className="text-btn" onClick={()=>navigate('shop')}>Continue shopping <ArrowRight size={15}/></button></aside></main>}
function Info({title}){return <main className="info-page"><p className="eyebrow">Atelier Nest · Information</p><h1>{title}</h1><div className="info-copy"><p>{policies[title]}</p><p className="legal-note">Last updated September 2026. Questions? Contact {company.email}.</p></div></main>}
function Admin(){return <main className="admin"><div className="admin-card"><p className="eyebrow">Atelier Nest · Private area</p><h1>Welcome back.</h1><p className="muted">Demo admin dashboard for catalog and order overview.</p><input placeholder="Admin email" defaultValue="admin@atel ie rnest.demo"/><input placeholder="Password" type="password" defaultValue="atelier2026"/><button className="primary full" onClick={()=>alert('Demo login successful')}>Sign in <ArrowRight size={16}/></button><small>Demo account: admin@atelier-nest.demo / atelier2026</small></div></main>}
function Footer({navigate,setActiveCat}){const info=(name)=>{setActiveCat(name);navigate('info')};return <footer><div className="footer-top"><div><button className="wordmark light" onClick={()=>navigate('home')}>ATELIER <i>NEST</i></button><p>Considered living for everyday rituals.</p></div><div className="footer-col"><h4>Explore</h4><button onClick={()=>navigate('shop')}>Shop all</button>{categories.slice(0,4).map(c=><button key={c.id} onClick={()=>{setActiveCat(c.id);navigate('shop')}}>{c.label}</button>)}</div><div className="footer-col"><h4>Customer care</h4>{['Payment & checkout','Returns & refunds','Cancellation policy','Shipping policy','Track order'].map(x=><button key={x} onClick={()=>info(x)}>{x}</button>)}</div><div className="footer-col"><h4>Company</h4>{['About us','Terms of Service','Privacy policy','DMCA'].map(x=><button key={x} onClick={()=>info(x)}>{x}</button>)}<button onClick={()=>navigate('admin')}>Admin login</button></div></div><div className="footer-bottom"><span>© 2026 {company.name}</span><span>{company.address}</span><a href={`mailto:${company.email}`}>{company.email}</a></div></footer>}
createRoot(document.getElementById('root')).render(<App/>);