// AboutPage.jsx — Esther Chan

const aboutStyles = {
  page: {
    paddingTop: '56px',
    minHeight: '100vh',
    background: '#080808',
  },
  header: {
    padding: '64px 48px 0',
  },
  label: {
    fontSize: '11px', fontWeight: 500, letterSpacing: '0.3em',
    textTransform: 'uppercase', color: 'rgba(255,255,255,0.25)',
    marginBottom: '12px',
  },
  pageTitle: {
    fontSize: 'clamp(72px, 10vw, 140px)',
    fontWeight: 300, lineHeight: 0.92, letterSpacing: '-0.02em',
    color: '#fff',
  },

  // Main layout
  main: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: '0',
    marginTop: '60px',
    borderTop: '1px solid rgba(255,255,255,0.06)',
  },

  // Left — photo column
  photoCol: {
    position: 'sticky',
    top: '56px',
    height: 'calc(100vh - 56px)',
    overflow: 'hidden',
  },
  photo: {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    objectPosition: 'center top',
    display: 'block',
    filter: 'grayscale(100%) contrast(1.05)',
    mixBlendMode: 'luminosity',
    opacity: 0.9,
  },
  photoOverlay: {
    position: 'absolute',
    inset: 0,
    background: 'linear-gradient(to right, transparent 70%, #080808 100%)',
    pointerEvents: 'none',
  },

  // Right — content column
  contentCol: {
    padding: '64px 48px 80px',
    borderLeft: '1px solid rgba(255,255,255,0.06)',
  },

  intro: {
    fontSize: 'clamp(18px, 2vw, 26px)',
    fontWeight: 300,
    lineHeight: 1.6,
    color: 'rgba(255,255,255,0.85)',
    marginBottom: '16px',
  },
  introAccent: {
    color: '#ff8a4c',
  },
  introBio2: {
    fontSize: 'clamp(15px, 1.4vw, 19px)',
    fontWeight: 300,
    lineHeight: 1.7,
    color: 'rgba(255,255,255,0.50)',
    marginTop: '20px',
    marginBottom: '48px',
  },

  divider: {
    height: '1px',
    background: 'rgba(255,255,255,0.06)',
    margin: '40px 0',
  },

  sectionLabel: {
    fontSize: '10px', fontWeight: 500, letterSpacing: '0.32em',
    textTransform: 'uppercase', color: 'rgba(255,255,255,0.22)',
    marginBottom: '20px',
  },

  // Capabilities grid
  capGrid: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: '8px 24px',
    marginBottom: '8px',
  },
  capItem: {
    fontSize: '14px',
    fontWeight: 400,
    color: 'rgba(255,255,255,0.55)',
    lineHeight: 1.6,
    paddingBottom: '8px',
    borderBottom: '1px solid rgba(255,255,255,0.05)',
  },

  // Tools
  toolGrid: {
    display: 'flex',
    flexWrap: 'wrap',
    gap: '8px',
  },
  toolTag: {
    fontSize: '11px',
    fontWeight: 500,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.40)',
    border: '1px solid rgba(255,255,255,0.10)',
    padding: '5px 10px',
    borderRadius: '2px',
  },

  // Experience
  expRow: {
    fontSize: '14px',
    color: 'rgba(255,255,255,0.50)',
    lineHeight: 1.8,
  },

  // Footer CTA
  cta: {
    marginTop: '48px',
    display: 'flex',
    flexDirection: 'column',
    gap: '6px',
  },
  ctaLocation: {
    fontSize: '11px', fontWeight: 500, letterSpacing: '0.25em',
    textTransform: 'uppercase', color: 'rgba(255,255,255,0.20)',
  },
  ctaAvailability: {
    fontSize: '13px',
    color: 'rgba(255,255,255,0.40)',
    lineHeight: 1.6,
    marginBottom: '20px',
  },
  ctaLink: {
    display: 'inline-flex', alignItems: 'center', gap: '8px',
    cursor: 'pointer',
    fontSize: '11px', fontWeight: 500, letterSpacing: '0.2em',
    textTransform: 'uppercase', color: '#ff8a4c',
    transition: 'opacity 0.2s ease',
  },
};

const capabilities = [
  'AI-driven system design',
  'Human-centered AI design',
  'Product design',
  'Conversational interface design',
  'UX/UI design',
  'UX research',
  'User journey mapping',
  'Service blueprinting',
  'Wireframing',
  'Interactive prototyping',
  'Design systems',
  'Information architecture',
  'Visual design',
  'Brand identity design',
  'Graphic design',
  'AI-assisted prototyping',
  'Agile collaboration',
  'Stakeholder communication',
];

const tools = [
  'Figma', 'Figma Make', 'Cursor', 'Claude', 'ChatGPT',
  'Vercel', 'Framer', 'Wix', 'Jira',
  'Adobe Illustrator', 'Photoshop', 'InDesign',
  'Canva', 'Microsoft Office', 'Google Workspace',
];

const experience = [
  'NewtonRussell',
  'DistinctionCoding',
  'MOMENTANÉE',
  'RiCCO Engineering International',
  'Sushi Bros',
  'GotGot Hunter',
];

function AboutPage({ navigate }) {
  return (
    <div style={aboutStyles.page}>
      <div style={aboutStyles.header}>
        <div style={aboutStyles.label}>About</div>
        <h1 style={aboutStyles.pageTitle}>about</h1>
      </div>

      <div style={aboutStyles.main}>

        {/* Left — photo */}
        <div style={{ position: 'relative', ...aboutStyles.photoCol }}>
          <img
            src="../../uploads/photo-1777533153916.png"
            alt="Esther Chan"
            style={aboutStyles.photo}
          />
          <div style={aboutStyles.photoOverlay}></div>
        </div>

        {/* Right — content */}
        <div style={aboutStyles.contentCol}>

          {/* Bio */}
          <p style={aboutStyles.intro}>
            UX/Product Designer focused on{' '}
            <span style={aboutStyles.introAccent}>research-led solutions</span>{' '}
            for complex digital systems.
          </p>
          <p style={aboutStyles.introBio2}>
            I combine HCI thinking and visual design to create accessible,
            human-centered experiences.
          </p>

          {/* Capabilities */}
          <div style={aboutStyles.sectionLabel}>Capabilities</div>
          <div style={aboutStyles.capGrid}>
            {capabilities.map(c => (
              <div key={c} style={aboutStyles.capItem}>{c}</div>
            ))}
          </div>

          <div style={aboutStyles.divider}></div>

          {/* Tools */}
          <div style={aboutStyles.sectionLabel}>Tools</div>
          <div style={aboutStyles.toolGrid}>
            {tools.map(t => (
              <span key={t} style={aboutStyles.toolTag}>{t}</span>
            ))}
          </div>

          <div style={aboutStyles.divider}></div>

          {/* Experience */}
          <div style={aboutStyles.sectionLabel}>Previously</div>
          <div style={aboutStyles.expRow}>
            {experience.join(' — ')}
          </div>

          {/* CTA */}
          <div style={aboutStyles.cta}>
            <div style={aboutStyles.ctaLocation}>Sydney — Brisbane</div>
            <p style={aboutStyles.ctaAvailability}>
              Open to 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.
            </p>
            <div
              style={aboutStyles.ctaLink}
              onClick={() => navigate('contact')}
              onMouseEnter={e => e.currentTarget.style.opacity = '0.6'}
              onMouseLeave={e => e.currentTarget.style.opacity = '1'}
            >
              Get in touch →
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AboutPage });