/* ═══════════════════════════════════════════
   Aviasa Green Solution — Combined Bundle
   All components in one file for fast loading
   ═══════════════════════════════════════════ */


/* ──── utils.jsx ──── */
/* ═══════════════════════════════════════════
   Shared Hooks, Particle Background, ScrollProgress
   ═══════════════════════════════════════════ */
const { useState, useEffect, useRef, useCallback } = React;

/* ─── Scroll-triggered fade-up via GSAP ─── */
function useScrollFadeUp(ref, opts = {}) {
  useEffect(() => {
    if (!ref.current || typeof gsap === 'undefined') return;
    const el = ref.current;
    const children = opts.stagger ? el.querySelectorAll(opts.staggerTarget || ':scope > *') : null;
    const target = children && children.length > 0 ? children : el;
    gsap.fromTo(target, 
      { y: opts.y || 60, opacity: 0 },
      {
        y: 0, opacity: 1,
        duration: opts.duration || 1,
        delay: opts.delay || 0,
        stagger: opts.stagger || 0,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: el,
          start: opts.start || 'top 85%',
          toggleActions: 'play none none none',
        },
      }
    );
  }, []);
}

/* ─── Animated counter hook ─── */
function useCounter(end, duration = 2000, suffix = '') {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);

  useEffect(() => {
    if (!ref.current) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && !started.current) {
        started.current = true;
        const startTime = performance.now();
        const animate = (now) => {
          const progress = Math.min((now - startTime) / duration, 1);
          const eased = 1 - Math.pow(1 - progress, 3);
          setVal(Math.round(eased * end));
          if (progress < 1) requestAnimationFrame(animate);
        };
        requestAnimationFrame(animate);
      }
    }, { threshold: 0.3 });
    observer.observe(ref.current);
    return () => observer.disconnect();
  }, [end, duration]);

  return { ref, val, display: val.toLocaleString() + suffix };
}

/* ─── Particle Background ─── */
function ParticleBackground() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let animId;
    let particles = [];
    const PARTICLE_COUNT = 90;

    function resize() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resize();
    window.addEventListener('resize', resize);

    class Particle {
      constructor() { this.reset(true); }
      reset(init) {
        this.x = Math.random() * canvas.width;
        this.y = init ? Math.random() * canvas.height : canvas.height + 10;
        // Depth layer: 0 = far (small, slow, dim), 1 = near (big, fast, bright)
        this.depth = Math.random();
        this.size = 0.8 + this.depth * 3;
        this.speedY = 0.1 + this.depth * 0.7;
        this.speedX = (Math.random() - 0.5) * 0.3 * (0.5 + this.depth);
        this.opacity = 0.08 + this.depth * 0.45;
        this.pulse = Math.random() * Math.PI * 2;
        this.hue = 90 + Math.random() * 30; // green spectrum variation
      }
      update() {
        this.y -= this.speedY;
        this.x += this.speedX + Math.sin(this.pulse * 0.5) * 0.15;
        this.pulse += 0.015 + this.depth * 0.01;
        if (this.y < -10) this.reset(false);
      }
      draw() {
        const o = this.opacity * (0.7 + 0.3 * Math.sin(this.pulse));
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = `hsla(${this.hue}, 60%, 52%, ${o})`;
        ctx.fill();
        // Glow for near particles
        if (this.depth > 0.7) {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
          ctx.fillStyle = `hsla(${this.hue}, 60%, 52%, ${o * 0.1})`;
          ctx.fill();
        }
      }
    }

    for (let i = 0; i < PARTICLE_COUNT; i++) particles.push(new Particle());

    function loop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      particles.forEach(p => { p.update(); p.draw(); });
      animId = requestAnimationFrame(loop);
    }
    loop();

    return () => {
      cancelAnimationFrame(animId);
      window.removeEventListener('resize', resize);
    };
  }, []);

  return React.createElement('canvas', { id: 'particle-canvas', ref: canvasRef });
}

/* ─── Scroll Progress Bar ─── */
function ScrollProgress() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      setWidth(docHeight > 0 ? (scrollTop / docHeight) * 100 : 0);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return React.createElement('div', {
    className: 'scroll-progress',
    style: { width: width + '%' },
  });
}

/* ─── Section Wrapper ─── */
function Section({ id, children, className = '', style = {}, alt = false, glow = false, gradient = false }) {
  const ref = useRef(null);
  const cls = `section ${alt ? 'section-alt' : ''} ${glow ? 'section-glow' : ''} ${gradient ? 'section-gradient' : ''} ${className}`;
  return React.createElement('section', {
    id, ref, className: cls.trim(), style,
    'data-screen-label': id,
  }, React.createElement('div', { className: 'container' }, children));
}

/* Export to window */
Object.assign(window, {
  useScrollFadeUp, useCounter,
  ParticleBackground, ScrollProgress, Section,
});


/* ──── effects.jsx ──── */
/* ═══════════════════════════════════════════
   Advanced Effects — Cursor Glow, 3D Tilt, 
   Gradient Borders, Wave Dividers
   ═══════════════════════════════════════════ */

/* ─── Cursor Glow ─── */
function CursorGlow() {
  const glowRef = useRef(null);

  useEffect(() => {
    const glow = glowRef.current;
    if (!glow) return;
    let mx = 0, my = 0, cx = 0, cy = 0;

    const onMove = (e) => { mx = e.clientX; my = e.clientY; };
    window.addEventListener('mousemove', onMove, { passive: true });

    function animate() {
      cx += (mx - cx) * 0.08;
      cy += (my - cy) * 0.08;
      glow.style.transform = `translate(${cx - 200}px, ${cy - 200}px)`;
      requestAnimationFrame(animate);
    }
    animate();
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <div ref={glowRef} style={{
      position: 'fixed', top: 0, left: 0, width: 400, height: 400,
      borderRadius: '50%', pointerEvents: 'none', zIndex: 3,
      background: 'radial-gradient(circle, rgba(91,175,59,0.07) 0%, transparent 70%)',
      filter: 'blur(20px)', willChange: 'transform',
    }} />
  );
}

/* ─── 3D Tilt + Inner Spotlight Hook for glass cards ─── */
function useTilt3D(ref) {
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const cards = el.querySelectorAll('.glass-card');

    cards.forEach(card => {
      // Create inner spotlight overlay
      const spotlight = document.createElement('div');
      spotlight.style.cssText = `
        position:absolute;top:0;left:0;width:100%;height:100%;
        pointer-events:none;z-index:1;opacity:0;transition:opacity 0.3s;
        border-radius:20px;
      `;
      card.appendChild(spotlight);

      const handleMove = (e) => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        const rotateX = ((y - centerY) / centerY) * -4;
        const rotateY = ((x - centerX) / centerX) * 4;
        card.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-4px)`;
        // Inner spotlight
        spotlight.style.opacity = '1';
        spotlight.style.background = `radial-gradient(circle 250px at ${x}px ${y}px, rgba(91,175,59,0.12) 0%, transparent 70%)`;
      };
      const handleLeave = () => {
        card.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg) translateY(0px)';
        spotlight.style.opacity = '0';
      };
      card.addEventListener('mousemove', handleMove);
      card.addEventListener('mouseleave', handleLeave);
      card._tiltCleanup = () => {
        card.removeEventListener('mousemove', handleMove);
        card.removeEventListener('mouseleave', handleLeave);
        if (spotlight.parentNode) spotlight.parentNode.removeChild(spotlight);
      };
    });

    return () => cards.forEach(c => c._tiltCleanup && c._tiltCleanup());
  }, []);
}

/* ─── Arrival Glow — adds .arrived class when card scrolls into view ─── */
function useCardArrival(ref) {
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const cards = el.querySelectorAll('.glass-card');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !entry.target.classList.contains('arrived')) {
          entry.target.classList.add('arrived');
        }
      });
    }, { threshold: 0.2 });
    cards.forEach(c => observer.observe(c));
    return () => observer.disconnect();
  }, []);
}

/* ─── Animated Circular Economy ─── */
function AnimatedCircularEconomy() {
  const containerRef = useRef(null);

  const nodes = [
    { label: 'Napier Grass', icon: '🌿', angle: 270 },
    { label: 'Pellets / CBG', icon: '⚡', angle: 0 },
    { label: 'Industrial Use', icon: '🏭', angle: 90 },
    { label: 'FOM → Soil', icon: '🌱', angle: 180 },
  ];

  useEffect(() => {
    if (!containerRef.current || typeof gsap === 'undefined') return;
    const el = containerRef.current;

    // Pulse the center
    gsap.to(el.querySelector('.ce-center'), {
      boxShadow: '0 0 60px rgba(91,175,59,0.4), inset 0 0 30px rgba(91,175,59,0.1)',
      duration: 2, repeat: -1, yoyo: true, ease: 'sine.inOut',
    });

    // Animate nodes in
    gsap.fromTo(el.querySelectorAll('.ce-node'),
      { scale: 0, opacity: 0 },
      { scale: 1, opacity: 1, duration: 0.8, stagger: 0.2, ease: 'back.out(1.5)',
        scrollTrigger: { trigger: el, start: 'top 75%' }
      }
    );

    // Animate arrows
    gsap.fromTo(el.querySelectorAll('.ce-arrow'),
      { opacity: 0, scale: 0 },
      { opacity: 1, scale: 1, duration: 0.5, stagger: 0.15, delay: 0.6,
        scrollTrigger: { trigger: el, start: 'top 75%' }
      }
    );
  }, []);

  const radius = 160;

  return (
    <div ref={containerRef} style={{
      position: 'relative', width: 420, height: 420, margin: '0 auto',
    }}>
      {/* Rotating dashed ring */}
      <svg width="420" height="420" style={{ position: 'absolute', top: 0, left: 0 }}>
        <circle cx="210" cy="210" r={radius} fill="none"
          stroke="rgba(91,175,59,0.15)" strokeWidth="1.5" strokeDasharray="8 6"
          style={{ animation: 'spin-slow 25s linear infinite', transformOrigin: '210px 210px' }} />
        <circle cx="210" cy="210" r={radius + 30} fill="none"
          stroke="rgba(91,175,59,0.07)" strokeWidth="1" strokeDasharray="4 8"
          style={{ animation: 'spin-slow 40s linear infinite reverse', transformOrigin: '210px 210px' }} />
      </svg>

      {/* Animated flow arrows between nodes */}
      {nodes.map((_, i) => {
        const a1 = (nodes[i].angle * Math.PI) / 180;
        const a2 = (nodes[(i + 1) % 4].angle * Math.PI) / 180;
        const midAngle = (a1 + a2) / 2 + (i === 3 ? Math.PI : 0);
        const arrowR = radius - 10;
        const ax = 210 + Math.cos(midAngle) * arrowR;
        const ay = 210 + Math.sin(midAngle) * arrowR;
        const rot = (midAngle * 180) / Math.PI + 90;
        return (
          <div key={`arrow-${i}`} className="ce-arrow" style={{
            position: 'absolute', left: ax - 10, top: ay - 10,
            width: 20, height: 20, display: 'flex', alignItems: 'center', justifyContent: 'center',
            transform: `rotate(${rot}deg)`, color: 'var(--accent)', fontSize: 16, opacity: 0.6,
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 5l0 14" /><path d="M5 12l7 7 7-7" />
            </svg>
          </div>
        );
      })}

      {/* Center orb */}
      <div className="ce-center" style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 110, height: 110, borderRadius: '50%',
        background: 'linear-gradient(135deg, rgba(62,142,48,0.4), rgba(91,175,59,0.2))',
        border: '2px solid rgba(91,175,59,0.4)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column', boxShadow: '0 0 40px rgba(91,175,59,0.2)',
      }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round">
          <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
          <path d="M12 6v6l4 2" />
        </svg>
        <span style={{ fontFamily: "'Poppins', sans-serif", fontSize: 11, fontWeight: 700,
          color: 'var(--accent)', marginTop: 4, textAlign: 'center', lineHeight: 1.2 }}>
          Circular<br />Economy
        </span>
      </div>

      {/* Nodes */}
      {nodes.map((node, i) => {
        const angle = (node.angle * Math.PI) / 180;
        const x = 210 + Math.cos(angle) * radius;
        const y = 210 + Math.sin(angle) * radius;
        return (
          <div key={i} className="ce-node" style={{
            position: 'absolute', left: x, top: y, transform: 'translate(-50%, -50%)',
            padding: '12px 22px', borderRadius: 14,
            background: 'rgba(62,142,48,0.2)', backdropFilter: 'blur(12px)',
            border: '1px solid rgba(91,175,59,0.3)', display: 'flex',
            alignItems: 'center', gap: 8, whiteSpace: 'nowrap',
            boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
            transition: 'all 0.3s ease', cursor: 'default',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.borderColor = 'rgba(91,175,59,0.6)';
            e.currentTarget.style.boxShadow = '0 4px 30px rgba(91,175,59,0.25)';
            e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1.08)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.borderColor = 'rgba(91,175,59,0.3)';
            e.currentTarget.style.boxShadow = '0 4px 20px rgba(0,0,0,0.2)';
            e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1)';
          }}>
            <span style={{ fontSize: 18 }}>{node.icon}</span>
            <span style={{ fontWeight: 600, fontSize: 14, color: 'var(--white)' }}>{node.label}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ─── Wave Section Divider ─── */
function WaveDivider({ flip = false, color = 'var(--bg-alt)' }) {
  return (
    <div style={{
      position: 'relative', zIndex: 2, marginTop: flip ? 0 : -2, marginBottom: flip ? -2 : 0,
      transform: flip ? 'rotate(180deg)' : 'none', lineHeight: 0, overflow: 'hidden',
    }}>
      <svg viewBox="0 0 1440 80" fill="none" preserveAspectRatio="none"
        style={{ width: '100%', height: 60, display: 'block' }}>
        <path d="M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z"
          fill={color} />
      </svg>
    </div>
  );
}

/* ─── Split Text Hero Animation ─── */
function SplitTextHeadline({ children }) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current || typeof gsap === 'undefined') return;
    const el = ref.current;
    const text = el.textContent;
    
    // Split into words, then letters within each word
    const words = text.split(' ');
    el.innerHTML = words.map(word => 
      `<span style="display:inline-block;margin-right:0.25em">${
        word.split('').map(char => 
          `<span style="display:inline-block;opacity:0;transform:translateY(40px) rotateX(-40deg)">${char}</span>`
        ).join('')
      }</span>`
    ).join('');

    const chars = el.querySelectorAll('span > span');
    gsap.to(chars, {
      opacity: 1, y: 0, rotateX: 0,
      duration: 0.6, stagger: 0.03, ease: 'back.out(1.4)',
      delay: 0.5,
    });
  }, []);

  return <span ref={ref}>{children}</span>;
}

/* ─── Noise Overlay (lightweight) ─── */
function NoiseOverlay() {
  return null;
}

/* ─── Magnetic Buttons ─── */
function useMagneticButtons() {
  useEffect(() => {
    const btns = document.querySelectorAll('.btn');
    btns.forEach(btn => {
      const handleMove = (e) => {
        const rect = btn.getBoundingClientRect();
        const x = e.clientX - rect.left - rect.width / 2;
        const y = e.clientY - rect.top - rect.height / 2;
        btn.style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`;
      };
      const handleLeave = () => {
        btn.style.transform = 'translate(0, 0)';
        btn.style.transition = 'transform 0.4s ease';
      };
      const handleEnter = () => {
        btn.style.transition = 'transform 0.1s ease';
      };
      // Ripple on click
      const handleClick = (e) => {
        const rect = btn.getBoundingClientRect();
        const ripple = document.createElement('span');
        ripple.className = 'ripple';
        const size = Math.max(rect.width, rect.height);
        ripple.style.width = ripple.style.height = size + 'px';
        ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
        ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
        btn.appendChild(ripple);
        setTimeout(() => ripple.remove(), 600);
      };
      btn.addEventListener('mousemove', handleMove);
      btn.addEventListener('mouseleave', handleLeave);
      btn.addEventListener('mouseenter', handleEnter);
      btn.addEventListener('click', handleClick);
      btn._magCleanup = () => {
        btn.removeEventListener('mousemove', handleMove);
        btn.removeEventListener('mouseleave', handleLeave);
        btn.removeEventListener('mouseenter', handleEnter);
        btn.removeEventListener('click', handleClick);
      };
    });
    return () => btns.forEach(b => b._magCleanup && b._magCleanup());
  }, []);
}

/* ─── Active Nav Highlighting ─── */
function useActiveNav() {
  useEffect(() => {
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('.nav-links a');
    if (!sections.length || !navLinks.length) return;

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const id = entry.target.id;
          navLinks.forEach(link => {
            link.classList.toggle('active', link.getAttribute('href') === '#' + id);
          });
        }
      });
    }, { threshold: 0.3, rootMargin: '-80px 0px -50% 0px' });

    sections.forEach(s => observer.observe(s));
    return () => observer.disconnect();
  }, []);
}

/* ─── Section Label Visibility (underline draw) ─── */
function useSectionLabelDraw() {
  useEffect(() => {
    const labels = document.querySelectorAll('.section-label');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) entry.target.classList.add('visible');
      });
    }, { threshold: 0.5 });
    labels.forEach(l => observer.observe(l));
    return () => observer.disconnect();
  }, []);
}

/* ─── Marquee Trust Ticker ─── */
function MarqueeTicker() {
  const items = [
    '5 TPH Production Capacity',
    '4,300 Kcal/kg Calorific Value',
    '32,583 Sq.m Facility',
    'Backed by Punjab National Bank',
    'Expandable to 20 TPH',
    'Napier Grass Feedstock',
    'CIN: U46200GJ2024PTC157305',
  ];

  const track = items.concat(items).map((item, i) => (
    <span key={i} style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '0 32px', whiteSpace: 'nowrap', fontSize: 13, fontWeight: 500,
      color: 'var(--white-50)',
    }}>
      <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--accent)', flexShrink: 0 }}></span>
      {item}
    </span>
  ));

  return (
    <div style={{
      position: 'relative', zIndex: 2, overflow: 'hidden',
      borderTop: '1px solid var(--white-10)', borderBottom: '1px solid var(--white-10)',
      background: 'rgba(10,26,15,0.8)', backdropFilter: 'blur(10px)',
      padding: '14px 0',
    }}>
      <div style={{
        display: 'flex', width: 'max-content',
        animation: 'marquee-scroll 30s linear infinite',
      }}>
        {track}
      </div>
      <style>{`
        @keyframes marquee-scroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, {
  CursorGlow, useTilt3D, useCardArrival, AnimatedCircularEconomy,
  WaveDivider, SplitTextHeadline, NoiseOverlay, useMagneticButtons,
  useActiveNav, useSectionLabelDraw, MarqueeTicker,
});


/* ──── navbar-hero.jsx ──── */
/* ═══════════════════════════════════════════
   Navbar + Hero + StatCounters + Verticals
   ═══════════════════════════════════════════ */

/* ─── Navbar ─── */
function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['Home', '#home'], ['About', '#about'], ['Products', '#products'],
    ['Production Plant', '#production-plant'],
    ['Sustainability', '#sustainability'], ['Client', '#client'],
    ['Contact', '#contact'],
  ];

  const handleLinkClick = () => setMobileOpen(false);

  return (
    <nav className={`navbar ${scrolled ? 'scrolled' : ''}`}>
      <div className="container">
        <a href="#home" className="nav-logo">
          <img src="logo.png" alt="Aviasa Green Solution Pvt Ltd" style={{ height: 64, width: 'auto', flexShrink: 0, maxWidth: 'none' }} />
        </a>
        <ul className={`nav-links ${mobileOpen ? 'mobile-open' : ''}`}>
          {links.map(([label, href]) => (
            <li key={label}><a href={href} onClick={handleLinkClick}>{label}</a></li>
          ))}
        </ul>
        {mobileOpen && (
          <button className="mobile-close show" onClick={() => setMobileOpen(false)} aria-label="Close menu">✕</button>
        )}
        <button className="mobile-toggle" aria-label="Menu" onClick={() => setMobileOpen(true)}>☰</button>
      </div>
    </nav>
  );
}

/* ─── Hero (centered) ─── */
function Hero() {
  const headlineRef = useRef(null);
  const contentRef = useRef(null);

  useEffect(() => {
    if (!headlineRef.current || typeof gsap === 'undefined') return;
    const tl = gsap.timeline({ delay: 0.3 });
    tl.fromTo(headlineRef.current,
      { filter: 'blur(16px)', opacity: 0, y: 30 },
      { filter: 'blur(0px)', opacity: 1, y: 0, duration: 1.2, ease: 'power3.out' }
    );
    if (contentRef.current) {
      tl.fromTo(contentRef.current.children,
        { y: 40, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.9, stagger: 0.12, ease: 'power3.out' },
        '-=0.6'
      );
    }
  }, []);

  return (
    <section className="hero" id="home" data-screen-label="hero">
      <div className="container">
        <div ref={contentRef}>
          <div className="hero-badge">
            <span className="hero-badge-dot"></span>
            Now Supplying — Biomass Pellets &amp; CBG
          </div>

          <h1 className="hero-headline" ref={headlineRef}>
            <SplitTextHeadline><span className="accent-word">Renewable Fuels</span> Engineered from Biomass</SplitTextHeadline>
          </h1>

          <p className="hero-subtext">
            Converting Napier grass into high-calorific biomass pellets and compressed
            biogas — clean, renewable fuel for industrial India.
            Backed by Punjab National Bank.
          </p>

          <div className="hero-ctas">
            <a href="#contact" className="btn btn-primary">
              Get in Touch
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
            <a href="#production-plant" className="btn btn-outline">
              Our Process
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
            </a>
          </div>

          <div className="hero-pnb-badge">
            🏦 Backed by Punjab National Bank
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Stat Counters Section ─── */
function StatCounters() {
  const capacity = useCounter(5, 1800);
  const calorific = useCounter(4300, 2200);
  const facility = useCounter(32583, 2400);
  const expandable = useCounter(20, 1800);
  const ref = useRef(null);
  useScrollFadeUp(ref, { stagger: 0.15, staggerTarget: '.stat-card' });

  return (
    <section className="stats-section" data-screen-label="stats">
      <div className="container">
        <div className="stats-grid" ref={ref}>
          <div className="stat-card glass-card" ref={capacity.ref}>
            <div className="stat-card-value">{capacity.display} TPH</div>
            <div className="stat-card-label">Current Capacity</div>
          </div>
          <div className="stat-card glass-card" ref={calorific.ref}>
            <div className="stat-card-value">{calorific.display}</div>
            <div className="stat-card-label">Kcal/kg Calorific Value</div>
          </div>
          <div className="stat-card glass-card" ref={facility.ref}>
            <div className="stat-card-value">{facility.display}</div>
            <div className="stat-card-label">Sq.m Facility Area</div>
          </div>
          <div className="stat-card glass-card" ref={expandable.ref}>
            <div className="stat-card-value">{expandable.display} TPH</div>
            <div className="stat-card-label">Expandable To</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Two Verticals ─── */
function Verticals() {
  const ref = useRef(null);
  useScrollFadeUp(ref, { stagger: 0.2, staggerTarget: '.vertical-card' });
  useTilt3D(ref);
  useCardArrival(ref);

  const pelletSpecs = [
    'Raw Material: Napier Grass',
    'Diameter: 6–8 mm',
    'Calorific Value: ~4,300 Kcal/kg',
    'Ash Content: ~4.5%',
    'Moisture: Below 10%',
    'Capacity: 5 TPH → expandable to 20 TPH',
    'Packaging: 25–50 kg bags or bulk sacks',
  ];

  const cbgSpecs = [
    'Renewable substitute for CNG',
    'Methane content >90%',
    'Applications: Automotive, Industrial, CGD',
    'By-product: Fermented Organic Manure (FOM)',
  ];

  return (
    <Section id="products" alt>
      <div className="section-label">Our Verticals</div>
      <h2 className="section-title">Two Clean Energy Verticals</h2>
      <p className="section-subtitle">
        Aviasa operates across biomass pellet manufacturing and compressed biogas production — two complementary pathways to decarbonize Indian industry.
      </p>
      <div className="verticals-grid" ref={ref}>
        <div className="vertical-card glass-card">
          <span className="vertical-card-emoji">🌾</span>
          <h3>Biomass Pellets</h3>
          <span className="card-status status-active">Active Production</span>
          <ul className="vertical-specs">
            {pelletSpecs.map((s, i) => (
              <li key={i}><span className="spec-dot"></span>{s}</li>
            ))}
          </ul>
        </div>
        <div className="vertical-card glass-card">
          <span className="vertical-card-emoji">🔥</span>
          <h3>Compressed Biogas (CBG)</h3>
          <span className="card-status status-soon">Coming Soon</span>
          <ul className="vertical-specs">
            {cbgSpecs.map((s, i) => (
              <li key={i}><span className="spec-dot"></span>{s}</li>
            ))}
          </ul>
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { Navbar, Hero, StatCounters, Verticals });


/* ──── process-sections.jsx ──── */
/* ═══════════════════════════════════════════
   Biomass Process + CBG Process + Industries
   ═══════════════════════════════════════════ */

/* ─── Biomass Pellet Manufacturing Process ─── */
const biomassSteps = [
  { title: 'Raw Material', desc: 'Napier grass is harvested and cut into small, manageable pieces for processing.' },
  { title: 'Open Storage', desc: 'Material is stored at the facility in open yards for natural drying.' },
  { title: 'Weigh Bridge', desc: 'Incoming material is weighed, recorded, and quality-checked.' },
  { title: 'Auto Feeding', desc: 'Automatic feeding unit delivers material per operator specification.' },
  { title: 'Cleaning & Sieving', desc: 'Foreign objects — stones, plastics, dust — are removed.' },
  { title: 'Hammer Mill', desc: 'Material is ground into a fine, uniform powder.' },
  { title: 'Rotary Dryer', desc: 'Moisture content reduced from ~30% down to below 10%.' },
  { title: 'Pelletizing', desc: 'Powder pressed into 6–8 mm pellets via vertical ring-die press.' },
  { title: 'Cooling Unit', desc: 'Hot pellets cooled on conveyor belt to ambient temperature.' },
  { title: 'Packaging', desc: 'Finished pellets packaged in 25–50 kg bags or bulk sacks.' },
  { title: 'Dispatch', desc: 'Final dispatch controlled by technical parameter verification.' },
];

function BiomassProcess() {
  const ref = useRef(null);
  useScrollFadeUp(ref, { stagger: 0.08, staggerTarget: '.process-step' });

  return (
    <Section id="process" alt>
      <div className="section-label">Manufacturing Process</div>
      <h2 className="section-title">Biomass Pellet Production</h2>
      <p className="section-subtitle">
        An 11-step precision process transforms raw Napier grass into high-calorific biomass fuel pellets.
      </p>
      <div className="process-grid" ref={ref}>
        {biomassSteps.map((step, i) => (
          <div className="process-step glass-card" key={i}>
            <div className="process-step-num">{String(i + 1).padStart(2, '0')}</div>
            <h4>{step.title}</h4>
            <p>{step.desc}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

/* ─── CBG Process ─── */
const cbgSteps = [
  { title: 'Feedstock Collection', desc: 'Biomass and organic waste collected and prepared for processing.' },
  { title: 'Slurry Preparation', desc: 'Feedstock mixed with water to create an optimal slurry consistency.' },
  { title: 'Anaerobic Digestion', desc: 'Microorganisms break down organic matter in oxygen-free environment, producing raw biogas.' },
  { title: 'Purification & Upgrading', desc: 'CO₂, H₂S, and moisture removed to concentrate methane above 90%.' },
  { title: 'Compression', desc: 'Upgraded biogas compressed to high pressure, becoming CBG — equivalent to CNG.' },
  { title: 'Storage & Dispatch', desc: 'CBG stored in cascades or cylinders for transport and distribution.' },
  { title: 'Digestate → FOM', desc: 'Residual digestate processed into Fermented Organic Manure for agriculture.' },
];

function CBGProcess() {
  const ref = useRef(null);
  useScrollFadeUp(ref, { stagger: 0.1, staggerTarget: '.cbg-step' });
  useCardArrival(ref);

  return (
    <Section id="cbg-process">
      <div className="section-label">CBG Production</div>
      <h2 className="section-title">Compressed Biogas Process</h2>
      <p className="section-subtitle">
        Seven-step conversion of biomass into compressed biogas — a drop-in replacement for fossil CNG.
      </p>
      <div className="cbg-grid" ref={ref}>
        {cbgSteps.map((step, i) => (
          <div className="cbg-step glass-card" key={i}>
            <div className="cbg-step-num">{String(i + 1).padStart(2, '0')}</div>
            <h4>{step.title}</h4>
            <p>{step.desc}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

/* ─── Industries Served ─── */
const industries = [
  {
    title: 'Industrial Boilers', tag: 'Pellets',
    desc: 'High-calorific pellets replace coal in industrial boiler systems.',
    icon: '<circle cx="12" cy="12" r="9"/><path d="M12 8v4l2 2"/>',
  },
  {
    title: 'Textile Industry', tag: 'Pellets',
    desc: 'Clean biomass fuel for textile manufacturing heat requirements.',
    icon: '<path d="M3 6h18M3 12h18M3 18h18"/><path d="M7 6v12M17 6v12"/>',
  },
  {
    title: 'Ceramics', tag: 'Pellets',
    desc: 'Consistent calorific output ideal for kiln-fired ceramic production.',
    icon: '<path d="M6 20a2 2 0 01-2-2V8a6 6 0 0112 0v10a2 2 0 01-2 2z"/><path d="M18 8a6 6 0 00-6-6"/>',
  },
  {
    title: 'Food Processing', tag: 'Pellets',
    desc: 'Biomass energy powering food manufacturing and processing plants.',
    icon: '<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>',
  },
  {
    title: 'Automotive Fuel', tag: 'CBG',
    desc: 'CBG as a renewable drop-in replacement for CNG vehicles.',
    icon: '<rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 12h2M10 12h2M14 12h2"/>',
  },
  {
    title: 'City Gas Distribution', tag: 'CBG',
    desc: 'Integration with CGD networks for residential and commercial supply.',
    icon: '<path d="M3 21h18M5 21V7l7-4 7 4v14"/><path d="M9 21v-6h6v6"/>',
  },
];

function Clients() {
  const ref = useRef(null);
  useScrollFadeUp(ref, { stagger: 0.12, staggerTarget: '.industry-card' });
  useTilt3D(ref);
  useCardArrival(ref);

  return (
    <Section id="client" alt>
      <div className="section-label">Our Clients</div>
      <h2 className="section-title">Industries We Serve</h2>
      <p className="section-subtitle">
        Our clean energy products power diverse industrial applications across India.
      </p>
      <div className="industries-grid" ref={ref}>
        {industries.map((ind, i) => (
          <div className="industry-card glass-card" key={i}>
            <div className="industry-icon">
              <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round"
                dangerouslySetInnerHTML={{ __html: ind.icon }} />
            </div>
            <h4>{ind.title}</h4>
            <p>{ind.desc}</p>
            <span className="industry-tag">{ind.tag}</span>
          </div>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { BiomassProcess, CBGProcess, Clients });


/* ──── info-sections.jsx ──── */
/* ═══════════════════════════════════════════
   Infrastructure + Quality + Sustainability + About
   ═══════════════════════════════════════════ */

/* ─── Infrastructure ─── */
const machineryList = [
  'Hammer Mill', 'Rotary Dryer', 'Vertical Ring-Die Pelletizer',
  'Cooling Conveyor', 'Auto Feeding Unit', 'Weigh Bridge',
];

function ProductionPlant() {
  const ref = useRef(null);
  useScrollFadeUp(ref);

  return (
    <Section id="production-plant" glow>
      <div ref={ref}>
        <div className="section-label">Facility</div>
        <h2 className="section-title">Production Plant</h2>
        <p className="section-subtitle">
          Purpose-built manufacturing plant in Gandhinagar, Gujarat — engineered for scale.
        </p>
        <div className="infra-content">
          <div>
            <div className="infra-detail">
              <div className="infra-detail-icon">
                <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18M5 21V7l7-4 7 4v14"/><path d="M9 21v-6h6v6"/></svg>
              </div>
              <div>
                <h4>32,583 Sq. Metres</h4>
                <p>Industrial plot in Gandhinagar, Gujarat — ample space for current operations and future expansion.</p>
              </div>
            </div>
            <div className="infra-detail">
              <div className="infra-detail-icon">
                <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
              </div>
              <div>
                <h4>5 TPH Current Capacity</h4>
                <p>Fully operational biomass pellet production line processing 5 tonnes per hour.</p>
              </div>
            </div>
            <div className="infra-detail">
              <div className="infra-detail-icon">
                <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
              </div>
              <div>
                <h4>Expandable to 20 TPH</h4>
                <p>Plant designed for phased capacity expansion — 4× growth potential.</p>
              </div>
            </div>
          </div>
          <div>
            <h4 style={{ fontSize: 18, fontWeight: 700, marginBottom: 20, fontFamily: "'Poppins', sans-serif" }}>Key Machinery</h4>
            <div className="machinery-grid">
              {machineryList.map((m, i) => (
                <div className="machinery-item" key={i}>
                  <span className="machinery-dot"></span>
                  {m}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

/* ─── Quality Assurance ─── */
const qualitySpecs = [
  ['Diameter', '6–8 mm'],
  ['Calorific Value', '~4,300 Kcal/kg'],
  ['Ash Content', '~4.5%'],
  ['Moisture', 'Below 10%'],
  ['Raw Material', 'Napier Grass'],
];

function QualityAssurance() {
  const ref = useRef(null);
  useScrollFadeUp(ref);

  return (
    <Section id="quality">
      <div ref={ref}>
        <div className="section-label">Quality</div>
        <h2 className="section-title">Quality Assurance</h2>
        <p className="section-subtitle">
          Every batch of biomass pellets meets strict specifications — consistent calorific output, low ash, and controlled moisture.
        </p>
        <table className="quality-table">
          <thead>
            <tr>
              <th>Parameter</th>
              <th>Specification</th>
            </tr>
          </thead>
          <tbody>
            {qualitySpecs.map(([param, spec], i) => (
              <tr key={i}>
                <td style={{ fontWeight: 600, color: 'rgba(255,255,255,0.85)' }}>{param}</td>
                <td>{spec}</td>
              </tr>
            ))}
          </tbody>
        </table>

      </div>
    </Section>
  );
}

/* ─── Sustainability ─── */
const sustainPoints = [
  { icon: '🌿', title: 'Renewable Feedstock', desc: 'Napier grass grows rapidly, absorbs CO₂, and regenerates without replanting — a truly renewable input.' },
  { icon: '🏭', title: 'Coal Replacement', desc: 'Biomass pellets directly replace coal in industrial boilers, cutting fossil fuel consumption.' },
  { icon: '⛽', title: 'Fossil CNG Replacement', desc: 'CBG is a drop-in replacement for fossil CNG — identical performance, renewable source.' },
  { icon: '🌱', title: 'Bio-Manure (FOM)', desc: 'CBG by-product returns nutrients to soil as Fermented Organic Manure, closing the loop.' },
];


function Sustainability() {
  const ref = useRef(null);
  useScrollFadeUp(ref);
  useTilt3D(ref);
  useCardArrival(ref);

  return (
    <Section id="sustainability" alt>
      <div ref={ref}>
        <div className="section-label">Impact</div>
        <h2 className="section-title">Sustainability at Core</h2>
        <p className="section-subtitle">
          Every step of our process is designed around circularity — from renewable feedstock to bio-manure that nourishes the next harvest.
        </p>
        <div className="sustain-grid">
          <div className="sustain-points">
            {sustainPoints.map((sp, i) => (
              <div className="sustain-point" key={i}>
                <div className="sustain-point-icon">{sp.icon}</div>
                <div>
                  <h4>{sp.title}</h4>
                  <p>{sp.desc}</p>
                </div>
              </div>
            ))}
          </div>
          <AnimatedCircularEconomy />
        </div>
      </div>
    </Section>
  );
}

/* ─── About Us ─── */
function AboutUs() {
  const ref = useRef(null);
  useScrollFadeUp(ref);
  useCardArrival(ref);

  const whyItems = [
    'Napier Grass Feedstock',
    'PNB Backed Financing',
    'Gandhinagar Facility',
    'Two Clean Energy Verticals',
  ];

  return (
    <Section id="about" glow>
      <div ref={ref}>
        <div className="section-label">Company</div>
        <h2 className="section-title">About Aviasa Green Solution</h2>
        <p className="section-subtitle">
          Pioneering the conversion of agricultural biomass into clean, affordable energy for industrial India.
        </p>
        <div className="about-grid">
          <div>
            <div className="about-vision-mission">
              <div className="vm-card glass-card">
                <h4>Our Vision</h4>
                <p>To be India's leading biomass energy company — setting the standard for clean, renewable industrial fuel.</p>
              </div>
              <div className="vm-card glass-card">
                <h4>Our Mission</h4>
                <p>Converting agricultural biomass into clean, affordable fuel — reducing dependence on fossil energy while creating value for farmers and industry.</p>
              </div>
            </div>
            <div className="promoter-card glass-card">
              <div className="promoter-avatar">MJ</div>
              <div className="promoter-info">
                <h4>Manwendrasinh Jadeja</h4>
                <p>Promoter &amp; Director — 13+ years in technology and business operations across energy and infrastructure sectors.</p>
              </div>
            </div>
          </div>
          <div>
            <h4 style={{ fontSize: 18, fontWeight: 700, marginBottom: 20, fontFamily: "'Poppins', sans-serif" }}>Why Aviasa</h4>
            <div className="why-grid">
              {whyItems.map((item, i) => (
                <div className="why-item" key={i}>
                  <span className="why-check">✓</span>
                  {item}
                </div>
              ))}
            </div>
            <div className="glass-card" style={{ marginTop: 24, padding: '28px 32px' }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent)', marginBottom: 12, textTransform: 'uppercase', letterSpacing: 1 }}>Company Details</div>
              <div style={{ fontSize: 14, color: 'var(--white-70)', lineHeight: 2 }}>
                <div><strong style={{ color: 'var(--white)' }}>CIN:</strong> U46200GJ2024PTC157305</div>
                <div><strong style={{ color: 'var(--white)' }}>GST:</strong> 24ABBCA8565D1ZT</div>
                <div><strong style={{ color: 'var(--white)' }}>Location:</strong> Gandhinagar, Gujarat, India</div>
                <div><strong style={{ color: 'var(--white)' }}>Backed by:</strong> Punjab National Bank</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { ProductionPlant, QualityAssurance, Sustainability, AboutUs });


/* ──── contact-footer.jsx ──── */
/* ═══════════════════════════════════════════
   Contact Form + Footer + WhatsApp
   ═══════════════════════════════════════════ */

/* ─── Contact / RFQ ─── */
function Contact() {
  const ref = useRef(null);
  useScrollFadeUp(ref);
  useCardArrival(ref);

  const [form, setForm] = useState({
    name: '', company: '', email: '', phone: '',
    product: '', quantity: '', message: '',
  });
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const handleChange = (e) => {
    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    try {
      const response = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          access_key: '1e2d2f56-97c8-41a1-9c95-e8af195fe753',
          subject: 'New Inquiry from Aviasa Website',
          from_name: 'Aviasa Website',
          name: form.name,
          email: form.email,
          company: form.company,
          phone: form.phone,
          product_interest: form.product,
          required_quantity: form.quantity,
          message: form.message,
        }),
      });
      const result = await response.json();
      if (result.success) {
        setSubmitted(true);
        setForm({ name: '', company: '', email: '', phone: '', product: '', quantity: '', message: '' });
      }
    } catch (err) {
      alert('Something went wrong. Please try again or email us at contact@aviasa.in');
    }
    setSubmitting(false);
  };

  return (
    <Section id="contact" gradient>
      <div ref={ref}>
        <div className="section-label">Get in Touch</div>
        <h2 className="section-title">Contact Us</h2>
        <p className="section-subtitle">
          Tell us about your fuel requirements — our team will respond within 24 hours.
        </p>
        <div className="contact-grid">
          <form className="contact-form glass-card" onSubmit={handleSubmit}>
            {submitted ? (
              <div style={{ textAlign: 'center', padding: '60px 20px' }}>
                <div style={{ fontSize: 48, marginBottom: 16, color: 'var(--accent)' }}>✓</div>
                <h3 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8 }}>Thank You</h3>
                <p style={{ color: 'var(--white-70)', marginBottom: 24 }}>Your inquiry has been submitted to contact@aviasa.in. We'll be in touch shortly.</p>
                <button className="btn btn-outline" onClick={() => setSubmitted(false)} style={{ margin: '0 auto' }}>Send Another</button>
              </div>
            ) : (
              <>
                <div className="form-row">
                  <div className="form-group">
                    <label>Full Name *</label>
                    <input type="text" name="name" value={form.name} onChange={handleChange} placeholder="Your name" required />
                  </div>
                  <div className="form-group">
                    <label>Company</label>
                    <input type="text" name="company" value={form.company} onChange={handleChange} placeholder="Company name" />
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-group">
                    <label>Email *</label>
                    <input type="email" name="email" value={form.email} onChange={handleChange} placeholder="you@company.com" required />
                  </div>
                  <div className="form-group">
                    <label>Phone / WhatsApp</label>
                    <input type="tel" name="phone" value={form.phone} onChange={handleChange} placeholder="+91 XXXXX XXXXX" />
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-group">
                    <label>Product Interest *</label>
                    <select name="product" value={form.product} onChange={handleChange} required>
                      <option value="">Select product</option>
                      <option value="biomass-pellets">Biomass Pellets</option>
                      <option value="cbg">Compressed Biogas (CBG)</option>
                      <option value="fom">Bio-Manure (FOM)</option>
                    </select>
                  </div>
                  <div className="form-group">
                    <label>Required Quantity</label>
                    <input type="text" name="quantity" value={form.quantity} onChange={handleChange} placeholder="e.g. 50 tonnes/month" />
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-group full">
                    <label>Message</label>
                    <textarea name="message" value={form.message} onChange={handleChange} placeholder="Additional details about your requirements..." rows="4"></textarea>
                  </div>
                </div>
                <button type="submit" className="btn btn-primary" disabled={submitting} style={{ width: '100%', justifyContent: 'center', marginTop: 8, opacity: submitting ? 0.7 : 1 }}>
                  {submitting ? 'Sending...' : 'Submit Inquiry'}
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></svg>
                </button>
              </>
            )}
          </form>

          <div className="contact-details">
            <div>
              <h4 style={{ fontSize: 20, fontWeight: 700, fontFamily: "'Poppins', sans-serif", marginBottom: 24 }}>Contact Information</h4>
            </div>
            <div className="contact-item">
              <div className="contact-icon">
                <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>
              </div>
              <div>
                <h4>Email</h4>
                <p>contact@aviasa.in</p>
              </div>
            </div>
            <div className="contact-item">
              <div className="contact-icon">
                <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
              </div>
              <div>
                <h4>Office &amp; Facility</h4>
                <p>Gandhinagar, Gujarat, India<br />32,583 sq.m industrial facility</p>
              </div>
            </div>
            <div className="contact-item">
              <div className="contact-icon">
                <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
              </div>
              <div>
                <h4>Phone / WhatsApp</h4>
                <p>Contact us on WhatsApp for<br />quick inquiries and quotes</p>
              </div>
            </div>
            <div className="glass-card" style={{ padding: '28px 32px', marginTop: 8 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent)', marginBottom: 12, textTransform: 'uppercase', letterSpacing: 1 }}>Business Hours</div>
              <p style={{ fontSize: 14, color: 'var(--white-70)', lineHeight: 1.8 }}>
                Monday – Saturday: 9:00 AM – 6:00 PM IST<br />
                Sunday: Closed
              </p>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

/* ─── Footer ─── */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div style={{ marginBottom: 4 }}>
              <img src="logo.png" alt="Aviasa Green Solution Pvt Ltd" style={{ height: 44, width: 'auto', filter: 'brightness(1.6) contrast(1.1)' }} />
            </div>
            <p>Renewable energy solutions converting agricultural biomass into clean fuel for industrial India. Backed by Punjab National Bank.</p>
          </div>
          <div className="footer-col">
            <h5>Products</h5>
            <ul>
              <li><a href="#products">Biomass Pellets</a></li>
              <li><a href="#products">Compressed Biogas</a></li>
              <li><a href="#products">Bio-Manure (FOM)</a></li>
              <li><a href="#quality">Quality Specs</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#about">About Us</a></li>
              <li><a href="#production-plant">Our Process</a></li>
              <li><a href="#production-plant">Production Plant</a></li>
              <li><a href="#sustainability">Sustainability</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Connect</h5>
            <ul>
              <li><a href="#contact">Get in Touch</a></li>
              <li><a href="#contact">Contact Us</a></li>
              <li><a href="#client">Our Clients</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div className="footer-legal">
            © 2025 Aviasa Green Solution Pvt Ltd
            <span>|</span>
            CIN: U46200GJ2024PTC157305
            <span>|</span>
            GST: 24ABBCA8565D1ZT
          </div>
          <div className="footer-socials">
            <a className="footer-social" href="#" aria-label="LinkedIn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.41v1.56h.05a3.74 3.74 0 013.37-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 110-4.13 2.07 2.07 0 010 4.13zM7.12 20.45H3.56V9h3.56v11.45z"/></svg>
            </a>
            <a className="footer-social" href="#" aria-label="Twitter">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ─── WhatsApp Floating Button ─── */
function WhatsAppButton() {
  return (
    <a className="whatsapp-float" href="https://wa.me/917878879339" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
      <svg viewBox="0 0 32 32"><path d="M16.004 0h-.008C7.174 0 0 7.176 0 16.004c0 3.5 1.132 6.742 3.052 9.376L1.056 31.2l6.064-1.952a15.914 15.914 0 008.884 2.688C24.828 31.936 32 24.76 32 16.004S24.828 0 16.004 0zm9.32 22.608c-.396 1.116-1.96 2.04-3.2 2.312-.844.18-1.948.324-5.66-1.216-4.748-1.972-7.804-6.784-8.04-7.1-.224-.316-1.9-2.532-1.9-4.828s1.2-3.428 1.628-3.896c.396-.432.864-.54 1.152-.54.288 0 .54.004.78.012.252.012.588-.096.92.7.34.816 1.16 2.832 1.264 3.036.1.204.172.444.036.716-.132.276-.2.448-.396.688-.204.24-.428.536-.612.72-.204.204-.416.424-.18.832.24.408 1.064 1.756 2.284 2.844 1.568 1.396 2.892 1.832 3.3 2.036.408.204.648.172.888-.1.24-.276 1.036-1.204 1.312-1.62.276-.408.552-.34.928-.204.38.14 2.392 1.128 2.8 1.332.408.204.68.308.78.476.1.168.1.968-.296 2.084z"/></svg>
    </a>
  );
}

Object.assign(window, { Contact, Footer, WhatsAppButton });


/* ──── app.jsx ──── */
/* ═══════════════════════════════════════════
   App — Main Assembly
   ═══════════════════════════════════════════ */

function App() {
  // Initialize after mount
  useEffect(() => {
    // Magnetic buttons + ripple
    const btns = document.querySelectorAll('.btn');
    btns.forEach(btn => {
      const handleMove = (e) => {
        const rect = btn.getBoundingClientRect();
        const x = e.clientX - rect.left - rect.width / 2;
        const y = e.clientY - rect.top - rect.height / 2;
        btn.style.transition = 'transform 0.1s ease';
        btn.style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`;
      };
      const handleLeave = () => {
        btn.style.transition = 'transform 0.4s ease';
        btn.style.transform = 'translate(0, 0)';
      };
      const handleClick = (e) => {
        const rect = btn.getBoundingClientRect();
        const ripple = document.createElement('span');
        ripple.className = 'ripple';
        const size = Math.max(rect.width, rect.height);
        ripple.style.width = ripple.style.height = size + 'px';
        ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
        ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
        btn.appendChild(ripple);
        setTimeout(() => ripple.remove(), 600);
      };
      btn.addEventListener('mousemove', handleMove);
      btn.addEventListener('mouseleave', handleLeave);
      btn.addEventListener('click', handleClick);
    });

    // Active nav highlighting
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('.nav-links a');
    if (sections.length && navLinks.length) {
      const navObs = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const id = entry.target.id;
            navLinks.forEach(link => {
              link.classList.toggle('active', link.getAttribute('href') === '#' + id);
            });
          }
        });
      }, { threshold: 0.3, rootMargin: '-80px 0px -50% 0px' });
      sections.forEach(s => navObs.observe(s));
    }

    // Section label underline draw
    const labels = document.querySelectorAll('.section-label');
    const labelObs = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) entry.target.classList.add('visible');
      });
    }, { threshold: 0.5 });
    labels.forEach(l => labelObs.observe(l));
  }, []);

  return (
    <>
      <ParticleBackground />
      <ScrollProgress />
      <CursorGlow />
      <Navbar />
      <Hero />
      <StatCounters />
      <MarqueeTicker />
      <WaveDivider color="var(--bg-alt)" />
      <Verticals />
      <WaveDivider color="var(--bg)" flip />
      <Clients />
      <WaveDivider color="var(--bg-alt)" />
      <ProductionPlant />
      <BiomassProcess />
      <CBGProcess />
      <QualityAssurance />
      <WaveDivider color="var(--bg-alt)" />
      <Sustainability />
      <WaveDivider color="var(--bg)" flip />
      <AboutUs />
      <Contact />
      <Footer />
      <WhatsAppButton />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));