// Hero — three variants. Default 'composite': Vault Stock photo with product placed.
function PSHero() {
  return (
    <section className="ps-section" data-mobile-pad="true" data-mobile-y="md" style={{
      position: 'relative', minHeight: '100vh', background: 'var(--cream)',
      paddingTop: 120, overflow: 'hidden'
    }}>
      <div className="ps-stack-mobile" style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1.15fr',
        gap: 0,
        minHeight: 'calc(100vh - 120px)',
        alignItems: 'stretch'
      }}>
        {/* LEFT, typographic slab */}
        <div data-mobile-pad="true" style={{ padding: '40px 64px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--cocoa)', verticalAlign: 'middle', marginRight: 12 }}></span>
              Product Studio, by The Vault Stock
            </div>
            <h1 className="celestial ps-hero-display" style={{
              fontSize: 'clamp(64px, 8.4vw, 132px)',
              color: 'var(--cocoa)', margin: 0, letterSpacing: "0.669px", lineHeight: 0.95
            }}>
              PRODUCT STUDIO.
              <span className="ps-hero-display-sub" style={{ display: 'block', marginTop: 18, fontStyle: 'normal', letterSpacing: '-0.02em', fontWeight: 400, fontFamily: "\"La Villa\"", fontSize: 'clamp(34px, 4.4vw, 64px)', lineHeight: 1.05 }}>AUTHENTIC X AI HYBRID</span>
            </h1>
            <p style={{
              fontFamily: '"La Villa", sans-serif', fontSize: 17, lineHeight: 1.55,
              color: 'var(--fg-2)', maxWidth: 460, marginTop: 36
            }}>
              Upload your product. Pick from our library of <em style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal' }}>10,000+</em> Vault Stock photographs, or bring your own. Our engine drops it into the scene like it was always there. No shoot. No studio. No AI background slop.
            </p>
            <div style={{ display: 'flex', gap: 16, marginTop: 40, flexWrap: 'wrap', alignItems: 'center' }}>
              <PSPrimary href={window.PORTAL_URL} target="_blank">Open Product Studio</PSPrimary>
              <PSSecondary href="Examples.html">See examples</PSSecondary>
            </div>
            <div style={{
              marginTop: 18,
              fontFamily: '"La Villa", sans-serif',
              fontStyle: 'italic',
              fontSize: 13,
              color: 'var(--fg-2)',
              opacity: 0.85,
              letterSpacing: '0.01em'
            }}>
              Free to explore. Credits to generate.
            </div>
          </div>

          {/* Tiny stat row at the bottom */}
          <div className="ps-hero-stat-row" style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
            marginTop: 56, paddingTop: 24, borderTop: '1px solid var(--border-1)'
          }}>
            {[
            ['10,000+', 'images or BYO'],
            ['all categories', 'skincare, clothing, jewellery'],
            ['2K & 4K', 'commercial-ready']].
            map(([n, l]) =>
            <div key={l}>
                <div style={{ fontFamily: '"La Villa", sans-serif', fontWeight: 500, fontSize: 22, color: 'var(--cocoa)', lineHeight: 1, letterSpacing: '-0.01em' }}>{n}</div>
                <div className="eyebrow" style={{ marginTop: 6, fontSize: 10 }}>{l}</div>
              </div>
            )}
          </div>
        </div>

        {/* RIGHT, Before / After visual */}
        <div style={{ position: 'relative', overflow: 'hidden', minHeight: 'min(60vh, 520px)' }}>
          <HeroSlider />
        </div>
      </div>
    </section>);

}

/* ---------- Variant 1: Composite ---------- */
function HeroComposite() {
  return (
    <div className="grain" style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'url(assets/denim-stool.jpg)',
      backgroundSize: 'cover', backgroundPosition: 'center 30%'
    }}>
      {/* Overlay product card "placed" by the AI */}
      <div style={{
        position: 'absolute', left: '50%', top: '54%', transform: 'translate(-50%, -50%)',
        width: 220, height: 280,
        background: 'linear-gradient(160deg, #C7B59B, #8C7560)',
        boxShadow: '0 24px 50px rgba(42,36,32,0.35), inset 0 0 0 1px rgba(0,0,0,0.08)',
        borderRadius: 4, display: 'flex', flexDirection: 'column',
        justifyContent: 'flex-end', padding: 22, color: 'var(--cream)'
      }}>
        <div style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 13, opacity: 0.75 }}>your product</div>
        <div style={{ fontFamily: '"La Villa", sans-serif', fontSize: 32, lineHeight: 1, marginTop: 4 }}>Bottle 01</div>
        <div style={{
          fontFamily: '"La Villa", sans-serif', fontSize: 9, letterSpacing: '0.22em',
          textTransform: 'uppercase', marginTop: 10, opacity: 0.85
        }}>50ml · Eau de parfum</div>
      </div>
      {/* Crop / placement marks */}
      <PlacementMark x="50%" y="54%" />

      {/* Caption strip bottom */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        padding: '14px 24px',
        background: 'linear-gradient(0deg, rgba(42,36,32,0.55), rgba(42,36,32,0))',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        color: 'var(--cream)'
      }}>
        <div style={{ fontFamily: '"La Villa", sans-serif', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
          Backdrop · Denim &amp; daylight · TVS-04812
        </div>
        <div style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 14 }}>
          generated in 22s
        </div>
      </div>
    </div>);

}

function PlacementMark({ x, y }) {
  // Four L-shaped corner brackets with a hairline + label, like a film camera frame guide.
  const size = 280;
  const stroke = 1.25;
  const len = 22;
  const color = 'rgba(242,236,228,0.92)';
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width: size, height: size,
      transform: 'translate(-50%, -50%)', pointerEvents: 'none'
    }}>
      {[
      { top: 0, left: 0, b: 'top left' },
      { top: 0, right: 0, b: 'top right' },
      { bottom: 0, left: 0, b: 'bottom left' },
      { bottom: 0, right: 0, b: 'bottom right' }].
      map((p, i) => {
        const isTop = p.top === 0;
        const isLeft = p.left === 0;
        return (
          <div key={i} style={{ position: 'absolute', ...p, width: len, height: len,
            borderTop: isTop ? `${stroke}px solid ${color}` : 0,
            borderBottom: !isTop ? `${stroke}px solid ${color}` : 0,
            borderLeft: isLeft ? `${stroke}px solid ${color}` : 0,
            borderRight: !isLeft ? `${stroke}px solid ${color}` : 0
          }} />);

      })}
      <div style={{
        position: 'absolute', top: -22, left: 0,
        fontFamily: '"La Villa", sans-serif', fontSize: 9, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: color
      }}>Placement · auto</div>
    </div>);

}

/* ---------- Variant 2: Before / After slider ---------- */
function HeroSlider() {
  const [pos, setPos] = React.useState(50);
  const ref = React.useRef(null);
  const dragging = React.useRef(false);

  const move = (clientX) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const p = Math.max(0, Math.min(100, (clientX - r.left) / r.width * 100));
    setPos(p);
  };

  // Photos are 650 × ~975, ~2:3 aspect. Constrain the interactive area to that ratio.
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div ref={ref}
      onMouseDown={(e) => {dragging.current = true;move(e.clientX);}}
      onMouseMove={(e) => dragging.current && move(e.clientX)}
      onMouseUp={() => dragging.current = false}
      onMouseLeave={() => dragging.current = false}
      onTouchStart={(e) => move(e.touches[0].clientX)}
      onTouchMove={(e) => move(e.touches[0].clientX)}
      style={{ position: 'relative', height: '100%', aspectRatio: '2 / 3', maxWidth: '100%', cursor: 'ew-resize', userSelect: 'none', overflow: 'hidden' }}>
      
      {/* AFTER, Marlboro tee, full bleed */}
      <div className="grain" style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'url(assets/after-marlboro.jpg)',
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }} />
      {/* BEFORE, original scene, clipped to left of slider */}
      <div style={{
          position: 'absolute', inset: 0,
          clipPath: `inset(0 ${100 - pos}% 0 0)`,
          backgroundImage: 'url(assets/before-white.jpg)',
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }} />
      {/* Divider + handle */}
      <div style={{
          position: 'absolute', top: 0, bottom: 0, left: `${pos}%`,
          width: 1, background: 'var(--cream)', transform: 'translateX(-0.5px)'
        }} />
      <div style={{
          position: 'absolute', top: '50%', left: `${pos}%`, transform: 'translate(-50%, -50%)',
          width: 56, height: 56, borderRadius: 999, background: 'var(--cream)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 8px 24px rgba(42,36,32,0.25)', cursor: 'ew-resize',
          fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 18, color: 'var(--cocoa)'
        }}>‹ ›</div>
      {/* Labels */}
      <Label x={16} y={16}>Before</Label>
      <Label x="auto" rx={16} y={16}>After</Label>
    </div>
    </div>);

}
function Label({ x, y, rx, children }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, right: rx,
      fontFamily: '"La Villa", sans-serif', fontSize: 10,
      letterSpacing: '0.22em', textTransform: 'uppercase',
      color: 'var(--cream)', padding: '8px 14px',
      background: 'rgba(42,36,32,0.55)', backdropFilter: 'blur(6px)',
      borderRadius: 999
    }}>{children}</div>);

}

/* ---------- Variant 3: Mosaic ---------- */
function HeroMosaic() {
  const tiles = [
  { src: 'assets/still-life-perfume.jpg', span: 'a' },
  { src: 'assets/loafers-socks.jpg', span: 'b' },
  { src: 'assets/leather-bomber-field.jpg', span: 'c' },
  { src: 'assets/agave-moody.jpg', span: 'd' },
  { src: 'assets/denim-stool.jpg', span: 'e' }];

  return (
    <div style={{
      position: 'absolute', inset: 0, padding: 24,
      display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gridTemplateRows: 'repeat(6, 1fr)',
      gap: 8
    }}>
      <Tile src={tiles[0].src} style={{ gridColumn: '1 / 5', gridRow: '1 / 5' }} />
      <Tile src={tiles[1].src} style={{ gridColumn: '5 / 7', gridRow: '1 / 3' }} />
      <Tile src={tiles[2].src} style={{ gridColumn: '5 / 7', gridRow: '3 / 5' }} />
      <Tile src={tiles[3].src} style={{ gridColumn: '1 / 4', gridRow: '5 / 7' }} />
      <Tile src={tiles[4].src} style={{ gridColumn: '4 / 7', gridRow: '5 / 7' }} />
    </div>);

}
function Tile({ src, style }) {
  return (
    <div style={{
      ...style, backgroundImage: `url(${src})`,
      backgroundSize: 'cover', backgroundPosition: 'center'
    }} />);

}

Object.assign(window, { PSHero });