import Pricing from "@components/PricingElement/PricingElement";
import AnimatedContainer from "@core/app/components/AnimatedConainer/AnimatedContainer";
import { IPlan } from "@core/Models/Plans.model";
import style from "./page.module.css";
import Link from "next/link";
import HeaderConfProvider from "@core/app/components/HeaderConfProvider/HeaderConfProvider";
import { ScrollToTop } from "@core/app/components/ScrollTop";
import DefaultLoginAction from "@core/app/components/LoginAction/DefaultLoginAction";

export const dynamic = "force-dynamic"; // Fuerza la página a ser dinámica

const GetPlanData = async (): Promise<IPlan[]> => {
    try {
        const url = process.env.NEXT_PUBLIC_API_URL;
        const res = await fetch(`${url}plans/find`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({}),
            cache: "no-store",
        });
        const pricingList: IPlan[] = await res.json();

        return pricingList;
    } catch {
        return [];
    }
};

export default async function PricingPage() {
    const pricingList = await GetPlanData();

    return (
        <AnimatedContainer
            color="#aeaeae"
            minSize={150}
            maxSize={500}
            items={10}
            style={{
                display: "block",
                width: "100%",
                background: "var(--white)",
            }}
        >
            <ScrollToTop />
            <HeaderConfProvider />
            <DefaultLoginAction />
            
            <div className={style.heroSection}>
                <h1 className={style.heroTitle}>Elegí el plan perfecto para vos</h1>
                <p className={style.heroSubtitle}>
                    Unite a las organizaciones que ya confían en TurnosXpress. Optimizá tu agenda, conecta con más personas y hace crecer tu negocio sin complicaciones. Transparente, sin comisiones ocultas y podés cancelar cuando quieras.
                </p>
                <div className={style.btnGroup}>
                    <Link href="#planes" className={style.primaryBtn}>
                        Elegir un Plan
                    </Link>
                </div>
            </div>
            
            <div id="planes" className={style.pricingSection}>
                <Pricing data={pricingList} />
            </div>

            {/* All Plans Include Section */}
            <div className={style.featuresSection}>
                <h2 className={style.sectionTitle}>Todos los planes incluyen</h2>
                <div className={style.featuresGrid}>
                    <div className={style.featureItem}>
                        <div className={style.featureIcon}>
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8V7z"></path></svg>
                        </div>
                        <h3 className={style.featureTitle}>Máxima Privacidad</h3>
                        <p className={style.featureText}>Toda la información viaja protegida y tus datos y los de tus clientes se mantienen 100% seguros y confidenciales.</p>
                    </div>
                    <div className={style.featureItem}>
                        <div className={style.featureIcon}>
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                        </div>
                        <h3 className={style.featureTitle}>Configuración Rápida</h3>
                        <p className={style.featureText}>Empieza a recibir turnos en menos de 5 minutos, sin conocimientos técnicos.</p>
                    </div>
                    <div className={style.featureItem}>
                        <div className={style.featureIcon}>
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                        </div>
                        <h3 className={style.featureTitle}>Soporte Dedicado</h3>
                        <p className={style.featureText}>Nuestro equipo de atención está siempre dispuesto a ayudarte a crecer.</p>
                    </div>
                    <div className={style.featureItem}>
                        <div className={style.featureIcon}>
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <h3 className={style.featureTitle}>Acceso Global</h3>
                        <p className={style.featureText}>Gestiona tu negocio desde cualquier dispositivo, en cualquier lugar.</p>
                    </div>
                </div>
            </div>

            {/* FAQ Section */}
            <div className={style.faqSection}>
                <h2 className={style.sectionTitle}>Preguntas Frecuentes</h2>
                <div className={style.faqItem}>
                    <h3 className={style.faqQuestion}>¿Puedo cambiar de plan en cualquier momento?</h3>
                    <p className={style.faqAnswer}>Sí, puedes subir o bajar de plan en cualquier momento. Si mejoras tu plan, el cambio será inmediato. Si lo reduces, el cambio aplicará en el próximo ciclo de facturación.</p>
                </div>
                <div className={style.faqItem}>
                    <h3 className={style.faqQuestion}>¿Hay algún costo de instalación?</h3>
                    <p className={style.faqAnswer}>No, en TurnosXpress no cobramos comisiones de instalación, mantenimiento ni tarifas ocultas. El precio que ves es el que pagas.</p>
                </div>
                <div className={style.faqItem}>
                    <h3 className={style.faqQuestion}>¿Qué pasa si supero el límite de turnos de mi plan?</h3>
                    <p className={style.faqAnswer}>No te dejaremos sin servicio. Te notificaremos para que puedas evaluar subir a un plan superior que se adapte mejor al volumen de tu negocio.</p>
                </div>
                <div className={style.faqItem}>
                    <h3 className={style.faqQuestion}>¿Qué medios de pago aceptan?</h3>
                    <p className={style.faqAnswer}>Procesamos todos nuestros pagos a través de la pasarela segura de Mercado Pago. Esto significa que puedes abonar de forma transparente usando tarjetas de crédito, débito, dinero en cuenta o cualquier medio de pago que la plataforma tenga habilitado en Argentina.</p>
                </div>
            </div>

            {/* Bottom CTA Section */}
            <div className={style.ctaSection}>
                <h2 className={style.ctaTitle}>¿Listo para revolucionar tu agenda?</h2>
                <p className={style.ctaText}>No pierdas más tiempo gestionando turnos manualmente. Empieza a ofrecer una experiencia premium a tus clientes desde hoy mismo.</p>
                <Link href="#planes" className={style.ctaButton} style={{ textDecoration: "none", display: "inline-block" }}>
                    Elegir un Plan
                </Link>
            </div>
        </AnimatedContainer>
    );
}
