const { ArrowRight, ChevronRight, Bell } = lucide;
const { Section } = window.App.Components;
const { Images } = window.App.Utils;

const Home = () => {
    const news = [
        { date: '2023.08.22', cat: 'Seminar', title: '最新バージョン ハンズオントレーニング開催のお知らせ' },
        { date: '2022.07.15', cat: 'Event', title: 'DJI L1ユーザー向け Terrasolid UAVウェビナー開催' },
        { date: '2022.06.10', cat: 'Update', title: 'SimActive Correlator3D 新機能紹介' },
    ];

    return (
        <div className="animate-fade-in">
            {/* Hero Section with Background Image */}
            <section className="relative h-screen flex items-center px-6 overflow-hidden">
                {/* Background Image Layer */}
                <div className="absolute inset-0 z-0">
                    <img
                        src={Images.hero}
                        alt="City Aerial"
                        className="w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 bg-white/70"></div>
                </div>

                <div className="max-w-7xl mx-auto w-full pt-20 relative z-10">
                    <div className="max-w-3xl">
                        <div className="inline-block px-4 py-2 bg-brand-primary/10 text-brand-primary rounded-full text-sm font-bold tracking-wider mb-6 uppercase animate-pulse-slow backdrop-blur-md border border-brand-primary/20">
                            Geospatial Intelligence
                        </div>
                        <h1 className="text-5xl md:text-8xl font-black text-slate-800 leading-tight mb-8 tracking-tight drop-shadow-sm">
                            Map the <br />
                            <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-primary to-brand-secondary">Future.</span>
                        </h1>
                        <p className="text-xl text-slate-700 mb-10 leading-relaxed max-w-lg bg-white/60 backdrop-blur-md p-6 rounded-2xl shadow-sm border border-white/50">
                            3次元計測からGIS開発まで。<br />
                            「みるくる」は空間情報で世界を可視化し、<br />
                            社会の新たな価値を創造します。
                        </p>

                        <div className="flex flex-wrap gap-4">
                            <button
                                onClick={() => window.dispatchEvent(new CustomEvent('navigate', { detail: 'services' }))}
                                className="px-8 py-4 bg-brand-primary hover:bg-brand-primary/90 text-white rounded-full font-bold shadow-lg shadow-brand-primary/30 transition-all transform hover:-translate-y-1 flex items-center gap-2"
                            >
                                View Services <ArrowRight size={18} />
                            </button>
                            <button
                                onClick={() => window.dispatchEvent(new CustomEvent('navigate', { detail: 'products' }))}
                                className="px-8 py-4 bg-white/80 text-slate-700 hover:text-brand-primary border border-slate-200 rounded-full font-bold shadow-sm hover:shadow-md transition-all backdrop-blur-sm"
                            >
                                Products
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            {/* News Section */}
            <section className="py-20 bg-white relative z-10">
                <div className="max-w-4xl mx-auto px-6">
                    <div className="flex items-center gap-4 mb-10">
                        <span className="text-brand-primary font-bold tracking-widest uppercase text-sm">News & Topics</span>
                        <div className="h-px bg-slate-200 flex-grow"></div>
                    </div>

                    <div className="space-y-6">
                        {news.map((item, i) => (
                            <div key={i} className="group flex flex-col md:flex-row md:items-center gap-4 py-4 border-b border-slate-100 hover:bg-slate-50 transition-colors px-4 rounded-lg cursor-pointer">
                                <div className="flex items-center gap-3">
                                    <span className="text-slate-400 text-sm font-mono">{item.date}</span>
                                    <span className="px-2 py-1 bg-brand-secondary/10 text-brand-secondary text-xs font-bold rounded">{item.cat}</span>
                                </div>
                                <h3 className="font-medium text-slate-700 group-hover:text-brand-primary transition-colors flex-grow">
                                    {item.title}
                                </h3>
                                <ChevronRight size={16} className="text-slate-300 group-hover:text-brand-primary opacity-0 group-hover:opacity-100 transition-all transform group-hover:translate-x-1" />
                            </div>
                        ))}
                    </div>

                    <div className="mt-8 text-right">
                        <a href="#" className="text-sm font-bold text-brand-primary hover:text-brand-secondary transition-colors inline-flex items-center gap-1">
                            VIEW ALL <ArrowRight size={14} />
                        </a>
                    </div>
                </div>
            </section>

            {/* Service Highlights (Photo Sections) */}
            <div className="bg-slate-50">
                <Section title="Advanced Surveying" image={Images.drone} reverse>
                    <p className="mb-6">
                        UAV（ドローン）や航空機搭載レーザーを用いた最新の測量技術により、広範囲かつ高精度な3次元データの取得を実現します。
                    </p>
                    <button
                        onClick={() => window.dispatchEvent(new CustomEvent('navigate', { detail: 'services' }))}
                        className="text-brand-primary font-bold hover:underline"
                    >
                        Read More &rarr;
                    </button>
                </Section>

                <Section title="Data Analysis & GIS" image={Images.analysis}>
                    <p className="mb-6">
                        取得した膨大な地理空間情報を解析し、防災・都市計画・インフラ維持管理など、お客様の課題解決に直結する価値あるデータを提供します。
                    </p>
                    <button
                        onClick={() => window.dispatchEvent(new CustomEvent('navigate', { detail: 'services' }))}
                        className="text-brand-primary font-bold hover:underline"
                    >
                        Read More &rarr;
                    </button>
                </Section>
            </div>

        </div>
    );
};

window.App.Pages.Home = Home;