"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Package, BarChart3, Clock, Users, CheckCircle, TrendingUp, Truck, Bell, FileText, Zap } from "lucide-react"
import { useEffect } from "react"
import Image from "next/image"

export default function VectaPage() {
  useEffect(() => {
    if (!window.location.hash) {
      window.scrollTo(0, 0)
    }
  }, [])

  const features = [
    {
      icon: Package,
      title: "Gestión Completa de Pedidos",
      description: "Administra todos tus pedidos desde un solo lugar con interfaz intuitiva y flujos optimizados",
    },
    {
      icon: Clock,
      title: "Seguimiento en Tiempo Real",
      description: "Monitorea el estado de cada pedido en tiempo real con actualizaciones automáticas",
    },
    {
      icon: BarChart3,
      title: "Reportes Avanzados",
      description: "Genera reportes detallados y analytics para tomar decisiones basadas en datos",
    },
    {
      icon: Users,
      title: "Gestión de Clientes",
      description: "Base de datos completa de clientes con historial de pedidos y preferencias",
    },
    {
      icon: Truck,
      title: "Control de Entregas",
      description: "Optimiza rutas de entrega y mantén informados a tus clientes sobre el estado",
    },
    {
      icon: Bell,
      title: "Notificaciones Automáticas",
      description: "Alertas y notificaciones automáticas para clientes y equipo de trabajo",
    },
  ]

  const benefits = [
    {
      icon: TrendingUp,
      title: "Aumenta la Eficiencia",
      description: "Reduce tiempos de procesamiento hasta un 60% con automatización inteligente",
    },
    {
      icon: CheckCircle,
      title: "Mejora la Satisfacción",
      description: "Clientes más satisfechos con transparencia total en el proceso",
    },
    {
      icon: FileText,
      title: "Reportes Precisos",
      description: "Datos exactos para optimizar operaciones y proyectar crecimiento",
    },
    {
      icon: Zap,
      title: "Implementación Rápida",
      description: "Sistema listo para usar en días, no meses",
    },
  ]

  return (
    <div className="min-h-screen bg-background">
      {/* Hero Section */}
      <section className="pt-20 py-20 md:py-32 bg-gradient-to-br from-blue-600 to-blue-800 relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('/abstract-tech-pattern.png')] opacity-10"></div>
        <div className="container mx-auto px-4 text-center relative z-10">
          <div className="max-w-4xl mx-auto">
            <div className="mb-8">
              <div className="inline-flex items-center justify-center bg-white/15  border border-white/20 rounded-full px-4 py-2 mb-3 ">
                <Image src="/vecta-logo.png" alt="Vecta Logo" width={700} height={400} className="h-54 w-auto" />
              </div>
            </div>

            <h1 className="text-2xl md:text-4xl lg:text-5xl font-bold text-white mb-6 text-balance leading-tight">
              Gestión de Pedidos Inteligente
              
            </h1>

            <p className="text-md md:text-xl text-blue-100 mb-12 text-pretty leading-relaxed max-w-3xl mx-auto">
              Sistema completo para gestionar pedidos con seguimiento en tiempo real, reportes avanzados y
              automatización que impulsa tu negocio
            </p>

            <div className="flex flex-col md:flex-row justify-center gap-4 md:gap-6">
              <Button size="lg" className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-4 text-lg rounded-full">
                Solicitar Demo
              </Button>
              <Button
                variant="outline"
                size="lg"
                className="border-2 border-white text-white hover:bg-white hover:text-blue-600 bg-transparent px-8 py-4 text-lg rounded-full"
              >
                Ver Características
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-32 md:py-40 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-24">
            <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">Características Principales</h2>
            <p className="text-muted-foreground text-xl max-w-3xl mx-auto text-pretty">
              Todo lo que necesitas para gestionar pedidos de manera eficiente y profesional
            </p>
          </div>

          <div className="mb-16 text-center">
            <Image
              src="/logistics-team.jpg"
              alt="Equipo profesional gestionando pedidos"
              width={800}
              height={400}
              className="rounded-lg shadow-xl mx-auto"
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <Card
                key={index}
                className="border-0 shadow-lg bg-white/80 backdrop-blur-sm hover:shadow-xl transition-all duration-300"
              >
                <CardHeader>
                  <feature.icon className="h-12 w-12 text-blue-600 mb-4" />
                  <CardTitle className="text-xl font-bold">{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-base leading-relaxed">{feature.description}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-32 md:py-40">
        <div className="container mx-auto px-4">
          <div className="text-center mb-24">
            <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">Beneficios para tu Negocio</h2>
            <p className="text-muted-foreground text-xl max-w-3xl mx-auto text-pretty">
              Resultados medibles que impactan directamente en tu rentabilidad
            </p>
          </div>

          <div className="mb-16 text-center">
            <Image
              src="/delivery-trucks.jpg"
              alt="Camiones de entrega y operaciones logísticas"
              width={800}
              height={400}
              className="rounded-lg shadow-xl mx-auto"
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {benefits.map((benefit, index) => (
              <Card
                key={index}
                className="text-center border-0 shadow-lg bg-white/80 backdrop-blur-sm hover:shadow-xl transition-all duration-300"
              >
                <CardHeader>
                  <benefit.icon className="h-16 w-16 text-blue-600 mx-auto mb-4" />
                  <CardTitle className="text-lg font-bold">{benefit.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-base leading-relaxed">{benefit.description}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <div className="bg-blue-600 rounded-none p-12 text-white w-full min-h-80 flex items-center justify-center">
        <div className="max-w-4xl mx-auto px-4 w-full text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">
            ¿Listo para Optimizar tu Gestión de Pedidos?
          </h2>
          <p className="text-xl mb-8 text-blue-100 text-pretty leading-relaxed">
            Únete a las empresas que ya confían en Vecta para gestionar sus pedidos de manera eficiente
          </p>
          <div className="flex flex-col md:flex-row justify-center gap-4">
            <Button size="lg" className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-4 text-lg rounded-full">
              Comenzar Ahora
            </Button>
            <Button
              variant="outline"
              size="lg"
              className="border-2 border-white text-white hover:bg-white hover:text-blue-600 bg-transparent px-8 py-4 text-lg rounded-full"
            >
              Contactar Ventas
            </Button>
          </div>
        </div>
      </div>

      {/* Contact Section */}
      <section className="py-20 md:py-32 bg-muted/50">
        <div className="container mx-auto px-4 text-center">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">¿Tienes Preguntas?</h2>
            <p className="text-muted-foreground text-lg mb-8">
              Nuestro equipo está listo para ayudarte a implementar Vecta en tu empresa
            </p>
            <Button
              size="lg"
              className="bg-blue-600 hover:bg-blue-700 px-8 py-4 text-lg rounded-full"
              onClick={() => (window.location.href = "mailto:administracion@tera.coop.ar")}
            >
              Contactar Equipo de Ventas
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}