// =====================================================================
// PORTFOLIO - Single-page scrolling CV site
// Editorial dev aesthetic: warm dark + amber accent, big outlined
// section numerals, asymmetric hero, subtle drifting grid background.
// =====================================================================

const P = {
  bg:       "#0d0f13",
  panel:    "#171a21",
  border:   "#262a33",
  borderHi: "#363a45",
  text:     "#f1ece0",
  textDim:  "#9aa0a8",
  textMute: "#5f6470",
  accent:   "#e8a838",   // amber
  green:    "#7eb074",
};

// ---------- Animated background --------------------------------------
// Subtle drifting horizontal grid with occasional warm dot. No stars/links.
function GridBg() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const cvs = ref.current;
    const ctx = cvs.getContext("2d");
    let W = cvs.width = cvs.offsetWidth;
    let H = cvs.height = cvs.offsetHeight;
    const onResize = () => { W = cvs.width = cvs.offsetWidth; H = cvs.height = cvs.offsetHeight; };
    window.addEventListener("resize", onResize);
    let t = 0, raf;
    const tick = () => {
      t += 0.5;
      ctx.clearRect(0,0,W,H);
      // moving horizontal lines
      ctx.strokeStyle = "rgba(232,168,56,0.05)";
      ctx.lineWidth = 1;
      for (let y = (t % 60); y < H; y += 60) {
        ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke();
      }
      // vertical lines (static, fainter)
      ctx.strokeStyle = "rgba(241,236,224,0.03)";
      for (let x = 0; x < W; x += 100) {
        ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,H); ctx.stroke();
      }
      // occasional amber dot
      for (let i = 0; i < 10; i++) {
        const x = ((i * 137 + t*0.4) % W);
        const y = ((i * 211) % H);
        const a = 0.18 + Math.sin(t*0.05 + i)*0.12;
        ctx.fillStyle = `rgba(232,168,56,${Math.max(0.05,a)})`;
        ctx.fillRect(x, y, 2, 2);
      }
      raf = requestAnimationFrame(tick);
    };
    tick();
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", onResize); };
  }, []);
  return <canvas ref={ref} style={{position:"absolute",inset:0,width:"100%",height:"100%", pointerEvents:"none", opacity:0.7}}/>;
}

// ---------- Section header -------------------------------------------
function SectionHeader({ num, eyebrow, title, blurb, align = "left" }) {
  return (
    <div style={{position:"relative", marginBottom:64, textAlign:align}}>
      {/* Giant outlined numeral */}
      <div aria-hidden style={{
        position:"absolute",
        top: -40,
        left: align==="left" ? -10 : "auto",
        right: align==="right" ? -10 : "auto",
        fontFamily:'"Manrope", system-ui, sans-serif',
        fontSize:180, fontWeight:800, lineHeight:1,
        color:"transparent",
        WebkitTextStroke: `1.5px ${P.border}`,
        letterSpacing:-6, userSelect:"none",
        zIndex:0, pointerEvents:"none",
      }}>{num}</div>
      <div style={{position:"relative", zIndex:1}}>
        <div style={{
          fontFamily:'"JetBrains Mono", monospace', fontSize:12,
          color:P.accent, letterSpacing:3, marginBottom:14, fontWeight:500,
        }}>- {eyebrow}</div>
        <h2 style={{
          fontFamily:'"Manrope", system-ui, sans-serif',
          fontSize:56, fontWeight:800, color:P.text,
          margin:0, lineHeight:1.05, letterSpacing:-1.5,
        }}>{title}</h2>
        {blurb && (
          <p style={{
            fontFamily:'"Manrope", system-ui, sans-serif',
            fontSize:17, lineHeight:1.6, color:P.textDim,
            maxWidth:580, marginTop:18,
            textWrap:"pretty",
            ...(align==="center" ? {marginLeft:"auto",marginRight:"auto"} : {}),
          }}>{blurb}</p>
        )}
      </div>
    </div>
  );
}

// ---------- Nav bar ---------------------------------------------------
function NavBar({ active, onClick }) {
  const items = [
    { id:"hero",       label:"home" },
    { id:"about",      label:"about" },
    { id:"skills",     label:"skills" },
    { id:"experience", label:"experience" },
    { id:"projects",   label:"projects" },
    { id:"education",  label:"education" },
    { id:"contact",    label:"contact" },
  ];
  return (
    <nav style={{
      position:"fixed", top:0, left:0, right:0, zIndex:50,
      background:"rgba(13,15,19,0.82)",
      backdropFilter:"blur(12px)",
      borderBottom:`1px solid ${P.border}`,
      padding:"14px 56px",
      display:"flex", justifyContent:"space-between", alignItems:"center",
      fontFamily:'"JetBrains Mono", monospace',
    }}>
      <div style={{display:"flex", alignItems:"center", gap:10, fontSize:13, color:P.text, letterSpacing:1}}>
        <span style={{
          display:"inline-flex", width:24, height:24,
          background:P.accent, color:P.bg,
          fontFamily:'"Manrope", system-ui, sans-serif',
          fontWeight:800, fontSize:13,
          alignItems:"center", justifyContent:"center",
        }}>D</span>
        <span style={{color:P.textDim}}>danila<span style={{color:P.accent}}>.</span>dev</span>
      </div>
      <div style={{display:"flex", gap:28}}>
        {items.map(it => (
          <a key={it.id}
            href={`#${it.id}`}
            onClick={e => { e.preventDefault(); onClick(it.id); }}
            style={{
              fontSize:13, textDecoration:"none", letterSpacing:0.5,
              color: active===it.id ? P.accent : P.textDim,
              borderBottom: active===it.id ? `1px solid ${P.accent}` : "1px solid transparent",
              paddingBottom:2, transition:"color 0.15s, border-color 0.15s",
            }}>{it.label}</a>
        ))}
      </div>
    </nav>
  );
}

// ---------- Hero ------------------------------------------------------
function Hero({ onCTA }) {
  return (
    <section id="hero" style={{
      position:"relative", minHeight:"100vh",
      display:"flex", alignItems:"center",
      padding:"110px 56px 80px",
      overflow:"hidden",
    }}>
      <GridBg/>
      {/* Background giant wordmark */}
      <div aria-hidden style={{
        position:"absolute", right:-60, bottom:-40,
        fontFamily:'"Manrope", system-ui, sans-serif',
        fontSize:380, fontWeight:800, lineHeight:0.85,
        color:"transparent", WebkitTextStroke:`1.5px ${P.border}`,
        letterSpacing:-20, pointerEvents:"none", userSelect:"none",
        zIndex:0,
      }}>DG</div>

      <div style={{position:"relative", zIndex:1, maxWidth:1180, margin:"0 auto", width:"100%"}}>
        <div style={{
          fontFamily:'"JetBrains Mono", monospace', fontSize:13,
          color:P.textDim, letterSpacing:3, marginBottom:24, fontWeight:500,
        }}>
          <span style={{color:P.accent}}>●</span>&nbsp;&nbsp;SENIOR JAVA DEVELOPER · OPEN TO ROLES
        </div>
        <h1 style={{
          fontFamily:'"Manrope", system-ui, sans-serif',
          fontWeight:200, fontSize:90, color:P.text,
          margin:0, lineHeight:0.95, letterSpacing:-3.5,
        }}>
          Danila
        </h1>
        <h1 style={{
          fontFamily:'"Manrope", system-ui, sans-serif',
          fontWeight:800, fontSize:90, color:P.text,
          margin:0, lineHeight:0.95, letterSpacing:-3.5,
        }}>
          Golubtsov<span style={{color:P.accent}}>.</span>
        </h1>
        <p style={{
          fontFamily:'"Manrope", system-ui, sans-serif',
          fontSize:20, color:P.textDim, marginTop:28, lineHeight:1.5,
          maxWidth:560, textWrap:"pretty",
        }}>
          Backend engineer · 9+ years on the JVM. I build, scale, and
          fix Java services in production. And develop with Unity.
        </p>
        <div style={{marginTop:38, display:"flex", gap:14, flexWrap:"wrap"}}>
          <button onClick={() => onCTA("projects")} style={{
            background:P.accent, color:P.bg, border:"none",
            padding:"14px 26px",
            fontFamily:'"JetBrains Mono", monospace', fontSize:13,
            letterSpacing:1.5, cursor:"pointer", fontWeight:600,
            textTransform:"uppercase",
            transition:"transform 0.15s",
          }}
            onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-2px)";}}
            onMouseLeave={e=>{e.currentTarget.style.transform="none";}}
          >See selected work&nbsp;→</button>
          <button onClick={() => onCTA("contact")} style={{
            background:"transparent", color:P.text,
            border:`1px solid ${P.borderHi}`,
            padding:"14px 26px",
            fontFamily:'"JetBrains Mono", monospace', fontSize:13,
            letterSpacing:1.5, cursor:"pointer",
            textTransform:"uppercase",
          }}>Get in touch</button>
        </div>
        {/* Inline stats row */}
        <div style={{
          marginTop:80, display:"flex", gap:48, flexWrap:"wrap",
          paddingTop:32, borderTop:`1px solid ${P.border}`, maxWidth:780,
        }}>
          {window.CV.about.quickStats.map(s => (
            <div key={s.k}>
              <div style={{
                fontFamily:'"Manrope", system-ui, sans-serif',
                fontSize:32, fontWeight:800, color:P.accent, lineHeight:1, letterSpacing:-1,
              }}>{s.v}</div>
              <div style={{
                fontFamily:'"JetBrains Mono", monospace',
                fontSize:11, color:P.textMute, marginTop:8, letterSpacing:1, textTransform:"uppercase",
              }}>{s.k}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- About -----------------------------------------------------
function About() {
  const c = window.CV;
  return (
    <section id="about" style={{padding:"140px 56px", maxWidth:1180, margin:"0 auto"}}>
      <SectionHeader
        num="01"
        eyebrow="ABOUT"
        title="A backend dev who likes a challenge."
      />
      <div style={{display:"grid", gridTemplateColumns:"1.3fr 1fr", gap:60}}>
        <div>
          <p style={{
            fontFamily:'"Manrope", system-ui, sans-serif',
            fontSize:19, lineHeight:1.7, color:P.text, margin:0, textWrap:"pretty",
            fontWeight:300,
          }}>
            {c.about.blurb}
          </p>
        </div>
        <div style={{
          background:P.panel, border:`1px solid ${P.border}`,
          padding:28,
          fontFamily:'"JetBrains Mono", monospace', fontSize:13,
          color:P.textDim, lineHeight:1.8,
        }}>
          <div style={{display:"flex",justifyContent:"space-between",paddingBottom:10,borderBottom:`1px dashed ${P.border}`,marginBottom:14, color:P.text}}>
            <span>~/danila.fact-sheet</span>
            <span style={{color:P.textMute}}>v1.0</span>
          </div>
          <div><span style={{color:P.accent}}>name</span>     = "{c.name}"</div>
          <div><span style={{color:P.accent}}>role</span>     = "{c.title}"</div>
          <div><span style={{color:P.accent}}>based</span>    = "{c.location}"</div>
          <div><span style={{color:P.accent}}>years</span>    = {c.yearsXp}</div>
          <div><span style={{color:P.accent}}>focus</span>    = "Java · Spring · AWS"</div>
          <div><span style={{color:P.accent}}>also</span>     = "Unity · C#"</div>
          <div><span style={{color:P.accent}}>seeking</span>  = <span style={{color:P.green}}>true</span></div>
        </div>
      </div>
    </section>
  );
}

// ---------- Skills ----------------------------------------------------
function Skills() {
  return (
    <section id="skills" style={{padding:"140px 56px", maxWidth:1180, margin:"0 auto"}}>
      <SectionHeader
        num="02"
        eyebrow="SKILLS"
        title="Stack."
        blurb="Backend-heavy. Decade of Java, plus the ops and data tools that ship it. Unity / C# for side work."
      />
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:18}}>
        {Object.entries(window.CV.skills).map(([k,g]) => (
          <div key={k} style={{
            background:P.panel, border:`1px solid ${P.border}`,
            padding:"24px 28px", position:"relative",
            overflow:"hidden",
          }}>
            {/* top amber rule */}
            <div style={{position:"absolute",top:0,left:0,width:60,height:2,background:P.accent}}/>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:18}}>
              <div style={{
                fontFamily:'"Manrope", system-ui, sans-serif', fontSize:22, fontWeight:700, color:P.text,
              }}>{k}</div>
              <div style={{
                fontFamily:'"JetBrains Mono", monospace', fontSize:11, color:P.textMute, letterSpacing:1,
              }}>{g.items.length} ITEMS</div>
            </div>
            <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
              {g.items.map(it => (
                <span key={it.name} style={{
                  fontFamily:'"JetBrains Mono", monospace', fontSize:12,
                  padding:"4px 10px",
                  background:P.bg, color:P.text,
                  border:`1px solid ${P.border}`, borderRadius:3,
                }}>
                  {it.name}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>
      {/* soft skills row */}
      <div style={{
        marginTop:32, padding:"20px 28px",
        background:P.panel, border:`1px solid ${P.border}`,
        display:"flex", flexWrap:"wrap", alignItems:"center", gap:24,
      }}>
        <div style={{
          fontFamily:'"JetBrains Mono", monospace', fontSize:11, color:P.accent, letterSpacing:2,
        }}>SOFT -</div>
        <div style={{
          flex:1,
          fontFamily:'"Manrope", system-ui, sans-serif', fontSize:15, color:P.textDim,
        }}>
          {window.CV.soft.join(" · ")}
        </div>
      </div>
    </section>
  );
}

// ---------- Experience ------------------------------------------------
function Experience() {
  return (
    <section id="experience" style={{padding:"140px 56px", maxWidth:1180, margin:"0 auto"}}>
      <SectionHeader
        num="03"
        eyebrow="EXPERIENCE · 9+ YEARS"
        title="Where I've shipped."
      />
      <div style={{position:"relative"}}>
        {window.CV.experience.map((e,i) => {
          // Tolerate any of -, –, —, and entries with no separator at all.
          const [startRaw, endRaw] = e.dates.split(/\s*[—–-]\s*/);
          const start = (startRaw || "").trim();
          const end = (endRaw || "").trim();
          return (
            <div key={e.company} style={{
              display:"grid", gridTemplateColumns:"160px 1fr", gap:60,
              padding:"32px 0",
              borderTop:`1px solid ${P.border}`,
              position:"relative",
            }}>
              {/* Amber tick on the left edge */}
              <div style={{position:"absolute",top:-1,left:0,width:36,height:2,background:P.accent}}/>
              <div>
                <div style={{
                  width: 52, height: 52,
                  background: P.bg, border: `1px solid ${P.borderHi}`,
                  borderRadius: 6,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: '"Manrope", system-ui, sans-serif',
                  fontSize: 24, fontWeight: 800, color: P.accent,
                  letterSpacing: -1, marginBottom: 14,
                  overflow: "hidden", padding: e.logo ? 8 : 0,
                }}>
                  {e.logo
                    ? <img src={e.logo} alt={`${e.company} logo`}
                        style={{maxWidth:"100%",maxHeight:"100%",objectFit:"contain"}}/>
                    : e.company[0]
                  }
                </div>
                <div style={{
                  fontFamily:'"JetBrains Mono", monospace', fontSize:13, color:P.accent,
                }}>{start}</div>
                {end && (
                  <div style={{
                    fontFamily:'"JetBrains Mono", monospace', fontSize:12, color:P.textMute, marginTop:2,
                  }}>↳ {end}</div>
                )}
                <div style={{
                  fontFamily:'"JetBrains Mono", monospace', fontSize:11, color:P.textMute, marginTop:8,
                }}>{e.loc}</div>
              </div>
              <div>
                <div style={{display:"flex",alignItems:"baseline",gap:14,flexWrap:"wrap"}}>
                  <div style={{
                    fontFamily:'"Manrope", system-ui, sans-serif',
                    fontSize:28, fontWeight:800, color:P.text, lineHeight:1.15, letterSpacing:-0.5,
                  }}>{e.company}</div>
                  <div style={{
                    fontFamily:'"Manrope", system-ui, sans-serif', fontSize:18, color:P.accent, fontWeight:500,
                  }}>{e.role}</div>
                </div>
                <div style={{marginTop:12, display:"flex", flexWrap:"wrap", gap:5}}>
                  {e.stack.map(s => (
                    <span key={s} style={{
                      fontFamily:'"JetBrains Mono", monospace', fontSize:11,
                      padding:"2px 8px", background:P.bg, color:P.textDim,
                      border:`1px solid ${P.border}`, borderRadius:3,
                    }}>{s}</span>
                  ))}
                </div>
                <ul style={{
                  marginTop:16, padding:0, listStyle:"none",
                  fontFamily:'"Manrope", system-ui, sans-serif',
                  fontSize:15, color:P.text, lineHeight:1.6, fontWeight:300,
                }}>
                  {e.bullets.slice(0, i===0 ? 6 : 4).map((b,bi) => (
                    <li key={bi} style={{paddingLeft:18, position:"relative", marginBottom:5}}>
                      <span style={{position:"absolute", left:0, color:P.accent}}>›</span>{b}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ---------- Projects --------------------------------------------------
function ProjectCard({ project, idx }) {
  return (
    <div style={{
      background:P.panel, border:`1px solid ${P.border}`,
      padding:"28px 30px", position:"relative",
      transition:"border-color 0.2s, transform 0.2s",
    }}
      onMouseEnter={e=>{e.currentTarget.style.borderColor=P.accent;e.currentTarget.style.transform="translateY(-2px)";}}
      onMouseLeave={e=>{e.currentTarget.style.borderColor=P.border;e.currentTarget.style.transform="none";}}
    >
      <div style={{position:"absolute",top:0,left:0,width:60,height:2,background:P.accent}}/>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:6}}>
        <div style={{
          fontFamily:'"JetBrains Mono", monospace', fontSize:11,
          color:P.textMute, letterSpacing:1.5,
        }}>0{idx+1} · {project.tag}</div>
        <div style={{
          fontFamily:'"JetBrains Mono", monospace', fontSize:11,
          color:P.accent, letterSpacing:1,
        }}>{project.kind.toUpperCase()}</div>
      </div>
      <div style={{
        fontFamily:'"Manrope", system-ui, sans-serif',
        fontSize:24, fontWeight:800, color:P.text, lineHeight:1.15, letterSpacing:-0.5,
        marginBottom:10,
      }}>{project.name}</div>
      <p style={{
        fontFamily:'"Manrope", system-ui, sans-serif',
        fontSize:15, lineHeight:1.55, color:P.textDim, margin:0, textWrap:"pretty",
      }}>{project.desc}</p>
      <div style={{marginTop:16, display:"flex", flexWrap:"wrap", gap:5}}>
        {project.tech.map(t => (
          <span key={t} style={{
            fontFamily:'"JetBrains Mono", monospace', fontSize:11,
            padding:"2px 8px", background:P.bg, color:P.textDim,
            border:`1px solid ${P.border}`, borderRadius:3,
          }}>{t}</span>
        ))}
      </div>
      <div style={{
        marginTop:18, paddingTop:14, borderTop:`1px dashed ${P.border}`,
        display:"flex", justifyContent:"space-between", alignItems:"center",
      }}>
        <span style={{
          fontFamily:'"JetBrains Mono", monospace', fontSize:11, color:P.textMute, letterSpacing:1,
        }}>IMPACT</span>
        <span style={{
          fontFamily:'"Manrope", system-ui, sans-serif', fontSize:14, fontWeight:600, color:P.accent,
        }}>{project.reward}</span>
      </div>
    </div>
  );
}

function Projects() {
  return (
    <section id="projects" style={{padding:"140px 56px", maxWidth:1180, margin:"0 auto"}}>
      <SectionHeader
        num="04"
        eyebrow="SELECTED WORK"
        title="Things I'm proud of."
        blurb="A mix of impactful production work - performance wins, migrations, security - plus one Unity side project that keeps the gameplay-code muscle in shape."
      />
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:16}}>
        {window.CV.projects.map((p, i) => (
          <ProjectCard key={p.name} project={p} idx={i}/>
        ))}
      </div>
    </section>
  );
}

// ---------- Education -------------------------------------------------
function Education() {
  return (
    <section id="education" style={{padding:"140px 56px", maxWidth:1180, margin:"0 auto"}}>
      <SectionHeader
        num="05"
        eyebrow="EDUCATION"
        title="Formal training."
      />
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:18}}>
        {window.CV.education.map((e,i) => (
          <div key={i} style={{
            background:P.panel, border:`1px solid ${P.border}`,
            padding:"28px 30px", position:"relative",
          }}>
            <div style={{position:"absolute",top:0,left:0,width:60,height:2,background:P.accent}}/>
            <div style={{
              fontFamily:'"JetBrains Mono", monospace', fontSize:13, color:P.accent,
            }}>{e.year}</div>
            <div style={{
              fontFamily:'"Manrope", system-ui, sans-serif',
              fontSize:22, fontWeight:800, color:P.text, marginTop:8, lineHeight:1.25, letterSpacing:-0.3,
            }}>{e.degree}</div>
            <div style={{
              fontFamily:'"Manrope", system-ui, sans-serif', fontSize:15, color:P.textDim, marginTop:6,
            }}>{e.school}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- Contact ---------------------------------------------------
function Contact() {
  const c = window.CV;
  const [form, setForm] = React.useState({name:"", email:"", message:""});
  const [sent, setSent] = React.useState(false);
  const upd = (k,v) => setForm(f => ({...f, [k]:v}));
  return (
    <section id="contact" style={{padding:"140px 56px 60px", maxWidth:1180, margin:"0 auto"}}>
      <SectionHeader
        num="06"
        eyebrow="GET IN TOUCH"
        title="Let's talk."
      />
      <div style={{display:"grid", gridTemplateColumns:"1fr 1.2fr", gap:60}}>
        {/* Direct contact panel */}
        <div>
          <p style={{
            fontFamily:'"Manrope", system-ui, sans-serif',
            fontSize:17, lineHeight:1.65, color:P.text, margin:0, fontWeight:300, textWrap:"pretty",
          }}>
            Reach out about senior backend roles, contract work, or just to nerd
            out about JVM internals or Unity ECS. Email is fastest.
          </p>
          <div style={{
            marginTop:32, fontFamily:'"JetBrains Mono", monospace', fontSize:14,
          }}>
            {[
              { k:"email",     v:c.email,    link:`mailto:${c.email}` },
              { k:"phone (UA)",v:c.phones[0] },
              { k:"phone (ME)",v:c.phones[1] },
              { k:"handle",    v:"@"+c.handle },
            ].map((r,i) => (
              <div key={i} style={{
                display:"flex", justifyContent:"space-between", alignItems:"center",
                padding:"14px 0", borderBottom:`1px solid ${P.border}`,
              }}>
                <span style={{color:P.textMute, letterSpacing:1, textTransform:"uppercase", fontSize:11}}>{r.k}</span>
                {r.link
                  ? <a href={r.link} style={{color:P.text, textDecoration:"none"}}>{r.v}</a>
                  : <span style={{color:P.text}}>{r.v}</span>}
              </div>
            ))}
          </div>
          <div style={{marginTop:32, display:"flex", gap:10, flexWrap:"wrap"}}>
            <a href={c.resumePdf} download style={{
              background:P.accent, color:P.bg, padding:"12px 22px",
              fontFamily:'"JetBrains Mono", monospace', fontSize:12,
              letterSpacing:1.5, textTransform:"uppercase", fontWeight:600,
              textDecoration:"none",
            }}>Download resume.pdf ↓</a>
            <a href={c.linkedin} target="_blank" rel="noopener" style={{
              background:"transparent", color:P.text,
              border:`1px solid ${P.borderHi}`,
              padding:"12px 22px",
              fontFamily:'"JetBrains Mono", monospace', fontSize:12,
              letterSpacing:1.5, textTransform:"uppercase",
              textDecoration:"none",
            }}>LinkedIn ↗</a>
            <a href={c.github} target="_blank" rel="noopener" style={{
              background:"transparent", color:P.text,
              border:`1px solid ${P.borderHi}`,
              padding:"12px 22px",
              fontFamily:'"JetBrains Mono", monospace', fontSize:12,
              letterSpacing:1.5, textTransform:"uppercase",
              textDecoration:"none",
            }}>GitHub ↗</a>
          </div>
        </div>

        {/* Form */}
        <div style={{
          background:P.panel, border:`1px solid ${P.border}`,
          padding:"32px 32px 28px", position:"relative",
        }}>
          <div style={{position:"absolute",top:0,left:0,width:60,height:2,background:P.accent}}/>
          <div style={{
            fontFamily:'"JetBrains Mono", monospace', fontSize:11, color:P.accent, letterSpacing:2, marginBottom:6,
          }}>- SEND A MESSAGE</div>
          <div style={{
            fontFamily:'"Manrope", system-ui, sans-serif', fontSize:22, fontWeight:700, color:P.text, marginBottom:22, letterSpacing:-0.3,
          }}>Drop a line.</div>
          {!sent ? (
            <form onSubmit={e => {
              e.preventDefault();
              const subject = encodeURIComponent(`Portfolio inquiry from ${form.name}`);
              const body = encodeURIComponent(
                `${form.message}\n\n-\n${form.name}\n${form.email}`
              );
              window.location.href = `mailto:${c.email}?subject=${subject}&body=${body}`;
              setSent(true);
            }} style={{display:"flex", flexDirection:"column", gap:12}}>
              {[
                { k:"name", placeholder:"Your name" },
                { k:"email", placeholder:"Email", type:"email" },
              ].map(({k,placeholder,type}) => (
                <input key={k} type={type||"text"} required
                  placeholder={placeholder}
                  value={form[k]} onChange={e => upd(k, e.target.value)}
                  style={{
                    background:P.bg, border:`1px solid ${P.border}`,
                    padding:"12px 14px", color:P.text,
                    fontFamily:'"Manrope", system-ui, sans-serif', fontSize:15,
                    outline:"none",
                  }}
                  onFocus={e => e.target.style.borderColor = P.accent}
                  onBlur={e => e.target.style.borderColor = P.border}
                />
              ))}
              <textarea required rows={5} placeholder="Tell me about the role or project"
                value={form.message} onChange={e => upd("message", e.target.value)}
                style={{
                  background:P.bg, border:`1px solid ${P.border}`,
                  padding:"12px 14px", color:P.text, resize:"vertical",
                  fontFamily:'"Manrope", system-ui, sans-serif', fontSize:15, outline:"none",
                }}
                onFocus={e => e.target.style.borderColor = P.accent}
                onBlur={e => e.target.style.borderColor = P.border}
              />
              <button type="submit" style={{
                marginTop:6, background:P.accent, color:P.bg,
                border:"none", padding:"14px 22px", cursor:"pointer",
                fontFamily:'"JetBrains Mono", monospace', fontSize:13,
                fontWeight:600, letterSpacing:1.5, textTransform:"uppercase",
              }}>Send message →</button>
            </form>
          ) : (
            <div style={{
              padding:32, textAlign:"center",
              border:`1px dashed ${P.accent}`,
              fontFamily:'"Manrope", system-ui, sans-serif',
            }}>
              <div style={{fontSize:22, color:P.accent, fontWeight:800, marginBottom:8, letterSpacing:-0.3}}>Opening your mail app →</div>
              <div style={{color:P.textDim, fontSize:14}}>If nothing happened, email me directly at <a href={`mailto:${c.email}`} style={{color:P.accent}}>{c.email}</a>.</div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------------------------------------------------
function Footer({ onTop }) {
  return (
    <footer style={{
      padding:"40px 56px 32px",
      borderTop:`1px solid ${P.border}`,
      display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:14,
      fontFamily:'"JetBrains Mono", monospace', fontSize:12, color:P.textMute, letterSpacing:1,
    }}>
      <div>{window.CV.name.toUpperCase()} · © 2026</div>
      <div>Built with Java, coffee, and a bit of Unity.</div>
      <button onClick={onTop} style={{
        background:"transparent", border:`1px solid ${P.borderHi}`,
        color:P.text, padding:"8px 16px", cursor:"pointer",
        fontFamily:'"JetBrains Mono", monospace', fontSize:12,
        letterSpacing:1, textTransform:"uppercase",
      }}>Back to top ↑</button>
    </footer>
  );
}

// ---------- Root ------------------------------------------------------
function Portfolio() {
  const [active, setActive] = React.useState("hero");
  const scrollerRef = React.useRef(null);

  const go = (id) => {
    const el = document.getElementById(id);
    if (el && scrollerRef.current) {
      const top = el.getBoundingClientRect().top + scrollerRef.current.scrollTop - 60;
      scrollerRef.current.scrollTo({ top, behavior: "smooth" });
    }
  };

  React.useEffect(() => {
    const sc = scrollerRef.current;
    if (!sc) return;
    const ids = ["hero","about","skills","experience","projects","education","contact"];
    const onScroll = () => {
      const y = sc.scrollTop + 140;
      let cur = "hero";
      ids.forEach(id => {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      });
      setActive(cur);
    };
    sc.addEventListener("scroll", onScroll);
    onScroll();
    return () => sc.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div ref={scrollerRef} style={{
      width:"100%", height:"100vh", overflow:"auto",
      background:P.bg, color:P.text,
      fontFamily:'"Manrope", system-ui, sans-serif',
    }}>
      <NavBar active={active} onClick={go}/>
      <Hero onCTA={go}/>
      <About/>
      <Skills/>
      <Experience/>
      <Projects/>
      <Education/>
      <Contact/>
      <Footer onTop={() => go("hero")}/>
    </div>
  );
}

window.Portfolio = Portfolio;