"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Mail, Phone, Code, Server, Palette, UserCheck, Award, BarChart3 } from "lucide-react"
import Image from "next/image"
import { useState, useEffect, useRef } from "react"
import Link from "next/link"

export default function TeraPortfolio() {
  const [currentHeroBg, setCurrentHeroBg] = useState(0)
  const [scrollY, setScrollY] = useState(0)
  const [visibleSections, setVisibleSections] = useState<Set<string>>(new Set())
  const [currentSlide, setCurrentSlide] = useState(0)
  const [isPaused, setIsPaused] = useState(false)

  const sectionRefs = {
    servicios: useRef<HTMLElement>(null),
    clientes: useRef<HTMLElement>(null),
    productos: useRef<HTMLElement>(null),
    contact: useRef<HTMLElement>(null),
  }

  const heroBackgrounds = [
    "/images/tech-background.png",
    "/images/hero-backgrounds/tech-bg-1.png",
    "/images/hero-backgrounds/tech-bg-2.png",
    "/images/hero-backgrounds/tech-bg-3.png",
    "/images/hero-backgrounds/tech-bg-4.png",
    "/images/hero-backgrounds/tech-bg-5.png",
  ]

  const [currentTeamMember, setCurrentTeamMember] = useState(0)
  const teamMembers = [
    "/images/team/pablo-tera.jpeg",
    "/images/team/nicolas-tera.jpeg",
    "/images/team/santiago-tera.jpeg",
    "/images/team/j-tera.jpeg",
    "/images/team/miguel-tera.jpeg",
    "/images/team/emmanuel-tera.jpeg",
    "/images/team/franco-tera.jpeg",
    "/images/team/gustavo-tera.png",
    "/images/team/matias-tera.jpeg",
    "/images/team/martin-tera.jpeg",
    "/images/team/matiast-tera.jpeg",
  ]

  const portfolioSlides = [
    {
      image: "/images/portfolio/basesfederadas-hero.png",
      alt: "Bases Federadas - Elegimos una Argentina con Productores",
      title: "Bases Federadas",
      description: "Sitio institucional para organización agraria nacional",
      url: "https://basesfederadas.com.ar/",
    },
    {
      image: "/images/portfolio/fastix-hero.png",
      alt: "Fastix - Hay un Fastix para cada filtración",
      title: "Fastix",
      description: "E-commerce de productos selladores especializados",
      url: "https://www.fastix.com.ar/",
    },
    {
      image: "/images/portfolio/poxiband-hero.png",
      alt: "Poxiband - Confort y tranquilidad en cada estación",
      title: "Poxiband",
      description: "Catálogo web de burletes y productos de ahorro energético",
      url: "https://poxiband.com.ar/",
    },
  ]

  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()
  }, [])

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY)
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentHeroBg((prev) => (prev + 1) % heroBackgrounds.length)
    }, 4000)
    return () => clearInterval(interval)
  }, [heroBackgrounds.length])

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTeamMember((prev) => (prev + 1) % teamMembers.length)
    }, 3000)
    return () => clearInterval(interval)
  }, [teamMembers.length])

  useEffect(() => {
    if (!isPaused) {
      const interval = setInterval(() => {
        setCurrentSlide((prev) => (prev + 1) % portfolioSlides.length)
      }, 5000) // 5 segundos por slide

      return () => clearInterval(interval)
    }
  }, [isPaused, portfolioSlides.length])

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

  const services = [
    {
      icon: Code,
      title: "Desarrollo de Software",
      description:
        "Aplicaciones web, sistemas a medida y sitios modernos diseñados para las necesidades específicas de tu empresa",
      highlight: "Personalizado",
    },
    {
      icon: Award,
      title: "Partner Oficial Odoo",
      description: "Implementación y personalización de Odoo ERP para optimizar los procesos de tu empresa",
      highlight: "Certificado",
    },
    {
      icon: Palette,
      title: "Identidad Digital",
      description: "Diseño de marca completo que refleja la esencia y valores de tu empresa",
      highlight: "Completo",
    },
    {
      icon: UserCheck,
      title: "Talento IT",
      description: "Profesionales especializados que se integran a tu equipo para potenciar tus proyectos",
      highlight: "Especializado",
    },
    {
      icon: BarChart3,
      title: "Análisis de Datos",
      description:
        "Transformamos tus datos en insights accionables con dashboards interactivos y reportes automatizados",
      highlight: "Inteligente",
    },
    {
      icon: Server,
      title: "Infraestructura Cloud",
      description: "Hosting confiable y escalable que garantiza el rendimiento de tus aplicaciones",
      highlight: "Confiable",
    },
  ]

  const technologies = [
    { name: "GeneXus", logo: "/images/tech-logos/genexus-logo.png" },
    { name: "PHP", logo: "/images/tech-logos/php-logo.png" },
    { name: "Python", logo: "/images/tech-logos/python-logo.png" },
    { name: "Java", logo: "/images/tech-logos/java-logo.png" },
    { name: "JavaScript", logo: "/images/tech-logos/javascript-logo.png" },
    { name: "React", logo: "/images/tech-logos/react-logo.png" },
    { name: "SQL", logo: "/images/tech-logos/sql-logo.jpg" },
    { name: "Power BI", logo: "/images/tech-logos/powerbi-logo.jpg" },
    { name: "Tableau", logo: "/images/tech-logos/tableau-logo.jpg" },
  ]

  const clients = [
    { name: "Bases Federadas", logo: "/images/client-logos/basesfederadas-logo.png" },
    { name: "Flexiti", logo: "/images/client-logos/flexiti-logo.svg" },
    { name: "Getup", logo: "/images/client-logos/getup-logo.jpg" },
    { name: "Molinos Indelma", logo: "/images/client-logos/indelma-logo.png" },
    { name: "Marangoni", logo: "/images/client-logos/marangoni-logo.png" },
    { name: "NCA", logo: "/images/client-logos/nca-logo.png" },
    { name: "Randstad", logo: "/images/client-logos/randstad-logo.png" },
    { name: "Radio Universidad", logo: "/images/client-logos/radiounr-logo.png" },
  ]

  const products = [
    {
      name: "SortWhats",
      description: "Herramienta para realizar sorteos por WhatsApp de manera fácil y transparente",
    },
    {
      name: "Nómina",
      description: "Gestor de usuarios completo con roles, permisos y administración centralizada",
    },
    {
      name: "Vecta",
      description: "Sistema de gestión de pedidos con seguimiento en tiempo real y reportes",
    },
  ]

  return (
    <div className="min-h-screen bg-background">
      {/* <OdooModal /> */}

      {/* Navigation */}

      {/* Hero Section */}
      <section className="pt-20 py-20 md:py-32 bg-secondary relative overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-70 transition-all duration-1000 ease-in-out"
          style={{
            backgroundImage: `url(${heroBackgrounds[currentHeroBg]})`,
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-br from-secondary/90 to-secondary/80" />

        <div className="container mx-auto px-4 text-center relative z-10">
          <div className="max-w-4xl mx-auto">
            <div className="animate-bounce-in">
              <Image
                src="/images/logo-blanco.png"
                alt="Tera"
                width={400}
                height={400}
                className="mx-auto mb-8 h-40 w-auto md:h-52 transition-transform duration-700 hover:scale-110"
              />
            </div>

            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 text-balance leading-tight  drop-shadow-lg animate-fade-in animation-delay-400">
              Cooperativa de Tecnología
            </h1>

            <div className="bg-secondary/80 backdrop-blur-sm rounded-2xl px-8 py-6 mb-12 inline-block">
              <p className="text-xl md:text-2xl text-white font-light tracking-wide animate-fade-in-up animation-delay-800 drop-shadow-md">
                <span className="font-semibold animate-glow drop-shadow-lg">10 años</span> transformando empresas con
                tecnología
              </p>
            </div>

            <div className="flex flex-col md:flex-row justify-center gap-4 md:gap-6 mt-16">
              <div className="bg-white/20 backdrop-blur-md border border-white/20 rounded-2xl px-6 py-4 hover:bg-white/25 transition-all duration-500 group">
                <div className="text-center">
                  <span className="text-lg font-semibold text-white drop-shadow-md">Software a medida</span>
                </div>
              </div>
              <div className="bg-white/20 backdrop-blur-md border border-white/20 rounded-2xl px-6 py-4 hover:bg-white/25 transition-all duration-500 group">
                <div className="text-center">
                  <span className="text-lg font-semibold text-white drop-shadow-md">Staff augmentation</span>
                </div>
              </div>
              <div className="bg-white/20 backdrop-blur-md border border-white/20 rounded-2xl px-6 py-4 hover:bg-white/25 transition-all duration-500 group">
                <div className="text-center">
                  <span className="text-lg font-semibold text-white drop-shadow-md">Infraestructura robusta</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Servicios */}
      <section id="servicios" ref={sectionRefs.servicios} className="py-32 md:py-40 bg-muted/30 relative">
        <div className="container mx-auto px-4">
          <div className="text-center mb-24 relative">
            <div
              className={`absolute -top-8 left-1/2 transform -translate-x-1/2 text-[12rem] md:text-[16rem] font-black text-primary/5 leading-none pointer-events-none transition-all duration-1000 ${isVisible("servicios") ? "animate-float opacity-100" : "opacity-0 translate-y-10"}`}
            >
              01
            </div>
            <div
              className={`text-primary text-sm font-semibold tracking-[0.3em] uppercase mb-6 relative z-10 transition-all duration-800 ${isVisible("servicios") ? "animate-slide-in-right opacity-100" : "opacity-0 translate-x-12"}`}
            >
              Servicios
            </div>
            <h2
              className={`text-5xl md:text-7xl lg:text-8xl font-black mb-8 text-balance leading-[0.9] relative z-10 transition-all duration-600 delay-200 ${isVisible("servicios") ? "animate-scale-in opacity-100" : "opacity-0 scale-75"}`}
            >
              Qué Hacemos
            </h2>
            <p
              className={`text-muted-foreground max-w-4xl mx-auto text-pretty text-xl md:text-2xl font-light leading-relaxed relative z-10 transition-all duration-800 delay-300 ${isVisible("servicios") ? "animate-fade-in-up opacity-100" : "opacity-0 translate-y-8"}`}
            >
              Proyectos de software a medida, talento IT especializado, infraestructura tecnológica y soluciones
              integrales para impulsar tu negocio
            </p>
          </div>

          {/* Desktop: Grid normal */}
          <div className="hidden md:flex md:flex-col md:items-center md:gap-8">
            {/* Primera fila - 5 tecnologías */}
            <div className="grid grid-cols-5 gap-8 justify-center">
              {technologies.slice(0, 5).map((tech, index) => (
                <div
                  key={index}
                  className={`flex flex-col items-center p-8 rounded-3xl bg-white/80 backdrop-blur-sm transition-all duration-700 border-0 shadow-lg group ${isVisible("servicios") ? "animate-pop-in opacity-100" : "opacity-0 scale-50"}`}
                  style={{
                    animationDelay: isVisible("servicios") ? `${index * 150}ms` : "0ms",
                    transitionDelay: isVisible("servicios") ? `${index * 150}ms` : "0ms",
                  }}
                >
                  <Image
                    src={tech.logo || "/placeholder.svg"}
                    alt={`${tech.name} logo`}
                    width={150}
                    height={150}
                    className="h-28 w-28 object-contain mb-6 transition-transform duration-500"
                  />
                  <span
                    className={`text-base font-bold text-center tracking-wide transition-all duration-600 delay-300 ${isVisible("servicios") ? "animate-text-reveal opacity-100" : "opacity-0 translate-y-4"}`}
                  >
                    {tech.name}
                  </span>
                </div>
              ))}
            </div>

            {/* Segunda fila - 4 tecnologías centradas */}
            <div className="grid grid-cols-4 gap-8 justify-center">
              {technologies.slice(5).map((tech, index) => (
                <div
                  key={index + 5}
                  className={`flex flex-col items-center p-8 rounded-3xl bg-white/80 backdrop-blur-sm transition-all duration-700 border-0 shadow-lg group ${isVisible("servicios") ? "animate-pop-in opacity-100" : "opacity-0 scale-50"}`}
                  style={{
                    animationDelay: isVisible("servicios") ? `${(index + 5) * 150}ms` : "0ms",
                    transitionDelay: isVisible("servicios") ? `${(index + 5) * 150}ms` : "0ms",
                  }}
                >
                  <Image
                    src={tech.logo || "/placeholder.svg"}
                    alt={`${tech.name} logo`}
                    width={150}
                    height={150}
                    className="h-28 w-28 object-contain mb-6 transition-transform duration-500"
                  />
                  <span
                    className={`text-base font-bold text-center tracking-wide transition-all duration-600 delay-300 ${isVisible("servicios") ? "animate-text-reveal opacity-100" : "opacity-0 translate-y-4"}`}
                  >
                    {tech.name}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Mobile: Slider horizontal */}
          <div className="md:hidden">
            <div className="overflow-x-auto scrollbar-hide mobile-scroll touch-pan-x">
              <div className="flex gap-6 px-4" style={{ width: `${technologies.length * 280}px` }}>
                {technologies.map((tech, index) => (
                  <div
                    key={index}
                    className="flex-shrink-0 w-64 flex flex-col items-center p-6 rounded-3xl bg-white/80 backdrop-blur-sm border-0 shadow-lg"
                  >
                    <Image
                      src={tech.logo || "/placeholder.svg"}
                      alt={`${tech.name} logo`}
                      width={120}
                      height={120}
                      className="h-24 w-24 object-contain mb-4"
                    />
                    <span className="text-base font-bold text-center tracking-wide">{tech.name}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Indicadores de scroll */}
            <div className="flex justify-center mt-6 gap-2">
              {technologies.map((_, index) => (
                <div key={index} className="w-2 h-2 rounded-full bg-primary/30" />
              ))}
            </div>
          </div>

          <div className="text-center">
            {/* Portfolio Web */}
            <div className="mb-20 -mx-4">
              <h3 className="text-3xl md:text-4xl font-black mb-8 tracking-tight">Portfolio Web</h3>
              <p className="text-muted-foreground text-lg mb-12 max-w-3xl mx-auto">
                Sitios web que hemos desarrollado para nuestros clientes
              </p>

              <div className="relative overflow-hidden rounded-2xl group">
                <div className="relative h-[400px] md:h-[500px] lg:h-[600px]">
                  {portfolioSlides.map((slide, index) => (
                    <div
                      key={index}
                      className={`absolute inset-0 transition-all duration-1000 ease-in-out ${
                        index === currentSlide
                          ? "opacity-100 translate-x-0"
                          : index < currentSlide
                            ? "opacity-0 -translate-x-full"
                            : "opacity-0 translate-x-full"
                      }`}
                      onMouseEnter={() => setIsPaused(true)}
                      onMouseLeave={() => setIsPaused(false)}
                    >
                      <div className="relative cursor-pointer h-full">
                        <Image
                          src={slide.image || "/placeholder.svg"}
                          alt={slide.alt}
                          width={1920}
                          height={600}
                          className="w-full h-full object-cover transition-transform duration-700 hover:scale-105"
                        />
                        <div className="absolute inset-0 opacity-0 hover:opacity-100 transition-all duration-500 flex items-center justify-center">
                          <div className="absolute inset-0 bg-black/40 transition-all duration-500"></div>
                          <a
                            href={slide.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="relative z-10 flex flex-col items-center justify-center gap-4 text-white hover:scale-110 transition-all duration-300"
                          >
                            <div className="w-16 h-16 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/30 hover:bg-white/30 transition-all duration-300">
                              <svg className="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M10.5 2C9.67 2 9 2.67 9 3.5S9.67 5 10.5 5 12 4.33 12 3.5 11.33 2 10.5 2M20.5 9C19.67 9 19 9.67 19 10.5S19.67 12 20.5 12 22 11.33 22 10.5 21.33 9 20.5 9M8.5 9C7.67 9 7 9.67 7 10.5S7.67 12 8.5 12 10 11.33 10 10.5 9.33 9 8.5 9M10.5 7C9.67 7 9 7.67 9 8.5S9.67 10 10.5 10 12 9.33 12 8.5 11.33 7 10.5 7M14.5 7C13.67 7 13 7.67 13 8.5S13.67 10 14.5 10 16 9.33 16 8.5 15.33 7 14.5 7M12.5 9C11.67 9 11 9.67 11 10.5S11.67 12 12.5 12 14 11.33 14 10.5 13.33 9 12.5 9M9.5 13C8.67 13 8 13.67 8 14.5S8.67 16 9.5 16 11 15.33 11 14.5 10.33 13 9.5 13M7.5 15C6.67 15 6 15.67 6 16.5S6.67 18 7.5 18 9 17.33 9 16.5 8.33 17 7.5 17M12.5 13C11.67 13 11 15.67 11 16.5S11.67 18 12.5 18 14 17.33 14 16.5 13.33 13 12.5 13M14.5 15C13.67 15 13 15.67 13 16.5S13.67 18 14.5 18 16 17.33 16 16.5 15.33 13 14.5 13M16.5 13C15.67 13 15 15.67 15 16.5S15.67 18 16.5 18 18 17.33 18 16.5 17.33 13 16.5 13M11.5 17C10.67 17 10 17.67 10 18.5S10.67 20 11.5 20 13 19.33 13 18.5 12.33 17 11.5 17M15.5 19C14.67 19 14 19.67 14 20.5S14.67 22 15.5 22 17 21.33 17 20.5 16.33 19 15.5 19" />
                              </svg>
                            </div>
                            <span className="text-xl font-semibold drop-shadow-lg mt-4">Ver más</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
                  {portfolioSlides.map((_, index) => (
                    <button
                      key={index}
                      onClick={() => setCurrentSlide(index)}
                      className={`w-3 h-3 rounded-full transition-all duration-300 ${
                        index === currentSlide ? "bg-white scale-125" : "bg-white/50 hover:bg-white/75"
                      }`}
                    />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Clientes */}
      <section id="clientes" ref={sectionRefs.clientes} className="py-32 md:py-40 relative">
        <div className="container mx-auto px-4">
          <div className="text-center mb-24 relative">
            <div
              className={`absolute -top-8 left-1/2 transform -translate-x-1/2 text-[12rem] md:text-[16rem] font-black text-primary/5 leading-none pointer-events-none transition-all duration-1000 ${isVisible("clientes") ? "animate-float opacity-100" : "opacity-0 translate-y-10"}`}
            >
              02
            </div>
            <div
              className={`text-primary text-sm font-semibold tracking-[0.3em] uppercase mb-6 relative z-10 transition-all duration-800 ${isVisible("clientes") ? "animate-slide-in-right opacity-100" : "opacity-0 translate-x-12"}`}
            >
              Clientes
            </div>
            <h2 className="text-5xl md:text-7xl lg:text-8xl font-black mb-8 text-balance leading-[0.9] relative z-10">
              Marcas que Confían en Nosotros
            </h2>
            <p className="text-muted-foreground max-w-3xl mx-auto text-pretty text-xl md:text-2xl font-light leading-relaxed relative z-10">
              Trabajamos con empresas líderes en diversos sectores
            </p>
          </div>

          {/* Desktop */}
          <div className="hidden md:grid md:grid-cols-4 gap-12">
            {clients.map((client, index) => (
              <Card
                key={index}
                className="text-center p-12 transition-all duration-700 border-0 shadow-lg bg-white/80 backdrop-blur-sm group"
              >
                <CardContent className="p-0 flex flex-col items-center justify-center min-h-[140px]">
                  {client.logo ? (
                    <Image
                      src={client.logo || "/placeholder.svg"}
                      alt={`${client.name} logo`}
                      width={160}
                      height={80}
                      className="max-h-20 w-auto object-contain mb-4 transition-all duration-500"
                    />
                  ) : (
                    <div className="h-20 flex items-center justify-center mb-4">
                      <h3 className="font-black text-lg md:text-xl text-balance">{client.name}</h3>
                    </div>
                  )}

                  {client.logo && (
                    <span className="text-base text-muted-foreground mt-3 font-semibold tracking-wide">
                      {client.name}
                    </span>
                  )}
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Mobile: Slider horizontal */}
          <div className="md:hidden">
            <div className="overflow-x-auto scrollbar-hide mobile-scroll touch-pan-x">
              <div className="flex gap-6 px-4" style={{ width: `${clients.length * 280}px` }}>
                {clients.map((client, index) => (
                  <Card
                    key={index}
                    className="flex-shrink-0 w-64 text-center p-8 border-0 shadow-lg bg-white/80 backdrop-blur-sm"
                  >
                    <CardContent className="p-0 flex flex-col items-center justify-center min-h-[120px]">
                      {client.logo ? (
                        <Image
                          src={client.logo || "/placeholder.svg"}
                          alt={`${client.name} logo`}
                          width={140}
                          height={70}
                          className="max-h-16 w-auto object-contain mb-3"
                        />
                      ) : (
                        <div className="h-16 flex items-center justify-center mb-3">
                          <h3 className="font-black text-base text-balance">{client.name}</h3>
                        </div>
                      )}

                      {client.logo && (
                        <span className="text-sm text-muted-foreground mt-2 font-semibold tracking-wide">
                          {client.name}
                        </span>
                      )}
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

            {/* Indicadores de scroll */}
            <div className="flex justify-center mt-6 gap-2">
              {clients.map((_, index) => (
                <div key={index} className="w-2 h-2 rounded-full bg-primary/30" />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Productos */}
      <section id="productos" ref={sectionRefs.productos} className="py-32 md:py-40 relative">
        <div className="container mx-auto px-4">
          <div className="text-center mb-24 relative">
            <div
              className={`absolute -top-8 left-1/2 transform -translate-x-1/2 text-[12rem] md:text-[16rem] font-black text-primary/5 leading-none pointer-events-none transition-all duration-1000 ${isVisible("productos") ? "animate-float opacity-100" : "opacity-0 translate-y-10"}`}
            >
              03
            </div>
            <div
              className={`text-primary text-sm font-semibold tracking-[0.3em] uppercase mb-6 relative z-10 transition-all duration-800 ${isVisible("productos") ? "animate-slide-in-right opacity-100" : "opacity-0 translate-x-12"}`}
            >
              Productos
            </div>
            <h2
              className={`text-5xl md:text-7xl lg:text-8xl font-black mb-8 text-balance leading-[0.9] relative z-10 transition-all duration-1000 delay-200 ${isVisible("productos") ? "animate-scale-in opacity-100" : "opacity-0 scale-75"}`}
            >
              Nuestros Productos
            </h2>
            <p
              className={`text-muted-foreground max-w-4xl mx-auto text-pretty text-xl md:text-2xl font-light leading-relaxed relative z-10 transition-all duration-800 delay-400 ${isVisible("productos") ? "animate-fade-in-up opacity-100" : "opacity-0 translate-y-8"}`}
            >
              Nuestras soluciones de Software as a Service desarrolladas con nuestra experiencia
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {products.map((product, index) => (
              <Card
                key={index}
                className={`hover:shadow-2xl transition-all duration-700 hover:-translate-y-4 hover:rotate-1 border-0 shadow-lg bg-white/80 backdrop-blur-sm group overflow-hidden ${isVisible("productos") ? "animate-slide-in-up opacity-100" : "opacity-0 translate-y-12"}`}
                style={{
                  animationDelay: isVisible("productos") ? `${index * 200}ms` : "0ms",
                  transitionDelay: isVisible("productos") ? `${index * 200}ms` : "0ms",
                }}
              >
                <CardHeader className="pb-6">
                  <CardTitle
                    className={`text-3xl text-primary font-black tracking-tight group-hover:scale-105 transition-transform duration-500 ${isVisible("productos") ? "animate-text-reveal opacity-100" : "opacity-0 translate-y-4"}`}
                  >
                    {product.name}
                  </CardTitle>
                  <CardDescription
                    className={`text-pretty text-base leading-relaxed font-light transition-all duration-600 delay-200 ${isVisible("productos") ? "animate-fade-in opacity-100" : "opacity-0"}`}
                  >
                    {product.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="pt-0">
                  <Button
                    asChild
                    size="lg"
                    className="w-full bg-primary hover:bg-primary/90 rounded-full group-hover:scale-105 transition-transform duration-300"
                  >
                    {product.name === "SortWhats" ? (
                      <Link href="/sortwhats" className="flex items-center justify-center gap-2">
                        Ver Producto
                      </Link>
                    ) : (
                      <a href="#" className="flex items-center justify-center gap-2">
                        Ver Producto
                      </a>
                    )}
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Contact */}
      <section ref={sectionRefs.contact} className="py-20 md:py-32 bg-secondary relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-10 left-10 w-32 h-32 bg-primary/20 rounded-full blur-xl"></div>
          <div className="absolute bottom-10 right-10 w-48 h-48 bg-primary/10 rounded-full blur-2xl"></div>
        </div>
        <div className="container mx-auto px-4 text-center relative z-10">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-8 text-balance">Trabajemos Juntos</h2>
            <p className="text-xl text-white/90 mb-12 text-pretty leading-relaxed">
              Contactanos para conversar sobre tu próximo proyecto tecnológico
            </p>
            <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
              <Button
                asChild
                size="lg"
                className="bg-primary hover:bg-primary/90 px-4 md:px-8 py-4 text-sm md:text-lg rounded-full hover:scale-105 max-w-full overflow-hidden"
              >
                <a href="mailto:administración@tera.coop.ar" className="flex items-center gap-2 md:gap-3 min-w-0">
                  <Mail className="h-4 w-4 md:h-5 md:w-5 flex-shrink-0" />
                  <span className="truncate">info@tera.coop.ar</span>
                </a>
              </Button>
              <Button
                asChild
                variant="outline"
                size="lg"
                className="border-2 border-white text-white hover:bg-white hover:text-secondary bg-transparent px-4 md:px-8 py-4 text-sm md:text-lg rounded-full hover:scale-105"
              >
                <a href="tel:+5493413110700" className="flex items-center gap-2 md:gap-3">
                  <Phone className="h-4 w-4 md:h-5 md:w-5" />
                  +54 9 341 311 0700
                </a>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}