const { NavBar, SectionHeading, Button } = window.ZiggyPortfolioDesignSystem_957ce8;
function Contact({ onNavigate }) {
  return React.createElement('div', { style: { position: 'relative', minHeight: 640, background: 'var(--surface-page)' } },
    React.createElement(NavBar, { active: 'CONTACT', onNavigate }),
    React.createElement('div', { className: 'grid-2', style: { paddingTop: 160, paddingLeft: 'var(--page-margin)', paddingRight: 'var(--page-margin)', paddingBottom: 'var(--space-9)', boxSizing: 'border-box', gap: 'var(--space-9)' } },
      React.createElement('div', null,
        React.createElement(SectionHeading, { label: 'Get in touch', title: "Let's connect." }),
        React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', marginTop: 'var(--space-6)', maxWidth: 460 } }, "Have a project in mind or just want to chat? I'd love to hear from you. Feel free to reach out through any of the channels below."),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginTop: 'var(--space-6)', maxWidth: 460 } },
          React.createElement('a', { href: 'mailto:hello@ziggy.design', style: { display: 'flex', alignItems: 'center', gap: 'var(--space-4)', padding: 'var(--space-4) var(--space-5)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', textDecoration: 'none', color: 'var(--text-primary)', fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)' } },
            React.createElement('span', { style: { width: 36, height: 36, borderRadius: '50%', background: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } },
              React.createElement('img', { src: '../../assets/star-white.png', width: 16, height: 16, alt: '' })
            ), 'Email'
          ),
          React.createElement('a', { href: '#', style: { display: 'flex', alignItems: 'center', gap: 'var(--space-4)', padding: 'var(--space-4) var(--space-5)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', textDecoration: 'none', color: 'var(--text-primary)', fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)' } },
            React.createElement('span', { style: { width: 36, height: 36, borderRadius: '50%', background: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } },
              React.createElement('img', { src: '../../assets/star-white.png', width: 16, height: 16, alt: '' })
            ), 'LinkedIn'
          )
        )
      ),
      React.createElement('form', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }, onSubmit: (e) => e.preventDefault() },
        ['Name', 'Email'].map((label) => React.createElement('div', { key: label, style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' } },
          React.createElement('label', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-muted)' } }, label),
          React.createElement('input', { type: label === 'Email' ? 'email' : 'text', placeholder: label === 'Email' ? 'your@email.com' : 'Your name', style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)', padding: 'var(--space-4)', borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-subtle)', background: 'var(--surface-card)', color: 'var(--text-primary)', outline: 'none', boxSizing: 'border-box' } })
        )),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' } },
          React.createElement('label', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-muted)' } }, 'Message'),
          React.createElement('textarea', { placeholder: 'Tell me about your project...', rows: 5, style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)', padding: 'var(--space-4)', borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-subtle)', background: 'var(--surface-card)', color: 'var(--text-primary)', outline: 'none', resize: 'vertical', boxSizing: 'border-box' } })
        ),
        React.createElement('div', { style: { marginTop: 'var(--space-2)' } },
          React.createElement(Button, { variant: 'accent' }, 'Send message')
        )
      )
    )
  );
}
window.Contact = Contact;