const { useState, useEffect, useRef, useMemo } = React;

/* ───────── copy ───────── */
const COPY = {
  es: {
    role: "Software Engineer · Red Team & Offensive Security",
    loc: "Argentina · Disponible remoto",
    status: "Disponible para engagements",
    bio: "Especialista en identificación, análisis y explotación de vulnerabilidades en aplicaciones web, APIs y entornos cloud (AWS). Construyo sistemas resilientes mediante emulación de adversarios y pruebas de penetración técnicas.",
    ctaPrimary: "Contactar",
    ctaSecondary: "Ver en GitHub",
    sections: {
      about: "sobre",
      stack: "stack",
      projects: "proyectos",
      contact: "contacto"
    },
    stackTitle: "Stack técnico",
    stackSub: "Herramientas, lenguajes y dominios de operación",
    projectsTitle: "Proyectos seleccionados",
    projectsSub: "Trabajo propio — investigación, tooling y auditoría",
    contactTitle: "Iniciar conversación",
    contactSub: "Para engagements, colaboraciones o reports responsables",
  },
  en: {
    role: "Software Engineer · Red Team & Offensive Security",
    loc: "Argentina · Remote available",
    status: "Available for engagements",
    bio: "Specialist in identifying, analyzing and exploiting vulnerabilities across web apps, APIs and cloud environments (AWS). I build resilient systems through adversary emulation and technical penetration testing.",
    ctaPrimary: "Get in touch",
    ctaSecondary: "View on GitHub",
    sections: { about: "about", stack: "stack", projects: "projects", contact: "contact" },
    stackTitle: "Technical stack",
    stackSub: "Tools, languages and domains of operation",
    projectsTitle: "Selected projects",
    projectsSub: "Own work — research, tooling and auditing",
    contactTitle: "Start a conversation",
    contactSub: "For engagements, collaborations or responsible reports",
  }
};

/* ───────── data ───────── */
const STACK = [
  {
    group: "Development",
    code: "DEV",
    items: [
      { name: "TypeScript", tag: "primary" },
      { name: "Python",     tag: "primary" },
      { name: "Bash",       tag: "primary" },
      { name: "Node.js",    tag: "support" },
      { name: "Go",         tag: "support" },
    ]
  },
  {
    group: "Offensive Security",
    code: "SEC",
    items: [
      { name: "Web Pentesting",      tag: "primary" },
      { name: "API Security",        tag: "primary" },
      { name: "Network Exploitation",tag: "primary" },
      { name: "Cloud Security · AWS",tag: "primary" },
      { name: "Adversary Emulation", tag: "support" },
    ]
  },
  {
    group: "Toolchain",
    code: "OPS",
    items: [
      { name: "Burp Suite",  tag: "primary" },
      { name: "Nmap",        tag: "primary" },
      { name: "Metasploit",  tag: "primary" },
      { name: "OWASP ZAP",   tag: "support" },
      { name: "sqlmap",      tag: "support" },
      { name: "Wireshark",   tag: "support" },
    ]
  },
];

const PROJECTS = [
  {
    id: "thesis",
    featured: true,
    code: "THESIS / 2024",
    title: "Detección y análisis de estafas digitales",
    kind: "Tesis de grado",
    summary: "Plataforma en TypeScript + Python que ingiere señales públicas, clasifica patrones de fraude digital y correlaciona indicadores de campañas de ingeniería social, suplantación y phishing con un motor de análisis modular.",
    tech: ["TypeScript", "Python", "Node", "ML", "OSINT"],
    surface: ["Threat intel", "URL reputation", "Content heuristics", "Reporting"],
    meta: [
      { k: "lang",    v: "TS · Py" },
      { k: "status",  v: "shipped" },
      { k: "role",    v: "sole author" },
    ]
  },
  {
    id: "aws-audit",
    code: "LAB / CLOUD",
    title: "AWS Offensive Toolkit",
    kind: "Tooling interno",
    summary: "Conjunto de módulos para enumeración y explotación controlada de configuraciones débiles en AWS — IAM, S3, Lambda, roles asumibles y escalada de privilegios horizontal.",
    tech: ["Python", "boto3", "Bash"],
    surface: ["IAM", "S3", "Lambda", "STS"],
    meta: [
      { k: "lang",   v: "Python" },
      { k: "scope",  v: "AWS" },
      { k: "status", v: "active" },
    ]
  },
  {
    id: "api-fuzzer",
    code: "LAB / WEB",
    title: "API Contract Fuzzer",
    kind: "Investigación",
    summary: "Motor de fuzzing guiado por especificaciones OpenAPI que deriva casos de abuso a partir del contrato: BOLA, mass assignment, rate-limit bypass y lógica de autorización.",
    tech: ["TypeScript", "Node", "OpenAPI"],
    surface: ["REST", "GraphQL", "OAuth2"],
    meta: [
      { k: "lang",   v: "TS" },
      { k: "scope",  v: "web / api" },
      { k: "status", v: "wip" },
    ]
  },
  {
    id: "recon",
    code: "LAB / RECON",
    title: "Passive Recon Pipeline",
    kind: "Herramienta",
    summary: "Pipeline modular de reconocimiento pasivo que unifica fuentes DNS, certificate transparency y huellas HTTP en un grafo consultable para priorizar superficies de ataque.",
    tech: ["Python", "Bash", "Neo4j"],
    surface: ["DNS", "CT logs", "HTTP"],
    meta: [
      { k: "lang",   v: "Python" },
      { k: "scope",  v: "external" },
      { k: "status", v: "active" },
    ]
  },
];

/* ───────── small components ───────── */
function Chip({children, variant="default", mono=true}){
  const styles = {
    default: { border:"1px solid var(--line-2)", color:"var(--fg-dim)", background:"var(--bg-1)" },
    accent:  { border:"1px solid var(--accent)", color:"var(--accent)", background:"transparent" },
    ghost:   { border:"1px solid var(--line)", color:"var(--fg-mute)", background:"transparent" },
  }[variant];
  return <span style={{
    display:"inline-flex",alignItems:"center",gap:6,
    padding:"4px 10px",borderRadius:999,fontSize:11,letterSpacing:0.3,
    fontFamily: mono ? "var(--mono)" : "var(--sans)",
    textTransform:"none",
    ...styles
  }}>{children}</span>;
}

function KV({k,v}){
  return <div style={{display:"flex",alignItems:"center",gap:8,fontFamily:"var(--mono)",fontSize:11,color:"var(--fg-mute)"}}>
    <span>{k}</span><span style={{color:"var(--fg-mute)"}}>::</span><span style={{color:"var(--fg-dim)"}}>{v}</span>
  </div>;
}

function SectionHeader({index,label,title,sub}){
  return <div style={{display:"flex",flexDirection:"column",gap:14,marginBottom:36}}>
    <div style={{display:"flex",alignItems:"center",gap:12,fontFamily:"var(--mono)",fontSize:11,letterSpacing:1.2,color:"var(--fg-mute)",textTransform:"uppercase"}}>
      <span style={{color:"var(--accent)"}}>{index}</span>
      <span style={{width:32,height:1,background:"var(--line-2)"}}/>
      <span>{label}</span>
    </div>
    <h2 style={{margin:0,fontSize:"clamp(28px, 4vw, 44px)",fontWeight:600,letterSpacing:-0.5,lineHeight:1.1}}>{title}</h2>
    {sub && <p style={{margin:0,color:"var(--fg-dim)",maxWidth:640,fontSize:16,lineHeight:1.55}}>{sub}</p>}
  </div>;
}

/* ───────── Icons ───────── */
function GithubIcon(){
  return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>;
}
function MailIcon(){
  return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>;
}

/* ───────── Nav ───────── */
function Nav({t, lang, onLang}){
  const [scrolled, setScrolled] = useState(false);
  useEffect(()=>{
    const on=()=>setScrolled(window.scrollY>10);
    window.addEventListener("scroll",on); return ()=>window.removeEventListener("scroll",on);
  },[]);
  return <nav style={{
    position:"fixed",top:0,left:0,right:0,zIndex:40,
    padding:"14px 28px",
    backdropFilter: scrolled ? "blur(12px)" : "blur(6px)",
    background: scrolled ? "rgba(10,10,11,0.72)" : "rgba(10,10,11,0.3)",
    borderBottom: `1px solid ${scrolled ? "var(--line)" : "transparent"}`,
    transition:"all .3s ease"
  }}>
    <div style={{maxWidth:1280,margin:"0 auto",display:"flex",alignItems:"center",justifyContent:"space-between",gap:24}}>
      <a href="#top" style={{display:"flex",alignItems:"center",gap:10,fontFamily:"var(--mono)",fontSize:13,fontWeight:500}}>
        <span style={{
          width:22,height:22,borderRadius:4,border:"1px solid var(--accent)",
          display:"grid",placeItems:"center",color:"var(--accent)",fontSize:11,fontWeight:600
        }}>~</span>
        <span>agustin.m</span>
        <span style={{color:"var(--fg-mute)"}}>/offsec</span>
      </a>
      <div style={{display:"flex",alignItems:"center",gap:4,fontFamily:"var(--mono)",fontSize:12}} className="nav-links">
        {Object.entries(t.sections).map(([k,v],i)=>(
          <a key={k} href={`#${k}`} style={{
            padding:"8px 14px",color:"var(--fg-dim)",borderRadius:6,
            transition:"color .2s"
          }} onMouseEnter={e=>e.currentTarget.style.color="var(--fg)"} onMouseLeave={e=>e.currentTarget.style.color="var(--fg-dim)"}>
            <span style={{color:"var(--accent)",marginRight:6,fontSize:10}}>{String(i+1).padStart(2,"0")}</span>
            {v}
          </a>
        ))}
      </div>
      <div style={{display:"flex",alignItems:"center",gap:10}}>
        <button onClick={()=>onLang(lang==="es"?"en":"es")} style={{
          background:"transparent",border:"1px solid var(--line-2)",color:"var(--fg-dim)",
          padding:"6px 10px",borderRadius:6,fontFamily:"var(--mono)",fontSize:11,cursor:"pointer"
        }}>{lang.toUpperCase()}</button>
        <a href="#contact" style={{
          fontFamily:"var(--mono)",fontSize:12,padding:"8px 14px",
          border:"1px solid var(--accent)",color:"var(--accent)",borderRadius:6,
          display:"inline-flex",alignItems:"center",gap:8
        }}>
          <span className="livedot" style={{width:6,height:6}}/>
          <span>{t.ctaPrimary}</span>
        </a>
      </div>
    </div>
    <style>{`
      @media (max-width: 780px){ .nav-links{display:none} }
    `}</style>
  </nav>;
}

/* ───────── Terminal (hero) ───────── */
function Terminal({ lang }){
  const [lines, setLines] = useState([]);
  const [cmdIdx, setCmdIdx] = useState(0);
  const [typing, setTyping] = useState("");
  const [done, setDone] = useState(false);
  const scrollRef = useRef(null);

  const SCRIPT = useMemo(()=>[
    { cmd: "whoami", out: [
      { c:"accent", t:"agustin.maldonado" },
      { c:"dim",    t:"role         Software Engineer / Red Team" },
      { c:"dim",    t:"focus        Web · API · Cloud (AWS) · Networks" },
      { c:"dim",    t:"status       available for engagements" },
    ]},
    { cmd: "cat ./stack.yml", out: [
      { c:"warn",   t:"languages:" },
      { c:"dim",    t:"  - typescript" },
      { c:"dim",    t:"  - python" },
      { c:"dim",    t:"  - bash" },
      { c:"warn",   t:"domains:" },
      { c:"dim",    t:"  - web_pentesting" },
      { c:"dim",    t:"  - api_security" },
      { c:"dim",    t:"  - network_exploitation" },
      { c:"dim",    t:"  - cloud_security: [aws]" },
    ]},
    { cmd: "./scan --portfolio", out: [
      { c:"accent", t:"[+] 4 projects indexed" },
      { c:"accent", t:"[+] thesis: digital_scam_detection.ts → ready" },
      { c:"accent", t:"[+] channels open — scroll to enumerate" },
    ]},
  ],[]);

  useEffect(()=>{
    if(cmdIdx >= SCRIPT.length){ setDone(true); return; }
    const current = SCRIPT[cmdIdx];
    let i = 0;
    const typeInt = setInterval(()=>{
      i++;
      setTyping(current.cmd.slice(0,i));
      if(i>=current.cmd.length){
        clearInterval(typeInt);
        setTimeout(()=>{
          setLines(prev=>[...prev,{kind:"cmd",text:current.cmd},...current.out.map(o=>({kind:"out",...o}))]);
          setTyping("");
          setCmdIdx(x=>x+1);
        }, 280);
      }
    }, 40 + Math.random()*30);
    return ()=>clearInterval(typeInt);
  },[cmdIdx, SCRIPT]);

  useEffect(()=>{
    if(scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  },[lines,typing]);

  const colorMap = {
    accent: "var(--accent)",
    dim:    "var(--fg-dim)",
    warn:   "var(--warn)",
    danger: "var(--danger)",
  };

  return <div style={{
    borderRadius:10,border:"1px solid var(--line)",background:"var(--bg-1)",
    fontFamily:"var(--mono)",fontSize:13,overflow:"hidden",
    boxShadow:"0 20px 60px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02)"
  }}>
    <div style={{
      display:"flex",alignItems:"center",gap:10,padding:"10px 14px",
      borderBottom:"1px solid var(--line)",background:"var(--bg-2)"
    }}>
      <div style={{display:"flex",gap:6}}>
        <span style={{width:10,height:10,borderRadius:"50%",background:"#3a3a42"}}/>
        <span style={{width:10,height:10,borderRadius:"50%",background:"#3a3a42"}}/>
        <span style={{width:10,height:10,borderRadius:"50%",background:"#3a3a42"}}/>
      </div>
      <span style={{color:"var(--fg-mute)",fontSize:11,marginLeft:8}}>agustin@offsec ~ /portfolio</span>
      <span style={{marginLeft:"auto",color:"var(--fg-mute)",fontSize:10,display:"flex",alignItems:"center",gap:6}}>
        <span className="livedot" style={{width:6,height:6}}/>
        <span>session active</span>
      </span>
    </div>
    <div ref={scrollRef} style={{padding:"18px 18px 16px",height:300,overflowY:"auto",lineHeight:1.7}}>
      {lines.map((l,i)=>
        l.kind==="cmd"
          ? <div key={i} style={{display:"flex",gap:10}}>
              <span style={{color:"var(--accent)"}}>❯</span>
              <span style={{color:"var(--fg)"}}>{l.text}</span>
            </div>
          : <div key={i} style={{color:colorMap[l.c]||"var(--fg-dim)",paddingLeft:20}}>{l.t}</div>
      )}
      {!done && <div style={{display:"flex",gap:10}}>
        <span style={{color:"var(--accent)"}}>❯</span>
        <span>{typing}<span className="caret"/></span>
      </div>}
      {done && <div style={{display:"flex",gap:10,color:"var(--fg-mute)"}}>
        <span style={{color:"var(--accent)"}}>❯</span>
        <span className="caret"/>
      </div>}
    </div>
  </div>;
}

/* ───────── Hero ───────── */
function Hero({t}){
  return <section id="top" style={{
    position:"relative",padding:"120px 28px 80px",maxWidth:1280,margin:"0 auto"
  }}>
    <div style={{
      display:"grid",gridTemplateColumns:"minmax(0,1.15fr) minmax(0,1fr)",
      gap:56,alignItems:"center"
    }} className="hero-grid">
      <div className="fadeup">
        <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:24,fontFamily:"var(--mono)",fontSize:11,color:"var(--fg-mute)",letterSpacing:1.2,textTransform:"uppercase"}}>
          <span className="livedot"/>
          <span>{t.status}</span>
          <span style={{color:"var(--line-2)"}}>•</span>
          <span>{t.loc}</span>
        </div>

        <h1 style={{
          margin:0,fontSize:"clamp(40px, 7vw, 84px)",lineHeight:0.98,
          fontWeight:600,letterSpacing:-2,fontFamily:"var(--sans)"
        }}>
          Agustin<br/>
          <span style={{color:"var(--fg-dim)"}}>Maldonado.</span>
        </h1>

        <div style={{
          marginTop:24,fontFamily:"var(--mono)",fontSize:13,color:"var(--accent)",
          display:"inline-flex",alignItems:"center",gap:10,
          padding:"6px 0",borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)"
        }}>
          <span style={{color:"var(--fg-mute)"}}>role:</span>
          <span>{t.role}</span>
        </div>

        <p style={{
          marginTop:28,marginBottom:0,maxWidth:560,
          fontSize:"clamp(15px, 1.3vw, 17px)",lineHeight:1.6,color:"var(--fg-dim)"
        }}>{t.bio}</p>

        <div style={{display:"flex",gap:12,marginTop:36,flexWrap:"wrap"}}>
          <a href="#contact" style={{
            display:"inline-flex",alignItems:"center",gap:10,
            padding:"14px 22px",background:"var(--accent)",color:"#0a0a0b",
            borderRadius:8,fontFamily:"var(--mono)",fontSize:13,fontWeight:500,
            boxShadow:"0 8px 24px -8px var(--accent-dim)"
          }}>
            <span>./contact</span>
            <span>→</span>
          </a>
          <a href="https://github.com/Maldonationn" target="_blank" rel="noopener" style={{
            display:"inline-flex",alignItems:"center",gap:10,
            padding:"14px 22px",background:"transparent",color:"var(--fg)",
            border:"1px solid var(--line-2)",borderRadius:8,
            fontFamily:"var(--mono)",fontSize:13
          }}>
            <GithubIcon/>
            <span>github.com/Maldonationn</span>
          </a>
        </div>

        <div style={{
          display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:0,
          marginTop:48,borderTop:"1px solid var(--line)"
        }}>
          {[
            {k:"focus", v:"Offensive"},
            {k:"cloud", v:"AWS"},
            {k:"recon",  v:"OSINT"},
          ].map((s,i)=>
            <div key={i} style={{
              padding:"18px 0",borderRight: i<2 ? "1px solid var(--line)" : "none"
            }}>
              <div style={{fontFamily:"var(--mono)",fontSize:10,color:"var(--fg-mute)",letterSpacing:1.2,textTransform:"uppercase"}}>{s.k}</div>
              <div style={{marginTop:6,fontSize:18,fontWeight:500}}>{s.v}</div>
            </div>
          )}
        </div>
      </div>

      <div className="fadeup" style={{animationDelay:".15s"}}>
        <Terminal lang={t}/>
      </div>
    </div>

    <style>{`
      @media (max-width: 920px){
        .hero-grid{grid-template-columns: 1fr !important; gap:40px !important}
      }
    `}</style>
  </section>;
}

/* ───────── Stack ───────── */
function Stack({t}){
  return <section id="stack" style={{padding:"100px 28px",maxWidth:1280,margin:"0 auto"}}>
    <SectionHeader index="02" label={t.sections.stack} title={t.stackTitle} sub={t.stackSub}/>

    <div style={{
      display:"grid",gridTemplateColumns:"repeat(3, minmax(0,1fr))",gap:0,
      border:"1px solid var(--line)",borderRadius:12,overflow:"hidden",background:"var(--bg-1)"
    }} className="stack-grid">
      {STACK.map((g,i)=>
        <div key={g.group} style={{
          padding:"28px",
          borderRight: i<2 ? "1px solid var(--line)" : "none",
          position:"relative"
        }} className="stack-col">
          <div style={{
            display:"flex",alignItems:"center",gap:10,marginBottom:24,
            fontFamily:"var(--mono)",fontSize:11,color:"var(--fg-mute)",letterSpacing:1.4
          }}>
            <span style={{
              display:"inline-block",padding:"2px 8px",
              border:"1px solid var(--line-2)",color:"var(--accent)",borderRadius:4,fontSize:10
            }}>{g.code}</span>
            <span style={{color:"var(--fg)",textTransform:"uppercase",fontSize:12,letterSpacing:1.4}}>{g.group}</span>
          </div>
          <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:10}}>
            {g.items.map((it,k)=>
              <li key={it.name} style={{
                display:"flex",alignItems:"center",gap:12,
                fontFamily:"var(--mono)",fontSize:13,color: it.tag==="primary" ? "var(--fg)" : "var(--fg-dim)"
              }}>
                <span style={{color:"var(--fg-mute)",fontSize:11,width:20,textAlign:"right"}}>{String(k+1).padStart(2,"0")}</span>
                <span style={{
                  width:6,height:6,borderRadius:1,
                  background: "var(--accent)"
                }}/>
                <span>{it.name}</span>
              </li>
            )}
          </ul>
        </div>
      )}
    </div>

    <style>{`
      @media (max-width: 900px){
        .stack-grid{grid-template-columns: 1fr !important}
        .stack-col{border-right:none !important; border-bottom:1px solid var(--line)}
        .stack-col:last-child{border-bottom:none}
      }
    `}</style>
  </section>;
}

/* ───────── Projects ───────── */
function ProjectCard({ p, featured }){
  const [hover, setHover] = useState(false);
  return <article
    onMouseEnter={()=>setHover(true)}
    onMouseLeave={()=>setHover(false)}
    className="card"
    style={{
      gridColumn: featured ? "span 2" : "span 1",
      position:"relative",
      padding: featured ? "32px 32px 28px" : "26px 26px 24px",
      border:"1px solid var(--line)",
      borderRadius:12,
      background:"var(--bg-1)",
      display:"flex",flexDirection:"column",gap:18,
      minHeight: featured ? 320 : 260,
      overflow:"hidden"
    }}>
    {featured && <div style={{
      position:"absolute",top:0,right:0,
      padding:"5px 12px",fontFamily:"var(--mono)",fontSize:10,letterSpacing:1.4,
      color:"#0a0a0b",background:"var(--accent)",
      borderBottomLeftRadius:8,textTransform:"uppercase"
    }}>Featured · Tesis</div>}

    {hover && <div style={{
      position:"absolute",left:0,right:0,top:0,bottom:0,pointerEvents:"none",overflow:"hidden"
    }}>
      <div style={{
        position:"absolute",left:0,right:0,height:1,
        background:"linear-gradient(90deg, transparent, var(--accent), transparent)",
        opacity:0.6,animation:"scan 2.2s linear infinite"
      }}/>
    </div>}

    <header style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:10}}>
      <span className="mono" style={{fontSize:11,color:"var(--fg-mute)",letterSpacing:1.4,textTransform:"uppercase"}}>
        {p.code}
      </span>
      <span className="mono" style={{fontSize:11,color:"var(--fg-mute)"}}>{p.kind}</span>
    </header>

    <div>
      <h3 style={{
        margin:0,fontSize: featured ? 30 : 22, fontWeight:600,letterSpacing:-0.4,lineHeight:1.15
      }}>{p.title}</h3>
      <p style={{
        margin:"14px 0 0",fontSize: featured ? 15 : 14,
        lineHeight:1.6,color:"var(--fg-dim)", maxWidth: featured ? 620 : "none"
      }}>{p.summary}</p>
    </div>

    {featured && <div style={{
      display:"grid",gridTemplateColumns:"repeat(4, 1fr)",gap:14,
      padding:"14px 0",borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)"
    }}>
      {p.surface.map((s,i)=>
        <div key={s} style={{fontFamily:"var(--mono)",fontSize:11}}>
          <div style={{color:"var(--fg-mute)",fontSize:9,letterSpacing:1.2,textTransform:"uppercase",marginBottom:4}}>module {String(i+1).padStart(2,"0")}</div>
          <div style={{color:"var(--fg)"}}>{s}</div>
        </div>
      )}
    </div>}

    <footer style={{marginTop:"auto",display:"flex",alignItems:"center",justifyContent:"space-between",gap:12,flexWrap:"wrap"}}>
      <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
        {p.tech.map(tt=><Chip key={tt} variant="default">{tt}</Chip>)}
      </div>
      <div style={{display:"flex",gap:10,alignItems:"center"}}>
        {p.meta.slice(-1).map(m=>
          <span key={m.k} className="mono" style={{fontSize:11,color:"var(--fg-mute)"}}>
            [{m.k}:<span style={{color: m.v==="shipped" || m.v==="active" ? "var(--accent)" : "var(--fg-dim)"}}> {m.v}</span>]
          </span>
        )}
      </div>
    </footer>
  </article>;
}

function Projects({t}){
  return <section id="projects" style={{padding:"80px 28px 100px",maxWidth:1280,margin:"0 auto"}}>
    <SectionHeader index="03" label={t.sections.projects} title={t.projectsTitle} sub={t.projectsSub}/>
    <div style={{
      display:"grid",gridTemplateColumns:"repeat(2, minmax(0,1fr))",gap:18
    }} className="proj-grid">
      {PROJECTS.map((p,i)=>
        <ProjectCard key={p.id} p={p} featured={p.featured}/>
      )}
    </div>
    <style>{`
      @media (max-width: 860px){
        .proj-grid{grid-template-columns: 1fr !important}
        .proj-grid > article{grid-column: span 1 !important}
      }
    `}</style>
  </section>;
}

/* ───────── Contact ───────── */
function Contact({t}){
  const [copied, setCopied] = useState(false);
  const email = "agustin.developer.1@gmail.com";
  const copy = async ()=>{
    try{
      await navigator.clipboard.writeText(email);
      setCopied(true);
      setTimeout(()=>setCopied(false),1800);
    }catch(e){}
  };

  return <section id="contact" style={{padding:"80px 28px 120px",maxWidth:1280,margin:"0 auto"}}>
    <SectionHeader index="04" label={t.sections.contact} title={t.contactTitle} sub={t.contactSub}/>

    <div style={{
      border:"1px solid var(--line)",borderRadius:14,background:"var(--bg-1)",
      padding:"40px",position:"relative",overflow:"hidden"
    }} className="contact-card">
      <div style={{
        position:"absolute",inset:0,pointerEvents:"none",
        backgroundImage:
          "linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px),"+
          "linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px)",
        backgroundSize:"32px 32px",
        maskImage:"radial-gradient(ellipse at 80% 0%, black 10%, transparent 70%)"
      }}/>

      <div style={{position:"relative",display:"grid",gridTemplateColumns:"1.2fr 1fr",gap:40}} className="contact-grid">
        <div>
          <div className="mono" style={{fontSize:11,color:"var(--fg-mute)",letterSpacing:1.4,textTransform:"uppercase",marginBottom:10}}>
            // primary channel
          </div>
          <div className="mono" style={{
            fontSize:"clamp(18px, 2.2vw, 26px)",
            padding:"16px 18px",
            border:"1px solid var(--line-2)",borderRadius:10,
            background:"var(--bg-2)",
            display:"flex",alignItems:"center",justifyContent:"space-between",gap:14,
            flexWrap:"wrap"
          }}>
            <span style={{wordBreak:"break-all"}}>
              <span style={{color:"var(--fg-mute)"}}>$ mail </span>
              <span style={{color:"var(--accent)"}}>{email}</span>
            </span>
            <button onClick={copy} style={{
              background:"transparent",border:"1px solid var(--line-2)",
              color: copied ? "var(--accent)" : "var(--fg-dim)",
              padding:"8px 14px",borderRadius:6,fontFamily:"var(--mono)",fontSize:12,cursor:"pointer",
              transition:"all .2s"
            }}>
              {copied ? "✓ copied" : "copy"}
            </button>
          </div>

          <div style={{display:"flex",gap:12,marginTop:18,flexWrap:"wrap"}}>
            <a href={`mailto:${email}?subject=Red%20Team%20Engagement`} style={{
              padding:"14px 22px",background:"var(--accent)",color:"#0a0a0b",
              borderRadius:8,fontFamily:"var(--mono)",fontSize:13,fontWeight:500,
              display:"inline-flex",gap:10,alignItems:"center"
            }}>
              <MailIcon/>
              <span>send mail</span>
            </a>
            <a href="https://github.com/Maldonationn" target="_blank" rel="noopener" style={{
              padding:"14px 22px",border:"1px solid var(--line-2)",color:"var(--fg)",
              borderRadius:8,fontFamily:"var(--mono)",fontSize:13,
              display:"inline-flex",gap:10,alignItems:"center"
            }}>
              <GithubIcon/>
              <span>@Maldonationn</span>
            </a>
          </div>
        </div>

        <div style={{
          borderLeft:"1px solid var(--line)",paddingLeft:32,
          display:"flex",flexDirection:"column",gap:16
        }} className="contact-side">
          <div>
            <div className="mono" style={{fontSize:10,color:"var(--fg-mute)",letterSpacing:1.4,textTransform:"uppercase",marginBottom:8}}>engage on</div>
            <ul style={{listStyle:"none",padding:0,margin:0,fontFamily:"var(--mono)",fontSize:13,color:"var(--fg-dim)",display:"flex",flexDirection:"column",gap:6}}>
              <li>→ Web & API pentesting</li>
              <li>→ AWS cloud audits</li>
              <li>→ Adversary emulation</li>
              <li>→ Security tooling</li>
            </ul>
          </div>
          <div>
            <div className="mono" style={{fontSize:10,color:"var(--fg-mute)",letterSpacing:1.4,textTransform:"uppercase",marginBottom:8}}>response time</div>
            <div className="mono" style={{fontSize:13}}><span style={{color:"var(--accent)"}}>≤ 48h</span> <span style={{color:"var(--fg-mute)"}}>· weekdays</span></div>
          </div>
          <div>
            <div className="mono" style={{fontSize:10,color:"var(--fg-mute)",letterSpacing:1.4,textTransform:"uppercase",marginBottom:8}}>responsible disclosure</div>
            <div className="mono" style={{fontSize:12,color:"var(--fg-dim)",lineHeight:1.6}}>Reports welcome. PGP key on request.</div>
          </div>
        </div>
      </div>
    </div>

    <style>{`
      @media (max-width: 820px){
        .contact-grid{grid-template-columns: 1fr !important}
        .contact-side{border-left:none !important;padding-left:0 !important;border-top:1px solid var(--line);padding-top:24px}
      }
    `}</style>
  </section>;
}

/* ───────── Footer ───────── */
function Footer(){
  const [now, setNow] = useState(new Date());
  useEffect(()=>{
    const id=setInterval(()=>setNow(new Date()),1000);
    return ()=>clearInterval(id);
  },[]);
  const utc = now.toISOString().replace("T"," ").slice(0,19)+" UTC";
  return <footer style={{
    borderTop:"1px solid var(--line)",
    padding:"28px",fontFamily:"var(--mono)",fontSize:11,color:"var(--fg-mute)"
  }}>
    <div style={{maxWidth:1280,margin:"0 auto",display:"flex",alignItems:"center",justifyContent:"space-between",gap:16,flexWrap:"wrap"}}>
      <div style={{display:"flex",alignItems:"center",gap:14}}>
        <span className="livedot" style={{width:6,height:6}}/>
        <span>system <span style={{color:"var(--accent)"}}>online</span></span>
        <span style={{color:"var(--line-2)"}}>·</span>
        <span>{utc}</span>
      </div>
      <div>© {new Date().getFullYear()} agustin.maldonado — crafted with TypeScript, caffeine and a scope.</div>
    </div>
  </footer>;
}

/* ───────── Tweaks panel ───────── */
function TweaksPanel({tweaks, setTweaks, visible}){
  if(!visible) return null;
  const update = (k,v)=>{
    const next = {...tweaks,[k]:v};
    setTweaks(next);
    try{ window.parent.postMessage({type:"__edit_mode_set_keys",edits:{[k]:v}},"*"); }catch(e){}
  };
  const hues = [
    {h:135, name:"lime"},
    {h:165, name:"mint"},
    {h:200, name:"cyan"},
    {h:28,  name:"amber"},
    {h:350, name:"red"},
  ];
  return <div style={{
    position:"fixed",right:20,bottom:20,zIndex:100,
    width:280,padding:16,borderRadius:10,
    background:"rgba(15,15,17,0.92)",backdropFilter:"blur(12px)",
    border:"1px solid var(--line-2)",
    fontFamily:"var(--mono)",fontSize:12,color:"var(--fg)",
    boxShadow:"0 20px 60px -10px rgba(0,0,0,0.8)"
  }}>
    <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:14,paddingBottom:10,borderBottom:"1px solid var(--line)"}}>
      <span style={{letterSpacing:1.2,textTransform:"uppercase",fontSize:11,color:"var(--accent)"}}>Tweaks</span>
      <span style={{fontSize:10,color:"var(--fg-mute)"}}>runtime</span>
    </div>

    <div style={{marginBottom:14}}>
      <div style={{fontSize:10,color:"var(--fg-mute)",marginBottom:8,textTransform:"uppercase",letterSpacing:1.2}}>accent hue</div>
      <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
        {hues.map(h=>
          <button key={h.h} onClick={()=>update("accentHue",h.h)} style={{
            width:36,height:30,borderRadius:6,cursor:"pointer",
            border: tweaks.accentHue===h.h ? "1px solid #fff" : "1px solid var(--line-2)",
            background:`oklch(0.82 0.14 ${h.h})`
          }} title={h.name}/>
        )}
      </div>
    </div>

    <div style={{marginBottom:14}}>
      <div style={{fontSize:10,color:"var(--fg-mute)",marginBottom:8,textTransform:"uppercase",letterSpacing:1.2}}>language</div>
      <div style={{display:"flex",gap:6}}>
        {["es","en"].map(l=>
          <button key={l} onClick={()=>update("lang",l)} style={{
            flex:1,padding:"6px 10px",cursor:"pointer",
            border: tweaks.lang===l ? "1px solid var(--accent)" : "1px solid var(--line-2)",
            background:"transparent",
            color: tweaks.lang===l ? "var(--accent)" : "var(--fg-dim)",
            fontFamily:"var(--mono)",fontSize:11,borderRadius:6
          }}>{l.toUpperCase()}</button>
        )}
      </div>
    </div>

    <div style={{marginBottom:4}}>
      <div style={{fontSize:10,color:"var(--fg-mute)",marginBottom:8,textTransform:"uppercase",letterSpacing:1.2}}>background grid</div>
      <div style={{display:"flex",gap:6}}>
        {[["on",true],["off",false]].map(([lbl,val])=>
          <button key={lbl} onClick={()=>update("showMatrix",val)} style={{
            flex:1,padding:"6px 10px",cursor:"pointer",
            border: tweaks.showMatrix===val ? "1px solid var(--accent)" : "1px solid var(--line-2)",
            background:"transparent",
            color: tweaks.showMatrix===val ? "var(--accent)" : "var(--fg-dim)",
            fontFamily:"var(--mono)",fontSize:11,borderRadius:6
          }}>{lbl}</button>
        )}
      </div>
    </div>
  </div>;
}

/* ───────── App ───────── */
function SectionDivider({label}){
  return <div style={{maxWidth:1280,margin:"0 auto",padding:"0 28px"}}>
    <div style={{
      display:"flex",alignItems:"center",gap:14,
      fontFamily:"var(--mono)",fontSize:10,color:"var(--fg-mute)",letterSpacing:1.4,textTransform:"uppercase"
    }}>
      <span style={{flex:1,height:1,background:"var(--line)"}}/>
      <span>{label}</span>
      <span style={{width:80,height:1,background:"var(--line)"}}/>
    </div>
  </div>;
}

function App(){
  const [tweaks, setTweaks] = useState(window.TWEAKS);
  const [showTweaks, setShowTweaks] = useState(false);
  const lang = tweaks.lang || "es";
  const t = COPY[lang];

  useEffect(()=>{
    const handler = (e)=>{
      if(!e.data || typeof e.data!=="object") return;
      if(e.data.type==="__activate_edit_mode") setShowTweaks(true);
      if(e.data.type==="__deactivate_edit_mode") setShowTweaks(false);
    };
    window.addEventListener("message", handler);
    try{ window.parent.postMessage({type:"__edit_mode_available"},"*"); }catch(e){}
    return ()=>window.removeEventListener("message", handler);
  },[]);

  useEffect(()=>{
    const h = tweaks.accentHue;
    document.documentElement.style.setProperty("--accent", `oklch(0.82 0.14 ${h})`);
    document.documentElement.style.setProperty("--accent-dim", `oklch(0.82 0.14 ${h} / .18)`);
  },[tweaks.accentHue]);

  useEffect(()=>{
    const g = document.querySelector(".grid-bg");
    if(g) g.style.display = tweaks.showMatrix ? "block" : "none";
  },[tweaks.showMatrix]);

  return <>
    <Nav t={t} lang={lang} onLang={(l)=>{ const next={...tweaks,lang:l}; setTweaks(next); try{window.parent.postMessage({type:"__edit_mode_set_keys",edits:{lang:l}},"*")}catch(e){} }}/>
    <main style={{position:"relative",zIndex:1}}>
      <Hero t={t}/>
      <SectionDivider label="./modules"/>
      <Stack t={t}/>
      <SectionDivider label="./projects"/>
      <Projects t={t}/>
      <SectionDivider label="./channel"/>
      <Contact t={t}/>
    </main>
    <Footer/>
    <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={showTweaks}/>
  </>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);