const { NavBar, SectionHeading, Tag, GlassPanel } = window.ZiggyPortfolioDesignSystem_957ce8;
const SKILLS = [
  { title: 'Webdesign', desc: 'Moderne en gebruiksvriendelijke websites bouwen', tags: ['HTML/CSS', 'React', 'Figma', 'Responsive Design'] },
  { title: 'Social Media Beheer', desc: 'Content creëren en social media strategieën ontwikkelen', tags: ['Content Creatie', 'Instagram', 'TikTok', 'Branding'] },
  { title: 'Creative Design', desc: 'Visuele concepten uitwerken van idee tot eindresultaat', tags: ['UI/UX Design', 'Adobe CC', 'Visual Design', 'Prototyping'] },
  { title: 'IT Expert', desc: 'Systemen en netwerken beheren en problemen oplossen', tags: ['System Administration', 'Troubleshooting', 'Hardware', 'Networking'] }
];
const HOBBIES = [
  { title: 'Fitness', desc: 'Ik ga graag naar de sportschool om fit te blijven en mezelf uit te dagen. Het helpt me om mijn hoofd leeg te maken en energie op te doen.' },
  { title: 'Gaming', desc: 'In mijn vrije tijd game ik graag. Het is een perfecte manier om te ontspannen en tijd door te brengen met vrienden.' },
  { title: 'Socializen', desc: 'Tijd doorbrengen met vrienden en verschillende activiteiten doen is waar ik echt van geniet. Van chillen tot spontane avonturen.' }
];
const EXPERIENCE = [
  { period: '2024 — Heden', role: 'CMD Student', org: 'Hogeschool Rotterdam' },
  { period: '2022 — 2024', role: 'IT Expert System and Devices', org: 'MBO Opleiding' }
];
function AboutMe({ onNavigate }) {
  return React.createElement('div', { style: { position: 'relative', minHeight: 640, background: 'var(--surface-page)' } },
    React.createElement(NavBar, { active: 'ABOUT ME', onNavigate }),
    React.createElement('div', { style: { paddingTop: 160, paddingLeft: 'var(--page-margin)', paddingRight: 'var(--page-margin)', paddingBottom: 'var(--space-9)', boxSizing: 'border-box' } },
      React.createElement('div', { className: 'grid-2', style: { alignItems: 'start' } },
        React.createElement('div', null,
          React.createElement(SectionHeading, { label: 'About me', title: 'Hey, ik ben Ziggy.' }),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', marginTop: 'var(--space-6)', maxWidth: 620 } },
            React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, "Ik ben 19 jaar en studeer Communicatie & Multimedia Design (CMD) aan de Hogeschool Rotterdam. Mijn interesse in techniek begon eerder, tijdens mijn opleiding IT Expert System and Devices, maar ik miste daar de creatieve kant. Die combinatie heb ik nu gelukkig wel gevonden."),
            React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, "Wat mij het meest aanspreekt is het vertalen van ideeën naar iets visueels en interactiefs. Of het nu gaat om UX/UI, webdesign of digitale creatie — ik vind het leuk om iets te maken dat niet alleen goed werkt, maar er ook sterk uitziet en een verhaal vertelt."),
            React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, "Buiten mijn studie om ben ik vaak bezig met ontwerpen en experimenteren met nieuwe ideeën. Daarnaast werk ik parttime als zzp'er, waarbij ik bedrijven help met websites, social media en branding. Zo kan ik blijven groeien én echte impact maken met mijn werk."),
            React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, "En als ik niet achter mijn laptop zit, ben ik waarschijnlijk in de sportschool te vinden — even mijn hoofd leegmaken en weer met frisse energie verder.")
          )
        ),
        React.createElement('div', { style: { aspectRatio: '3/4', borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
          React.createElement('img', { src: '../../assets/ziggy-portrait.png', alt: 'Ziggy', style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } })
        )
      ),
      React.createElement('div', { style: { marginTop: 'var(--space-10)' } },
        React.createElement('div', { style: { overflow: 'hidden', background: 'var(--green-500)', borderRadius: 'var(--radius-md)', padding: 'var(--space-4) 0' } },
          React.createElement('div', { className: 'skills-marquee-track', style: { display: 'flex', width: 'max-content', gap: 'var(--space-8)' } },
            [0, 1].map((rep) => React.createElement(React.Fragment, { key: rep },
              SKILLS.map((s) => React.createElement('div', { key: rep + '-' + s.title, style: { display: 'flex', alignItems: 'baseline', gap: 'var(--space-3)', whiteSpace: 'nowrap' } },
                React.createElement('span', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', color: '#fff' } }, s.title),
                React.createElement('span', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', color: 'rgba(255,255,255,.8)' } }, s.tags.join(' \u00b7 ')),
                React.createElement('span', { style: { color: 'rgba(255,255,255,.5)', marginLeft: 'var(--space-5)' } }, '\u2726')
              ))
            ))
          )
        )
      ),
      React.createElement('div', { style: { marginTop: 'var(--space-10)' } },
        React.createElement(SectionHeading, { label: 'Hobbies', title: 'Outside of work.' }),
        React.createElement('div', { className: 'grid-3', style: { marginTop: 'var(--space-6)' } },
          HOBBIES.map((h) => React.createElement('div', { key: h.title, style: { borderRadius: 'var(--radius-md)', overflow: 'hidden' } },
            React.createElement('div', { style: { aspectRatio: '4/3', background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' } }, 'Photo placeholder'),
            React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: 'var(--space-3) 0 var(--space-2) 0', color: 'var(--text-primary)' } }, h.title),
            React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', color: 'var(--text-secondary)', margin: 0 } }, h.desc)
          ))
        )
      ),
      React.createElement('div', { style: { position: 'relative', marginTop: 'var(--space-10)' } },
        React.createElement('div', { style: { position: 'absolute', width: 260, height: 260, borderRadius: '50%', background: 'var(--green-500)', filter: 'blur(70px)', opacity: .55, top: -60, left: '8%', zIndex: 0 } }),
        React.createElement('div', { style: { position: 'absolute', width: 220, height: 220, borderRadius: '50%', background: 'var(--green-700)', filter: 'blur(70px)', opacity: .5, top: 40, right: '12%', zIndex: 0 } }),
        React.createElement('div', { className: 'grid-2', style: { position: 'relative', zIndex: 1, gap: 'var(--space-5)' } },
        React.createElement(GlassPanel, null,
          React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: '0 0 var(--space-3) 0', color: 'var(--text-primary)' } }, 'Ambitie'),
          React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, 'Ik ben ambitieus en zie mijn toekomst in het vakgebied CMD als een kans om niet alleen creatieve impact te maken, maar ook om carrière te bouwen. Mijn doel is om geld te verdienen met mijn passie, een positie te bereiken waarin ik strategische beslissingen kan nemen, en leiding te geven aan projecten en teams.')
        ),
        React.createElement(GlassPanel, null,
          React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: '0 0 var(--space-3) 0', color: 'var(--text-primary)' } }, 'Autonomie'),
          React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, 'Voor mij is autonomie een belangrijk streven binnen het vakgebied CMD. Ik wil graag mijn eigen baas zijn, zodat ik zelf kan bepalen aan welke projecten ik werk en hoe ik mijn tijd indeel. Werken op mijn eigen voorwaarden geeft mij de vrijheid om mijn creativiteit optimaal te benutten.')
        )
        )
      ),
      React.createElement('div', { style: { marginTop: 'var(--space-10)' } },
        React.createElement(SectionHeading, { label: 'Experience', title: 'Where I\u2019ve been.' }),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', marginTop: 'var(--space-6)' } },
          EXPERIENCE.map((e, i) => React.createElement('div', { key: e.role, className: 'about-exp-row', style: { padding: 'var(--space-5) 0', borderTop: i > 0 ? '1px solid var(--border-subtle)' : 'none' } },
            React.createElement('div', { className: 'about-exp-period', style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', color: 'var(--text-muted)' } }, e.period),
            React.createElement('div', null,
              React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', color: 'var(--text-primary)' } }, e.role),
              React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', color: 'var(--text-secondary)' } }, e.org)
            )
          ))
        )
      )
    )
  );
}
window.AboutMe = AboutMe;