import { Metadata } from "next";
import AnimatedContainer from "@components/AnimatedConainer/AnimatedContainer";
import style from "./style.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";
import CTABtn from "./CTABtn";

export const metadata: Metadata = {
    title: "Ofrecé Turnos Online | Sistema de Gestión y Reservas - TurnosXpress",
    description: "Convertí más clientes con nuestro software de gestión de turnos. Automatizá tus reservas, organizá tu agenda y hace crecer tu negocio. ¡Creá tu cuenta gratis hoy!",
    keywords: ["gestión de turnos", "reservas online", "software de turnos", "agenda online", "turnos para profesionales", "SaaS turnos"],
    openGraph: {
        title: "Ofrecé Turnos Online | Sistema de Gestión - TurnosXpress",
        description: "Automatizá tus reservas y hace crecer tu negocio con nuestro software. ¡Empezá gratis!",
        type: "website",
    }
};

export default function OfferAppointmentsPage() {
    return (
        <AnimatedContainer
            color="#aeaeae"
            minSize={150}
            maxSize={500}
            items={10}
            style={{
                display: "block",
                width: "100%",
                background: "var(--white)",
            }}
        >
            <ScrollToTop />
            <HeaderConfProvider />
            <DefaultLoginAction />
            
            {/* Hero Section */}
            <div className={style.heroSection}>
                <h1 className={style.heroTitle}>Multiplicá tus clientes, simplificá tus turnos</h1>
                <p className={style.heroSubtitle}>
                    Olvidate del teléfono y los mensajes a deshora. Con nuestra plataforma, tus clientes pueden reservar turnos 24/7 de forma automática. Optimizá tu tiempo, reducí ausencias y llevá tu negocio al siguiente nivel.
                </p>
                <div className={style.btnGroup}>
                    <Link href="/landing/signup" className={style.primaryBtn}>
                        ¡Empezá Gratis Hoy!
                    </Link>
                    <Link href="/landing/pricing" className={style.secondaryBtn}>
                        Ver Planes
                    </Link>
                </div>
            </div>

            {/* Features Section */}
            <div className={style.featuresSection}>
                <h2 className={style.sectionTitle}>Todo lo que necesitás para crecer</h2>
                <div className={style.featuresGrid}>
                    <div className={style.featureCard}>
                        <div className={style.featureIcon}>📅</div>
                        <h3>Agenda Inteligente</h3>
                        <p>Visualizá tus citas por día, semana o mes. Bloqueá horarios y manejá tu disponibilidad con un par de clics.</p>
                    </div>
                    <div className={style.featureCard}>
                        <div className={style.featureIcon}>🔔</div>
                        <h3>Recordatorios Automáticos</h3>
                        <p>Reducí el ausentismo hasta un 80%. El sistema envía recordatorios automáticos a tus clientes antes de cada turno.</p>
                    </div>
                    <div className={style.featureCard}>
                        <div className={style.featureIcon}>👥</div>
                        <h3>Gestión de Colaboradores</h3>
                        <p>Agregá a tu equipo de trabajo. Asignale a cada colaborador sus propios servicios, horarios y disponibilidad de forma individual.</p>
                    </div>
                    <div className={style.featureCard}>
                        <div className={style.featureIcon}>🌐</div>
                        <h3>Portal de Reservas Público</h3>
                        <p>Mayor exposición. Tus servicios aparecerán en nuestro buscador público para que nuevos clientes te encuentren y reserven al instante.</p>
                    </div>
                </div>
            </div>

            {/* Steps Section */}
            <div className={style.stepsSection}>
                <h2 className={style.sectionTitle}>Recibí turnos en 4 simples pasos</h2>
                
                <div className={style.stepItem}>
                    <div className={style.stepNumber}>1</div>
                    <div className={style.stepContent}>
                        <h3>Creá tu cuenta gratis</h3>
                        <p>Registrate en segundos. Podés probar la plataforma completa sin compromisos ni tarjetas de crédito. <Link href="/landing/signup">Registrate acá</Link>.</p>
                    </div>
                </div>

                <div className={style.stepItem}>
                    <div className={style.stepNumber}>2</div>
                    <div className={style.stepContent}>
                        <h3>Configurá tu perfil</h3>
                        <p>Personalizá tu espacio. Agregá tu logo, ubicación y una descripción atractiva para que los clientes te elijan al instante.</p>
                    </div>
                </div>

                <div className={style.stepItem}>
                    <div className={style.stepNumber}>3</div>
                    <div className={style.stepContent}>
                        <h3>Definí servicios y horarios</h3>
                        <p>¿Qué ofrecés y cuándo estás disponible? Configurá la duración de tus turnos, pausas entre clientes y tus días laborales.</p>
                    </div>
                </div>

                <div className={style.stepItem}>
                    <div className={style.stepNumber}>4</div>
                    <div className={style.stepContent}>
                        <h3>¡Compartí tu enlace!</h3>
                        <p>Te daremos un link único. Ponelo en tu biografía de Instagram, en WhatsApp o en tu web, y dejá que los turnos se agenden solos.</p>
                    </div>
                </div>
            </div>

            {/* CTA Section */}
            <div className={style.ctaSection}>
                <h2 className={style.ctaTitle}>¿Listo para modernizar tu negocio?</h2>
                <p className={style.ctaSubtitle}>Unite a los profesionales que ya automatizaron su agenda y ganan más tiempo libre.</p>
                <CTABtn />
                <p style={{ marginTop: '20px', fontSize: '1rem', color: 'rgba(255, 255, 255, 0.85)' }}>
                    ¿Necesitás más información? Contactanos a <a href="mailto:info@turnosxpress.com.ar" style={{ color: '#fff', textDecoration: 'underline', fontWeight: '600' }}>info@turnosxpress.com.ar</a>
                </p>
            </div>

        </AnimatedContainer>
    );
}

