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

/* Video portfolio — cinematic 16:9 tiles with play-icon overlay on hover.
   Uses still images as poster frames (no real video assets available). */

const VIDEO_WORKS = [
  { src: './assets/imagery/m5.jpg',            title: 'BMW M5 — Cinematic',     meta: 'Automotive · 01:42' },
  { src: './assets/imagery/porsche-rally.jpg', title: 'Porsche Rally Day',      meta: 'Motorsport · 02:08' },
  { src: './assets/imagery/golf-r.jpg',        title: 'Golf R — Nardo Dawn',    meta: 'Automotive · 01:24' },
  { src: './assets/imagery/sky-tower.jpg',     title: 'City Currents',          meta: 'Architecture · 01:58' },
  { src: './assets/imagery/golf-course.jpg',   title: 'Morning Fairway',        meta: 'Lifestyle · 01:12' },
  { src: './assets/imagery/m5.jpg',            title: 'M5 — Night Studies',     meta: 'Commercial · 00:58' },
];

function PlayIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M8 5v14l11-7z" />
    </svg>
  );
}

function VideoTile({ item, delay }) {
  const [hover, setHover] = useState(false);
  return (
    <a
      className="slideUp"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'block', position: 'relative',
        overflow: 'hidden', cursor: 'pointer',
        background: '#0b0b0c',
        animationDelay: `${delay}s`,
        aspectRatio: '16 / 9',
      }}>
      <img src={item.src} alt={item.title} loading="lazy"
        style={{
          width: '100%', height: '100%', objectFit: 'cover', display: 'block',
          filter: hover ? 'brightness(.78)' : 'grayscale(.4) brightness(.7)',
          transform: hover ? 'scale(1.035)' : 'scale(1)',
          transition: 'transform 1s cubic-bezier(.2,.7,.15,1), filter .5s ease',
        }} />

      {/* Play button */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: `translate(-50%, -50%) scale(${hover ? 1 : 0.9})`,
        width: 72, height: 72, borderRadius: '50%',
        background: 'rgba(255,255,255,.92)',
        color: '#000',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        paddingLeft: 4,
        opacity: hover ? 1 : 0.85,
        transition: 'opacity .3s ease, transform .3s ease',
        boxShadow: '0 12px 40px rgba(0,0,0,.5)',
      }}>
        <PlayIcon size={26} />
      </div>

      {/* Caption */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        padding: '22px 22px 16px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 100%)',
        pointerEvents: 'none',
      }}>
        <div style={{
          fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
          fontWeight: 700, fontSize: 14.5, letterSpacing: '.03em',
          color: '#fff',
        }}>{item.title}</div>
        <div style={{
          fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
          fontWeight: 500, fontSize: 10.5, letterSpacing: '.15em',
          color: 'rgba(255,255,255,.7)', textTransform: 'uppercase',
        }}>{item.meta}</div>
      </div>
    </a>
  );
}

function VideoPortfolio({ onNav }) {
  return (
    <section style={{
      minHeight: '100vh', background: '#000', color: '#fff', position: 'relative',
    }}>
      <Nav current="Video" onNav={onNav} onDark={true} />

      {/* Header */}
      <div style={{
        paddingTop: 150, paddingBottom: 40,
        textAlign: 'center',
      }}>
        <div className="slideUp" style={{
          fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
          fontWeight: 500, fontSize: 12, letterSpacing: '.3em',
          color: 'rgba(255,255,255,.55)', textTransform: 'uppercase',
          marginBottom: 14,
          animationDelay: '0.05s',
        }}>
          <span style={{ color: '#fff' }}>Video</span>
        </div>
        <h1 className="slideUp" style={{
          fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
          fontWeight: 700, fontSize: 54, lineHeight: '58px',
          letterSpacing: '.54px', textTransform: 'uppercase',
          margin: 0, color: '#fff',
          animationDelay: '0.12s',
        }}>Video</h1>
      </div>

      {/* Grid — 2 columns for cinematic 16:9 tiles */}
      <div style={{
        padding: '20px 48px 80px',
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(440px, 1fr))',
        gap: 14,
      }}>
        {VIDEO_WORKS.map((v, i) => (
          <VideoTile key={i} item={v} delay={0.2 + (i % 3) * 0.06} />
        ))}
      </div>

      {/* Bottom CTA */}
      <div style={{
        padding: '40px 24px 96px',
        borderTop: '1px solid #16161a',
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
          fontWeight: 700, fontSize: 22, letterSpacing: '.04em',
          textTransform: 'uppercase', marginBottom: 18,
        }}>Let's make something.</div>
        <a onClick={() => onNav('Contact Us')} style={{
          display: 'inline-block', cursor: 'pointer',
          padding: '14px 34px', borderRadius: 999,
          background: '#fff', color: '#000',
          fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
          fontWeight: 700, fontSize: 13, letterSpacing: '.14em',
          textTransform: 'uppercase',
        }}>Contact Us</a>
      </div>
    </section>
  );
}

Object.assign(window, { VideoPortfolio });