/* Shared atoms shared between sections. Globals exported at bottom. */

const { useState, useEffect, useRef, useMemo } = React;

/* ============ Yellow highlight headline ============ */
function Highlight({ children }) {
  return <span className="hl">{children}</span>;
}

/* ============ Section wrapper ============ */
function Section({ id, label, eyebrow, children, dark = false, style = {} }) {
  return (
    <section
      id={id}
      data-screen-label={label}
      data-section
      style={{
        position: 'relative',
        padding: '120px 6vw',
        background: dark ? '#0A0A0A' : '#0F0F0E',
        ...style,
      }}
    >
      {eyebrow && (
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            marginBottom: 28,
            fontFamily: 'Manrope, sans-serif',
            fontSize: 12,
            fontWeight: 600,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: '#C9A86A',
          }}
        >
          <span style={{ width: 32, height: 1, background: '#C9A86A' }}></span>
          {eyebrow}
        </div>
      )}
      {children}
    </section>
  );
}

/* ============ Button ============ */
function Btn({ children, variant = 'primary', onClick, href, type, style = {}, ...rest }) {
  const base = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    padding: '16px 26px',
    fontFamily: 'Manrope, sans-serif',
    fontSize: 14,
    fontWeight: 600,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    border: 'none',
    borderRadius: 0,
    cursor: 'pointer',
    transition: 'transform 0.2s ease, background 0.2s ease, color 0.2s ease',
    textDecoration: 'none',
  };
  const variants = {
    primary: { background: '#F5B82E', color: '#0A0A0A' },
    ghost: { background: 'transparent', color: '#F5EFE6', border: '1px solid rgba(245,239,230,0.2)' },
    dark: { background: '#0A0A0A', color: '#F5EFE6', border: '1px solid #F5B82E' },
  };
  const styles = { ...base, ...variants[variant], ...style };
  if (href) return <a href={href} style={styles} {...rest}>{children}</a>;
  return <button type={type || 'button'} onClick={onClick} style={styles} {...rest}>{children}</button>;
}

/* ============ Field (input + label, dark editorial) ============ */
function Field({ label, name, type = 'text', value, onChange, placeholder, required, options, rows }) {
  const wrap = {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    fontFamily: 'Manrope, sans-serif',
  };
  const lab = {
    fontSize: 11,
    fontWeight: 600,
    letterSpacing: '0.16em',
    textTransform: 'uppercase',
    color: '#8B847A',
  };
  const inputStyle = {
    background: 'transparent',
    border: 'none',
    borderBottom: '1px solid rgba(245,239,230,0.2)',
    color: '#F5EFE6',
    fontFamily: 'Manrope, sans-serif',
    fontSize: 18,
    fontWeight: 400,
    padding: '10px 0 12px',
    outline: 'none',
    width: '100%',
  };
  const focusStyle = `
    .field input:focus, .field select:focus, .field textarea:focus {
      border-bottom-color: #F5B82E !important;
    }
    .field select option { background: #0A0A0A; color: #F5EFE6; }
  `;
  const id = `f-${name}`;
  return (
    <label htmlFor={id} className="field" style={wrap}>
      <style>{focusStyle}</style>
      <span style={lab}>{label}{required && <span style={{color:'#F5B82E'}}> *</span>}</span>
      {options ? (
        <select id={id} name={name} value={value} onChange={onChange} required={required} style={inputStyle}>
          <option value="">Select…</option>
          {options.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      ) : rows ? (
        <textarea id={id} name={name} value={value} onChange={onChange} placeholder={placeholder} required={required} rows={rows} style={{...inputStyle, resize:'vertical', minHeight: 80}} />
      ) : (
        <input id={id} name={name} type={type} value={value} onChange={onChange} placeholder={placeholder} required={required} style={inputStyle} />
      )}
    </label>
  );
}

/* ============ Number marker ============ */
function NumMark({ n }) {
  return (
    <span style={{
      fontFamily: 'Instrument Serif, serif',
      fontStyle: 'italic',
      fontSize: 22,
      color: '#C9A86A',
      fontWeight: 400,
    }}>
      {String(n).padStart(2, '0')}
    </span>
  );
}

/* ============ Instagram glyph ============ */
function IGIcon({ size = 18, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="0.6" fill={color} stroke="none" />
    </svg>
  );
}

/* ============ Logo / wordmark ============ */
function Wordmark({ size = 18, color = '#F5EFE6', accent = '#F5B82E', showIG = true }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14 }}>
      <a href="#top" style={{
        fontFamily: 'Archivo Black, sans-serif',
        fontSize: size,
        letterSpacing: '0.08em',
        color: color,
        textDecoration: 'none',
        display: 'inline-flex',
        alignItems: 'baseline',
        gap: 0,
      }}>
        HN<span style={{ color: accent, margin: '0 1px' }}>·</span>HUAE
      </a>
      {showIG && (
        <a href="https://www.instagram.com/thehnhuae" target="_blank" rel="noopener" aria-label="HNHUAE on Instagram"
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: size + 16, height: size + 16, borderRadius: '50%',
            border: `1px solid ${color}33`, color: color, textDecoration: 'none',
            transition: 'all .2s ease',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = accent; e.currentTarget.style.color = '#0A0A0A'; e.currentTarget.style.borderColor = accent; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = color; e.currentTarget.style.borderColor = `${color}33`; }}
        >
          <IGIcon size={size - 2} />
        </a>
      )}
    </div>
  );
}

/* Export to window so other babel scripts can use them */
Object.assign(window, { Highlight, Section, Btn, Field, NumMark, Wordmark, IGIcon });