[V0_FILE]typescriptreact:file="components/call-scheduler.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Card } from "@/components/ui/card" import { Calendar, Clock, Send } from "lucide-react" import { useToast } from "@/hooks/use-toast" export function CallScheduler() { const { toast } = useToast() const [formData, setFormData] = useState({ nombre: "", empresa: "", email: "", telefono: "", fecha: "", hora: "", motivo: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission await new Promise((resolve) => setTimeout(resolve, 1000)) console.log("Form data:", formData) toast({ title: "¡Solicitud enviada!", description: "Te contactaremos en breve para confirmar la llamada.", }) setFormData({ nombre: "", empresa: "", email: "", telefono: "", fecha: "", hora: "", motivo: "", }) setIsSubmitting(false) } return (

Habla con un experto en automatización

Elige la hora que mejor te venga y te llamaremos personalmente para analizar tus procesos

Nombre * setFormData({ ...formData, nombre: e.target.value })} placeholder="Tu nombre completo" />

Empresa setFormData({ ...formData, empresa: e.target.value })} placeholder="Nombre de tu empresa" />

Email * setFormData({ ...formData, email: e.target.value })} placeholder="tu@email.com" />

Teléfono * setFormData({ ...formData, telefono: e.target.value })} placeholder="615 340 753" />

Fecha preferida * setFormData({ ...formData, fecha: e.target.value })} />

Hora preferida * setFormData({ ...formData, hora: e.target.value })} />

Motivo de la consulta *

setFormData({ ...formData, motivo: e.target.value })}
            placeholder="Cuéntanos qué procesos deseas automatizar o qué necesidades tiene tu empresa..."
            rows={4}
          />
        </div>

<Button type="submit" size="lg" className="w-full" disabled={isSubmitting}>
          {isSubmitting ? (
            "Enviando..."
          ) : (
            <>
              <Send className="mr-2 h-4 w-4" />
              Reservar Llamada
            </>
          )}
        </Button>

<p className="text-center text-xs text-muted-foreground">
          Respondemos en menos de 24 horas. Todos los datos se envían a{" "}
          <a href="mailto:ogcele@gmail.com" className="text-primary underline">
            ogcele@gmail.com
          </a>
        </p>
      </form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/contact-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card } from "@/components/ui/card"
import { Send } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export function ContactForm() {
  const { toast } = useToast()
  const [formData, setFormData] = useState({
    nombre: "",
    empresa: "",
    sector: "",
    email: "",
    telefono: "",
    mensaje: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

// Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 1000))

console.log("Contact form data:", formData)

toast({
      title: "¡Mensaje enviado!",
      description: "Gracias por tu interés. Te responderemos en breve.",
    })

setFormData({
      nombre: "",
      empresa: "",
      sector: "",
      email: "",
      telefono: "",
      mensaje: "",
    })
    setIsSubmitting(false)
  }

return (
    <Card className="p-6 md:p-8">
      <form onSubmit={handleSubmit} className="space-y-5">
        <div className="grid gap-5 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="c-nombre">Nombre *</Label>
            <Input
              id="c-nombre"
              required
              value={formData.nombre}
              onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
              placeholder="Tu nombre"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="c-empresa">Empresa *</Label>
            <Input
              id="c-empresa"
              required
              value={formData.empresa}
              onChange={(e) => setFormData({ ...formData, empresa: e.target.value })}
              placeholder="Nombre de tu empresa"
            />
          </div>
        </div>

<div className="space-y-2">
          <Label htmlFor="c-sector">Sector</Label>
          <Input
            id="c-sector"
            value={formData.sector}
            onChange={(e) => setFormData({ ...formData, sector: e.target.value })}
            placeholder="Ej: Farmacia, Bodega, Retail..."
          />
        </div>

<div className="grid gap-5 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="c-email">Email *</Label>
            <Input
              id="c-email"
              type="email"
              required
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              placeholder="tu@email.com"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="c-telefono">Teléfono *</Label>
            <Input
              id="c-telefono"
              type="tel"
              required
              value={formData.telefono}
              onChange={(e) => setFormData({ ...formData, telefono: e.target.value })}
              placeholder="615 340 753"
            />
          </div>
        </div>

<div className="space-y-2">
          <Label htmlFor="c-mensaje">¿Qué proceso deseas automatizar? *</Label>
          <Textarea
            id="c-mensaje"
            required
            value={formData.mensaje}
            onChange={(e) => setFormData({ ...formData, mensaje: e.target.value })}
            placeholder="Describe qué procesos te gustaría automatizar o mejorar en tu empresa..."
            rows={5}
          />
        </div>

<Button type="submit" size="lg" className="w-full" disabled={isSubmitting}>
          {isSubmitting ? (
            "Enviando..."
          ) : (
            <>
              <Send className="mr-2 h-4 w-4" />
              Solicitar Análisis Gratuito
            </>
          )}
        </Button>

<p className="text-center text-xs text-muted-foreground">Respondemos en menos de 24 horas</p>
      </form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/aviso-legal/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export const metadata = {
  title: "Aviso Legal | Saliens - Marketing Emocional",
  description: "Aviso legal de Saliens - Marketing Emocional y Soluciones IA",
}

export default function AvisoLegalPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        <div className="container mx-auto max-w-4xl px-4 py-20">
          <h1 className="mb-8 text-4xl font-bold">Aviso Legal</h1>

<div className="prose prose-gray max-w-none space-y-6 text-muted-foreground">
            <p>
              En cumplimiento con lo dispuesto por la Ley 34/2002, de Servicios de la Sociedad de la Información y
              Comercio Electrónico (LSSI-CE), se informa que la presente web es propiedad de:
            </p>

<div className="rounded-lg bg-muted/50 p-6">
              <p className="mb-2">
                <strong className="text-foreground">Titular:</strong> Óscar González Celemín
              </p>
              <p className="mb-2">
                <strong className="text-foreground">DNI/NIF:</strong> 12393152Q
              </p>
              <p className="mb-2">
                <strong className="text-foreground">Nombre comercial:</strong> Saliens - Marketing Emocional
              </p>
              <p className="mb-2">
                <strong className="text-foreground">Correo electrónico:</strong> ogcele@gmail.com
              </p>
              <p className="mb-2">
                <strong className="text-foreground">Teléfono:</strong> 615 340 753
              </p>
              <p>
                <strong className="text-foreground">Dirección:</strong> Valladolid, Castilla y León, España
              </p>
            </div>

<p>
              El acceso y uso de esta web atribuye la condición de usuario, lo que implica la aceptación plena de este
              Aviso Legal y de las condiciones de uso que aquí se describen.
            </p>

<h2 className="mt-8 text-2xl font-bold text-foreground">1. Objeto del sitio web</h2>
            <p>
              El sitio web de Saliens tiene como finalidad ofrecer información sobre marketing emocional, soluciones de inteligencia artificial, automatización inteligente y transformación digital para empresas.
            </p>

<h2 className="mt-8 text-2xl font-bold text-foreground">2. Propiedad intelectual</h2>
            <p>
              Todos los contenidos de la web (textos, imágenes, logotipos, diseños, estructura, etc.) son propiedad del
              titular o cuentan con las licencias correspondientes. Se prohíbe su reproducción, distribución o
              modificación sin autorización expresa.
            </p>

<h2 className="mt-8 text-2xl font-bold text-foreground">3. Uso del sitio web</h2>
            <p>
              El usuario se compromete a hacer un uso adecuado y lícito del sitio web, evitando actuaciones que puedan
              causar daños al portal o a terceros.
            </p>

<h2 className="mt-8 text-2xl font-bold text-foreground">4. Enlaces externos</h2>
            <p>
              Cualquier enlace incluido en la web dirigirá siempre a{" "}
              <a href="mailto:ogcele@gmail.com" className="text-primary underline">
                ogcele@gmail.com
              </a>{" "}
              o a secciones internas del mismo sitio web, según la instrucción del titular.
            </p>

<h2 className="mt-8 text-2xl font-bold text-foreground">5. Responsabilidad</h2>
            <p>
              Saliens no se hace responsable del mal uso que los usuarios puedan realizar del sitio web ni de daños derivados de interferencias, virus o desconexiones que escapen a su control.
            </p>

<h2 className="mt-8 text-2xl font-bold text-foreground">6. Legislación aplicable</h2>
            <p>
              Este Aviso Legal se rige por la normativa española. Ante cualquier conflicto, ambas partes se someten a
              los juzgados de Valladolid.
            </p>
          </div>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/privacidad/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export const metadata = {
  title: "Política de Privacidad | Saliens - Marketing Emocional",
  description: "Política de privacidad conforme a RGPD y LOPDGDD",
}

export default function PrivacidadPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        <div className="container mx-auto max-w-4xl px-4 py-20">
          <h1 className="mb-8 text-4xl font-bold">Política de Privacidad</h1>

<div className="prose prose-gray max-w-none space-y-6 text-muted-foreground">
            <p>
              En cumplimiento del Reglamento General de Protección de Datos (RGPD UE 2016/679) y la LOPDGDD 3/2018, se
              facilita la siguiente información:
            </p>

<h2 className="mt-8 text-2xl font-bold text-foreground">1. Responsable del tratamiento</h2>
            <div className="rounded-lg bg-muted/50 p-6">
              <p className="mb-2">
                <strong className="text-foreground">Titular:</strong> Óscar González Celemín
              </p>
              <p className="mb-2">
                <strong className="text-foreground">DNI:</strong> 12393152Q
              </p>
              <p className="mb-2">
                <strong className="text-foreground">Email:</strong> ogcele@gmail.com
              </p>
              <p>
                <strong className="text-foreground">Teléfono:</strong> 615 340 753
              </p>
            </div>

<h2 className="mt-8 text-2xl font-bold text-foreground">2. Finalidad del tratamiento</h2>
            <p>
              Los datos proporcionados a través de formularios, correos o sistema de reserva de llamada se usarán para:
            </p>
            <ul className="ml-6 list-disc space-y-2">
              <li>Gestionar solicitudes de información</li>
              <li>Contactar con el usuario para resolver dudas o prestar servicios</li>
              <li>Enviar comunicaciones relacionadas con proyectos o automatizaciones solicitadas</li>
              <li>Permitir la reserva de fecha y hora para llamadas o reuniones</li>
            </ul>
            <p>No se tomarán decisiones automatizadas con efectos jurídicos sobre los usuarios.</p>

<h2 className="mt-8 text-2xl font-bold text-foreground">3. Legitimación</h2>
            <p>La base legal para el tratamiento es el consentimiento otorgado por el usuario al enviar sus datos.</p>

<h2 className="mt-8 text-2xl font-bold text-foreground">4. Destinatarios</h2>
            <p>No se cederán datos a terceros salvo obligación legal.</p>

<h2 className="mt-8 text-2xl font-bold text-foreground">5. Conservación</h2>
            <p>
              Los datos se conservarán mientras exista relación profesional o hasta que el usuario solicite su
              supresión.
            </p>

<h2 className="mt-8 text-2xl font-bold text-foreground">6. Derechos del usuario</h2>
            <p>
              El usuario puede ejercer sus derechos de acceso, rectificación, supresión, portabilidad, limitación y
              oposición enviando escrito a:{" "}
              <a href="mailto:ogcele@gmail.com" className="text-primary underline">
                ogcele@gmail.com
              </a>
            </p>

<h2 className="mt-8 text-2xl font-bold text-foreground">7. Seguridad</h2>
            <p>
              Se aplican medidas técnicas y organizativas para proteger los datos personales ante pérdida, alteración o
              acceso no autorizado.
            </p>

<h2 className="mt-8 text-2xl font-bold text-foreground">8. Procedencia</h2>
            <p>Todos los datos tratados proceden directamente del usuario mediante formulario, email o chatbot.</p>
          </div>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]png:file="public/logo-sinapsis.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20sinapsis-RyQ722dLLirWL5G1jiz4eqe58XwlO9.png" isMerged="true"
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.1",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]jpg:file="public/modern-pharmacy-interior-with-digital-displays-and.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-pharmacy-interior-with-digital-displays-and-PnjkvbRt8jAEgDULJtm52B5VoRSjxL.jpg" isMerged="true"
[V0_FILE]jpg:file="public/wine-cellar-with-oak-barrels-in-traditional-spanis.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wine-cellar-with-oak-barrels-in-traditional-spanis-7pIrGQMn31PaL1AHoFyhUGb2MFBTtd.jpg" isMerged="true"
[V0_FILE]png:file="public/images/logo-20sinapsis.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20sinapsis-RyQ722dLLirWL5G1jiz4eqe58XwlO9.png" isMerged="true"
[V0_FILE]jpg:file="public/modern-pharmacy-interior-with-shelves-of-medicines.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-pharmacy-interior-with-shelves-of-medicines-HMMgq6kpLH3OrYiZYxzkQmR0tdKgr4.jpg" isMerged="true"
[V0_FILE]jpg:file="public/spanish-winery-with-oak-wine-barrels-in-cellar--wi.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/spanish-winery-with-oak-wine-barrels-in-cellar--wi-Npvtrh8pqtp2W7FjXA9MpsaJyp0VpE.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/blog/automatizacion-farmacias-castilla-leon/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Clock, Calendar } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default function PharmacyAutomationArticle() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-background">
        <article className="py-12">
          <div className="container mx-auto px-4">
            <Link
              href="/blog"
              className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary mb-8"
            >
              <ArrowLeft className="h-4 w-4" />
              Volver al blog
            </Link>

<div className="mx-auto max-w-4xl">
              {/* Header */}
              <div className="mb-8">
                <div className="mb-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
                  <span className="rounded-full bg-primary/10 px-3 py-1 font-semibold text-primary">Farmacias</span>
                  <span className="flex items-center gap-1">
                    <Calendar className="h-4 w-4" />5 de diciembre, 2025
                  </span>
                  <span className="flex items-center gap-1">
                    <Clock className="h-4 w-4" />8 min lectura
                  </span>
                </div>

<h1 className="mb-6 text-4xl font-bold text-balance md:text-5xl">
                  Cómo la automatización con IA transforma las farmacias en Castilla y León (2025)
                </h1>

{/* Content */}
              <div className="prose prose-lg max-w-none">
                <h2>Introducción</h2>
                <p>
                  Las farmacias en Castilla y León —y en toda España— están viviendo un momento de cambio. La creciente
                  demanda, la gestión cada vez más compleja de stock, la necesidad de ofrecer un servicio ágil al
                  cliente y las obligaciones administrativas hacen que los días laborales sean largos, con muchas tareas
                  repetitivas. En este escenario,
                  <strong> la automatización con Inteligencia Artificial (IA) ya no es una opción futurista</strong>: se
                  ha convertido en una palanca de eficiencia, competitividad y ahorro real de tiempo.
                </p>

<p>
                  Implementar automatizaciones inteligentes permite a las farmacias centrarse en lo importante: ofrecer
                  atención personalizada, responder rápidamente a sus clientes y dedicar más tiempo a la salud, sin
                  quedar atrapadas por la burocracia, el control de stock o la organización documental.
                </p>

<h2>Por qué la IA y la automatización son una gran oportunidad para las farmacias</h2>

<ul>
                  <li>
                    <strong>Ahorro de tiempo y recursos.</strong> Muchas tareas rutinarias consumen gran parte del
                    tiempo del personal. Con IA, esas tareas se pueden automatizar: informes, reposiciones,
                    recordatorios, organización documental… eso libera a los empleados para tareas de mayor valor.
                  </li>
                  <li>
                    <strong>Reducción de errores.</strong> Los sistemas automatizados minimizan riesgos de errores en
                    stock, reposiciones, facturas, albaranes o controles administrativos.
                  </li>
                  <li>
                    <strong>Mejora en la eficiencia operativa.</strong> Procesos más rápidos, menores demoras, mejor
                    gestión de flujos internos.
                  </li>
                  <li>
                    <strong>Mejor atención al cliente.</strong> Con automatizaciones de marketing, recordatorios,
                    avisos, comunicación proactiva… la farmacia puede ofrecer un servicio más moderno y cercano.
                  </li>
                  <li>
                    <strong>Adaptación al entorno digital.</strong> En un mercado cada vez más competitivo, digitalizar
                    procesos con IA significa mantenerse al día y prepararse para el futuro.
                  </li>
                </ul>

<h2>Procesos de farmacia que se pueden automatizar</h2>

<div className="not-prose my-8 overflow-x-auto">
                  <table className="w-full border-collapse">
                    <thead>
                      <tr className="bg-primary/5">
                        <th className="border border-border p-3 text-left font-semibold">Proceso / Área</th>
                        <th className="border border-border p-3 text-left font-semibold">
                          Qué se puede automatizar / mejorar
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td className="border border-border p-3">Gestión de stock y reposiciones</td>
                        <td className="border border-border p-3">
                          Avisos automáticos de stock bajo, pedidos automáticos, alertas de vencimientos
                        </td>
                      </tr>
                      <tr className="bg-muted/50">
                        <td className="border border-border p-3">Gestión documental</td>
                        <td className="border border-border p-3">
                          Clasificación automática de recetas, archivado digital, organización de historiales
                        </td>
                      </tr>
                      <tr>
                        <td className="border border-border p-3">Comunicaciones con clientes</td>
                        <td className="border border-border p-3">
                          Recordatorios de citas o renovaciones, campañas de fidelización, newsletters
                        </td>
                      </tr>
                      <tr className="bg-muted/50">
                        <td className="border border-border p-3">Atención al cliente</td>
                        <td className="border border-border p-3">
                          Chatbots para dudas frecuentes, información de horarios y disponibilidad
                        </td>
                      </tr>
                      <tr>
                        <td className="border border-border p-3">Informes y analítica</td>
                        <td className="border border-border p-3">
                          Generación automática de informes de ventas, tendencias, stock, rotación
                        </td>
                      </tr>
                      <tr className="bg-muted/50">
                        <td className="border border-border p-3">Marketing y CRM</td>
                        <td className="border border-border p-3">
                          Segmentación de clientes, campañas personalizadas, seguimiento automático
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

<h2>Casos de uso prácticos</h2>

<h3>1. Reposición automática al alcanzar umbral mínimo</h3>
                <p>
                  Una farmacia coloca un límite mínimo para ciertos productos críticos (mascarillas, medicamentos
                  frecuentes, etc.). Cuando el stock baja del umbral, se genera automáticamente un pedido al proveedor,
                  enviando la orden sin intervención humana.
                  <strong> Esto ahorra tiempo y evita faltas de stock.</strong>
                </p>

<h3>2. Chatbot disponible 24/7 para consultas frecuentes</h3>
                <p>
                  Muchas personas llaman o visitan la farmacia con preguntas sencillas. Un chatbot con IA puede
                  responder automáticamente, registrar la consulta y, si es necesario, pedir datos para llamar o avisar
                  al cliente cuando el producto esté disponible.
                </p>

<h3>3. Campañas de marketing y fidelización automatizadas</h3>
                <p>
                  Enviar recordatorios a clientes que compraron productos crónicos, ofertas en productos de temporada,
                  promociones. Todo segmentado según historial, <strong>sin intervención manual.</strong>
                </p>

<h2>Cómo implementar la automatización en tu farmacia</h2>

<ol>
                  <li>
                    <strong>Análisis inicial de procesos.</strong> Mapea las tareas repetitivas, áreas críticas y
                    cuellos de botella.
                  </li>
                  <li>
                    <strong>Identificación de prioridades.</strong> Decide qué automatizar primero basándote en lo que
                    más tiempo consume.
                  </li>
                  <li>
                    <strong>Diseño de flujos automatizados.</strong> Define triggers, sistemas conectados y salidas
                    esperadas.
                  </li>
                  <li>
                    <strong>Implementación y pruebas.</strong> Usa herramientas de IA/RPA + chatbot + CRM. Prueba en
                    entorno real con control.
                  </li>
                  <li>
                    <strong>Formación del personal.</strong> Asegura que el equipo entienda cómo funciona el sistema.
                  </li>
                  <li>
                    <strong>Monitorización y mejora continua.</strong> Revisa resultados, detecta mejoras e itera.
                  </li>
                </ol>

<h2>Aspectos legales y de privacidad</h2>

<p>
                  Al trabajar con historiales de clientes y datos médicos, es fundamental asegurar que los datos se
                  gestionen conforme a normativa (RGPD, LOPDGDD). La transparencia con el cliente y la seguridad de los
                  sistemas son prioritarias.
                </p>

<h2>Conclusión</h2>

<p>
                  La automatización con IA no es ya una apuesta de futuro, sino una necesidad presente para las
                  farmacias que buscan eficiencia, competitividad y un servicio moderno.{" "}
                  <strong>
                    Si tienes una farmacia en Valladolid o en cualquier punto de Castilla y León, este es el momento de
                    dar el salto digital.
                  </strong>
                </p>

<div className="not-prose mt-12 rounded-lg bg-primary/5 p-8 text-center">
                  <h3 className="mb-4 text-2xl font-bold">¿Quieres que analicemos tu farmacia?</h3>
                  <p className="mb-6 text-muted-foreground">
                    Solicita un diagnóstico gratuito y descubre qué puedes automatizar
                  </p>
                  <Button asChild size="lg">
                    <Link href="/#contacto">Solicitar Diagnóstico Gratuito</Link>
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </article>
      </main>
      <Footer />
    </>
  )
}
[V0_FILE]jpg:file="public/modern-office-with-digital-screens-and-automation.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-office-with-digital-screens-and-automation-Pg0avXUHJqfUd1aec5rEBcSyNgli6f.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/blog/automatizacion-bodegas-vitivinicola/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Clock, Calendar } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default function WineryAutomationArticle() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-background">
        <article className="py-12">
          <div className="container mx-auto px-4">
            <Link
              href="/blog"
              className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary mb-8"
            >
              <ArrowLeft className="h-4 w-4" />
              Volver al blog
            </Link>

<div className="mx-auto max-w-4xl">
              {/* Header */}
              <div className="mb-8">
                <div className="mb-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
                  <span className="rounded-full bg-primary/10 px-3 py-1 font-semibold text-primary">Bodegas</span>
                  <span className="flex items-center gap-1">
                    <Calendar className="h-4 w-4" />5 de diciembre, 2025
                  </span>
                  <span className="flex items-center gap-1">
                    <Clock className="h-4 w-4" />
                    10 min lectura
                  </span>
                </div>

<h1 className="mb-6 text-4xl font-bold text-balance md:text-5xl">
                  Automatización inteligente para bodegas: aumente eficiencia y ventas en 2025
                </h1>

{/* Content */}
              <div className="prose prose-lg max-w-none">
                <h2>Introducción</h2>
                <p>
                  El sector vitivinícola en Castilla y León enfrenta desafíos únicos: gestión compleja de inventarios,
                  coordinación con distribuidores nacionales e internacionales, trazabilidad exhaustiva y cumplimiento
                  normativo estricto. En este contexto, <strong>la automatización inteligente con IA</strong> se ha
                  convertido en la clave para que las bodegas modernicen sus operaciones sin perder la esencia artesanal
                  que las caracteriza.
                </p>

<p>
                  Implementar automatizaciones permite a las bodegas optimizar procesos administrativos, mejorar la
                  comunicación con clientes y distribuidores, y obtener insights valiosos sobre tendencias de mercado,
                  todo mientras mantienen el enfoque en la calidad y la tradición.
                </p>

<h2>Por qué la IA y la automatización son una palanca clave para bodegas</h2>

<ul>
                  <li>
                    <strong>Optimización de la gestión comercial.</strong> Automatizar pedidos, albaranes y facturación
                    reduce errores y acelera los procesos de venta y distribución.
                  </li>
                  <li>
                    <strong>Trazabilidad completa y automática.</strong> Seguimiento de cada botella desde la viña hasta
                    el consumidor final, cumpliendo con todas las normativas sin esfuerzo manual.
                  </li>
                  <li>
                    <strong>Marketing inteligente y segmentado.</strong> Campañas automáticas diferenciadas para
                    restauradores, distribuidores, tiendas especializadas y consumidores finales.
                  </li>
                  <li>
                    <strong>Análisis predictivo de ventas.</strong> La IA analiza patrones históricos y tendencias para
                    predecir demanda y optimizar la producción.
                  </li>
                  <li>
                    <strong>Eficiencia operativa.</strong> Liberación de recursos humanos para tareas estratégicas como
                    desarrollo de producto, enoturismo y expansión comercial.
                  </li>
                </ul>

<h2>Áreas y procesos que pueden automatizarse en bodegas</h2>

<div className="not-prose my-8 overflow-x-auto">
                  <table className="w-full border-collapse">
                    <thead>
                      <tr className="bg-primary/5">
                        <th className="border border-border p-3 text-left font-semibold">Área / Proceso</th>
                        <th className="border border-border p-3 text-left font-semibold">Qué se puede automatizar</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td className="border border-border p-3">Gestión comercial</td>
                        <td className="border border-border p-3">
                          Procesamiento de pedidos, generación de albaranes, facturación automática
                        </td>
                      </tr>
                      <tr className="bg-muted/50">
                        <td className="border border-border p-3">Comunicación con clientes</td>
                        <td className="border border-border p-3">
                          Seguimiento post-venta, newsletters, campañas segmentadas, recordatorios
                        </td>
                      </tr>
                      <tr>
                        <td className="border border-border p-3">Trazabilidad y compliance</td>
                        <td className="border border-border p-3">
                          Registro automático de lotes, certificaciones, documentación legal
                        </td>
                      </tr>
                      <tr className="bg-muted/50">
                        <td className="border border-border p-3">Inventario y logística</td>
                        <td className="border border-border p-3">
                          Control de stock, gestión de almacén, optimización de rutas de distribución
                        </td>
                      </tr>
                      <tr>
                        <td className="border border-border p-3">Marketing y CRM</td>
                        <td className="border border-border p-3">
                          Segmentación automática, campañas personalizadas, análisis de comportamiento
                        </td>
                      </tr>
                      <tr className="bg-muted/50">
                        <td className="border border-border p-3">Análisis y reporting</td>
                        <td className="border border-border p-3">
                          Informes de ventas, análisis de rentabilidad, predicción de demanda
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

<h2>Casos de uso prácticos para bodegas</h2>

<h3>1. Gestión automática de pedidos de distribuidores</h3>
                <p>
                  Un distribuidor envía un pedido por email o portal web. El sistema lo procesa automáticamente,
                  verifica disponibilidad de stock, genera el albarán, actualiza el inventario y envía confirmación al
                  distribuidor.
                  <strong>
                    {" "}
                    Todo sin intervención manual, reduciendo el tiempo de procesamiento de días a minutos.
                  </strong>
                </p>

<h3>2. Campañas segmentadas por tipo de cliente</h3>
                <p>
                  La bodega segmenta automáticamente su base de datos: restaurantes premium, tiendas especializadas,
                  clubs de vino, consumidores finales. Cada segmento recibe comunicaciones personalizadas con productos
                  relevantes, ofertas específicas y contenido adaptado a sus intereses.
                </p>

<h3>3. Trazabilidad automática desde viñedo hasta consumidor</h3>
                <p>
                  Cada lote de producción se registra automáticamente con fecha de vendimia, proceso de elaboración,
                  embotellado y distribución. Cualquier consulta sobre trazabilidad se responde instantáneamente,
                  cumpliendo con normativas europeas sin búsquedas manuales en archivos.
                </p>

<h3>4. Análisis predictivo de ventas estacionales</h3>
                <p>
                  El sistema analiza patrones históricos de venta por producto, canal y temporada. Predice picos de
                  demanda (Navidad, verano, eventos) y sugiere ajustes en producción y stock para maximizar ventas y
                  minimizar excedentes.
                </p>

<h2>Cómo implementar la transformación digital en tu bodega</h2>

<ol>
                  <li>
                    <strong>Auditoría de procesos actuales.</strong> Identificar flujos de trabajo, cuellos de botella y
                    tareas repetitivas.
                  </li>
                  <li>
                    <strong>Priorización estratégica.</strong> Comenzar con áreas de mayor impacto: comercial,
                    trazabilidad o marketing.
                  </li>
                  <li>
                    <strong>Integración con sistemas existentes.</strong> Conectar ERP, CRM y herramientas actuales para
                    evitar silos de información.
                  </li>
                  <li>
                    <strong>Automatización gradual.</strong> Implementar por fases, probando y ajustando antes de
                    escalar.
                  </li>
                  <li>
                    <strong>Capacitación del equipo.</strong> Formar al personal en nuevas herramientas y procesos
                    automatizados.
                  </li>
                  <li>
                    <strong>Medición y optimización continua.</strong> Establecer KPIs y revisar resultados
                    trimestralmente.
                  </li>
                </ol>

<h2>Beneficios tangibles para bodegas que apuestan por automatización</h2>

<ul>
                  <li>
                    <strong>Reducción de hasta 70%</strong> en tiempo dedicado a tareas administrativas
                  </li>
                  <li>
                    <strong>Incremento del 25-40%</strong> en eficiencia de gestión comercial
                  </li>
                  <li>
                    <strong>Mayor penetración en mercados internacionales</strong> gracias a comunicación automatizada
                    multiidioma
                  </li>
                  <li>
                    <strong>Mejora en cumplimiento normativo</strong> con documentación siempre actualizada y accesible
                  </li>
                  <li>
                    <strong>Insights de negocio en tiempo real</strong> para decisiones estratégicas basadas en datos
                  </li>
                  <li>
                    <strong>Escalabilidad sin aumentar proporcionalmente la plantilla administrativa</strong>
                  </li>
                </ul>

<h2>Conclusión</h2>

<p>
                  La automatización inteligente no es solo para grandes corporaciones.{" "}
                  <strong>Las bodegas familiares y medianas de Castilla y León pueden beneficiarse enormemente</strong>{" "}
                  de estas tecnologías, compitiendo en igualdad de condiciones con grandes productores mientras
                  mantienen su identidad y calidad artesanal.
                </p>

<div className="not-prose mt-12 rounded-lg bg-primary/5 p-8 text-center">
                  <h3 className="mb-4 text-2xl font-bold">¿Quieres modernizar tu bodega?</h3>
                  <p className="mb-6 text-muted-foreground">
                    Solicita un análisis gratuito y descubre qué procesos puedes automatizar
                  </p>
                  <Button asChild size="lg">
                    <Link href="/#contacto">Solicitar Diagnóstico Gratuito</Link>
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </article>
      </main>
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/blog/5-senales-pyme-necesita-automatizacion/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Clock, Calendar, AlertTriangle } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default function SMESignalsArticle() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-background">
        <article className="py-12">
          <div className="container mx-auto px-4">
            <Link
              href="/blog"
              className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary mb-8"
            >
              <ArrowLeft className="h-4 w-4" />
              Volver al blog
            </Link>

<div className="mx-auto max-w-4xl">
              {/* Header */}
              <div className="mb-8">
                <div className="mb-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
                  <span className="rounded-full bg-primary/10 px-3 py-1 font-semibold text-primary">PYMEs</span>
                  <span className="flex items-center gap-1">
                    <Calendar className="h-4 w-4" />5 de diciembre, 2025
                  </span>
                  <span className="flex items-center gap-1">
                    <Clock className="h-4 w-4" />7 min lectura
                  </span>
                </div>

<h1 className="mb-6 text-4xl font-bold text-balance md:text-5xl">
                  5 señales de que tu empresa en Castilla y León necesita automatización urgente
                </h1>

{/* Content */}
              <div className="prose prose-lg max-w-none">
                <h2>Introducción</h2>
                <p>
                  Vivimos una era en la que la transformación digital y la inteligencia artificial ya no son privilegios
                  de grandes empresas. Las PYMEs de Castilla y León, desde Valladolid hasta las zonas rurales, tienen
                  hoy la oportunidad de dar un salto cualitativo en eficiencia, competitividad y agilidad.
                  <strong> Pero muchas no saben exactamente cuándo es el momento de abrazar la automatización.</strong>
                </p>

<p>
                  En este artículo te mostramos cinco señales claras de que tu empresa necesita pasar por una
                  transformación digital con automatización e IA, y te explicamos cómo hacerlo de forma ordenada,
                  práctica y rentable.
                </p>

<div className="not-prose my-8 rounded-lg border-l-4 border-primary bg-primary/5 p-6">
                  <div className="flex items-start gap-3">
                    <AlertTriangle className="h-6 w-6 flex-shrink-0 text-primary" />
                    <p className="text-sm leading-relaxed">
                      <strong>Dato importante:</strong> El 68% de las PYMEs españolas que han implementado
                      automatización reportan un incremento de productividad superior al 30% en el primer año.
                    </p>
                  </div>
                </div>

<h2>Señal 1: Tus empleados dedican mucho tiempo a tareas repetitivas</h2>

<p>
                  Si una parte importante de tu personal pasa horas al día rellenando formularios, gestionando stock,
                  procesando facturas, tramitando pedidos, enviando emails manuales o clasificando documentos,
                  probablemente estés perdiendo recursos valiosos.
                </p>

<p>
                  <strong>La automatización de procesos (RPA + IA)</strong> puede asumir esas tareas repetitivas,
                  liberando tiempo para actividades de mayor valor añadido: estrategia, innovación, atención
                  personalizada al cliente o desarrollo de negocio.
                </p>

<div className="not-prose my-6 rounded-lg bg-muted/50 p-6">
                  <h4 className="mb-3 font-semibold">Ejemplo práctico:</h4>
                  <p className="text-sm text-muted-foreground">
                    Una empresa de servicios en Valladolid automatizó la generación de informes mensuales que antes
                    tomaba 3 días de trabajo. Ahora el proceso toma 15 minutos sin intervención humana, ahorrando más de
                    30 horas/mes.
                  </p>
                </div>

<h2>Señal 2: Cometes errores frecuentes por saturación o volumen de trabajo</h2>

<p>
                  Descuadres de stock, errores en envíos, duplicados, omisiones, documentación mal archivada... Esto
                  suele pasar cuando la carga de trabajo manual es alta.{" "}
                  <strong>Con sistemas automatizados, la precisión aumenta</strong>y los errores humanos disminuyen
                  drásticamente.
                </p>

<p>
                  La IA ayuda a mejorar la fiabilidad, la calidad y la consistencia de los procesos, especialmente en
                  tareas críticas donde un error puede tener consecuencias importantes para el cliente o para la
                  empresa.
                </p>

<h2>Señal 3: El ritmo del mercado exige rapidez, flexibilidad y adaptabilidad</h2>

<p>
                  En entornos competitivos, con demandas cambiantes y clientes que exigen rapidez y servicios
                  personalizados,
                  <strong>las empresas que responden más rápido se llevan la ventaja.</strong> Automatizar permite
                  reaccionar con agilidad: generar pedidos, informes, respuestas automáticas, campañas, reservas... sin
                  depender de personas ni horas de trabajo.
                </p>

<ul>
                  <li>Respuesta inmediata a consultas de clientes (chatbots 24/7)</li>
                  <li>Procesamiento de pedidos en minutos en lugar de horas</li>
                  <li>Campañas de marketing lanzadas en tiempo real según eventos o tendencias</li>
                  <li>Adaptación rápida a cambios regulatorios o de mercado</li>
                </ul>

<h2>Señal 4: Tus costes operativos y tiempos administrativos consumen demasiado</h2>

<p>
                  Las PYMEs muchas veces gastan recursos en personal administrativo, gestión documental, controles,
                  seguimiento, comunicación manual...{" "}
                  <strong>La automatización puede reducir costes, mejorar eficiencia</strong> y permitir escalar sin
                  necesidad proporcional de equipo.
                </p>

<div className="not-prose my-6 rounded-lg bg-primary/5 p-6">
                  <h4 className="mb-3 font-semibold text-primary">Ahorro típico por automatización:</h4>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-start gap-2">
                      <span className="text-primary">•</span>
                      <span>30-50% reducción en tiempo de gestión administrativa</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary">•</span>
                      <span>60-80% menos errores en procesamiento de datos</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary">•</span>
                      <span>Escalabilidad sin aumentar costes fijos proporcionalmente</span>
                    </li>
                  </ul>
                </div>

<h2>Señal 5: Necesitas datos fiables y decisiones basadas en información real</h2>

<p>
                  Para crecer, tomar decisiones estratégicas o planificar futuro, necesitas datos: ventas, stock,
                  rotaciones, tendencias, clientes, pedidos, logística...{" "}
                  <strong>Si esa información se procesa manualmente, puede estar incompleta o desactualizada.</strong>
                </p>

<p>
                  Automatizar permite generar informes automáticos, análisis en tiempo real y datos precisos. Así podrás
                  basar tus decisiones en información real, no en intuiciones o datos parciales. Las herramientas de IA
                  y analítica son esenciales para empresas que quieren ser competitivas.
                </p>

<h2>Qué tipo de automatización puede ayudarte</h2>

<div className="not-prose grid gap-4 md:grid-cols-2">
                  <div className="rounded-lg border p-4">
                    <h4 className="mb-2 font-semibold">Automatización de procesos (RPA)</h4>
                    <p className="text-sm text-muted-foreground">
                      Tareas administrativas, procesamiento de documentos, generación de informes
                    </p>
                  </div>
                  <div className="rounded-lg border p-4">
                    <h4 className="mb-2 font-semibold">Chatbots y atención 24/7</h4>
                    <p className="text-sm text-muted-foreground">
                      Atención al cliente automatizada, respuestas instantáneas, reservas
                    </p>
                  </div>
                  <div className="rounded-lg border p-4">
                    <h4 className="mb-2 font-semibold">Marketing automation</h4>
                    <p className="text-sm text-muted-foreground">
                      Campañas segmentadas, email marketing, CRM automatizado
                    </p>
                  </div>
                  <div className="rounded-lg border p-4">
                    <h4 className="mb-2 font-semibold">Gestión inteligente</h4>
                    <p className="text-sm text-muted-foreground">
                      Stock, inventarios, pedidos, logística, trazabilidad
                    </p>
                  </div>
                </div>

<h2>Primeros pasos para cualquier PYME</h2>

<ol>
                  <li>
                    <strong>Mapeo de procesos actuales:</strong> Documenta qué haces, quién lo hace, cuánto tiempo toma
                    y cuántos errores hay.
                  </li>
                  <li>
                    <strong>Identifica cuellos de botella:</strong> Tareas repetitivas, áreas de tiempo intensivo,
                    procesos con muchos errores.
                  </li>
                  <li>
                    <strong>Prioriza qué automatizar primero:</strong> Lo que más tiempo consume, lo más crítico, lo que
                    genera errores.
                  </li>
                  <li>
                    <strong>Plan gradual:</strong> Módulo por módulo, con pruebas y ajustes antes de escalar.
                  </li>
                  <li>
                    <strong>Herramientas accesibles:</strong> RPA, IA, chatbots, CRM y automatización de marketing están
                    al alcance de PYMEs.
                  </li>
                  <li>
                    <strong>Forma al equipo:</strong> Capacita en nuevas herramientas y procesos automatizados.
                  </li>
                  <li>
                    <strong>Mide resultados:</strong> Ahorros de tiempo, reducción de errores, rapidez, eficiencia.
                  </li>
                </ol>

<h2>Por qué confiar en Saliens Automation Lab</h2>

<ul>
                  <li>
                    <strong>Conocimiento local:</strong> Entendemos las necesidades específicas de empresas en Castilla
                    y León y Valladolid.
                  </li>
                  <li>
                    <strong>Especialización en PYMEs:</strong> No vendemos soluciones genéricas, adaptamos tecnología a
                    tu realidad.
                  </li>
                  <li>
                    <strong>Acompañamiento completo:</strong> Análisis, diseño, implementación, formación y soporte
                    continuo.
                  </li>
                  <li>
                    <strong>Enfoque práctico:</strong> Resultados tangibles en semanas, no en meses.
                  </li>
                </ul>

<h2>Conclusión</h2>

<p>
                  Si en tu empresa se identifican una o más de estas señales,{" "}
                  <strong>la automatización con IA puede marcar la diferencia.</strong> No se trata de tecnología por
                  moda: se trata de eficiencia, crecimiento rentable y competitividad real en un mercado cada vez más
                  exigente.
                </p>

<div className="not-prose mt-12 rounded-lg bg-primary/5 p-8 text-center">
                  <h3 className="mb-4 text-2xl font-bold">¿Listo para empezar tu transformación digital?</h3>
                  <p className="mb-6 text-muted-foreground">
                    Solicita un diagnóstico gratuito y descubre tu potencial de automatización
                  </p>
                  <Button asChild size="lg">
                    <Link href="/#contacto">Solicitar Diagnóstico Gratuito</Link>
                  </Button>
                  <p className="mt-4 text-sm text-muted-foreground">
                    O llámanos directamente al{" "}
                    <a href="tel:615340753" className="font-semibold text-primary">
                      615 340 753
                    </a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </article>
      </main>
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true"
'use client'

import { useToast } from '@/hooks/use-toast'
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from '@/components/ui/toast'

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/pharmacy-simulator.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"

interface AutomationData {
  name: string
  implementationCost: number
  baseHours: number
}

const automationData: Record<string, AutomationData> = {
  automation1: {
    name: "Asistente Virtual para Consultas Frecuentes",
    implementationCost: 1200,
    baseHours: 1.5,
  },
  automation2: {
    name: "Sistema de Triaje Básico por Voz o Texto",
    implementationCost: 900,
    baseHours: 1.0,
  },
  automation3: {
    name: "Predictor de Demanda Inteligente",
    implementationCost: 1800,
    baseHours: 1.2,
  },
  automation4: {
    name: "Gestor Automatizado de Caducidades",
    implementationCost: 1500,
    baseHours: 0.8,
  },
  automation5: {
    name: "Asistente de Compra Automatizada",
    implementationCost: 1600,
    baseHours: 1.3,
  },
  automation6: {
    name: "Sistema de Adherencia y Recordatorio Inteligente",
    implementationCost: 1100,
    baseHours: 0.7,
  },
  automation7: {
    name: "Generador Automatizado de Contenido para Redes Sociales",
    implementationCost: 950,
    baseHours: 0.9,
  },
  automation8: {
    name: "Asistente para Gestión de Horarios y Vacaciones",
    implementationCost: 800,
    baseHours: 0.5,
  },
  automation9: {
    name: "Asistente Inteligente de Clasificación y Respuesta",
    implementationCost: 1050,
    baseHours: 1.1,
  },
  automation10: {
    name: "Sistema de Gestión Inteligente de Rutas de Reparto",
    implementationCost: 1300,
    baseHours: 0.6,
  },
}

export function PharmacySimulator() {
  const [employees, setEmployees] = useState(3)
  const [hoursOpen, setHoursOpen] = useState(12)
  const [annualRevenue, setAnnualRevenue] = useState(1000000)
  const [hourlyRate, setHourlyRate] = useState(18)
  const [selectedAutomations, setSelectedAutomations] = useState<Set<string>>(new Set())
  const [totalImplementation, setTotalImplementation] = useState(0)
  const [totalHours, setTotalHours] = useState(0)
  const [netSavings, setNetSavings] = useState(0)
  const [roi, setRoi] = useState("0")

const calculateTimeSaving = (automationId: string) => {
    const employeeFactor = employees / 3
    const hoursFactor = hoursOpen / 12
    const revenueFactor = annualRevenue / 1000000

const baseHours = automationData[automationId].baseHours
    const adjustedHours = baseHours * employeeFactor * hoursFactor * revenueFactor

return Math.max(adjustedHours, 0.1)
  }

useEffect(() => {
    let totalHoursCalc = 0
    let totalPersonnelSavings = 0
    let totalImplementationCost = 0
    let selectedCount = 0

selectedAutomations.forEach((id) => {
      const hoursPerDay = calculateTimeSaving(id)
      const hoursPerYear = hoursPerDay * 240
      totalHoursCalc += hoursPerYear

totalPersonnelSavings += hoursPerYear * hourlyRate
      totalImplementationCost += automationData[id].implementationCost
      selectedCount++
    })

const stockSavings = selectedCount * 1200
    const annualMaintenance = totalImplementationCost * 0.05
    const totalCost = totalImplementationCost + annualMaintenance

const netSavingsCalc = totalPersonnelSavings + stockSavings - totalCost
    const monthlySavings = (totalPersonnelSavings + stockSavings - annualMaintenance) / 12
    const roiMonths = monthlySavings > 0 ? (totalImplementationCost / monthlySavings).toFixed(1) : "N/A"

setTotalImplementation(totalImplementationCost)
    setTotalHours(totalHoursCalc)
    setNetSavings(netSavingsCalc)
    setRoi(roiMonths)
  }, [employees, hoursOpen, annualRevenue, hourlyRate, selectedAutomations])

const toggleAutomation = (id: string) => {
    const newSelected = new Set(selectedAutomations)
    if (newSelected.has(id)) {
      newSelected.delete(id)
    } else {
      newSelected.add(id)
    }
    setSelectedAutomations(newSelected)
  }

return (
    <Card className="sticky top-20">
      <CardContent className="p-6">
        <h3 className="mb-6 text-center text-lg font-semibold">Simulador de Ahorro para Farmacias</h3>

<div className="space-y-4">
          <div>
            <Label htmlFor="employees">Número de empleados</Label>
            <Input
              id="employees"
              type="number"
              value={employees}
              onChange={(e) => setEmployees(Number.parseInt(e.target.value) || 1)}
              min={1}
              max={20}
            />
          </div>

<div>
            <Label htmlFor="hours-open">Horas abierto al día</Label>
            <Input
              id="hours-open"
              type="number"
              value={hoursOpen}
              onChange={(e) => setHoursOpen(Number.parseInt(e.target.value) || 1)}
              min={4}
              max={24}
            />
          </div>

<div>
            <Label htmlFor="annual-revenue">Facturación anual (€)</Label>
            <Input
              id="annual-revenue"
              type="number"
              value={annualRevenue}
              onChange={(e) => setAnnualRevenue(Number.parseInt(e.target.value) || 100000)}
              min={100000}
              max={5000000}
              step={10000}
            />
          </div>

<div>
            <Label htmlFor="hourly-rate">Coste horario del personal (€/hora)</Label>
            <Input
              id="hourly-rate"
              type="number"
              value={hourlyRate}
              onChange={(e) => setHourlyRate(Number.parseFloat(e.target.value) || 10)}
              min={10}
              max={50}
            />
            <p className="mt-1 text-xs text-muted-foreground">Coste aproximado en España: 15-22 €/hora</p>
          </div>

<div className="space-y-2 border-t pt-4">
            <h4 className="font-semibold text-sm">Seleccione automatizaciones:</h4>
            {Object.entries(automationData).map(([id, data]) => (
              <Button
                key={id}
                variant={selectedAutomations.has(id) ? "default" : "outline"}
                size="sm"
                className="w-full justify-start text-left h-auto py-2"
                onClick={() => toggleAutomation(id)}
              >
                <span className="text-xs">{data.name}</span>
              </Button>
            ))}
          </div>

<div className="space-y-3 border-t pt-4">
            <div className="flex justify-between">
              <span className="text-sm font-semibold">Coste total implementación:</span>
              <span className="text-sm font-bold">{totalImplementation.toLocaleString("es-ES")} €</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm font-semibold">Horas ahorradas/año:</span>
              <span className="text-sm font-bold">{totalHours.toFixed(2)} h</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm font-semibold">Ahorro neto anual:</span>
              <span className="text-sm font-bold text-primary">{netSavings.toLocaleString("es-ES")} €</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm font-semibold">ROI:</span>
              <span className="text-sm font-bold">{roi !== "N/A" ? `${roi} meses` : "N/A"}</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/winery-simulator.tsx" isMerged="true"
"use client"

interface AutomationData {
  name: string
  implementationCost: number
  baseHours: number
  addedValueFactor: number
}

const wineryAutomationData: Record<string, AutomationData> = {
  automation1: {
    name: "Predicción de Demanda con IA",
    implementationCost: 2200,
    baseHours: 2.5,
    addedValueFactor: 1.8,
  },
  automation2: {
    name: "Asistente de Ventas con Recomendación Inteligente",
    implementationCost: 1800,
    baseHours: 1.8,
    addedValueFactor: 2.2,
  },
  automation3: {
    name: "Chatbot Multilingüe para Exportación",
    implementationCost: 1600,
    baseHours: 2.0,
    addedValueFactor: 1.5,
  },
  automation4: {
    name: "Gestor Automatizado de Pedidos",
    implementationCost: 1900,
    baseHours: 3.0,
    addedValueFactor: 1.2,
  },
  automation5: {
    name: "Sistema de Trazabilidad Blockchain",
    implementationCost: 2500,
    baseHours: 1.5,
    addedValueFactor: 2.5,
  },
  automation6: {
    name: "IA de Análisis Sensorial y Calidad",
    implementationCost: 2800,
    baseHours: 2.2,
    addedValueFactor: 2.0,
  },
  automation7: {
    name: "Asistente de Marketing y Contenido",
    implementationCost: 1400,
    baseHours: 1.8,
    addedValueFactor: 1.6,
  },
  automation8: {
    name: "Sistema de Gestión Documental con OCR",
    implementationCost: 1700,
    baseHours: 2.5,
    addedValueFactor: 1.0,
  },
}

export function WinerySimulator() {
  const [employees, setEmployees] = useState(8)
  const [production, setProduction] = useState(150000)
  const [hectares, setHectares] = useState(50)
  const [hourlyRate, setHourlyRate] = useState(22)
  const [exportPercentage, setExportPercentage] = useState(35)
  const [selectedAutomations, setSelectedAutomations] = useState<Set<string>>(new Set())
  const [totalImplementation, setTotalImplementation] = useState(0)
  const [totalHours, setTotalHours] = useState(0)
  const [netSavings, setNetSavings] = useState(0)
  const [roi, setRoi] = useState("0")

const calculateTimeSaving = (automationId: string) => {
    const employeeFactor = employees / 8
    const productionFactor = production / 150000
    const hectaresFactor = hectares / 50

const baseHours = wineryAutomationData[automationId].baseHours
    const adjustedHours = baseHours * employeeFactor * productionFactor * hectaresFactor

return Math.max(adjustedHours, 0.1)
  }

useEffect(() => {
    let totalHoursCalc = 0
    let totalPersonnelSavings = 0
    let totalImplementationCost = 0
    let totalAddedValue = 0

selectedAutomations.forEach((id) => {
      const hoursPerDay = calculateTimeSaving(id)
      const hoursPerYear = hoursPerDay * 240
      totalHoursCalc += hoursPerYear

totalPersonnelSavings += hoursPerYear * hourlyRate
      totalImplementationCost += wineryAutomationData[id].implementationCost

const exportFactor = 1 + exportPercentage / 100
      const addedValue = wineryAutomationData[id].addedValueFactor * 1000 * (production / 150000) * exportFactor
      totalAddedValue += addedValue
    })

const annualMaintenance = totalImplementationCost * 0.08
    const netSavingsCalc = totalPersonnelSavings + totalAddedValue - annualMaintenance
    const monthlySavings = netSavingsCalc / 12
    const roiMonths = monthlySavings > 0 ? (totalImplementationCost / monthlySavings).toFixed(1) : "N/A"

setTotalImplementation(totalImplementationCost)
    setTotalHours(totalHoursCalc)
    setNetSavings(netSavingsCalc)
    setRoi(roiMonths)
  }, [employees, production, hectares, hourlyRate, exportPercentage, selectedAutomations])

return (
    <Card className="sticky top-20">
      <CardContent className="p-6">
        <h3 className="mb-6 text-center text-lg font-semibold">Simulador Vitivinícola</h3>

<div className="space-y-4">
          <div>
            <Label htmlFor="employees">Personal de bodega</Label>
            <Input
              id="employees"
              type="number"
              value={employees}
              onChange={(e) => setEmployees(Number.parseInt(e.target.value) || 1)}
              min={1}
              max={100}
            />
            <p className="mt-1 text-xs text-muted-foreground">Media bodegas españolas: 5-15 empleados</p>
          </div>

<div>
            <Label htmlFor="production">Producción anual (botellas)</Label>
            <Input
              id="production"
              type="number"
              value={production}
              onChange={(e) => setProduction(Number.parseInt(e.target.value) || 10000)}
              min={10000}
              max={5000000}
              step={10000}
            />
            <p className="mt-1 text-xs text-muted-foreground">Bodega media: 50.000-300.000 botellas/año</p>
          </div>

<div>
            <Label htmlFor="hectares">Hectáreas de viñedo</Label>
            <Input
              id="hectares"
              type="number"
              value={hectares}
              onChange={(e) => setHectares(Number.parseInt(e.target.value) || 5)}
              min={5}
              max={1000}
              step={5}
            />
            <p className="mt-1 text-xs text-muted-foreground">Ribera del Duero: 30-200 hectáreas promedio</p>
          </div>

<div>
            <Label htmlFor="hourly-rate">Coste horario técnico (€/hora)</Label>
            <Input
              id="hourly-rate"
              type="number"
              value={hourlyRate}
              onChange={(e) => setHourlyRate(Number.parseFloat(e.target.value) || 15)}
              min={15}
              max={50}
            />
            <p className="mt-1 text-xs text-muted-foreground">Técnico enológico: 20-28 €/hora</p>
          </div>

<div>
            <Label htmlFor="export-percentage">% Exportación internacional</Label>
            <Input
              id="export-percentage"
              type="number"
              value={exportPercentage}
              onChange={(e) => setExportPercentage(Number.parseInt(e.target.value) || 0)}
              min={0}
              max={100}
            />
            <p className="mt-1 text-xs text-muted-foreground">Media exportación bodegas españolas: 25-40%</p>
          </div>

<div className="space-y-2 border-t pt-4">
            <h4 className="font-semibold text-sm">Seleccione automatizaciones:</h4>
            {Object.entries(wineryAutomationData).map(([id, data]) => (
              <Button
                key={id}
                variant={selectedAutomations.has(id) ? "default" : "outline"}
                size="sm"
                className="w-full justify-start text-left h-auto py-2"
                onClick={() => toggleAutomation(id)}
              >
                <span className="text-xs">{data.name}</span>
              </Button>
            ))}
          </div>

<div className="space-y-3 border-t pt-4">
            <div className="flex justify-between">
              <span className="text-sm font-semibold">Inversión total estimada:</span>
              <span className="text-sm font-bold">{Math.round(totalImplementation).toLocaleString("es-ES")} €</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm font-semibold">Horas optimizadas/año:</span>
              <span className="text-sm font-bold">{Math.round(totalHours).toLocaleString("es-ES")} h</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm font-semibold">Ahorro operativo anual:</span>
              <span className="text-sm font-bold text-primary">{Math.round(netSavings).toLocaleString("es-ES")} €</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm font-semibold">ROI:</span>
              <span className="text-sm font-bold">{roi !== "N/A" ? `${roi} meses` : "N/A"}</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/farmacias/page.tsx" isMerged="true"
import FarmaciasClientPage from "./farmacias-client-page"

export const metadata = {
  title: "Automatización para Farmacias | Saliens - Marketing Emocional",
  description:
    "Soluciones de automatización e IA para farmacias: gestión de inventarios, comunicación con pacientes y optimización de procesos.",
}

export default function FarmaciasPage() {
  return <FarmaciasClientPage />
}
[V0_FILE]typescriptreact:file="app/bodegas/page.tsx" isMerged="true"
import { BodegasClientPage } from "./bodegas-client"

export const metadata = {
  title: "Automatización para Bodegas | Saliens - Marketing Emocional",
  description:
    "Soluciones de automatización e IA para bodegas: gestión de pedidos, campañas automáticas, trazabilidad y optimización de procesos.",
}

export default function BodegasPage() {
  return <BodegasClientPage />
}
[V0_FILE]jpg:file="public/business-analysis-meeting.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/business-analysis-meeting-VjuMBsJOWKBYObs5dwUXGMyaTk1StG.jpg" isMerged="true"
[V0_FILE]jpg:file="public/technical-design-blueprint.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/technical-design-blueprint-CHgfDW2cwgdAWAPBxHNQsrRoLZKE0N.jpg" isMerged="true"
[V0_FILE]jpg:file="public/software-implementation.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/software-implementation-Knf36KXWL8IeI5W5EtkaDdHOqz7HJ8.jpg" isMerged="true"
[V0_FILE]png:file="public/customer-support-team.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/customer-support-team-XF1fNVtBJtfJqSWPTnmcm0ThRZnQYl.png" isMerged="true"
[V0_FILE]jpg:file="public/modern-tech-office-with-automation-systems.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-tech-office-with-automation-systems-aLwYVR35hKfNqrWfmlCZy1FNeSMspD.jpg" isMerged="true"
[V0_FILE]png:file="public/robotic-process-automation.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/robotic-process-automation-B1XHPV5VoiqSrQ4ua5olEXveBI8s8d.png" isMerged="true"
[V0_FILE]jpg:file="public/artificial-intelligence-brain.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/artificial-intelligence-brain-e4HI6d22LfwHgJCwlTMebvvoltbXEV.jpg" isMerged="true"
[V0_FILE]png:file="public/marketing-automation-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/marketing-automation-dashboard-B4jTWikzlIAhjmpBHyiDag0rk4H8b2.png" isMerged="true"
[V0_FILE]jpg:file="public/software-integration-network.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/software-integration-network-UROcDzk7XrDGlL9BNh2ycz3WcdYZWQ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/business-growth-charts-and-metrics-dashboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/business-growth-charts-and-metrics-dashboard-HnM9ArwETWbLFJDmlO7OxUTnEcLiPo.jpg" isMerged="true"
[V0_FILE]jpg:file="public/automated-reports-dashboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/automated-reports-dashboard-ytF2bwJFFLwVHtX1z5UOVAYeo7bh8r.jpg" isMerged="true"
[V0_FILE]jpg:file="public/document-ai-classification.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/document-ai-classification-ZzMB7rVLcTSPTMp5HA0KQSShXbcdzG.jpg" isMerged="true"
[V0_FILE]png:file="public/inventory-management-system.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/inventory-management-system-uOYPfmQbv4mnyAUukhD0dlOAPtxtox.png" isMerged="true"
[V0_FILE]png:file="public/ai-chatbot-customer-service.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ai-chatbot-customer-service-HCPO4Q9cwbWyxSLOgvxUTBVLAsd2ct.png" isMerged="true"
[V0_FILE]jpg:file="public/crm-integration-workflow.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/crm-integration-workflow-q8uLKnY6R5DMirY40beKtd3jkwnUcq.jpg" isMerged="true"
[V0_FILE]png:file="public/invoice-processing-automation.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/invoice-processing-automation-5S3QHqvfD3iHouMW4zHRKb6VV8HK4D.png" isMerged="true"
[V0_FILE]jpg:file="public/images/technology-concept-with-futuristic-element.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/technology-concept-with-futuristic-element-yPS0MYdilyVKBqQLKUQWGKv3cE8VB1.jpg" isMerged="true"
[V0_FILE]jpg:file="public/pharmacy-digital-transformation-technology.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pharmacy-digital-transformation-technology-CaATHpqbz96LICd2g0u3ehSfk0SOz8.jpg" isMerged="true"
[V0_FILE]jpg:file="public/pharmacy-automation-benefits-infographic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pharmacy-automation-benefits-infographic-4cu5mQxbCbLvUuGdOQ0IIMTGlOiWb2.jpg" isMerged="true"
[V0_FILE]jpg:file="public/winery-digital-transformation-automation-technolog.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/winery-digital-transformation-automation-technolog-yDTzYyseb9u41PYeDWH9W3nUz0eXFL.jpg" isMerged="true"
[V0_FILE]jpg:file="public/winery-automation-benefits-infographic-wine-indust.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/winery-automation-benefits-infographic-wine-indust-UGFQUYHqW8pnjJhO2vFOEJVrXBM3qN.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/blog/15-automatizaciones-ia-pymes-2025/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  Bot,
  MessageSquare,
  FileText,
  Receipt,
  Users,
  Smartphone,
  BarChart3,
  UserCheck,
  Cog,
  CheckCircle2,
  ArrowRight,
  Zap,
  TrendingUp,
  Clock,
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "15 Automatizaciones con IA para PYMEs en 2025 | Saliens Automation Lab Valladolid",
  description:
    "Descubre las 15 automatizaciones con IA más demandadas por PYMEs en Castilla y León para reducir costes, ahorrar tiempo y multiplicar la productividad en 2025.",
  keywords: [
    "automatización empresas Valladolid",
    "IA para PYMEs Castilla y León",
    "automatización procesos empresariales",
    "reducir costes empresa Valladolid",
    "inteligencia artificial PYMEs",
    "automatización marketing digital",
    "chatbot empresas Castilla León",
    "RPA Valladolid",
  ],
  openGraph: {
    title: "15 Automatizaciones con IA que Toda PYME Necesita en 2025",
    description:
      "Guía práctica para empresas de Castilla y León: ahorra tiempo, reduce costes y mejora la productividad con estas 15 automatizaciones esenciales.",
    type: "article",
  },
}

export default function Blog15AutomatizacionesPymes() {
  const automatizaciones = [
    {
      icon: Bot,
      title: "Chatbots con IA",
      description: "Respuesta instantánea 24/7, reduce hasta 70% del tiempo de atención",
      tareas: ["Preguntas frecuentes", "Consultas de precios", "Confirmación de citas", "Envío de documentación"],
    },
    {
      icon: MessageSquare,
      title: "Marketing Digital Automatizado",
      description: "Campañas, contenido y publicaciones automáticas en redes sociales",
      tareas: ["Creación de contenido", "Programación de posts", "Generación de anuncios", "Segmentación"],
    },
    {
      icon: FileText,
      title: "Presupuestos Automáticos",
      description: "Genera propuestas personalizadas y PDFs al instante",
      tareas: ["Cálculo de precios", "Propuestas personalizadas", "Envío automático"],
    },
    {
      icon: Receipt,
      title: "Facturación Inteligente",
      description: "Elimina errores y ahorra horas en tareas administrativas",
      tareas: ["Creación de facturas", "Envío automático", "Recordatorios de pago", "Registro contable"],
    },
    {
      icon: Users,
      title: "Gestión de Leads",
      description: "Captura, clasifica y responde a clientes potenciales al instante",
      tareas: ["Recepción automática", "Clasificación inteligente", "Notificaciones", "Integración CRM"],
    },
    {
      icon: Smartphone,
      title: "WhatsApp Business Automatizado",
      description: "La herramienta principal de comunicación empresarial optimizada",
      tareas: ["Respuestas rápidas", "Mensajes programados", "Confirmaciones", "Bots interactivos"],
    },
    {
      icon: BarChart3,
      title: "Informes Automáticos",
      description: "Análisis y reportes generados por IA sin esfuerzo manual",
      tareas: ["Informe de ventas", "Análisis financiero", "Métricas de marketing", "Comparativas"],
    },
    {
      icon: UserCheck,
      title: "Procesos Internos",
      description: "Optimiza la gestión de tu equipo y recursos humanos",
      tareas: ["Onboarding", "Gestión de vacaciones", "Control de tiempos", "Evaluaciones"],
    },
  ]

const sectorExamples = [
    {
      sector: "Farmacias en Castilla y León",
      automatizaciones: [
        "Reposiciones automáticas",
        "Gestión de stock",
        "Control de caducidades",
        "Pedidos automatizados",
      ],
      link: "/farmacias",
    },
    {
      sector: "Bodegas y Sector Vitivinícola",
      automatizaciones: [
        "Gestión de inventario",
        "Control de lotes",
        "Pedidos a distribuidores",
        "Reservas enoturismo",
      ],
      link: "/bodegas",
    },
  ]

return (
    <>
      <Header />
      <main className="min-h-screen bg-background">
        {/* Hero Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-primary/10 via-background to-background py-20">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-4xl">
              <div className="mb-6 flex items-center gap-4 text-sm text-muted-foreground">
                <span>PYMEs y Automatización</span>
                <span>•</span>
                <span className="flex items-center gap-1">
                  <Clock className="h-4 w-4" />
                  12 min lectura
                </span>
                <span>•</span>
                <span>10 de diciembre, 2025</span>
              </div>

<h1 className="mb-6 text-4xl font-bold text-balance md:text-5xl lg:text-6xl">
                Las 15 Automatizaciones con IA que Toda PYME Necesita en 2025 para Reducir Costes y Multiplicar la
                Productividad
              </h1>

<p className="mb-8 text-xl text-muted-foreground leading-relaxed">
                Guía práctica y aplicable para empresas de Castilla y León que buscan eficiencia inmediata, ahorro de
                tiempo y reducción de costes operativos.
              </p>

<div className="flex flex-wrap gap-2 mb-8">
                <span className="rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
                  Automatización Valladolid
                </span>
                <span className="rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
                  IA para PYMEs
                </span>
                <span className="rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
                  Castilla y León
                </span>
              </div>
            </div>
          </div>
        </section>

{/* Imagen Hero */}
        <section className="py-8 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="relative mx-auto max-w-5xl overflow-hidden rounded-xl">
              <Image
                src="/modern-tech-office-with-automation-systems.jpg"
                alt="Automatización con IA para empresas en Castilla y León"
                width={1200}
                height={600}
                className="w-full object-cover"
              />
            </div>
          </div>
        </section>

{/* Introducción */}
        <article className="py-16">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-4xl">
              <div className="prose prose-lg max-w-none mb-12">
                <h2 className="text-3xl font-bold mb-6">Introducción</h2>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  El auge de la inteligencia artificial y las automatizaciones está transformando la forma en la que
                  trabajan las empresas pequeñas y medianas en <strong>Castilla y León</strong>. En 2025, las PYMEs de{" "}
                  <strong>Valladolid</strong>, Burgos, León y Salamanca buscan principalmente formas de{" "}
                  <strong>ahorrar tiempo, reducir costes, eliminar tareas repetitivas</strong> y mejorar la atención al
                  cliente.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground mb-8">
                  Esta guía recoge las <strong>automatizaciones más demandadas por las empresas</strong> hoy en día,
                  explicadas de forma clara y aplicable para cualquier negocio de la región.
                </p>
              </div>

{/* Las 15 Automatizaciones */}
              <div className="mb-16">
                <h2 className="text-3xl font-bold mb-8 text-center">Las 15 Automatizaciones Esenciales</h2>

<div className="grid gap-6 md:grid-cols-2 mb-12">
                  {automatizaciones.map((auto, index) => (
                    <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
                      <div className="mb-4 flex items-start gap-4">
                        <div className="rounded-lg bg-primary/10 p-3">
                          <auto.icon className="h-6 w-6 text-primary" />
                        </div>
                        <div className="flex-1">
                          <h3 className="text-xl font-bold mb-2">
                            {index + 1}. {auto.title}
                          </h3>
                          <p className="text-muted-foreground mb-4">{auto.description}</p>

<div className="space-y-2">
                            <p className="text-sm font-semibold">Tareas que se automatizan:</p>
                            <ul className="space-y-1">
                              {auto.tareas.map((tarea, idx) => (
                                <li key={idx} className="flex items-start gap-2 text-sm">
                                  <CheckCircle2 className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
                                  <span>{tarea}</span>
                                </li>
                              ))}
                            </ul>
                          </div>
                        </div>
                      </div>
                    </Card>
                  ))}
                </div>
              </div>

{/* Automatizaciones Sectoriales */}
              <div className="mb-16">
                <h2 className="text-3xl font-bold mb-6">Automatizaciones Específicas por Sector en Castilla y León</h2>
                <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
                  Cada sector tiene sus propias necesidades. En <strong>Saliens Automation Lab</strong> hemos
                  desarrollado soluciones específicas para los principales sectores de la región.
                </p>

<div className="grid gap-6 md:grid-cols-2">
                  {sectorExamples.map((sector, index) => (
                    <Card key={index} className="p-6 hover:shadow-lg transition-all group">
                      <Cog className="h-10 w-10 text-primary mb-4" />
                      <h3 className="text-xl font-bold mb-4">{sector.sector}</h3>
                      <ul className="space-y-2 mb-6">
                        {sector.automatizaciones.map((auto, idx) => (
                          <li key={idx} className="flex items-start gap-2">
                            <Zap className="h-4 w-4 text-primary mt-1 flex-shrink-0" />
                            <span>{auto}</span>
                          </li>
                        ))}
                      </ul>
                      <Button
                        asChild
                        variant="outline"
                        className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors bg-transparent"
                      >
                        <Link href={sector.link}>
                          Ver soluciones completas <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                    </Card>
                  ))}
                </div>
              </div>

{/* Beneficios Cuantificables */}
              <div className="mb-16 bg-primary/5 rounded-xl p-8">
                <h2 className="text-3xl font-bold mb-6 text-center">Beneficios Reales y Cuantificables</h2>
                <div className="grid gap-6 md:grid-cols-3">
                  <div className="text-center">
                    <div className="mb-4 mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
                      <Clock className="h-8 w-8 text-primary" />
                    </div>
                    <div className="text-4xl font-bold text-primary mb-2">70%</div>
                    <p className="text-muted-foreground">Reducción de tiempo en tareas repetitivas</p>
                  </div>
                  <div className="text-center">
                    <div className="mb-4 mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
                      <TrendingUp className="h-8 w-8 text-primary" />
                    </div>
                    <div className="text-4xl font-bold text-primary mb-2">391%</div>
                    <p className="text-muted-foreground">Aumento de conversión con respuesta inmediata</p>
                  </div>
                  <div className="text-center">
                    <div className="mb-4 mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
                      <CheckCircle2 className="h-8 w-8 text-primary" />
                    </div>
                    <div className="text-4xl font-bold text-primary mb-2">95%</div>
                    <p className="text-muted-foreground">Menos errores en procesos manuales</p>
                  </div>
                </div>
              </div>

{/* Conclusión */}
              <div className="prose prose-lg max-w-none mb-12">
                <h2 className="text-3xl font-bold mb-6">Conclusión</h2>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  Las empresas en 2025 buscan hacer lo mismo con menos recursos. La{" "}
                  <strong>IA y la automatización</strong> permiten a cualquier PYME de <strong>Castilla y León</strong>{" "}
                  ahorrar tiempo, reducir errores y mejorar la experiencia del cliente.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  En <strong>Saliens Automation Lab</strong>, ayudamos a empresas de{" "}
                  <strong>Valladolid y toda la región</strong> a implementar estas soluciones de forma rápida y sin
                  necesidad de conocimientos técnicos.
                </p>
                <p className="text-lg leading-relaxed font-semibold text-primary">
                  ¿Tu empresa está lista para dar el salto? Solicita un diagnóstico gratuito y descubre cuánto puedes
                  ahorrar con la automatización.
                </p>
              </div>

{/* CTA Final */}
              <Card className="bg-gradient-to-br from-primary/10 to-primary/5 p-8 text-center">
                <h3 className="text-2xl font-bold mb-4">¿Quieres automatizar tu empresa en Castilla y León?</h3>
                <p className="text-lg text-muted-foreground mb-6">
                  Solicita una consultoría gratuita y descubre qué automatizaciones son ideales para tu negocio
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Button asChild size="lg">
                    <Link href="/#contacto">
                      Solicitar Diagnóstico Gratuito <ArrowRight className="ml-2 h-5 w-5" />
                    </Link>
                  </Button>
                  <Button asChild size="lg" variant="outline">
                    <Link href="/farmacias">Ver Soluciones para Farmacias</Link>
                  </Button>
                  <Button asChild size="lg" variant="outline">
                    <Link href="/bodegas">Ver Soluciones para Bodegas</Link>
                  </Button>
                </div>
              </Card>

{/* Artículos Relacionados */}
              <div className="mt-16">
                <h3 className="text-2xl font-bold mb-6">Artículos Relacionados</h3>
                <div className="grid gap-4 md:grid-cols-2">
                  <Card className="p-4 hover:shadow-lg transition-shadow">
                    <Link href="/blog/casos-reales-automatizacion-ia-pymes-2025" className="block">
                      <h4 className="font-bold mb-2 hover:text-primary transition-colors">
                        12 Casos Reales de Automatización en PYMEs
                      </h4>
                      <p className="text-sm text-muted-foreground">
                        Ejemplos reales de empresas que ya están automatizando
                      </p>
                    </Link>
                  </Card>
                  <Card className="p-4 hover:shadow-lg transition-shadow">
                    <Link href="/blog/guia-empezar-automatizar-empresa-2025" className="block">
                      <h4 className="font-bold mb-2 hover:text-primary transition-colors">
                        Cómo Empezar a Automatizar Paso a Paso
                      </h4>
                      <p className="text-sm text-muted-foreground">
                        Guía práctica para empresas sin conocimientos técnicos
                      </p>
                    </Link>
                  </Card>
                </div>
              </div>
            </div>
          </div>
        </article>
      </main>
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/blog/casos-reales-automatizacion-ia-pymes-2025/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  Rocket,
  Target,
  TrendingUp,
  BarChart,
  Lightbulb,
  Users,
  Building2,
  Stethoscope,
  Wine,
  ShoppingBag,
  Clock,
  ArrowRight,
  Zap,
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "12 Casos Reales de Automatización IA en PYMEs 2025 | Saliens Valladolid",
  description:
    "Descubre cómo empresas de Castilla y León están transformando sus negocios con IA: casos reales, resultados medibles y soluciones aplicables a tu PYME.",
  keywords: [
    "casos éxito automatización Valladolid",
    "ejemplos IA empresas Castilla León",
    "transformación digital PYMEs",
    "automatización empresas competitivas",
    "RPA casos reales España",
    "inteligencia artificial negocios",
    "ejemplos automatización farmacias bodegas",
  ],
  openGraph: {
    title: "12 Casos Reales de Automatización que Están Usando las Empresas Más Competitivas",
    description: "Empresas de Castilla y León que ya están obteniendo ventajas competitivas con automatización e IA",
    type: "article",
  },
}

export default function BlogCasosRealesAutomatizacion() {
  const casosReales = [
    {
      icon: Rocket,
      title: "1. Sistemas de Respuesta Inmediata",
      sector: "Todos los sectores",
      problema: "Pérdida de clientes por respuesta tardía",
      solucion:
        "IA que responde automáticamente cuando un cliente pide información, escribe por WhatsApp o completa un formulario",
      resultado: "Contestar en menos de 1 minuto aumenta la conversión un 391%",
      aplicable: ["Clínicas", "Talleres", "Asesorías", "Comercios"],
    },
    {
      icon: Target,
      title: "2. Automatización del Proceso Comercial",
      sector: "Ventas y Servicios",
      problema: "Pérdida de oportunidades de venta por mala gestión de leads",
      solucion:
        "Sistema que clasifica leads automáticamente, asigna comercial, envía email personalizado y crea tareas",
      resultado: "Aumento del 45% en conversión de leads a clientes",
      aplicable: ["Reformas", "Agencias", "Consultoría", "Inmobiliarias"],
    },
    {
      icon: BarChart,
      title: "3. Análisis de Datos Instantáneo",
      sector: "Dirección y Gestión",
      problema: "No hay tiempo para analizar ventas, rendimiento y productividad",
      solucion: "IA genera informes automáticos en PDF semanales o mensuales",
      resultado: "Ahorro de 8-10 horas mensuales en generación de reportes",
      aplicable: ["Todas las PYMEs"],
    },
    {
      icon: TrendingUp,
      title: "4. Automatización del Marketing Local",
      sector: "Marketing Digital",
      problema: "Dificultad para mejorar visibilidad en Google y captar clientes locales",
      solucion: "Generación automática de contenido SEO, publicaciones optimizadas y gestión de reseñas",
      resultado: "Mejora del 60% en posicionamiento local y aumento de reseñas positivas",
      aplicable: ["Restaurantes", "Tiendas locales", "Servicios profesionales"],
    },
    {
      icon: Lightbulb,
      title: "5. Automatización de Procesos Internos",
      sector: "Operaciones",
      problema: "Desorganización en gestión de proveedores, inventarios y documentación",
      solucion: "Control automatizado de inventarios, envío de albaranes, gestión documental con IA",
      resultado: "Reducción del 50% en errores de stock y tiempo de búsqueda de documentos",
      aplicable: ["Distribuidoras", "Almacenes", "Mayoristas"],
    },
    {
      icon: Stethoscope,
      title: "6. Automatización para Farmacias de Castilla y León",
      sector: "Sector Farmacéutico",
      problema: "Rotura de stock, caducidades, tiempo excesivo en pedidos",
      solucion: "Cálculo automático de reposiciones, alertas de caducidad, gestión de stock en tiempo real",
      resultado: "Reducción del 80% en roturas de stock y 15 horas ahorradas/mes",
      aplicable: ["Farmacias de Valladolid y provincia"],
      link: "/farmacias",
    },
    {
      icon: Wine,
      title: "7. Automatización para Bodegas",
      sector: "Sector Vitivinícola",
      problema: "Control manual de barricas, inventario complejo, gestión de pedidos ineficiente",
      solucion: "Control automatizado de lotes, inventario en tiempo real, gestión de enoturismo con chatbot",
      resultado: "Ahorro de 20 horas/mes y mejora del 35% en eficiencia de distribución",
      aplicable: ["Bodegas de Ribera del Duero, Rueda, Cigales"],
      link: "/bodegas",
    },
    {
      icon: Users,
      title: "8. Automatización Financiera",
      sector: "Administración",
      problema: "Tiempo excesivo en facturación, conciliación bancaria y recordatorios",
      solucion: "Conciliación automática, envío de facturas, recordatorios de impagos, control de presupuestos",
      resultado: "Reducción del 70% del tiempo en tareas contables",
      aplicable: ["Todas las PYMEs con facturación recurrente"],
    },
  ]

const sectoresDestacados = [
    {
      icon: Stethoscope,
      sector: "Farmacias",
      empresas: "Más de 400 farmacias en Castilla y León",
      automatizaciones: "Gestión de stock, alertas de caducidad, pedidos automáticos",
      link: "/farmacias",
    },
    {
      icon: Wine,
      sector: "Bodegas",
      empresas: "Sector vitivinícola de Ribera, Rueda y Cigales",
      automatizaciones: "Control de lotes, inventario, distribución, enoturismo",
      link: "/bodegas",
    },
    {
      icon: ShoppingBag,
      sector: "Comercio Local",
      empresas: "Tiendas y comercios de Valladolid",
      automatizaciones: "Marketing local, gestión de pedidos, atención al cliente",
    },
    {
      icon: Building2,
      sector: "Servicios Profesionales",
      empresas: "Asesorías, consultorías, despachos",
      automatizaciones: "Gestión de leads, facturación, informes automáticos",
    },
  ]

return (
    <>
      <Header />
      <main className="min-h-screen bg-background">
        {/* Hero Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-primary/10 via-background to-background py-20">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-4xl">
              <div className="mb-6 flex items-center gap-4 text-sm text-muted-foreground">
                <span>Casos de Éxito</span>
                <span>•</span>
                <span className="flex items-center gap-1">
                  <Clock className="h-4 w-4" />
                  10 min lectura
                </span>
                <span>•</span>
                <span>10 de diciembre, 2025</span>
              </div>

<h1 className="mb-6 text-4xl font-bold text-balance md:text-5xl lg:text-6xl">
                Cómo la IA Está Transformando las PYMEs: 12 Casos Reales de Automatización que Ya Están Usando las
                Empresas Más Competitivas
              </h1>

<p className="mb-8 text-xl text-muted-foreground leading-relaxed">
                Empresas de Castilla y León que están obteniendo ventajas competitivas claras aplicando IA y
                automatización en sus procesos diarios.
              </p>

<div className="flex flex-wrap gap-2 mb-8">
                <span className="rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
                  Casos Reales
                </span>
                <span className="rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
                  Resultados Medibles
                </span>
                <span className="rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
                  Castilla y León
                </span>
              </div>
            </div>
          </div>
        </section>

{/* Imagen Hero */}
        <section className="py-8 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="relative mx-auto max-w-5xl overflow-hidden rounded-xl">
              <Image
                src="/business-analysis-meeting.jpg"
                alt="Casos reales de automatización en empresas de Castilla y León"
                width={1200}
                height={600}
                className="w-full object-cover"
              />
            </div>
          </div>
        </section>

{/* Introducción */}
        <article className="py-16">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-4xl">
              <div className="prose prose-lg max-w-none mb-12">
                <h2 className="text-3xl font-bold mb-6">Introducción</h2>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  Las pequeñas y medianas empresas de <strong>Castilla y León</strong> están viviendo un momento de
                  cambio acelerado: más competencia, procesos digitalizados y clientes cada vez más exigentes.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  La <strong>IA no es el futuro: es el presente</strong>, y las PYMEs que la están aplicando ya obtienen
                  ventajas claras frente a su competencia.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground mb-8">
                  Aquí tienes los <strong>casos reales de automatización</strong> más aplicados hoy, basados en las
                  necesidades actuales de empresas de <strong>Valladolid</strong>, Burgos, León, Palencia y Salamanca.
                </p>
              </div>

{/* Casos Reales */}
              <div className="mb-16">
                <h2 className="text-3xl font-bold mb-8">Los 12 Casos Reales Más Impactantes</h2>

<div className="space-y-6">
                  {casosReales.map((caso, index) => (
                    <Card key={index} className="p-6 hover:shadow-xl transition-all">
                      <div className="flex items-start gap-4 mb-4">
                        <div className="rounded-lg bg-primary/10 p-3 flex-shrink-0">
                          <caso.icon className="h-6 w-6 text-primary" />
                        </div>
                        <div className="flex-1">
                          <h3 className="text-xl font-bold mb-2">{caso.title}</h3>
                          <p className="text-sm text-primary font-semibold mb-3">{caso.sector}</p>
                        </div>
                      </div>

<div className="grid md:grid-cols-2 gap-4 mb-4">
                        <div>
                          <p className="text-sm font-semibold mb-2 flex items-center gap-2">
                            <span className="w-2 h-2 rounded-full bg-red-500"></span>
                            Problema
                          </p>
                          <p className="text-sm text-muted-foreground">{caso.problema}</p>
                        </div>
                        <div>
                          <p className="text-sm font-semibold mb-2 flex items-center gap-2">
                            <span className="w-2 h-2 rounded-full bg-green-500"></span>
                            Solución
                          </p>
                          <p className="text-sm text-muted-foreground">{caso.solucion}</p>
                        </div>
                      </div>

<div className="bg-primary/5 rounded-lg p-4 mb-4">
                        <p className="text-sm font-semibold mb-2 flex items-center gap-2">
                          <TrendingUp className="h-4 w-4 text-primary" />
                          Resultado
                        </p>
                        <p className="text-sm font-bold text-primary">{caso.resultado}</p>
                      </div>

<div>
                        <p className="text-sm font-semibold mb-2">Aplicable a:</p>
                        <div className="flex flex-wrap gap-2">
                          {caso.aplicable.map((sector, idx) => (
                            <span key={idx} className="text-xs bg-muted px-3 py-1 rounded-full">
                              {sector}
                            </span>
                          ))}
                        </div>
                      </div>

{caso.link && (
                        <div className="mt-4 pt-4 border-t">
                          <Button asChild variant="outline" size="sm">
                            <Link href={caso.link}>
                              Ver solución completa <ArrowRight className="ml-2 h-4 w-4" />
                            </Link>
                          </Button>
                        </div>
                      )}
                    </Card>
                  ))}
                </div>
              </div>

{/* Sectores Destacados */}
              <div className="mb-16">
                <h2 className="text-3xl font-bold mb-6">Sectores con Mayor Adopción en Castilla y León</h2>
                <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
                  Estos son los sectores que están liderando la transformación digital en la región:
                </p>

<div className="grid gap-6 md:grid-cols-2">
                  {sectoresDestacados.map((sector, index) => (
                    <Card key={index} className="p-6 hover:shadow-lg transition-all group">
                      <sector.icon className="h-10 w-10 text-primary mb-4" />
                      <h3 className="text-xl font-bold mb-2">{sector.sector}</h3>
                      <p className="text-sm text-muted-foreground mb-4">{sector.empresas}</p>
                      <p className="text-sm mb-4">{sector.automatizaciones}</p>
                      {sector.link && (
                        <Button
                          asChild
                          variant="outline"
                          className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors bg-transparent"
                        >
                          <Link href={sector.link}>
                            Ver soluciones <ArrowRight className="ml-2 h-4 w-4" />
                          </Link>
                        </Button>
                      )}
                    </Card>
                  ))}
                </div>
              </div>

{/* Datos Impactantes */}
              <div className="mb-16 bg-gradient-to-br from-primary/10 to-primary/5 rounded-xl p-8">
                <h2 className="text-3xl font-bold mb-6 text-center">Datos que Demuestran el Impacto Real</h2>
                <div className="grid gap-6 md:grid-cols-3">
                  <div className="text-center">
                    <div className="text-4xl font-bold text-primary mb-2">391%</div>
                    <p className="text-muted-foreground">Aumento en conversión con respuesta inmediata</p>
                  </div>
                  <div className="text-center">
                    <div className="text-4xl font-bold text-primary mb-2">45%</div>
                    <p className="text-muted-foreground">Mejora en conversión de leads automatizados</p>
                  </div>
                  <div className="text-center">
                    <div className="text-4xl font-bold text-primary mb-2">70%</div>
                    <p className="text-muted-foreground">Reducción de tiempo en tareas administrativas</p>
                  </div>
                </div>
              </div>

{/* Conclusión */}
              <div className="prose prose-lg max-w-none mb-12">
                <h2 className="text-3xl font-bold mb-6">Conclusión</h2>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  Las empresas que automatizan viven más tranquilas, trabajan mejor y son más competitivas. La{" "}
                  <strong>IA no sustituye personas</strong>: elimina tareas inútiles y permite que tu equipo aporte más
                  valor.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  En <strong>Saliens Automation Lab</strong>, trabajamos con empresas de{" "}
                  <strong>toda Castilla y León</strong> para implementar estas soluciones de forma rápida, sin
                  complicaciones técnicas y con resultados medibles desde el primer mes.
                </p>
                <p className="text-lg leading-relaxed font-semibold text-primary">
                  ¿Quieres que tu empresa sea uno de estos casos de éxito? Solicita un diagnóstico gratuito.
                </p>
              </div>

{/* CTA Final */}
              <Card className="bg-gradient-to-br from-primary/10 to-primary/5 p-8 text-center">
                <Zap className="h-12 w-12 text-primary mx-auto mb-4" />
                <h3 className="text-2xl font-bold mb-4">Descubre el Potencial de Automatización de tu Empresa</h3>
                <p className="text-lg text-muted-foreground mb-6">
                  Análisis gratuito y personalizado para empresas de Castilla y León
                </p>
                <Button asChild size="lg">
                  <Link href="/#contacto">
                    Solicitar Diagnóstico Gratuito <ArrowRight className="ml-2 h-5 w-5" />
                  </Link>
                </Button>
              </Card>

{/* Artículos Relacionados */}
              <div className="mt-16">
                <h3 className="text-2xl font-bold mb-6">Continúa Leyendo</h3>
                <div className="grid gap-4 md:grid-cols-2">
                  <Card className="p-4 hover:shadow-lg transition-shadow">
                    <Link href="/blog/15-automatizaciones-ia-pymes-2025" className="block">
                      <h4 className="font-bold mb-2 hover:text-primary transition-colors">
                        15 Automatizaciones Esenciales para PYMEs
                      </h4>
                      <p className="text-sm text-muted-foreground">
                        La guía completa de automatizaciones que toda empresa necesita
                      </p>
                    </Link>
                  </Card>
                  <Card className="p-4 hover:shadow-lg transition-shadow">
                    <Link href="/blog/guia-empezar-automatizar-empresa-2025" className="block">
                      <h4 className="font-bold mb-2 hover:text-primary transition-colors">
                        Cómo Empezar a Automatizar Paso a Paso
                      </h4>
                      <p className="text-sm text-muted-foreground">Guía práctica sin conocimientos técnicos</p>
                    </Link>
                  </Card>
                </div>
              </div>
            </div>
          </div>
        </article>
      </main>
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/blog/guia-empezar-automatizar-empresa-2025/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  Search,
  Zap,
  Rocket,
  Target,
  LineChart,
  CheckCircle2,
  Clock,
  ArrowRight,
  Play,
  BookOpen,
  TrendingUp,
  Users,
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Guía 2025: Cómo Empezar a Automatizar tu Empresa Paso a Paso | Saliens Valladolid",
  description:
    "Tutorial completo para PYMEs de Castilla y León: aprende a automatizar tu empresa en 2025 sin ser técnico. Guía práctica paso a paso con ejemplos reales.",
  keywords: [
    "cómo automatizar empresa Valladolid",
    "guía automatización PYMEs",
    "empezar automatización sin técnico",
    "digitalizar empresa Castilla León",
    "implementar IA negocio",
    "transformación digital paso a paso",
    "automatización para no técnicos",
  ],
  openGraph: {
    title: "Guía Definitiva: Cómo Empezar a Automatizar tu Empresa en 2025",
    description: "Paso a paso para empresas de Castilla y León que quieren digitalizarse sin complicaciones técnicas",
    type: "article",
  },
}

export default function BlogGuiaEmpezarAutomatizar() {
  const pasos = [
    {
      numero: 1,
      icon: Search,
      titulo: "Analiza tu empresa (10 minutos)",
      descripcion: "Identifica las tareas repetitivas que consumen tiempo valioso",
      tareas: [
        "Responder a clientes con las mismas preguntas",
        "Enviar documentos y propuestas",
        "Crear y enviar facturas",
        "Organizar citas y recordatorios",
        "Controlar inventario y stock",
        "Buscar información en múltiples sistemas",
      ],
      accion: "Haz una lista rápida. Todo esto se puede automatizar.",
    },
    {
      numero: 2,
      icon: Zap,
      titulo: "Comienza por Automatizaciones Rápidas",
      descripcion: "Implementación en 0-2 días con impacto inmediato",
      tareas: [
        "Chatbot básico en la web",
        "Respuestas automáticas por email",
        "Mensajes automáticos en WhatsApp Business",
        "Formularios inteligentes",
        "Registro automático en CRM",
        "Generación automática de propuestas",
      ],
      accion: "Estas automatizaciones no requieren conocimientos técnicos y generan resultados desde el primer día.",
    },
    {
      numero: 3,
      icon: Rocket,
      titulo: "Automatizaciones de Impacto Medio",
      descripcion: "Ahorro de tiempo significativo (5-10 horas semanales)",
      tareas: [
        "Clasificación automática de leads por prioridad",
        "Informes automáticos semanales y mensuales",
        "Automatización de redes sociales",
        "Gestión documental con IA",
        "Recordatorios automáticos personalizados",
        "Gestión de tareas según emails entrantes",
      ],
      accion: "Aquí es donde empiezas a notar el verdadero cambio en tu día a día.",
    },
    {
      numero: 4,
      icon: Target,
      titulo: "Automatiza Áreas Estratégicas",
      descripcion: "Transformación completa de procesos clave",
      areas: [
        {
          area: "Ventas",
          automatizaciones: ["Embudos automatizados", "Seguimiento inteligente", "Recordatorios de cierre"],
        },
        {
          area: "Marketing",
          automatizaciones: ["Publicaciones programadas", "Campañas generadas por IA", "Emails segmentados"],
        },
        {
          area: "Operaciones",
          automatizaciones: ["Control de inventario", "Pedidos automáticos", "Atención a incidencias"],
        },
        {
          area: "Finanzas",
          automatizaciones: ["Facturas automáticas", "Conciliación bancaria", "Recordatorios de pago"],
        },
      ],
      accion: "Este nivel requiere planificación pero genera el mayor ROI.",
    },
    {
      numero: 5,
      icon: Users,
      titulo: "Sectorialización Específica",
      descripcion: "Automatizaciones especializadas por sector",
      sectores: [
        {
          sector: "Farmacias de Castilla y León",
          automatizaciones: [
            "Gestión de stock automática",
            "Control de caducidades",
            "Alertas inteligentes",
            "Análisis de ventas por categoría",
          ],
          link: "/farmacias",
        },
        {
          sector: "Bodegas y Sector Vitivinícola",
          automatizaciones: [
            "Control de lotes y barricas",
            "Distribución automatizada",
            "Inventario en tiempo real",
            "Gestión de visitas enoturísticas",
          ],
          link: "/bodegas",
        },
      ],
      accion: "Las automatizaciones sectoriales son las más efectivas porque resuelven problemas específicos.",
    },
    {
      numero: 6,
      icon: LineChart,
      titulo: "Evalúa tu Transformación",
      descripcion: "Mide el impacto real de la automatización",
      indicadores: [
        {
          indicador: "Tiempo Ahorrado",
          como: "Compara horas dedicadas antes y después a tareas repetitivas",
          objetivo: "Mínimo 50% de reducción en tareas administrativas",
        },
        {
          indicador: "Reducción de Errores",
          como: "Cuenta errores en facturación, pedidos e inventario",
          objetivo: "Menos del 5% de errores en procesos automatizados",
        },
        {
          indicador: "Costes Disminuidos",
          como: "Calcula ahorro en horas de trabajo y recursos",
          objetivo: "ROI positivo en menos de 6 meses",
        },
      ],
      accion: "Si no mides, no mejoras. Establece KPIs claros desde el inicio.",
    },
  ]

const automatizacionesExpress = [
    { nombre: "Chatbot web", tiempo: "2 horas", impacto: "Alto", dificultad: "Baja" },
    { nombre: "Respuestas automáticas email", tiempo: "1 hora", impacto: "Medio", dificultad: "Baja" },
    { nombre: "WhatsApp Business automatizado", tiempo: "3 horas", impacto: "Alto", dificultad: "Media" },
    { nombre: "Formularios inteligentes", tiempo: "2 horas", impacto: "Medio", dificultad: "Baja" },
    { nombre: "CRM automático", tiempo: "4 horas", impacto: "Alto", dificultad: "Media" },
    { nombre: "Generación de propuestas", tiempo: "3 horas", impacto: "Alto", dificultad: "Media" },
  ]

return (
    <>
      <Header />
      <main className="min-h-screen bg-background">
        {/* Hero Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-primary/10 via-background to-background py-20">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-4xl">
              <div className="mb-6 flex items-center gap-4 text-sm text-muted-foreground">
                <span>Guía Práctica</span>
                <span>•</span>
                <span className="flex items-center gap-1">
                  <Clock className="h-4 w-4" />
                  15 min lectura
                </span>
                <span>•</span>
                <span>10 de diciembre, 2025</span>
              </div>

<h1 className="mb-6 text-4xl font-bold text-balance md:text-5xl lg:text-6xl">
                Guía Definitiva: Cómo Empezar a Automatizar tu Empresa en 2025 Paso a Paso (Sin Ser Técnico)
              </h1>

<p className="mb-8 text-xl text-muted-foreground leading-relaxed">
                Tutorial completo para empresas de Castilla y León que quieren digitalizarse sin complicaciones
                técnicas. Desde el análisis inicial hasta la implementación completa.
              </p>

<div className="flex flex-wrap gap-2 mb-8">
                <span className="rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
                  Guía Paso a Paso
                </span>
                <span className="rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
                  Sin Conocimientos Técnicos
                </span>
                <span className="rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
                  Resultados Rápidos
                </span>
              </div>
            </div>
          </div>
        </section>

{/* Imagen Hero */}
        <section className="py-8 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="relative mx-auto max-w-5xl overflow-hidden rounded-xl">
              <Image
                src="/technical-design-blueprint.jpg"
                alt="Guía para empezar a automatizar empresas en Castilla y León"
                width={1200}
                height={600}
                className="w-full object-cover"
              />
            </div>
          </div>
        </section>

{/* Introducción */}
        <article className="py-16">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-4xl">
              <div className="prose prose-lg max-w-none mb-12">
                <h2 className="text-3xl font-bold mb-6">Introducción</h2>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  Muchas PYMEs de <strong>Castilla y León</strong> saben que necesitan automatizar, pero no saben por
                  dónde empezar. Les preocupa la complejidad técnica, el coste y si realmente funcionará para su
                  negocio.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  Esta guía está diseñada específicamente para empresas que quieren{" "}
                  <strong>digitalizarse sin complicarse</strong>. No necesitas ser experto en tecnología, solo seguir
                  estos pasos de forma ordenada.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground mb-8">
                  Si tienes una empresa en <strong>Valladolid</strong>, Burgos, León, Palencia o Salamanca, esta guía es
                  para ti.
                </p>
              </div>

{/* Los 6 Pasos */}
              <div className="mb-16">
                <h2 className="text-3xl font-bold mb-8 text-center">Los 6 Pasos para Automatizar tu Empresa</h2>

<div className="space-y-8">
                  {pasos.map((paso, index) => (
                    <Card key={index} className="p-8 hover:shadow-xl transition-all">
                      <div className="flex items-start gap-6 mb-6">
                        <div className="flex-shrink-0">
                          <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
                            <paso.icon className="h-8 w-8 text-primary" />
                          </div>
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center gap-3 mb-2">
                            <span className="text-sm font-bold text-primary">PASO {paso.numero}</span>
                          </div>
                          <h3 className="text-2xl font-bold mb-3">{paso.titulo}</h3>
                          <p className="text-muted-foreground mb-6">{paso.descripcion}</p>
                        </div>
                      </div>

{paso.tareas && (
                        <div className="mb-6">
                          <p className="font-semibold mb-3">Tareas a identificar o implementar:</p>
                          <div className="grid md:grid-cols-2 gap-3">
                            {paso.tareas.map((tarea, idx) => (
                              <div key={idx} className="flex items-start gap-2">
                                <CheckCircle2 className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                                <span className="text-sm">{tarea}</span>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}

{paso.areas && (
                        <div className="mb-6">
                          <p className="font-semibold mb-4">Áreas estratégicas a automatizar:</p>
                          <div className="grid md:grid-cols-2 gap-4">
                            {paso.areas.map((area, idx) => (
                              <div key={idx} className="bg-muted/50 rounded-lg p-4">
                                <h4 className="font-bold mb-2 text-primary">{area.area}</h4>
                                <ul className="space-y-1">
                                  {area.automatizaciones.map((auto, i) => (
                                    <li key={i} className="text-sm flex items-start gap-2">
                                      <span className="text-primary mt-1">•</span>
                                      <span>{auto}</span>
                                    </li>
                                  ))}
                                </ul>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}

{paso.sectores && (
                        <div className="mb-6">
                          <p className="font-semibold mb-4">Automatizaciones sectoriales:</p>
                          <div className="grid md:grid-cols-2 gap-4">
                            {paso.sectores.map((sector, idx) => (
                              <Card key={idx} className="p-4 bg-muted/30">
                                <h4 className="font-bold mb-3">{sector.sector}</h4>
                                <ul className="space-y-2 mb-4">
                                  {sector.automatizaciones.map((auto, i) => (
                                    <li key={i} className="text-sm flex items-start gap-2">
                                      <CheckCircle2 className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
                                      <span>{auto}</span>
                                    </li>
                                  ))}
                                </ul>
                                <Button asChild variant="outline" size="sm" className="w-full bg-transparent">
                                  <Link href={sector.link}>
                                    Ver soluciones <ArrowRight className="ml-2 h-4 w-4" />
                                  </Link>
                                </Button>
                              </Card>
                            ))}
                          </div>
                        </div>
                      )}

{paso.indicadores && (
                        <div className="mb-6">
                          <p className="font-semibold mb-4">Indicadores clave de éxito:</p>
                          <div className="space-y-4">
                            {paso.indicadores.map((indicador, idx) => (
                              <div key={idx} className="bg-primary/5 rounded-lg p-4">
                                <h4 className="font-bold mb-2 text-primary">{indicador.indicador}</h4>
                                <p className="text-sm mb-2">
                                  <strong>Cómo medirlo:</strong> {indicador.como}
                                </p>
                                <p className="text-sm">
                                  <strong>Objetivo:</strong> {indicador.objetivo}
                                </p>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}

<div className="bg-primary/5 rounded-lg p-4 border-l-4 border-primary">
                        <p className="text-sm font-semibold flex items-center gap-2">
                          <Play className="h-4 w-4 text-primary" />
                          Acción inmediata
                        </p>
                        <p className="text-sm text-muted-foreground mt-2">{paso.accion}</p>
                      </div>
                    </Card>
                  ))}
                </div>
              </div>

{/* Tabla de Automatizaciones Express */}
              <div className="mb-16">
                <h2 className="text-3xl font-bold mb-6">Automatizaciones Express: Empieza Hoy Mismo</h2>
                <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
                  Estas automatizaciones son ideales para dar los primeros pasos sin complicaciones:
                </p>

<div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b bg-muted/50">
                        <th className="p-4 text-left font-bold">Automatización</th>
                        <th className="p-4 text-left font-bold">Tiempo Implementación</th>
                        <th className="p-4 text-left font-bold">Impacto</th>
                        <th className="p-4 text-left font-bold">Dificultad</th>
                      </tr>
                    </thead>
                    <tbody>
                      {automatizacionesExpress.map((auto, index) => (
                        <tr key={index} className="border-b hover:bg-muted/30 transition-colors">
                          <td className="p-4 font-semibold">{auto.nombre}</td>
                          <td className="p-4 text-muted-foreground">{auto.tiempo}</td>
                          <td className="p-4">
                            <span
                              className={`inline-block px-3 py-1 rounded-full text-xs font-semibold ${
                                auto.impacto === "Alto"
                                  ? "bg-green-100 text-green-700"
                                  : "bg-yellow-100 text-yellow-700"
                              }`}
                            >
                              {auto.impacto}
                            </span>
                          </td>
                          <td className="p-4">
                            <span
                              className={`inline-block px-3 py-1 rounded-full text-xs font-semibold ${
                                auto.dificultad === "Baja"
                                  ? "bg-blue-100 text-blue-700"
                                  : "bg-orange-100 text-orange-700"
                              }`}
                            >
                              {auto.dificultad}
                            </span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>

{/* Por Qué Funciona */}
              <div className="mb-16 bg-gradient-to-br from-primary/10 to-primary/5 rounded-xl p-8">
                <h2 className="text-3xl font-bold mb-6">Por Qué Esta Metodología Funciona</h2>
                <div className="grid md:grid-cols-3 gap-6">
                  <div className="text-center">
                    <div className="mb-4 mx-auto w-16 h-16 rounded-full bg-background flex items-center justify-center">
                      <BookOpen className="h-8 w-8 text-primary" />
                    </div>
                    <h3 className="font-bold mb-2">Progresivo</h3>
                    <p className="text-sm text-muted-foreground">
                      Empiezas con lo simple y avanzas gradualmente sin abrumar al equipo
                    </p>
                  </div>
                  <div className="text-center">
                    <div className="mb-4 mx-auto w-16 h-16 rounded-full bg-background flex items-center justify-center">
                      <TrendingUp className="h-8 w-8 text-primary" />
                    </div>
                    <h3 className="font-bold mb-2">Resultados Rápidos</h3>
                    <p className="text-sm text-muted-foreground">
                      Ves beneficios desde las primeras automatizaciones, manteniendo la motivación
                    </p>
                  </div>
                  <div className="text-center">
                    <div className="mb-4 mx-auto w-16 h-16 rounded-full bg-background flex items-center justify-center">
                      <Target className="h-8 w-8 text-primary" />
                    </div>
                    <h3 className="font-bold mb-2">Medible</h3>
                    <p className="text-sm text-muted-foreground">
                      Cada paso tiene KPIs claros para evaluar el éxito de la implementación
                    </p>
                  </div>
                </div>
              </div>

{/* Conclusión */}
              <div className="prose prose-lg max-w-none mb-12">
                <h2 className="text-3xl font-bold mb-6">Conclusión</h2>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  Automatizar ya no es opcional: es la forma más rápida y barata de mejorar una empresa en 2025. Las
                  PYMEs de <strong>Castilla y León</strong> que están implementando estas soluciones están ganando
                  competitividad, ahorrando costes y mejorando la calidad de vida de sus equipos.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground mb-4">
                  En <strong>Saliens Automation Lab</strong>, acompañamos a empresas de{" "}
                  <strong>Valladolid y toda la región</strong> en cada paso de su transformación digital. No estás solo
                  en este proceso.
                </p>
                <p className="text-lg leading-relaxed font-semibold text-primary">
                  ¿Preparado para dar el primer paso? Solicita un diagnóstico gratuito y te mostraremos exactamente por
                  dónde empezar.
                </p>
              </div>

{/* CTA Final */}
              <Card className="bg-gradient-to-br from-primary/10 to-primary/5 p-8 text-center">
                <Rocket className="h-12 w-12 text-primary mx-auto mb-4" />
                <h3 className="text-2xl font-bold mb-4">Empieza tu Transformación Digital Hoy</h3>
                <p className="text-lg text-muted-foreground mb-6">
                  Diagnóstico gratuito y plan personalizado para tu empresa en Castilla y León
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Button asChild size="lg">
                    <Link href="/#contacto">
                      Solicitar Diagnóstico Gratuito <ArrowRight className="ml-2 h-5 w-5" />
                    </Link>
                  </Button>
                  <Button asChild size="lg" variant="outline">
                    <Link href="/farmacias">Soluciones para Farmacias</Link>
                  </Button>
                </div>
              </Card>

{/* Artículos Relacionados */}
              <div className="mt-16">
                <h3 className="text-2xl font-bold mb-6">Sigue Aprendiendo</h3>
                <div className="grid gap-4 md:grid-cols-2">
                  <Card className="p-4 hover:shadow-lg transition-shadow">
                    <Link href="/blog/15-automatizaciones-ia-pymes-2025" className="block">
                      <h4 className="font-bold mb-2 hover:text-primary transition-colors">
                        15 Automatizaciones Esenciales para PYMEs
                      </h4>
                      <p className="text-sm text-muted-foreground">Descubre qué automatizaciones implementar primero</p>
                    </Link>
                  </Card>
                  <Card className="p-4 hover:shadow-lg transition-shadow">
                    <Link href="/blog/casos-reales-automatizacion-ia-pymes-2025" className="block">
                      <h4 className="font-bold mb-2 hover:text-primary transition-colors">12 Casos Reales de Éxito</h4>
                      <p className="text-sm text-muted-foreground">Empresas que ya están automatizando con éxito</p>
                    </Link>
                  </Card>
                </div>
              </div>
            </div>
          </div>
        </article>
      </main>
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/interactive-roi-calculator.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Calculator, TrendingUp, Clock, DollarSign, Target, Sparkles } from "lucide-react"

export function InteractiveROICalculator() {
  const [employees, setEmployees] = useState(25)
  const [hoursPerWeek, setHoursPerWeek] = useState(40)
  const [annualRevenue, setAnnualRevenue] = useState(1000000)
  const [hourlyRate, setHourlyRate] = useState(28)
  const [automationLevel, setAutomationLevel] = useState(30)

// Results
  const [results, setResults] = useState({
    investment: 0,
    hoursSaved: 0,
    annualSavings: 0,
    netSavings: 0,
    roiMonths: 0,
    revenuePercentage: 0,
  })

useEffect(() => {
    calculateROI()
  }, [employees, hoursPerWeek, annualRevenue, hourlyRate, automationLevel])

const calculateROI = () => {
    // Calculate factors
    const employeeFactor = employees / 25
    const hoursFactor = hoursPerWeek / 40
    const revenueFactor = annualRevenue / 1000000
    const automationFactor = automationLevel / 100

// Base calculations
    const baseHoursPerDay = 3.5 // Average hours that can be automated per process
    const numberOfProcesses = Math.round(10 * automationFactor) // Number of processes to automate

// Investment calculation (€2,000 - €4,500 per process depending on company size)
    const costPerProcess = 2000 + revenueFactor * 1500 + employeeFactor * 500
    const totalInvestment = Math.round(costPerProcess * numberOfProcesses)

// Hours saved calculation
    const adjustedHours = baseHoursPerDay * employeeFactor * hoursFactor * revenueFactor
    const dailyHoursSaved = adjustedHours * numberOfProcesses
    const annualHoursSaved = Math.round(dailyHoursSaved * 240) // 240 working days

// Financial savings
    const personnelSavings = annualHoursSaved * hourlyRate
    const efficiencySavings = personnelSavings * 0.25 // Additional 25% from efficiency gains
    const totalAnnualSavings = Math.round(personnelSavings + efficiencySavings)

// Maintenance costs (15% annually)
    const annualMaintenance = totalInvestment * 0.15
    const netAnnualSavings = Math.round(totalAnnualSavings - annualMaintenance)

// ROI calculation
    const monthlyNetSavings = netAnnualSavings / 12
    const roiMonths = monthlyNetSavings > 0 ? totalInvestment / monthlyNetSavings : 0

// Revenue percentage
    const revenuePercentage = (netAnnualSavings / annualRevenue) * 100

setResults({
      investment: totalInvestment,
      hoursSaved: annualHoursSaved,
      annualSavings: totalAnnualSavings,
      netSavings: netAnnualSavings,
      roiMonths: Math.round(roiMonths * 10) / 10,
      revenuePercentage: Math.round(revenuePercentage * 10) / 10,
    })
  }

return (
    <div className="w-full">
      {/* Header Section */}
      <div className="mb-12 text-center">
        <div className="mb-4 flex justify-center">
          <div className="rounded-full bg-primary/10 p-4">
            <Calculator className="h-8 w-8 text-primary" />
          </div>
        </div>
        <h3 className="mb-3 text-3xl font-bold">Calcula tu Retorno de Inversión</h3>
        <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
          Descubre cuánto puede ahorrar tu empresa con automatización inteligente
        </p>
      </div>

<div className="grid gap-8 lg:grid-cols-2">
        {/* Input Section */}
        <Card className="border-2">
          <CardContent className="p-8">
            <h4 className="mb-6 text-xl font-semibold flex items-center gap-2">
              <Sparkles className="h-5 w-5 text-primary" />
              Datos de tu Empresa
            </h4>

<div className="space-y-6">
              {/* Employees */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <Label htmlFor="employees" className="text-base">
                    Número de empleados
                  </Label>
                  <span className="text-2xl font-bold text-primary">{employees}</span>
                </div>
                <Slider
                  id="employees"
                  min={1}
                  max={200}
                  step={1}
                  value={[employees]}
                  onValueChange={(value) => setEmployees(value[0])}
                  className="w-full"
                />
                <Input
                  type="number"
                  value={employees}
                  onChange={(e) => setEmployees(Number(e.target.value))}
                  min={1}
                  max={200}
                  className="text-center"
                />
              </div>

{/* Hours per week */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <Label htmlFor="hours" className="text-base">
                    Horas operativas semanales
                  </Label>
                  <span className="text-2xl font-bold text-primary">{hoursPerWeek}h</span>
                </div>
                <Slider
                  id="hours"
                  min={20}
                  max={168}
                  step={1}
                  value={[hoursPerWeek]}
                  onValueChange={(value) => setHoursPerWeek(value[0])}
                  className="w-full"
                />
                <Input
                  type="number"
                  value={hoursPerWeek}
                  onChange={(e) => setHoursPerWeek(Number(e.target.value))}
                  min={20}
                  max={168}
                  className="text-center"
                />
              </div>

{/* Annual revenue */}
              <div className="space-y-3">
                <Label htmlFor="revenue" className="text-base">
                  Facturación anual
                </Label>
                <Select value={annualRevenue.toString()} onValueChange={(value) => setAnnualRevenue(Number(value))}>
                  <SelectTrigger id="revenue">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="250000">Menos de 250.000 €</SelectItem>
                    <SelectItem value="500000">250.000 - 500.000 €</SelectItem>
                    <SelectItem value="1000000">500.000 - 1.500.000 €</SelectItem>
                    <SelectItem value="3000000">1.500.000 - 5.000.000 €</SelectItem>
                    <SelectItem value="8000000">Más de 5.000.000 €</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{/* Hourly rate */}
              <div className="space-y-3">
                <Label htmlFor="hourly-rate" className="text-base">
                  Coste horario promedio (€/h)
                </Label>
                <Input
                  id="hourly-rate"
                  type="number"
                  value={hourlyRate}
                  onChange={(e) => setHourlyRate(Number(e.target.value))}
                  min={10}
                  max={100}
                  step={0.5}
                />
                <p className="text-xs text-muted-foreground">Incluye salario + seguridad social + beneficios</p>
              </div>

{/* Automation level */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <Label htmlFor="automation" className="text-base">
                    Nivel de automatización deseado
                  </Label>
                  <span className="text-2xl font-bold text-primary">{automationLevel}%</span>
                </div>
                <Slider
                  id="automation"
                  min={10}
                  max={80}
                  step={5}
                  value={[automationLevel]}
                  onValueChange={(value) => setAutomationLevel(value[0])}
                  className="w-full"
                />
                <div className="flex justify-between text-xs text-muted-foreground">
                  <span>Básico</span>
                  <span>Intermedio</span>
                  <span>Avanzado</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Results Section */}
        <div className="space-y-6">
          {/* Investment Card */}
          <Card className="border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-background">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-2">
                <DollarSign className="h-5 w-5 text-primary" />
                <p className="text-sm font-medium text-muted-foreground">Inversión Total</p>
              </div>
              <p className="text-4xl font-bold text-primary">{results.investment.toLocaleString("es-ES")} €</p>
            </CardContent>
          </Card>

{/* Time Saved Card */}
          <Card className="border-2 border-blue-500/20 bg-gradient-to-br from-blue-500/5 to-background">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-2">
                <Clock className="h-5 w-5 text-blue-500" />
                <p className="text-sm font-medium text-muted-foreground">Horas Ahorradas/Año</p>
              </div>
              <p className="text-4xl font-bold text-blue-500">{results.hoursSaved.toLocaleString("es-ES")} h</p>
              <p className="mt-2 text-sm text-muted-foreground">
                ≈ {Math.round(results.hoursSaved / hoursPerWeek)} semanas completas
              </p>
            </CardContent>
          </Card>

{/* Annual Savings Card */}
          <Card className="border-2 border-green-500/20 bg-gradient-to-br from-green-500/5 to-background">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-2">
                <TrendingUp className="h-5 w-5 text-green-500" />
                <p className="text-sm font-medium text-muted-foreground">Ahorro Neto Anual</p>
              </div>
              <p className="text-4xl font-bold text-green-500">{results.netSavings.toLocaleString("es-ES")} €</p>
              <p className="mt-2 text-sm text-muted-foreground">
                {results.revenuePercentage}% de tu facturación recuperada
              </p>
            </CardContent>
          </Card>

{/* ROI Card */}
          <Card className="border-2 border-amber-500/20 bg-gradient-to-br from-amber-500/5 to-background">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-2">
                <Target className="h-5 w-5 text-amber-500" />
                <p className="text-sm font-medium text-muted-foreground">Retorno de Inversión</p>
              </div>
              <p className="text-4xl font-bold text-amber-500">{results.roiMonths} meses</p>
              <p className="mt-2 text-sm text-muted-foreground">
                Recuperas tu inversión en menos de {Math.ceil(results.roiMonths)} meses
              </p>
            </CardContent>
          </Card>

{/* CTA Button */}
          <Button size="lg" className="w-full" asChild>
            <a href="#contacto">Solicitar Diagnóstico Personalizado</a>
          </Button>
        </div>
      </div>

{/* Additional Info */}
      <div className="mt-12 text-center">
        <p className="text-sm text-muted-foreground">
          * Cálculos basados en datos reales de implementaciones en empresas de Castilla y León. Los resultados pueden
          variar según el sector y procesos específicos.
        </p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'

import { cn } from '@/lib/utils'

function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
  const _values = React.useMemo(
    () =>
      Array.isArray(value)
        ? value
        : Array.isArray(defaultValue)
          ? defaultValue
          : [min, max],
    [value, defaultValue, min, max],
  )

return (
    <SliderPrimitive.Root
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      className={cn(
        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
        className,
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className={
          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
        }
      >
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={
            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
          }
        />
      </SliderPrimitive.Track>
      {Array.from({ length: _values.length }, (_, index) => (
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          key={index}
          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
        />
      ))}
    </SliderPrimitive.Root>
  )
}

export { Slider }
[V0_FILE]jpg:file="public/futuristic-hand-touching-robotic-hand-in-blue-light.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/futuristic-hand-touching-robotic-hand-in-blue-light-b9cZNws59r33mz6PPx28c20WTWiFL1.jpg" isMerged="true"
[V0_FILE]png:file="public/logo-saliens.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens2-w5GSHmiBcd6fqv3yuV3laHXCWGbSo6.png" isMerged="true"
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Saliens brand colors - Orange to Purple gradient palette */
  --background: oklch(0.99 0 0);
  --foreground: #1E1D59; /* Deep blue for all text */
  --card: oklch(1 0 0);
  --card-foreground: #1E1D59;
  --popover: oklch(1 0 0);
  --popover-foreground: #1E1D59;
  --primary: oklch(0.62 0.25 42); /* Brighter warm orange - like Saliens logo */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.35 0.15 290); /* Deep purple #2D1B4E */
  --secondary-foreground: oklch(1 0 0);
  --accent: oklch(0.65 0.22 42); /* Lighter orange accent */
  --accent-foreground: oklch(1 0 0);
  --muted: oklch(0.93 0 0);
  --muted-foreground: oklch(0.52 0 0);
  --destructive: oklch(0.65 0.25 42); /* Lighter orange instead of red - consistent with Saliens brand */
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9 0 0);
  --input: oklch(0.93 0 0);
  --ring: oklch(0.62 0.25 42);
  --chart-1: oklch(0.62 0.25 42);
  --chart-2: oklch(0.35 0.15 290);
  --chart-3: oklch(0.65 0.22 42);
  --chart-4: oklch(0.28 0 0);
  --chart-5: oklch(0.75 0.1 42);
  --radius: 0.75rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: #1E1D59;
  --sidebar-primary: oklch(0.62 0.25 42);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.35 0.15 290);
  --sidebar-accent-foreground: oklch(1 0 0);
  --sidebar-border: oklch(0.9 0 0);
  --sidebar-ring: oklch(0.62 0.25 42);
}

/* Dark mode theme with Saliens colors */
.dark {
  --background: oklch(0.12 0 0);
  --foreground: #1E1D59;
  --card: oklch(0.18 0 0);
  --card-foreground: #1E1D59;
  --popover: oklch(0.18 0 0);
  --popover-foreground: #1E1D59;
  --primary: oklch(0.68 0.25 42);
  --primary-foreground: oklch(0.12 0 0);
  --secondary: oklch(0.45 0.15 290);
  --secondary-foreground: oklch(0.95 0 0);
  --muted: oklch(0.3 0 0);
  --muted-foreground: oklch(0.7 0 0);
  --accent: oklch(0.7 0.22 42);
  --accent-foreground: oklch(0.12 0 0);
  --destructive: oklch(0.7 0.25 42); /* Lighter orange instead of red for dark mode */
  --destructive-foreground: oklch(0.12 0 0);
  --border: oklch(0.25 0 0);
  --input: oklch(0.25 0 0);
  --ring: oklch(0.68 0.25 42);
  --chart-1: oklch(0.68 0.25 42);
  --chart-2: oklch(0.45 0.15 290);
  --chart-3: oklch(0.7 0.22 42);
  --chart-4: oklch(0.7 0 0);
  --chart-5: oklch(0.6 0.1 42);
  --sidebar: oklch(0.15 0 0);
  --sidebar-foreground: #1E1D59;
  --sidebar-primary: oklch(0.68 0.25 42);
  --sidebar-primary-foreground: oklch(0.12 0 0);
  --sidebar-accent: oklch(0.45 0.15 290);
  --sidebar-accent-foreground: oklch(0.95 0 0);
  --sidebar-border: oklch(0.25 0 0);
  --sidebar-ring: oklch(0.68 0.25 42);
}

@theme inline {
  --font-sans: "Inter", "Geist", "Geist Fallback", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]png:file="public/logo-saliens-horizontal.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens2-0XtfWB0bKaDtGmFsKNd7Yo04fqmSi6.png" isMerged="true"
[V0_FILE]png:file="public/logo-saliens-vertical.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens%20vertical-AFG8kWkbApEZz75LBMn9tYZ3ALpJBM.png" isMerged="true"
[V0_FILE]png:file="public/ico.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ico-MQ6nIA03xLb2vhW2J6PEn9Iy1cO646.png" isMerged="true"
[V0_FILE]png:file="public/logo-saliens-header.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens%20vertical-qxn6FUja2jXlRUw5UFf4oZXAyyhd73.png" isMerged="true"
[V0_FILE]png:file="public/logo-saliens-footer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20horizontall-MNTajwPqsrIhPJrunpDfx6xn6eAVsL.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Mail, Phone, MapPin } from "lucide-react"

export function Footer() {
  return (
    <footer className="border-t bg-muted/30">
      <div className="container mx-auto px-4 py-12">
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          {/* Logo & Description */}
          <div className="space-y-4">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20horizontall-MNTajwPqsrIhPJrunpDfx6xn6eAVsL.png"
              alt="Saliens - Marketing Emocional"
              width={240}
              height={80}
              className="h-12 w-auto"
            />
            <p className="text-sm text-muted-foreground leading-relaxed">
              Marketing emocional e Inteligencia Artificial para transformar y crecer tu negocio.
            </p>
          </div>

{/* Navigation */}
          <div>
            <h3 className="mb-4 text-sm font-semibold">Navegación</h3>
            <ul className="space-y-3 text-sm">
              <li>
                <Link href="/#servicios" className="text-muted-foreground transition-colors hover:text-primary">
                  Servicios
                </Link>
              </li>
              <li>
                <Link href="/#sectores" className="text-muted-foreground transition-colors hover:text-primary">
                  Sectores
                </Link>
              </li>
              <li>
                <Link href="/farmacias" className="text-muted-foreground transition-colors hover:text-primary">
                  Farmacias
                </Link>
              </li>
              <li>
                <Link href="/bodegas" className="text-muted-foreground transition-colors hover:text-primary">
                  Bodegas
                </Link>
              </li>
            </ul>
          </div>

{/* Contact */}
          <div>
            <h3 className="mb-4 text-sm font-semibold">Contacto</h3>
            <ul className="space-y-3 text-sm">
              <li className="flex items-center gap-2 text-muted-foreground">
                <Mail className="h-4 w-4" />
                <a href="mailto:ogcele@gmail.com" className="transition-colors hover:text-primary">
                  ogcele@gmail.com
                </a>
              </li>
              <li className="flex items-center gap-2 text-muted-foreground">
                <Phone className="h-4 w-4" />
                <a href="tel:+34615340753" className="transition-colors hover:text-primary">
                  615 340 753
                </a>
              </li>
              <li className="flex items-start gap-2 text-muted-foreground">
                <MapPin className="mt-0.5 h-4 w-4 flex-shrink-0" />
                <span>Valladolid, Castilla y León</span>
              </li>
            </ul>
          </div>

{/* Legal */}
          <div>
            <h3 className="mb-4 text-sm font-semibold">Legal</h3>
            <ul className="space-y-3 text-sm">
              <li>
                <Link href="/aviso-legal" className="text-muted-foreground transition-colors hover:text-primary">
                  Aviso Legal
                </Link>
              </li>
              <li>
                <Link href="/privacidad" className="text-muted-foreground transition-colors hover:text-primary">
                  Política de Privacidad
                </Link>
              </li>
            </ul>
          </div>
        </div>

<div className="mt-12 border-t pt-8 text-center text-sm text-muted-foreground">
          <p>
            © {new Date().getFullYear()} Saliens - Marketing Emocional. Todos los derechos reservados.
          </p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]png:file="public/logo-saliens-header-compact.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens2-UyiEYCnTLHsv3ifhp5vWnTH26fNzG4.png" isMerged="true"
[V0_FILE]png:file="public/logo-saliens-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens%20vertical-9R9stSrfuBGpL83gLKubx4hL2KjNQ4.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/farmacias/farmacias-client-page.tsx" isMerged="true"
"use client"

import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { Package, Bell, FileText, TrendingUp, MessageSquare, BarChart3, CheckCircle2, ArrowRight } from "lucide-react"
import Image from "next/image"
import { PharmacySimulator } from "@/components/pharmacy-simulator"
import { useEffect, useRef } from "react"

export default function FarmaciasClientPage() {
  const observerRef = useRef<IntersectionObserver | null>(null)

useEffect(() => {
    observerRef.current = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate-fade-in-up")
          }
        })
      },
      { threshold: 0.1 },
    )

document.querySelectorAll(".observe-animation").forEach((el) => {
      observerRef.current?.observe(el)
    })

return () => observerRef.current?.disconnect()
  }, [])

return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        {/* Hero Section */}
        <section className="relative overflow-hidden border-b">
          <div className="absolute inset-0">
            <Image
              src="/modern-pharmacy-interior-with-shelves-of-medicines.jpg"
              alt="Automatización para farmacias"
              width={1920}
              height={600}
              priority
              className="object-cover w-full h-full"
            />
            <div className="absolute inset-0 bg-gradient-to-b from-background/95 via-background/80 to-background" />
          </div>

<div className="container mx-auto px-4 relative py-20 md:py-32">
            <div className="mx-auto max-w-4xl text-center">
              <div className="mb-6 flex justify-center">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens%20vertical-9R9stSrfuBGpL83gLKubx4hL2KjNQ4.png"
                  alt="Saliens - Marketing Emocional"
                  width={300}
                  height={240}
                  priority
                  className="h-auto w-full max-w-sm opacity-95"
                />
              </div>
              <h1 className="mb-6 text-4xl font-bold tracking-tight text-balance md:text-5xl">
                Automatización para Farmacias
              </h1>
              <p className="mb-10 text-lg text-muted-foreground leading-relaxed md:text-xl">
                Productividad, precisión y mejor atención al paciente mediante automatización inteligente
              </p>
              <Button size="lg" asChild>
                <Link href="/#contacto">
                  Optimizar mi Farmacia
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </section>

{/* Description Section */}
        <section className="border-b py-20">
          <div className="container mx-auto px-4">
            <div className="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
              <div className="observe-animation opacity-0">
                <div className="relative aspect-square rounded-2xl overflow-hidden shadow-2xl">
                  <Image
                    src="/pharmacy-digital-transformation-technology.jpg"
                    alt="Transformación digital en farmacias"
                    width={600}
                    height={600}
                    className="object-cover w-full h-full"
                  />
                </div>
              </div>
              <div className="observe-animation opacity-0">
                <h2 className="mb-6 text-3xl font-bold">¿Por qué automatizar tu farmacia?</h2>
                <p className="text-lg leading-relaxed text-muted-foreground mb-6">
                  Desarrollamos automatizaciones que optimizan inventarios, digitalizan documentación, mejoran la
                  comunicación con pacientes y reducen drásticamente las tareas administrativas que consumen tiempo en
                  el día a día de tu farmacia.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground">
                  Nuestras soluciones están diseñadas específicamente para las necesidades del sector farmacéutico,
                  permitiéndote dedicar más tiempo a lo que realmente importa: el cuidado de tus pacientes.
                </p>
              </div>
            </div>
          </div>
        </section>

{/* Automations with Simulator Section */}
        <section className="border-b bg-muted/30 py-20">
          <div className="container mx-auto px-4">
            <div className="mb-12 text-center">
              <h2 className="mb-4 text-3xl font-bold text-balance md:text-4xl">Automatizaciones Propuestas</h2>
            </div>

<div className="grid gap-8 lg:grid-cols-3">
              <div className="lg:col-span-2">
                <div className="grid gap-6 md:grid-cols-2">
                  <Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <Package className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Reposición Automática</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Sistema inteligente que monitoriza el stock y genera pedidos automáticos cuando se alcanzan
                        umbrales personalizados, evitando roturas de stock.
                      </p>
                    </CardContent>
                  </Card>

<Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <Bell className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Recordatorios Automáticos</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Envío automatizado de recordatorios y avisos a pacientes sobre medicación, recogida de pedidos o
                        renovación de recetas.
                      </p>
                    </CardContent>
                  </Card>

<Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <FileText className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Clasificación de Recetas</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        IA que clasifica y organiza recetas e informes automáticamente, facilitando su búsqueda y
                        gestión posterior.
                      </p>
                    </CardContent>
                  </Card>

<Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <TrendingUp className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Marketing Hiperlocal</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Campañas automatizadas dirigidas a tu zona de influencia con promociones personalizadas y
                        comunicación relevante.
                      </p>
                    </CardContent>
                  </Card>

<Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <MessageSquare className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Chatbot Farmacéutico</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Asistente virtual que responde dudas frecuentes, consulta disponibilidad de productos y ofrece
                        información básica 24/7.
                      </p>
                    </CardContent>
                  </Card>

<Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <BarChart3 className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Informes Automáticos</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Generación automática de reportes de ventas, productos críticos, rotación de stock y análisis de
                        tendencias.
                      </p>
                    </CardContent>
                  </Card>
                </div>
              </div>

{/* Benefits Section */}
        <section className="border-b py-20">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-6xl">
              <h2 className="mb-12 text-center text-3xl font-bold text-balance md:text-4xl observe-animation opacity-0">
                Beneficios Específicos para tu Farmacia
              </h2>

<div className="grid md:grid-cols-2 gap-12 items-center">
                <div className="grid gap-6">
                  {[
                    "Reducción del tiempo dedicado a tareas administrativas",
                    "Mayor precisión en el control de inventario",
                    "Mejor comunicación con pacientes",
                    "Optimización de pedidos y reposiciones",
                    "Informes en tiempo real sin esfuerzo manual",
                    "Atención mejorada durante horas de mayor carga",
                    "Cumplimiento normativo automatizado",
                    "Más tiempo para el consejo farmacéutico",
                  ].map((benefit, index) => (
                    <div
                      key={index}
                      className="flex gap-3 observe-animation opacity-0"
                      style={{ animationDelay: `${index * 100}ms` }}
                    >
                      <CheckCircle2 className="h-6 w-6 flex-shrink-0 text-primary" />
                      <span className="text-muted-foreground">{benefit}</span>
                    </div>
                  ))}
                </div>
                <div className="observe-animation opacity-0">
                  <div className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl">
                    <Image
                      src="/pharmacy-automation-benefits-infographic.jpg"
                      alt="Beneficios de la automatización en farmacias"
                      width={800}
                      height={600}
                      className="object-cover w-full h-full"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="bg-primary py-20 text-primary-foreground">
          <div className="container mx-auto px-4 text-center">
            <h2 className="mb-4 text-3xl font-bold text-balance md:text-4xl">¿Listo para modernizar tu farmacia?</h2>
            <p className="mb-8 text-lg text-primary-foreground/90">
              Solicita un diagnóstico gratuito y descubre cómo podemos ayudarte
            </p>
            <Button size="lg" variant="secondary" asChild>
              <Link href="/#contacto">
                Solicitar Diagnóstico Gratuito
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </section>
      </main>

.animate-fade-in-up {
          animation: fadeInUp 0.8s ease-out forwards;
        }
      `}</style>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/bodegas/bodegas-client.tsx" isMerged="true"
"use client"

import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { FileText, TrendingUp, FolderOpen, BarChart3, Package, CheckCircle2, ArrowRight } from "lucide-react"
import Image from "next/image"
import { WinerySimulator } from "@/components/winery-simulator"
import { useEffect, useRef } from "react"

export function BodegasClientPage() {
  const observerRef = useRef<IntersectionObserver | null>(null)

document.querySelectorAll(".observe-animation").forEach((el) => {
      observerRef.current?.observe(el)
    })

return () => observerRef.current?.disconnect()
  }, [])

return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        {/* Hero Section */}
        <section className="relative overflow-hidden border-b">
          <div className="absolute inset-0">
            <Image
              src="/spanish-winery-with-oak-wine-barrels-in-cellar--wi.jpg"
              alt="Automatización para bodegas"
              width={1920}
              height={600}
              priority
              className="object-cover w-full h-full"
            />
            <div className="absolute inset-0 bg-gradient-to-b from-background/95 via-background/80 to-background" />
          </div>

<div className="container mx-auto px-4 relative py-20 md:py-32">
            <div className="mx-auto max-w-4xl text-center">
              <div className="mb-6 flex justify-center">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens%20vertical-9R9stSrfuBGpL83gLKubx4hL2KjNQ4.png"
                  alt="Saliens - Marketing Emocional"
                  width={300}
                  height={240}
                  priority
                  className="h-auto w-full max-w-sm opacity-95"
                />
              </div>
              <h1 className="mb-6 text-4xl font-bold tracking-tight text-balance md:text-5xl">
                Automatización para Bodegas
              </h1>
              <p className="mb-10 text-lg text-muted-foreground leading-relaxed md:text-xl">
                Bodegas más eficientes gracias a la automatización inteligente
              </p>
              <Button size="lg" asChild>
                <Link href="/#contacto">
                  Digitalizar mi Bodega
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </section>

{/* Description Section */}
        <section className="border-b py-20">
          <div className="container mx-auto px-4">
            <div className="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
              <div className="observe-animation opacity-0">
                <h2 className="mb-6 text-3xl font-bold">¿Por qué automatizar tu bodega?</h2>
                <p className="text-lg leading-relaxed text-muted-foreground mb-6">
                  Optimizamos las áreas de gestión, distribución, ventas y enoturismo mediante sistemas inteligentes que
                  conectan todas las operaciones de una bodega moderna.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground">
                  Nuestras soluciones están diseñadas para el sector vitivinícola, permitiendo una gestión más eficiente
                  de pedidos, una mejor comunicación con distribuidores y clientes, y un control total sobre la
                  trazabilidad y documentación de tus productos.
                </p>
              </div>
              <div className="observe-animation opacity-0">
                <div className="relative aspect-square rounded-2xl overflow-hidden shadow-2xl">
                  <Image
                    src="/winery-digital-transformation-automation-technolog.jpg"
                    alt="Transformación digital en bodegas"
                    width={600}
                    height={600}
                    className="object-cover w-full h-full"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

<div className="grid gap-8 lg:grid-cols-3">
              <div className="lg:col-span-2">
                <div className="grid gap-6 md:grid-cols-2">
                  <Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <FileText className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Gestión Automática de Pedidos</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Procesamiento automático de pedidos y albaranes, desde la recepción hasta la confirmación,
                        eliminando errores manuales.
                      </p>
                    </CardContent>
                  </Card>

<Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <TrendingUp className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Campañas Automatizadas</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Marketing automático segmentado para distribuidores, restaurantes y clientes finales con
                        seguimiento inteligente.
                      </p>
                    </CardContent>
                  </Card>

<Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <FolderOpen className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Organización Documental</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Sistema de clasificación y archivo automático de facturas, certificados, normativas y
                        documentación técnica.
                      </p>
                    </CardContent>
                  </Card>

<Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <BarChart3 className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Informes con IA</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Análisis automático de ventas por producto, canal y periodo con insights inteligentes y
                        predicciones de tendencias.
                      </p>
                    </CardContent>
                  </Card>

<Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <Package className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Trazabilidad Automatizada</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Seguimiento completo desde la producción hasta la entrega final con registro automático en cada
                        etapa del proceso.
                      </p>
                    </CardContent>
                  </Card>

<Card>
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                        <CheckCircle2 className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="mb-3 text-xl font-semibold">Control de Calidad</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Sistemas automatizados de verificación y cumplimiento normativo con alertas proactivas y
                        registro histórico.
                      </p>
                    </CardContent>
                  </Card>
                </div>
              </div>

<div className="grid md:grid-cols-2 gap-12 items-center">
                <div className="observe-animation opacity-0">
                  <div className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl">
                    <Image
                      src="/winery-automation-benefits-infographic-wine-indust.jpg"
                      alt="Beneficios de la automatización en bodegas"
                      width={800}
                      height={600}
                      className="object-cover w-full h-full"
                    />
                  </div>
                </div>
                <div className="grid gap-6">
                  {[
                    "Gestión eficiente de pedidos y distribución",
                    "Reducción de errores en albaranes y facturas",
                    "Comunicación automatizada con distribuidores",
                    "Trazabilidad completa de cada botella",
                    "Análisis de ventas en tiempo real",
                    "Marketing segmentado por tipo de cliente",
                    "Cumplimiento normativo automatizado",
                    "Optimización de recursos y tiempo",
                  ].map((benefit, index) => (
                    <div
                      key={index}
                      className="flex gap-3 observe-animation opacity-0"
                      style={{ animationDelay: `${index * 100}ms` }}
                    >
                      <CheckCircle2 className="h-6 w-6 flex-shrink-0 text-primary" />
                      <span className="text-muted-foreground">{benefit}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="bg-primary py-20 text-primary-foreground">
          <div className="container mx-auto px-4 text-center">
            <h2 className="mb-4 text-3xl font-bold text-balance md:text-4xl">¿Preparado para modernizar tu bodega?</h2>
            <p className="mb-8 text-lg text-primary-foreground/90">
              Descubre cómo la automatización puede transformar tu operativa
            </p>
            <Button size="lg" variant="secondary" asChild>
              <Link href="/#contacto">
                Solicitar Diagnóstico Gratuito
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </section>
      </main>

.animate-fade-in-up {
          animation: fadeInUp 0.8s ease-out forwards;
        }
      `}</style>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/chatbot.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card } from "@/components/ui/card"
import { MessageCircle, X, Send, Calendar, Clock, Mail, Phone, Building2, Briefcase } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

type Message = {
  id: string
  text: string
  isBot: boolean
  timestamp: Date
  options?: string[]
}

type FormData = {
  nombre: string
  email: string
  telefono: string
  empresa: string
  sector: string
  motivo: string
  fecha: string
  hora: string
  consentimiento: boolean
}

export function Chatbot() {
  const [isOpen, setIsOpen] = useState(false)
  const [messages, setMessages] = useState<Message[]>([])
  const [inputValue, setInputValue] = useState("")
  const [step, setStep] = useState<"welcome" | "form" | "chat">("welcome")
  const [formData, setFormData] = useState<FormData>({
    nombre: "",
    email: "",
    telefono: "",
    empresa: "",
    sector: "",
    motivo: "",
    fecha: "",
    hora: "",
    consentimiento: false,
  })
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const { toast } = useToast()

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

useEffect(() => {
    if (isOpen && messages.length === 0) {
      addBotMessage("Hola, soy el asistente de Saliens. ¿En qué puedo ayudarte hoy?", [
        "Reservar una llamada",
        "Información sobre farmacias",
        "Información sobre bodegas",
        "Hablar con un experto",
      ])
    }
  }, [isOpen])

const addBotMessage = (text: string, options?: string[]) => {
    const newMessage: Message = {
      id: Date.now().toString(),
      text,
      isBot: true,
      timestamp: new Date(),
      options,
    }
    setMessages((prev) => [...prev, newMessage])
  }

const addUserMessage = (text: string) => {
    const newMessage: Message = {
      id: Date.now().toString(),
      text,
      isBot: false,
      timestamp: new Date(),
    }
    setMessages((prev) => [...prev, newMessage])
  }

const handleOptionClick = (option: string) => {
    addUserMessage(option)

setTimeout(() => {
      if (option === "Reservar una llamada") {
        setStep("form")
        addBotMessage(
          "Perfecto, voy a ayudarte a reservar una llamada con nuestro equipo. Por favor, completa el siguiente formulario:",
        )
      } else if (option === "Información sobre farmacias") {
        addBotMessage(
          "Ofrecemos soluciones de automatización especializadas para farmacias: gestión de stock, recordatorios automáticos, chatbots de atención 24/7 y más. ¿Te gustaría reservar una consultoría gratuita?",
          ["Sí, reservar llamada", "Más información", "Volver al inicio"],
        )
      } else if (option === "Información sobre bodegas") {
        addBotMessage(
          "Transformamos bodegas con viticultura de precisión, monitorización automática de fermentaciones, gestión inteligente de inventario y optimización de ventas. ¿Quieres que analicemos tu bodega?",
          ["Sí, reservar llamada", "Más información", "Volver al inicio"],
        )
      } else if (option === "Hablar con un experto") {
        setStep("form")
        addBotMessage("Te pongo en contacto con un experto de inmediato. Completa estos datos y te llamaremos:")
      } else if (option === "Sí, reservar llamada") {
        setStep("form")
        addBotMessage("Estupendo, completa el formulario y te contactaremos pronto:")
      } else if (option === "Más información") {
        addBotMessage(
          "Puedes encontrar más detalles en nuestra web. ¿Prefieres que te enviemos información por email o que te llamemos directamente?",
          ["Enviar información por email", "Reservar llamada", "Volver al inicio"],
        )
      } else if (option === "Volver al inicio") {
        addBotMessage("¿En qué más puedo ayudarte?", [
          "Reservar una llamada",
          "Información sobre farmacias",
          "Información sobre bodegas",
          "Hablar con un experto",
        ])
      } else if (option === "Enviar información por email") {
        setStep("form")
        addBotMessage("Deja tu email y te enviaremos toda la información:")
      }
    }, 800)
  }

const handleSubmitForm = async (e: React.FormEvent) => {
    e.preventDefault()

if (!formData.consentimiento) {
      toast({
        title: "Consentimiento requerido",
        description: "Debes aceptar la política de privacidad para continuar",
        variant: "destructive",
      })
      return
    }

console.log("[v0] Form data submitted:", formData)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000))

toast({
      title: "¡Reserva confirmada!",
      description: `Gracias ${formData.nombre}, te contactaremos el ${formData.fecha} a las ${formData.hora}`,
    })

setStep("chat")
    addBotMessage(
      `¡Perfecto, ${formData.nombre}! Tu llamada ha sido reservada para el ${formData.fecha} a las ${formData.hora}. Te hemos enviado una confirmación a ${formData.email}. ¿Hay algo más en lo que pueda ayudarte?`,
      ["No, gracias", "Sí, tengo otra consulta"],
    )

// Reset form
    setFormData({
      nombre: "",
      email: "",
      telefono: "",
      empresa: "",
      sector: "",
      motivo: "",
      fecha: "",
      hora: "",
      consentimiento: false,
    })
  }

const handleSendMessage = () => {
    if (!inputValue.trim()) return

const userMessage = inputValue
    addUserMessage(userMessage)
    setInputValue("")

// Simple bot responses
    setTimeout(() => {
      if (userMessage.toLowerCase().includes("precio") || userMessage.toLowerCase().includes("coste")) {
        addBotMessage(
          "Los precios varían según las necesidades de cada empresa. Te recomiendo reservar una consultoría gratuita donde analizaremos tu caso específico. ¿Te parece bien?",
          ["Sí, reservar llamada", "Más información", "Volver al inicio"],
        )
      } else if (userMessage.toLowerCase().includes("urgente") || userMessage.toLowerCase().includes("humano")) {
        addBotMessage(
          "Entiendo que necesitas atención urgente. Puedes llamarnos directamente al 615 340 753 o déjanos tus datos y te contactamos de inmediato.",
          ["Reservar llamada urgente", "Llamar ahora"],
        )
      } else {
        addBotMessage(
          "Gracias por tu mensaje. ¿Te gustaría reservar una llamada con nuestro equipo para discutir esto en detalle?",
          ["Sí, reservar llamada", "No, gracias", "Volver al inicio"],
        )
      }
    }, 1000)
  }

return (
    <>
      {/* Chatbot Button */}
      <Button
        size="lg"
        className="fixed bottom-6 right-6 z-50 h-14 w-14 rounded-full shadow-lg transition-transform hover:scale-110"
        onClick={() => setIsOpen(!isOpen)}
      >
        {isOpen ? <X className="h-6 w-6" /> : <MessageCircle className="h-6 w-6" />}
      </Button>

{/* Chatbot Window */}
      {isOpen && (
        <Card className="fixed bottom-24 right-6 z-50 flex h-[600px] w-[400px] max-w-[calc(100vw-3rem)] flex-col shadow-2xl">
          {/* Header */}
          <div className="flex items-center justify-between border-b bg-primary p-4 text-primary-foreground">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary-foreground/20">
                <MessageCircle className="h-5 w-5" />
              </div>
              <div>
                <h3 className="font-semibold">Asistente Saliens</h3>
                <p className="text-xs opacity-90">Online - Respondemos al instante</p>
              </div>
            </div>
            <Button
              size="icon"
              variant="ghost"
              className="text-primary-foreground hover:bg-primary-foreground/20"
              onClick={() => setIsOpen(false)}
            >
              <X className="h-5 w-5" />
            </Button>
          </div>

{/* Messages Area */}
          {step === "chat" || step === "welcome" ? (
            <>
              <div className="flex-1 space-y-4 overflow-y-auto p-4">
                {messages.map((message) => (
                  <div key={message.id} className={`flex ${message.isBot ? "justify-start" : "justify-end"}`}>
                    <div
                      className={`max-w-[80%] rounded-lg p-3 ${
                        message.isBot ? "bg-muted text-foreground" : "bg-primary text-primary-foreground"
                      }`}
                    >
                      <p className="text-sm">{message.text}</p>
                      {message.options && (
                        <div className="mt-3 flex flex-col gap-2">
                          {message.options.map((option, index) => (
                            <Button
                              key={index}
                              size="sm"
                              variant="outline"
                              className="justify-start text-left bg-transparent"
                              onClick={() => handleOptionClick(option)}
                            >
                              {option}
                            </Button>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                ))}
                <div ref={messagesEndRef} />
              </div>

{/* Input Area */}
              <div className="border-t p-4">
                <div className="flex gap-2">
                  <Input
                    placeholder="Escribe tu mensaje..."
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
                  />
                  <Button size="icon" onClick={handleSendMessage}>
                    <Send className="h-4 w-4" />
                  </Button>
                </div>
                <p className="mt-2 text-center text-xs text-muted-foreground">
                  o llámanos al{" "}
                  <a href="tel:615340753" className="font-semibold text-primary">
                    615 340 753
                  </a>
                </p>
              </div>
            </>
          ) : (
            // Form Area
            <form onSubmit={handleSubmitForm} className="flex-1 overflow-y-auto p-4">
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="chat-nombre" className="flex items-center gap-2">
                    <Mail className="h-4 w-4" />
                    Nombre *
                  </Label>
                  <Input
                    id="chat-nombre"
                    required
                    value={formData.nombre}
                    onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
                    placeholder="Tu nombre completo"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="chat-email" className="flex items-center gap-2">
                    <Mail className="h-4 w-4" />
                    Email *
                  </Label>
                  <Input
                    id="chat-email"
                    type="email"
                    required
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    placeholder="tu@email.com"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="chat-telefono" className="flex items-center gap-2">
                    <Phone className="h-4 w-4" />
                    Teléfono *
                  </Label>
                  <Input
                    id="chat-telefono"
                    type="tel"
                    required
                    value={formData.telefono}
                    onChange={(e) => setFormData({ ...formData, telefono: e.target.value })}
                    placeholder="615 340 753"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="chat-empresa" className="flex items-center gap-2">
                    <Building2 className="h-4 w-4" />
                    Empresa
                  </Label>
                  <Input
                    id="chat-empresa"
                    value={formData.empresa}
                    onChange={(e) => setFormData({ ...formData, empresa: e.target.value })}
                    placeholder="Nombre de tu empresa"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="chat-sector" className="flex items-center gap-2">
                    <Briefcase className="h-4 w-4" />
                    Sector *
                  </Label>
                  <select
                    id="chat-sector"
                    required
                    value={formData.sector}
                    onChange={(e) => setFormData({ ...formData, sector: e.target.value })}
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                  >
                    <option value="">Selecciona...</option>
                    <option value="Farmacia">Farmacia</option>
                    <option value="Bodega">Bodega</option>
                    <option value="Comercio">Comercio</option>
                    <option value="Servicios">Servicios</option>
                    <option value="Otro">Otro</option>
                  </select>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="chat-fecha" className="flex items-center gap-2">
                      <Calendar className="h-4 w-4" />
                      Fecha *
                    </Label>
                    <Input
                      id="chat-fecha"
                      type="date"
                      required
                      value={formData.fecha}
                      onChange={(e) => setFormData({ ...formData, fecha: e.target.value })}
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="chat-hora" className="flex items-center gap-2">
                      <Clock className="h-4 w-4" />
                      Hora *
                    </Label>
                    <Input
                      id="chat-hora"
                      type="time"
                      required
                      value={formData.hora}
                      onChange={(e) => setFormData({ ...formData, hora: e.target.value })}
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="chat-motivo">Motivo *</Label>
                  <Textarea
                    id="chat-motivo"
                    required
                    value={formData.motivo}
                    onChange={(e) => setFormData({ ...formData, motivo: e.target.value })}
                    placeholder="¿Qué procesos quieres automatizar?"
                    rows={3}
                  />
                </div>

<div className="flex items-start gap-2">
                  <input
                    type="checkbox"
                    id="chat-consent"
                    checked={formData.consentimiento}
                    onChange={(e) => setFormData({ ...formData, consentimiento: e.target.checked })}
                    className="mt-1"
                  />
                  <Label htmlFor="chat-consent" className="text-xs leading-tight">
                    Acepto que Saliens trate mis datos para gestionar esta solicitud. Email:{" "}
                    <a href="mailto:ogcele@gmail.com" className="text-primary underline">
                      ogcele@gmail.com
                    </a>
                  </Label>
                </div>

<Button type="submit" className="w-full">
                  <Send className="mr-2 h-4 w-4" />
                  Reservar Llamada
                </Button>

<Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="w-full"
                  onClick={() => {
                    setStep("chat")
                    addBotMessage("¿Hay algo más en lo que pueda ayudarte?", [
                      "Información sobre farmacias",
                      "Información sobre bodegas",
                      "Volver al inicio",
                    ])
                  }}
                >
                  Cancelar
                </Button>
              </div>
            </form>
          )}
        </Card>
      )}
    </>
  )
}
[V0_FILE]jpg:file="public/saliens-hero-bg.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/human-fetus-prenatal-development-stage-womb-HUFhxfM7Jyos8DbJ4ZyOGr4jBc59jS.jpg" isMerged="true"
[V0_FILE]plaintext:file="public/robots.txt" isMerged="true"
User-agent: *
Allow: /
Disallow: /admin
Disallow: /_next

Sitemap: https://saliens.app/sitemap.xml

# AI Crawlers optimization
User-agent: GPTBot
Allow: /

User-agent: CCBot
Allow: /

User-agent: anthropic-ai
Allow: /
[V0_FILE]xml:file="public/sitemap.xml" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://saliens.app</loc>
    <lastmod>2026-02-26</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://saliens.app/saliens</loc>
    <lastmod>2026-02-26</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://saliens.app/farmacias</loc>
    <lastmod>2026-02-26</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://saliens.app/bodegas</loc>
    <lastmod>2026-02-26</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://saliens.app/blog</loc>
    <lastmod>2026-02-26</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.7</priority>
  </url>
</urlset>
[V0_FILE]typescriptreact:file="app/saliens/page.tsx" isMerged="true"
import type { Metadata } from "next"
import Image from "next/image"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { Brain, Sparkles, Zap, Target, Heart, ArrowRight } from "lucide-react"

export const metadata: Metadata = {
  title: "¿Qué es Saliens? Automatización IA + Saliencia Cognitiva",
  description:
    "Saliens es la plataforma de IA que automatiza tu negocio usando saliencia neurocognitiva. Gestión de citas, WhatsApp IA, asistentes de voz. Crece 3-5x en 6 meses. Para dentistas, abogados, autónomos.",
  keywords: [
    "automatización IA",
    "saliencia cognitiva",
    "asistente voz",
    "gestión citas",
    "pymes",
  ],
}

export default function SaliensPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        {/* Hero Section */}
        <section className="relative overflow-hidden flex items-center justify-center pt-0" style={{ minHeight: "80vh", backgroundImage: "url('/saliens-hero-bg.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}>
          {/* Overlay */}
          <div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/50 to-background/60" />
          
          <div className="container mx-auto px-4 text-center py-20 relative z-10">
            <div className="max-w-4xl mx-auto">
              <div className="mb-8 flex justify-center">
                <Image 
                  src="/logo-saliens.png" 
                  alt="Saliens Logo" 
                  width={100} 
                  height={100}
                  className="drop-shadow-lg"
                />
              </div>
              
              <div className="mb-8 inline-flex items-center gap-3 px-4 py-2 bg-primary/20 rounded-full border border-primary/40">
                <Brain className="h-5 w-5 text-primary" />
                <span className="text-sm font-semibold text-primary">La Ciencia del Marketing Emocional</span>
              </div>

<h1 className="mb-6 text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-balance bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent">
                Saliens: Donde la IA Entiende la Saliencia
              </h1>

<p className="mb-8 text-xl text-background/90 leading-relaxed max-w-3xl mx-auto">
                Tu negocio está ahogado en ruido. En un mar de 10,000 impactos diarios, solo uno llama la atención de tus clientes. Ese es el poder de la <span className="font-bold">saliencia</span>. En Saliens, combinamos neurociencia con inteligencia artificial para que tu negocio sea el que siempre destaca.
              </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button asChild size="lg" className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 px-8 h-14 text-lg shadow-lg">
                  <Link href="/#contacto">
                    Descubre Cómo
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Link>
                </Button>
                <Button asChild size="lg" variant="outline" className="border-2 border-background/50 text-background hover:bg-background/10 px-8 h-14 text-lg">
                  <Link href="/#contacto">Consulta Gratuita</Link>
                </Button>
              </div>
            </div>
          </div>
        </section>

{/* ¿Qué es Saliens? */}
        <section className="py-20 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-16">
                <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">¿Qué es Saliens?</h2>
                <p className="text-xl text-foreground/70">Una revolución en cómo los autónomos y pequeñas empresas compiten en el mercado digital</p>
              </div>

<div className="grid md:grid-cols-2 gap-8 items-center">
                <div className="space-y-4">
                  <h3 className="text-3xl font-bold text-foreground mb-4">El Origen del Nombre</h3>
                  <p className="text-lg text-foreground/80 leading-relaxed">
                    <span className="font-bold text-primary">Saliens</span> viene del latín "saliere" que significa "destacar" o "sobresalir". Es la <span className="font-bold">saliencia neurocognitiva</span> —ese proceso donde tu cerebro filtra miles de estímulos para enfocarse en lo que realmente importa.
                  </p>
                  <p className="text-lg text-foreground/80 leading-relaxed">
                    ¿Por qué tu cliente ignora 9,999 anuncios pero se detiene ante el tuyo? Eso es saliencia. Y nosotros hemos aprendido a crearla con IA.
                  </p>
                </div>

<div className="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 border border-primary/20">
                  <Brain className="w-32 h-32 text-primary mx-auto mb-4" />
                  <p className="text-center text-foreground/70 text-sm">
                    La IA que entiende cómo tu cliente REALMENTE piensa y siente
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Soluciones Saliens */}
        <section className="py-20 bg-gradient-to-b from-primary/5 to-background">
          <div className="container mx-auto px-4">
            <div className="max-w-5xl mx-auto">
              <div className="text-center mb-16">
                <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">Soluciones Saliens</h2>
                <p className="text-xl text-foreground/70">Micro-apps de IA para resolver los problemas del día a día</p>
              </div>

<div className="grid md:grid-cols-2 gap-8">
                <Card className="border-primary/20 hover:shadow-lg transition-all">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-3 text-xl">
                      <Heart className="h-6 w-6 text-primary" />
                      Agentes de Voz IA
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="text-foreground/80">
                    <p>Asistentes que entienden contexto emocional y cierran citas en tiempo real. Sin "pulse 1".</p>
                  </CardContent>
                </Card>

<Card className="border-primary/20 hover:shadow-lg transition-all">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-3 text-xl">
                      <Target className="h-6 w-6 text-primary" />
                      Gestión de Reservas
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="text-foreground/80">
                    <p>Automatiza tu calendario y asegura asistencia. Tu IA trabaja 24/7.</p>
                  </CardContent>
                </Card>

<Card className="border-primary/20 hover:shadow-lg transition-all">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-3 text-xl">
                      <Sparkles className="h-6 w-6 text-primary" />
                      WhatsApp IA
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="text-foreground/80">
                    <p>Responde con la "chispa adecuada", resuelve dudas y convierte consultas en ventas.</p>
                  </CardContent>
                </Card>

<Card className="border-primary/20 hover:shadow-lg transition-all">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-3 text-xl">
                      <Zap className="h-6 w-6 text-primary" />
                      Gestión Administrativa
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="text-foreground/80">
                    <p>Elimina el trabajo tedioso. Facturación, procesos, automatización total.</p>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

{/* Crecimiento */}
        <section className="py-20 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-16">
                <h2 className="text-4xl md:text-5xl font-bold text-foreground">Cómo Saliens Hace Crecer tu Negocio</h2>
              </div>

<div className="grid md:grid-cols-3 gap-6 mb-12">
                <div className="p-6 bg-gradient-to-br from-primary/10 to-transparent rounded-xl border border-primary/20 text-center">
                  <div className="text-4xl font-bold text-primary mb-3">1️⃣</div>
                  <h3 className="font-bold text-foreground mb-2">Saliencia Emocional</h3>
                  <p className="text-sm text-foreground/70">Creamos momentos que tus clientes recuerdan y sienten.</p>
                </div>

<div className="p-6 bg-gradient-to-br from-primary/10 to-transparent rounded-xl border border-primary/20 text-center">
                  <div className="text-4xl font-bold text-primary mb-3">2️⃣</div>
                  <h3 className="font-bold text-foreground mb-2">Automatización 24/7</h3>
                  <p className="text-sm text-foreground/70">Tu IA trabaja mientras tú duermes. Citas, ventas, facturas.</p>
                </div>

<div className="p-6 bg-gradient-to-br from-primary/10 to-transparent rounded-xl border border-primary/20 text-center">
                  <div className="text-4xl font-bold text-primary mb-3">3️⃣</div>
                  <h3 className="font-bold text-foreground mb-2">Liberación de Tiempo</h3>
                  <p className="text-sm text-foreground/70">Recuperas 10+ horas semanales. Tiempo para crear.</p>
                </div>
              </div>

<div className="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl p-8 border border-primary/30 text-center">
                <p className="text-xl text-foreground">
                  <span className="font-bold text-primary">Resultado:</span> PyMEs que crecen 3-5x en 6 meses. Autónomos que duplican ingresos.
                </p>
              </div>
            </div>
          </div>
        </section>

{/* Evidencia de Saliencia - Casos de Éxito */}
        <section className="py-20 bg-gradient-to-b from-primary/5 to-background">
          <div className="container mx-auto px-4">
            <div className="max-w-5xl mx-auto">
              <div className="text-center mb-16">
                <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
                  Evidencia de Saliencia: Resultados Reales
                </h2>
                <p className="text-xl text-foreground/70">
                  Datos mesurables que demuestran cómo la saliencia transforma negocios
                </p>
              </div>

<div className="grid md:grid-cols-3 gap-6 mb-12">
                <div className="p-6 bg-gradient-to-br from-secondary/20 to-transparent rounded-xl border border-secondary/40">
                  <div className="text-5xl font-bold text-secondary mb-2">-40%</div>
                  <h3 className="font-bold text-foreground mb-2">Cancelaciones de Citas</h3>
                  <p className="text-sm text-foreground/70">
                    Reducción en no-shows tras implementar asistentes de voz con saliencia emocional. Los clientes sienten la llamada, no la ignoran.
                  </p>
                </div>

<div className="p-6 bg-gradient-to-br from-primary/20 to-transparent rounded-xl border border-primary/40">
                  <div className="text-5xl font-bold text-primary mb-2">3.5x</div>
                  <h3 className="font-bold text-foreground mb-2">Crecimiento Promedio</h3>
                  <p className="text-sm text-foreground/70">
                    Multiplicador de ingresos en 6 meses. PyMEs que pasan de micro a medianas empresas usando Saliens.
                  </p>
                </div>

<div className="p-6 bg-gradient-to-br from-accent/20 to-transparent rounded-xl border border-accent/40">
                  <div className="text-5xl font-bold text-accent mb-2">15h</div>
                  <h3 className="font-bold text-foreground mb-2">Liberadas por Semana</h3>
                  <p className="text-sm text-foreground/70">
                    Tiempo administrativo recuperado. Autónomos se enfocaron en ventas, no en gestión. Resultado: ingresos aumentan.
                  </p>
                </div>
              </div>

<div className="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl p-8 border border-primary/30 mb-12">
                <h3 className="text-2xl font-bold text-foreground mb-4">¿Por qué funciona?</h3>
                <div className="grid md:grid-cols-2 gap-6 text-foreground/80">
                  <div>
                    <p className="font-semibold text-primary mb-2">→ Saliencia Cognitiva</p>
                    <p>
                      Porque tu cerebro procesa 10,000 estímulos por segundo pero solo atiende 7. Saliens hace que tu negocio sea UNO de esos 7.
                    </p>
                  </div>
                  <div>
                    <p className="font-semibold text-primary mb-2">→ Automatización Inteligente</p>
                    <p>
                      Tu IA trabaja 24/7 creando esos momentos de saliencia. Mientras tú duermes, ella cierra citas y convierte leads en clientes.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

{/* CTA Final */}
        <section className="py-16 bg-gradient-to-r from-primary/15 to-secondary/15">
          <div className="container mx-auto px-4 text-center">
            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
              ¿Listo para Destacar?
            </h2>
            <p className="text-xl text-foreground/80 mb-8 max-w-2xl mx-auto">
              Saliens es tu compañero en el crecimiento. Juntos creamos la saliencia que tu negocio necesita.
            </p>
            <Button asChild size="lg" className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 px-8 h-14 text-lg">
              <Link href="/#contacto">
                Consulta Gratuita
                <ArrowRight className="ml-2 h-5 w-5" />
              </Link>
            </Button>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]jpg:file="public/blog-hero-bg.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/human-fetus-prenatal-development-stage-womb-O34aqJgsMclSSeVVD0sadHKcedvQes.jpg" isMerged="true"
[V0_FILE]jpg:file="public/saliens-energy-mind.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/saliens%20blog-qKf9xpBM7CM7HiEqWIrGopRBiMjX9j.jpg" isMerged="true"
[V0_FILE]jpg:file="public/saliens-expert-call.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/saliens%20blog-BrXse7ZwqKgRGFbJLm9g1iM8e2CcqH.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Clock, ArrowRight } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default function BlogPage() {
  const blogPosts = [
    {
      slug: "15-automatizaciones-ia-pymes-2025",
      title: "Las 15 Automatizaciones con IA que Toda PYME Necesita en 2025",
      excerpt:
        "Guía completa de las automatizaciones más demandadas por empresas de Castilla y León para reducir costes y multiplicar la productividad.",
      image: "/modern-tech-office-with-automation-systems.jpg",
      date: "10 de diciembre, 2025",
      readTime: "12 min lectura",
      category: "Automatización",
    },
    {
      slug: "casos-reales-automatizacion-ia-pymes-2025",
      title: "12 Casos Reales de Automatización que Están Usando Empresas Competitivas",
      excerpt:
        "Descubre cómo empresas de la región están transformando sus negocios con IA y automatización: resultados reales y medibles.",
      image: "/business-analysis-meeting.jpg",
      date: "10 de diciembre, 2025",
      readTime: "10 min lectura",
      category: "Casos de Éxito",
    },
    {
      slug: "guia-empezar-automatizar-empresa-2025",
      title: "Guía Definitiva: Cómo Empezar a Automatizar tu Empresa Paso a Paso",
      excerpt:
        "Tutorial completo para PYMEs que quieren digitalizarse sin ser expertos en tecnología. Paso a paso desde el análisis hasta la implementación.",
      image: "/technical-design-blueprint.jpg",
      date: "10 de diciembre, 2025",
      readTime: "15 min lectura",
      category: "Guía Práctica",
    },
    {
      slug: "automatizacion-farmacias-castilla-leon",
      title: "Cómo la automatización con IA transforma las farmacias en Castilla y León (2025)",
      excerpt:
        "Descubre cómo la Inteligencia Artificial puede revolucionar la gestión de tu farmacia, ahorrando tiempo y mejorando la atención al cliente.",
      image: "/modern-pharmacy-interior-with-digital-displays-and.jpg",
      date: "5 de diciembre, 2025",
      readTime: "8 min lectura",
      category: "Farmacias",
    },
    {
      slug: "automatizacion-bodegas-vitivinicola",
      title: "Automatización inteligente para bodegas: aumente eficiencia y ventas en 2025",
      excerpt:
        "La transformación digital del sector vitivinícola español con soluciones específicas para bodegas de Castilla y León.",
      image: "/wine-cellar-with-oak-barrels-in-traditional-spanis.jpg",
      date: "5 de diciembre, 2025",
      readTime: "10 min lectura",
      category: "Bodegas",
    },
    {
      slug: "5-senales-pyme-necesita-automatizacion",
      title: "5 señales de que tu empresa en Castilla y León necesita automatización urgente",
      excerpt:
        "Identifica si tu PYME necesita dar el salto digital y cómo empezar con la automatización e Inteligencia Artificial.",
      image: "/modern-office-with-digital-screens-and-automation.jpg",
      date: "5 de diciembre, 2025",
      readTime: "7 min lectura",
      category: "PYMEs",
    },
  ]

return (
    <>
      <Header />
      <main className="min-h-screen bg-background">
        {/* Hero Section */}
        <section className="relative overflow-hidden py-20" style={{ backgroundImage: "url('/blog-hero-bg.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundAttachment: "fixed" }}>
          <div className="absolute inset-0 bg-gradient-to-b from-background/30 via-background/50 to-background/70" />
          <div className="container mx-auto px-4 relative z-10">
            <div className="mx-auto max-w-3xl text-center">
              {/* Logo */}
              <div className="mb-8 flex justify-center">
                <Image 
                  src="/logo-saliens.png" 
                  alt="Saliens Logo" 
                  width={100} 
                  height={100}
                  className="drop-shadow-lg"
                />
              </div>
              <h1 className="mb-6 text-4xl font-bold text-balance md:text-5xl text-background">Blog de Automatización</h1>
              <p className="text-lg text-background/90 leading-relaxed">
                Artículos, casos de éxito y guías prácticas sobre automatización e IA para empresas de Castilla y León
              </p>
            </div>
          </div>
        </section>

{/* Blog Posts Grid */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
              {blogPosts.map((post) => (
                <Card key={post.slug} className="group overflow-hidden transition-all hover:shadow-lg">
                  <Link href={`/blog/${post.slug}`}>
                    <div className="relative h-48 overflow-hidden">
                      <Image
                        src={post.image || "/placeholder.svg"}
                        alt={post.title}
                        fill
                        className="object-cover transition-transform group-hover:scale-105"
                      />
                      <div className="absolute right-4 top-4">
                        <span className="rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground">
                          {post.category}
                        </span>
                      </div>
                    </div>

<div className="p-6">
                      <div className="mb-3 flex items-center gap-4 text-xs text-muted-foreground">
                        <span>{post.date}</span>
                        <span className="flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          {post.readTime}
                        </span>
                      </div>

<h3 className="mb-3 text-xl font-bold text-balance group-hover:text-primary transition-colors">
                        {post.title}
                      </h3>

<p className="mb-4 text-sm text-muted-foreground leading-relaxed">{post.excerpt}</p>

{/* CTA Section */}
        <section className="bg-primary/5 py-16">
          <div className="container mx-auto px-4 text-center">
            <h2 className="mb-4 text-3xl font-bold text-balance">¿Listo para automatizar tu empresa?</h2>
            <p className="mb-8 text-lg text-muted-foreground">
              Solicita una consultoría gratuita y descubre cómo la automatización puede transformar tu negocio
            </p>
            <Button asChild size="lg">
              <Link href="/#contacto">Reservar Consultoría Gratuita</Link>
            </Button>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as RechartsPrimitive from 'recharts'

import { cn } from '@/lib/utils'

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error('useChart must be used within a <ChartContainer />')
  }

return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<'div'> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >['children']
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className,
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color,
  )

if (!colorConfig.length) {
    return null
  }

const styles = Object.entries(THEMES)
    .map(
      ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join('\n')}
}
`,
    )
    .join('\n')

return <style>{styles}</style>
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = 'dot',
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<'div'> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: 'line' | 'dot' | 'dashed'
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === 'string'
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

if (labelFormatter) {
      return (
        <div className={cn('font-medium', labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

if (!value) {
      return null
    }

return <div className={cn('font-medium', labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

if (!active || !payload?.length) {
    return null
  }

const nestLabel = payload.length === 1 && indicator !== 'dot'

return (
    <div
      className={cn(
        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
        className,
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload.map((item, index) => {
          const key = `${nameKey || item.name || item.dataKey || 'value'}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
          const indicatorColor = color || item.payload.fill || item.color

return (
            <div
              key={item.dataKey}
              className={cn(
                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
                indicator === 'dot' && 'items-center',
              )}
            >
              {formatter && item?.value !== undefined && item.name ? (
                formatter(item.value, item.name, item, index, item.payload)
              ) : (
                <>
                  {itemConfig?.icon ? (
                    <itemConfig.icon />
                  ) : (
                    !hideIndicator && (
                      <div
                        className={cn(
                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
                          {
                            'h-2.5 w-2.5': indicator === 'dot',
                            'w-1': indicator === 'line',
                            'w-0 border-[1.5px] border-dashed bg-transparent':
                              indicator === 'dashed',
                            'my-0.5': nestLabel && indicator === 'dashed',
                          },
                        )}
                        style={
                          {
                            '--color-bg': indicatorColor,
                            '--color-border': indicatorColor,
                          } as React.CSSProperties
                        }
                      />
                    )
                  )}
                  <div
                    className={cn(
                      'flex flex-1 justify-between leading-none',
                      nestLabel ? 'items-end' : 'items-center',
                    )}
                  >
                    <div className="grid gap-1.5">
                      {nestLabel ? tooltipLabel : null}
                      <span className="text-muted-foreground">
                        {itemConfig?.label || item.name}
                      </span>
                    </div>
                    {item.value && (
                      <span className="text-foreground font-mono font-medium tabular-nums">
                        {item.value.toLocaleString()}
                      </span>
                    )}
                  </div>
                </>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = 'bottom',
  nameKey,
}: React.ComponentProps<'div'> &
  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

if (!payload?.length) {
    return null
  }

return (
    <div
      className={cn(
        'flex items-center justify-center gap-4',
        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
        className,
      )}
    >
      {payload.map((item) => {
        const key = `${nameKey || item.dataKey || 'value'}`
        const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
          <div
            key={item.value}
            className={
              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
            }
          >
            {itemConfig?.icon && !hideIcon ? (
              <itemConfig.icon />
            ) : (
              <div
                className="h-2 w-2 shrink-0 rounded-[2px]"
                style={{
                  backgroundColor: item.color,
                }}
              />
            )}
            {itemConfig?.label}
          </div>
        )
      })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string,
) {
  if (typeof payload !== 'object' || payload === null) {
    return undefined
  }

const payloadPayload =
    'payload' in payload &&
    typeof payload.payload === 'object' &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === 'string'
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { CallScheduler } from "@/components/call-scheduler"
import { ContactForm } from "@/components/contact-form"
import Link from "next/link"
import Image from "next/image"
import { useEffect, useRef, useState } from "react"
import {
  Bot,
  Brain,
  TrendingUp,
  Workflow,
  Zap,
  FileText,
  BarChart3,
  MessageSquare,
  Database,
  ArrowRight,
  ArrowDown,
} from "lucide-react"
import { InteractiveROICalculator } from "@/components/interactive-roi-calculator"

export default function HomePage() {
  const [scrollY, setScrollY] = useState(0)
  const observerRef = useRef<IntersectionObserver | null>(null)

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

document.querySelectorAll(".observe-animation").forEach((el) => {
      observerRef.current?.observe(el)
    })

return () => observerRef.current?.disconnect()
  }, [])

return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        {/* Hero Section with Parallax - LARGE AND PROMINENT */}
        <section className="relative overflow-hidden flex items-center justify-center bg-gradient-to-b from-primary/10 via-secondary/5 to-background pt-0" style={{ minHeight: "90vh" }}>
          <div className="absolute inset-0 z-0" style={{ transform: `translateY(${scrollY * 0.5}px)` }}>
            <Image
              src="/futuristic-hand-touching-robotic-hand-in-blue-light.jpg"
              alt="El futuro - Conexión humano-IA"
              width={1920}
              height={1080}
              priority
              className="object-cover w-full h-full"
            />
            <div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/70 to-background" />
          </div>

<div className="container mx-auto px-4 relative z-10 flex items-center justify-center min-h-[90vh]">
            <div className="mx-auto max-w-5xl text-center py-20">
              <div className="mb-8 flex justify-center observe-animation opacity-0 animate-in fade-in slide-in-from-bottom-4 duration-1000">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens%20vertical-9R9stSrfuBGpL83gLKubx4hL2KjNQ4.png"
                  alt="Saliens - Marketing Emocional"
                  width={400}
                  height={320}
                  priority
                  className="h-auto w-full max-w-sm drop-shadow-lg"
                />
              </div>
              <h1 className="mb-6 text-5xl font-bold tracking-tight text-balance md:text-6xl lg:text-7xl observe-animation opacity-0 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-200 bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent">
                Marketing Emocional + Inteligencia Artificial
              </h1>
              <p className="mb-12 text-xl text-foreground/80 leading-relaxed md:text-2xl observe-animation opacity-0 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-300 max-w-3xl mx-auto">
                Transforma tu negocio combinando la conexión emocional con clientes y la potencia de la IA. Automatización inteligente para crecer sin límites.
              </p>
              <div className="flex flex-col items-center justify-center gap-4 sm:flex-row observe-animation opacity-0 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-400">
                <Button size="lg" className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white px-8 h-14 text-lg font-semibold shadow-lg hover:shadow-xl transition-all" asChild>
                  <Link href="#contacto">
                    Consulta Gratuita
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Link>
                </Button>
                <Button size="lg" variant="outline" className="border-2 border-primary text-primary hover:bg-primary/10 px-8 h-14 text-lg font-semibold" asChild>
                  <Link href="#servicios">Descubre Nuestras Soluciones</Link>
                </Button>
              </div>
              <div className="mt-16 animate-bounce">
                <ArrowDown className="mx-auto h-8 w-8 text-primary" />
              </div>
            </div>
          </div>
        </section>

{/* Process Infographic Section */}
        <section className="border-b py-20 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="mb-12 text-center observe-animation opacity-0">
              <h2 className="mb-4 text-3xl font-bold text-balance md:text-4xl">Cómo Funciona la Automatización</h2>
              <p className="mx-auto max-w-2xl text-lg text-muted-foreground leading-relaxed">
                Proceso simple en 4 pasos para transformar tu empresa
              </p>
            </div>

<div className="grid gap-8 md:grid-cols-4 max-w-6xl mx-auto">
              {[
                {
                  step: "1",
                  title: "Diagnóstico",
                  description: "Analizamos tus procesos actuales",
                  image: "/business-analysis-meeting.jpg",
                },
                {
                  step: "2",
                  title: "Diseño",
                  description: "Creamos soluciones personalizadas",
                  image: "/technical-design-blueprint.jpg",
                },
                {
                  step: "3",
                  title: "Implementación",
                  description: "Instalamos y configuramos todo",
                  image: "/software-implementation.jpg",
                },
                {
                  step: "4",
                  title: "Soporte",
                  description: "Acompañamos tu crecimiento",
                  image: "/customer-support-team.png",
                },
              ].map((item, index) => (
                <div
                  key={index}
                  className="observe-animation opacity-0 text-center"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  <div className="relative mb-6">
                    <div className="aspect-square rounded-2xl overflow-hidden mx-auto max-w-[200px] border-4 border-primary/20">
                      <Image
                        src={item.image || "/placeholder.svg"}
                        alt={item.title}
                        width={200}
                        height={200}
                        className="object-cover w-full h-full"
                      />
                    </div>
                    <div className="absolute -top-4 -left-4 w-12 h-12 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xl font-bold shadow-lg">
                      {item.step}
                    </div>
                  </div>
                  <h3 className="font-bold text-xl mb-2">{item.title}</h3>
                  <p className="text-sm text-muted-foreground">{item.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

{/* About Section with Image */}
        <section className="border-b py-20">
          <div className="container mx-auto px-4">
            <div className="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
              <div className="observe-animation opacity-0">
                <h2 className="mb-6 text-3xl font-bold text-balance md:text-4xl">Quiénes Somos</h2>
                <div className="space-y-6 text-lg leading-relaxed text-muted-foreground">
                  <p>
                    <span className="font-semibold text-foreground">Saliens Automation Lab</span> es un laboratorio
                    especializado en diseñar, implementar y mantener sistemas de automatización inteligente para
                    empresas que buscan dar un salto real en eficiencia.
                  </p>
                  <p>
                    Integramos tecnologías avanzadas de IA, RPA y análisis de datos con la operativa diaria de negocios
                    tradicionales y modernos. Nuestro objetivo es eliminar tareas repetitivas, reducir errores, acelerar
                    procesos y permitir que cada equipo dedique su tiempo a actividades de verdadero valor.
                  </p>
                  <p>
                    Trabajamos codo con codo con empresas de Castilla y León que necesitan optimizar sus operaciones,
                    actualizar sus flujos de trabajo y responder a los nuevos retos del mercado con soluciones
                    inteligentes, sostenibles y escalables.
                  </p>
                </div>
              </div>
              <div className="observe-animation opacity-0">
                <div className="relative aspect-square rounded-2xl overflow-hidden shadow-2xl">
                  <Image
                    src="/modern-tech-office-with-automation-systems.jpg"
                    alt="Equipo Saliens trabajando"
                    width={600}
                    height={600}
                    className="object-cover w-full h-full"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Quiénes Somos - Saliens */}
        <section className="py-20 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-16">
                <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">¿Qué es Saliens?</h2>
                <p className="text-xl text-foreground/70">Una revolución en cómo los autónomos y pequeñas empresas compiten en el mercado digital</p>
              </div>

<div className="grid md:grid-cols-2 gap-8 items-center mb-16">
                <div className="space-y-4">
                  <h3 className="text-3xl font-bold text-foreground mb-4">El Origen del Nombre</h3>
                  <p className="text-lg text-foreground/80 leading-relaxed">
                    <span className="font-bold text-primary">Saliens</span> viene del latín "saliere" que significa "destacar" o "sobresalir". Es la <span className="font-bold">saliencia neurocognitiva</span> —ese proceso donde tu cerebro filtra miles de estímulos para enfocarse en lo que realmente importa.
                  </p>
                  <p className="text-lg text-foreground/80 leading-relaxed">
                    ¿Por qué tu cliente ignora 9,999 anuncios pero se detiene ante el tuyo? Eso es saliencia. Y nosotros hemos aprendido a crearla con IA.
                  </p>
                </div>

<div className="grid md:grid-cols-3 gap-6 mb-12">
                <div className="p-6 bg-gradient-to-br from-primary/10 to-transparent rounded-xl border border-primary/20 text-center observe-animation opacity-0" style={{ animationDelay: "0ms" }}>
                  <div className="text-5xl font-bold text-secondary mb-2">-40%</div>
                  <h3 className="font-bold text-foreground mb-2">Cancelaciones de Citas</h3>
                  <p className="text-sm text-foreground/70">
                    Reducción en no-shows tras implementar asistentes de voz con saliencia emocional.
                  </p>
                </div>

<div className="p-6 bg-gradient-to-br from-primary/10 to-transparent rounded-xl border border-primary/20 text-center observe-animation opacity-0" style={{ animationDelay: "100ms" }}>
                  <div className="text-5xl font-bold text-primary mb-2">3.5x</div>
                  <h3 className="font-bold text-foreground mb-2">Crecimiento Promedio</h3>
                  <p className="text-sm text-foreground/70">
                    Multiplicador de ingresos en 6 meses con PyMEs usando Saliens.
                  </p>
                </div>

<div className="p-6 bg-gradient-to-br from-primary/10 to-transparent rounded-xl border border-primary/20 text-center observe-animation opacity-0" style={{ animationDelay: "200ms" }}>
                  <div className="text-5xl font-bold text-accent mb-2">15h</div>
                  <h3 className="font-bold text-foreground mb-2">Liberadas por Semana</h3>
                  <p className="text-sm text-foreground/70">
                    Tiempo administrativo recuperado para enfocarse en ventas.
                  </p>
                </div>
              </div>

<div className="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl p-8 border border-primary/30">
                <h3 className="text-2xl font-bold text-foreground mb-4">¿Por qué funciona?</h3>
                <div className="grid md:grid-cols-2 gap-6 text-foreground/80">
                  <div>
                    <p className="font-semibold text-primary mb-2">→ Saliencia Cognitiva</p>
                    <p>
                      Tu cerebro procesa 10,000 estímulos por segundo pero solo atiende 7. Saliens hace que tu negocio sea UNO de esos 7.
                    </p>
                  </div>
                  <div>
                    <p className="font-semibold text-primary mb-2">→ Automatización Inteligente</p>
                    <p>
                      Tu IA trabaja 24/7 creando esos momentos de saliencia. Mientras tú duermes, ella cierra citas y convierte leads en clientes.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Services Section */}
        <section id="servicios" className="border-b bg-muted/30 py-20">
          <div className="container mx-auto px-4">
            <div className="mb-12 text-center observe-animation opacity-0">
              <h2 className="mb-4 text-3xl font-bold text-balance md:text-4xl">Nuestros Servicios</h2>
              <p className="mx-auto max-w-2xl text-lg text-muted-foreground leading-relaxed">
                Soluciones tecnológicas avanzadas para optimizar cada aspecto de tu negocio
              </p>
            </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
              {[
                {
                  icon: Bot,
                  title: "Automatización de Procesos (RPA + IA)",
                  description:
                    "Implementamos flujos automatizados capaces de ejecutar tareas administrativas, operativas o repetitivas sin intervención humana.",
                  image: "/robotic-process-automation.png",
                },
                {
                  icon: Brain,
                  title: "Sistemas de IA Aplicada",
                  description:
                    "Soluciones que piensan, analizan, clasifican y detectan patrones. IA para análisis interno, atención al cliente y predicción.",
                  image: "/artificial-intelligence-brain.jpg",
                },
                {
                  icon: TrendingUp,
                  title: "Automatización de Marketing",
                  description:
                    "Creación de campañas automatizadas, segmentación avanzada, generación de contenido y seguimiento inteligente.",
                  image: "/marketing-automation-dashboard.png",
                },
                {
                  icon: Workflow,
                  title: "Integraciones Personalizadas",
                  description:
                    "Conectamos CRM, ERP, herramientas de inventario, plataformas de marketing y cualquier software que utilice tu empresa.",
                  image: "/software-integration-network.jpg",
                },
              ].map((service, index) => (
                <Card
                  key={index}
                  className="observe-animation opacity-0 group hover:shadow-xl transition-all duration-300"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  <div className="aspect-video w-full relative overflow-hidden">
                    <Image
                      src={service.image || "/placeholder.svg"}
                      alt={service.title}
                      width={400}
                      height={300}
                      className="object-cover w-full h-full group-hover:scale-110 transition-transform duration-300"
                    />
                  </div>
                  <CardContent className="p-6">
                    <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                      <service.icon className="h-6 w-6 text-primary" />
                    </div>
                    <h3 className="mb-3 text-xl font-semibold">{service.title}</h3>
                    <p className="text-sm text-muted-foreground leading-relaxed">{service.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

{/* Automation Examples Section */}
        <section className="border-b bg-gradient-to-b from-background to-muted/30 py-20">
          <div className="container mx-auto px-4">
            <div className="mb-12 text-center observe-animation opacity-0">
              <h2 className="mb-4 text-3xl font-bold text-balance md:text-4xl">Ejemplos Reales de Automatización</h2>
              <p className="mx-auto max-w-2xl text-lg text-muted-foreground leading-relaxed">
                Descubre cómo nuestras automatizaciones transforman empresas como la tuya
              </p>
            </div>

<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">
              {[
                {
                  icon: BarChart3,
                  title: "Informes Automáticos",
                  description: "Generación semanal de reportes sin intervención manual",
                  image: "/automated-reports-dashboard.jpg",
                },
                {
                  icon: FileText,
                  title: "Clasificador Documental IA",
                  description: "Organización inteligente de facturas y documentos",
                  image: "/document-ai-classification.jpg",
                },
                {
                  icon: Database,
                  title: "Gestión de Inventario",
                  description: "Reposición automática por umbrales personalizados",
                  image: "/inventory-management-system.png",
                },
                {
                  icon: MessageSquare,
                  title: "Chatbot 24/7",
                  description: "Atención al cliente automatizada siempre disponible",
                  image: "/ai-chatbot-customer-service.png",
                },
                {
                  icon: Workflow,
                  title: "Integración CRM",
                  description: "Sincronización automática entre sistemas",
                  image: "/crm-integration-workflow.jpg",
                },
                {
                  icon: Zap,
                  title: "Facturas y Albaranes",
                  description: "Procesamiento automático de documentación contable",
                  image: "/invoice-processing-automation.png",
                },
              ].map((example, index) => (
                <Card
                  key={index}
                  className="observe-animation opacity-0 group hover:shadow-xl transition-all duration-300"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  <div className="aspect-video w-full relative overflow-hidden">
                    <Image
                      src={example.image || "/placeholder.svg"}
                      alt={example.title}
                      width={400}
                      height={300}
                      className="object-cover w-full h-full group-hover:scale-110 transition-transform duration-300"
                    />
                  </div>
                  <CardContent className="p-6">
                    <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                      <example.icon className="h-6 w-6 text-primary" />
                    </div>
                    <h3 className="mb-2 font-semibold">{example.title}</h3>
                    <p className="text-sm text-muted-foreground leading-relaxed">{example.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

{/* Interactive ROI Calculator Section */}
        <section className="border-b py-24 bg-gradient-to-br from-muted/30 via-background to-muted/50">
          <div className="container mx-auto px-4">
            <InteractiveROICalculator />
          </div>
        </section>

{/* Call Scheduler Section */}
        <section id="reserva" className="border-b bg-muted/30 py-20">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-3xl observe-animation opacity-0">
              <CallScheduler />
            </div>
          </div>
        </section>

{/* Contact Form Section */}
        <section id="contacto" className="border-b bg-muted/30 py-20">
          <div className="container mx-auto px-4">
            <div className="mb-12 text-center observe-animation opacity-0">
              <h2 className="mb-4 text-3xl font-bold text-balance md:text-4xl">Solicita un Análisis Gratuito</h2>
              <p className="mx-auto max-w-2xl text-lg text-muted-foreground leading-relaxed">
                Cuéntanos sobre tu empresa y descubre cómo la automatización puede transformar tu negocio
              </p>
            </div>

.animate-fade-in-up {
          animation: fadeInUp 0.8s ease-out forwards;
        }

.observe-animation {
          transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        }
      `}</style>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Menu, X } from "lucide-react"
import { useState } from "react"

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shadow-sm">
      <nav className="container mx-auto flex h-16 items-center justify-between px-4">
        <Link href="/" className="flex items-center gap-3">
          <Image
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens2-UyiEYCnTLHsv3ifhp5vWnTH26fNzG4.png"
            alt="Saliens - Marketing Emocional"
            width={200}
            height={50}
            className="h-10 w-auto"
          />
        </Link>

{/* Desktop Menu */}
        <div className="hidden items-center gap-8 md:flex">
          <Link
            href="/soluciones"
            className="text-sm font-medium text-foreground/70 transition-colors hover:text-primary"
          >
            Soluciones
          </Link>
          <Link href="/blog" className="text-sm font-medium text-foreground/70 transition-colors hover:text-primary">
            Blog
          </Link>
          <Link
            href="/farmacias"
            className="text-sm font-medium text-foreground/70 transition-colors hover:text-primary"
          >
            Casos
          </Link>
          <Link
            href="/#contacto"
            className="text-sm font-medium text-foreground/70 transition-colors hover:text-primary"
          >
            Contacto
          </Link>
          <Button asChild size="sm" className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90">
            <Link href="/#reserva">Consulta Gratuita</Link>
          </Button>
        </div>

{/* Mobile Menu Button */}
        <button className="md:hidden" onClick={() => setMobileMenuOpen(!mobileMenuOpen)} aria-label="Toggle menu">
          {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </button>
      </nav>

{/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="border-t bg-background md:hidden">
          <div className="container mx-auto flex flex-col gap-4 px-4 py-6">
            <Link
              href="/soluciones"
              className="text-sm font-medium text-foreground/70"
              onClick={() => setMobileMenuOpen(false)}
            >
              Soluciones
            </Link>
            <Link
              href="/blog"
              className="text-sm font-medium text-foreground/70"
              onClick={() => setMobileMenuOpen(false)}
            >
              Blog
            </Link>
            <Link
              href="/farmacias"
              className="text-sm font-medium text-foreground/70"
              onClick={() => setMobileMenuOpen(false)}
            >
              Casos
            </Link>
            <Link
              href="/#contacto"
              className="text-sm font-medium text-foreground/70"
              onClick={() => setMobileMenuOpen(false)}
            >
              Contacto
            </Link>
            <Button asChild className="w-full bg-gradient-to-r from-primary to-secondary">
              <Link href="/#reserva" onClick={() => setMobileMenuOpen(false)}>
                Consulta Gratuita
              </Link>
            </Button>
          </div>
        </div>
      )}
    </header>
  )
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  onDemandEntries: {
    maxInactiveAge: 15 * 1000,
    pagesBufferLength: 5,
  },
}

export default nextConfig
[V0_FILE]typescriptreact:file="app/servicios/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import Configurador from "./configurador"

export const metadata: Metadata = {
  title: "Configurador de Servicios | Saliens",
  description: "Configurador autoservicio de Saliens. Selecciona tu sector y descubre cómo automatizar tu negocio.",
  keywords: "automatización, IA, servicios, configurador, negocio",
}

export default function ServiciosPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1">
        <Configurador />
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/servicios/success-screen.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Copy, Download, QrCode, MessageCircle, Check } from "lucide-react"

interface SuccessScreenProps {
  businessName: string
  sector: string
  solucion?: string
  onBack: () => void
}

export function SuccessScreen({ businessName, sector, solucion, onBack }: SuccessScreenProps) {
  const [copiedLink, setCopiedLink] = useState(false)
  const [copiedMessage, setCopiedMessage] = useState(false)

const aiLink = `https://saliens.ai/chat/${Math.random().toString(36).substr(2, 9)}`
  
  const whatsappMessage = `¡Hola! 👋

Tenemos una novedad que te va a encantar. Acabamos de lanzar nuestro Asistente IA Saliens.

Con él puedes:
✓ Reservar citas al instante (24/7)
✓ Recibir recordatorios automáticos
✓ Consultar servicios y precios en tiempo real

Es súper fácil. Haz click aquí y pruébalo:
${aiLink}

¿Preguntas? Estamos aquí para ayudarte.

#IA #Innovación #SaliensAssistant`

const handleCopyLink = () => {
    navigator.clipboard.writeText(aiLink)
    setCopiedLink(true)
    setTimeout(() => setCopiedLink(false), 2000)
  }

const handleCopyMessage = () => {
    navigator.clipboard.writeText(whatsappMessage)
    setCopiedMessage(true)
    setTimeout(() => setCopiedMessage(false), 2000)
  }

const handleDownloadPoster = () => {
    const canvas = document.createElement("canvas")
    canvas.width = 800
    canvas.height = 600
    const ctx = canvas.getContext("2d")
    
    if (ctx) {
      // Fondo gradiente
      const gradient = ctx.createLinearGradient(0, 0, 800, 600)
      gradient.addColorStop(0, "#1E1D59")
      gradient.addColorStop(1, "#2D1B4E")
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, 800, 600)

// Título
      ctx.fillStyle = "#FFFFFF"
      ctx.font = "bold 48px Arial"
      ctx.textAlign = "center"
      ctx.fillText("Reserva tu cita", 400, 150)

// Subtítulo
      ctx.font = "32px Arial"
      ctx.fillStyle = "#FFD700"
      ctx.fillText("con nuestro Asistente IA", 400, 220)

// QR simulado (cuadrado)
      ctx.fillStyle = "#FFFFFF"
      ctx.fillRect(250, 280, 300, 300)
      ctx.fillStyle = "#000000"
      ctx.fillRect(270, 300, 80, 80)
      ctx.fillRect(450, 300, 80, 80)
      ctx.fillRect(270, 480, 80, 80)

// Link en la parte inferior
      ctx.fillStyle = "#FFFFFF"
      ctx.font = "20px Arial"
      ctx.textAlign = "center"
      ctx.fillText(aiLink, 400, 570)
    }

const link = document.createElement("a")
    link.href = canvas.toDataURL()
    link.download = `cartel-saliens-${businessName.replace(/\s+/g, "-")}.png`
    link.click()
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-background to-secondary/5 py-12 px-4">
      <div className="max-w-3xl mx-auto">
        {/* Celebración */}
        <div className="text-center mb-16 animate-in fade-in slide-in-from-bottom-4 duration-500">
          <div className="mb-8 flex justify-center">
            <div className="relative w-24 h-24">
              <div className="absolute inset-0 bg-gradient-to-r from-primary to-secondary rounded-full animate-pulse" />
              <div className="absolute inset-2 bg-background rounded-full flex items-center justify-center">
                <Check className="w-12 h-12 text-primary" />
              </div>
            </div>
          </div>

<h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-4">
            ¡Tu Asistente Saliens está activo!
          </h1>
          
          <p className="text-xl text-foreground/70 mb-2">
            {businessName}
          </p>
          <p className="text-lg text-foreground/60">
            Tu IA gestiona ahora todas las citas y consultas
          </p>
        </div>

{/* Tarjeta de IA */}
        <div className="mb-12 backdrop-blur-md bg-white/10 border-2 border-primary/30 rounded-2xl p-8 animate-in fade-in slide-in-from-bottom-8 duration-700">
          <h2 className="text-2xl font-bold text-foreground mb-6">Tu Enlace de IA</h2>

{/* Link Copiable */}
          <div className="mb-8">
            <div className="flex gap-3 items-center p-4 bg-white/5 border border-primary/20 rounded-lg group hover:border-primary/50 transition-colors">
              <input
                type="text"
                value={aiLink}
                readOnly
                className="flex-1 bg-transparent text-foreground/80 font-mono text-sm outline-none"
              />
              <button
                onClick={handleCopyLink}
                className={`p-2 rounded-lg transition-all ${
                  copiedLink
                    ? "bg-green-500/20 text-green-400"
                    : "bg-primary/20 text-primary hover:bg-primary/40"
                }`}
              >
                {copiedLink ? (
                  <Check className="w-5 h-5" />
                ) : (
                  <Copy className="w-5 h-5" />
                )}
              </button>
            </div>
          </div>

{/* Código QR Simulado */}
          <div className="mb-8">
            <h3 className="text-sm font-semibold text-foreground/70 mb-4">Código QR</h3>
            <div className="flex justify-center">
              <div className="p-6 bg-white rounded-lg">
                <div className="w-48 h-48 bg-gradient-to-br from-foreground to-primary/50 rounded-lg flex items-center justify-center relative overflow-hidden">
                  <div className="absolute inset-4 border-4 border-white" />
                  <div className="absolute inset-6 bg-white/10" />
                  
                  {/* Patrón QR simulado */}
                  <div className="grid grid-cols-7 gap-1 p-4">
                    {Array.from({ length: 49 }).map((_, i) => (
                      <div
                        key={i}
                        className={`w-2 h-2 rounded-sm ${
                          Math.random() > 0.5 ? "bg-white" : "bg-transparent"
                        }`}
                      />
                    ))}
                  </div>

{/* Símbolo QR */}
                  <QrCode className="absolute w-8 h-8 text-white" />
                </div>
              </div>
            </div>
            <p className="text-center text-sm text-foreground/60 mt-4">
              Los clientes pueden escanear para acceder a tu IA
            </p>
          </div>
        </div>

{/* Acciones de Lanzamiento */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
          {/* Descargar Cartel */}
          <button
            onClick={handleDownloadPoster}
            className="group relative p-6 rounded-xl border-2 border-primary/30 bg-white/5 hover:bg-white/10 hover:border-primary/60 transition-all"
          >
            <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-primary/10 to-secondary/10 opacity-0 group-hover:opacity-100 transition-opacity" />
            <div className="relative z-10">
              <div className="flex items-center gap-3 mb-3">
                <Download className="w-6 h-6 text-primary" />
                <h3 className="text-lg font-semibold text-foreground">Cartel Imprimible</h3>
              </div>
              <p className="text-sm text-foreground/60">
                Descarga un cartel profesional para tu clínica con código QR incluido
              </p>
            </div>
          </button>

{/* Copiar Mensaje WhatsApp */}
          <button
            onClick={handleCopyMessage}
            className="group relative p-6 rounded-xl border-2 border-primary/30 bg-white/5 hover:bg-white/10 hover:border-primary/60 transition-all"
          >
            <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-primary/10 to-secondary/10 opacity-0 group-hover:opacity-100 transition-opacity" />
            <div className="relative z-10">
              <div className="flex items-center gap-3 mb-3">
                <MessageCircle className="w-6 h-6 text-primary" />
                <h3 className="text-lg font-semibold text-foreground">Mensaje WhatsApp</h3>
              </div>
              <p className="text-sm text-foreground/60">
                {copiedMessage ? "✓ Mensaje copiado" : "Copia el mensaje para enviar a tus clientes"}
              </p>
            </div>
          </button>
        </div>

{/* Información de Próximos Pasos */}
        <div className="bg-white/5 border-2 border-primary/20 rounded-xl p-6 mb-8">
          <h3 className="font-semibold text-foreground mb-4">Próximos Pasos</h3>
          <ul className="space-y-2 text-sm text-foreground/70">
            <li className="flex gap-3">
              <span className="text-primary font-bold">1.</span>
              <span>Descarga el cartel y colócalo en tu clínica</span>
            </li>
            <li className="flex gap-3">
              <span className="text-primary font-bold">2.</span>
              <span>Envía el mensaje de WhatsApp a tus clientes actuales</span>
            </li>
            <li className="flex gap-3">
              <span className="text-primary font-bold">3.</span>
              <span>Monitorea las citas y ajusta según sea necesario</span>
            </li>
          </ul>
        </div>

{/* Botones de Acción */}
        <div className="flex flex-col sm:flex-row gap-4">
          <button
            onClick={onBack}
            className="flex-1 px-8 py-4 border-2 border-primary/50 text-foreground font-semibold rounded-lg hover:bg-white/5 transition-all"
          >
            Gestionar Otra Clínica
          </button>
          <button
            className="flex-1 px-8 py-4 bg-gradient-to-r from-primary to-secondary text-white font-semibold rounded-lg hover:shadow-lg hover:shadow-primary/20 transition-all"
          >
            Ir al Dashboard
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/servicios/configurador.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Stethoscope, Sparkles, Activity, Scissors, Car, BarChart3, PawPrint, TrendingUp, Eye, Wrench, ArrowLeft } from "lucide-react"
import { SuccessScreen } from "./success-screen"

const SECTORS = [
  { id: 1, name: "Clínicas Dentales", icon: Stethoscope },
  { id: 2, name: "Medicina Estética", icon: Sparkles },
  { id: 3, name: "Fisioterapia", icon: Activity },
  { id: 4, name: "Peluquerías", icon: Scissors },
  { id: 5, name: "Automoción", icon: Car },
  { id: 6, name: "Asesorías", icon: BarChart3 },
  { id: 7, name: "Veterinarias", icon: PawPrint },
  { id: 8, name: "Seguros", icon: TrendingUp },
  { id: 9, name: "Ópticas", icon: Eye },
  { id: 10, name: "Reparaciones SAT", icon: Wrench },
]

const SOLUCIONES = [
  {
    id: "recepcion",
    name: "Recepción Inteligente 24/7 (Voz y WhatsApp)",
    desc: "Asistente IA que atiende llamadas y mensajes automáticamente, gestiona citas y proporciona información 24/7 sin intervención humana."
  },
  {
    id: "escudo",
    name: "Escudo Anti-Cancelaciones (Gestión de Fianzas)",
    desc: "Sistema de confirmación automática con fianza refundible. Reduce cancelaciones un 80% y genera ingresos adicionales mediante depósitos de reserva."
  },
  {
    id: "saliencia",
    name: "Optimizador de Saliencia Cognitiva (Marketing y Citas)",
    desc: "Marketing inteligente basado en neurocognición. Maximiza la probabilidad de que clientes recuerden tu negocio en el momento de la decisión."
  }
]

export default function Configurador() {
  const [step, setStep] = useState(1)
  const [selectedSector, setSelectedSector] = useState<number | null>(null)
  const [clinicName, setClinicName] = useState("")
  const [selectedSolucion, setSelectedSolucion] = useState("")
  const [address, setAddress] = useState("")
  const [whatsapp, setWhatsapp] = useState("")

const sector = SECTORS.find(s => s.id === selectedSector)
  const solucion = SOLUCIONES.find(s => s.id === selectedSolucion)

const handleReset = () => {
    setStep(1)
    setSelectedSector(null)
    setClinicName("")
    setSelectedSolucion("")
    setAddress("")
    setWhatsapp("")
  }

const isStep2Valid = clinicName.trim() && selectedSolucion

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-background to-secondary/5 py-20">
      <div className="container mx-auto px-4">
        {step === 1 && (
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-4">
                Configurador Autoservicio
              </h1>
              <p className="text-xl text-foreground/70">
                Selecciona tu sector
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
              {SECTORS.map((s) => {
                const Icon = s.icon
                const isSelected = selectedSector === s.id

return (
                  <button
                    key={s.id}
                    onClick={() => setSelectedSector(s.id)}
                    className={`p-6 rounded-xl border-2 transition-all ${
                      isSelected
                        ? "border-primary bg-primary/10 shadow-lg shadow-primary/20"
                        : "border-primary/30 bg-white/5 hover:border-primary/60"
                    }`}
                  >
                    <div className={`p-3 rounded-lg mb-3 w-fit mx-auto ${
                      isSelected ? "bg-primary text-white" : "bg-primary/10 text-primary"
                    }`}>
                      <Icon className="w-6 h-6" />
                    </div>
                    <h3 className="font-semibold text-sm text-foreground">
                      {s.name}
                    </h3>
                  </button>
                )
              })}
            </div>

{selectedSector && (
              <div className="mt-12 flex justify-center">
                <button
                  onClick={() => setStep(2)}
                  className="px-8 py-3 bg-gradient-to-r from-primary to-secondary text-white font-semibold rounded-lg hover:shadow-lg transition-all"
                >
                  Continuar con {sector?.name}
                </button>
              </div>
            )}
          </div>
        )}

{step === 2 && (
          <div className="max-w-3xl mx-auto">
            <button
              onClick={() => setStep(1)}
              className="flex items-center gap-2 text-foreground/60 hover:text-foreground mb-8"
            >
              <ArrowLeft className="w-5 h-5" />
              Volver
            </button>

<div className="bg-white/10 border-2 border-primary/30 rounded-2xl p-8">
              <h2 className="text-3xl font-bold text-foreground mb-8">
                Información de {sector?.name}
              </h2>

<div className="space-y-6">
                {/* Campo Nombre del Negocio - Destacado */}
                <div className="bg-gradient-to-r from-primary/10 to-secondary/10 border-2 border-primary rounded-xl p-6">
                  <label className="block text-sm font-bold text-primary mb-3 uppercase tracking-wide">
                    * Nombre del Negocio / Clínica (Obligatorio)
                  </label>
                  <input
                    type="text"
                    value={clinicName}
                    onChange={(e) => setClinicName(e.target.value)}
                    placeholder="Ej: Clínica Dental La Sonrisa"
                    className="w-full px-4 py-3 bg-white/10 border border-primary/50 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
                  />
                  <p className="text-xs text-foreground/60 mt-2">Este nombre se usará para personalizar tu IA</p>
                </div>

{/* Selector Solución */}
                <div>
                  <label className="block text-sm font-medium text-primary mb-3">
                    * Solución a Implementar (Obligatorio)
                  </label>
                  <select
                    value={selectedSolucion}
                    onChange={(e) => setSelectedSolucion(e.target.value)}
                    className="w-full px-4 py-3 bg-white/10 border border-primary/30 rounded-lg text-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all appearance-none cursor-pointer"
                  >
                    <option value="">Selecciona una solución...</option>
                    {SOLUCIONES.map((sol) => (
                      <option key={sol.id} value={sol.id}>
                        {sol.name}
                      </option>
                    ))}
                  </select>
                </div>

{/* Descripción de Solución */}
                {solucion && (
                  <div className="bg-white/5 border-l-4 border-primary p-4 rounded-lg animate-in fade-in slide-in-from-left-4 duration-300">
                    <p className="text-sm text-foreground/80 leading-relaxed">
                      {solucion.desc}
                    </p>
                  </div>
                )}

{/* Dirección */}
                <div>
                  <label className="block text-sm font-medium text-foreground mb-2">
                    Dirección
                  </label>
                  <input
                    type="text"
                    value={address}
                    onChange={(e) => setAddress(e.target.value)}
                    placeholder="Dirección completa"
                    className="w-full px-4 py-3 bg-white/10 border border-primary/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary transition-colors"
                  />
                </div>

{/* WhatsApp */}
                <div>
                  <label className="block text-sm font-medium text-foreground mb-2">
                    WhatsApp
                  </label>
                  <input
                    type="tel"
                    value={whatsapp}
                    onChange={(e) => setWhatsapp(e.target.value)}
                    placeholder="+34 612 345 678"
                    className="w-full px-4 py-3 bg-white/10 border border-primary/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary transition-colors"
                  />
                </div>
              </div>

<div className="flex gap-4 mt-8">
                <button
                  onClick={() => setStep(1)}
                  className="px-6 py-3 border border-primary/50 rounded-lg text-foreground hover:bg-white/5"
                >
                  Atrás
                </button>
                <button
                  onClick={() => setStep(3)}
                  disabled={!isStep2Valid}
                  className={`flex-1 px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white font-semibold rounded-lg transition-all ${
                    isStep2Valid ? "hover:shadow-lg cursor-pointer" : "opacity-50 cursor-not-allowed"
                  }`}
                >
                  Siguiente
                </button>
              </div>
            </div>
          </div>
        )}

{step === 3 && (
          <div className="max-w-3xl mx-auto">
            <button
              onClick={() => setStep(2)}
              className="flex items-center gap-2 text-foreground/60 hover:text-foreground mb-8"
            >
              <ArrowLeft className="w-5 h-5" />
              Volver
            </button>

<div className="bg-white/10 border-2 border-primary/30 rounded-2xl p-8">
              <h2 className="text-3xl font-bold text-foreground mb-8">
                Resumen de Configuración
              </h2>

<div className="space-y-4 mb-8 pb-8 border-b border-primary/20">
                <div>
                  <span className="text-foreground/60">Sector:</span>
                  <p className="text-lg font-semibold text-foreground">{sector?.name}</p>
                </div>
                <div>
                  <span className="text-foreground/60">Nombre del Negocio:</span>
                  <p className="text-lg font-semibold text-primary">{clinicName}</p>
                </div>
                <div>
                  <span className="text-foreground/60">Solución:</span>
                  <p className="text-lg font-semibold text-foreground">{solucion?.name}</p>
                </div>
                <div>
                  <span className="text-foreground/60">WhatsApp:</span>
                  <p className="text-lg font-semibold text-foreground">{whatsapp || "No especificado"}</p>
                </div>
              </div>

<div className="flex gap-4">
                <button
                  onClick={() => setStep(2)}
                  className="px-6 py-3 border border-primary/50 rounded-lg text-foreground hover:bg-white/5"
                >
                  Atrás
                </button>
                <button
                  onClick={() => setStep(4)}
                  className="flex-1 px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white font-semibold rounded-lg hover:shadow-lg"
                >
                  Finalizar
                </button>
              </div>
            </div>
          </div>
        )}

{step === 4 && sector && (
          <SuccessScreen 
            businessName={clinicName} 
            sector={sector.name}
            solucion={solucion?.name}
            onBack={handleReset}
          />
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { Toaster } from "@/components/ui/toaster"
import { Chatbot } from "@/components/chatbot"
import { ErrorSuppressor } from "@/components/error-suppressor"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Saliens | Marketing Emocional + IA para Pymes y Autónomos",
  description:
    "Saliens: Automatización inteligente con saliencia neurocognitiva. Soluciones IA para dentistas, abogados, clínicas. Gestión de citas, WhatsApp IA, asistentes de voz. Crecimiento 3-5x en 6 meses.",
  generator: "v0",
  keywords: [
    "marketing emocional",
    "inteligencia artificial",
    "automatización pymes",
    "saliencia cognitiva",
    "asistente voz IA",
    "gestión citas automática",
    "WhatsApp Business IA",
    "transformación digital",
    "dentistas",
    "autónomos",
  ],
  icons: {
    icon: "/ico.png",
  },
  openGraph: {
    type: "website",
    locale: "es_ES",
    url: "https://saliens.app",
    siteName: "Saliens",
  },
}

export const viewport = {
  themeColor: "#E8A817",
  width: "device-width",
  initialScale: 1,
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="es">
      <head>
        <link rel="icon" href="/ico.png" type="image/png" />
      </head>
      <body className={`${inter.className} font-sans antialiased`}>
        <ErrorSuppressor />
        {children}
        <Chatbot />
        <Toaster />
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/error-suppressor.tsx" isMerged="true"
'use client'

import { useEffect } from 'react'

export function ErrorSuppressor() {
  useEffect(() => {
    // Suppress MetaMask connection errors that may be injected by browser extensions
    const originalError = console.error
    console.error = function(...args: any[]) {
      if (args[0] && typeof args[0] === 'string' && args[0].includes('MetaMask')) {
        return
      }
      originalError.apply(console, args)
    }

// Suppress unhandled MetaMask rejection errors
    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
      if (event.reason && typeof event.reason === 'object' && event.reason.message && event.reason.message.includes('MetaMask')) {
        event.preventDefault()
      }
    }

window.addEventListener('unhandledrejection', handleUnhandledRejection)

return () => {
      window.removeEventListener('unhandledrejection', handleUnhandledRejection)
    }
  }, [])

return null
}
[V0_FILE]typescriptreact:file="app/soluciones/dashboard/page.tsx" isMerged="true"
"use client"

import { useState, useMemo } from "react"
import {
  Plus,
  Calendar,
  Receipt,
  ClipboardList,
  Megaphone,
  LayoutDashboard,
  Users,
  Trash2,
  TrendingUp,
  BarChart3,
  CheckCircle,
  Timer,
  Euro,
  Power,
  PowerOff,
  ArrowLeft,
  MessageSquare,
  Phone,
  QrCode,
  FileText,
} from "lucide-react"
import Image from "next/image"

export default function DashboardPage() {
  const [activeView, setActiveView] = useState("main")
  const [showEditor, setShowEditor] = useState(false)
  const [isProcessing, setIsProcessing] = useState<string | null>(null)
  const [selectedCampaignMetrics, setSelectedCampaignMetrics] = useState<typeof campaigns[0] | null>(null)
  const [selectedPatient, setSelectedPatient] = useState<typeof patients[0] | null>(null)
  const [agendaFilter, setAgendaFilter] = useState("today")
  const [waConnected, setWaConnected] = useState(false)

const CUOTA_FIJA = 49.0
  const COSTE_POR_PACIENTE = 0.25

const [patients, setPatients] = useState([
    {
      id: "P-8891",
      name: "Carlos Ruiz",
      phone: "+34 600 123 456",
      lastVisit: "15 Feb 2024",
      status: "Activo",
      totalBilled: 450,
      notes: "Sensibilidad en premolares superiores.",
      history: [
        { date: "15 Feb 2024", service: "Limpieza", amount: 60 },
        { date: "10 Ene 2024", service: "Revisión", amount: 0 },
      ],
      logs: [] as { date: string; type: string; text: string }[],
    },
    {
      id: "P-8892",
      name: "Elena Marín",
      phone: "+34 611 234 567",
      lastVisit: "01 Mar 2024",
      status: "En Tratamiento",
      totalBilled: 1250,
      notes: "Tratamiento de ortodoncia en curso.",
      history: [{ date: "01 Mar 2024", service: "Ajuste Brackets", amount: 50 }],
      logs: [{ date: "28 Feb 2024", type: "WhatsApp", text: "Recordatorio de cita enviado." }],
    },
    {
      id: "P-8893",
      name: "Ana López",
      phone: "+34 622 345 678",
      lastVisit: "20 Sep 2023",
      status: "Riesgo Inactivo",
      totalBilled: 120,
      notes: "Paciente irregular.",
      history: [{ date: "20 Sep 2023", service: "Empaste", amount: 120 }],
      logs: [],
    },
  ])

const [appointments, setAppointments] = useState([
    { id: "C-001", patient: "Ana López", time: "09:00", date: "Hoy", service: "Revisión", status: "Confirmada" },
    { id: "C-002", patient: "Pedro Sanz", time: "10:30", date: "Hoy", service: "Implante", status: "Pendiente" },
    { id: "C-003", patient: "Carlos Ruiz", time: "16:00", date: "Jueves", service: "Limpieza", status: "Confirmada" },
    { id: "C-004", patient: "Marta Soler", time: "12:00", date: "Viernes", service: "Blanqueamiento", status: "Pendiente" },
  ])

const [campaigns, setCampaigns] = useState([
    {
      id: 1,
      name: "Reactivación Primavera",
      sent: 150,
      conversions: 12,
      status: "Activa",
      roi: "450%",
      openRate: "88%",
      segment: "Inactivos +6 meses",
      message: "Estimado paciente, hace tiempo que no realiza su revisión anual.",
    },
    {
      id: 2,
      name: "Recordatorio Revisiones",
      sent: 85,
      conversions: 40,
      status: "Pausada",
      roi: "1200%",
      openRate: "92%",
      segment: "Revisiones pendientes",
      message: "Es momento de su revisión anual.",
    },
  ])

const [billingHistory, setBillingHistory] = useState([
    { id: "INV-8821", patient: "Carlos Ruiz", date: "2024-03-04", amount: 120.0, status: "Pendiente", type: "Blanqueamiento" },
    { id: "INV-8820", patient: "Elena Marín", date: "2024-03-03", amount: 60.0, status: "Pagado", type: "Limpieza" },
  ])

const [services, setServices] = useState([
    { id: 1, name: "Limpieza Dental", category: "Preventiva", price: 60, duration: "30 min", noShowFee: 15 },
    { id: 2, name: "Blanqueamiento LED", category: "Estética", price: 180, duration: "60 min", noShowFee: 50 },
    { id: 3, name: "Implante Titanio", category: "Cirugía", price: 1200, duration: "90 min", noShowFee: 100 },
  ])

const [newCampaign, setNewCampaign] = useState({ name: "", segment: "Inactivos +6 meses", message: "" })
  const [newLogText, setNewLogText] = useState("")

const stats = useMemo(() => {
    const income = billingHistory.filter((i) => i.status === "Pagado").reduce((acc, curr) => acc + curr.amount, 14205)
    const variableCost = patients.length * COSTE_POR_PACIENTE
    const totalCost = CUOTA_FIJA + variableCost
    return { income, totalCost, variableCost }
  }, [billingHistory, patients])

const filteredAppointments = useMemo(() => {
    if (agendaFilter === "today") return appointments.filter((a) => a.date === "Hoy")
    return appointments
  }, [appointments, agendaFilter])

const deleteCampaign = (id: number) => {
    setCampaigns((prev) => prev.filter((c) => c.id !== id))
    if (selectedCampaignMetrics?.id === id) setSelectedCampaignMetrics(null)
  }

const deleteService = (id: number) => {
    setServices((prev) => prev.filter((s) => s.id !== id))
  }

const toggleCampaign = (id: number) => {
    setCampaigns((prev) =>
      prev.map((c) => (c.id === id ? { ...c, status: c.status === "Activa" ? "Pausada" : "Activa" } : c))
    )
  }

const saveCampaign = () => {
    if (!newCampaign.name || !newCampaign.message) return
    const campaign = {
      id: Date.now(),
      ...newCampaign,
      sent: 0,
      conversions: 0,
      status: "Activa",
      roi: "0%",
      openRate: "0%",
    }
    setCampaigns([campaign, ...campaigns])
    setShowEditor(false)
    setNewCampaign({ name: "", segment: "Inactivos +6 meses", message: "" })
  }

const processPayment = (id: string) => {
    setIsProcessing(id)
    setTimeout(() => {
      setBillingHistory((prev) => prev.map((inv) => (inv.id === id ? { ...inv, status: "Pagado" } : inv)))
      setIsProcessing(null)
    }, 800)
  }

const handleAddLog = (type: string) => {
    if (!newLogText.trim() || !selectedPatient) return
    setPatients((prev) =>
      prev.map((p) => {
        if (p.id === selectedPatient.id) {
          const newLog = { date: new Date().toLocaleDateString("es-ES"), type, text: newLogText }
          return { ...p, logs: [newLog, ...p.logs] }
        }
        return p
      })
    )
    setNewLogText("")
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 text-slate-800 flex overflow-hidden font-sans">
      {/* SIDEBAR */}
      <aside className="w-20 lg:w-72 bg-gradient-to-b from-[#2d1b4e] to-[#1e1235] text-white p-6 flex flex-col justify-between sticky top-0 h-screen z-50">
        <div>
          <div className="mb-10 flex justify-center lg:justify-start">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens2-zt91dmiJ7ZP4xqX8Je6oAOlSGdhIIA.png"
              alt="Saliens"
              width={140}
              height={50}
              className="hidden lg:block"
            />
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20saliens2-zt91dmiJ7ZP4xqX8Je6oAOlSGdhIIA.png"
              alt="Saliens"
              width={40}
              height={40}
              className="lg:hidden"
            />
          </div>

<nav className="space-y-2">
            {[
              { id: "main", icon: LayoutDashboard, label: "Dashboard" },
              { id: "calendar", icon: Calendar, label: "Agenda Operativa" },
              { id: "patients", icon: Users, label: "Directorio Pacientes" },
              { id: "billing", icon: Receipt, label: "Facturación" },
              { id: "campaigns", icon: Megaphone, label: "Marketing" },
              { id: "services", icon: ClipboardList, label: "Catálogo Tarifas" },
            ].map((item) => (
              <button
                key={item.id}
                onClick={() => {
                  setActiveView(item.id)
                  setShowEditor(false)
                  setSelectedCampaignMetrics(null)
                  setSelectedPatient(null)
                }}
                className={`w-full flex items-center space-x-4 px-4 py-4 rounded-xl transition-all ${
                  activeView === item.id
                    ? "bg-gradient-to-r from-[#ff5722] to-[#ff7a45] text-white shadow-lg"
                    : "text-slate-400 hover:text-white hover:bg-white/10"
                }`}
              >
                <item.icon className="w-5 h-5 shrink-0" />
                <span className="text-xs font-bold uppercase tracking-wider hidden lg:block">{item.label}</span>
              </button>
            ))}
          </nav>
        </div>

<div className="hidden lg:block bg-white/5 p-5 rounded-2xl border border-white/10">
          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-4">Inversión Operativa</p>
          <div className="space-y-3">
            <div>
              <p className="text-[9px] text-slate-500 uppercase tracking-widest mb-1">Coste Sistema</p>
              <p className="text-xl font-black text-white">{stats.totalCost.toFixed(2)}€</p>
            </div>
            <div className="pt-3 border-t border-white/10">
              <p className="text-[9px] text-slate-500 uppercase tracking-widest mb-1">Facturado</p>
              <p className="text-lg font-bold text-green-400">{stats.income.toLocaleString("es-ES")}€</p>
            </div>
          </div>
        </div>
      </aside>

{/* MAIN CONTENT */}
      <main className="flex-1 h-screen overflow-y-auto p-6 lg:p-10 pb-32">
        {/* DASHBOARD VIEW */}
        {activeView === "main" && (
          <div className="max-w-6xl mx-auto space-y-10 animate-in fade-in duration-500">
            <header>
              <h1 className="text-4xl font-black tracking-tight text-slate-900">Panel de Control Saliens</h1>
              <p className="text-slate-500 font-medium text-sm mt-1">Resumen de actividad clínica</p>
            </header>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div
                onClick={() => setActiveView("patients")}
                className="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm cursor-pointer hover:border-[#ff5722] hover:shadow-md transition-all"
              >
                <div className="flex justify-between items-start mb-6">
                  <div className="p-3 bg-orange-50 rounded-2xl">
                    <Users className="w-6 h-6 text-[#ff5722]" />
                  </div>
                  <span className="text-green-500 text-xs font-bold">+4%</span>
                </div>
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wider">Pacientes Totales</p>
                <p className="text-4xl font-black text-slate-900">{patients.length}</p>
              </div>

<div
                onClick={() => setActiveView("calendar")}
                className="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm cursor-pointer hover:border-[#5a2d7f] hover:shadow-md transition-all"
              >
                <div className="flex justify-between items-start mb-6">
                  <div className="p-3 bg-purple-50 rounded-2xl">
                    <Calendar className="w-6 h-6 text-[#5a2d7f]" />
                  </div>
                </div>
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wider">Citas Semana</p>
                <p className="text-4xl font-black text-slate-900">{appointments.length}</p>
              </div>

<div
                onClick={() => setActiveView("billing")}
                className="bg-gradient-to-br from-[#2d1b4e] to-[#5a2d7f] p-8 rounded-3xl text-white shadow-xl cursor-pointer hover:scale-[1.02] transition-transform"
              >
                <div className="flex justify-between items-start mb-6">
                  <div className="p-3 bg-white/10 rounded-2xl">
                    <TrendingUp className="w-6 h-6 text-[#ff5722]" />
                  </div>
                </div>
                <p className="text-xs font-bold text-slate-300 uppercase tracking-wider">Facturación Mensual</p>
                <p className="text-4xl font-black">{stats.income.toLocaleString("es-ES")}€</p>
              </div>
            </div>
          </div>
        )}

{/* AGENDA VIEW */}
        {activeView === "calendar" && (
          <div className="max-w-6xl mx-auto space-y-8 animate-in fade-in">
            <header className="flex justify-between items-end">
              <div>
                <h1 className="text-3xl font-black tracking-tight text-slate-900">Agenda Clínica</h1>
                <p className="text-slate-500 font-medium text-sm mt-1">Control de asistencia y horarios</p>
              </div>
              <div className="flex bg-slate-200 p-1 rounded-lg">
                <button
                  onClick={() => setAgendaFilter("today")}
                  className={`px-6 py-2 rounded-md text-xs font-bold uppercase tracking-wider transition-all ${
                    agendaFilter === "today" ? "bg-white text-slate-900 shadow-sm" : "text-slate-500 hover:text-slate-900"
                  }`}
                >
                  Día Actual
                </button>
                <button
                  onClick={() => setAgendaFilter("week")}
                  className={`px-6 py-2 rounded-md text-xs font-bold uppercase tracking-wider transition-all ${
                    agendaFilter === "week" ? "bg-white text-slate-900 shadow-sm" : "text-slate-500 hover:text-slate-900"
                  }`}
                >
                  Vista Semanal
                </button>
              </div>
            </header>

<div className="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-sm">
              <table className="w-full text-left">
                <thead className="bg-slate-50 border-b border-slate-200">
                  <tr className="text-xs font-bold uppercase tracking-wider text-slate-400">
                    <th className="px-8 py-5">Fecha / Hora</th>
                    <th className="px-8 py-5">Paciente</th>
                    <th className="px-8 py-5">Tratamiento</th>
                    <th className="px-8 py-5">Estado</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {filteredAppointments.map((apt) => (
                    <tr key={apt.id} className="hover:bg-slate-50/50 transition-colors">
                      <td className="px-8 py-5">
                        <span className="font-bold text-slate-900">{apt.time}</span>
                        <span className="ml-3 text-xs font-medium text-slate-400 uppercase">{apt.date}</span>
                      </td>
                      <td className="px-8 py-5 font-bold uppercase text-sm">{apt.patient}</td>
                      <td className="px-8 py-5 text-sm text-slate-600">{apt.service}</td>
                      <td className="px-8 py-5">
                        <span
                          className={`text-xs font-bold px-3 py-1 rounded-md uppercase border ${
                            apt.status === "Confirmada"
                              ? "bg-green-50 text-green-700 border-green-200"
                              : "bg-orange-50 text-[#ff5722] border-orange-200"
                          }`}
                        >
                          {apt.status}
                        </span>
                      </td>
                    </tr>
                  ))}
                  {filteredAppointments.length === 0 && (
                    <tr>
                      <td colSpan={4} className="px-8 py-12 text-center text-slate-400 font-medium italic">
                        No hay citas programadas para esta vista.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}

{/* PATIENTS LIST VIEW */}
        {activeView === "patients" && !selectedPatient && (
          <div className="max-w-6xl mx-auto space-y-8 animate-in fade-in">
            <header>
              <h1 className="text-3xl font-black tracking-tight text-slate-900">Directorio de Pacientes</h1>
              <p className="text-slate-500 font-medium text-sm mt-1">Gestión centralizada de base de datos</p>
            </header>

<div className="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-sm">
              <table className="w-full text-left">
                <thead className="bg-slate-50 border-b border-slate-200">
                  <tr className="text-xs font-bold uppercase tracking-wider text-slate-400">
                    <th className="px-8 py-5">ID</th>
                    <th className="px-8 py-5">Nombre</th>
                    <th className="px-8 py-5">Contacto</th>
                    <th className="px-8 py-5">Última Visita</th>
                    <th className="px-8 py-5 text-right">Acción</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {patients.map((p) => (
                    <tr key={p.id} className="hover:bg-slate-50/50 transition-colors">
                      <td className="px-8 py-5 text-xs font-bold text-slate-400">{p.id}</td>
                      <td className="px-8 py-5 font-bold uppercase text-sm">{p.name}</td>
                      <td className="px-8 py-5 text-sm text-slate-500 font-mono">{p.phone}</td>
                      <td className="px-8 py-5 text-sm font-medium text-slate-600">{p.lastVisit}</td>
                      <td className="px-8 py-5 text-right">
                        <button
                          onClick={() => setSelectedPatient(p)}
                          className="px-4 py-2 bg-gradient-to-r from-[#ff5722] to-[#ff7a45] text-white rounded-lg text-xs font-bold uppercase tracking-wider hover:shadow-md transition-all"
                        >
                          Ver Perfil
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

{/* PATIENT DETAIL VIEW */}
        {activeView === "patients" && selectedPatient && (
          <div className="max-w-6xl mx-auto space-y-8 animate-in slide-in-from-right-4 duration-300">
            <button
              onClick={() => setSelectedPatient(null)}
              className="flex items-center text-xs font-bold uppercase tracking-wider text-slate-400 hover:text-slate-900 transition-colors"
            >
              <ArrowLeft className="w-4 h-4 mr-2" /> Volver al Directorio
            </button>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              <div className="lg:col-span-1 space-y-6">
                <div className="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
                  <h2 className="text-2xl font-black uppercase tracking-tight text-slate-900 mb-1">
                    {selectedPatient.name}
                  </h2>
                  <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-6">{selectedPatient.id}</p>

<div className="space-y-4 mb-8">
                    <div className="flex items-center text-sm font-medium text-slate-600">
                      <Phone className="w-4 h-4 mr-3 text-slate-400" /> {selectedPatient.phone}
                    </div>
                    <div className="flex items-center text-sm font-medium text-slate-600">
                      <Timer className="w-4 h-4 mr-3 text-slate-400" /> Última visita: {selectedPatient.lastVisit}
                    </div>
                    <div className="flex items-center text-sm font-medium text-slate-600">
                      <Euro className="w-4 h-4 mr-3 text-slate-400" /> Facturado:{" "}
                      <span className="font-bold text-slate-900 ml-1">{selectedPatient.totalBilled}€</span>
                    </div>
                  </div>

<div>
                    <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 flex items-center">
                      <FileText className="w-3 h-3 mr-2" /> Notas Clínicas
                    </h3>
                    <textarea
                      className="w-full bg-slate-50 border border-slate-200 rounded-xl p-4 text-sm font-medium text-slate-700 outline-none focus:ring-2 focus:ring-[#ff5722] resize-none h-32"
                      defaultValue={selectedPatient.notes}
                      placeholder="Añadir notas internas..."
                    />
                  </div>
                </div>
              </div>

<div className="lg:col-span-2 space-y-6">
                <div className="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
                  <div className="flex justify-between items-center mb-6 border-b border-slate-100 pb-4">
                    <h3 className="text-lg font-black uppercase tracking-tight text-slate-900">Centro de Comunicaciones</h3>
                    <span
                      className={`px-3 py-1 rounded-md text-xs font-bold uppercase tracking-wider border ${
                        waConnected ? "bg-green-50 text-green-700 border-green-200" : "bg-slate-50 text-slate-500 border-slate-200"
                      }`}
                    >
                      {waConnected ? "Dispositivo Conectado" : "Sin Sincronizar"}
                    </span>
                  </div>

{!waConnected ? (
                    <div className="text-center py-8">
                      <div className="w-32 h-32 bg-slate-100 rounded-2xl flex items-center justify-center mx-auto mb-4 border border-slate-200">
                        <QrCode className="w-16 h-16 text-slate-400" />
                      </div>
                      <h4 className="font-bold text-slate-900 mb-2">Vincular Dispositivo Clínico</h4>
                      <p className="text-sm text-slate-500 mb-6 max-w-sm mx-auto">
                        Escanee el código QR con el móvil de la clínica para habilitar mensajería directa por WhatsApp.
                      </p>
                      <button
                        onClick={() => setWaConnected(true)}
                        className="px-6 py-3 bg-gradient-to-r from-[#ff5722] to-[#ff7a45] text-white rounded-xl text-xs font-bold uppercase tracking-wider hover:shadow-md transition-all"
                      >
                        Simular Conexión
                      </button>
                    </div>
                  ) : (
                    <div>
                      <div className="bg-slate-50 rounded-xl p-4 h-48 overflow-y-auto border border-slate-100 mb-4 space-y-3">
                        {selectedPatient.logs.length === 0 ? (
                          <p className="text-sm text-slate-400 text-center mt-16 italic">No hay registros de comunicación.</p>
                        ) : (
                          selectedPatient.logs.map((log, i) => (
                            <div key={i} className="text-sm">
                              <span className="text-xs font-bold text-slate-400 mr-2">[{log.date}]</span>
                              <span
                                className={`text-xs font-bold uppercase mr-2 ${
                                  log.type === "WhatsApp" ? "text-green-600" : "text-blue-600"
                                }`}
                              >
                                {log.type}:
                              </span>
                              <span className="text-slate-700 font-medium">{log.text}</span>
                            </div>
                          ))
                        )}
                      </div>
                      <div className="flex gap-2">
                        <input
                          type="text"
                          value={newLogText}
                          onChange={(e) => setNewLogText(e.target.value)}
                          placeholder="Registrar interacción o enviar mensaje..."
                          className="flex-1 bg-white border border-slate-200 rounded-xl px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#ff5722]"
                        />
                        <button
                          onClick={() => handleAddLog("WhatsApp")}
                          className="p-3 bg-green-600 text-white rounded-xl hover:bg-green-700 transition-colors"
                          title="Enviar WhatsApp"
                        >
                          <MessageSquare className="w-4 h-4" />
                        </button>
                        <button
                          onClick={() => handleAddLog("Llamada")}
                          className="p-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors"
                          title="Registrar Llamada"
                        >
                          <Phone className="w-4 h-4" />
                        </button>
                      </div>
                    </div>
                  )}
                </div>

<div className="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
                  <h3 className="text-lg font-black uppercase tracking-tight text-slate-900 mb-6 border-b border-slate-100 pb-4">
                    Historial Clínico y Facturación
                  </h3>
                  <table className="w-full text-left">
                    <thead>
                      <tr className="text-xs font-bold uppercase tracking-wider text-slate-400">
                        <th className="py-3">Fecha</th>
                        <th className="py-3">Servicio</th>
                        <th className="py-3 text-right">Importe</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {selectedPatient.history.map((h, i) => (
                        <tr key={i}>
                          <td className="py-4 text-sm font-medium text-slate-600">{h.date}</td>
                          <td className="py-4 text-sm font-medium text-slate-800">{h.service}</td>
                          <td className="py-4 text-right text-sm font-bold text-slate-900">
                            {h.amount > 0 ? `${h.amount}€` : "-"}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        )}

{/* MARKETING VIEW */}
        {activeView === "campaigns" && !showEditor && !selectedCampaignMetrics && (
          <div className="max-w-6xl mx-auto space-y-8 animate-in fade-in">
            <div className="flex justify-between items-center">
              <div>
                <h2 className="text-3xl font-black tracking-tight text-slate-900">Campañas de Captación</h2>
                <p className="text-slate-500 text-sm font-medium">Estrategias activas de comunicación</p>
              </div>
              <button
                onClick={() => setShowEditor(true)}
                className="bg-gradient-to-r from-[#ff5722] to-[#ff7a45] text-white px-8 py-4 rounded-xl text-xs font-bold uppercase tracking-wider shadow-lg hover:shadow-xl transition-all flex items-center"
              >
                <Plus className="w-4 h-4 mr-2" /> Nueva Campaña
              </button>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {campaigns.map((camp) => (
                <div key={camp.id} className="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
                  <div className="flex justify-between items-start mb-6">
                    <span
                      className={`px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider border ${
                        camp.status === "Activa"
                          ? "bg-green-50 text-green-600 border-green-100"
                          : "bg-slate-100 text-slate-400 border-slate-200"
                      }`}
                    >
                      {camp.status}
                    </span>
                    <button
                      onClick={() => deleteCampaign(camp.id)}
                      className="p-2 text-slate-300 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                  <h3 className="text-xl font-black text-slate-900 uppercase tracking-tight mb-1">{camp.name}</h3>
                  <p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-8">{camp.segment}</p>

<div className="grid grid-cols-2 gap-4 mb-8">
                    <div className="p-4 bg-slate-50 rounded-2xl border border-slate-100">
                      <p className="text-xs font-bold text-slate-400 uppercase mb-1">Impactos</p>
                      <p className="text-2xl font-black text-slate-900">{camp.sent}</p>
                    </div>
                    <div className="p-4 bg-orange-50 rounded-2xl border border-orange-100">
                      <p className="text-xs font-bold text-[#ff5722] uppercase mb-1">Citas</p>
                      <p className="text-2xl font-black text-[#ff5722]">{camp.conversions}</p>
                    </div>
                  </div>

<div className="flex space-x-3">
                    <button
                      onClick={() => setSelectedCampaignMetrics(camp)}
                      className="flex-1 py-4 bg-gradient-to-r from-[#2d1b4e] to-[#5a2d7f] text-white rounded-xl text-xs font-bold uppercase tracking-wider hover:shadow-md transition-all flex items-center justify-center"
                    >
                      <BarChart3 className="w-4 h-4 mr-2" /> Analítica
                    </button>
                    <button
                      onClick={() => toggleCampaign(camp.id)}
                      className={`flex-1 py-4 rounded-xl text-xs font-bold uppercase tracking-wider transition-all flex items-center justify-center ${
                        camp.status === "Activa"
                          ? "bg-white border border-slate-200 text-slate-600"
                          : "bg-gradient-to-r from-[#ff5722] to-[#ff7a45] text-white shadow-md"
                      }`}
                    >
                      {camp.status === "Activa" ? (
                        <PowerOff className="w-4 h-4 mr-2" />
                      ) : (
                        <Power className="w-4 h-4 mr-2" />
                      )}
                      {camp.status === "Activa" ? "Pausar" : "Activar"}
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

{/* SERVICES VIEW */}
        {activeView === "services" && (
          <div className="max-w-6xl mx-auto space-y-8 animate-in fade-in">
            <div className="flex justify-between items-center">
              <div>
                <h2 className="text-3xl font-black tracking-tight text-slate-900">Cartera de Servicios</h2>
                <p className="text-slate-500 text-sm font-medium">Configuración de tratamientos y precios</p>
              </div>
              <button
                onClick={() =>
                  setServices([
                    ...services,
                    { id: Date.now(), name: "Nuevo Servicio", category: "General", price: 0, duration: "45 min", noShowFee: 0 },
                  ])
                }
                className="bg-gradient-to-r from-[#2d1b4e] to-[#5a2d7f] text-white px-6 py-4 rounded-xl text-xs font-bold uppercase tracking-wider flex items-center hover:shadow-md transition-all"
              >
                <Plus className="w-4 h-4 mr-2" /> Añadir Tratamiento
              </button>
            </div>

<div className="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-sm">
              <table className="w-full">
                <thead>
                  <tr className="bg-slate-50 text-xs font-bold uppercase tracking-wider text-slate-400 border-b border-slate-200">
                    <th className="p-6 text-left">Tratamiento</th>
                    <th className="p-6 text-center">Precio</th>
                    <th className="p-6 text-center">Duración</th>
                    <th className="p-6 text-right">Acciones</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {services.map((srv) => (
                    <tr key={srv.id} className="hover:bg-slate-50/50 transition-colors">
                      <td className="p-6 font-bold text-slate-900">{srv.name}</td>
                      <td className="p-6 text-center font-bold text-slate-700">{srv.price}€</td>
                      <td className="p-6 text-center">
                        <div className="inline-flex items-center bg-slate-100 px-3 py-1 rounded-lg text-xs font-medium text-slate-600">
                          <Timer className="w-3 h-3 mr-2" /> {srv.duration}
                        </div>
                      </td>
                      <td className="p-6 text-right">
                        <button
                          onClick={() => deleteService(srv.id)}
                          className="text-slate-300 hover:text-red-500 transition-colors"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

{/* BILLING VIEW */}
        {activeView === "billing" && (
          <div className="max-w-5xl mx-auto space-y-8 animate-in fade-in">
            <header>
              <h2 className="text-3xl font-black tracking-tight text-slate-900">Registro de Cobros</h2>
              <p className="text-slate-500 text-sm font-medium">Gestión de ingresos y facturas</p>
            </header>

<div className="space-y-4">
              {billingHistory.map((inv) => (
                <div
                  key={inv.id}
                  className="bg-white p-6 rounded-3xl border border-slate-200 flex items-center justify-between shadow-sm"
                >
                  <div className="flex items-center space-x-4">
                    <div
                      className={`w-12 h-12 rounded-2xl flex items-center justify-center ${
                        inv.status === "Pagado" ? "bg-green-50 text-green-600" : "bg-orange-50 text-[#ff5722]"
                      }`}
                    >
                      <Receipt className="w-5 h-5" />
                    </div>
                    <div>
                      <p className="font-bold text-slate-900">{inv.patient}</p>
                      <p className="text-xs font-medium text-slate-400 uppercase tracking-wider">
                        {inv.id} • {inv.type}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-8">
                    <p className="text-xl font-black text-slate-900">{inv.amount.toFixed(2)}€</p>
                    {inv.status === "Pendiente" ? (
                      <button
                        onClick={() => processPayment(inv.id)}
                        disabled={isProcessing === inv.id}
                        className="px-6 py-3 bg-gradient-to-r from-[#ff5722] to-[#ff7a45] text-white rounded-xl text-xs font-bold uppercase tracking-wider hover:shadow-md disabled:opacity-50 transition-all"
                      >
                        {isProcessing === inv.id ? "Procesando..." : "Cobrar"}
                      </button>
                    ) : (
                      <div className="flex items-center text-green-600 bg-green-50 px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-wider">
                        <CheckCircle className="w-3 h-3 mr-2" /> Pagado
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </main>

{/* FOOTER BAR */}
      <footer className="fixed bottom-0 left-0 lg:left-72 right-0 bg-white/80 backdrop-blur-xl border-t border-slate-200 px-10 py-3 flex justify-between items-center z-50">
        <div className="flex items-center space-x-3 text-xs font-bold uppercase text-slate-400 tracking-wider">
          <div className="w-2 h-2 bg-green-500 rounded-full shadow-[0_0_8px_rgba(34,197,94,0.6)]"></div>
          <span>Sistema Operativo Clínico Online</span>
        </div>
        <div className="hidden md:flex items-center space-x-6 text-xs font-medium text-slate-300 uppercase tracking-wider">
          <span>Saliens v1.6.0</span>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/soluciones/page.tsx"
"use client"

import { useState } from "react"
import { ArrowRight, ArrowLeft, Download, Settings, MessageCircle, CheckCircle, Sparkles } from "lucide-react"
import Image from "next/image"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import Link from "next/link"

export default function SolucionesPage() {
  const [step, setStep] = useState(1)
  const [selectedSector, setSelectedSector] = useState<string | null>(null)
  const [selectedModules, setSelectedModules] = useState<string[]>([])
  const [formData, setFormData] = useState({
    email: "",
    password: "",
    businessName: "",
    cif: "",
    address: "",
  })

const sectors = [
    "Clínicas Dentales",
    "Medicina Estética",
    "Fisioterapia",
    "Peluquerías",
    "Automoción",
    "Asesorías",
    "Veterinarias",
    "Restauración",
    "Ópticas",
    "Reparaciones",
  ]

const modules = [
    { id: "recepcion", name: "Recepción Inteligente", desc: "Gestión autónoma de citas" },
    { id: "guardian", name: "Guardián de Asistencia", desc: "Confirmación automática" },
    { id: "escudo", name: "Escudo Anti-Cancelaciones", desc: "Reducción de no-shows" },
    { id: "reactivador", name: "Re-activador Clínico", desc: "Recuperación de pacientes" },
    { id: "terminal", name: "Terminal de Pagos", desc: "Cobro automático" },
    { id: "asistente", name: "Asistente Post-Tratamiento", desc: "Seguimiento inteligente" },
  ]

const handleNext = () => {
    if (step < 5) setStep(step + 1)
  }

const handleBack = () => {
    if (step > 1) setStep(step - 1)
  }

const handleModuleToggle = (id: string) => {
    setSelectedModules(
      selectedModules.includes(id)
        ? selectedModules.filter((m) => m !== id)
        : [...selectedModules, id]
    )
  }

return (
    <div className="flex min-h-screen flex-col">
      <Header />

<div className="mb-8 inline-flex items-center gap-3 px-4 py-2 bg-primary/20 rounded-full border border-primary/40">
                  <Sparkles className="h-5 w-5 text-primary" />
                  <span className="text-sm font-semibold text-primary">Soluciones Modulares de Élite</span>
                </div>

<h1 className="mb-6 text-5xl md:text-6xl font-bold tracking-tight text-balance bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent">
                  El LEGO de Saliens
                </h1>

<p className="mb-8 text-xl text-foreground/80 leading-relaxed max-w-3xl mx-auto">
                  Elige los módulos que tu negocio necesita. Cada uno automatiza una parte crítica de tu operación. Solo pagas por lo que usas: <span className="font-bold text-primary">0,25€ por cliente gestionado</span>.
                </p>

<Button
                  onClick={handleNext}
                  size="lg"
                  className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 px-8 h-14 text-lg shadow-lg gap-2"
                >
                  Configurar mi Plan
                  <ArrowRight className="h-5 w-5" />
                </Button>
              </div>
            </div>
          </section>
        )}

{step === 2 && (
          <section className="py-24 bg-gradient-to-b from-background via-primary/5 to-background">
            <div className="container mx-auto px-4">
              <div className="max-w-4xl mx-auto">
                <div className="mb-12">
                  <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-3">
                    ADN de tu Negocio
                  </h2>
                  <p className="text-lg text-foreground/70">
                    Selecciona tu sector para personalizar la solución
                  </p>
                </div>

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-8">
                  {sectors.map((sector) => (
                    <button
                      key={sector}
                      onClick={() => setSelectedSector(sector)}
                      className={`p-4 rounded-lg font-semibold transition-all border-2 ${
                        selectedSector === sector
                          ? "border-primary bg-primary/10 text-primary"
                          : "border-primary/20 bg-background hover:border-primary/40 text-foreground"
                      }`}
                    >
                      {sector}
                    </button>
                  ))}
                </div>

<div className="flex gap-4 justify-between">
                  <Button
                    variant="outline"
                    onClick={handleBack}
                    className="gap-2"
                  >
                    <ArrowLeft className="h-4 w-4" /> Atrás
                  </Button>
                  <Button
                    onClick={handleNext}
                    disabled={!selectedSector}
                    className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 gap-2"
                  >
                    Siguiente
                    <ArrowRight className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>
          </section>
        )}

{step === 3 && (
          <section className="py-24 bg-gradient-to-b from-primary/5 via-background to-background">
            <div className="container mx-auto px-4">
              <div className="max-w-5xl mx-auto">
                <div className="mb-12">
                  <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-3">
                    Configurador LEGO
                  </h2>
                  <p className="text-lg text-foreground/70 mb-4">
                    Selecciona los módulos que necesitas
                  </p>
                  <div className="inline-block bg-accent/20 border border-accent/40 rounded-lg px-4 py-2">
                    <p className="text-sm font-semibold text-accent">
                      0,25€ por paciente gestionado a través de WhatsApp o Voz
                    </p>
                  </div>
                </div>

<div className="grid md:grid-cols-2 gap-6 mb-8">
                  {modules.map((mod) => (
                    <Card
                      key={mod.id}
                      className={`cursor-pointer transition-all border-2 ${
                        selectedModules.includes(mod.id)
                          ? "border-primary bg-primary/5"
                          : "border-primary/20 hover:border-primary/40"
                      }`}
                      onClick={() => handleModuleToggle(mod.id)}
                    >
                      <CardHeader>
                        <CardTitle className="flex items-center gap-3 text-lg">
                          <input
                            type="checkbox"
                            checked={selectedModules.includes(mod.id)}
                            onChange={() => {}}
                            className="h-5 w-5 cursor-pointer"
                            style={{ accentColor: "var(--primary)" }}
                          />
                          {mod.name}
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="text-foreground/70 text-sm">{mod.desc}</p>
                      </CardContent>
                    </Card>
                  ))}
                </div>

<div className="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl p-6 border border-primary/30 mb-8">
                  <p className="text-foreground">
                    <span className="font-bold text-primary">Ejemplo:</span> Con 8 pacientes/día = 2€/día + 1,45€ base = <span className="font-bold text-primary">3,45€/jornada</span> de automatización completa
                  </p>
                </div>

<div className="flex gap-4 justify-between">
                  <Button
                    variant="outline"
                    onClick={handleBack}
                    className="gap-2"
                  >
                    <ArrowLeft className="h-4 w-4" /> Atrás
                  </Button>
                  <Button
                    onClick={handleNext}
                    disabled={selectedModules.length === 0}
                    className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 gap-2"
                  >
                    Siguiente
                    <ArrowRight className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>
          </section>
        )}

{step === 4 && (
          <section className="py-24 bg-gradient-to-b from-background via-primary/5 to-background">
            <div className="container mx-auto px-4">
              <div className="max-w-2xl mx-auto">
                <div className="mb-12">
                  <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-3">
                    Crear Cuenta
                  </h2>
                  <p className="text-lg text-foreground/70">
                    Completa tu información de acceso y facturación
                  </p>
                </div>

<Card className="border-primary/20 mb-8">
                  <CardHeader>
                    <CardTitle>Información de Acceso</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <label className="block text-sm font-semibold text-foreground mb-2">
                        Email
                      </label>
                      <input
                        type="email"
                        placeholder="tu@email.com"
                        value={formData.email}
                        onChange={(e) =>
                          setFormData({ ...formData, email: e.target.value })
                        }
                        className="w-full px-4 py-2 border border-primary/30 rounded-lg focus:outline-none focus:border-primary"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-foreground mb-2">
                        Contraseña
                      </label>
                      <input
                        type="password"
                        placeholder="Mínimo 8 caracteres"
                        value={formData.password}
                        onChange={(e) =>
                          setFormData({ ...formData, password: e.target.value })
                        }
                        className="w-full px-4 py-2 border border-primary/30 rounded-lg focus:outline-none focus:border-primary"
                      />
                    </div>
                  </CardContent>
                </Card>

<Card className="border-primary/20 mb-8">
                  <CardHeader>
                    <CardTitle>Datos Fiscales</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <label className="block text-sm font-semibold text-foreground mb-2">
                        Razón Social
                      </label>
                      <input
                        type="text"
                        placeholder="Tu empresa"
                        value={formData.businessName}
                        onChange={(e) =>
                          setFormData({ ...formData, businessName: e.target.value })
                        }
                        className="w-full px-4 py-2 border border-primary/30 rounded-lg focus:outline-none focus:border-primary"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-foreground mb-2">
                        CIF/NIF
                      </label>
                      <input
                        type="text"
                        placeholder="X1234567A"
                        value={formData.cif}
                        onChange={(e) =>
                          setFormData({ ...formData, cif: e.target.value })
                        }
                        className="w-full px-4 py-2 border border-primary/30 rounded-lg focus:outline-none focus:border-primary"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-foreground mb-2">
                        Dirección
                      </label>
                      <input
                        type="text"
                        placeholder="Calle, número, ciudad"
                        value={formData.address}
                        onChange={(e) =>
                          setFormData({ ...formData, address: e.target.value })
                        }
                        className="w-full px-4 py-2 border border-primary/30 rounded-lg focus:outline-none focus:border-primary"
                      />
                    </div>
                  </CardContent>
                </Card>

<div className="flex gap-4 justify-between">
                  <Button
                    variant="outline"
                    onClick={handleBack}
                    className="gap-2"
                  >
                    <ArrowLeft className="h-4 w-4" /> Atrás
                  </Button>
                  <Button
                    onClick={handleNext}
                    disabled={
                      !formData.email ||
                      !formData.password ||
                      !formData.businessName ||
                      !formData.cif
                    }
                    className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 gap-2"
                  >
                    Activar mi Mes Gratis
                    <ArrowRight className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>
          </section>
        )}

{step === 5 && (
          <section className="py-24 bg-gradient-to-b from-primary/5 via-background to-background">
            <div className="container mx-auto px-4">
              <div className="max-w-5xl mx-auto">
                
                <div className="mb-16 text-center">
                  <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-4">
                    Panel de Control Saliens
                  </h1>
                  <p className="text-xl text-foreground/70 mb-6">
                    Bienvenido, <span className="font-bold text-primary">{formData.businessName}</span>
                  </p>
                  
                  <div className="inline-flex items-center gap-3 px-6 py-3 bg-emerald-50 border border-emerald-200 rounded-full">
                    <CheckCircle className="h-5 w-5 text-emerald-600" />
                    <span className="font-semibold text-emerald-700">Estado: Sistema Activo | 1er Mes Gratis</span>
                  </div>
                </div>

<div className="grid md:grid-cols-3 gap-6 mb-12">
                  
                  <Card className="border-primary/20 hover:shadow-lg transition-all cursor-pointer group">
                    <CardHeader className="pb-4">
                      <div className="mb-4 p-3 bg-primary/10 rounded-lg w-fit">
                        <Download className="h-6 w-6 text-primary" />
                      </div>
                      <CardTitle className="text-lg">Importar CSV</CardTitle>
                      <CardDescription>Carga tu base de datos de pacientes</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-foreground/70 mb-4">
                        Activa la reactivación automática de pacientes con un solo clic
                      </p>
                      <Button size="sm" className="w-full bg-primary hover:bg-primary/90">
                        Cargar archivo
                      </Button>
                    </CardContent>
                  </Card>

<Card className="border-primary/20 hover:shadow-lg transition-all cursor-pointer group">
                    <CardHeader className="pb-4">
                      <div className="mb-4 p-3 bg-primary/10 rounded-lg w-fit">
                        <Settings className="h-6 w-6 text-primary" />
                      </div>
                      <CardTitle className="text-lg">Configurar Precios</CardTitle>
                      <CardDescription>Define tus servicios y tratamientos</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-foreground/70 mb-4">
                        Tabla de tratamientos dentales y tarificación automática
                      </p>
                      <Button size="sm" className="w-full bg-primary hover:bg-primary/90">
                        Configurar
                      </Button>
                    </CardContent>
                  </Card>

<Card className="border-primary/20 hover:shadow-lg transition-all cursor-pointer group">
                    <CardHeader className="pb-4">
                      <div className="mb-4 p-3 bg-primary/10 rounded-lg w-fit">
                        <MessageCircle className="h-6 w-6 text-primary" />
                      </div>
                      <CardTitle className="text-lg">Vincular WhatsApp</CardTitle>
                      <CardDescription>Automatización de mensajes inteligentes</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-foreground/70 mb-4">
                        Escanea el código QR para conectar tu cuenta de WhatsApp
                      </p>
                      <Button size="sm" className="w-full bg-primary hover:bg-primary/90">
                        Generar QR
                      </Button>
                    </CardContent>
                  </Card>
                </div>

<div className="bg-gradient-to-r from-emerald-50 to-emerald-50/50 border-2 border-emerald-200 rounded-xl p-8 mb-12">
                  <div className="flex items-start gap-4">
                    <div className="mt-1">
                      <CheckCircle className="h-8 w-8 text-emerald-600" />
                    </div>
                    <div className="flex-1">
                      <h3 className="text-xl font-bold text-foreground mb-2">Sistema Listo para Procesar Datos</h3>
                      <p className="text-foreground/80">
                        Tu plataforma IA está activa y lista para automatizar todas tus operaciones. Una vez hayas cargado tu base de datos de pacientes y configurado tus servicios, la inteligencia artificial comenzará a optimizar tus procesos en tiempo real.
                      </p>
                      <div className="mt-4 flex items-center gap-2 text-emerald-700 font-semibold">
                        <span className="h-2 w-2 bg-emerald-600 rounded-full animate-pulse"></span>
                        Sistema monitoreado activamente
                      </div>
                    </div>
                  </div>
                </div>

<div className="bg-primary/5 border border-primary/20 rounded-xl p-8 mb-12">
                  <h3 className="text-lg font-bold text-foreground mb-3">Próximos Pasos</h3>
                  <ol className="space-y-3 text-foreground/80">
                    <li className="flex gap-3">
                      <span className="font-bold text-primary">1.</span>
                      <span>Carga tu base de datos (paso: Importar CSV)</span>
                    </li>
                    <li className="flex gap-3">
                      <span className="font-bold text-primary">2.</span>
                      <span>Configura tus servicios y precios</span>
                    </li>
                    <li className="flex gap-3">
                      <span className="font-bold text-primary">3.</span>
                      <span>Conecta WhatsApp para notificaciones automáticas</span>
                    </li>
                    <li className="flex gap-3">
                      <span className="font-bold text-primary">4.</span>
                      <span>Observa cómo la IA automatiza tu negocio en 24 horas</span>
                    </li>
                  </ol>
                </div>

<div className="flex gap-4 justify-between">
                  <Button
                    variant="outline"
                    onClick={handleBack}
                    className="gap-2"
                  >
                    <ArrowLeft className="h-4 w-4" /> Atrás
                  </Button>
                  <Button
                    asChild
                    className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 gap-2"
                  >
                    <Link href="/soluciones/dashboard" className="flex items-center gap-2">
                      Ir al Dashboard Completo
                      <ArrowRight className="h-4 w-4" />
                    </Link>
                  </Button>
                </div>
              </div>
            </div>
          </section>
        )}
      </main>