/* global React, BrushIcon */
const { useState, useEffect, useRef } = React;

// Hero — pinned section with continuously rotating brush rings.
// Slow ambient rotation via CSS animation, scroll-driven scale/rotate-boost via React.
const Hero = ({ scrollY, vh }) => {
  const ref = useRef(null);

  // Scroll progress (0 -> 1) over ~90vh
  const heroEnd = vh * 0.9;
  const p = Math.max(0, Math.min(1, scrollY / heroEnd));

  // Scroll-accelerated rotation (added ON TOP of CSS ambient rotation)
  const innerRot = p * 280;
  const outerRot = -p * 220;
  // Zoom TOWARD camera on scroll — both rings scale up, outer faster (more depth)
  const innerScale = 1 + p * 1.4;
  const outerScale = 1 + p * 2.8;
  // Rings fade as they rush past the camera
  const innerOpacity = 1 - Math.pow(p, 2.2);
  const outerOpacity = 1 - Math.pow(p, 1.6);
  // Content drifts up and fades
  const contentOpacity = 1 - Math.min(1, p * 1.8);
  const contentY = -p * 50;

  // Inner ring config (closer to center, slightly smaller brushes)
  const innerRadius = 280;
  const innerCount = 8;
  const innerNames = ['Standard', 'ClayBuildup', 'Move', 'DamStandard', 'hPolish', 'Inflate', 'Pinch', 'SnakeHook'];

  // Outer ring config (12 LARGER brushes — close to inner, with extra spacing)
  const outerRadius = 460;
  const outerCount = 12;
  const outerNames = ['Smooth', 'Trim', 'Slash', 'CurveTube', 'Layer', 'Magnify', 'Crease', 'Polish', 'Mask', 'Plane', 'Pen', 'Form'];

  return (
    <section className="hero-wrap" ref={ref} data-screen-label="01 Hero">
      <div className="hero-sticky">
        {/* Background layers */}
        <div className="hero-bg-vignette" />
        <div className="hero-grid" />
        <div
          className="hero-radial-glow"
          style={{ transform: `translate(-50%, -50%) scale(${1 + p * 0.5})` }} />
        

        {/* Background corner brushes */}
        <BackgroundBrushDrift scrollY={scrollY} p={p} />

        {/* OUTER RING — 12 brushes, larger, behind inner. Uses registry entries 8-19. */}
        <BrushRing
          radius={outerRadius}
          count={outerCount}
          rotation={outerRot}
          scale={outerScale}
          opacity={outerOpacity}
          brushSize={104}
          names={outerNames}
          variantOffset={8}
          showSpokes={false}
          z={1}
          spinDirection="ccw"
          spinSeconds={140} />
        

        {/* INNER RING — 8 brushes, with central glow + spokes */}
        <BrushRing
          radius={innerRadius}
          count={innerCount}
          rotation={innerRot}
          scale={innerScale}
          opacity={innerOpacity}
          brushSize={84}
          names={innerNames}
          variantOffset={0}
          showSpokes={true}
          z={2}
          spinDirection="cw"
          spinSeconds={90} />
        

        {/* Hero content */}
        <div
          className="hero-content"
          style={{ opacity: contentOpacity, transform: `translateY(${contentY}px)` }}>
          
          <div className="hero-tagline-top">Radial Menus for ZBrush · v1.0</div>
          <h1 className="hero-h1">
            Radial<span className="z">Z</span>
          </h1>
          <p className="hero-sub">
            Sculpt without interruption. Every brush, one gesture away.<br />
            No palettes. No hunting.
          </p>
          <div className="hero-actions">
            <a href="#pricing" className="btn-primary">Get RadialZ

            </a>
            <a href="#demo" className="btn-ghost">
              <PlayIcon /> Watch the demo
            </a>
          </div>
        </div>

        {/* Bottom meta strip */}
        <div className="hero-meta" style={{ opacity: contentOpacity }}>
          <span><span className="check">✓</span> ZBrush 2025 &amp; 2026</span>
          <span className="sep" />
          <span><span className="check">✓</span> Windows</span>
          <span className="sep" />
          <span><span className="check">✓</span> Installer &amp; plugin</span>
        </div>

        {/* Scroll hint */}
        <div className="hero-scroll-hint" style={{ opacity: (1 - p * 2) * 0.6 }}>
          <span>Scroll to enter</span>
          <span className="line" />
        </div>
      </div>
    </section>);

};

// Single ring of brushes, with optional center glow + spokes.
// Three nested layers: outer = position+scale (React), middle = CSS ambient rotation, inner = scroll-driven extra rotation.
const BrushRing = ({ radius, count, rotation, scale, opacity, brushSize, names, variantOffset, showSpokes, z, spinDirection = 'cw', spinSeconds = 80 }) => {
  return (
    <div
      className="brush-ring"
      style={{
        transform: `translate(-50%, -50%) scale(${scale})`,
        opacity,
        zIndex: z
      }}>
      
      <div
        style={{
          position: 'absolute',
          left: 0, top: 0,
          width: 1, height: 1,
          animation: `${spinDirection === 'cw' ? 'ring-spin-cw' : 'ring-spin-ccw'} ${spinSeconds}s linear infinite`
        }}>
        
        <div
          style={{
            position: 'absolute', left: 0, top: 0,
            transform: `rotate(${rotation}deg)`,
            willChange: 'transform'
          }}>
          
          {showSpokes &&
          <svg
            width={radius * 2}
            height={radius * 2}
            style={{
              position: 'absolute',
              left: -radius, top: -radius,
              opacity: 0.85,
              pointerEvents: 'none'
            }}>
            
              <defs>
                <linearGradient id={`spokeg_${radius}`} x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%" stopColor="#f86b33" stopOpacity="1" />
                  <stop offset="100%" stopColor="#f86b33" stopOpacity="0" />
                </linearGradient>
                <radialGradient id={`coreglow_${radius}`} cx={radius} cy={radius} r={radius * 0.55} gradientUnits="userSpaceOnUse">
                  <stop offset="0%" stopColor="#ffb088" stopOpacity="1" />
                  <stop offset="15%" stopColor="#f86b33" stopOpacity="0.9" />
                  <stop offset="50%" stopColor="#f86b33" stopOpacity="0.2" />
                  <stop offset="100%" stopColor="#f86b33" stopOpacity="0" />
                </radialGradient>
              </defs>
              {/* center halo */}
              <circle cx={radius} cy={radius} r={radius * 0.55} fill={`url(#coreglow_${radius})`} />
              {/* spokes */}
              {Array.from({ length: count }).map((_, i) => {
              const a = i / count * 360;
              const len = radius - 60;
              return (
                <g key={i} transform={`translate(${radius} ${radius}) rotate(${a - 90})`}>
                    <rect x="0" y="-1.5" width={len} height="3" fill={`url(#spokeg_${radius})`} />
                  </g>);

            })}
              <circle cx={radius} cy={radius} r="3" fill="#ffe8d4" />
              <circle cx={radius} cy={radius} r="10" fill="#f86b33" opacity="1" />
              <circle cx={radius} cy={radius} r="22" fill="#f86b33" opacity="0.4" />
              <circle cx={radius} cy={radius} r={radius - 30}
            fill="none" stroke="rgba(248,107,51,0.22)" strokeWidth="1"
            strokeDasharray="2 10" />
            </svg>
          }

          {/* Brush nodes */}
          {Array.from({ length: count }).map((_, i) => {
            const a = i / count * Math.PI * 2 - Math.PI / 2;
            const x = Math.cos(a) * (radius - 50);
            const y = Math.sin(a) * (radius - 50);
            const variantIdx = i + variantOffset;
            // Name comes from the registry so it always matches the icon file
            const reg = window.brushRegistry && window.brushRegistry[variantIdx] || null;
            const label = reg ? reg.name : names[i % names.length] || '';
            return (
              <BrushNode
                key={i}
                x={x} y={y}
                variant={variantIdx}
                name={label}
                size={brushSize}
                counterRotation={-rotation}
                spinDirection={spinDirection}
                spinSeconds={spinSeconds} />);


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

};

// BrushNode — a single brush in the orbit. Counter-spins to stay upright.
const BrushNode = ({ x, y, variant, name, counterRotation, size = 84, spinDirection = 'cw', spinSeconds = 80 }) => {
  const [hover, setHover] = useState(false);
  // Counter the ring's CSS animation so the brush + tooltip stay oriented
  const counterAnim = `${spinDirection === 'cw' ? 'ring-spin-ccw' : 'ring-spin-cw'} ${spinSeconds}s linear infinite`;
  return (
    <div
      className="brush-node"
      style={{
        left: x, top: y,
        width: size, height: size,
        transform: `translate(-50%, -50%) rotate(${counterRotation}deg) scale(${hover ? 1.18 : 1})`
      }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}>
      
      <div style={{ animation: counterAnim, width: '100%', height: '100%', position: 'relative' }}>
        <BrushIcon variant={variant} size={size} />
        <div
          style={{
            position: 'absolute',
            left: '50%', top: '100%',
            transform: 'translate(-50%, 14px)',
            padding: '6px 12px',
            background: 'rgba(15,15,17,0.96)',
            border: '1px solid rgba(248,107,51,0.45)',
            borderRadius: 6,
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 10,
            fontWeight: 500,
            letterSpacing: '0.14em',
            textTransform: 'uppercase',
            color: '#f4f4f2',
            whiteSpace: 'nowrap',
            opacity: hover ? 1 : 0,
            transition: 'opacity .2s',
            pointerEvents: 'none',
            boxShadow: '0 6px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4)'
          }}>
          
          {name}
        </div>
      </div>
    </div>);

};

// Decorative drifting brush thumbnails — only in corners, very subtle, gently floating via CSS
const BackgroundBrushDrift = ({ scrollY, p }) => {
  const items = [
  { x: '4%', y: '12%', v: 1, size: 36, anim: 'float-a' },
  { x: '8%', y: '82%', v: 2, size: 44, anim: 'float-b' },
  { x: '94%', y: '18%', v: 4, size: 40, anim: 'float-c' },
  { x: '92%', y: '86%', v: 7, size: 38, anim: 'float-d' }];

  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.32 * (1 - p) }}>
      {items.map((it, i) =>
      <div key={i}
      className={`bg-brush-float ${it.anim}`}
      style={{
        position: 'absolute',
        left: it.x, top: it.y,
        filter: 'blur(0.6px)',
        willChange: 'transform'
      }}>
          <BrushIcon variant={it.v} size={it.size} />
        </div>
      )}
    </div>);

};

const PlayIcon = () =>
<svg width="12" height="12" viewBox="0 0 12 12">
    <path d="M2 1.5 L10 6 L2 10.5 Z" fill="currentColor" />
  </svg>;


window.Hero = Hero;