// app.jsx — Cihat Kaya portfolio
const { useState, useEffect, useRef, useMemo } = React;

/* =============== STARFIELD =============== */
function Starfield() {
  const ref = useRef(null);
  useEffect(() => {
    const canvas = ref.current;
    const ctx = canvas.getContext('2d');
    let w, h, dpr;
    let stars = [];
    let shooting = [];
    let raf;

    function resize() {
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      w = canvas.width = window.innerWidth * dpr;
      h = canvas.height = Math.max(window.innerHeight, 800) * dpr;
      canvas.style.width = window.innerWidth + 'px';
      canvas.style.height = Math.max(window.innerHeight, 800) + 'px';
      stars = [];
      const n = Math.floor((window.innerWidth * window.innerHeight) / 4000);
      for (let i = 0; i < n; i++) {
        stars.push({
          x: Math.random() * w,
          y: Math.random() * h,
          z: Math.random() * 0.8 + 0.2,
          tw: Math.random() * Math.PI * 2,
          col: Math.random() > 0.92 ? '#ff6a2b' : (Math.random() > 0.7 ? '#ffb37a' : '#f4ede4')
        });
      }
    }
    resize();
    window.addEventListener('resize', resize);

    let t = 0;
    function spawnShooting() {
      if (Math.random() < 0.005 && shooting.length < 2) {
        shooting.push({
          x: Math.random() * w * 0.6,
          y: Math.random() * h * 0.4,
          vx: (8 + Math.random() * 6) * dpr,
          vy: (3 + Math.random() * 3) * dpr,
          life: 1,
        });
      }
    }

    function tick() {
      t += 0.02;
      ctx.clearRect(0, 0, w, h);

      // stars
      for (const s of stars) {
        const tw = (Math.sin(t + s.tw) + 1) * 0.5;
        const a = s.z * (0.4 + tw * 0.6);
        ctx.fillStyle = s.col;
        ctx.globalAlpha = a;
        const r = s.z * 1.4 * dpr;
        ctx.beginPath();
        ctx.arc(s.x, s.y, r, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalAlpha = 1;

      // shooting stars
      spawnShooting();
      shooting = shooting.filter(sh => sh.life > 0);
      for (const sh of shooting) {
        sh.x += sh.vx;
        sh.y += sh.vy;
        sh.life -= 0.012;
        const grad = ctx.createLinearGradient(sh.x, sh.y, sh.x - sh.vx * 12, sh.y - sh.vy * 12);
        grad.addColorStop(0, `rgba(255,180,120,${sh.life})`);
        grad.addColorStop(1, 'rgba(255,180,120,0)');
        ctx.strokeStyle = grad;
        ctx.lineWidth = 1.5 * dpr;
        ctx.beginPath();
        ctx.moveTo(sh.x, sh.y);
        ctx.lineTo(sh.x - sh.vx * 12, sh.y - sh.vy * 12);
        ctx.stroke();
      }

      raf = requestAnimationFrame(tick);
    }
    tick();
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
  }, []);
  return <div className="starfield"><canvas ref={ref} /></div>;
}

/* =============== CUSTOM CURSOR =============== */
function Cursor() {
  const dot = useRef(null);
  const ring = useRef(null);
  useEffect(() => {
    let mx = 0, my = 0, rx = 0, ry = 0;
    function move(e) { mx = e.clientX; my = e.clientY; if (dot.current) { dot.current.style.left = mx + 'px'; dot.current.style.top = my + 'px'; } }
    function loop() {
      rx += (mx - rx) * 0.18;
      ry += (my - ry) * 0.18;
      if (ring.current) { ring.current.style.left = rx + 'px'; ring.current.style.top = ry + 'px'; }
      requestAnimationFrame(loop);
    }
    function over(e) {
      const t = e.target.closest('a, button, .project-card, .exp-item, .chip, .metric, .contact-link');
      if (ring.current) ring.current.classList.toggle('hover', !!t);
    }
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseover', over);
    loop();
    return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseover', over); };
  }, []);
  return (
    <>
      <div ref={dot} className="cursor-dot" />
      <div ref={ring} className="cursor-ring" />
    </>
  );
}

/* =============== SCRAMBLE TEXT =============== */
function Scramble({ value, duration = 800, delay = 0 }) {
  const [out, setOut] = useState(value);
  const ref = useRef(null);
  useEffect(() => {
    const chars = '!<>-_\\/[]{}—=+*^?#$%abcdef0123456789';
    const target = String(value);
    let frame = 0;
    let raf;
    const totalFrames = Math.floor(duration / 16);
    const queue = target.split('').map((c, i) => ({
      from: '',
      to: c,
      start: Math.floor(Math.random() * totalFrames * 0.5),
      end: Math.floor(totalFrames * 0.5 + Math.random() * totalFrames * 0.5),
      char: ''
    }));
    function update() {
      let str = '';
      let done = 0;
      for (const q of queue) {
        if (frame >= q.end) { str += q.to; done++; }
        else if (frame >= q.start) {
          if (!q.char || Math.random() < 0.28) q.char = chars[Math.floor(Math.random() * chars.length)];
          str += q.char;
        } else { str += ' '; }
      }
      setOut(str);
      if (done < queue.length) { frame++; raf = requestAnimationFrame(update); }
    }
    const obs = new IntersectionObserver((es) => {
      if (es[0].isIntersecting) {
        setTimeout(() => { update(); }, delay);
        obs.disconnect();
      }
    }, { threshold: 0.5 });
    if (ref.current) obs.observe(ref.current);
    return () => { cancelAnimationFrame(raf); obs.disconnect(); };
  }, [value, duration, delay]);
  return <span ref={ref} className="scramble">{out}</span>;
}

/* =============== COUNTER =============== */
function Counter({ to, suffix = '', duration = 1800 }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const obs = new IntersectionObserver((es) => {
      if (es[0].isIntersecting) {
        const start = performance.now();
        function step(t) {
          const p = Math.min(1, (t - start) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setN(Math.floor(eased * to));
          if (p < 1) requestAnimationFrame(step);
          else setN(to);
        }
        requestAnimationFrame(step);
        obs.disconnect();
      }
    }, { threshold: 0.5 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{n}{suffix}</span>;
}

/* =============== REVEAL ON SCROLL =============== */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal-up');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.15 });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

/* =============== TERMINAL TYPER =============== */
function Terminal() {
  const [lines, setLines] = useState([]);
  const [done, setDone] = useState(false);
  const ref = useRef(null);

  const script = useMemo(() => ([
    { p: '~/cihat', cmd: 'whoami', delay: 200 },
    { out: 'cihat.kaya — software engineer / ai developer', cls: 'term-arg' },
    { p: '~/cihat', cmd: 'cat stack.json', delay: 600 },
    { out: '{', cls: 'term-comment' },
    { out: '  "edge":     ["Cloudflare Workers", "D1", "R2", "Pages"],', cls: '' },
    { out: '  "frontend": ["React", "TypeScript", "Vite"],', cls: '' },
    { out: '  "backend":  ["Hono", "Python", "Node.js", ".NET"],', cls: '' },
    { out: '  "ai":       ["RAG", "Whisper", "Grok", "LLM/GPT"],', cls: '' },
    { out: '  "infra":    ["Docker", "CI/CD", "Azure"]', cls: '' },
    { out: '}', cls: 'term-comment' },
    { p: '~/cihat', cmd: 'deploy --edge --p95 42ms', delay: 800 },
    { out: '✓ shipped — 6 products live', cls: 'term-arg' },
    { p: '~/cihat', cmd: '', cursor: true, delay: 200 },
  ]), []);

  useEffect(() => {
    let cancelled = false;
    let i = 0;

    async function run() {
      const obs = new IntersectionObserver(async (es) => {
        if (es[0].isIntersecting && !cancelled) {
          obs.disconnect();
          while (i < script.length && !cancelled) {
            const item = script[i];
            await new Promise(r => setTimeout(r, item.delay || 60));
            if (item.cmd !== undefined) {
              // type out
              for (let j = 0; j <= item.cmd.length; j++) {
                if (cancelled) return;
                setLines(L => {
                  const next = [...L];
                  next[i] = { ...item, typed: item.cmd.slice(0, j) };
                  return next;
                });
                await new Promise(r => setTimeout(r, 25 + Math.random() * 30));
              }
            } else {
              setLines(L => { const next = [...L]; next[i] = item; return next; });
            }
            i++;
          }
          setDone(true);
        }
      }, { threshold: 0.3 });
      if (ref.current) obs.observe(ref.current);
    }
    run();
    return () => { cancelled = true; };
  }, [script]);

  return (
    <div className="terminal" ref={ref}>
      <div className="terminal-bar">
        <div className="dots"><span className="dot" /><span className="dot" /><span className="dot" /></div>
        <div className="title">cihat@edge — zsh</div>
        <div style={{ width: 40 }} />
      </div>
      <div className="terminal-body">
        {lines.map((l, idx) => {
          if (!l) return null;
          if (l.cmd !== undefined) {
            return (
              <span key={idx} className="terminal-line">
                <span className="term-prompt">{l.p} ❯ </span>
                <span>{l.typed}</span>
                {l.cursor && <span className="term-cursor" />}
                {idx === lines.length - 1 && !done && !l.cursor && <span className="term-cursor" />}
              </span>
            );
          }
          return <span key={idx} className={`terminal-line ${l.cls || ''}`}>{l.out}</span>;
        })}
      </div>
    </div>
  );
}

/* =============== PROJECT VIZ — different per card =============== */
function ProjectViz({ kind }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    function move(e) {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
      el.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
    }
    el.addEventListener('mousemove', move);
    return () => el.removeEventListener('mousemove', move);
  }, []);

  if (kind === 'invoice') return <InvoiceViz innerRef={ref} />;
  if (kind === 'audio') return <AudioViz innerRef={ref} />;
  if (kind === 'twitter') return <TwitterViz innerRef={ref} />;
  if (kind === 'chat') return <ChatViz innerRef={ref} />;
  if (kind === 'nft') return <NftViz innerRef={ref} />;
  return null;
}

function InvoiceViz({ innerRef }) {
  return (
    <div ref={innerRef} className="project-viz" style={{ background: 'linear-gradient(135deg, #0d0d12, #07070a)' }}>
      <svg viewBox="0 0 400 200" preserveAspectRatio="none" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
        <defs>
          <linearGradient id="g1" x1="0" x2="1">
            <stop offset="0" stopColor="#ff6a2b" stopOpacity="0.0" />
            <stop offset="0.5" stopColor="#ff6a2b" stopOpacity="0.6" />
            <stop offset="1" stopColor="#ff6a2b" stopOpacity="0.0" />
          </linearGradient>
        </defs>
        {[0,1,2,3,4,5].map(i => (
          <g key={i} style={{ animation: `slideRight 4s linear infinite`, animationDelay: `${i*0.6}s`, transformOrigin: 'center' }}>
            <rect x={-50} y={20 + i*28} width="80" height="14" fill="none" stroke="#ff6a2b" strokeWidth="0.5" opacity="0.6" />
            <rect x={-50} y={20 + i*28} width="80" height="14" fill="url(#g1)" opacity="0.3" />
            <text x={-46} y={31 + i*28} fill="#f4ede4" fontFamily="JetBrains Mono" fontSize="7">INV-{2024+i}{(i*73).toString().padStart(3,'0')}</text>
          </g>
        ))}
      </svg>
      <style>{`@keyframes slideRight { from { transform: translateX(0); } to { transform: translateX(450px); } }`}</style>
      <div style={{ position:'absolute', bottom:12, right:14, fontFamily:'JetBrains Mono', fontSize:10, color:'#ff6a2b', letterSpacing:'0.15em' }}>2.1K / MO</div>
    </div>
  );
}

function AudioViz({ innerRef }) {
  return (
    <div ref={innerRef} className="project-viz" style={{ background: 'radial-gradient(ellipse at center, #1a0d20, #07070a)' }}>
      <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', gap:3 }}>
        {Array.from({length: 48}).map((_, i) => (
          <div key={i} style={{
            width:3,
            background:'#ff6a2b',
            height: `${20 + Math.sin(i*0.5)*30 + 30}%`,
            opacity: 0.5 + (i%3)*0.15,
            animation: `eq ${0.6 + (i%5)*0.15}s ease-in-out infinite alternate`,
            animationDelay: `${i*0.04}s`
          }} />
        ))}
      </div>
      <style>{`@keyframes eq { from { transform: scaleY(0.3); } to { transform: scaleY(1.4); } }`}</style>
      <div style={{ position:'absolute', top:12, left:14, fontFamily:'JetBrains Mono', fontSize:10, color:'#ffb37a', letterSpacing:'0.15em' }}>24-BIT / 48KHZ</div>
    </div>
  );
}

function TwitterViz({ innerRef }) {
  return (
    <div ref={innerRef} className="project-viz" style={{ background: 'linear-gradient(180deg, #0d0d12, #07070a)' }}>
      <svg viewBox="0 0 200 140" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
        <polyline
          fill="none" stroke="#ff6a2b" strokeWidth="1.5"
          points="0,110 20,95 40,98 60,80 80,72 100,55 120,48 140,32 160,28 180,18 200,10"
          strokeDasharray="500"
          style={{ animation: 'drawLine 3s ease-in-out forwards' }}
        />
        <polygon
          fill="#ff6a2b" fillOpacity="0.08"
          points="0,110 20,95 40,98 60,80 80,72 100,55 120,48 140,32 160,28 180,18 200,10 200,140 0,140"
          style={{ opacity: 0, animation: 'fadeFill 1s ease 2s forwards' }}
        />
        {[
          [40,98],[80,72],[120,48],[160,28]
        ].map(([x,y], i) => (
          <circle key={i} cx={x} cy={y} r="3" fill="#ff6a2b" style={{ opacity: 0, animation: `popIn 0.4s ease ${1 + i*0.3}s forwards` }} />
        ))}
      </svg>
      <style>{`
        @keyframes drawLine { from { stroke-dashoffset: 500; } to { stroke-dashoffset: 0; } }
        @keyframes fadeFill { to { opacity: 1; } }
        @keyframes popIn { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }
      `}</style>
      <div style={{ position:'absolute', top:12, left:14, fontFamily:'JetBrains Mono', fontSize:10, color:'#ff6a2b', letterSpacing:'0.15em' }}>1.2M IMP / WK</div>
      <div style={{ position:'absolute', bottom:12, right:14, fontFamily:'Instrument Serif', fontSize:24, color:'#f4ede4', fontStyle:'italic' }}>↗ 18.4K</div>
    </div>
  );
}

function ChatViz({ innerRef }) {
  return (
    <div ref={innerRef} className="project-viz" style={{ background: 'linear-gradient(135deg, #0d0d12, #07070a)', padding: 14 }}>
      <div style={{ display:'flex', flexDirection:'column', gap:6, fontFamily:'JetBrains Mono', fontSize:9 }}>
        {[
          { who:'user', text:'how do i refund?' , delay:0.2, w:'55%'},
          { who:'bot', text:'I can help — checking your order...', delay:1.2, w:'70%'},
          { who:'user', text:'thanks!', delay:2.2, w:'30%'},
          { who:'bot', text:'Refund processed ✓', delay:3.0, w:'45%'},
        ].map((m, i) => (
          <div key={i} style={{
            alignSelf: m.who==='user' ? 'flex-end' : 'flex-start',
            background: m.who==='user' ? 'rgba(255,106,43,0.15)' : 'rgba(244,237,228,0.06)',
            border: m.who==='user' ? '1px solid rgba(255,106,43,0.4)' : '1px solid rgba(244,237,228,0.1)',
            padding:'6px 10px',
            borderRadius: 8,
            color: m.who==='user' ? '#ff6a2b' : '#f4ede4',
            maxWidth: m.w,
            opacity: 0,
            transform:'translateY(8px)',
            animation: `chatIn 0.4s ease ${m.delay}s forwards`
          }}>{m.text}</div>
        ))}
      </div>
      <style>{`@keyframes chatIn { to { opacity:1; transform:translateY(0); } }`}</style>
    </div>
  );
}

function NftViz({ innerRef }) {
  return (
    <div ref={innerRef} className="project-viz" style={{ background: 'radial-gradient(circle at 30% 30%, #2a1a0d, #07070a)' }}>
      <div style={{ position:'absolute', inset:0, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gridTemplateRows:'repeat(3, 1fr)', gap:4, padding:14 }}>
        {Array.from({length:12}).map((_, i) => {
          const seed = (i*73 + 19) % 360;
          return (
            <div key={i} style={{
              background: `conic-gradient(from ${seed}deg, #ff6a2b, #ffb37a, #ff6a2b)`,
              opacity: 0,
              transform:'scale(0.5)',
              animation: `nftIn 0.5s ease ${i*0.06}s forwards`,
              filter: 'saturate(0.9)',
              borderRadius: 2
            }} />
          );
        })}
      </div>
      <style>{`@keyframes nftIn { to { opacity:0.85; transform:scale(1); } }`}</style>
    </div>
  );
}

/* =============== APP =============== */
function App() {
  useReveal();

  return (
    <>
      <Cursor />
      <Nav />
      <window.Blob />
      <Hero />
      <Marquee />
      <Metrics />
      <Experience />
      <Projects />
      <SkillsSection />
      <EduLang />
      <Contact />
      <window.Signature />
      <Footer />
    </>
  );
}

/* ============== SECTIONS ============== */
function Nav() {
  return (
    <nav className="nav">
      <a href="/" className="nav-mark"><span className="dot" />← Kaya / Core</a>
      <div className="nav-links">
        <a href="#work">Work</a>
        <a href="#projects">Projects</a>
        <a href="#stack">Stack</a>
        <a href="#contact">Contact</a>
      </div>
    </nav>
  );
}

function Hero() {
  const titleRef = useRef(null);
  useEffect(() => {
    const el = titleRef.current;
    if (!el) return;
    function move(e) {
      const x = (e.clientX / window.innerWidth - 0.5) * 20;
      const y = (e.clientY / window.innerHeight - 0.5) * 12;
      el.style.transform = `perspective(1200px) rotateY(${x*0.4}deg) rotateX(${-y*0.4}deg) translateZ(0)`;
    }
    window.addEventListener('mousemove', move);
    return () => window.removeEventListener('mousemove', move);
  }, []);
  return (
    <section className="hero">
      <Starfield />
      <div style={{ position:'absolute', inset:0, zIndex:0 }}><window.Globe /></div>
      <div className="hero-grid" />
      <div className="hero-inner" style={{ position: 'relative', zIndex: 2 }}>
        <div className="hero-eyebrow">CV / 2026 · Software Engineer · AI Developer</div>
        <h1 className="hero-title" ref={titleRef} style={{ transition: 'transform 0.3s cubic-bezier(0.22,1,0.36,1)', transformStyle: 'preserve-3d' }}>
          <span className="line"><span className="crop"><span className="reveal" style={{ animationDelay:'0.1s' }}>Cihat</span></span></span>
          <span className="line"><span className="crop"><span className="reveal italic" style={{ animationDelay:'0.3s' }}>Kaya.</span></span></span>
        </h1>
        <div className="hero-meta">
          <div className="col">
            <div className="label">Based in</div>
            <div className="val">Rijswijk, Zuid-Holland</div>
          </div>
          <div className="col" style={{ textAlign: 'center' }}>
            <div className="label">Currently</div>
            <div className="val">Founder & CEO · Kaya Core Inc</div>
          </div>
          <div className="col">
            <div className="label">Edge p95</div>
            <div className="val">42ms · Cloudflare</div>
          </div>
        </div>
      </div>
      <div className="scroll-cue">
        <span>SCROLL</span>
        <div className="bar" />
      </div>
    </section>
  );
}

function Marquee() {
  const items = ['EDGE-FIRST', 'AI-NATIVE', 'SAAS', 'RAG', 'CLOUDFLARE', 'TYPESCRIPT', 'PYTHON', 'REACT', 'WHISPER', 'GROK'];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i}>
            {it}{' '}<span className="star">✱</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function Metrics() {
  const data = [
    { n: 6, suf: '', label: 'Live products', unit: 'shipped' },
    { n: 200, suf: '+', label: 'Clients served', unit: '5y founder' },
    { n: 40, suf: '%', label: 'Admin workload cut', unit: 'automation' },
    { n: 42, suf: 'ms', label: 'Edge p95 latency', unit: 'cloudflare' },
  ];
  return (
    <section className="metrics">
      <div className="metrics-grid">
        {data.map((m, i) => (
          <div key={i} className="metric reveal-up" style={{ transitionDelay: `${i*0.08}s` }}>
            <div>
              <div className="metric-num">
                <Counter to={m.n} suffix={m.suf} />
              </div>
              <div className="metric-unit">/ {m.unit}</div>
            </div>
            <div className="metric-label">{m.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Experience() {
  return (
    <section id="work">
      <div className="container">
        <div className="section-num reveal-up">01 / Experience</div>
        <h2 className="section-title reveal-up">Building <span className="italic">edge-native</span> products since 2020.</h2>
        <div className="exp-list">
          {[
            {
              date: '2023 — present',
              role: 'Founder & CEO',
              co: 'Kaya Core Inc · Amsterdam / Rijswijk',
              bullets: [
                'Designed and shipped 6 live AI-native SaaS products on edge-first architecture (Workers, D1, R2)',
                'Full-stack: React, TypeScript, Python, Hono, Vite — deployed at 42ms p95 latency',
                'AI/ML integration: RAG systems, Whisper voice transcription, Grok-powered content, LLM chatbots',
                'CI/CD, containerization, automated testing & monitoring across the platform',
              ],
            },
            {
              date: '2020 — present',
              role: 'Founder & CEO',
              co: 'Glodinas Finance B.V. · Den Haag',
              bullets: [
                'AI/ML in financial services — 200+ clients across staffing, finance and real estate',
                'Proprietary AI-driven forecasting models — 15% operational cost reduction',
                'Automated systems — 40% admin workload reduction',
                'Built and maintained 3 client-facing websites; cloud-native on Azure + Cloudflare',
              ],
            },
          ].map((e, i) => (
            <div key={i} className="exp-item reveal-up">
              <div className="exp-date">{e.date}</div>
              <div>
                <div className="exp-role exp-role-wipe">{e.role}</div>
                <div className="exp-company">{e.co}</div>
                <ul className="exp-bullets">
                  {e.bullets.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
              </div>
              <div className="exp-arrow">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Projects() {
  const projects = [
    { kind: 'invoice', name: 'BoekhoudBuddies', tag: 'INVOICING SAAS · NL ZZP', desc: 'Stripe Connect, recurring contracts, branded PDFs and a CRM built for Dutch freelancers.', stats: [['2.1K','PDFs / month'], ['NL','market'], ['Stripe','connect']], num: '01', url: 'boekhoudbuddies.com' },
    { kind: 'audio',   name: 'Aether Drift Records', tag: 'AI MUSIC STUDIO', desc: 'Lyrics → mastered tracks. Studio-grade WAV out, R2 audio engine, FFmpeg WASM in the browser.', stats: [['24-bit','48 kHz'], ['WAV','mastered'], ['R2','audio engine']], num: '02', url: 'aetherdriftrecords.com' },
    { kind: 'twitter', name: 'Xcelerate', tag: 'GROWTH · X / TWITTER', desc: 'Grok-powered content, smart scheduling and a Chrome extension for strategic engagement.', stats: [['18.4K','followers'], ['1.2M','imp / wk'], ['Grok','AI']], num: '03', url: 'xcelerate.work' },
    { kind: 'chat',    name: 'Praatbox', tag: 'RAG CHAT WIDGET', desc: 'One-line embed, Whisper voice, knowledge-base grounded, multilingual templates per industry.', stats: [['1-line','embed'], ['Whisper','voice'], ['Cloud Run','+ Firebase']], num: '04', url: 'praatbox.com' },
    { kind: 'nft',     name: 'Kayamint', tag: 'CARDANO LAUNCHPAD', desc: 'Non-custodial Plutus on-demand sales, IPFS art, CIP-25 metadata, EU-compliant. Flat 2 ADA fee.', stats: [['Plutus','on-demand'], ['CIP-25','metadata'], ['2 ADA','flat fee']], num: '05', url: 'kayamint.com' },
  ];

  return (
    <section id="projects" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-num reveal-up">02 / Projects</div>
        <h2 className="section-title reveal-up">Six products. <span className="italic">One operator.</span></h2>
        <div className="projects-grid">
          {projects.map((p, i) => (
            <a key={i} href={`https://${p.url}`} target="_blank" rel="noreferrer" className="project-card reveal-up" style={{ transitionDelay: `${i*0.06}s` }}>
              <div className="project-header">
                <div className="project-num">{p.num} · {p.url}</div>
                <div className="project-status">LIVE</div>
              </div>
              <ProjectViz kind={p.kind} />
              <div>
                <div className="project-name">{p.name}</div>
                <div className="project-tag">{p.tag}</div>
                <div className="project-desc">{p.desc}</div>
                <div className="project-stats">
                  {p.stats.map(([s,l], j) => (
                    <div key={j} className="stat"><strong>{s}</strong>{l}</div>
                  ))}
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function SkillsSection() {
  const cats = [
    { title: 'Languages', items: ['Python', 'JavaScript', 'TypeScript', 'C# / .NET', 'SQL', 'HTML / CSS'] },
    { title: 'AI & ML',   items: ['RAG', 'LLM / GPT', 'Whisper', 'NLP', 'ML Frameworks', 'Data Analytics'] },
    { title: 'Cloud & Infra', items: ['Cloudflare Workers', 'D1', 'R2', 'Pages', 'Azure', 'Docker', 'CI/CD', 'Git'] },
    { title: 'Frameworks', items: ['React', 'Node.js', 'Hono', 'Vite', 'REST APIs', 'Stripe', 'Firebase', 'Agile'] },
    { title: 'Architecture', items: ['Edge-first', 'Microservices', 'System Design', 'Serverless', 'Event-driven'] },
  ];
  return (
    <section id="stack">
      <div className="container">
        <div className="section-num reveal-up">03 / Stack</div>
        <h2 className="section-title reveal-up">From <span className="italic">whoami</span> to deploy.</h2>
        <div className="skills-wrap">
          <div className="reveal-up">
            <Terminal />
          </div>
          <div className="skills-cats reveal-up">
            {cats.map((c, i) => (
              <div key={i} className="skills-cat">
                <div className="skills-cat-title">
                  <span className="num">0{i+1}</span>
                  <span>{c.title}</span>
                </div>
                <div className="chips">
                  {c.items.map((it, j) => <span key={j} className="chip">{it}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function EduLang() {
  return (
    <section style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-num reveal-up">04 / Foundations</div>
        <h2 className="section-title reveal-up">Education, <span className="italic">credentials,</span> tongues.</h2>
        <div className="three-col">
          <div className="col-block reveal-up">
            <h3>Education</h3>
            <div className="edu-item">
              <div className="edu-deg">Bachelor — ICT Management</div>
              <div className="edu-school">De Haagse Hogeschool · Den Haag</div>
              <div className="edu-year">2018 — 2022</div>
            </div>
            <div className="edu-item">
              <div className="edu-deg">Systeembeheerder / ICT- en Mediabeheer</div>
              <div className="edu-school">Grafisch Lyceum Rotterdam</div>
              <div className="edu-year">2011 — 2015</div>
            </div>
          </div>
          <div className="col-block reveal-up">
            <h3>Certifications</h3>
            <div className="cert-item">
              <div className="cert-name">Google Workspace Deployment Services</div>
              <div className="cert-issuer">Google · 2025</div>
            </div>
            <div className="cert-item">
              <div className="cert-name">Wft Basis</div>
              <div className="cert-issuer">NIBE-SVV · 2023</div>
            </div>
            <div className="cert-item">
              <div className="cert-name">MTA Windows OS Fundamentals (98-349)</div>
              <div className="cert-issuer">Microsoft · 2016</div>
            </div>
            <div className="cert-item">
              <div className="cert-name">MTA Security Fundamentals (98-367)</div>
              <div className="cert-issuer">Microsoft · 2013</div>
            </div>
            <div className="cert-item">
              <div className="cert-name">MTA Networking Fundamentals (98-366)</div>
              <div className="cert-issuer">Microsoft · 2013</div>
            </div>
            <div className="cert-item">
              <div className="cert-name">MTA Windows Server Administration Fundamentals (98-365)</div>
              <div className="cert-issuer">Microsoft · 2013</div>
            </div>
          </div>
          <div className="col-block reveal-up">
            <h3>Languages</h3>
            <div className="lang-list">
              {[
                { name: 'Nederlands', level: 'Native', bars: 5 },
                { name: 'Türkçe', level: 'Native', bars: 5 },
                { name: 'English', level: 'Fluent', bars: 5 },
                { name: 'Română', level: 'Conversational', bars: 3 },
              ].map((l, i) => (
                <div key={i} className="lang">
                  <div>
                    <div className="lang-name">{l.name}</div>
                    <div className="lang-bars">
                      {Array.from({length:5}).map((_, j) => (
                        <div key={j} className={`lang-bar ${j < l.bars ? 'on' : ''}`} />
                      ))}
                    </div>
                  </div>
                  <div className="lang-level">{l.level}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section id="contact" className="contact">
      <div className="container">
        <div className="contact-eyebrow">Let's build something</div>
        <h2 className="contact-title">
          Got a hard <span className="italic">problem?</span><br />
          Let's <span className="italic">ship.</span>
        </h2>
        <div className="contact-links">
          <window.Magnetic strength={0.3}>
            <a className="contact-link" href="mailto:info@cihatkaya.nl">
              <span className="label">Email</span>
              <span className="contact-val">info@cihatkaya.nl</span>
            </a>
          </window.Magnetic>
          <window.Magnetic strength={0.3}>
            <a className="contact-link" href="https://linkedin.com/in/cihatkaya" target="_blank" rel="noreferrer">
              <span className="label">LinkedIn</span>
              <span className="contact-val">/in/cihatkaya</span>
            </a>
          </window.Magnetic>
          <window.Magnetic strength={0.3}>
            <a className="contact-link" href="https://cihatkaya.nl" target="_blank" rel="noreferrer">
              <span className="label">Web</span>
              <span className="contact-val">cihatkaya.nl</span>
            </a>
          </window.Magnetic>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const [time, setTime] = useState('');
  useEffect(() => {
    function tick() {
      const d = new Date();
      const utc = d.toLocaleTimeString('en-GB', { hour:'2-digit', minute:'2-digit', second:'2-digit', hour12:false, timeZone:'Europe/Amsterdam' });
      setTime(utc + ' CET');
    }
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <footer className="footer">
      <div>© 2026 Cihat Kaya · Crafted on the edge</div>
      <div>Rijswijk · {time}</div>
    </footer>
  );
}

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