// HeroSection.jsx — tweaks-aware hero

const HERO_ATMOSPHERES = {
  Void:   { bg: 'radial-gradient(ellipse 60% 40% at 50% 30%, #0d1422 0%, #0B1222 80%)', orb: 'rgba(59,130,246,0.05)',  grid: 0.02 },
  Nebula: { bg: 'radial-gradient(ellipse 80% 60% at 50% 30%, #0f1d3a 0%, #0B1222 70%)', orb: 'rgba(59,130,246,0.12)',  grid: 0.04 },
  Aurora: { bg: 'radial-gradient(ellipse 90% 70% at 50% 20%, #0a1f18 0%, #0B1222 65%)', orb: 'rgba(100,200,80,0.10)', grid: 0.03 },
};

const HERO_TYPE = {
  Ghost:   { weight: 200, tracking: '0.01em'  },
  Refined: { weight: 300, tracking: '-0.02em' },
  Impact:  { weight: 500, tracking: '-0.04em' },
};

const heroSignal = (n) => ({
  lime:        `rgba(173,255,47,${0.5 + (n/100)*0.5})`,
  eyebrow:     `rgba(173,255,47,${0.1 + (n/100)*0.35})`,
  ctaShadow:   `0 0 ${10+(n/100)*40}px rgba(173,255,47,${0.08+(n/100)*0.35}), inset 0 1px 0 rgba(255,255,255,0.05)`,
  ctaShadowHover: `0 0 ${24+(n/100)*60}px rgba(173,255,47,${0.2+(n/100)*0.45}), 0 0 60px rgba(173,255,47,0.12), inset 0 1px 0 rgba(255,255,255,0.08)`,
  dot:         `0 0 8px rgba(173,255,47,${0.3+(n/100)*0.7})`,
});

const HeroSection = ({ tweaks = {} }) => {
  const { atmosphere = 'Nebula', signalIntensity = 70, typeWeight = 'Refined' } = tweaks;
  const atm = HERO_ATMOSPHERES[atmosphere] || HERO_ATMOSPHERES.Nebula;
  const typ = HERO_TYPE[typeWeight]        || HERO_TYPE.Refined;
  const sig = heroSignal(signalIntensity);

  return (
    <section id="hero" style={{
      position: 'relative', width: '100%', height: '100vh', minHeight: '700px',
      overflow: 'hidden', background: '#0B1222',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
    }}>
      {/* Background */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, background: atm.bg, transition: 'background 1s ease' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `linear-gradient(rgba(59,130,246,${atm.grid}) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,${atm.grid}) 1px, transparent 1px)`,
          backgroundSize: '80px 80px',
        }} />
        <div style={{
          position: 'absolute', top: '10%', left: '50%', transform: 'translateX(-50%)',
          width: '600px', height: '400px',
          background: `radial-gradient(ellipse, ${atm.orb} 0%, transparent 70%)`,
          filter: 'blur(40px)', pointerEvents: 'none', transition: 'background 1s ease',
        }} />
      </div>

      {/* Content */}
      <div className="hero-content" style={{
        position: 'relative', zIndex: 10, textAlign: 'center',
        marginTop: 'clamp(120px, 22vh, 380px)', padding: '0 24px',
        maxWidth: '900px', width: '100%',
      }}>
        {/* Eyebrow */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: '8px',
          marginBottom: '28px', padding: '6px 16px',
          border: `1px solid ${sig.eyebrow}`, borderRadius: '100px',
          fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase',
          color: sig.lime, opacity: 0, animation: 'fadeUp 0.8s ease 0.2s forwards',
          transition: 'border-color 0.5s ease, color 0.5s ease',
        }}>
          <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: sig.lime, boxShadow: sig.dot, transition: 'all 0.5s ease' }}></span>
          AI-First Web Agency
        </div>

        {/* Headline */}
        <h1 style={{
          fontFamily: "'Syne', sans-serif",
          fontSize: 'clamp(2.4rem, 7.5vw, 7.5rem)',
          fontWeight: typ.weight, lineHeight: 1.05, letterSpacing: typ.tracking,
          margin: '0 0 28px', opacity: 0, animation: 'fadeUp 0.9s ease 0.4s forwards',
          transition: 'font-weight 0.4s ease, letter-spacing 0.4s ease',
        }}>
          {/* Line 1 — authority statement */}
          <span style={{ display: 'block', background: 'linear-gradient(90deg, #666 0%, #e0e0e0 50%, #666 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
            Engineered for Trust.
          </span>
          {/* Line 2 — USP with AI icon */}
          <span style={{ display: 'block', position: 'relative' }}>
            <span style={{ background: 'linear-gradient(90deg, #777 0%, #d8d8d8 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
              Optimized for&nbsp;
            </span>
            <span style={{ display: 'inline-flex', verticalAlign: 'middle', position: 'relative', top: '-0.05em' }}>
              <CircularVideoIcon color="#ADFF2F" label="AI" isAI={true} />
            </span>
            <span style={{ background: 'linear-gradient(90deg, #ADFF2F 0%, #88dd22 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
              &nbsp;AI.
            </span>
          </span>
        </h1>

        {/* Subheading */}
        <p style={{
          color: '#94a3b8', fontSize: 'clamp(0.95rem, 2.2vw, 1.15rem)',
          fontWeight: 400, lineHeight: 1.7, maxWidth: '580px', margin: '0 auto 40px',
          fontFamily: "'DM Sans', sans-serif", opacity: 0, animation: 'fadeUp 0.9s ease 0.6s forwards',
        }}>
          We build modern conversion hubs — websites that earn trust, turn visitors into customers, and{' '}
          <span style={{
            color: '#1760FF',
            fontWeight: 500,
            textShadow: '0 0 22px rgba(23, 96, 255, 0.38), 0 0 48px rgba(23, 96, 255, 0.14)',
          }}>
            get cited by ChatGPT, Gemini, and Claude
          </span>.
        </p>

        {/* CTA */}
        <div style={{ opacity: 0, animation: 'fadeUp 0.9s ease 0.8s forwards' }}>
          <button
            className="cta-btn"
            onClick={() => document.getElementById('cta-footer')?.scrollIntoView({ behavior: 'smooth' })}
            style={{
              fontFamily: "'DM Sans', sans-serif", fontSize: '0.95rem',
              fontWeight: 500, letterSpacing: '0.02em', padding: '14px 32px',
              borderRadius: '8px', background: 'rgba(10,18,30,0.85)',
              color: sig.lime, border: '1px solid #30463C', cursor: 'pointer',
              boxShadow: sig.ctaShadow, transition: 'all 0.25s ease',
              backdropFilter: 'blur(8px)',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.transform = 'scale(1.03)';
              e.currentTarget.style.boxShadow = sig.ctaShadowHover;
            }}
            onMouseLeave={e => {
              e.currentTarget.style.transform = 'scale(1)';
              e.currentTarget.style.boxShadow = sig.ctaShadow;
            }}
            onMouseDown={e => { e.currentTarget.style.transform = 'scale(0.98)'; }}
            onMouseUp={e => { e.currentTarget.style.transform = 'scale(1.03)'; }}
          >
            Build My Conversion Hub →
          </button>
        </div>

        {/* Scroll indicator */}
        <div style={{
          position: 'absolute', bottom: '-80px', left: '50%', transform: 'translateX(-50%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px',
          opacity: 0, animation: 'fadeUp 1s ease 1.2s forwards',
        }}>
          <span style={{ fontSize: '0.65rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: '#64748B', fontFamily: "'DM Sans', sans-serif" }}>Scroll to explore</span>
          <div style={{ width: '1px', height: '40px', background: 'linear-gradient(to bottom, #64748B, transparent)', animation: 'scrollPulse 2s ease infinite' }} />
        </div>
      </div>

      <StarField />
    </section>
  );
};

// Circular video icon
const CircularVideoIcon = ({ color, label, isAI }) => {
  const size = 'clamp(60px, 8vw, 110px)';
  return (
    <span style={{
      display: 'inline-block', width: size, height: size,
      borderRadius: '50%', overflow: 'hidden',
      border: `2px solid ${color}44`, boxShadow: `0 0 16px ${color}44`,
      verticalAlign: 'middle',
      background: isAI ? 'radial-gradient(circle at 40% 35%, #1a2f1a, #0B1222)' : 'radial-gradient(circle at 40% 35%, #0f1d3a, #0B1222)',
      position: 'relative', flexShrink: 0,
    }}>
      {isAI ? <AIIconInner /> : <ConvertIconInner />}
    </span>
  );
};

const AIIconInner = () => (
  <svg viewBox="0 0 110 110" style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
    <circle cx="55" cy="55" r="22" fill="none" stroke="#ADFF2F" strokeWidth="1" strokeDasharray="3 4" opacity="0.5">
      <animateTransform attributeName="transform" type="rotate" from="0 55 55" to="360 55 55" dur="8s" repeatCount="indefinite" />
    </circle>
    <circle cx="55" cy="55" r="8" fill="#ADFF2F" opacity="0.9" />
    <circle cx="55" cy="55" r="4" fill="#0B1222" />
    {[0,60,120,180,240,300].map((angle, i) => {
      const rad = angle * Math.PI / 180;
      return <line key={i} x1={55+8*Math.cos(rad)} y1={55+8*Math.sin(rad)} x2={55+22*Math.cos(rad)} y2={55+22*Math.sin(rad)} stroke="#ADFF2F" strokeWidth="1" opacity="0.6" />;
    })}
    {[0,60,120,180,240,300].map((angle, i) => {
      const rad = angle * Math.PI / 180;
      return (
        <circle key={i} cx={55+30*Math.cos(rad)} cy={55+30*Math.sin(rad)} r="3" fill="#ADFF2F" opacity="0.7">
          <animate attributeName="opacity" values="0.7;0.2;0.7" dur={`${1.5+i*0.2}s`} repeatCount="indefinite" />
        </circle>
      );
    })}
    <text x="55" y="94" textAnchor="middle" fill="#ADFF2F" fontSize="8" fontFamily="DM Sans" opacity="0.6" letterSpacing="1">AI</text>
  </svg>
);

const ConvertIconInner = () => (
  <svg viewBox="0 0 110 110" style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
    <polyline points="20,80 40,55 60,65 90,25" fill="none" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" opacity="0.9">
      <animate attributeName="stroke-dasharray" values="0,200;200,0" dur="2s" begin="0.5s" fill="freeze" />
    </polyline>
    <polygon points="90,25 82,28 86,36" fill="#3B82F6" opacity="0.9" />
    <circle cx="40" cy="55" r="3" fill="#3B82F6" opacity="0.7">
      <animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" />
    </circle>
    <circle cx="60" cy="65" r="3" fill="#3B82F6" opacity="0.7">
      <animate attributeName="opacity" values="0.7;1;0.7" dur="2.4s" repeatCount="indefinite" />
    </circle>
  </svg>
);

// Animated star field
const StarField = () => {
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let animId;
    const resize = () => {
      canvas.width = canvas.offsetWidth * window.devicePixelRatio;
      canvas.height = canvas.offsetHeight * window.devicePixelRatio;
    };
    resize();
    window.addEventListener('resize', resize);
    const stars = Array.from({ length: 200 }, () => ({
      x: Math.random(), y: Math.random(),
      r: Math.random() * 1.2 + 0.2,
      speed: Math.random() * 0.0002 + 0.00005,
      opacity: Math.random() * 0.7 + 0.1,
      pulse: Math.random() * Math.PI * 2,
    }));
    let t = 0;
    const draw = () => {
      t += 0.01;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      stars.forEach(s => {
        const opacity = s.opacity * (0.6 + 0.4 * Math.sin(t + s.pulse));
        ctx.beginPath();
        ctx.arc(s.x * canvas.width, s.y * canvas.height, s.r * window.devicePixelRatio, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(200,220,255,${opacity})`;
        ctx.fill();
        s.y -= s.speed;
        if (s.y < 0) { s.y = 1; s.x = Math.random(); }
      });
      animId = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize); };
  }, []);
  return (
    <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 1, opacity: 0.6 }} />
  );
};

Object.assign(window, { HeroSection });