// ContactPage.jsx — Esther Chan

function ContactRow({ label, value, href, delay }) {
  var _hov = React.useState(false);
  var hov = _hov[0]; var setHov = _hov[1];
  var _scan = React.useState(0);
  var scanW = _scan[0]; var setScanW = _scan[1];
  var rafRef = React.useRef(null);

  function startScan() {
    setHov(true);
    setScanW(0);
    var start = null;
    function tick(ts) {
      if (!start) start = ts;
      var p = Math.min((ts - start) / 400, 1);
      setScanW(p * 100);
      if (p < 1) rafRef.current = requestAnimationFrame(tick);
    }
    rafRef.current = requestAnimationFrame(tick);
  }

  function endScan() {
    setHov(false);
    cancelAnimationFrame(rafRef.current);
    setScanW(0);
  }

  return React.createElement('div', {
    onMouseEnter: startScan,
    onMouseLeave: endScan,
    style: {
      padding: '28px 0',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      position: 'relative', overflow: 'hidden', cursor: 'pointer'
    }
  },
    React.createElement('div', {
      style: {
        position: 'absolute', bottom: 0, left: 0,
        height: '1px', width: scanW + '%',
        background: 'rgba(255,138,76,0.7)',
        pointerEvents: 'none'
      }
    }),
    React.createElement('div', {
      style: {
        fontSize: '12px', fontWeight: 500, letterSpacing: '0.3em',
        textTransform: 'uppercase', color: 'rgba(255,255,255,0.22)', marginBottom: '6px'
      }
    }, label),
    React.createElement('a', {
      href: href,
      target: href && href.startsWith('http') ? '_blank' : undefined,
      rel: 'noopener noreferrer',
      style: {
        fontSize: 'clamp(16px,2vw,26px)',
        fontWeight: 300, letterSpacing: '-0.01em',
        textDecoration: 'none', display: 'block',
        color: hov ? '#ff8a4c' : '#fff',
        transition: 'color 0.25s ease'
      }
    },
      value,
      React.createElement('span', {
        style: {
          opacity: hov ? 1 : 0, marginLeft: '10px', fontSize: '0.75em',
          color: 'rgba(255,138,76,0.6)', transition: 'opacity 0.2s ease'
        }
      }, '↗')
    )
  );
}

function ContactPage({ navigate }) {
  var _mounted = React.useState(false);
  var mounted = _mounted[0]; var setMounted = _mounted[1];

  React.useEffect(function() {
    setMounted(false);
    var t = setTimeout(function() { setMounted(true); }, 80);
    return function() { clearTimeout(t); };
  }, []);

  function fi(delay) {
    return {
      opacity: mounted ? 1 : 0,
      transform: mounted ? 'translateY(0px)' : 'translateY(20px)',
      transition: 'opacity 0.75s ease ' + delay + 's, transform 0.75s ease ' + delay + 's',
    };
  }

  var contacts = [
    { label: 'Email',    value: 'esther78352@gmail.com',                href: 'mailto:esther78352@gmail.com' },
    { label: 'LinkedIn', value: 'linkedin.com/in/esther-chan-07213120a', href: 'https://www.linkedin.com/in/esther-chan-07213120a/' },
    { label: 'Phone',    value: '0490 013 682',                          href: 'tel:+61490013682' },
  ];

  return React.createElement('div', {
    style: { paddingTop: '56px', minHeight: '100vh', background: '#080808', display: 'flex', flexDirection: 'column' }
  },

    // Header
    React.createElement('div', { style: { padding: '64px 48px 0' } },
      React.createElement('div', {
        style: Object.assign({}, fi(0.05), {
          fontSize: '12px', fontWeight: 500, letterSpacing: '0.3em',
          textTransform: 'uppercase', color: 'rgba(255,255,255,0.22)', marginBottom: '12px'
        })
      }, 'Contact'),
      React.createElement('h1', {
        style: Object.assign({}, fi(0.12), {
          fontSize: 'clamp(72px,10vw,140px)', fontWeight: 300,
          lineHeight: 0.92, letterSpacing: '-0.02em', color: '#fff', margin: 0
        })
      }, 'contact')
    ),

    // Divider
    React.createElement('div', {
      style: Object.assign({}, fi(0.2), {
        height: '1px', background: 'rgba(255,255,255,0.06)', margin: '60px 48px 0'
      })
    }),

    // Body
    React.createElement('div', {
      style: { display: 'grid', gridTemplateColumns: '1fr 1fr', flex: 1, padding: '60px 48px 80px' }
    },

      // Left
      React.createElement('div', {
        style: { paddingRight: '80px', borderRight: '1px solid rgba(255,255,255,0.06)' }
      },
        React.createElement('p', {
          style: Object.assign({}, fi(0.28), {
            fontSize: 'clamp(18px,2vw,28px)', fontWeight: 300,
            lineHeight: 1.55, color: 'rgba(255,255,255,0.35)', marginBottom: '40px', cursor: 'default',
            transition: 'color 0.4s ease, text-shadow 0.4s ease',
          }),
          onMouseEnter: function(e) {
            e.currentTarget.style.color = 'rgba(255,255,255,0.95)';
            e.currentTarget.style.textShadow = '0 0 40px rgba(255,138,76,0.25)';
          },
          onMouseLeave: function(e) {
            e.currentTarget.style.color = 'rgba(255,255,255,0.35)';
            e.currentTarget.style.textShadow = 'none';
          }
        }, 'Open to the right opportunity.', React.createElement('br'), "Let's talk."),

        React.createElement('p', {
          style: Object.assign({}, fi(0.35), {
            fontSize: '15px', fontWeight: 400, lineHeight: 1.7,
            color: 'rgba(255,255,255,0.22)', maxWidth: '400px'
          })
        }, 'Currently seeking full-time roles in AI-driven system design, product design, and UX/UI — with a focus on human-centered AI experiences and practical digital systems.'),

        React.createElement('div', {
          style: Object.assign({}, fi(0.42), { marginTop: '48px' })
        },
          React.createElement('div', {
            style: { fontSize: '12px', fontWeight: 500, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.22)', marginBottom: '8px' }
          }, 'Based in'),
          React.createElement('div', {
            style: { fontSize: '15px', color: 'rgba(255,255,255,0.35)', lineHeight: 1.6 }
          }, 'Sydney — Brisbane City', React.createElement('br'), 'Australia')
        )
      ),

      // Right
      React.createElement('div', {
        style: { paddingLeft: '80px', display: 'flex', flexDirection: 'column' }
      },
        React.createElement(ContactRow, { label: 'Email',    value: 'esther78352@gmail.com',                href: 'mailto:esther78352@gmail.com',                           delay: 0.38 }),
        React.createElement(ContactRow, { label: 'LinkedIn', value: 'linkedin.com/in/esther-chan-07213120a', href: 'https://www.linkedin.com/in/esther-chan-07213120a/',       delay: 0.46 }),
        React.createElement(ContactRow, { label: 'Phone',    value: '0490 013 682',                          href: 'tel:+61490013682',                                        delay: 0.54 })
      )
    )
  );
}

Object.assign(window, { ContactPage });