"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Code, Users, Clock, CheckCircle, ArrowRight, Mail, Phone, Star, Award, Target } from "lucide-react"
import Image from "next/image"
import { useState, useEffect, useRef } from "react"

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

  const sectionRefs = {
    hero: useRef<HTMLElement>(null),
    servicios: useRef<HTMLElement>(null),
    beneficios: useRef<HTMLElement>(null),
    contacto: 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 services = [
    {
      icon: Code,
      title: "Desarrolladores GeneXus",
      description: "Expertos certificados con 5+ años de experiencia en desarrollo empresarial",
      highlight: "Certificación Oficial",
    },
    {
      icon: Users,
      title: "Integración Inmediata",
      description: "Incorporación en menos de una semana con metodologías ágiles probadas",
      highlight: "< 7 días",
    },
    {
      icon: Clock,
      title: "Soporte Continuo",
      description: "Acompañamiento 24/7 durante todo el proyecto con cultura cooperativa",
      highlight: "24/7 Support",
    },
  ]

  const techServices = [
    {
      icon: Code,
      title: "Especialistas SQL",
      description: "Expertos en bases de datos, optimización de consultas y arquitectura de datos",
      highlight: "Database Expert",
      logo: "/images/tech-logos/sql-logo.jpg",
    },
    {
      icon: Users,
      title: "Analistas Power BI",
      description: "Profesionales certificados en visualización de datos y business intelligence",
      highlight: "Microsoft Certified",
      logo: "/images/tech-logos/powerbi-logo.jpg",
    },
    {
      icon: Clock,
      title: "Expertos Tableau",
      description: "Especialistas en análisis visual avanzado y dashboards interactivos",
      highlight: "Tableau Certified",
      logo: "/images/tech-logos/tableau-logo.jpg",
    },
  ]

  const benefits = [
    "Reducción de costos de contratación hasta 40%",
    "Acceso inmediato a talento especializado certificado",
    "Flexibilidad para escalar equipos según demanda",
    "Cultura cooperativa que prioriza la colaboración",
    "Experiencia comprobada en proyectos enterprise",
    "Soporte técnico continuo y mentoring especializado",
  ]

  const stats = [
    { number: "5+", label: "Años Experiencia", description: "En desarrollo GeneXus" },
    { number: "40%", label: "Reducción Costos", description: "Vs contratación tradicional" },
    { number: "7", label: "Días Integración", description: "Tiempo promedio de onboarding" },
  ]

  return (
    <div className="min-h-screen bg-background">
      {/* Hero Section */}
      <section
        ref={sectionRefs.hero}
        className="pt-20 py-16 md:py-24 bg-gradient-to-br from-secondary via-secondary/95 to-secondary/90 relative overflow-hidden min-h-[80vh]"
      >
        <div
          className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-20"
          style={{
            backgroundImage: `url(/images/tech-background.png)`,
          }}
        />
        <div className="absolute inset-0 bg-black/30" />

        <div className="container mx-auto px-4 relative z-10">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
            <div className="text-center lg:text-left">
              <div className="flex items-center justify-center lg:justify-start mb-6">
                <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                  <Image
                    src="/images/tech-logos/genexus-logo.png"
                    alt="GeneXus"
                    width={120}
                    height={60}
                    className="h-10 w-auto"
                  />
                </div>
              </div>

              <h1
                className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 text-balance leading-tight"
                style={{ textShadow: "2px 2px 4px rgba(0,0,0,0.5)" }}
              >
                Talento <span className="text-primary">GeneXus</span>
              </h1>

              <p
                className="text-xl md:text-2xl text-white/95 mb-8 text-pretty leading-relaxed"
                style={{ textShadow: "1px 1px 2px rgba(0,0,0,0.3)" }}
              >
                Potenciá tu equipo con{" "}
                <span className="font-semibold text-primary">desarrolladores especializados</span> de nuestra
                cooperativa
              </p>

              <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-8">
                <Button
                  asChild
                  size="lg"
                  className="bg-primary hover:bg-primary/90 px-8 py-4 text-lg rounded-full hover:scale-105 transition-all duration-300"
                >
                  <a href="#contacto" className="flex items-center gap-2">
                    Solicitar Talento
                    <ArrowRight className="h-5 w-5" />
                  </a>
                </Button>
                <Button
                  asChild
                  variant="outline"
                  size="lg"
                  className="border-2 border-white text-white hover:bg-white hover:text-secondary bg-transparent px-8 py-4 text-lg rounded-full hover:scale-105 transition-all duration-300"
                >
                  <a href="#servicios">Ver Servicios</a>
                </Button>
              </div>

              <div className="grid grid-cols-3 gap-6 mt-8">
                {stats.map((stat, index) => (
                  <div key={index} className="text-center">
                    <div className="text-2xl md:text-3xl font-bold text-primary mb-1">{stat.number}</div>
                    <div className="text-sm text-white/90 font-medium">{stat.label}</div>
                    <div className="text-xs text-white/70">{stat.description}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="relative">
              <div className="relative rounded-3xl overflow-hidden shadow-2xl">
                <Image
                  src="/genexus-developer-workspace.png"
                  alt="Desarrollador trabajando con GeneXus IDE"
                  width={600}
                  height={400}
                  className="w-full h-auto object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-secondary/60 to-transparent" />
                <div className="absolute bottom-6 left-6 text-white">
                  <div className="flex items-center gap-2 mb-2">
                    <Award className="h-5 w-5 text-primary" />
                    <span className="text-sm font-medium">Partner Oficial GeneXus</span>
                  </div>
                  <h3 className="text-xl font-bold mb-1" style={{ textShadow: "2px 2px 4px rgba(0,0,0,0.8)" }}>
                    Desarrolladores Certificados
                  </h3>
                  <p className="text-sm opacity-90" style={{ textShadow: "1px 1px 3px rgba(0,0,0,0.8)" }}>
                    Listos para integrarse a tu equipo
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="servicios" ref={sectionRefs.servicios} className="py-20 md:py-24 relative">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-4">
              <Target className="h-4 w-4" />
              Nuestros Servicios
            </div>
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">
              Staff Augmentation <span className="text-primary">Especializado</span>
            </h2>
            <p className="text-muted-foreground max-w-3xl mx-auto text-pretty text-lg leading-relaxed">
              Talento GeneXus que se integra perfectamente a tu equipo con la calidad cooperativa
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            {services.map((service, index) => (
              <Card
                key={index}
                className="hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border-0 shadow-lg bg-card group relative overflow-hidden"
              >
                <div className="absolute top-4 right-4 bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-medium">
                  {service.highlight}
                </div>
                <CardHeader className="pb-6">
                  <div className="bg-primary/10 w-16 h-16 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors duration-300">
                    <service.icon className="h-8 w-8 text-primary" />
                  </div>
                  <CardTitle className="text-xl font-bold">{service.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-base leading-relaxed">{service.description}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>

          

          <div className="text-center">
            <div className="relative rounded-3xl overflow-hidden shadow-2xl max-w-4xl mx-auto">
              <Image
                src="/equipo-tera-trabajando.jpg"
                alt="Equipo TERA trabajando en oficina"
                width={800}
                height={500}
                className="w-full h-auto object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
              <div className="absolute bottom-8 left-8 text-white">
                <div className="flex items-center gap-2 mb-3">
                  <Star className="h-5 w-5 text-primary fill-current" />
                  <span className="text-sm font-medium">Equipo Especializado</span>
                </div>
                <h3 className="text-2xl font-bold mb-2" style={{ textShadow: "2px 2px 4px rgba(0,0,0,0.8)" }}>
                  Desarrolladores GeneXus
                </h3>
                <p className="text-base opacity-90" style={{ textShadow: "1px 1px 3px rgba(0,0,0,0.8)" }}>
                  Expertos certificados listos para tu proyecto
                </p>
              </div>
            </div>
          </div>
          <section className="py-20 md:py-24">
            <div className="container mx-auto px-4">
              <div className="text-center mb-12">
                <h3 className="text-2xl md:text-3xl font-bold mb-4 text-balance">
                  Otras Tecnologías <span className="text-primary">Especializadas</span>
                </h3>
                <p className="text-muted-foreground max-w-2xl mx-auto text-pretty text-lg leading-relaxed">
                  Expertos en análisis de datos y business intelligence
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                {techServices.map((service, index) => (
                  <Card
                    key={index}
                    className="hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border-0 shadow-lg bg-card group relative overflow-hidden"
                  >
                    <div className="absolute top-4 right-4 bg-secondary/10 text-secondary px-3 py-1 rounded-full text-xs font-medium">
                      {service.highlight}
                    </div>
                    <CardHeader className="pb-6">
                      <div className="bg-secondary/10 w-16 h-16 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-secondary/20 transition-colors duration-300">
                        <Image
                          src={service.logo || "/placeholder.svg"}
                          alt={service.title}
                          width={32}
                          height={32}
                          className="h-8 w-8 object-contain"
                        />
                      </div>
                      <CardTitle className="text-xl font-bold">{service.title}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <CardDescription className="text-base leading-relaxed">{service.description}</CardDescription>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </section>

        </div>
      </section>

      <section id="beneficios" ref={sectionRefs.beneficios} className="py-20 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-4">
              <CheckCircle className="h-4 w-4" />
              Ventajas Competitivas
            </div>
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">
              ¿Por qué elegir <span className="text-primary">TERA</span>?
            </h2>
            <p className="text-muted-foreground max-w-3xl mx-auto text-pretty text-lg leading-relaxed">
              La diferencia cooperativa en staff augmentation tecnológico
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {benefits.map((benefit, index) => (
              <div
                key={index}
                className="flex items-start gap-4 p-6 rounded-2xl bg-card shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
              >
                <div className="bg-primary/10 w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                  <CheckCircle className="h-4 w-4 text-primary" />
                </div>
                <span className="text-base font-medium leading-relaxed">{benefit}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section
        id="contacto"
        ref={sectionRefs.contacto}
        className="py-20 md:py-24 bg-gradient-to-br from-secondary via-secondary/95 to-secondary/90 relative overflow-hidden"
      >
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-10 left-10 w-32 h-32 bg-primary/30 rounded-full blur-xl"></div>
          <div className="absolute bottom-10 right-10 w-48 h-48 bg-primary/20 rounded-full blur-2xl"></div>
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
        </div>

        <div className="container mx-auto px-4 text-center relative z-10">
          <div className="max-w-3xl mx-auto">
            <div className="inline-flex items-center gap-2 bg-white/10 text-white px-4 py-2 rounded-full text-sm font-medium mb-6">
              <Mail className="h-4 w-4" />
              Contacto Directo
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6 text-balance">
              ¿Necesitás talento <span className="text-primary">GeneXus</span>?
            </h2>
            <p className="text-xl text-white/90 mb-12 text-pretty leading-relaxed">
              Conversemos sobre tus necesidades de staff augmentation. Consulta y presupuesto gratuitos.
            </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-8 py-4 text-lg rounded-full hover:scale-105 transition-all duration-300 shadow-lg"
              >
                <a href="mailto:administración@tera.coop.ar" className="flex items-center gap-3">
                  <Mail className="h-5 w-5" />
                  administracion@tera.coop.ar
                </a>
              </Button>
              <Button
                asChild
                variant="outline"
                size="lg"
                className="border-2 border-white text-white hover:bg-white hover:text-secondary bg-transparent px-8 py-4 text-lg rounded-full hover:scale-105 transition-all duration-300"
              >
                <a href="tel:+5493413110700" className="flex items-center gap-3">
                  <Phone className="h-5 w-5" />
                  +54 9 341 311 0700
                </a>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}