const { PageHero, Section, DownloadButton } = window.App.Components;
const { Images } = window.App.Utils;

const Products = () => {
    // Helper to get local image path
    const getImg = (name) => `./src/assets/images/products/${name}`;

    return (
        <div className="bg-slate-50 min-h-screen pb-20 font-sans">
            <PageHero
                title="Products"
                subtitle="Professional Lineup"
                image={Images.productsHero}
            />

            <div className="max-w-7xl mx-auto px-6 pt-20 space-y-32 animate-fade-in-up">

                {/* --- 1. Photogrammetry & GIS --- */}
                <div>
                    <div className="text-center mb-16">
                        <span className="text-brand-primary font-bold tracking-widest uppercase">Category 01</span>
                        <h2 className="text-4xl font-black text-slate-800 mt-2">Photogrammetry & GIS</h2>
                        <p className="text-slate-500 mt-4 max-w-2xl mx-auto">
                            航空写真やUAV画像から、高精度な3次元データを生成・解析するための
                            世界最先端のソフトウェアソリューション。
                        </p>
                    </div>

                    <Section title="Correlator3D" image={getImg('Correlator3D.jpg')} reverse>
                        <h3 className="text-xl font-bold mb-2 text-brand-primary">SimActive</h3>
                        <p className="mb-4 leading-relaxed">
                            SimActive社のCorrelator3D™は、航空写真、衛星画像、UAV画像に対応したハイエンド写真測量ソフトウェアです。
                            特許取得済みのGPU活用アルゴリズムにより、他社製品を凌駕する圧倒的な処理速度を実現。
                            数千枚の画像から高密度点群、DSM/DTM、またシームレスなオルソモザイクを数分〜数時間で生成します。
                        </p>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <DownloadButton href="./src/assets/pdf/SimActive_Correlator3D_j_241210.pdf" label="Correlator3D (Large Format)" />
                            <DownloadButton href="./src/assets/pdf/SimActive_Correlator3D_UAV_j.pdf" label="Correlator3D UAV" />
                        </div>
                    </Section>

                    <Section title="iTwin Capture Modeler" image={getImg('iTwin.jpg')}>
                        <h3 className="text-xl font-bold mb-2 text-brand-primary">Bentley Systems</h3>
                        <p className="mb-4 leading-relaxed">
                            旧ContextCapture。写真やレーザー計測データから、実写そのままのリアリティメッシュ（3Dモデル）を自動生成します。
                            都市全域のデジタルツイン構築から、文化財のデジタルアーカイブ、建設現場の進捗管理まで、
                            「またたく間に、世界を3Dに」する強力なモデリングエンジンです。
                        </p>
                        <DownloadButton href="./src/assets/pdf/CC_Introduction.pdf" label="Product Overview PDF" />
                    </Section>

                    <div className="grid md:grid-cols-2 gap-8 mt-16">
                        <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow duration-300">
                            <div className="h-48 flex items-center justify-center bg-slate-50 rounded-xl mb-6 overflow-hidden border border-slate-100">
                                <img src={getImg('GlobalMapper.png')} alt="GlobalMapper" className="max-h-full max-w-full object-contain p-2" />
                            </div>
                            <h3 className="text-2xl font-bold text-slate-800 mb-2">Global Mapper Pro</h3>
                            <p className="text-slate-600 mb-4 leading-relaxed">
                                300種類以上の空間データ形式に対応した、コストパフォーマンス最強のGISソフトウェア。
                                Pro版ではLiDARモジュールを標準搭載し、点群の分類（地表面、植生、建物など）や、DSMの作成、等高線生成などが
                                これ一本で完結します。
                            </p>
                            <div className="space-y-2">
                                <DownloadButton href="./src/assets/pdf/GlobalMapperPro_v26_A4_s.pdf" label="Pro Catalog v26" />
                                <DownloadButton href="./src/assets/pdf/GM_MobileFlyer_jp_v2.pdf" label="Mobile App Guide" />
                            </div>
                        </div>
                        <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow duration-300">
                            <div className="h-48 flex items-center justify-center bg-slate-50 rounded-xl mb-6 overflow-hidden border border-slate-100">
                                <img src={getImg('BINGO.jpg')} alt="BINGO" className="max-h-full max-w-full object-contain p-2" />
                            </div>
                            <h3 className="text-2xl font-bold text-slate-800 mb-2">BINGO</h3>
                            <p className="text-slate-600 mb-4 leading-relaxed">
                                ドイツGIP社開発の航空三角測量調整計算ソフトウェア。
                                衛星画像、航空写真、UAV画像に対応し、極めて厳密なバンドル調整計算を行います。
                                大規模国家プロジェクトでも採用される信頼のアルゴリズムです。
                            </p>
                        </div>
                    </div>
                </div>

                {/* --- 2. LiDAR Processing & CAD --- */}
                <div>
                    <div className="text-center mb-16">
                        <span className="text-brand-primary font-bold tracking-widest uppercase">Category 02</span>
                        <h2 className="text-4xl font-black text-slate-800 mt-2">LiDAR Processing & CAD</h2>
                    </div>

                    <Section title="Terrasolid" image={getImg('Terrasolid.png')} reverse>
                        <h3 className="text-xl font-bold mb-2 text-brand-primary">The Standard of LiDAR Processing</h3>
                        <p className="mb-4 leading-relaxed">
                            フィンランドTerrasolid社が開発する、世界標準の点群処理ソフトウェア群。
                            航空機、UAV、MMS、固定式スキャナなど、あらゆるプラットフォームの点群データを読み込み、
                            高精度なキャリブレーション（軌跡解析・補正）から、地物分類、モデリングまでを一貫して行えます。
                        </p>
                        <DownloadButton href="./src/assets/pdf/Terrasolid_210621_jp.pdf" label="Terrasolid Catalog" />
                    </Section>

                    <div className="bg-white p-10 rounded-3xl shadow-sm border border-slate-100 mt-8">
                        <h3 className="text-2xl font-bold text-slate-800 mb-6 border-b border-slate-100 pb-4">Bentley CAD Solutions</h3>
                        <div className="grid md:grid-cols-3 gap-8">
                            <div className="p-4 rounded-xl hover:bg-slate-50 transition-colors">
                                <h4 className="font-bold text-lg text-brand-secondary mb-2">MicroStation</h4>
                                <p className="text-sm text-slate-600 leading-relaxed">
                                    2D/3D CADの枠を超えた、インフラ・エンジニアリングのための包括的プラットフォーム。
                                    大規模な点群データやリアリティメッシュを軽快に扱えるのが特徴です。
                                </p>
                            </div>
                            <div className="p-4 rounded-xl hover:bg-slate-50 transition-colors">
                                <h4 className="font-bold text-lg text-brand-secondary mb-2">OpenRoads Designer</h4>
                                <p className="text-sm text-slate-600 leading-relaxed">
                                    道路、鉄道、橋梁などの土木設計に特化した3Dモデリング・解析アプリケーション。
                                    BIM/CIM対応の設計業務を強力に支援します。
                                </p>
                            </div>
                            <div className="p-4 rounded-xl hover:bg-slate-50 transition-colors">
                                <h4 className="font-bold text-lg text-brand-secondary mb-2">Pointools</h4>
                                <p className="text-sm text-slate-600 leading-relaxed">
                                    点群データの高速表示・動画作成ツール。
                                    数十億点の点群でもストレスなく表示し、プレゼンテーション品質のフライスルー動画を簡単に作成できます。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {/* --- 3. Aerial Systems --- */}
                <div>
                    <div className="text-center mb-16">
                        <span className="text-brand-primary font-bold tracking-widest uppercase">Category 03</span>
                        <h2 className="text-4xl font-black text-slate-800 mt-2">Aerial Camera & NAV</h2>
                    </div>

                    <div className="grid md:grid-cols-3 gap-8">
                        <div className="bg-white rounded-3xl overflow-hidden shadow-lg group hover:transform hover:-translate-y-1 transition-all duration-300">
                            <div className="h-56 bg-white p-4 flex items-center justify-center overflow-hidden border-b border-slate-100">
                                <img src={getImg('UltraCam.png')} className="max-h-full max-w-full object-contain transition-transform duration-500 group-hover:scale-105" />
                            </div>
                            <div className="p-8">
                                <h3 className="text-xl font-bold mb-2">Vexcel UltraCam</h3>
                                <p className="text-sm text-slate-500 mb-6 leading-relaxed">
                                    オーストリアVexcel Imaging社の最高峰航空デジタルカメラ。
                                    Osprey（垂直+斜め）、Eagle（広角）、Condor（広域）など、用途に合わせたラインナップを展開。
                                </p>
                                <DownloadButton href="./src/assets/pdf/UltraCam_211206_jp.pdf" label="Lineup PDF" />
                            </div>
                        </div>
                        <div className="bg-white rounded-3xl overflow-hidden shadow-lg group hover:transform hover:-translate-y-1 transition-all duration-300">
                            <div className="h-56 bg-white p-4 flex items-center justify-center overflow-hidden border-b border-slate-100">
                                <img src={getImg('CCNS5.jpg')} className="max-h-full max-w-full object-contain transition-transform duration-500 group-hover:scale-105" />
                            </div>
                            <div className="p-8">
                                <h3 className="text-xl font-bold mb-2">IGI CCNS5</h3>
                                <p className="text-sm text-slate-500 mb-6 leading-relaxed">
                                    ドイツIGI社のフライトマネジメントシステム（FMS）。
                                    正確なナビゲーション画面でパイロットとオペレータを支援し、効率的な撮影計画の実行を可能にします。
                                </p>
                                <DownloadButton href="./src/assets/pdf/IGI_CCNS_5_web_j.pdf" label="CCNS5 PDF" />
                            </div>
                        </div>
                        <div className="bg-white rounded-3xl overflow-hidden shadow-lg group hover:transform hover:-translate-y-1 transition-all duration-300">
                            <div className="h-56 bg-white p-4 flex items-center justify-center overflow-hidden border-b border-slate-100">
                                <img src={getImg('AEROcontrol.jpg')} className="max-h-full max-w-full object-contain transition-transform duration-500 group-hover:scale-105" />
                            </div>
                            <div className="p-8">
                                <h3 className="text-xl font-bold mb-2">IGI AEROcontrol</h3>
                                <p className="text-sm text-slate-500 mb-6 leading-relaxed">
                                    航空機搭載用GNSS/IMUシステム。
                                    最大256Hz以上の高速・高精度な位置姿勢データを取得し、ダイレクト・ジオリファレンシングを実現します。
                                </p>
                                <DownloadButton href="./src/assets/pdf/04_AEROcontrol.pdf" label="Catalog PDF" />
                            </div>
                        </div>
                    </div>
                </div>

                {/* --- 4. UAV & Mobile LiDAR --- */}
                <div>
                    <div className="text-center mb-16">
                        <span className="text-brand-primary font-bold tracking-widest uppercase">Category 04</span>
                        <h2 className="text-4xl font-black text-slate-800 mt-2">UAV & Mobile LiDAR</h2>
                    </div>

                    <Section title="Hovermap ST-X" image={getImg('Hovermap.png')} reverse>
                        <h3 className="text-xl font-bold mb-2 text-brand-primary">Emesent</h3>
                        <p className="mb-4 leading-relaxed">
                            オーストラリアEmesent社の自律飛行型LiDARスキャナ。
                            GPSの届かない地下鉱山、トンネル、橋梁下、屋内施設でも、SLAM技術により自己位置を推定しながら安定飛行。
                            ドローンへの搭載はもちろん、手持ち（ハンドヘルド）、バックパック、車両マウントなど、多彩な運用が可能です。
                        </p>
                        <div className="grid grid-cols-1 gap-2">
                            <DownloadButton href="./src/assets/pdf/HVM-ST-X_jp_2412_s.pdf" label="Hovermap ST-X" />
                            <DownloadButton href="./src/assets/pdf/HVM-ST_jp_2208.pdf" label="Hovermap ST" />
                            <DownloadButton href="./src/assets/pdf/VehicleRTK_J_s.pdf" label="Vehicle RTK Kit" />
                        </div>
                    </Section>

                    <div className="grid md:grid-cols-2 gap-8 mt-16">
                        <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow duration-300">
                            <div className="h-56 flex items-center justify-center bg-slate-50 rounded-xl mb-6 overflow-hidden border border-slate-100">
                                <img src={getImg('RIEBO.jpg')} className="max-h-full max-w-full object-contain p-2" />
                            </div>
                            <h3 className="text-2xl font-bold text-slate-800 mb-2">RIEBO DG Series</h3>
                            <p className="text-slate-600 mb-4 leading-relaxed">
                                垂直写真（1眼）と斜め写真（4眼）を同時撮影できるUAV用オブリークカメラシステム。
                                建物のファサード（側面）も死角なく捉えるため、都市の3Dモデル作成に最適です。
                                Sony製高解像度センサを採用し、画質も妥協しません。
                            </p>
                            <DownloadButton href="./src/assets/pdf/RIEBO_Catalog_A4_240130_s.pdf" label="Catalog" />
                        </div>
                        <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow duration-300">
                            <div className="h-56 flex items-center justify-center bg-slate-50 rounded-xl mb-6 overflow-hidden border border-slate-100">
                                <img src={getImg('TrinityPro.jpg')} className="max-h-full max-w-full object-contain p-2" />
                            </div>
                            <h3 className="text-2xl font-bold text-slate-800 mb-2">Trinity Pro</h3>
                            <p className="text-slate-600 mb-4 leading-relaxed">
                                ドイツQuantum-Systems社のeVTOL（電動垂直離着陸）型固定翼ドローン。
                                ヘリコプターのように離着陸し、飛行機のように長時間・広範囲を飛行します。
                                90分以上の飛行時間により、数百ヘクタールの現場も1フライトで計測完了。
                            </p>
                            <DownloadButton href="./src/assets/pdf/T-PRO_2508_j_s.pdf" label="Catalog" />
                        </div>
                    </div>
                </div>

                {/* --- 5. Mobile & Indoor --- */}
                <div>
                    <div className="text-center mb-16">
                        <span className="text-brand-primary font-bold tracking-widest uppercase">Category 05</span>
                        <h2 className="text-4xl font-black text-slate-800 mt-2">MMS & Indoor Survey</h2>
                    </div>

                    <div className="grid md:grid-cols-3 gap-8">
                        <div className="bg-white p-6 rounded-3xl shadow-sm group hover:shadow-lg transition-all">
                            <div className="h-40 flex items-center justify-center bg-white rounded-lg mb-4 overflow-hidden border border-slate-100">
                                <img src={getImg('StreetMapper.png')} className="max-h-full max-w-full object-contain p-2" />
                            </div>
                            <h3 className="text-lg font-bold">StreetMapper V</h3>
                            <p className="text-sm text-slate-500 mb-4 leading-relaxed">
                                3D Mapping Solutions社の車載モバイルマッピングシステム。
                                最高精度のRIEGL社製レーザースキャナを搭載し、道路形状を高密度に計測します。
                            </p>
                            <DownloadButton href="./src/assets/pdf/SM-V_j_211201.pdf" label="Catalog" />
                        </div>
                        <div className="bg-white p-6 rounded-3xl shadow-sm group hover:shadow-lg transition-all">
                            <div className="h-40 flex items-center justify-center bg-white rounded-lg mb-4 overflow-hidden border border-slate-100">
                                <img src={getImg('LCMS2.jpg')} className="max-h-full max-w-full object-contain p-2" />
                            </div>
                            <h3 className="text-lg font-bold">LCMS 2</h3>
                            <p className="text-sm text-slate-500 mb-4 leading-relaxed">
                                カナダPavemetrics社の路面性状調査システム。
                                ひび割れ、わだち掘れ、IRI（平坦性）を時速100kmで走行しながら自動検知・解析します。
                            </p>
                            <DownloadButton href="./src/assets/pdf/LCMS_A4_240305_s.pdf" label="Catalog" />
                        </div>
                        <div className="bg-white p-6 rounded-3xl shadow-sm group hover:shadow-lg transition-all">
                            <div className="h-40 flex items-center justify-center bg-white rounded-lg mb-4 overflow-hidden border border-slate-100">
                                <img src={getImg('EOS.png')} className="max-h-full max-w-full object-contain p-2" />
                            </div>
                            <h3 className="text-lg font-bold">Eos Arrow</h3>
                            <p className="text-sm text-slate-500 mb-4 leading-relaxed">
                                スマートフォンやタブレット（iOS/Android）とBluetooth接続して使用する、高精度GNSSレシーバー。
                                RTK対応モデル（Gold）ではセンチメートル級の精度をモバイルで実現します。
                            </p>
                            <DownloadButton href="./src/assets/pdf/Eos-Arrow-Gold-070121-JP.pdf" label="Arrow Gold" />
                            <DownloadButton href="./src/assets/pdf/Eos-Arrow-100-070221-JP.pdf" label="Arrow 100" />
                        </div>
                    </div>
                </div>

                {/* --- 6. Digital Twin --- */}
                <div>
                    <div className="text-center mb-16">
                        <span className="text-brand-primary font-bold tracking-widest uppercase">Category 06</span>
                        <h2 className="text-4xl font-black text-slate-800 mt-2">Digital Twin Platform</h2>
                    </div>
                    <Section title="Cesium" image={getImg('Cesium.png')}>
                        <h3 className="text-xl font-bold mb-2 text-brand-primary">3D Geospatial Platform</h3>
                        <p className="mb-4 leading-relaxed">
                            Webブラウザ上で3D地球儀を表示し、大容量の地理空間データ（点群、3Dモデル、BIM/CIM、地形など）を
                            サクサクと表示・共有・解析できるオープンプラットフォーム。
                            OGC標準「3D Tiles」の開発元であり、デジタルツイン構築のデファクトスタンダードです。
                        </p>
                    </Section>
                </div>

            </div>
        </div>
    );
};

window.App.Pages.Products = Products;