"use client";

import Breadcrumb from '../../components/Breadcrumb';
import React, { useState } from 'react';
import {
    Heart, Activity, Stethoscope, Baby, Brain, Menu, X, Phone, Mail, MapPin, ChevronRight,
    CreditCard, DollarSign, Calendar, ShieldCheck, User, CheckCircle, ArrowRight, Construction,
    Award, FileText, Hammer, Building, TrendingUp
} from 'lucide-react';

// --- Types ---
interface Service {
    icon: React.ReactNode;
    title: string;
    desc: string;
}

// --- Mock Data ---
const PLANNED_SERVICES: Service[] = [
    {
        icon: <Heart className="w-6 h-6 text-rose-500" />,
        title: "Cardiology Wing",
        desc: "Planned 50-bed specialized heart center with catheterization labs."
    },
    {
        icon: <Brain className="w-6 h-6 text-indigo-500" />,
        title: "Neurology Center",
        desc: "Advanced stroke unit and neurosurgery theaters currently in blueprint phase."
    },
    {
        icon: <Baby className="w-6 h-6 text-sky-500" />,
        title: "Pediatrics ICU",
        desc: "Dedicated neonatal intensive care unit (NICU) infrastructure."
    },
    {
        icon: <Activity className="w-6 h-6 text-amber-500" />,
        title: "Level 1 Trauma",
        desc: "Emergency response infrastructure designed for mass casualty management."
    },
    {
        icon: <ShieldCheck className="w-6 h-6 text-teal-500" />,
        title: "Community Health",
        desc: "Outpatient department block designed to handle 2000+ daily free consultations."
    },
    {
        icon: <Stethoscope className="w-6 h-6 text-emerald-500" />,
        title: "General Ward",
        desc: "500-bed general ward facility with state-of-the-art hygiene systems."
    },
];

export default function DMH() {
    const breadcrumbData = [
        { name: 'Who We Are', href: '#' },
        { name: 'Overview', href: '/overview' },
    ];

    // Page Info //
    const pageTitle = "Your Imginations We Make Reality.";
    const description = "Wimraw is a global organization dedicated to innovation across IT, AI, Robotics, and Media.";
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [donationAmount, setDonationAmount] = useState<number | 'custom'>(1000);
    const [customAmount, setCustomAmount] = useState('');
    const [frequency, setFrequency] = useState<'once' | 'monthly'>('once');

    return (

        <main className="min-h-screen bg-gray-50">
            <Breadcrumb
                breadcrumbs={breadcrumbData}
                pageTitle={pageTitle}
                description={description}
            />

            <div className="min-h-screen bg-white text-slate-900 font-sans selection:bg-rose-100 selection:text-rose-900">
                {/* Styles for specific fonts */}
                <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');
        
        :root {
          --font-heading: 'Plus Jakarta Sans', sans-serif;
          --font-body: 'Inter', sans-serif;
        }

        h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
        body { font-family: var(--font-body); }
      `}</style>

                {/* Hero Section */}
                <section className="relative py-20 lg:py-32 overflow-hidden bg-slate-50">
                    <div className="absolute top-0 right-0 w-1/2 h-full bg-rose-50/50 rounded-l-[100px] -mr-20 hidden lg:block"></div>

                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                            <div className="space-y-8">
                                <div className="inline-flex items-center gap-2 bg-white border border-rose-200 rounded-full px-4 py-1.5 shadow-sm">
                                    <span className="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></span>
                                    <span className="text-xs font-bold text-rose-700 uppercase tracking-wide">Phase 1 Foundation: 35% Complete</span>
                                </div>
                                <h1 className="text-5xl lg:text-7xl font-extrabold text-slate-900 leading-[1.1]">
                                    Help Us Build a <br />
                                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-amber-600">Sanctuary</span> for <br />
                                    the Future.
                                </h1>
                                <p className="text-xl text-slate-600 leading-relaxed max-w-lg">
                                    WIMRAW has donated the land and technology. Now, we need your help to raise the walls. Join the capital campaign to build Dhanvantari Multispecialty Hospital—a free healthcare haven for all.
                                </p>

                                {/* Progress Bar in Hero */}
                                <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-lg max-w-md">
                                    <div className="flex justify-between text-sm font-bold mb-2">
                                        <span className="text-slate-900">Infrastructure Fund</span>
                                        <span className="text-rose-600">27% Funded</span>
                                    </div>
                                    <div className="w-full bg-slate-100 rounded-full h-3 mb-4 overflow-hidden">
                                        <div className="bg-gradient-to-r from-[#4a00e0] to-amber-500 h-full rounded-full w-[27%]"></div>
                                    </div>
                                    <div className="flex justify-between text-xs text-slate-500">
                                        <span>Raised: ₹12.4 Cr</span>
                                        <span>Goal: ₹45 Cr</span>
                                    </div>
                                </div>

                                <div className="flex flex-wrap gap-4">
                                    <a href="#donate" className="px-8 py-4 bg-[#4a00e0] text-white rounded-lg font-bold hover:bg-rose-700 transition-all flex items-center gap-2 shadow-xl shadow-rose-600/20">
                                        Donate Construction Material <ArrowRight className="w-4 h-4" />
                                    </a>
                                    <button className="px-8 py-4 bg-white border border-slate-200 text-slate-700 rounded-lg font-bold hover:bg-slate-50 transition-all flex items-center gap-2">
                                        <FileText className="w-4 h-4" /> View Architectural Plans
                                    </button>
                                </div>
                            </div>
                            <div className="relative">
                                <div className="absolute -inset-4 bg-rose-600/10 rounded-2xl transform rotate-3"></div>
                                <img
                                    src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&q=80&w=1000"
                                    alt="Architectural Render"
                                    className="relative rounded-2xl shadow-2xl w-full object-cover h-[600px]"
                                />
                                <div className="absolute bottom-8 right-8 bg-slate-900 text-white p-6 rounded-xl shadow-xl max-w-xs border border-slate-700">
                                    <div className="flex items-center gap-3 mb-2">
                                        <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center">
                                            <Award className="w-6 h-6 text-yellow-500" />
                                        </div>
                                        <div>
                                            <p className="font-bold text-white text-sm">Future-Ready</p>
                                            <p className="text-xs text-slate-400">Government Compliant</p>
                                        </div>
                                    </div>
                                    <p className="text-xs text-slate-300">Designed to fully integrate with PM-JAY and State Health Schemes upon commissioning.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Government Schemes Assurance */}
                <section className="bg-black border-y border-slate-200 shadow-sm py-10 relative z-20">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="text-center mb-8">
                            <span className="text-[#4a00e0] font-bold tracking-widest uppercase text-xs">Our Commitment to Accessibility</span>
                            <h2 className="text-2xl font-bold text-white mt-2">Designing for Universal Coverage</h2>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
                            {/* Ayushman Bharat Badge */}
                            <div className="flex items-center gap-4 p-6 rounded-xl bg-yellow-50 border border-yellow-200">
                                <div className="bg-yellow-100 p-3 rounded-full shrink-0">
                                    <Award className="w-8 h-8 text-yellow-700" />
                                </div>
                                <div>
                                    <p className="text-xs font-bold text-[#4a00e0] uppercase mb-1">Infrastructure Compliance</p>
                                    <h3 className="text-lg font-bold text-slate-900">PM Ayushman Bharat (PM-JAY)</h3>
                                    <p className="text-sm text-slate-600 mt-1">Facility layout and IT systems are being built to meet all empanelment criteria for the Pradhan Mantri Jan Arogya Yojana.</p>
                                </div>
                            </div>

                            {/* State Govt Schemes Badge */}
                            <div className="flex items-center gap-4 p-6 rounded-xl bg-indigo-50 border border-indigo-200">
                                <div className="bg-indigo-100 p-3 rounded-full shrink-0">
                                    <FileText className="w-8 h-8 text-indigo-700" />
                                </div>
                                <div>
                                    <p className="text-xs font-bold text-indigo-800 uppercase mb-1">State Integration</p>
                                    <h3 className="text-lg font-bold text-slate-900">State Govt Health Cards</h3>
                                    <p className="text-sm text-slate-600 mt-1">Dedicated 'Scheme Counters' and digital verification kiosks are included in the architectural blueprints.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* The Vision / What We Are Building */}
                <section className="py-20 bg-slate-50">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="text-center max-w-3xl mx-auto mb-16">
                            <h2 className="text-sm font-bold text-[#4a00e0] uppercase tracking-widest mb-3">The Master Plan</h2>
                            <h3 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">What Your Donation Will Build</h3>
                            <p className="text-lg text-slate-600 leading-relaxed">
                                We are not just building a hospital; we are building a legacy of care. Here are the core facilities currently under construction that need your support.
                            </p>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            {PLANNED_SERVICES.map((service, idx) => (
                                <div key={idx} className="bg-white p-8 rounded-xl border border-slate-200 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all group">
                                    <div className="mb-6 bg-slate-50 w-14 h-14 rounded-xl flex items-center justify-center group-hover:bg-rose-50 group-hover:text-rose-600 transition-colors">
                                        {service.icon}
                                    </div>
                                    <h3 className="text-xl font-bold text-slate-900 mb-3">{service.title}</h3>
                                    <div className="h-1 w-12 bg-slate-100 mb-4 group-hover:bg-rose-500 transition-colors"></div>
                                    <p className="text-slate-900 leading-relaxed text-sm">{service.desc}</p>
                                    <div className="mt-6 pt-4 border-t border-slate-100 flex items-center justify-between">
                                        <span className="text-xs font-bold text-slate-900 uppercase">Status</span>
                                        <span className="text-xs font-bold text-[#4a00e0] flex items-center gap-1">
                                            <Construction className="w-3 h-3" /> Awaiting Funds
                                        </span>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Cost Breakdown */}
                <section className="py-20 bg-white">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="bg-slate-900 rounded-3xl p-8 md:p-16 text-white relative overflow-hidden">
                            <div className="absolute top-0 right-0 w-64 h-64 bg-rose-600 rounded-full blur-[100px] opacity-20"></div>

                            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 relative z-10">
                                <div>
                                    <h3 className="text-3xl font-bold mb-6">Transparency in Construction</h3>
                                    <p className="text-slate-400 mb-8 leading-relaxed">
                                        WIMRAW guarantees that <strong className="text-white">100% of public donations</strong> go directly to construction materials and medical equipment. Administrative overheads, staff salaries, and land costs are fully absorbed by WIMRAW Corporate.
                                    </p>
                                    <div className="space-y-4">
                                        <div className="flex items-center justify-between p-4 bg-slate-800 rounded-lg border border-slate-700">
                                            <span>Civil Structure & Facade</span>
                                            <span className="font-bold text-emerald-400">₹15 Cr</span>
                                        </div>
                                        <div className="flex items-center justify-between p-4 bg-slate-800 rounded-lg border border-slate-700">
                                            <span>Medical Gas & HVAC</span>
                                            <span className="font-bold text-emerald-400">₹8 Cr</span>
                                        </div>
                                        <div className="flex items-center justify-between p-4 bg-slate-800 rounded-lg border border-slate-700">
                                            <span>Diagnostic Equipment</span>
                                            <span className="font-bold text-emerald-400">₹22 Cr</span>
                                        </div>
                                    </div>
                                </div>

                                <div className="flex items-center justify-center">
                                    <div className="bg-white text-slate-900 p-8 rounded-2xl w-full max-w-sm">
                                        <h4 className="font-bold text-xl mb-6 text-center">Funding Gap</h4>
                                        <div className="relative w-48 h-48 mx-auto mb-6">
                                            {/* Simple CSS Donut Chart representation */}
                                            <svg viewBox="0 0 36 36" className="w-full h-full transform -rotate-90">
                                                <path className="text-slate-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" strokeWidth="3.8" />
                                                <path className="text-rose-500" strokeDasharray="27, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" strokeWidth="3.8" />
                                            </svg>
                                            <div className="absolute inset-0 flex flex-col items-center justify-center">
                                                <span className="text-4xl font-bold">73%</span>
                                                <span className="text-xs uppercase font-bold text-slate-500">Remaining</span>
                                            </div>
                                        </div>
                                        <p className="text-center text-sm text-slate-600 mb-6">
                                            We need <strong>₹32.6 Crores</strong> more to complete Phase 1 by 2026.
                                        </p>
                                        <a href="#donate" className="block w-full py-3 bg-slate-900 text-white text-center rounded-lg font-bold hover:bg-slate-800 transition-colors">
                                            Close the Gap
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Donation Form */}
                <section id="donate" className="py-24 bg-white relative">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="text-center mb-12">
                            <span className="inline-block p-3 rounded-full bg-rose-50 text-rose-600 mb-4">
                                <Hammer className="w-8 h-8" />
                            </span>
                            <h2 className="text-4xl font-bold text-slate-900">Capital Campaign Donation</h2>
                            <p className="text-slate-600 mt-4 text-lg">Leave a brick in your name. Build a legacy of healing.</p>
                        </div>

                        <div className="max-w-4xl mx-auto bg-white rounded-3xl shadow-2xl border border-slate-100 overflow-hidden flex flex-col md:flex-row">
                            {/* Left: Tiers */}
                            <div className="md:w-2/5 bg-slate-50 p-8 border-r border-slate-100">
                                <h4 className="font-bold text-slate-900 mb-6 uppercase text-sm tracking-wider">Recognition Tiers</h4>
                                <div className="space-y-4">
                                    <div className="p-4 bg-white rounded-lg border border-slate-200 hover:border-rose-300 transition-colors cursor-pointer" onClick={() => setDonationAmount(5000)}>
                                        <div className="flex justify-between items-center mb-1">
                                            <span className="font-bold text-slate-900">Bronze Brick</span>
                                            <span className="text-rose-600 font-bold">₹5,000</span>
                                        </div>
                                        <p className="text-xs text-slate-500">Name on the digital donor wall.</p>
                                    </div>
                                    <div className="p-4 bg-white rounded-lg border border-slate-200 hover:border-rose-300 transition-colors cursor-pointer" onClick={() => setDonationAmount(25000)}>
                                        <div className="flex justify-between items-center mb-1">
                                            <span className="font-bold text-slate-900">Silver Pillar</span>
                                            <span className="text-rose-600 font-bold">₹25,000</span>
                                        </div>
                                        <p className="text-xs text-slate-500">Name engraved on the lobby pillar.</p>
                                    </div>
                                    <div className="p-4 bg-white rounded-lg border border-slate-200 hover:border-rose-300 transition-colors cursor-pointer" onClick={() => setDonationAmount(100000)}>
                                        <div className="flex justify-between items-center mb-1">
                                            <span className="font-bold text-slate-900">Gold Ward</span>
                                            <span className="text-rose-600 font-bold">₹1 Lakh+</span>
                                        </div>
                                        <p className="text-xs text-slate-500">Dedicate a patient bed in honor of a loved one.</p>
                                    </div>
                                </div>
                            </div>

                            {/* Right: Form */}
                            <div className="md:w-3/5 p-8">
                                <div className="mb-6">
                                    <label className="block text-sm font-bold text-slate-700 mb-2">Donation Amount (INR)</label>
                                    <div className="relative">
                                        <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 font-bold">₹</span>
                                        <input
                                            type="number"
                                            value={donationAmount === 'custom' ? customAmount : donationAmount}
                                            onChange={(e) => { setCustomAmount(e.target.value); setDonationAmount('custom'); }}
                                            className="w-full pl-10 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-xl text-xl font-bold text-slate-900 focus:outline-none focus:ring-2 focus:ring-rose-500"
                                        />
                                    </div>
                                </div>

                                <div className="grid grid-cols-2 gap-4 mb-6">
                                    <div>
                                        <label className="block text-xs font-bold text-slate-500 mb-1">First Name</label>
                                        <input type="text" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-slate-400" />
                                    </div>
                                    <div>
                                        <label className="block text-xs font-bold text-slate-500 mb-1">Last Name</label>
                                        <input type="text" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-slate-400" />
                                    </div>
                                </div>

                                <div className="mb-8">
                                    <label className="block text-xs font-bold text-slate-500 mb-1">Email Address (For Tax Receipt)</label>
                                    <input type="email" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-slate-400" />
                                </div>

                                <button className="w-full py-4 bg-rose-600 hover:bg-rose-700 text-white font-bold rounded-xl shadow-lg shadow-rose-600/20 transition-all flex items-center justify-center gap-2">
                                    <CreditCard className="w-5 h-5" />
                                    Proceed to Payment
                                </button>

                                <div className="mt-6 flex items-center justify-center gap-2 text-xs text-slate-400">
                                    <ShieldCheck className="w-3 h-3" />
                                    <span>Your donation is eligible for 80G Tax Exemption.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Contact / Location */}
                <section className="py-20 bg-slate-50 border-t border-slate-200">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                            <div>
                                <h2 className="text-2xl font-bold text-slate-900 mb-2">Construction Site Office</h2>
                                <p className="text-slate-600 mb-8">Visit us to see the progress firsthand. Hard hat tours available by appointment.</p>

                                <div className="space-y-6">
                                    <div className="flex items-start gap-4">
                                        <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center text-slate-900 shadow-sm shrink-0 border border-slate-200">
                                            <MapPin className="w-5 h-5" />
                                        </div>
                                        <div>
                                            <h4 className="font-bold text-slate-900">Site Address</h4>
                                            <p className="text-slate-600 text-sm">Plot 42, WIMRAW Knowledge City (Under Construction), <br />Sector 12, Tech Corridor, Bangalore - 560100</p>
                                        </div>
                                    </div>
                                    <div className="flex items-start gap-4">
                                        <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center text-slate-900 shadow-sm shrink-0 border border-slate-200">
                                            <Phone className="w-5 h-5" />
                                        </div>
                                        <div>
                                            <h4 className="font-bold text-slate-900">Capital Campaign Office</h4>
                                            <p className="text-slate-600 text-sm">+91 80 2345 6789</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="bg-slate-200 h-64 md:h-full rounded-2xl relative overflow-hidden flex items-center justify-center group border border-slate-300">
                                <img
                                    src="https://images.unsplash.com/photo-1590986375630-f65a2e5b721e?auto=format&fit=crop&q=80&w=1000"
                                    alt="Site Map"
                                    className="absolute inset-0 w-full h-full object-cover grayscale opacity-50 group-hover:opacity-75 transition-all"
                                />
                                <button className="relative z-10 bg-white px-6 py-3 rounded-full shadow-xl text-sm font-bold text-slate-900 hover:scale-105 transition-transform flex items-center gap-2">
                                    <MapPin className="w-4 h-4" /> Get Directions
                                </button>
                            </div>
                        </div>
                    </div>
                </section>

            </div>

        </main>

    );
}