/* global React, Nav, Footer */
const { useState } = React;

/* Our Work — chooser page.
   Two large cards: PHOTO and VIDEO, each leading to its own portfolio. */

function WorkCard({ image, label, onClick, delay = 0 }) {
  const [hover, setHover] = useState(false);
  return (
    <a
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="slideUp"
      style={{
        cursor: 'pointer',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 22,
        textDecoration: 'none',
        animationDelay: `${delay}s`,
      }}>
      <div style={{
        width: 'min(42vw, 560px)',
        aspectRatio: '1 / 1',
        overflow: 'hidden',
        position: 'relative',
        background: '#111',
        boxShadow: hover
          ? '0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06)'
          : '0 18px 50px rgba(0,0,0,.45)',
        transition: 'transform .45s cubic-bezier(.2,.7,.15,1), box-shadow .45s ease',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
      }}>
        <img
          src={image}
          alt={label}
          style={{
            width: '100%', height: '100%',
            objectFit: 'cover',
            display: 'block',
            filter: 'grayscale(1) brightness(.85)',
            transform: hover ? 'scale(1.04)' : 'scale(1)',
            transition: 'transform 1s cubic-bezier(.2,.7,.15,1)',
          }} />
      </div>
      <div style={{
        fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
        fontWeight: 700,
        fontSize: 16.5,
        lineHeight: '26.4px',
        letterSpacing: '0.08em',
        color: '#fff',
        textTransform: 'uppercase',
      }}>{label}</div>
    </a>
  );
}

function OurWork({ onNav }) {
  return (
    <section style={{
      minHeight: '100vh',
      background: '#000',
      color: '#fff',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* subtle radial vignette to echo the live site */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse at center, rgba(40,40,46,.25) 0%, rgba(0,0,0,0) 55%)',
      }} />

      <Nav current="Our Work" onNav={onNav} onDark={true} />

      <div style={{
        minHeight: '100vh',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '140px 64px 80px',
        position: 'relative', zIndex: 2,
      }}>
        <div style={{
          display: 'flex',
          gap: 'clamp(40px, 6vw, 80px)',
          alignItems: 'center',
          justifyContent: 'center',
          flexWrap: 'wrap',
        }}>
          <WorkCard
            image="./assets/imagery/porsche-rally.jpg"
            label="Photo"
            onClick={() => onNav('Photo')}
            delay={0.1}
          />
          <WorkCard
            image="./assets/imagery/m5.jpg"
            label="Video"
            onClick={() => onNav('Video')}
            delay={0.22}
          />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { OurWork });