f9c76ea1-d6ea-4803-9d24-9e8ce8573ab2/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactText from '@/components/sections/contact/ContactText';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { CheckCircle, Shield, ShieldCheck, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSmall"
        background="fluid"
        cardStyle="gradient-mesh"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: "Producto", id: "#product" },
        { name: "Casos de Uso", id: "#use-cases" },
        { name: "Recursos", id: "#resources" },
        { name: "Empresa", id: "#company" },
      ]}
      brandName="SANO"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{ variant: "radial-gradient" }}
      title="Deje que la IA razone. Nosotros sanamos el texto."
      description="Protección de datos en tiempo real mediante enmascaramiento inteligente de información sensible en sus flujos de trabajo."
      tag="IA de Privacidad"
      buttons={[{ text: "Deploy Sano", href: "#contact" }]}
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-concept-with-digital-lock_23-2152004061.jpg", imageAlt: "futuristic technology glass sphere neon" },
        { imageSrc: "http://img.b2bpic.net/free-photo/dark-background-with-purple-circles_1017-3791.jpg", imageAlt: "futuristic technology glass sphere neon" }
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Excelente herramienta de seguridad"
      tagIcon={ShieldCheck}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Nuestra Tecnología"
      metrics={[
        { icon: Shield, label: "Datos Protegidos", value: "1.2M+" },
        { icon: Zap, label: "Latencia", value: "15ms" },
        { icon: CheckCircle, label: "Disponibilidad", value: "99.9%" },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          title: "Enmascaramiento Dinámico",          description: "Oculte información sensible instantáneamente.",          imageSrc: "http://img.b2bpic.net/free-photo/secured-file-folder-futuristic-data-network_23-2152001151.jpg",          imageAlt: "futuristic technology glass sphere neon"},
        {
          title: "Cumplimiento Legal",          description: "Certificado bajo estándares internacionales.",          imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",          imageAlt: "futuristic technology glass sphere neon"},
        {
          title: "Integración API",          description: "Conéctese con cualquier stack tecnológico.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-creative-3d-sphere_23-2150885379.jpg",          imageAlt: "futuristic technology glass sphere neon"},
      ]}
      title="Capacidades Avanzadas"
      description="Herramientas diseñadas para la seguridad y cumplimiento normativo."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",          brand: "Sano",          name: "Compliance Core",          price: "Gratis",          rating: 5,
          reviewCount: "120",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-colorful-bubble-with-beautiful-reflection-trees-it_181624-21416.jpg"},
        {
          id: "p2",          brand: "Sano",          name: "Enterprise Shield",          price: "Personalizado",          rating: 5,
          reviewCount: "80",          imageSrc: "http://img.b2bpic.net/free-photo/key-lock-password-security-privacy-protection-graphic_53876-125201.jpg"},
        {
          id: "p3",          brand: "Sano",          name: "Audit Logs",          price: "$49/mes",          rating: 5,
          reviewCount: "45",          imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg"},
      ]}
      title="Nuestros Módulos"
      description="El ecosistema completo para su empresa."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        { id: "m1", value: "45%", title: "Reducción de Riesgo", items: ["Auditoría rápida", "Menor riesgo humano"] },
        { id: "m2", value: "60%", title: "Ahorro de Tiempo", items: ["Enmascaramiento veloz", "Sin errores manuales"] },
        { id: "m3", value: "99%", title: "Precisión IA", items: ["Reconocimiento alto", "Mínimos falsos"] },
      ]}
      title="Impacto en su Negocio"
      description="Reducción significativa de riesgos operativos."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="asymmetric-60-wide-40-narrow"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "Sarah Johnson", role: "CEO", company: "TechCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-viewer-changing-channels-television-set-with-remote-control_482257-92306.jpg" },
        { id: "t2", name: "Michael Chen", role: "CTO", company: "InnovateLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/elderly-business-woman-office-isolated_1303-21403.jpg" }
      ]}
      title="Lo que dicen los expertos"
      description="Confianza comprobada por líderes de la industria."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{ variant: "sparkles-gradient" }}
      text="Comience a sanar su texto hoy mismo."
      buttons={[{ text: "Contáctenos", href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="SANO"
      columns={[
        { title: "Producto", items: [{ label: "Características", href: "#" }, { label: "Seguridad", href: "#" }] },
        { title: "Empresa", items: [{ label: "Sobre nosotros", href: "#" }, { label: "Carreras", href: "#" }] }
      ]}
      copyrightText="© 2024 Sano. Todos los derechos reservados."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}