File size: 9,042 Bytes
7774b22
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
"use client";

import { useState } from "react";
import { syncDatabase } from "../lib/api";

export default function SystemInfo() {
  const [isSyncing, setIsSyncing] = useState(false);
  const [syncStatus, setSyncStatus] = useState<string | null>(null);
  const [debugInfo, setDebugInfo] = useState<string>("");

  const testConnection = async () => {
    try {
      const res1 = await fetch("/api/health");
      const healthData = await res1.json();
      
      const res2 = await fetch("/api/health/db-status");
      const dbData = await res2.json();
      
      setDebugInfo(`Health: ${JSON.stringify(healthData)} | DB: ${JSON.stringify(dbData)}`);
    } catch (e: any) {
      setDebugInfo(`Connection Failed: ${e.message}`);
    }
  };

  const handleSync = async () => {
    setIsSyncing(true);
    setSyncStatus("Syncing...");
    try {
      await syncDatabase();
      setSyncStatus("Success! Refreshing...");
      setTimeout(() => window.location.reload(), 1500);
    } catch (e) {
      setSyncStatus("Failed to sync.");
      console.error(e);
    } finally {
      setIsSyncing(false);
    }
  };
  const techStack = [
    { name: "FastAPI", role: "Backend Engine", desc: "Python framework for AI orchestration and DB persistence." },
    { name: "Next.js 14", role: "Frontend Framework", desc: "Modern React architecture for premium procurement UX." },
    { name: "Gemini 2.5 Flash", role: "Logic Intelligence", desc: "High-speed reasoning for Legal and Strategic agents." },
    { name: "DeepSeek-V3", role: "Technical Specialist", desc: "Elite model for technical tender understanding via Groq/Featherless." },
    { name: "SQLite", role: "Local Persistence", desc: "Persistent local storage for high-speed search operations." },
    { name: "Groq", role: "Inference Engine", desc: "LPU architecture for ultra-fast agent response times." },
  ];

  const agentTeam = [
    { name: "Dra. Legal", model: "Gemini 2.5 Flash", desc: "Muy precisa en reglas y cumplimiento de bases administrativas." },
    { name: "Ing. Tech", model: "DeepSeek-V3.2", desc: "Especialista en entender requerimientos técnicos complejos y arquitectura." },
    { name: "Sra. Estrategia", model: "Qwen-2.5", desc: "Optimizado para análisis de datos, mercado e impacto comercial." },
  ];

  return (
    <div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
      {/* Brand & Personal Bio Section */}
      <div className="glass-card rounded-3xl p-8 md:p-12 border border-white/10 relative overflow-hidden">
        <div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-purple-500/10 blur-[100px]" />
        
        <div className="grid md:grid-cols-2 gap-12 items-center relative z-10">
          <div className="space-y-6">
            <div className="flex items-center gap-4">
              <div className="w-16 h-16 premium-gradient rounded-2xl flex items-center justify-center text-white font-black text-2xl shadow-xl shadow-purple-500/40">
                RV
              </div>
              <div>
                <h2 className="text-3xl font-black text-white tracking-tighter">Alvaro Valenzuela Valdez</h2>
                <p className="text-purple-400 text-xs font-bold uppercase tracking-widest">IT Engineer | CEO @ REW.cl</p>
              </div>
            </div>

            <div className="space-y-4 text-slate-300 leading-relaxed">
              <p>
                Ingeniero Informático chileno de 31 años, apasionado por la convergencia entre la Inteligencia Artificial y el desarrollo de software de alto impacto. 
              </p>
              <p>
                Como líder en <span className="text-white font-bold italic">REW Agency</span>, me especializo en orquestar soluciones que transforman la forma en que las empresas interactúan con el mercado público y digital, integrando <span className="text-cyan font-semibold">IA Agentica</span>, <span className="text-cyan font-semibold">Ads Strategies</span> y <span className="text-cyan font-semibold">Custom Software</span>.
              </p>
            </div>

            <div className="flex flex-wrap gap-4 pt-4">
              <a href="https://rew.cl" target="_blank" className="flex items-center gap-2 px-5 py-3 rounded-xl bg-cyan text-slate-950 font-bold hover:bg-white transition-all">
                <span>Visit REW.cl</span>
                <span className="text-lg">🔗</span>
              </a>
              <a href="https://github.com/REWCHILE" target="_blank" className="flex items-center gap-2 px-5 py-3 rounded-xl bg-white/5 border border-white/10 text-white font-bold hover:bg-white/10 transition-all">
                <span>GitHub</span>
                <span className="text-lg">🐙</span>
              </a>
            </div>
            
            <div className="pt-4 flex items-center gap-3 text-slate-500">
              <span className="text-lg">📍</span>
              <span className="text-xs font-bold uppercase tracking-widest">Chile | Global Operations</span>
            </div>
          </div>

          <div className="flex flex-col items-center justify-center">
             <div className="relative group">
                <div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-cyan-600 rounded-full blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
                <div className="relative w-64 h-64 rounded-full overflow-hidden border-2 border-white/10 bg-slate-900 flex items-center justify-center">
                  {/* I will replace this with the Generated Superhero Image in the next step */}
                  <img 
                    src="https://raw.githubusercontent.com/REWCHILE/AndesOps-AI/main/frontend/public/superhero_avatar.png" 
                    alt="Alvaro Tech Superhero" 
                    className="w-full h-full object-cover"
                    onError={(e) => {
                      (e.target as HTMLImageElement).src = "https://ui-avatars.com/api/?name=Alvaro+Valenzuela&background=0f172a&color=fff&size=512";
                    }}
                  />
                </div>
             </div>
             <p className="mt-6 text-[10px] font-black uppercase tracking-[0.3em] text-slate-500">Project Founder & Lead Architect</p>
          </div>
        </div>
      </div>

      {/* Agents Section */}
      <div className="space-y-6">
        <h3 className="text-[10px] font-black uppercase tracking-[0.5em] text-slate-600 text-center">Proprietary Agentic Architecture</h3>
        <div className="grid gap-6 md:grid-cols-3">
          {agentTeam.map((agent) => (
            <div key={agent.name} className="glass-card rounded-3xl p-8 border border-purple-500/10 bg-purple-500/[0.02] relative overflow-hidden group hover:border-purple-500/40 transition-all">
              <div className="absolute top-0 right-0 w-24 h-24 bg-purple-500/5 blur-3xl" />
              <div className="text-[9px] font-black uppercase tracking-widest text-purple-400 mb-2">{agent.model}</div>
              <h3 className="text-xl font-bold text-white mb-2">{agent.name}</h3>
              <p className="text-sm text-slate-400 leading-relaxed">{agent.desc}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Tech Grid */}
      <div className="grid gap-6 md:grid-cols-3">
        {techStack.map((tech) => (
          <div key={tech.name} className="glass-card rounded-3xl p-8 border border-white/5 hover:border-cyan-500/30 transition-all duration-300">
            <div className="text-[10px] font-black uppercase tracking-widest text-cyan-400 mb-2">{tech.role}</div>
            <h3 className="text-xl font-bold text-white mb-2">{tech.name}</h3>
            <p className="text-sm text-slate-500 leading-relaxed">{tech.desc}</p>
          </div>
        ))}
      </div>

      {/* Legal & Status */}
      <div className="glass-card rounded-3xl p-8 border border-white/5 bg-white/[0.01]">
        <div className="flex flex-col md:flex-row items-center justify-between gap-8">
          <div className="flex items-center gap-4">
            <div className="h-3 w-3 rounded-full bg-green-500 animate-pulse shadow-[0_0_10px_rgba(34,197,94,0.5)]" />
            <div>
              <p className="text-sm font-bold text-white tracking-tight">System Status: Operational</p>
              <p className="text-[10px] text-slate-500 font-mono">v1.2.0 | REW_INT_PIPELINE_ACTIVE</p>
            </div>
          </div>
          <div className="text-center md:text-right">
             <p className="text-[10px] font-bold uppercase tracking-widest text-slate-600 mb-1">Licensing & Intellectual Property</p>
             <p className="text-sm font-bold text-slate-400 tracking-tighter">
               Released under <span className="text-white">MIT License</span> for Hackathon 2026.
               <br />
               © {new Date().getFullYear()} REW Agency Chile. All Rights Reserved.
             </p>
          </div>
        </div>
      </div>
    </div>
  );
}