import React, { useMemo, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { ArrowRight, Check, ChevronDown, ChevronLeft, Heart, Menu, Minus, Plus, Search, ShieldCheck, ShoppingBag, Truck, X } from 'lucide-react';
import './styles.css';

const company = { name:'鴻亮國際貿易有限公司', address:'UNIT 9, 1/F, THE CLOUD,111 TUNG CHAU STREET,TAI KOK TSUI,HONG KONG', email:'Not provided', phone:'Not provided', registration:'Not provided' };
const categories = [
  { id:'furniture', label:'Furniture', english:'Furniture', intro:'New silhouettes and expressive colors for a different rhythm at home.', products:[['Lounge Chair','Rolla Rocking Lounge Chair',229],['Storage Ottoman','Block Flip-Top Ottoman',89],['Dining Table','Extendable Dining Table',279],['Entry Console','Trace Entry Console',159],['Stools','Orbit Round Stool Set',99],['Shoe Cabinet','Slat Louvered Shoe Cabinet',169],['Bedside Chest','Tallside Bedside Chest',119],['Storage Cart','Roller Utility Cart',109],['Room Divider','Grid Room Divider Shelf',189],['Folding Desk','Drop Wall-Mounted Desk',139]] },
  { id:'soft', label:'Soft Furnishings', english:'Soft Furnishings', intro:'Textile, texture and a touch of color to make a space feel personal.', products:[['Curtain','Noir Blackout Curtain',89],['Rug','Round Braided Rug',139],['Pillow','Lume Lumbar Pillow',36],['Wall Art','Leaf Botanical Print',69],['Faux Florals','Branch Faux Arrangement',59],['Curtain','Cafe Half Curtain',52],['Blind','Roller Shade',79],['Tapestry','Grand Woven Tapestry',119],['Cushion','Velvet Bolster Cushion',42],['Seat Pad','Quilted Seat Pad',34]] },
  { id:'utility', label:'Everyday Home', english:'Everyday Home', intro:'Keep everyday essentials organized and leave room for lighter living.', products:[['Hangers','Wooden Hanger Set',24],['Dust Cover','Hang Garment Dust Cover',29],['Storage Bag','Underbed Storage Bag',39],['Mat','Doorway Entry Mat',27],['Throw','Knit Textured Throw',79],['Pillow','Travel Neck Pillow',35],['Mattress Cover','Guard Mattress Protector',69],['Hand Towel','Daily Soft Hand Towel',18],['Laundry Hamper','Cotton Laundry Hamper',45],['Storage Pouch','Zip Storage Pouch',22]] },
  { id:'decor', label:'Objects & Light', english:'Objects & Light', intro:'Quiet light and considered objects that shape the mood of a home.', products:[['Reading Light','Clip Rechargeable Reading Light',59],['Table Lamp','Mushroom Table Lamp',99],['Floor Lamp','Tripod Floor Lamp',149],['Wall Light','Read Adjustable Wall Light',89],['Clock','Mantel Wood Clock',69],['Lantern','Lantern Portable Light',79],['Metal Sculpture','Orbit Metal Loop Sculpture',72],['Pendant','Paper Pendant Light',119],['Basket','Page Magazine Basket',49],['Tray','Metal Catchall Tray',35]] },
  { id:'dining', label:'Kitchen & Bath', english:'Kitchen & Bath', intro:'Durable, easy-care essentials that bring order to daily routines.', products:[['Placemat','Cotton Washable Placemat',22],['Napkins','Linen Napkin Set',28],['Trivet','Silicone Heat Pad',18],['Kitchen Rack','Over-Sink Drying Rack',59],['Shower Liner','Waterproof Shower Liner',45],['Bath Runner','Runner Memory-Foam Bath Mat',39],['Towel Rail','Ladder Towel Rail',69],['Bathroom Stand','Stand Toilet Paper Stand',45],['Shower Caddy','Caddy Fabric Shower Caddy',32],['Organizer','Grooming Wood Organizer',39]] }
];
const allProducts = categories.flatMap((c, ci) => c.products.map((p, i) => ({ id:ci*10+i+1, category:c.id, categoryLabel:c.label, type:p[0], name:p[1], price:p[2], image:`/products/${ci*10+i+1}-${['rocking-chair','storage-ottoman','extendable-table','entry-console','nesting-stools','slatted-shoe-cabinet','bedside-chest','rolling-kitchen-cart','room-divider-shelf','fold-down-desk','blackout-curtain','braided-rug','lumbar-pillow','botanical-print','faux-branch','cafe-curtain','roller-shade','large-tapestry','bench-cushion','seat-pad','wood-hangers','garment-organizer','underbed-bag','door-mat','throw-blanket','neck-pillow','mattress-protector','hand-towel','cotton-hamper','zip-pouch','book-light','mushroom-lamp','tripod-lamp','reading-wall-light','mantel-clock','led-lantern','metal-loop-sculpture','paper-pendant','magazine-basket','metal-tray','cotton-table-mat','linen-napkins','silicone-trivet','oversink-rack','shower-liner','bath-runner','towel-rail','toilet-paper-stand','shower-caddy','grooming-organizer'][ci*10+i]}.webp` })));
const policies = { payment:['Checkout uses a demo payment flow. Choose PayPal, Visa or credit card to continue to the order confirmation page. Real payments require merchant credentials and server-side verification.'], returns:['Returns can be requested within 30 days of delivery. Items must be unused, unwashed and in their original packaging. Custom or visibly used items are excluded.'], cancel:['Orders can be cancelled before warehouse processing. Once shipped, please follow the return process. Refunds normally follow the original payment route.'], about:['JIAYI WEST is a home-living collection built around durability, comfort and everyday order. We select wood, textiles and metal pieces that settle naturally into daily life.'], shipping:['Orders are usually processed within 2–5 business days. Bulky furniture may require appointment delivery; remote-area fees and timing are shown at checkout.'], tracking:['Your demo order number appears on the confirmation page. Live carrier tracking will be enabled after the shipping integration is connected.'], privacy:['The demo checkout only collects the name, address and contact details needed to complete an order. We do not sell personal information.'], dmca:['If you believe content infringes your rights, send a description of the work, proof of rights, your contact details and the relevant link. We will review it promptly.']};
function App(){ const [category,setCategory]=useState('all'); const [cart,setCart]=useState([]); const [drawer,setDrawer]=useState(false); const [page,setPage]=useState('home'); const [policy,setPolicy]=useState(null); const visible=useMemo(()=>category==='all'?allProducts:allProducts.filter(p=>p.category===category),[category]); const add=(p,go=false)=>{setCart(c=>[...c,p]); if(go){setPage('checkout');setDrawer(false)}else setDrawer(true)}; if(location.hash==='#/admin') return <Admin/>; if(page==='checkout') return <Checkout cart={cart} back={()=>setPage('home')}/>; if(page==='info') return <Info policy={policy} back={()=>setPage('home')}/>; return <><header><button className="menu"><Menu size={19}/></button><a className="logo" onClick={()=>setPage('home')}>JIAYI <i>WEST</i></a><nav>{categories.map(c=><button key={c.id} onClick={()=>{setCategory(c.id);document.querySelector('.catalog')?.scrollIntoView({behavior:'smooth',block:'start'})}}>{c.label}</button>)}</nav><div className="tools"><button><Search size={18}/></button><button><Heart size={18}/></button><button onClick={()=>setDrawer(true)} className="bag"><ShoppingBag size={18}/><b>{cart.length}</b></button></div></header><main><section className="hero"><div><span className="eyebrow">JOURNAL  /  01</span><h1>让家，<br/><em>慢慢长成</em>。</h1><p>日常不必复杂。一把椅子、一盏灯、一块柔软的织物，都是生活被好好对待的证据。</p><button className="dark-btn" onClick={()=>document.querySelector('.catalog')?.scrollIntoView({behavior:'smooth'})}>探索本季选物 <ArrowRight size={16}/></button></div><div className="hero-art"><span>JIAYI WEST<br/>HOME EDIT 01</span><img src="/products/1-sofa.webp"/></div></section><section className="values"><div><ShieldCheck/><strong>耐用选材</strong><span>木作、织物与金属</span></div><div><Truck/><strong>安心配送</strong><span>清晰的物流节点</span></div><div><Check/><strong>30 天退货</strong><span>保留包装即可申请</span></div></section><section className="catalog"><div className="section-head"><div><span className="eyebrow">THE EDIT</span><h2>{category==='all'?'今日选物':categories.find(c=>c.id===category)?.label}</h2></div><p>{category==='all'?'五个生活场景，50 件耐用好物。':categories.find(c=>c.id===category)?.intro}</p></div><div className="filters"><button className={category==='all'?'active':''} onClick={()=>setCategory('all')}>全部</button>{categories.map(c=><button key={c.id} className={category===c.id?'active':''} onClick={()=>setCategory(c.id)}>{c.english}</button>)}</div><div className="grid">{visible.map((p,i)=><Product key={p.id} p={p} add={add} index={i}/>)}</div></section></main><Footer open={(key)=>{setPolicy(key);setPage('info')}}/><CartDrawer open={drawer} close={()=>setDrawer(false)} cart={cart} checkout={()=>{setDrawer(false);setPage('checkout')}}/></> }
function Product({p,add,index}){return <article className="product"><div className="photo"><img src={p.image} alt={p.name}/><button className="heart"><Heart size={16}/></button>{index<3&&<span className="tag">本季</span>}</div><div className="product-meta"><div><small>{p.categoryLabel} · {p.type}</small><h3>{p.name}</h3></div><strong>${p.price}</strong></div><div className="actions"><button onClick={()=>add(p)}>Add to Cart</button><button onClick={()=>add(p,true)}>Buy Now · ${p.price}</button></div></article>}
function CartDrawer({open,close,cart,checkout}){return <aside className={`drawer ${open?'open':''}`}><div className="drawer-head"><span>购物袋 · {cart.length}</span><button onClick={close}><X/></button></div>{cart.length?<><div className="cart-items">{cart.map((p,i)=><div className="cart-item" key={`${p.id}-${i}`}><img src={p.image}/><div><strong>{p.name}</strong><span>${p.price}</span><small>数量 1</small></div></div>)}</div><div className="drawer-bottom"><div><span>小计</span><strong>${cart.reduce((s,p)=>s+p.price,0)}</strong></div><button className="dark-btn full" onClick={checkout}>前往结算 <ArrowRight size={16}/></button></div></>:<div className="empty"><ShoppingBag size={28}/><p>你的购物袋还是空的</p><button onClick={close}>继续逛逛</button></div>}</aside>}
function Checkout({cart,back}){const [done,setDone]=useState(false);const total=cart.reduce((s,p)=>s+p.price,0);return <div className="checkout-page"><button className="back" onClick={back}><ChevronLeft size={18}/> 返回商店</button><div className="checkout-grid"><section><span className="eyebrow">SECURE CHECKOUT</span><h1>完成你的订单</h1>{done?<div className="success"><Check/><h2>订单已提交</h2><p>这是一个演示订单。订单号：JW-20260827-01</p><button className="dark-btn" onClick={back}>返回首页</button></div>:<><label>邮箱地址<input type="email" placeholder="you@example.com"/></label><label>配送地址<input placeholder="Street, city, region"/></label><label>支付方式</label><div className="payments"><button><span className="paypal">P</span> PayPal</button><button><span className="visa">VISA</span> Visa</button><button><span className="card">▣</span> 信用卡</button></div><button className="dark-btn pay" onClick={()=>setDone(true)}>支付 ${total} <ArrowRight size={16}/></button><p className="fine">演示支付：不会产生真实扣款。真实支付需要商户凭证、服务端订单与风控配置。</p></>}</section><aside className="order-summary"><h3>订单摘要</h3>{cart.map((p,i)=><div key={`${p.id}-${i}`}><span>{p.name}</span><strong>${p.price}</strong></div>)}<hr/><div><span>总计</span><strong>${total}</strong></div></aside></div></div>}
function Footer({open}){return <footer><div className="footer-top"><div><a className="logo">JIAYI <i>WEST</i></a><p>日常有光，生活有序。<br/>为家选择耐用、舒适的好东西。</p></div><div><h4>探索</h4><button onClick={()=>open('about')}>关于我们</button><button onClick={()=>open('shipping')}>发货政策</button><button onClick={()=>open('tracking')}>订单追踪</button></div><div><h4>帮助</h4><button onClick={()=>open('payment')}>付款方式</button><button onClick={()=>open('returns')}>退货与退款</button><button onClick={()=>open('cancel')}>取消政策</button></div><div><h4>条款</h4><button onClick={()=>open('terms')}>服务条款</button><button onClick={()=>open('privacy')}>隐私政策</button><button onClick={()=>open('dmca')}>DMCA</button></div></div><div className="legal"><span>© 2026 {company.name}</span><span>{company.address}</span><span>注册号：{company.registration}</span><span>邮箱：{company.email} · 电话：{company.phone}</span></div></footer>}
function Info({policy,back}){const title={payment:'付款方式',returns:'退货与退款',cancel:'取消政策',about:'关于我们',shipping:'发货政策',tracking:'订单追踪',privacy:'隐私政策',dmca:'DMCA',terms:'服务条款'}[policy]||'服务信息';return <div className="info-page"><button className="back" onClick={back}><ChevronLeft size={18}/> 返回首页</button><span className="eyebrow">JIAYI WEST / INFORMATION</span><h1>{title}</h1>{policy==='terms'?<div className="terms">{['定义与适用范围','商品信息','价格与货币','订单提交','订单确认','支付授权','配送范围','交付时间','验收与风险','退货条件','退款方式','订单取消','知识产权','用户行为','隐私与数据','责任限制','条款变更'].map((x,i)=><section key={x}><h3>{i+1}. {x}</h3><p>本部分说明与{x}相关的服务规则。我们会以清晰、合理的方式提供信息，并依据适用法律处理订单、沟通与售后事宜。具体订单以结算页展示的商品、价格、配送和支付信息为准。</p></section>)}</div>:<div className="info-copy"><p>{policies[policy]?.[0]}</p><p>如需协助，请通过页脚显示的联系方式与我们沟通；当前项目中的邮箱、电话与注册号仍待公司补充后上线。</p></div>}</div>}
function Admin(){return <div className="admin"><div className="admin-login"><span className="eyebrow">JIAYI WEST / DEMO ADMIN</span><h1>后台管理演示</h1><p>这是前端演示后台，不连接真实数据库或账号系统。</p><label>账户<input defaultValue="admin-demo"/></label><label>密码<input type="password" defaultValue="demo-only"/></label><button className="dark-btn" onClick={()=>alert('演示登录成功')}>登录后台</button><small>演示账户：admin-demo　演示密码：demo-only</small></div></div>}
createRoot(document.getElementById('root')).render(<App/>);