---
// imports
import Layout from "../layouts/Layout.astro";
import InitialSection from "../components/InitialSection.astro";
import CollapsableFeatures from "../components/CollapsableFeatures.astro";
import "../styles/index.css";

// types

// props

// logic, variables, functions, etc.
---

<Layout pageTitle="Home page">
    <section class="homepage">
        <InitialSection
            imgSrc="/images/mujer-con-tablet.svg"
            imgAlt="Fotografía de una mujer sosteniendo una tablet"
            logoSrc="/images/logo-naliia.svg"
            logoAlt="Logo de Naliia"
            mainTitle="Transformamos el caos en claridad"
            subtitle="Convertimos la complejidad de negocios completos en un ecosistema que respira orden, precisión y belleza."
            buttonText="Comienza tu experiencia aquí"
            customHref="https://wa.me/573001158180"
        />

        <!-- ----- What we offer section ----- -->
        <section class="offer-section second-sect-container sections">
            <div class="title-and-phrase">
                <h4 class="what-we-offer-title">¿Qué ofrecemos?</h4>

                <p class="sections-subtitle what-we-offer-phrase">
                    En Naliia te ofrecemos una solución diseñada para
                    simplificar la operación de tu negocio, mejorar la gestión
                    diaria y automatizar procesos clave.
                </p>
            </div>

            <div class="cards-container">
                <div class="offer-card card-1">
                    <div class="card-content">
                        <h5>🧩 Gestión integral del negocio</h5>
                        <p>
                            Centraliza la información y los procesos clave de tu
                            negocio en una sola plataforma. Administra clientes,
                            ventas, inventarios, agenda y contabilidad de forma
                            ordenada, reduciendo errores y ahorrando tiempo
                            operativo.
                        </p>
                    </div>
                </div>

                <div class="offer-card card-2">
                    <div class="card-content">
                        <h5>👥 Herramientas para tu equipo</h5>
                        <p>
                            Pon a tu equipo en sintonía con una aplicación web
                            intuitiva que les permite ver sus servicios
                            agendados, registrar avances, añadir observaciones y
                            evidencias, y trabajar conectados en tiempo real con
                            la administración.
                        </p>
                    </div>
                </div>

                <div class="offer-card card-3">
                    <div class="card-content">
                        <h5>
                            🤖 Automatización con<br />inteligencia artificial
                        </h5>
                        <p>
                            Optimiza la comunicación y la atención al cliente
                            con agentes de inteligencia artificial que
                            automatizan el agendamiento de citas, confirmaciones
                            y mensajes por WhatsApp y otros canales, sin
                            intervención manual.
                        </p>
                    </div>
                </div>

                <div class="offer-card card-4">
                    <div class="card-content">
                        <h5>📊 Control y toma de decisiones</h5>
                        <p>
                            Accede a reportes claros y actualizados sobre la
                            operación, el desempeño del equipo y los resultados
                            del negocio, para tomar decisiones informadas y
                            planificar el crecimiento con mayor seguridad.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- ----- Pricing section ----- -->
        <section class="pricing-container">
            <div class="title-and-phrase">
                <h4 class="pricing-title">Elige tu plan</h4>

                <p class="sections-subtitle pricing-phrase">
                    Nuestros planes están diseñados para adaptarse a las
                    necesidades de tu negocio, ofreciendo flexibilidad y
                    escalabilidad a medida que creces.
                </p>
            </div>

            <div class="pricing-cards-container">
                <div class="best-plan-card">
                    <div class="price-container">
                        <p class="plan-type">Plan Avanzado</p>

                        <div class="price-and-description">
                            <h4 class="price-title">$500.000 COP</h4>
                            <h6 class="price-subtitle">
                                La mejor opción para tu negocio!
                            </h6>
                        </div>
                    </div>

                    <div class="divider"></div>

                    <CollapsableFeatures
                        basicFeatures={true}
                        webAppFeatures={true}
                        aiFeatures={true}
                    />

                    <div class="features-container">
                        <p class="features-subtitle">Tu plan incluye:</p>

                        <div class="features-list">
                            <div class="basic-features">
                                <p><strong>Características básicas:</strong></p>

                                <p>
                                    Control completo de usuarios, clientes,
                                    proveedores, inventario, contabilidad y
                                    reportes financieros. Módulos de ventas,
                                    compras y agenda de profesionales.
                                </p>
                            </div>

                            <div class="webapp-features">
                                <p><strong>Aplicación web:</strong></p>

                                <p>
                                    Acceso personalizado para gestionar
                                    servicios diarios: control en tiempo real,
                                    registro de evidencias, reportes y
                                    comunicación fluida con central.
                                </p>
                            </div>

                            <div class="ai-features">
                                <p>
                                    <strong
                                        >Servicio al cliente y postventa:</strong
                                    >
                                </p>

                                <p>
                                    Agendamiento y confirmación por
                                    WhatsApp/redes, con notificaciones de salida
                                    vía WhatsApp o email.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="basic-mid-plans-container">
                    <div class="mid-plan pricing-card">
                        <div class="price-container">
                            <p class="plan-type">Plan Intermedio</p>

                            <div class="price-and-description">
                                <h5 class="price-title">$300.000 COP</h5>
                                <p class="price-subtitle">
                                    Gestiona tu negocio con eficiencia y control
                                    total!
                                </p>
                            </div>
                        </div>

                        <div class="divider"></div>

                        <CollapsableFeatures
                            basicFeatures={true}
                            webAppFeatures={true}
                        />

                        <div class="features-container">
                            <p class="features-subtitle">Tu plan incluye:</p>

                            <div class="features-list">
                                <div class="basic-features">
                                    <p>
                                        <strong>Características básicas:</strong
                                        >
                                    </p>

                                    <p>
                                        Control completo de usuarios, clientes,
                                        proveedores, inventario, contabilidad y
                                        reportes financieros. Módulos de ventas,
                                        compras y agenda de profesionales.
                                    </p>
                                </div>

                                <div class="webapp-features">
                                    <p><strong>Aplicación web:</strong></p>

                                    <p>
                                        Acceso personalizado para gestionar
                                        servicios diarios: control en tiempo
                                        real, registro de evidencias, reportes y
                                        comunicación fluida con central.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="basic-plan pricing-card">
                        <div class="price-container">
                            <p class="plan-type">Plan Básico</p>

                            <div class="price-and-description">
                                <h5 class="price-title">$100.000 COP</h5>
                                <p class="price-subtitle">
                                    Gestión esencial para tu negocio!
                                </p>
                            </div>
                        </div>

                        <div class="divider"></div>

                        <CollapsableFeatures basicFeatures={true} />

                        <div class="features-container">
                            <p class="features-subtitle">Tu plan incluye:</p>

                            <div class="features-list">
                                <div class="basic-features">
                                    <p>
                                        <strong>Características básicas:</strong
                                        >
                                    </p>

                                    <p>
                                        Control completo de usuarios, clientes,
                                        proveedores, inventario, contabilidad y
                                        reportes financieros. Módulos de ventas,
                                        compras y agenda de profesionales.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <a href="https://wa.me/573001158180" target="_blank"
                class="calltoaction-button button-hover-effect"
            >
                Quiero obtener uno de los planes
            </a>

            <p class="important-information">
                Todos los planes incluyen soporte de lunes a viernes de 8am a
                6pm y sábados de 8am a 4pm. Además, cada plan cuenta con una
                cantidad de horas de capacitación, de la siguiente manera: Plan
                Básico: 8 horas, Plan Intermedio: 12 horas, Plan Avanzado: 16
                horas.
            </p>
        </section>
    </section>
</Layout>