const { PageHero, Section, DownloadButton } = window.App.Components;
const { Images } = window.App.Utils;
const { MapPin, Target, Users, Download } = lucide;

const About = () => {
    return (
        <div className="bg-slate-50 min-h-screen pb-20">
            <PageHero
                title="About Us"
                subtitle="Company Info"
                image={Images.aboutHero}
            />

            <div className="max-w-7xl mx-auto px-6 pt-20 animate-fade-in-up">
                {/* Visual Section: Philosophy */}
                <Section
                    title="見えない価値を、見えるカタチに。"
                    image={Images.meeting}
                >
                    <p className="mb-6">
                        株式会社みるくるは、2003年の設立以来、航空測量やGIS開発を通じて、社会基盤の整備に貢献してきました。
                    </p>
                    <p className="mb-6">
                        地形や空間の情報は、普段目には見えませんが、私たちの生活を支える重要な基盤です。
                        私たちは確かな技術力でこの「見えない価値」を可視化し、未来のまちづくりや防災、環境保全に役立つデータとして提供します。
                    </p>
                    <div className="flex items-center gap-4 mt-8 pt-8 border-t border-slate-200">
                        <div>
                            <p className="text-sm text-slate-400">代表取締役</p>
                            <p className="font-bold text-slate-800 text-lg">敷田 みほ</p>
                        </div>
                    </div>
                </Section>
            </div>

            {/* Profile Section */}
            <div className="py-20 bg-white">
                <div className="max-w-4xl mx-auto px-6">
                    <div className="text-center mb-12">
                        <span className="text-brand-primary font-bold tracking-widest uppercase mb-2 block">Corporate Profile</span>
                        <h2 className="text-3xl font-bold text-slate-800">会社概要</h2>
                    </div>

                    <div className="bg-slate-50 rounded-3xl p-8 md:p-12 border border-slate-100 shadow-sm">
                        <table className="w-full text-left">
                            <tbody className="divide-y divide-slate-200">
                                {[
                                    ['会社名', '株式会社みるくる'],
                                    ['設立', '2003年5月15日'],
                                    ['資本金', '1,000万円'],
                                    ['代表者', '代表取締役 敷田 みほ'],
                                    ['所在地', '〒150-0031 東京都渋谷区桜丘町1-2 渋谷サクラステージ 9F'],
                                    ['事業内容', '地図データ作成、GIS開発、3Dモデリング、関連機器販売']
                                ].map(([label, value], i) => (
                                    <tr key={i} className="">
                                        <th className="py-5 pr-8 font-bold text-slate-500 w-1/3 text-sm">{label}</th>
                                        <td className="py-5 text-slate-800 font-medium">{value}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {/* Access Map */}
            <div className="py-20 bg-slate-50">
                <div className="max-w-6xl mx-auto px-6">
                    <div className="flex flex-col md:flex-row gap-12 items-start">
                        {/* Left Column: Info & Links */}
                        <div className="w-full md:w-1/3">
                            <h2 className="text-3xl font-bold text-slate-800 mb-6 flex items-center gap-3">
                                <MapPin className="text-brand-primary" /> Access
                            </h2>
                            <p className="text-slate-600 mb-8 leading-relaxed">
                                〒150-0031<br />
                                東京都渋谷区桜丘町1-2<br />
                                渋谷サクラステージ 9F
                            </p>

                            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                                <h4 className="font-bold text-slate-700 flex items-center gap-2 mb-4 border-b border-slate-100 pb-3">
                                    <Download size={18} className="text-brand-secondary" /> アクセスマップ (PDF)
                                </h4>
                                <div className="grid gap-3">
                                    <a href="./src/assets/pdf/central_jr.pdf" target="_blank" className="flex items-center gap-2 text-slate-600 hover:text-brand-primary transition-colors text-sm group">
                                        <span className="w-1.5 h-1.5 rounded-full bg-slate-300 group-hover:bg-brand-primary transition-colors"></span>
                                        JR線よりお越しの方
                                    </a>
                                    <a href="./src/assets/pdf/central_ginza.pdf" target="_blank" className="flex items-center gap-2 text-slate-600 hover:text-brand-primary transition-colors text-sm group">
                                        <span className="w-1.5 h-1.5 rounded-full bg-slate-300 group-hover:bg-brand-primary transition-colors"></span>
                                        銀座線よりお越しの方
                                    </a>
                                    <a href="./src/assets/pdf/central_toyoko.pdf" target="_blank" className="flex items-center gap-2 text-slate-600 hover:text-brand-primary transition-colors text-sm group">
                                        <span className="w-1.5 h-1.5 rounded-full bg-slate-300 group-hover:bg-brand-primary transition-colors"></span>
                                        東急・地下鉄各線よりお越しの方
                                    </a>
                                    <a href="./src/assets/pdf/central_inokashira.pdf" target="_blank" className="flex items-center gap-2 text-slate-600 hover:text-brand-primary transition-colors text-sm group">
                                        <span className="w-1.5 h-1.5 rounded-full bg-slate-300 group-hover:bg-brand-primary transition-colors"></span>
                                        井の頭線よりお越しの方
                                    </a>
                                    <a href="./src/assets/pdf/central_b3_parking.pdf" target="_blank" className="flex items-center gap-2 text-slate-600 hover:text-brand-primary transition-colors text-sm group">
                                        <span className="w-1.5 h-1.5 rounded-full bg-slate-300 group-hover:bg-brand-primary transition-colors"></span>
                                        B3駐車場ご利用の方
                                    </a>
                                </div>
                            </div>
                        </div>

                        {/* Right Column: Google Map */}
                        <div className="w-full md:w-2/3 h-[400px] rounded-3xl overflow-hidden shadow-lg border border-slate-200">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468358!2d139.6990596152588!3d35.65858048019941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b563b000001%3A0x7d28c6883c480033!2z5p2x5Lqs6YO95riL6LC35Yy65qRm5LiY5bJ!5e0!3m2!1sja!2sjp!4v1626000000000!5m2!1sja!2sjp"
                                width="100%"
                                height="100%"
                                style={{ border: 0 }}
                                allowFullScreen=""
                                loading="lazy"
                            ></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

window.App.Pages.About = About;