// Components

const { useState, useEffect, useRef } = React;

function Sidebar({ active, onNav }) {
  const links = [
    { id: "intro", label: "Intro", n: "01" },
    { id: "about", label: "Over mij", n: "02" },
    { id: "experience", label: "Ervaring", n: "03" },
    { id: "education", label: "Opleiding", n: "04" },
    { id: "skills", label: "Vaardigheden", n: "05" },
    { id: "portfolio", label: "Portfolio", n: "06" },
  ];
  return (
    <aside className="sidebar">
      <div className="sb-photo">
        <img src="assets/tim.jpg" alt="Tim Overbeek" />
      </div>
      <div className="sb-identity">
        <div className="eyebrow"></div>
        <h1>Tim<br/><em>Overbeek</em></h1>
        <div className="role">{DATA.tagline}</div>
      </div>
      <div className="sb-contact">
        <div className="row"><span className="k">Email</span><a className="v" href={`mailto:${DATA.contact.email}`}>{DATA.contact.email}</a></div>
        <div className="row"><span className="k">Tel</span><a className="v" href={`tel:${DATA.contact.phone.replace(/\s/g,'')}`}>{DATA.contact.phone}</a></div>
        <div className="row"><span className="k">Geboren</span><span className="v">{DATA.contact.dob}</span></div>
      </div>
      <nav className="sb-nav">
        {links.map(l => (
          <a key={l.id} href={`#${l.id}`}
             className={active === l.id ? 'active' : ''}
             onClick={(e) => { e.preventDefault(); onNav(l.id); }}>
            <span>{l.label}</span>
            <span className="num">{l.n}</span>
          </a>
        ))}
      </nav>
      <div className="sb-meta">
        <span>Utrecht, NL</span>
        <span>2026</span>
      </div>
    </aside>
  );
}

function SectionHead({ num, title, tag }) {
  return (
    <div className="section-head">
      <span className="num">{num}</span>
      <h2>{title}</h2>
      {tag && <span className="tag">{tag}</span>}
    </div>
  );
}

function Hero() {
  return (
    <section id="intro" className="hero">
      <p className="lead" dangerouslySetInnerHTML={{__html: DATA.lead}} />
      <div className="meta-grid">
        {DATA.meta.map((m, i) => (
          <div key={i}>
            <div className="k">{m.k}</div>
            <div className="v">{m.v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about">
      <SectionHead num="02" title="Over mij" tag="Introductie" />
      <div className="about-body">
        {DATA.about.map((p, i) => <p key={i}>{p}</p>)}
      </div>
    </section>
  );
}

function Experience() {
  return (
    <section id="experience">
      <SectionHead num="03" title="Ervaring" tag="4 rollen" />
      <div className="exp-list">
        {DATA.experience.map((e, i) => (
          <div key={i} className="exp">
            <div className="when">
              {e.now ? <span className="now">{e.when}</span> : e.when}
            </div>
            <div className="body">
              <h3>{e.title}</h3>
              <div className="org">{e.org}</div>
              <p>{e.body}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Education() {
  return (
    <section id="education">
      <SectionHead num="04" title="Opleiding" tag="4 opleidingen" />
      <div className="edu-grid">
        {DATA.education.map((e, i) => (
          <div key={i} className="edu">
            <div className="when">{e.when}</div>
            <h4>{e.title}</h4>
            <div className="org">{e.org}</div>
            <p>{e.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Skills() {
  return (
    <section id="skills">
      <SectionHead num="05" title="Vaardigheden" tag={`${DATA.skills.length} items`} />
      <div className="skills">
        {DATA.skills.map((s, i) => (
          <div key={i} className="skill">
            <span className="num">{String(i + 1).padStart(2, '0')}</span>
            <span className="name">{s.name}</span>
            <span className="cat">{s.cat}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Portfolio({ onOpen }) {
  return (
    <section id="portfolio">
      <SectionHead num="06" title="Portfolio" tag={`${DATA.portfolio.length} projecten`} />
      <p className="port-intro">
        Een selectie van AI-agents & assistants, automatiseringen, trainingen en
        solution-design werk uit mijn tijd bij PGGM. Klik op een kaart voor
        context, mijn rol en resultaat.
      </p>
      <div className="port-grid">
        {DATA.portfolio.map((p, i) => (
          <article key={p.id}
                   className={'pcard' + (p.feat ? ' feat' : '')}
                   onClick={() => onOpen(p)}>
            <span className="pc-num">{String(i + 1).padStart(2, '0')}</span>
            <div className="pc-kind">{p.kind}</div>
            <h3>{p.title}</h3>
            <p>{p.lede}</p>
            <div className="pc-footer">
              <div className="pc-tags">
                {p.tags.slice(0, 3).map(t => <span key={t} className="pc-tag">{t}</span>)}
              </div>
              <span className="pc-open">Open →</span>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function Modal({ project, onClose }) {
  useEffect(() => {
    if (!project) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [project, onClose]);
  if (!project) return null;
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="close" onClick={onClose} aria-label="Sluiten">×</button>
        <div className="m-kind">{project.kind}</div>
        <h2>{project.title}</h2>
        <div className="m-tags">
          {project.tags.map(t => <span key={t} className="m-tag">{t}</span>)}
        </div>
        <div className="m-body">
          <p>{project.lede}</p>
          {project.body.map((b, i) => (
            <p key={i} dangerouslySetInnerHTML={{__html: b}} />
          ))}
        </div>
        <div className="m-meta">
          <div><div className="k">Mijn rol</div><div className="v">{project.role}</div></div>
          <div><div className="k">Periode</div><div className="v">{project.year}</div></div>
          <div><div className="k">Organisatie</div><div className="v">{project.org}</div></div>
          <div><div className="k">Tags</div><div className="v">{project.tags.join(' · ')}</div></div>
        </div>
      </div>
    </div>
  );
}

function PrintBtn() {
  return (
    <button className="print-btn" onClick={() => window.print()}>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
        <rect x="6" y="14" width="12" height="8"/>
      </svg>
      Opslaan als PDF
    </button>
  );
}

Object.assign(window, { Sidebar, Hero, About, Experience, Education, Skills, Portfolio, Modal, PrintBtn });