import Image from "next/image";
import ProductItem from "./ProductItem";

export default function MainContents() {
    return(
        <div className="main-product-list-wrap">
            <div className="main-product-list">
                <ProductItem num={1} name={'最近の更新物件一覧'}>
                    <ul className="recently-list">
                        {Array.from({length : 3}).map((_, idx) => (
                            <li key={idx} className="recently-item">
                                <div className="item-inner">
                                    <span className="time">2025.09.29  12:59:59</span>
                                    <span className="product">R3305X167240611004</span>
                                    <span>新津 佑季新津 佑季新津 佑季新津 佑季新津 佑季新津 佑季</span>
                                    <span>HITエンジニアリング株式会社HITエンジニアリング株式会社HITエンジニアリング株式会社HITエンジニアリング株式会社</span>
                                </div>
                            </li>
                        ))}
                    </ul>
                    {/* <div className="recently-no-data">
                        <h3>登録された商品情報はありません。</h3>
                        <p>下のボタンをクリックして商品情報を登録してください。</p>
                        <button className="btn-origin navy">+ 新規物件登録</button>
                    </div> */}
                </ProductItem>                
                <ProductItem num={2} name={'お知らせ'}>
                    {/* <div className="notice-box">
                        <div className="notice-day pre">2024.07.19</div>
                        <div className="notice-title">[不具合のご連] 納品先リスト表示不具合と不具合復 旧のお知らせ</div>
                        <div className="notice-contents">
                            <span>
                                Q.TRON S-G2.4+ 285ならびにQ.PEAK DUO S-G11S 275と
                                屋根技術研究所 支持金具/YGアンカー/スレート・板金金具の組み
                                合わせをしたときに 縦桟が拾い出されなかった不具合の修正
                            </span>
                            <span>
                                QREADYシリーズを見積りした際、書類一式【配置図】タブの
                                『パワーコンディショナ型式』欄にPCS型番が表示されるよう
                                に変更
                            </span>
                            <span>
                                QREADYシリーズを見積りした際、書類一式【配置図】タブの
                                『パワーコンディショナ型式』欄にPCS型番が表示されるよう
                                に変更
                                QREADYシリーズを見積りした際、書類一式【配置図】タブの
                                『パワーコンディショナ型式』欄にPCS型番が表示されるよう
                                に変更
                                QREADYシリーズを見積りした際、書類一式【配置図】タブの
                                『パワーコンディショナ型式』欄にPCS型番が表示されるよう
                                に変更
                            </span>
                        </div>
                    </div> */}
                    <div className="recently-no-data">
                        <h3>Hanwha Japan にお問い合わせください</h3>
                    </div>
                </ProductItem>                
            </div>
            <div className="main-product-list">
                <ProductItem num={3} name={'FAQ'}>
                    {/* <ul className="faq-list">
                    {Array.from({length : 3}).map((_, idx) => (
                        <li key={idx} className="faq-item">
                            <div className="faq-item-inner">
                                <div className="faq-num pre">FAQ 26</div>
                                <div className="faq-title pre">型番での商品検索機能追加のお知らせ型番での商品検索機能追加のお知らせ型番での商品検索機能追加のお知らせ</div>
                                <div className="faq-day pre">2024.07.19</div>
                            </div>
                        </li>
                    ))}
                    </ul> */}
                    <div className="recently-no-data">
                        <h3>Hanwha Japan にお問い合わせください</h3>
                    </div>
                </ProductItem> 
                <ProductItem num={4} name={'Data Download'}>
                    <div className="data-download-wrap">
                        <button className="data-down">
                            <span>操作マニュアル</span>
                        </button>
                        <button className="data-down">
                            <span>屋根の説明書</span>
                        </button>
                    </div>
                </ProductItem> 
                <ProductItem num={5} name={'Sales Contact info'}>
                    <ul className="contact-info-list">
                        <li className="info-item">
                            <div className="icon-box">
                                <Image src="/static/images/main/user.svg" alt="react" width={20} height={20} />
                            </div>
                            <div className="infor-data">山本功希</div>
                        </li>
                        <li className="info-item">
                            <div className="icon-box">
                                <Image src="/static/images/main/mail.svg" alt="react" width={20} height={20} />
                            </div>
                            <div className="infor-data pre">yamamoto.k1@qcells.com</div>
                        </li>
                    </ul>
                </ProductItem> 
            </div>
        </div>
    )
}