Improve teh securty of teh DB

frontend/src/pages/public/CareersPage.tsx

@@ -22,136 +22,48 @@ import {
   BarChart3
 } from 'lucide-react';
 
-interface JobOpening {
-  id: string;
-  title: string;
-  department: string;
-  location: string;
-  type: string;
-  salary?: string;
-  description: string;
-  requirements: string[];
-  niceToHave: string[];
-  icon: React.ComponentType<{ className?: string }>;
-}
-
 const CareersPage: React.FC = () => {
   const { t } = useTranslation();
 
-  const benefits = [
-    {
-      icon: Laptop,
-      title: 'Trabajo Remoto',
-      description: '100% remoto o híbrido según prefieras. Tenemos oficina en Bilbao pero puedes trabajar desde donde quieras.',
-    },
-    {
-      icon: Clock,
-      title: 'Horario Flexible',
-      description: 'Enfócate en resultados, no en horas. Organiza tu día como mejor funcione para ti.',
-    },
-    {
-      icon: Euro,
-      title: 'Salario Competitivo',
-      description: 'Sueldos por encima de mercado + equity en la empresa para fundadores tempranos.',
-    },
-    {
-      icon: TrendingUp,
-      title: 'Crecimiento Real',
-      description: 'Somos una startup en fase temprana. Aquí aprendes rápido y tu impacto se ve directamente.',
-    },
+  const visionPoints = [
     {
       icon: Heart,
-      title: 'Propósito',
-      description: 'Ayuda a negocios reales a prosperar. Tu trabajo tiene impacto tangible en familias.',
+      title: 'Propósito Claro',
+      description: 'Ayudar a panaderías de todos los tamaños a prosperar mediante tecnología de IA accesible y fácil de usar.',
+    },
+    {
+      icon: Zap,
+      title: 'Ejecución Ágil',
+      description: 'Como emprendedor en solitario, puedo tomar decisiones rápidas y adaptarme a las necesidades reales de los clientes.',
     },
     {
       icon: Users,
-      title: 'Equipo Pequeño',
-      description: 'Sin burocracia, sin reuniones inútiles. Decisiones rápidas, ejecución directa.',
+      title: 'Enfoque en el Cliente',
+      description: 'Contacto directo con cada panadería piloto. Tu feedback moldea directamente el producto.',
+    },
+    {
+      icon: TrendingUp,
+      title: 'Visión a Largo Plazo',
+      description: 'Construyendo una empresa sostenible que genere impacto real, no solo crecimiento rápido.',
     },
   ];
 
-  const openPositions: JobOpening[] = [
+  const futureRoles = [
     {
-      id: '1',
-      title: 'Full Stack Developer (React + Python)',
-      department: 'Ingeniería',
-      location: 'Remoto (España)',
-      type: 'Tiempo completo',
-      salary: '€45,000 - €65,000 + equity',
-      description: 'Buscamos un desarrollador full-stack que nos ayude a construir la mejor plataforma de gestión para panaderías de todos los tamaños y modelos. Trabajarás directamente con los fundadores y tendrás ownership completo de features.',
-      requirements: [
-        '3+ años de experiencia con React y TypeScript',
-        '2+ años con Python (FastAPI, Flask o Django)',
-        'Experiencia con bases de datos (PostgreSQL)',
-        'Git, CI/CD, testing',
-        'Capacidad de trabajar autónomamente',
-      ],
-      niceToHave: [
-        'Experiencia con ML/IA',
-        'Background en startups',
-        'Conocimiento del sector F&B/hostelería',
-        'Contribuciones open source',
-      ],
       icon: Code,
+      title: 'Desarrollo de Software',
+      description: 'Full-stack developers, ML engineers y especialistas en IA cuando lleguemos a la escala adecuada.',
     },
     {
-      id: '2',
-      title: 'ML Engineer (Predicción de Demanda)',
-      department: 'IA/ML',
-      location: 'Remoto (España)',
-      type: 'Tiempo completo',
-      salary: '€50,000 - €70,000 + equity',
-      description: 'Lidera el desarrollo de nuestros algoritmos de predicción. Trabajarás con datos reales de panaderías (locales y obradores centrales) para crear modelos que predicen demanda con >90% precisión, tanto a nivel individual como agregado.',
-      requirements: [
-        'MSc o PhD en CS, Matemáticas, o similar',
-        '3+ años trabajando con ML en producción',
-        'Experiencia con time series forecasting',
-        'Python (scikit-learn, TensorFlow/PyTorch)',
-        'SQL y manejo de grandes datasets',
-      ],
-      niceToHave: [
-        'Publicaciones en ML/IA',
-        'Experiencia con MLOps',
-        'Background en retail/forecasting/supply chain',
-        'Kaggle competitions',
-      ],
-      icon: BarChart3,
-    },
-    {
-      id: '3',
-      title: 'Product Designer (UI/UX)',
-      department: 'Diseño',
-      location: 'Remoto (España)',
-      type: 'Freelance/Tiempo parcial',
-      salary: '€30,000 - €45,000 (parcial)',
-      description: 'Diseña interfaces que panaderos puedan usar incluso con las manos llenas de harina. Necesitamos UX/UI funcional, intuitivo y hermoso para usuarios no-técnicos.',
-      requirements: [
-        '3+ años diseñando productos digitales',
-        'Portfolio con casos de estudio reales',
-        'Experiencia con Figma',
-        'Conocimiento de design systems',
-        'User research y testing',
-      ],
-      niceToHave: [
-        'Experiencia en B2B/SaaS',
-        'Conocimiento de front-end (HTML/CSS)',
-        'Ilustración/motion design',
-        'Background en F&B/hostelería',
-      ],
       icon: Palette,
+      title: 'Diseño de Producto',
+      description: 'Diseñadores UX/UI que entiendan las necesidades de negocios reales y usuarios no técnicos.',
+    },
+    {
+      icon: BarChart3,
+      title: 'Customer Success',
+      description: 'Expertos que ayuden a las panaderías a sacar el máximo provecho de la plataforma.',
     },
-  ];
-
-  const cultureFacts = [
-    'Somos un equipo de 5 personas (por ahora)',
-    'Promedio de edad: 32 años',
-    'Daily standups de 10 minutos máximo',
-    '80% del equipo trabaja remoto',
-    'Viernes terminamos a las 14:00',
-    'Budget para cursos y conferencias',
-    'Equipo multilingüe (ES/EN/EU)',
-    'Sin dress code (incluso en videollamadas)',
   ];
 
   return (
@@ -171,214 +83,155 @@ const CareersPage: React.FC = () => {
           <div className="text-center max-w-4xl mx-auto">
             <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
               <Briefcase className="w-4 h-4" />
-              <span>Estamos Contratando</span>
+              <span>Emprendimiento en Solitario</span>
             </div>
             <h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
-              Construye el Futuro de
-              <span className="block text-[var(--color-primary)]">las Panaderías</span>
+              Construyendo el Futuro
+              <span className="block text-[var(--color-primary)]">Paso a Paso</span>
             </h1>
             <p className="text-xl text-[var(--text-secondary)] leading-relaxed mb-8">
-              Únete a una startup en fase temprana que combina IA, sostenibilidad y pasión por ayudar a negocios reales de todos los tamaños.
-              Somos pequeños, ágiles y con un propósito claro.
+              Panadería IA es actualmente un proyecto en solitario, enfocado en crear la mejor herramienta
+              de IA para panaderías mediante contacto directo con clientes y ejecución ágil. Cuando llegue
+              el momento adecuado, construiré un equipo que comparta esta visión.
             </p>
             <div className="flex items-center justify-center gap-6 text-sm text-[var(--text-tertiary)]">
               <div className="flex items-center gap-2">
                 <MapPin className="w-4 h-4" />
-                <span>Remoto/Híbrido</span>
+                <span>Madrid, España</span>
               </div>
               <div className="flex items-center gap-2">
                 <Users className="w-4 h-4" />
-                <span>Equipo de 5</span>
+                <span>Emprendedor Solo</span>
               </div>
               <div className="flex items-center gap-2">
                 <Globe className="w-4 h-4" />
-                <span>100% España</span>
+                <span>Visión Global</span>
               </div>
             </div>
           </div>
         </div>
       </section>
 
-      {/* Benefits */}
+      {/* Current State */}
       <section className="py-20 bg-[var(--bg-primary)]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
             <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
-              ¿Por Qué Trabajar Con Nosotros?
+              El Enfoque Actual
             </h2>
             <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
-              Beneficios reales, no promesas vacías
+              Por qué un emprendedor en solitario puede ser la mejor opción en esta fase
             </p>
           </div>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {benefits.map((benefit, index) => (
+          <div className="grid md:grid-cols-2 gap-8">
+            {visionPoints.map((point, index) => (
               <div
                 key={index}
                 className="bg-[var(--bg-secondary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all duration-300"
               >
                 <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center mb-4">
-                  <benefit.icon className="w-6 h-6 text-[var(--color-primary)]" />
+                  <point.icon className="w-6 h-6 text-[var(--color-primary)]" />
                 </div>
-                <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">{benefit.title}</h3>
-                <p className="text-sm text-[var(--text-secondary)]">{benefit.description}</p>
+                <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">{point.title}</h3>
+                <p className="text-sm text-[var(--text-secondary)]">{point.description}</p>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* Open Positions */}
+      {/* Future Vision */}
       <section className="py-20 bg-[var(--bg-secondary)]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
             <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
-              Posiciones Abiertas
+              El Futuro del Equipo
             </h2>
-            <p className="text-xl text-[var(--text-secondary)]">
-              {openPositions.length} vacantes disponibles
+            <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
+              Actualmente no estoy contratando, pero cuando llegue el momento adecuado (tras validar el producto con clientes reales
+              y alcanzar product-market fit), buscaré talento excepcional en estas áreas
             </p>
           </div>
 
-          <div className="space-y-6">
-            {openPositions.map((job) => (
-              <div
-                key={job.id}
-                className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)] transition-all duration-300"
-              >
-                <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
-                  {/* Left: Job Info */}
-                  <div className="flex-1">
-                    <div className="flex items-start gap-4 mb-4">
-                      <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center flex-shrink-0">
-                        <job.icon className="w-6 h-6 text-[var(--color-primary)]" />
-                      </div>
-                      <div>
-                        <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-2">{job.title}</h3>
-                        <div className="flex flex-wrap items-center gap-4 text-sm text-[var(--text-secondary)]">
-                          <span className="inline-flex items-center gap-1">
-                            <Briefcase className="w-4 h-4" />
-                            {job.department}
-                          </span>
-                          <span className="inline-flex items-center gap-1">
-                            <MapPin className="w-4 h-4" />
-                            {job.location}
-                          </span>
-                          <span className="inline-flex items-center gap-1">
-                            <Clock className="w-4 h-4" />
-                            {job.type}
-                          </span>
-                          {job.salary && (
-                            <span className="inline-flex items-center gap-1 text-[var(--color-primary)] font-medium">
-                              <Euro className="w-4 h-4" />
-                              {job.salary}
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-
-                    <p className="text-[var(--text-secondary)] mb-6">{job.description}</p>
-
-                    <div className="grid md:grid-cols-2 gap-6">
-                      {/* Requirements */}
-                      <div>
-                        <h4 className="font-bold text-[var(--text-primary)] mb-3">Requisitos:</h4>
-                        <ul className="space-y-2">
-                          {job.requirements.map((req, i) => (
-                            <li key={i} className="flex items-start gap-2 text-sm text-[var(--text-secondary)]">
-                              <Award className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
-                              <span>{req}</span>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-
-                      {/* Nice to Have */}
-                      <div>
-                        <h4 className="font-bold text-[var(--text-primary)] mb-3">Valorable:</h4>
-                        <ul className="space-y-2">
-                          {job.niceToHave.map((item, i) => (
-                            <li key={i} className="flex items-start gap-2 text-sm text-[var(--text-secondary)]">
-                              <Zap className="w-4 h-4 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
-                              <span>{item}</span>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Right: Apply Button */}
-                  <div className="flex flex-col gap-3 lg:min-w-[200px]">
-                    <a
-                      href={`mailto:careers@panaderia-ia.com?subject=Aplicación: ${job.title}`}
-                      className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-[var(--color-primary)] text-white rounded-xl font-bold hover:bg-[var(--color-primary-dark)] transition-all hover:scale-105"
-                    >
-                      <Mail className="w-5 h-5" />
-                      <span>Aplicar</span>
-                    </a>
-                    <Link
-                      to="/demo"
-                      className="inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-[var(--border-primary)] text-[var(--text-primary)] rounded-xl font-medium hover:border-[var(--color-primary)] transition-all text-center"
-                    >
-                      <span>Ver Producto</span>
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Culture */}
-      <section className="py-20 bg-[var(--bg-primary)]">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
-              Nuestra Cultura
-            </h2>
-            <p className="text-xl text-[var(--text-secondary)]">
-              Datos reales, sin marketing
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-2 gap-4">
-            {cultureFacts.map((fact, index) => (
+          <div className="grid md:grid-cols-3 gap-8 mb-12">
+            {futureRoles.map((role, index) => (
               <div
                 key={index}
-                className="flex items-center gap-3 bg-[var(--bg-secondary)] p-4 rounded-lg border border-[var(--border-primary)]"
+                className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all duration-300"
               >
-                <Coffee className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0" />
-                <span className="text-[var(--text-secondary)]">{fact}</span>
+                <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center mb-4">
+                  <role.icon className="w-6 h-6 text-[var(--color-primary)]" />
+                </div>
+                <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">{role.title}</h3>
+                <p className="text-sm text-[var(--text-secondary)]">{role.description}</p>
               </div>
             ))}
           </div>
+
+          <div className="max-w-3xl mx-auto bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8 border-2 border-blue-200 dark:border-blue-800">
+            <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-4 text-center">
+              ¿Por Qué Aún No Contrato?
+            </h3>
+            <div className="space-y-4 text-[var(--text-secondary)]">
+              <p className="flex items-start gap-3">
+                <Award className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
+                <span><strong>Validación primero:</strong> Necesito confirmar que el producto realmente resuelve problemas reales antes de escalar el equipo.</span>
+              </p>
+              <p className="flex items-start gap-3">
+                <Award className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
+                <span><strong>Recursos limitados:</strong> Como emprendedor bootstrapped, cada euro cuenta. Prefiero invertir en producto y clientes ahora.</span>
+              </p>
+              <p className="flex items-start gap-3">
+                <Award className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
+                <span><strong>Agilidad máxima:</strong> En esta fase, puedo pivotar rápidamente y experimentar sin la complejidad de coordinar un equipo.</span>
+              </p>
+              <p className="flex items-start gap-3">
+                <Award className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
+                <span><strong>El equipo adecuado:</strong> Cuando contrate, buscaré personas que compartan la visión, no solo habilidades técnicas.</span>
+              </p>
+            </div>
+          </div>
         </div>
       </section>
 
-      {/* CTA */}
+      {/* CTA - Join as Customer */}
       <section className="py-20 bg-gradient-to-r from-[var(--color-primary)] to-orange-600">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
           <h2 className="text-3xl lg:text-4xl font-bold text-white mb-6">
-            ¿No Ves Tu Posición Ideal?
+            ¿Quieres Ser Parte de Esta Historia?
           </h2>
           <p className="text-xl text-white/90 mb-8 leading-relaxed">
-            Siempre estamos abiertos a conocer talento excepcional.
-            Envíanos tu CV y cuéntanos por qué quieres unirte a Panadería IA.
-          </p>
-          <a
-            href="mailto:careers@panaderia-ia.com?subject=Aplicación Espontánea"
-            className="inline-flex items-center gap-2 px-8 py-4 bg-white text-[var(--color-primary)] rounded-xl font-bold hover:shadow-2xl transition-all hover:scale-105"
-          >
-            <Mail className="w-5 h-5" />
-            <span>Enviar Aplicación Espontánea</span>
-            <ArrowRight className="w-5 h-5" />
-          </a>
-          <p className="text-white/80 text-sm mt-6">
-            careers@panaderia-ia.com
+            Ahora mismo, la mejor forma de unirte es como cliente piloto. Ayúdame a construir
+            la mejor herramienta de IA para panaderías, obtén 3 meses gratis y 20% de descuento de por vida.
           </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
+            <Link
+              to="/register"
+              className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-[var(--color-primary)] rounded-xl font-bold hover:shadow-2xl transition-all hover:scale-105"
+            >
+              <span>Únete al Programa Piloto</span>
+              <ArrowRight className="w-5 h-5" />
+            </Link>
+            <Link
+              to="/about"
+              className="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-white text-white rounded-xl font-bold hover:bg-white hover:text-[var(--color-primary)] transition-all"
+            >
+              <span>Conoce al Fundador</span>
+            </Link>
+          </div>
+          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 max-w-2xl mx-auto">
+            <p className="text-white/90 text-sm mb-4">
+              <strong>¿Interesado en oportunidades futuras?</strong>
+            </p>
+            <p className="text-white/80 text-sm">
+              Si te interesa formar parte del equipo cuando llegue el momento, puedes escribirme a{' '}
+              <a href="mailto:urtzi@panaderia-ia.com" className="underline font-medium">
+                urtzi@panaderia-ia.com
+              </a>{' '}
+              para mantenernos en contacto.
+            </p>
+          </div>
         </div>
       </section>
     </PublicLayout>