"use client";

import React from 'react';
import { Activity, Sprout, Smartphone, Cpu, Wifi, ShieldCheck, Zap, ArrowUpRight, Search, Wind }

from 'lucide-react';

const TreeStethoscopeModern: React.FC = () => {
    return (
        <div className="min-h-screen bg-black text-zinc-100 font-sans selection:bg-lime-500 selection:text-black">

            {/* 2. Hero Section - Deep Immersive */}
            <header className="relative pt-40 pb-32 px-6 overflow-hidden">
                {/* Glow Effects */}
                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-emerald-900/20 blur-[120px] rounded-full pointer-events-none" />

                <div className="container mx-auto text-center relative z-10">

                    <h1 className="text-6xl md:text-8xl font-bold tracking-tighter text-white mb-6">
                        The Tree <br />
                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-lime-400">Stethoscope</span>
                    </h1>

                    <p className="text-xl text-zinc-400 max-w-2xl mx-auto mb-12 leading-relaxed">
                        Listen to the silent language of nature. A revolutionary AI-diagnostic tool that detects internal plant stress before it becomes visible.
                    </p>

                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                        <button className="group relative px-8 py-4 bg-white text-black font-semibold rounded-full overflow-hidden transition-all hover:scale-105">
                            <span className="relative z-10 flex items-center gap-2">
                                View Tech Specs <ArrowUpRight size={18} />
                            </span>
                        </button>
                        <button className="px-8 py-4 text-zinc-300 hover:text-white font-medium border border-zinc-800 hover:border-zinc-600 rounded-full transition-all">
                            Watch Demo
                        </button>
                    </div>
                </div>
            </header>

            {/* 3. The "Bento Grid" Features - Modern Boxy Layout */}
            <section className="py-20 px-6">
                <div className="container mx-auto">
                    <div className="mb-12 flex justify-between items-end">
                        <h2 className="text-3xl md:text-4xl font-bold text-white max-w-md">
                            Bio-Acoustic Intelligence <br />
                            <span className="text-zinc-500">How we decode nature.</span>
                        </h2>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        {/* Main Large Card */}
                        <div className="md:col-span-2 bg-zinc-900/50 border border-white/5 rounded-3xl p-8 md:p-12 relative overflow-hidden group">
                            <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-[80px] group-hover:bg-emerald-500/20 transition-all" />
                            <div className="relative z-10">
                                <div className="w-12 h-12 bg-zinc-800 rounded-2xl flex items-center justify-center mb-6 text-lime-400">
                                    <Activity />
                                </div>
                                <h3 className="text-2xl font-bold text-white mb-4">Real-Time Acoustic Diagnosis</h3>
                                <p className="text-zinc-400 max-w-md text-lg leading-relaxed">
                                    Just like a doctor's stethoscope. We use micro-sensors to listen to the internal hydraulic sounds of the tree, detecting dehydration, decay, or pest movement instantly.
                                </p>
                            </div>
                            {/* Visual Tech Representation */}
                            <div className="mt-8 flex gap-2">
                                <div className="h-12 w-1 bg-lime-500/50 rounded-full animate-[pulse_1s_ease-in-out_infinite]" />
                                <div className="h-12 w-1 bg-lime-500/30 rounded-full animate-[pulse_1.5s_ease-in-out_infinite]" />
                                <div className="h-12 w-1 bg-lime-500/80 rounded-full animate-[pulse_0.8s_ease-in-out_infinite]" />
                                <div className="h-12 w-1 bg-lime-500/40 rounded-full animate-[pulse_1.2s_ease-in-out_infinite]" />
                            </div>
                        </div>

                        {/* Side Card 1 */}
                        <div className="bg-zinc-900/50 border border-white/5 rounded-3xl p-8 flex flex-col justify-between hover:border-lime-500/30 transition-colors">
                            <Cpu className="text-zinc-500 mb-4" size={32} />
                            <div>
                                <h4 className="text-xl font-bold text-white mb-2">AI-Driven Core</h4>
                                <p className="text-sm text-zinc-400">Proprietary algorithms analyze sap flow patterns to predict yield.</p>
                            </div>
                        </div>

                        {/* Side Card 2 */}
                        <div className="bg-zinc-900/50 border border-white/5 rounded-3xl p-8 flex flex-col justify-between hover:border-lime-500/30 transition-colors">
                            <Smartphone className="text-zinc-500 mb-4" size={32} />
                            <div>
                                <h4 className="text-xl font-bold text-white mb-2">Mobile Sync</h4>
                                <p className="text-sm text-zinc-400">Live health alerts sent directly to iOS and Android devices.</p>
                            </div>
                        </div>

                        {/* Wide Bottom Card */}
                        <div className="md:col-span-3 bg-gradient-to-r from-zinc-900 to-zinc-900/50 border border-white/5 rounded-3xl p-8 md:p-10 flex flex-col md:flex-row items-center justify-between gap-8">
                            <div className="flex gap-6 items-center">
                                <div className="p-4 bg-lime-500/10 rounded-full text-lime-400">
                                    <ShieldCheck size={32} />
                                </div>
                                <div>
                                    <h3 className="text-xl font-bold text-white">Preventive Defense</h3>
                                    <p className="text-zinc-400">Identify root rot and infestation before surface symptoms appear.</p>
                                </div>
                            </div>
                            <div className="flex gap-8 text-center">
                                <div>
                                    <div className="text-3xl font-bold text-white">30%</div>
                                    <div className="text-xs uppercase tracking-wider text-zinc-500">Yield Boost</div>
                                </div>
                                <div className="w-px h-12 bg-zinc-800" />
                                <div>
                                    <div className="text-3xl font-bold text-white">50%</div>
                                    <div className="text-xs uppercase tracking-wider text-zinc-500">Less Disease</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* 4. Technical Specs - Minimal List */}
            <section className="py-20 bg-zinc-950 border-t border-white/5">
                <div className="container mx-auto px-6 max-w-4xl">
                    <h3 className="text-sm font-bold text-lime-500 uppercase tracking-widest mb-10">Hardware Specifications</h3>

                    <div className="space-y-0 divide-y divide-zinc-800">
                        <SpecRow label="Sensors" value="Piezo-electric Acoustic & Sap Flow" />
                        <SpecRow label="Connectivity" value="Bluetooth 5.0 / LoRaWAN / Wi-Fi" />
                        <SpecRow label="Power" value="Solar Assist + Li-Ion Battery" />
                        <SpecRow label="Detection Range" value="Root to Crown (Internal Structure)" />
                        <SpecRow label="Response Time" value="< 200ms Latency" />
                    </div>
                </div>
            </section>

            {/* 5. Future Scope - Cards */}
            <section className="py-20 px-6">
                <div className="container mx-auto">
                    <h2 className="text-3xl font-bold text-white mb-12 text-center">Future Roadmap</h2>
                    <div className="grid md:grid-cols-4 gap-6">
                        <RoadmapCard icon={<Wind />} title="Drone Swarm" desc="Integration for rapid aerial scanning." />
                        <RoadmapCard icon={<Search />} title="Global DB" desc="Sharing data with research institutions." />
                        <RoadmapCard icon={<Zap />} title="Auto-Cure" desc="Automated nutrient delivery systems." />
                        <RoadmapCard icon={<Wifi />} title="Sat-Link" desc="Macro satellite imagery sync." />
                    </div>
                </div>
            </section>

        </div>
    );
};

// Helper Components

const SpecRow = ({ label, value }: { label: string, value: string }) => (
    <div className="flex justify-between items-center py-6 group hover:bg-zinc-900/50 transition-colors px-4 rounded-lg">
        <span className="text-zinc-400 font-medium group-hover:text-white transition-colors">{label}</span>
        <span className="text-white font-mono text-sm">{value}</span>
    </div>
);

const RoadmapCard = ({ icon, title, desc }: { icon: React.ReactNode, title: string, desc: string }) => (
    <div className="bg-zinc-900 border border-zinc-800 p-6 rounded-xl hover:border-lime-500/50 transition-colors group">
        <div className="text-zinc-500 mb-4 group-hover:text-lime-400 transition-colors">{icon}</div>
        <h4 className="text-white font-bold mb-2">{title}</h4>
        <p className="text-sm text-zinc-400">{desc}</p>
    </div>
);

export default TreeStethoscopeModern;