const { MonoLabel, Chip } = window;
const d = window.PORTFOLIO_DATA;
const FOCUS_DOMAINS = window.FOCUS_DOMAINS;

const HeroSection = () => {
  const isPlaceholder = (t) => t && t.startsWith('//');

  return (
    <div className="hero-padded" style={{ padding: '18px 40px 14px' }}>

      <div className="hero-split" style={{
        display: 'flex', gap: 24, alignItems: 'center',
        justifyContent: 'space-between', flexWrap: 'wrap',
        marginBottom: 14
      }}>
        <div style={{ minWidth: 0, flex: '1 1 460px' }}>
          <div className="hero-name" style={{
            fontFamily: 'var(--sans-head)', fontWeight: 700,

            letterSpacing: '0.04em', lineHeight: 0.95,
            color: 'var(--text-pri)', fontSize: "65px"
          }}>
            BRIAN <span style={{ color: 'var(--accent)' }}>WITANOWSKI</span>
          </div>
          {!isPlaceholder(d.personal.tagline) &&
          <p style={{
            fontFamily: 'var(--sans-body)', fontSize: 19.5, lineHeight: 1.55,
            fontWeight: 500,
            color: 'var(--text-pri)', marginTop: 12, maxWidth: '60ch',
            textWrap: 'pretty'
          }}>
              {d.personal.tagline}
            </p>
          }
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 13.5, letterSpacing: '0.18em',
            color: 'var(--text-sec)', marginTop: 12, fontWeight: 500,
            display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap'
          }}>
            <span style={{ whiteSpace: 'nowrap' }}>AEROSPACE &amp; SYSTEMS ENGINEER</span>
            <span style={{ color: 'var(--border-bright)' }}>·</span>
            <span style={{ whiteSpace: 'nowrap' }}>RPI · B.S. AEROSPACE ENGINEERING · MAY 2027</span>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'flex-end' }}>
          <Chip href="About.html" sys="002" label="ABOUT" size="lg" style={{ fontSize: 16, padding: '13px 22px', letterSpacing: '0.12em' }} />
          <Chip href="Skills.html" sys="003" label="SKILLS" size="lg" style={{ fontSize: 16, padding: '13px 22px', letterSpacing: '0.12em' }} />

          <div style={{ width: 1, height: 32, background: 'var(--border-bright)', margin: '0 4px' }} />

          {[
          { href: `mailto:${d.personal.email}`, label: d.personal.email, prefix: '@' },
          { href: d.personal.linkedin, label: 'LinkedIn', prefix: 'in' },
          { href: d.personal.github, label: 'GitHub', prefix: '{}' }].
          map(({ href, label, prefix }) =>
          <a key={label} href={href} target="_blank" rel="noreferrer"
          style={{
            fontFamily: 'var(--mono)', fontSize: 15, letterSpacing: '0.08em',
            color: 'var(--text-sec)', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '12px 18px',
            border: '1px solid var(--border-bright)',
            background: 'var(--surface)',
            whiteSpace: 'nowrap',
            transition: 'all 0.15s'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'var(--accent)';e.currentTarget.style.color = 'var(--accent)';}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--border-bright)';e.currentTarget.style.color = 'var(--text-sec)';}}>
            <span style={{ color: 'var(--accent)', fontWeight: 600 }}>{prefix}</span>
            {label}
          </a>
          )}
        </div>
      </div>
    </div>);

};

Object.assign(window, { HeroSection });