/* global React */
const { useEffect, useState, useRef } = React;

// === Hash-based routing ===
// Routes:
//   ""              → home
//   "post/<slug>"   → article page
function useHashRoute() {
  const get = () => (window.location.hash || '').replace(/^#\/?/, '');
  const [route, setRoute] = useState(get);
  useEffect(() => {
    const onChange = () => {
      setRoute(get());
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onChange);
    return () => window.removeEventListener('hashchange', onChange);
  }, []);
  return route;
}

// === Helpers ===
// Reveal is CSS-only (see .reveal in styles.css). This hook is a no-op shim
// kept so components keep a stable ref API in case we ever wire scroll-driven
// reveals back in.
function useReveal() {
  return useRef(null);
}

// === Nav ===
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="nav-brand">
          <span className="dot"></span>
          <div>
            <div className="name">Zeynep Sinem Anlar</div>
            <div className="role">CYBER SECURITY · AI ENGINEERING</div>
          </div>
        </div>
        <div className="nav-links">
          <a href="#about">about</a>
          <a href="#skills">skills</a>
          <a href="#experience">experience</a>
          <a href="#blog">writing</a>
          <a href="#contact" className="cta">get in touch ↗</a>
        </div>
      </div>
    </nav>);

}

// === Hero ===
function Hero() {
  const D = window.PORTFOLIO_DATA;
  const ref = useReveal();
  return (
    <section className="hero">
      <div className="wrap reveal" ref={ref}>
        <h1>
          Zeynep Sinem<br />
          Anlar<span className="accent">.</span>
        </h1>
        <p className="hero-sub">
          Third-year Computer Engineering student at <strong>TED University</strong>, working at
          the intersection of <strong>cyber security</strong> and <strong>AI engineering</strong> —
          SIEM &amp; detection workflows, secure architecture, and LLM-powered tooling that
          actually moves the analyst's day forward.
        </p>
        <div className="hero-cta">
          <a className="btn btn-primary" href="#contact">
            Start a conversation <span className="arrow">→</span>
          </a>
          <a className="btn" href="#blog">
            Read the writing <span className="arrow">↓</span>
          </a>
        </div>
      </div>
    </section>);}

// === About ===
function About() {
  const D = window.PORTFOLIO_DATA;
  const ref = useReveal();
  return (
    <section className="sec" id="about">
      <div className="wrap reveal" ref={ref}>
        <div className="sec-head">
          <div className="sec-tag">01 / About</div>
          <h2 className="sec-title">
            I build, break and document <em>secure systems</em> — and write down what I learn along the way.
          </h2>
        </div>
        <div className="about-grid">
          <div className="about-side">
            <div className="row"><span className="k"></span><span className="v">{D.location}</span></div>
            <div className="row"><span className="k">University</span><span className="v">TED University
</span></div>
            <div className="row"><span className="k">Studying</span><span className="v">Computer Engineering</span></div>
            <div className="row"><span className="k">Focus</span><span className="v">Cyber Security · AI Engineering</span></div>
          </div>
          <div className="about-body">
            <p>
              I combine hands-on work in <em className="serif">cyber security and AI engineering  </em>
              with disciplined execution and a strong sense of responsibility — focusing on solutions
              that keep systems <span className="dim">continuous, secure, and intelligent</span>.
            </p>
            <p className="dim">
              I treat AI engineering as a craft rather than a hype cycle: prompts, retrieval, and evaluation harnesses that genuinely make security workflows faster. 

              <span style={{ color: 'var(--fg)' }}></span>
            </p>
          </div>
        </div>
      </div>
    </section>);
}

// === Skills ===
function Skills() {
  const D = window.PORTFOLIO_DATA;
  const ref = useReveal();
  return (
    <section className="sec" id="skills">
      <div className="wrap reveal" ref={ref}>
        <div className="sec-head">
          <div className="sec-tag">02 / Skill set</div>
          <h2 className="sec-title">
            Toolkit I reach for, ranked by how often it ends up <em>on the screen</em>.
          </h2>
        </div>
        <div className="skills-grid">
          {D.skills.map((s, i) =>
          <div className="skill" key={s.name}>
              <div className="skill-head">
                <span className="skill-num">{String(i + 1).padStart(2, '0')} / {String(D.skills.length).padStart(2, '0')}</span>
                <span className="skill-level" aria-label={`Level ${s.level} of 5`}>
                  {[1, 2, 3, 4, 5].map((n) => <i key={n} className={n <= s.level ? 'on' : ''}></i>)}
                </span>
              </div>
              <h3>{s.name}</h3>
              <p>{s.blurb}</p>
              <div className="skill-tags">
                {s.tags.map((t) => <span key={t}>{t}</span>)}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// === Experience ===
function Experience() {
  const D = window.PORTFOLIO_DATA;
  const ref = useReveal();
  return (
    <section className="sec" id="experience">
      <div className="wrap reveal" ref={ref}>
        <div className="sec-head">
          <div className="sec-tag">03 / Experience</div>
          <h2 className="sec-title">
            A short timeline of things I've helped <em>ship, defend, or run</em>.
          </h2>
        </div>
        <div className="exp-list">
          {(() => {
            const interns = D.experience.filter((e) => e.kind !== 'volunteer');
            const volunteers = D.experience.filter((e) => e.kind === 'volunteer');
            const renderItem = (e, i) =>
            <div className="exp-item" key={`${e.kind}-${i}`}>
                <div className="exp-date">{e.date}</div>
                <div className="exp-main">
                  <h3 className="exp-title">{e.title}</h3>
                  <p className="exp-org">
                    {e.org}
                    {e.org_serif ? <> <span className="serif">{e.org_serif}</span></> : null}
                  </p>
                  <p className="exp-desc">{e.desc}</p>
                </div>
                <div className="exp-tags">
                  {e.tags.map((t) => <span key={t}>{t}</span>)}
                </div>
              </div>;
            return (
              <>
                {interns.map(renderItem)}
                {volunteers.length > 0 &&
                <div className="exp-group">
                    <span className="exp-group-tag">Volunteer &amp; extracurricular</span>
                  </div>
                }
                {volunteers.map(renderItem)}
              </>);

          })()}
        </div>
      </div>
    </section>);

}

// === Blog ===
function PostGlyph({ kind }) {
  // Subtle, generic editorial cover SVGs — placeholders that read as system diagrams.
  if (kind === 'glyph-1') return (
    <svg viewBox="0 0 320 200" preserveAspectRatio="none">
      <g stroke="rgba(255,255,255,0.18)" fill="none" strokeWidth="1">
        {Array.from({ length: 14 }).map((_, i) =>
        <line key={i} x1="0" y1={14 * i + 10} x2="320" y2={14 * i + 10} />
        )}
      </g>
      <g fill="currentColor" opacity="0.85">
        <circle cx="80" cy="100" r="4" />
        <circle cx="160" cy="60" r="4" />
        <circle cx="160" cy="140" r="4" />
        <circle cx="240" cy="100" r="4" />
      </g>
      <g stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55">
        <path d="M80 100 L160 60 L240 100 L160 140 Z" />
        <path d="M80 100 L240 100" />
      </g>
    </svg>);

  if (kind === 'glyph-2') return (
    <svg viewBox="0 0 320 200" preserveAspectRatio="none">
      <g stroke="rgba(255,255,255,0.12)" fill="none">
        {Array.from({ length: 16 }).map((_, i) =>
        <line key={i} x1={20 * i} y1="0" x2={20 * i} y2="200" />
        )}
      </g>
      <g fill="currentColor" opacity="0.9">
        {[40, 60, 90, 70, 120, 95, 140, 110, 150, 130, 170, 145, 180, 160].map((h, i) =>
        <rect key={i} x={18 + i * 22} y={200 - h} width="10" height={h} rx="1" />
        )}
      </g>
    </svg>);

  return (
    <svg viewBox="0 0 320 200" preserveAspectRatio="none">
      <g stroke="currentColor" fill="none" opacity="0.7">
        <rect x="60" y="40" width="80" height="50" rx="4" />
        <rect x="180" y="40" width="80" height="50" rx="4" />
        <rect x="120" y="120" width="80" height="50" rx="4" />
        <path d="M100 90 L160 120" strokeDasharray="3 3" />
        <path d="M220 90 L180 120" strokeDasharray="3 3" />
      </g>
      <g fill="currentColor" opacity="0.85">
        <circle cx="100" cy="65" r="3" />
        <circle cx="220" cy="65" r="3" />
        <circle cx="160" cy="145" r="3" />
      </g>
    </svg>);

}

function Blog() {
  const D = window.PORTFOLIO_DATA;
  const ref = useReveal();
  return (
    <section className="sec" id="blog">
      <div className="wrap reveal" ref={ref}>
        <div className="sec-head">
          <div className="sec-tag">04 / Writing</div>
          <h2 className="sec-title">
            Notes from the lab — <em>field reports</em> rather than tutorials.
          </h2>
        </div>
        <div className="blog-grid">
          {D.posts.map((p, i) =>
          <a
            className="post"
            key={i}
            href={`#post/${p.slug}`}>
              <div className={`post-cover ${p.kind}`}>
                <PostGlyph kind={p.kind} />
              </div>
              <div className="post-meta">
                <span>{p.cat}</span>
                <span>{p.read}</span>
              </div>
              <h3 className="post-title">{p.title}</h3>
              <p className="post-excerpt">{p.excerpt}</p>
              <div className="post-foot">
                <span>{p.date}</span>
                <span className="post-arrow">↗</span>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// === Post page (full route) ===
function PostPage({ slug }) {
  const D = window.PORTFOLIO_DATA;
  const idx = D.posts.findIndex((p) => p.slug === slug);
  const p = D.posts[idx];

  // 404 → bounce home
  if (!p) {
    return (
      <section className="sec">
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-tag">404</div>
            <h2 className="sec-title">Post not found.</h2>
          </div>
          <a className="btn" href="#">← Back home</a>
        </div>
      </section>);
  }

  const prev = D.posts[(idx - 1 + D.posts.length) % D.posts.length];
  const next = D.posts[(idx + 1) % D.posts.length];

  return (
    <article className="post-page">
      <div className="post-page-wrap">
        <a className="post-back" href="#">
          <span className="arrow">←</span> Back to writing
        </a>

        <header className="post-page-head">
          <div className="post-page-meta">
            <span>{p.cat}</span>
            <span className="dot-sep">·</span>
            <span>{p.date}</span>
            <span className="dot-sep">·</span>
            <span>{p.read} read</span>
          </div>
          <h1 className="post-page-title">{p.title}</h1>
          <p className="post-page-lede">{p.excerpt}</p>
        </header>

        <div className={`post-page-cover ${p.kind}`}>
          <PostGlyph kind={p.kind} />
        </div>

        <div className="post-page-prose">
          {(p.body || [p.excerpt]).map((para, i) => <p key={i}>{para}</p>)}
        </div>

        <footer className="post-page-foot">
          <span className="mono">— Zeynep Sinem Anlar</span>
        </footer>

        <nav className="post-page-nav">
          <a className="pn pn-prev" href={`#post/${prev.slug}`}>
            <span className="pn-label">← Previous</span>
            <span className="pn-title">{prev.title}</span>
          </a>
          <a className="pn pn-next" href={`#post/${next.slug}`}>
            <span className="pn-label">Next →</span>
            <span className="pn-title">{next.title}</span>
          </a>
        </nav>
      </div>
    </article>);
}

// === Contact ===
function Contact() {
  const D = window.PORTFOLIO_DATA;
  const ref = useReveal();
  return (
    <section className="contact" id="contact">
      <div className="wrap reveal" ref={ref}>
        <div className="contact-grid">
          <h2>
            <span className="sans">Let's</span> talk<br />
            <span className="accent">security</span>.
          </h2>
          <div className="contact-side">
            {D.socials.map((s) =>
            <a key={s.label} href={s.href}>
                <span>{s.label}</span>
                <span className="at">{s.handle} ↗</span>
              </a>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// === Footer ===
function Foot() {
  return (
    <footer className="wrap foot">
      <span>ZEYNEP SINEM ANLAR</span>
      <span>© 2026 — ALL RIGHTS RESERVED.</span>
    </footer>);

}

// === Mount ===
function App() {
  const route = useHashRoute();
  const postMatch = route.match(/^post\/(.+)$/);

  return (
    <>
      <Nav />
      <main>
        {postMatch ?
        <PostPage slug={postMatch[1]} /> :

        <>
            <Hero />
            <About />
            <Skills />
            <Experience />
            <Blog />
            <Contact />
          </>
        }
      </main>
      <Foot />
    </>);
}

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