import React, { useState } from 'react';
import { Smartphone, Apple } from 'lucide-react';
import WaitlistModal from './WaitlistModal';

const InstallSection: React.FC = () => {
    const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);

    return (
        <section id="install" className="py-20 bg-background-dark">
            <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="relative rounded-3xl overflow-hidden bg-surface-dark border border-gray-800 p-12 text-center shadow-2xl">
                    {/* Background Glow */}
                    <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-2xl bg-primary/5 blur-3xl rounded-full pointer-events-none"></div>

                    <div className="relative z-10">
                        <h2 className="text-3xl md:text-5xl font-display font-bold text-white mb-6">
                            Start Your Focus Journey
                        </h2>
                        <p className="text-lg md:text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
                            Download Nemia on Android today or join the waitlist for iOS.
                        </p>

                        <div className="flex flex-col sm:flex-row justify-center gap-4">
                            <a
                                href="https://play.google.com/store/apps/details?id=app.nemia.android&pcampaignid=web_share"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="bg-primary text-gray-900 px-8 py-4 rounded-xl font-bold text-lg hover:brightness-110 transition-all shadow-glow flex items-center justify-center gap-3"
                                onClick={() => {
                                    (window as { umami?: { track?: (eventName: string, data?: Record<string, unknown>) => void } })
                                        .umami?.track?.('play_store_clicked', { location: 'install_section' });
                                }}
                            >
                                <Smartphone size={24} />
                                <span>Get on Google Play</span>
                            </a>

                            <button
                                onClick={() => {
                                    (window as { umami?: { track?: (eventName: string, data?: Record<string, unknown>) => void } })
                                        .umami?.track?.('waitlist_open_clicked', { location: 'install_section' });
                                    setIsWaitlistOpen(true);
                                }}
                                className="bg-surface-accent border border-gray-700 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-gray-800 transition-all flex items-center justify-center gap-3"
                            >
                                <Apple size={24} />
                                <span>Join iOS Waitlist</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <WaitlistModal
                isOpen={isWaitlistOpen}
                onClose={() => setIsWaitlistOpen(false)}
            />
        </section>
    );
};

export default InstallSection;