"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  CheckCircle,
  Users,
  BarChart3,
  ShoppingCart,
  FileText,
  Calendar,
  Warehouse,
  CreditCard,
  Mail,
  Phone,
  Globe,
  Zap,
  Shield,
  Headphones,
} from "lucide-react"
import Image from "next/image"
import { useState, useEffect, useRef } from "react"
import Header from "@/components/header"

export default function OdooPage() {
  const [visibleSections, setVisibleSections] = useState<Set<string>>(new Set())

  const sectionRefs = {
    hero: useRef<HTMLElement>(null),
    partner: useRef<HTMLElement>(null),
    features: useRef<HTMLElement>(null),
    modules: useRef<HTMLElement>(null),
    benefits: useRef<HTMLElement>(null),
    contact: useRef<HTMLElement>(null),
  }

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setVisibleSections((prev) => new Set([...prev, entry.target.id]))
          }
        })
      },
      { threshold: 0.1, rootMargin: "-50px" },
    )

    Object.values(sectionRefs).forEach((ref) => {
      if (ref.current) {
        observer.observe(ref.current)
      }
    })

    return () => observer.disconnect()
  }, [])

  const isVisible = (sectionId: string) => visibleSections.has(sectionId)

  const odooModules = [
    {
      icon: Users,
      title: "CRM",
      description: "Gestión completa de clientes y oportunidades de venta",
      color: "bg-blue-500",
    },
    {
      icon: ShoppingCart,
      title: "Ventas",
      description: "Automatización del proceso de ventas y cotizaciones",
      color: "bg-green-500",
    },
    {
      icon: FileText,
      title: "Contabilidad",
      description: "Facturación automática y gestión financiera integral",
      color: "bg-purple-500",
    },
    {
      icon: Warehouse,
      title: "Inventario",
      description: "Control de stock y gestión de almacenes en tiempo real",
      color: "bg-orange-500",
    },
    {
      icon: Calendar,
      title: "Proyectos",
      description: "Planificación y seguimiento de proyectos y tareas",
      color: "bg-indigo-500",
    },
    {
      icon: BarChart3,
      title: "Manufactura",
      description: "Gestión completa de procesos de producción",
      color: "bg-red-500",
    },
    {
      icon: CreditCard,
      title: "Punto de Venta",
      description: "Sistema POS integrado para ventas presenciales",
      color: "bg-teal-500",
    },
    {
      icon: Users,
      title: "Recursos Humanos",
      description: "Gestión de empleados, nóminas y evaluaciones",
      color: "bg-pink-500",
    },
  ]

  const benefits = [
    {
      icon: Zap,
      title: "Implementación Rápida",
      description: "Configuración e implementación en tiempo récord con nuestro equipo especializado",
    },
    {
      icon: Shield,
      title: "Soporte Técnico",
      description: "Soporte continuo y mantenimiento especializado como partners oficiales",
    },
    {
      icon: Globe,
      title: "Integración Completa",
      description: "Conectamos Odoo con tus sistemas existentes y herramientas de terceros",
    },
    {
      icon: Headphones,
      title: "Capacitación",
      description: "Entrenamiento completo para tu equipo en el uso de la plataforma",
    },
  ]

  return (
    <div className="min-h-screen bg-background">
      

      <section
        id="hero"
        ref={sectionRefs.hero}
        className="pt-20 py-16 md:py-20 bg-gradient-to-r from-purple-500 to-indigo-700 relative overflow-hidden"
      >
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="text-left">
              <div className="mb-6 ">
                <Image
                  src="/images/odoo-ready-partner.png"
                  alt="Odoo Ready Partner"
                  width={800}
                  height={450}
                  className="h-40 w-auto round "
                />
              </div>

              <h1 className="text-3xl md:text-5xl font-bold text-white mb-4 text-balance leading-tight">
                Partners Oficiales de Odoo
              </h1>

              <p className="text-lg md:text-xl text-white/90 mb-8 text-pretty leading-relaxed">
                Implementamos y personalizamos <span className="font-semibold">Odoo ERP</span> para optimizar todos los
                procesos de tu empresa
              </p>

              <div className="flex flex-col sm:flex-row gap-4">
                <Button asChild size="lg" className="bg-white text-purple-700 hover:bg-white/90 px-6 py-3 rounded-full">
                  <a href="#contact">Solicitar Consulta</a>
                </Button>
                <Button
                  asChild
                  variant="outline"
                  size="lg"
                  className="border-2 border-white text-white hover:bg-white hover:text-purple-700 bg-transparent px-6 py-3 rounded-full"
                >
                  <a href="#modules">Ver Módulos</a>
                </Button>
              </div>
            </div>

            <div className="text-center lg:text-right">
              <Image
                src="/odoo-erp-dashboard-interface.jpg"
                alt="Odoo ERP Interface"
                width={500}
                height={350}
                className="rounded-xl shadow-2xl mx-auto lg:ml-auto"
              />
            </div>
          </div>
        </div>
      </section>

      <section id="partner" ref={sectionRefs.partner} className="py-20 md:py-24 bg-muted/30 relative">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
              <div className="text-primary text-sm font-semibold tracking-[0.2em] uppercase mb-4">
                Partnership Certificado
              </div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance leading-tight">¿Qué es Odoo ERP?</h2>
              <p className="text-lg text-muted-foreground mb-6 leading-relaxed">
                Odoo es una suite completa de aplicaciones empresariales de código abierto que integra CRM, ERP,
                contabilidad, inventario, punto de venta, gestión de proyectos y más en una sola plataforma.
              </p>
              <div className="space-y-3">
                <div className="flex items-center gap-3">
                  <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
                  <span>Más de 40,000 aplicaciones disponibles</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
                  <span>Escalable para empresas de cualquier tamaño</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
                  <span>Interfaz intuitiva y fácil de usar</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
                  <span>Totalmente personalizable</span>
                </div>
              </div>
            </div>

            <div className="space-y-6">
              <div className="bg-white rounded-xl p-6 shadow-lg">
                <h3 className="text-xl font-bold text-primary mb-3">Ready Partner Certificado</h3>
                <p className="text-muted-foreground">
                  Como partners oficiales de Odoo, tenemos la certificación y experiencia necesaria para implementar
                  soluciones ERP completas y personalizadas para tu empresa.
                </p>
              </div>
              <div className="bg-white rounded-xl p-6 shadow-lg">
                <h3 className="text-xl font-bold text-primary mb-3">10 Años de Experiencia</h3>
                <p className="text-muted-foreground">
                  Nuestro equipo cuenta con una década de experiencia en implementaciones tecnológicas exitosas para
                  empresas de diversos sectores.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="modules" ref={sectionRefs.modules} className="py-20 md:py-24 relative">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <div className="text-primary text-sm font-semibold tracking-[0.2em] uppercase mb-4">
              Módulos Disponibles
            </div>
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance leading-tight">Aplicaciones Odoo</h2>
            <p className="text-muted-foreground max-w-3xl mx-auto text-lg leading-relaxed">
              Implementamos y configuramos todos los módulos de Odoo según las necesidades específicas de tu empresa
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {odooModules.map((module, index) => (
              <Card
                key={index}
                className="hover:shadow-xl transition-all duration-500 hover:-translate-y-2 border-0 shadow-md bg-white group"
              >
                <CardHeader className="pb-4">
                  <div
                    className={`h-12 w-12 ${module.color} rounded-xl flex items-center justify-center mb-4 transition-all duration-300 group-hover:scale-110`}
                  >
                    <module.icon className="h-6 w-6 text-white" />
                  </div>
                  <CardTitle className="text-lg font-bold">{module.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-sm leading-relaxed">{module.description}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section id="benefits" ref={sectionRefs.benefits} className="py-20 md:py-24 bg-muted/30 relative">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <div className="text-primary text-sm font-semibold tracking-[0.2em] uppercase mb-4">
              Nuestros Beneficios
            </div>
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance leading-tight">Por Qué Elegirnos</h2>
            <p className="text-muted-foreground max-w-3xl mx-auto text-lg leading-relaxed">
              Como partners certificados de Odoo, ofrecemos implementaciones exitosas con soporte especializado
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {benefits.map((benefit, index) => (
              <Card
                key={index}
                className="hover:shadow-xl transition-all duration-500 hover:-translate-y-2 border-0 shadow-md bg-white group p-6"
              >
                <div className="flex items-start gap-4">
                  <div className="bg-primary/10 p-3 rounded-xl">
                    <benefit.icon className="h-8 w-8 text-primary" />
                  </div>
                  <div>
                    <h3 className="text-xl font-bold mb-2">{benefit.title}</h3>
                    <p className="text-muted-foreground leading-relaxed">{benefit.description}</p>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section
        id="contact"
        ref={sectionRefs.contact}
        className="py-16 md:py-20 bg-gradient-to-r from-purple-600 to-indigo-700 relative overflow-hidden"
      >
        <div className="container mx-auto px-4 text-center relative z-10">
          <div className="max-w-2xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 text-balance">
              ¿Listo para Implementar Odoo?
            </h2>
            <p className="text-lg text-white/90 mb-8 text-pretty leading-relaxed">
              Contactanos para una consulta gratuita sobre cómo Odoo puede transformar tu empresa
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <Button asChild size="lg" className="bg-white text-purple-700 hover:bg-white/90 px-6 py-3 rounded-full">
                <a href="mailto:administración@tera.coop.ar" className="flex items-center gap-2">
                  <Mail className="h-4 w-4" />
                  administracion@tera.coop.ar
                </a>
              </Button>
              <Button
                asChild
                variant="outline"
                size="lg"
                className="border-2 border-white text-white hover:bg-white hover:text-purple-700 bg-transparent px-6 py-3 rounded-full"
              >
                <a href="tel:+5493413110700" className="flex items-center gap-2">
                  <Phone className="h-4 w-4" />
                  +54 9 341 311 0700
                </a>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}