// home1.jsx — Hero + Marquee + Trust Bar (LIGHT THEME)

const { useState, useEffect, useRef } = React;
const G = '#264A31',GOLD = '#F27D16',TEXTD = '#1A1A1A',TEXTM = '#595959';

function HeroSection() {
  const [loaded, setLoaded] = useState(false);
  const logoUrl = window.useRemoveBg(window.__resources ? window.__resources.logoPng : 'logo.png');
  const { Link } = window.ReactRouterDOM;

  useEffect(() => {const t = setTimeout(() => setLoaded(true), 80);return () => clearTimeout(t);}, []);

  const line1 = ['Rooted', 'in', 'Science.'];
  const line2 = ['Built', 'for', 'the', 'Field.'];

  return (
    <section style={{ minHeight: '100vh', background: '#fff', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      {/* Soft green radial gradient background */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 80% 70% at 60% 40%, rgba(38,74,49,0.06) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', top: -120, right: -80, width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(38,74,49,0.05) 0%, transparent 70%)', pointerEvents: 'none' }} />

      {/* Subtle molecular dots canvas */}
      <canvas ref={useMolecularCanvasRef()} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.45, pointerEvents: 'none' }} />

      {/* Main content */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', maxWidth: 1200, margin: '0 auto', padding: '100px 2rem 60px', width: '100%', position: 'relative', zIndex: 2, gap: 48 }}>
        {/* Left: Text 58% */}
        <div style={{ flex: '0 0 58%' }}>
          {/* Headline */}
          <h1 style={{ margin: 0, lineHeight: 1.08 }}>
            <div style={{ marginBottom: 4 }}>
              {line1.map((w, i) =>
              <span key={i} style={{ display: 'inline-block', marginRight: 14, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(2.6rem,5.2vw,4.8rem)', color: TEXTD, opacity: loaded ? 1 : 0, transform: loaded ? 'none' : 'translateY(28px)', transition: `opacity 0.55s ease ${0.3 + i * 0.09}s, transform 0.55s ease ${0.3 + i * 0.09}s` }}>{w}</span>
              )}
            </div>
            <div>
              {line2.map((w, i) =>
              <span key={i} style={{ display: 'inline-block', marginRight: 14, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(2.6rem,5.2vw,4.8rem)', color: G, opacity: loaded ? 1 : 0, transform: loaded ? 'none' : 'translateY(28px)', transition: `opacity 0.55s ease ${0.6 + i * 0.09}s, transform 0.55s ease ${0.6 + i * 0.09}s` }}>{w}</span>
              )}
            </div>
          </h1>

          {/* Body */}
          <p style={{ color: TEXTM, fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.75, margin: '28px 0 36px', maxWidth: 500, opacity: loaded ? 1 : 0, transform: loaded ? 'none' : 'translateY(16px)', transition: 'all 0.55s ease 1s' }}>
            Advanced agrochemical solutions trusted by farmers across India. Precision chemistry for every season, every crop, every challenge.
          </p>

          {/* CTAs */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginBottom: 44, opacity: loaded ? 1 : 0, transition: 'all 0.55s ease 1.1s' }}>
            <Link to="/products" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: G, color: '#fff', padding: '13px 30px', borderRadius: 999, fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 15, textDecoration: 'none', boxShadow: `0 4px 20px rgba(38,74,49,0.25)`, transition: 'all 0.25s ease' }} className="cv-btn-primary">
              Explore Products
              <svg width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M3 7.5h9M8 3.5l4 4-4 4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </Link>
            <Link to="/about" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'transparent', color: G, padding: '13px 30px', borderRadius: 999, fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 15, textDecoration: 'none', border: `1.5px solid ${G}`, transition: 'all 0.25s ease' }} className="cv-btn-outline">
              Our Story
            </Link>
          </div>

          {/* Micro-stats */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 0, opacity: loaded ? 1 : 0, transition: 'all 0.55s ease 1.25s' }}>
            {[['500+', 'Farmers Trusted'], ['5+', 'Products'], ['ISO 9001:2015', 'Certified']].map(([num, label], i) =>
            <div key={i} style={{ display: 'flex', alignItems: 'center' }}>
                {i > 0 && <div style={{ width: 1, height: 30, background: 'rgba(38,74,49,0.2)', margin: '0 20px' }} />}
                <div>
                  <div style={{ color: G, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 17, lineHeight: 1 }}>{num}</div>
                  <div style={{ color: '#8A8A8A', fontFamily: 'Inter, sans-serif', fontSize: 12, marginTop: 3 }}>{label}</div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Right: Logo 40% */}
        <div style={{ flex: '0 0 40%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div style={{ position: 'relative', opacity: loaded ? 1 : 0, transform: loaded ? 'none' : 'scale(0.88)', transition: 'all 0.85s cubic-bezier(0.34,1.56,0.64,1) 0.35s' }}>
            {/* Soft glow rings */}
            <div style={{ position: 'absolute', inset: -50, borderRadius: '50%', border: `1px solid rgba(38,74,49,0.1)`, animation: 'orbitSpin 14s linear infinite' }}>
              <div style={{ position: 'absolute', top: -4, left: '50%', transform: 'translateX(-50%)', width: 8, height: 8, borderRadius: '50%', background: '#6B854A', boxShadow: '0 0 8px #6B854A' }} />
            </div>
            <div style={{ position: 'absolute', inset: -85, borderRadius: '50%', border: `1px dashed rgba(38,74,49,0.07)`, animation: 'orbitSpin 22s linear infinite reverse' }} />
            <div style={{ position: 'absolute', inset: -30, background: 'radial-gradient(circle, rgba(38,74,49,0.1) 0%, transparent 70%)', animation: 'heroGlow 3.5s ease-in-out infinite', borderRadius: '50%' }} />
            <img src={logoUrl} alt="Crovista" className="cv-logo-main" style={{ width: 'clamp(160px,20vw,260px)', height: 'auto', animation: 'heroFloat 4s ease-in-out infinite', position: 'relative', zIndex: 2, filter: 'drop-shadow(0 8px 30px rgba(38,74,49,0.2))' }} />
          </div>
        </div>
      </div>

      {/* Marquee ticker */}
      <div style={{ position: 'relative', zIndex: 2, background: '#EEF5F1', borderTop: `1px solid rgba(38,74,49,0.1)`, overflow: 'hidden', padding: '13px 0' }}>
        <div style={{ display: 'flex', animation: 'marquee 30s linear infinite', whiteSpace: 'nowrap' }}>
          {[0, 1].map((rep) =>
          <span key={rep} style={{ display: 'inline-flex' }}>
              {['CROSHIELD', 'NUTRIVISTA', 'CROSTAR-TZ', 'CROTRIPLE', 'TRUSTED BY FARMERS', 'ISO CERTIFIED', 'MADE IN INDIA', 'PRECISION CHEMISTRY', 'ADVANCED FORMULATIONS'].map((item, i) =>
            <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 24, paddingRight: 48 }}>
                  <span style={{ color: '#595959', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 11, letterSpacing: '0.2em' }}>{item}</span>
                  <span style={{ color: G, fontSize: 5 }}>◆</span>
                </span>
            )}
            </span>
          )}
        </div>
      </div>
    </section>);

}

/* ── Inline molecular canvas hook for light bg ── */
function useMolecularCanvasRef() {
  const ref = useRef(null);
  useEffect(() => {
    const c = ref.current;if (!c) return;
    const ctx = c.getContext('2d');
    let pts = [],id;
    const resize = () => {
      c.width = c.offsetWidth;c.height = c.offsetHeight;
      pts = Array.from({ length: 50 }, () => ({ x: Math.random() * c.width, y: Math.random() * c.height, vx: (Math.random() - .5) * .4, vy: (Math.random() - .5) * .4 }));
    };
    const draw = () => {
      ctx.clearRect(0, 0, c.width, c.height);
      for (let i = 0; i < pts.length; i++) for (let j = i + 1; j < pts.length; j++) {
        const dx = pts[i].x - pts[j].x,dy = pts[i].y - pts[j].y,d = Math.sqrt(dx * dx + dy * dy);
        if (d < 130) {ctx.beginPath();ctx.moveTo(pts[i].x, pts[i].y);ctx.lineTo(pts[j].x, pts[j].y);ctx.strokeStyle = `rgba(38,74,49,${0.09 * (1 - d / 130)})`;ctx.lineWidth = 1;ctx.stroke();}
      }
      pts.forEach((p) => {
        p.x += p.vx;p.y += p.vy;
        if (p.x < 0) p.x = c.width;if (p.x > c.width) p.x = 0;
        if (p.y < 0) p.y = c.height;if (p.y > c.height) p.y = 0;
        ctx.beginPath();ctx.arc(p.x, p.y, 1.8, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(38,74,49,0.18)';ctx.fill();
      });
    };
    const animate = () => {draw();id = requestAnimationFrame(animate);};
    resize();animate();
    window.addEventListener('resize', resize);
    return () => {cancelAnimationFrame(id);window.removeEventListener('resize', resize);};
  }, []);
  return ref;
}

/* ── TRUST BAR ── */
function TrustBar() {
  const [ref, visible] = window.useScrollReveal();
  const stats = [
  { value: '500', suffix: '+', label: 'Farmers Served' },
  { value: '5', suffix: '+', label: 'Products' },
  { value: '4', suffix: '', label: 'Product Categories' },
  { value: '100', suffix: '%', label: 'ISO Certified' }];

  return (
    <section ref={ref} style={{ background: '#F5FAF6', padding: '64px 2rem', borderBottom: '1px solid rgba(38,74,49,0.08)' }}>
      <div className="cv-stat-bar" style={{ maxWidth: 1000, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0 }}>
        {stats.map((s, i) => {
          const count = window.useCountUp(s.value, 1800, visible);
          return (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '0 16px', borderRight: i < 3 ? '1px solid rgba(38,74,49,0.15)' : 'none', opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(20px)', transition: `all 0.5s ease ${i * 0.1}s` }}>
              <div style={{ color: G, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,3.8vw,3rem)' }}>{visible ? count : 0}{s.suffix}</div>
              <div style={{ color: '#595959', fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 13, marginTop: 6, textAlign: 'center' }}>{s.label}</div>
            </div>);

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

}

Object.assign(window, { HeroSection, TrustBar });