@extends('layouts.panel-template', ['section' => 'projects'])

@section('main-content')
    <div class="p-6 md:p-10 max-w-7xl mx-auto w-full space-y-10">
        <section class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <div
                class="lg:col-span-8 bg-primary from-primary to-primary-container p-8 rounded-3xl shadow-lg relative overflow-hidden flex flex-col justify-between min-h-[320px]">
                <div class="relative z-10">
                    <span
                        class="text-primary-fixed-dim font-headline font-semibold text-sm tracking-widest uppercase mb-2 block">Avance
                        General</span>
                    <h2 class="text-white font-headline text-7xl font-bold tracking-tighter">70<span
                            class="text-primary-fixed text-4xl">%</span></h2>
                </div>
                <div class="relative z-10 w-full">
                    <div class="flex justify-between text-xs text-white/70 mb-2 font-medium">
                        <span>Estado: Muy Avanzado</span>
                        <span>Entrega estimada: Dic 2024</span>
                    </div>
                    <div class="h-3 w-full bg-white/10 rounded-full overflow-hidden">
                        <div class="h-full bg-white rounded-full w-[70%]"></div>
                    </div>
                </div>
                <div class="absolute -right-10 -bottom-10 opacity-10">
                    <span class="material-symbols-outlined text-[240px]">architecture</span>
                </div>
            </div>
            <div class="lg:col-span-4 bg-surface-container-lowest rounded-3xl overflow-hidden shadow-sm relative group">
                <img alt="Prototipo Praga"
                    class="w-full h-full object-cover grayscale-[0.5] group-hover:grayscale-0 transition-all duration-700"
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6X1U4vNExgdQ_eU5RLa4b6noDH5_Avj_lHTtHLyZG-NUDsPMtTzZV9UYhkO-08IzeX1iGrkYhhDR28xI2EEY-O80fxqYTgCNGCNmud3arlWbDxWUI84bjK_XSBpsbQijBOEWfjzsrojLVkcQ2gXynZ9IfwBgVU7yQ19VF5pEsdWt_9Kw1zW8mQSo4lqo-QQVXKb3diG9x2sTuy_tbzLbae5getWa9XAkp7q-gxNQfBsN_06IaSFmVixRgJxm0Cllr_5_OCF7eWdxC" />
                <div class="absolute bottom-0 left-0 right-0 p-6 bg-primary/80 from-primary/80 to-transparent">
                    <span class="text-white font-headline font-bold text-lg">Prototipo Praga</span>
                    <p class="text-white/80 text-xs">Ubicación: Lote 203, Sector Norte</p>
                </div>
            </div>
        </section>
        <section class="space-y-6">
            <div class="flex items-end justify-between border-b-2 border-outline-variant/10 pb-4">
                <div>
                    <h3 class="font-headline text-2xl font-bold text-on-surface">Mapa de Avance por Áreas</h3>
                    <p class="text-sm text-secondary font-medium mt-1">Visualización espacial del progreso interior</p>
                </div>
                <div class="flex gap-2">
                    <span
                        class="flex items-center gap-1.5 text-[10px] font-bold text-slate-500 uppercase bg-slate-100 px-3 py-1 rounded-full border border-slate-200">
                        <span class="w-2 h-2 rounded-full bg-emerald-500"></span> Completo
                    </span>
                    <span
                        class="flex items-center gap-1.5 text-[10px] font-bold text-slate-500 uppercase bg-slate-100 px-3 py-1 rounded-full border border-slate-200">
                        <span class="w-2 h-2 rounded-full bg-blue-500"></span> En Proceso
                    </span>
                </div>
            </div>
            <div class="bg-white p-6 md:p-10 rounded-[2rem] shadow-sm border border-slate-100">
                <div class="grid grid-cols-1 lg:grid-cols-5 gap-10">
                    <div
                        class="lg:col-span-3 flex items-center justify-center bg-slate-50/50 rounded-2xl p-4 md:p-8 border border-slate-100 relative">
                        <livewire:projects.unit.interactive-model />
                    </div>
                    <div class="lg:col-span-2 space-y-4">
                        <div
                            class="bg-emerald-50/50 p-4 rounded-2xl border border-emerald-100/50 flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div
                                    class="w-10 h-10 bg-emerald-500 rounded-xl flex items-center justify-center text-white">
                                    <span class="material-symbols-outlined">weekend</span>
                                </div>
                                <div>
                                    <h4 class="text-sm font-bold text-slate-900 leading-none">Sala / Comedor</h4>
                                    <p class="text-[10px] font-medium text-emerald-600 uppercase mt-1">Completado</p>
                                </div>
                            </div>
                            <span class="text-lg font-black text-slate-900">100%</span>
                        </div>
                        <div class="bg-white p-4 rounded-2xl border border-slate-100 flex flex-col gap-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-10 h-10 bg-blue-500 rounded-xl flex items-center justify-center text-white">
                                        <span class="material-symbols-outlined">bed</span>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-bold text-slate-900 leading-none">Dormitorios</h4>
                                        <p class="text-[10px] font-medium text-blue-500 uppercase mt-1">En acabados base</p>
                                    </div>
                                </div>
                                <span class="text-lg font-black text-slate-900">30%</span>
                            </div>
                            <div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
                                <div class="h-full bg-blue-500 rounded-full w-[30%]"></div>
                            </div>
                        </div>
                        <div class="bg-white p-4 rounded-2xl border border-slate-100 flex flex-col gap-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-10 h-10 bg-blue-400 rounded-xl flex items-center justify-center text-white">
                                        <span class="material-symbols-outlined">kitchen</span>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-bold text-slate-900 leading-none">Cocina</h4>
                                        <p class="text-[10px] font-medium text-blue-400 uppercase mt-1">Instalaciones</p>
                                    </div>
                                </div>
                                <span class="text-lg font-black text-slate-900">45%</span>
                            </div>
                            <div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
                                <div class="h-full bg-blue-400 rounded-full w-[45%]"></div>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div
                                class="bg-slate-50 p-3 rounded-2xl border border-slate-100 flex flex-col justify-between h-24">
                                <span class="text-[10px] font-extrabold text-slate-400 uppercase">Baños</span>
                                <div>
                                    <span class="text-xl font-black text-slate-900">15%</span>
                                    <div class="h-1 w-full bg-slate-200 rounded-full mt-1 overflow-hidden">
                                        <div class="h-full bg-slate-400 w-[15%]"></div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="bg-emerald-50/30 p-3 rounded-2xl border border-emerald-100 flex flex-col justify-between h-24">
                                <span class="text-[10px] font-extrabold text-emerald-800 uppercase">Patio / Jardín</span>
                                <div>
                                    <span class="text-xl font-black text-slate-900">85%</span>
                                    <div class="h-1 w-full bg-emerald-100 rounded-full mt-1 overflow-hidden">
                                        <div class="h-full bg-emerald-500 w-[85%]"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="space-y-6">
            <div class="flex items-end justify-between border-b-2 border-outline-variant/10 pb-4">
                <div>
                    <h3 class="font-headline text-2xl font-bold text-on-surface">Desglose por Etapa</h3>
                    <p class="text-sm text-secondary font-medium mt-1">Fases técnicas de construcción</p>
                </div>
                <span class="text-sm font-bold text-slate-400 bg-slate-100 px-3 py-1 rounded-full">4 Fases
                    Principales</span>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div
                    class="bg-surface-container-lowest p-8 rounded-3xl shadow-sm hover:shadow-md transition-shadow border border-slate-50">
                    <div class="flex justify-between items-start mb-6">
                        <div class="space-y-1">
                            <div class="flex items-center gap-2 text-emerald-600">
                                <span class="material-symbols-outlined"
                                    style="font-variation-settings: 'FILL' 1;">check_circle</span>
                                <span class="text-xs font-bold uppercase tracking-widest">Completado</span>
                            </div>
                            <h4 class="font-headline text-xl font-bold">Cimentación</h4>
                        </div>
                        <span class="font-headline text-2xl font-bold text-primary">100%</span>
                    </div>
                    <div class="h-2 w-full bg-outline-variant/20 rounded-full mb-8">
                        <div class="h-full bg-emerald-500 rounded-full w-full"></div>
                    </div>
                    <ul class="space-y-4">
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-emerald-500 text-lg">task_alt</span>
                            <span>Excavación y nivelación de terreno</span>
                        </li>
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-emerald-500 text-lg">task_alt</span>
                            <span>Plantilla de concreto y armado</span>
                        </li>
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-emerald-500 text-lg">task_alt</span>
                            <span>Vaciado de zapata corrida</span>
                        </li>
                    </ul>
                </div>
                <div
                    class="bg-surface-container-lowest p-8 rounded-3xl shadow-sm hover:shadow-md transition-shadow border border-slate-50">
                    <div class="flex justify-between items-start mb-6">
                        <div class="space-y-1">
                            <div class="flex items-center gap-2 text-emerald-600">
                                <span class="material-symbols-outlined"
                                    style="font-variation-settings: 'FILL' 1;">check_circle</span>
                                <span class="text-xs font-bold uppercase tracking-widest">Completado</span>
                            </div>
                            <h4 class="font-headline text-xl font-bold">Estructura</h4>
                        </div>
                        <span class="font-headline text-2xl font-bold text-primary">100%</span>
                    </div>
                    <div class="h-2 w-full bg-outline-variant/20 rounded-full mb-8">
                        <div class="h-full bg-emerald-500 rounded-full w-full"></div>
                    </div>
                    <ul class="space-y-4">
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-emerald-500 text-lg">task_alt</span>
                            <span>Levantamiento de muros perimetrales</span>
                        </li>
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-emerald-500 text-lg">task_alt</span>
                            <span>Cimbrado y colado de losa entrepiso</span>
                        </li>
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-emerald-500 text-lg">task_alt</span>
                            <span>Techumbre y pretiles</span>
                        </li>
                    </ul>
                </div>
                <div
                    class="bg-surface-container-lowest p-8 rounded-3xl shadow-sm hover:shadow-md transition-shadow border border-slate-50">
                    <div class="flex justify-between items-start mb-6">
                        <div class="space-y-1">
                            <div class="flex items-center gap-2 text-secondary">
                                <span class="material-symbols-outlined">pending</span>
                                <span class="text-xs font-bold uppercase tracking-widest">En Proceso</span>
                            </div>
                            <h4 class="font-headline text-xl font-bold">Instalaciones</h4>
                        </div>
                        <span class="font-headline text-2xl font-bold text-primary">40%</span>
                    </div>
                    <div class="h-2 w-full bg-outline-variant/20 rounded-full mb-8 overflow-hidden">
                        <div class="h-full bg-primary rounded-full w-[40%]"></div>
                    </div>
                    <ul class="space-y-4">
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-emerald-500 text-lg">task_alt</span>
                            <span class="line-through opacity-60">Canalización eléctrica base</span>
                        </li>
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-primary text-lg">radio_button_unchecked</span>
                            <span class="font-semibold text-primary">Tubería hidrosanitaria (En curso)</span>
                        </li>
                        <li class="flex items-center gap-3 text-on-surface text-sm opacity-40">
                            <span class="material-symbols-outlined text-lg">radio_button_unchecked</span>
                            <span>Cableado y tableros</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-slate-50 p-8 rounded-3xl shadow-none border border-slate-200/50">
                    <div class="flex justify-between items-start mb-6">
                        <div class="space-y-1">
                            <div class="flex items-center gap-2 text-slate-400">
                                <span class="material-symbols-outlined">schedule</span>
                                <span class="text-xs font-bold uppercase tracking-widest">Pendiente</span>
                            </div>
                            <h4 class="font-headline text-xl font-bold text-slate-400">Acabados</h4>
                        </div>
                        <span class="font-headline text-2xl font-bold text-slate-400">0%</span>
                    </div>
                    <div class="h-2 w-full bg-outline-variant/20 rounded-full mb-8">
                        <div class="h-full bg-slate-300 rounded-full w-0"></div>
                    </div>
                    <ul class="space-y-4 opacity-40">
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-lg">radio_button_unchecked</span>
                            <span>Aplanados y yeso en interiores</span>
                        </li>
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-lg">radio_button_unchecked</span>
                            <span>Colocación de pisos y azulejos</span>
                        </li>
                        <li class="flex items-center gap-3 text-on-surface-variant text-sm">
                            <span class="material-symbols-outlined text-lg">radio_button_unchecked</span>
                            <span>Carpintería y pintura final</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <section
            class="bg-primary/5 p-10 rounded-[2.5rem] border-2 border-dashed border-primary/20 flex flex-col md:flex-row items-center justify-between gap-6">
            <div class="space-y-2">
                <h4 class="font-headline text-xl font-bold">¿Necesitas un reporte detallado?</h4>
                <p class="text-on-surface-variant text-sm">Descarga el historial fotográfico y técnico de esta obra por
                    áreas y etapas.</p>
            </div>
            <div class="flex gap-4">
                <button
                    class="bg-primary text-white px-8 py-4 rounded-full font-headline font-bold text-sm shadow-md hover:shadow-lg transition-all flex items-center gap-3">
                    <span class="material-symbols-outlined">download</span>
                    Descargar Reporte PDF
                </button>
                <button
                    class="border-2 border-primary text-primary px-8 py-4 rounded-full font-headline font-bold text-sm hover:bg-primary/5 transition-all">
                    Contactar Residente
                </button>
            </div>
        </section>
    </div>
@endsection