const Contact = () => {
    return (
        <div className="bg-slate-50 min-h-screen pt-10 pb-20">
            <div className="max-w-3xl mx-auto px-6">
                <div className="text-center mb-16 animate-fade-in-up">
                    <h1 className="text-4xl md:text-5xl font-black text-slate-800 mb-6">Contact</h1>
                    <p className="text-slate-500">
                        製品やサービスに関するご質問、お見積もりのご依頼など、<br />
                        お気軽にお問い合わせください。
                    </p>
                </div>

                <div className="bg-white p-8 md:p-12 rounded-3xl shadow-xl shadow-slate-200/50">
                    <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
                        <div className="grid md:grid-cols-2 gap-6">
                            <div>
                                <label className="block text-sm font-bold text-slate-700 mb-2">会社名</label>
                                <input type="text" className="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-3 focus:outline-none focus:border-brand-primary transition-colors" placeholder="株式会社〇〇" />
                            </div>
                            <div>
                                <label className="block text-sm font-bold text-slate-700 mb-2">お名前 <span className="text-red-500">*</span></label>
                                <input type="text" className="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-3 focus:outline-none focus:border-brand-primary transition-colors" placeholder="山田 太郎" />
                            </div>
                        </div>

                        <div>
                            <label className="block text-sm font-bold text-slate-700 mb-2">メールアドレス <span className="text-red-500">*</span></label>
                            <input type="email" className="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-3 focus:outline-none focus:border-brand-primary transition-colors" placeholder="user@example.com" />
                        </div>

                        <div>
                            <label className="block text-sm font-bold text-slate-700 mb-2">電話番号</label>
                            <input type="tel" className="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-3 focus:outline-none focus:border-brand-primary transition-colors" placeholder="03-1234-5678" />
                        </div>

                        <div>
                            <label className="block text-sm font-bold text-slate-700 mb-2">お問い合わせ内容 <span className="text-red-500">*</span></label>
                            <textarea rows="5" className="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-3 focus:outline-none focus:border-brand-primary transition-colors" placeholder="お問い合わせ内容をご記入ください"></textarea>
                        </div>

                        <div className="pt-4">
                            <button className="w-full py-4 bg-brand-primary text-white font-bold rounded-xl shadow-lg hover:bg-brand-primary/90 transition-all transform hover:-translate-y-1">
                                送信する
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
};

window.App.Pages.Contact = Contact;