/* global React, Nav, ImgTile, PillButton, MediaCard, Annotation, Plane */
const { useState } = React;

/* Uniform squares — scaled to match live site. Middle hero larger. */
const HOME_TILES = [
  { src: './assets/imagery/porsche-rally.jpg', label: 'Portrait',    w: 112, h: 112 },
  { src: './assets/imagery/golf-course.jpg',   label: 'Lifestyle',   w: 112, h: 112 },
  { src: './assets/imagery/m5.jpg',            label: 'Automotive',  w: 160, h: 160 },
  { src: './assets/imagery/golf-r.jpg',        label: 'Commercial',  w: 112, h: 112 },
  { src: './assets/imagery/sky-tower.jpg',     label: 'Documentary', w: 112, h: 112 },
];

function HomeHero({ onNav }) {
  return (
    <section style={{
      position: 'relative', minHeight: '100vh',
      background: `url('./assets/imagery/sky-tower.jpg') center/cover no-repeat`,
      backgroundColor: '#c8d4e2',
      overflow: 'hidden',
    }}>
      {/* soft wash */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(230,235,242,.25) 0%, rgba(230,235,242,.02) 45%, rgba(180,195,215,.15) 100%)',
        pointerEvents: 'none',
      }} />

      {/* grain */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: .05, mixBlendMode: 'multiply',
        background: 'radial-gradient(circle at 20% 30%, transparent 0, rgba(0,0,0,.2) 100%)',
      }} />

      <Nav current="Home" onNav={onNav} onDark={false} />

      {/* Hero stack — vertically centered via min-height + flex */}
      <div style={{
        position: 'relative', zIndex: 4,
        minHeight: '100vh',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        gap: 56, paddingTop: 20, paddingBottom: 60,
      }}>
        {/* Title ABOVE tiles — matches live: Montserrat Bold 54/58, letter-spacing .54px, accents #7993AC */}
        <h1 className="slideUp" style={{
          fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
          fontWeight: 700, fontStyle: 'normal',
          fontSize: 54, lineHeight: '58px',
          color: 'rgba(0,0,0,0.99)', textAlign: 'center',
          textTransform: 'uppercase', letterSpacing: '0.54px',
          margin: 0,
          animationDelay: '0.05s',
        }}>
          Your Ideas<span style={{ color: '#7993AC' }}>.</span> Made <span style={{ color: '#7993AC' }}>Real</span>
        </h1>

        {/* Tiles row + annotation */}
        <div style={{ position: 'relative', display: 'flex', gap: 46, alignItems: 'center' }}>
          <div className="slideUp" style={{ position: 'absolute', left: -165, top: -4, pointerEvents: 'none', animationDelay: '0.55s' }}>
            <Annotation label="icons are clickable." style={{ position: 'static' }} />
          </div>
          {HOME_TILES.map((p, i) => (
            <div key={i} className="slideUp" style={{ animationDelay: `${0.22 + i * 0.08}s` }}>
              <ImgTile src={p.src} label={p.label} width={p.w} height={p.h}
                onClick={() => onNav('Photo')} />
            </div>
          ))}
        </div>

        {/* Photo / Video pill buttons */}
        <div className="slideUp" style={{ display: 'flex', gap: 34, marginTop: 4, animationDelay: '0.7s' }}>
          <PillButton variant="dark" onClick={() => onNav('Photo')}>PHOTO</PillButton>
          <PillButton variant="dark" onClick={() => onNav('Video')}>VIDEO</PillButton>
        </div>
      </div>

      {/* Cloud city bleed at bottom */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, height: 140,
        background: 'linear-gradient(180deg, transparent 0%, rgba(200,212,226,.4) 50%, rgba(180,195,215,.55) 100%)',
        pointerEvents: 'none',
      }} />
    </section>
  );
}

Object.assign(window, { HomeHero });