// home3.jsx — Parallax + Timeline + CTA (LIGHT THEME)

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

/* ── PARALLAX ── */
function ParallaxSection() {
  const sectionRef = useRef(null);
  const bgRef = useRef(null);
  const [ref, visible] = window.useScrollReveal();

  useEffect(() => {
    const fn = () => {
      if (!sectionRef.current || !bgRef.current) return;
      const rect = sectionRef.current.getBoundingClientRect();
      bgRef.current.style.transform = `translateY(${-rect.top * 0.42}px)`;
    };
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  return (
    <section ref={sectionRef} style={{ position: 'relative', overflow: 'hidden', height: 460, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div ref={bgRef} style={{ position: 'absolute', inset: '-20%', backgroundImage: `url(${window.__resources ? window.__resources.heroField : 'hero-field.png'})`, backgroundSize: 'cover', backgroundPosition: 'center', willChange: 'transform' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(22,43,31,0.62)' }} />
      <div ref={ref} style={{ position: 'relative', zIndex: 2, textAlign: 'center', padding: '0 2rem', opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(20px)', transition: 'all 0.8s ease' }}>
        <div style={{ width: 44, height: 2, background: G, margin: '0 auto 22px' }} />
        <h2 style={{ color: '#fff', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,4.8vw,3.8rem)', margin: '0 0 18px', lineHeight: 1.12 }}>
          "From the Lab.<br /><span style={{ color: '#8FB89C' }}>For the Land.</span>"
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.75)', fontFamily: 'Inter, sans-serif', fontSize: 17, maxWidth: 560, margin: '0 auto', lineHeight: 1.75 }}>
          Every formula we create begins with one question:<br />what does the Indian farmer actually need?
        </p>
      </div>
    </section>
  );
}

/* ── TIMELINE ── */
function TimelineSection() {
  const [ref, visible] = window.useScrollReveal();
  const steps = [
    { icon: 'flask', title: 'Research & Development', desc: 'Identifying crop needs and formulating active ingredient combinations' },
    { icon: 'micro', title: 'Lab Testing & Formulation', desc: 'Rigorous stability, efficacy, and safety testing under controlled conditions' },
    { icon: 'leaf', title: 'Field Trials', desc: 'Real-world validation across multiple geographies and crop seasons' },
    { icon: 'badge', title: 'Certified & Delivered', desc: 'Quality-certified and distributed through our trusted dealer network' },
  ];

  function StepIcon({ type }) {
    const s = { width: 26, height: 26, color: G };
    if (type === 'flask') return <svg style={s} viewBox="0 0 24 24" fill="none"><path d="M9 3h6M9 3v8l-4 7a1 1 0 00.9 1.5h12.2a1 1 0 00.9-1.5L15 11V3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><path d="M7.5 16.5h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>;
    if (type === 'micro') return <svg style={s} viewBox="0 0 24 24" fill="none"><circle cx="10" cy="8" r="4" stroke="currentColor" strokeWidth="1.8"/><path d="M10 12v8M6 20h8M14 6l4-4 1 1-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>;
    if (type === 'leaf') return <svg style={s} viewBox="0 0 24 24" fill="none"><path d="M12 21C8 17 3 14 3 9c0-5 9-7 15-3-2 8-6 11-6 15z" stroke="currentColor" strokeWidth="1.8"/><path d="M12 21c0-4-1-8-3-12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>;
    return <svg style={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8"/><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>;
  }

  return (
    <section style={{ background: '#fff', padding: '88px 2rem' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div ref={ref} style={{ textAlign: 'center', marginBottom: 60, opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(20px)', transition: 'all 0.55s ease' }}>
          <div style={{ color: G, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 11, letterSpacing: '0.26em', marginBottom: 12 }}>OUR PROCESS</div>
          <h2 style={{ color: TEXTD, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(1.8rem,3.4vw,2.6rem)', margin: 0 }}>From Bench to Field</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: 0, position: 'relative' }}>
          {/* connecting line */}
          <div style={{ position: 'absolute', top: 35, left: '12.5%', right: '12.5%', height: 2, background: '#EEF5F1', display: window.innerWidth > 640 ? 'block' : 'none' }} />
          <div style={{ position: 'absolute', top: 35, left: '12.5%', height: 2, background: G, width: visible ? '75%' : '0%', transition: 'width 1.8s ease 0.3s', zIndex: 1, display: window.innerWidth > 640 ? 'block' : 'none' }} />
          {steps.map((step, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '0 16px', position: 'relative', zIndex: 2, opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(20px)', transition: `all 0.5s ease ${0.2 + i * 0.14}s` }}>
              <div style={{ width: 70, height: 70, borderRadius: '50%', background: '#fff', border: `2px solid ${G}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18, boxShadow: '0 4px 14px rgba(38,74,49,0.12)', position: 'relative', zIndex: 2 }}>
                <StepIcon type={step.icon} />
              </div>
              <div style={{ position: 'absolute', top: -7, right: 'calc(50% - 38px)', background: G, color: '#fff', width: 21, height: 21, borderRadius: '50%', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 11, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 3 }}>{i + 1}</div>
              <h4 style={{ color: TEXTD, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 14, margin: '0 0 8px' }}>{step.title}</h4>
              <p style={{ color: TEXTM, fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.6, margin: 0 }}>{step.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── CTA BAND ── */
function CTABand() {
  const [ref, visible] = window.useScrollReveal();
  const { Link } = window.ReactRouterDOM;
  return (
    <section style={{ background: G, padding: '80px 2rem' }}>
      <div ref={ref} style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(20px)', transition: 'all 0.65s ease' }}>
        <h2 style={{ color: '#fff', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(1.7rem,3.8vw,2.5rem)', margin: '0 0 14px' }}>Ready to Grow More?</h2>
        <p style={{ color: 'rgba(255,255,255,0.78)', fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.75, margin: '0 0 34px', maxWidth: 500, marginLeft: 'auto', marginRight: 'auto' }}>
          Contact our agronomist team for recommendations tailored to your crops and conditions.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, justifyContent: 'center' }}>
          <Link to="/contact" style={{ background: '#fff', color: G, padding: '13px 34px', borderRadius: 999, fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, textDecoration: 'none', transition: 'all 0.22s ease' }} className="cv-cta-white">Enquire Now</Link>
          <a href="https://wa.me/918699860146" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'transparent', color: '#fff', padding: '13px 34px', borderRadius: 999, fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, textDecoration: 'none', border: '2px solid rgba(255,255,255,0.5)', transition: 'all 0.22s ease' }} className="cv-cta-wa">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
            WhatsApp Us
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ParallaxSection, TimelineSection, CTABand });
