function PlaceholderDetail({ onBack, work }) {
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  const SIGNATURE_URL = 'assets/senlan-signature-outline.png';

  return (
    <div className="work-detail placeholder-detail">
      <div className="container">
        <a href="#" className="work-back" onClick={(e) => { e.preventDefault(); onBack(); }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
          返回作品列表
        </a>

        <div className="work-header">
          <div className="work-meta">
            <span className="work-cat">即将上线 / Coming Soon</span>
            <span className="work-year">2026</span>
          </div>
          <h1 className="work-title">作品详情页<br />正在筹备中</h1>
          <p className="work-subtitle">— Full case study coming soon —</p>
          <div className="work-header-rule"></div>
        </div>
      </div>

      <div className="work-hero-wrap">
        <img src={work ? work.img : 'assets/images/aka_Udq2MKQ48i.jpg'} alt="coming soon" className="work-hero-img" style={{ opacity: 0.6, filter: 'grayscale(30%)' }} />
      </div>

      <div className="container">
        <div className="work-section work-section-centered">
          <p className="work-paragraph">
            该作品的完整详情页正在精心筹备中，敬请期待。<br />
            完整案例将包含品牌策略、视觉识别系统、包装设计、应用延展等全链路设计展示。
          </p>
          <p style={{ textAlign: 'center', marginTop: '24px', color: '#999', fontSize: '14px' }}>
            如需了解更多详情，欢迎通过下方联系方式交流。
          </p>
        </div>

        <div className="work-bottom-nav">
          <a href="#" className="work-bottom-link" onClick={(e) => { e.preventDefault(); onBack(); }}>
            ← 返回全部作品
          </a>
        </div>
      </div>

      <footer className="footer work-footer">
        <div className="container">
          <div className="footer-left">
            <img src={SIGNATURE_URL} alt="Senlan" className="footer-signature" />
          </div>
          <div className="footer-right">
            <span>© 2026 Senlan Studio. All rights reserved.</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { PlaceholderDetail });