const { PageHero, Section } = window.App.Components;
const { Images } = window.App.Utils;
const { CheckCircle, BarChart, Layers, Globe, Cpu, Zap } = lucide;

const Services = () => {
    return (
        <div className="bg-slate-50 min-h-screen pb-20">
            <PageHero
                title="Our Services"
                subtitle="Total Spatial Solutions"
                image={Images.servicesHero}
            />

            <div className="max-w-7xl mx-auto px-6 pt-20">
                <div className="text-center max-w-3xl mx-auto mb-20 animate-fade-in-up">
                    <h2 className="text-3xl font-bold text-slate-800 mb-6">
                        空から地上まで、<br />
                        あらゆる空間をデジタルデータへ。
                    </h2>
                    <p className="text-slate-600 text-lg leading-relaxed">
                        株式会社みるくるは、最新の計測技術と高度な情報処理技術を融合させ、
                        お客様の目的に合わせた最適な空間データを提供します。
                        単なる「測る」だけでなく、「解析し、活用する」ためのトータルソリューションを提案します。
                    </p>
                </div>

                {/* --- Service 1: Advanced Surveying --- */}
                <Section title="Advanced Surveying" image={Images.drone}>
                    <div className="space-y-6">
                        <p className="font-bold text-xl text-brand-primary">
                            航空機・UAV・MMSによるハイブリッド計測
                        </p>
                        <p>
                            広域エリアは航空機、局所的な詳細データはUAV（ドローン）、道路周辺はMMS（モービルマッピングシステム）。
                            それぞれのプラットフォームの特性を活かし、シームレスで高密度な3次元点群データを取得します。
                        </p>
                        <div className="bg-slate-100 p-6 rounded-2xl">
                            <h4 className="font-bold text-slate-700 mb-4 flex items-center gap-2">
                                <Zap size={20} className="text-yellow-500" /> Key Technologies
                            </h4>
                            <ul className="space-y-2">
                                <li className="flex items-center gap-2 text-sm text-slate-600">
                                    <CheckCircle size={16} className="text-brand-secondary" />
                                    航空レーザー計測 (Airborne LiDAR) - 広域地形モデルの作成
                                </li>
                                <li className="flex items-center gap-2 text-sm text-slate-600">
                                    <CheckCircle size={16} className="text-brand-secondary" />
                                    UAV写真測量 & SLAM LiDAR - 施設・文化財の高精細スキャン
                                </li>
                                <li className="flex items-center gap-2 text-sm text-slate-600">
                                    <CheckCircle size={16} className="text-brand-secondary" />
                                    マルチスペクトル撮影 - 植生活力・農業リモートセンシング
                                </li>
                            </ul>
                        </div>
                    </div>
                </Section>

                {/* --- Service 2: 3D Modeling & Digital Twin --- */}
                <Section title="3D Modeling & Digital Twin" image={Images.texture} reverse>
                    <div className="space-y-6">
                        <p className="font-bold text-xl text-brand-primary">
                            都市空間の「デジタルツイン」構築
                        </p>
                        <p>
                            取得した点群データや航空写真を統合し、フォトリアルな3次元都市モデルを構築します。
                            国土交通省主導の「Project PLATEAU」仕様（CityGML）に準拠したデータ作成や、
                            ゲームエンジン（Unity/Unreal Engine）向けの最適化データなど、用途に応じた形式で提供します。
                        </p>
                        <div className="grid grid-cols-2 gap-4">
                            <div className="border border-slate-200 p-4 rounded-xl text-center hover:border-brand-primary transition-colors">
                                <Layers className="mx-auto text-brand-primary mb-2" />
                                <div className="font-bold text-slate-700">BIM/CIM</div>
                                <div className="text-xs text-slate-500">建設プロセスの効率化</div>
                            </div>
                            <div className="border border-slate-200 p-4 rounded-xl text-center hover:border-brand-primary transition-colors">
                                <Globe className="mx-auto text-brand-primary mb-2" />
                                <div className="font-bold text-slate-700">VR/AR Contents</div>
                                <div className="text-xs text-slate-500">景観シミュレーション</div>
                            </div>
                        </div>
                    </div>
                </Section>

                {/* --- Service 3: AI Analysis --- */}
                <Section title="AI & Image Analysis" image={Images.analysis}>
                    <div className="space-y-6">
                        <p className="font-bold text-xl text-brand-primary">
                            AIが導き出す、データの新たな価値
                        </p>
                        <p>
                            膨大な画像データや点群データから、目視では判別困難な変化や特徴をAI（ディープラーニング）が自動抽出。
                            インフラ点検の自動化や、森林資源量の推定など、業務効率化を支援するソリューションを提供します。
                        </p>
                        <div className="bg-white shadow-lg p-6 rounded-2xl border-l-4 border-brand-accent">
                            <h4 className="font-bold text-slate-800 mb-2">Use Case: 道路インフラ維持管理</h4>
                            <p className="text-sm text-slate-600 mb-4">
                                車載カメラ映像から、ひび割れ（クラック）や白線の摩耗をAIが自動検知。
                                補修が必要な箇所を地図上にヒートマップとして可視化し、修繕計画の立案をサポートします。
                            </p>
                            <span className="inline-block bg-brand-accent/10 text-brand-accent text-xs font-bold px-2 py-1 rounded">Accuracy 98%+</span>
                        </div>
                    </div>
                </Section>

                {/* --- Service 4: GIS Development --- */}
                <Section title="GIS System Development" image={Images.office} reverse>
                    <div className="space-y-6">
                        <p className="font-bold text-xl text-brand-primary">
                            業務フローに直結する、オーダーメイドGIS
                        </p>
                        <p>
                            高機能なデスクトップGISから、誰でも簡単に使えるWebGISまで。
                            お客様の業務課題をヒアリングし、最適なシステムを設計・開発します。
                            オープンソース（FOSS4G）を活用した低コストな提案から、堅牢なエンタープライズシステムまで幅広く対応可能です。
                        </p>
                        <div className="flex flex-wrap gap-2">
                            {['Cesium JS', 'Leaflet', 'PostGIS', 'QGIS Plugin', 'React Integration'].map((tag, i) => (
                                <span key={i} className="px-3 py-1 bg-slate-200 text-slate-600 text-xs font-mono font-bold rounded-full">
                                    {tag}
                                </span>
                            ))}
                        </div>
                    </div>
                </Section>

                {/* --- Call to Action --- */}
                <div className="mt-20 py-20 bg-slate-900 rounded-3xl text-center text-white relative overflow-hidden shadow-2xl">
                    <div className="absolute inset-0 opacity-30 bg-[url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=2000')] bg-cover bg-center mix-blend-overlay"></div>
                    <div className="relative z-10 px-6">
                        <h2 className="text-3xl md:text-5xl font-bold mb-6">Ready to Innovate?</h2>
                        <p className="text-slate-300 text-lg mb-10 max-w-2xl mx-auto">
                            お客様の課題に合わせた最適な技術プランをご提案します。<br />
                            まずはお気軽にご相談ください。
                        </p>
                        <button
                            onClick={() => window.dispatchEvent(new CustomEvent('navigate', { detail: 'contact' }))}
                            className="bg-brand-primary hover:bg-brand-primary/90 text-white font-bold py-4 px-10 rounded-full transition-all transform hover:scale-105 shadow-lg shadow-brand-primary/50"
                        >
                            お問い合わせはこちら
                        </button>
                    </div>
                </div>

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

window.App.Pages.Services = Services;