// home2.jsx — Categories + Featured Products + Why Crovista (LIGHT THEME)

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

/* ── Category Icons ── */
function CategoryIcon({ type }) {
  const s = { width: 44, height: 44 };
  if (type === 'bug') return (
    <svg style={s} viewBox="0 0 48 48" fill="none">
      <ellipse cx="24" cy="27" rx="9" ry="13" stroke={G} strokeWidth="2.2" />
      <ellipse cx="24" cy="16" rx="5" ry="5" stroke={G} strokeWidth="2.2" />
      <path d="M10 21 Q4 19 4 13M38 21 Q44 19 44 13" stroke={G} strokeWidth="2" strokeLinecap="round" />
      <path d="M8 31 Q2 31 2 25M40 31 Q46 31 46 25" stroke={G} strokeWidth="2" strokeLinecap="round" />
      <path d="M20 16 Q16 10 14 8M28 16 Q32 10 34 8" stroke={G} strokeWidth="2" strokeLinecap="round" />
    </svg>);

  if (type === 'fungal') return (
    <svg style={s} viewBox="0 0 48 48" fill="none">
      <path d="M24 38 L24 26" stroke={G} strokeWidth="2.5" strokeLinecap="round" />
      <ellipse cx="24" cy="20" rx="15" ry="8" stroke={G} strokeWidth="2.2" />
      <path d="M13 29 Q9 37 17 41" stroke={G} strokeWidth="2" strokeLinecap="round" />
      <path d="M35 29 Q39 37 31 41" stroke={G} strokeWidth="2" strokeLinecap="round" />
      <circle cx="24" cy="20" r="4" stroke={G} strokeWidth="2" />
    </svg>);

  return (
    <svg style={s} viewBox="0 0 48 48" fill="none">
      <path d="M24 40 C16 32 8 28 8 18 C8 10 15 6 24 12 C33 6 40 10 40 18 C40 28 32 32 24 40Z" stroke={G} strokeWidth="2.2" />
      <path d="M24 12 L24 40" stroke={G} strokeWidth="1.8" strokeLinecap="round" />
      <path d="M14 23 Q24 21 34 23" stroke={G} strokeWidth="1.8" strokeLinecap="round" />
      <circle cx="37" cy="30" r="5" stroke={GOLD} strokeWidth="2" />
      <path d="M35 32 l2 2 3-3" stroke={GOLD} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

/* ── CATEGORIES SECTION ── */
function CategoriesSection() {
  const [hovered, setHovered] = useState(null);
  const [ref, visible] = window.useScrollReveal();
  const { Link } = window.ReactRouterDOM;

  return (
    <section ref={ref} style={{ background: '#EEF5F1', padding: '88px 2rem' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 52, opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(24px)', transition: 'all 0.6s ease' }}>
          <div style={{ color: G, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 11, letterSpacing: '0.26em', marginBottom: 12 }}>OUR SOLUTIONS</div>
          <h2 style={{ color: TEXTD, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(1.9rem,3.8vw,2.8rem)', margin: '0 0 14px' }}>Complete Crop Protection</h2>
          <p style={{ color: TEXTM, fontFamily: 'Inter, sans-serif', fontSize: 16, maxWidth: 520, margin: '0 auto', lineHeight: 1.7 }}>
            From soil to harvest — a full spectrum of agrochemical solutions engineered for Indian crops.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 24 }}>
          {window.CATEGORIES.map((cat, i) =>
          <Link to={`/products?cat=${cat.id}`} key={cat.id} style={{ textDecoration: 'none', display: 'flex' }}>
              <div onMouseEnter={() => setHovered(cat.id)} onMouseLeave={() => setHovered(null)}
            style={{ background: hovered === cat.id ? '#fff' : '#fff', borderRadius: 20, padding: '36px 28px', border: `1.5px solid ${hovered === cat.id ? G : 'rgba(38,74,49,0.14)'}`, boxShadow: hovered === cat.id ? '0 12px 40px rgba(38,74,49,0.12)' : '0 2px 12px rgba(38,74,49,0.06)', transform: hovered === cat.id ? 'translateY(-6px)' : 'none', transition: 'all 0.3s cubic-bezier(0.34,1.56,0.64,1)', opacity: visible ? 1 : 0, transitionDelay: `${i * 0.08}s`, cursor: 'pointer', display: 'flex', flexDirection: 'column', width: '100%' }}>
                <div style={{ transform: hovered === cat.id ? 'scale(1.1)' : 'scale(1)', transition: 'transform 0.3s ease', marginBottom: 22 }}>
                  <CategoryIcon type={cat.icon} />
                </div>
                <h3 style={{ color: TEXTD, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 20, margin: '0 0 10px' }}>{cat.name}</h3>
                <p style={{ color: TEXTM, fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.65, margin: '0 0 20px' }}>{cat.description}</p>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto' }}>
                  <span style={{ color: GOLD, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 13 }}>{cat.count} Products</span>
                  <div style={{ width: 32, height: 32, borderRadius: '50%', background: hovered === cat.id ? G : '#EEF5F1', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background 0.3s ease' }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path d="M3 7h8M7 3l4 4-4 4" stroke={hovered === cat.id ? '#fff' : G} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                </div>
              </div>
            </Link>
          )}
        </div>
      </div>
    </section>);

}

/* ── FEATURED PRODUCTS ── */
function FeaturedSection() {
  const [ref, visible] = window.useScrollReveal();
  return (
    <section ref={ref} style={{ background: '#fff', padding: '88px 2rem' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 52, 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 }}>EXPLORE OUR RANGE</div>
          <h2 style={{ color: TEXTD, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(1.9rem,3.8vw,2.8rem)', margin: 0 }}>Featured Products</h2>
        </div>
        {/* Equal-height grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(258px,1fr))', gap: 24, alignItems: 'stretch' }}>
          {window.PRODUCTS.filter(p => ['vampire','galaxy','nutri-vista','grow-plus'].includes(p.slug)).map((product, i) =>
          <div key={product.id} style={{ display: 'flex', opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(28px)', transition: `opacity 0.5s ease ${i * 0.1}s, transform 0.5s ease ${i * 0.1}s` }}>
              <window.ProductCard product={product} />
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── WHY CROVISTA ── */
function WhySection() {
  const [ref, visible] = window.useScrollReveal();
  const features = [
  { title: 'Fast Knockdown', desc: 'Rapid elimination of pests within hours, protecting yield immediately.', icon: [0, 0] },
  { title: 'Long Residual Protection', desc: 'Formulations that stay active 15–28 days, reducing application frequency.', icon: [1, 0] },
  { title: 'Broad Spectrum Control', desc: 'One product, multiple targets. Maximum efficiency across crop systems.', icon: [0, 1] },
  { title: 'Research Backed', desc: 'Every formulation validated through rigorous lab and field testing.', icon: [1, 1] },
  { title: 'Crop Safe Formula', desc: 'Designed for minimal phytotoxicity and maximum crop tolerance.', icon: [0, 2] },
  { title: 'Trusted Across India', desc: 'From Punjab to Tamil Nadu — farmers choose Crovista every season.', icon: [1, 2] }];


  return (
    <section style={{ background: '#F5FAF6', padding: '88px 2rem' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div ref={ref} style={{ textAlign: 'center', marginBottom: 56, 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 }}>SCIENCE DRIVEN</div>
          <h2 style={{ color: TEXTD, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(1.9rem,3.8vw,2.8rem)', margin: '0 0 12px' }}>Why Crovista?</h2>
          <p style={{ color: G, fontFamily: 'Montserrat, sans-serif', fontWeight: 600, fontSize: 15 }}>The Science Behind the Difference</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(300px,1fr))', gap: 20 }}>
          {features.map((f, i) =>
          <WhyCard key={i} feature={f} index={i} visible={visible} />
          )}
        </div>
      </div>
    </section>);

}

function WhyCard({ feature, index, visible }) {
  const [hovered, setHovered] = useState(false);
  const iconsUrl = window.useRemoveBg(window.__resources ? window.__resources.iconsFeatures : 'icons-features.png');
  const [col, row] = feature.icon;

  return (
    <div onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
    style={{ background: hovered ? '#fff' : '#fff', border: `1.5px solid ${hovered ? G : 'rgba(38,74,49,0.1)'}`, borderRadius: 16, padding: '28px 24px', boxShadow: hovered ? '0 10px 32px rgba(38,74,49,0.1)' : '0 2px 8px rgba(38,74,49,0.05)', transform: hovered ? 'translateY(-4px)' : 'none', transition: 'all 0.28s ease', opacity: visible ? 1 : 0, transitionDelay: `${index * 0.08}s` }}>
      {/* Icon sprite */}
      <div style={{ width: 56, height: 56, borderRadius: '50%', overflow: 'hidden', marginBottom: 18, background: '#EEF5F1', border: `1px solid rgba(38,74,49,0.15)`, transform: hovered ? 'scale(1.08)' : 'scale(1)', transition: 'transform 0.28s ease' }}>
        <div style={{ width: '100%', height: '100%', backgroundImage: `url(${iconsUrl})`, backgroundSize: '200% 300%', backgroundPosition: `${col * 100}% ${row * 50}%`, backgroundRepeat: 'no-repeat' }} />
      </div>
      <h3 style={{ color: TEXTD, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 15, margin: '0 0 8px' }}>{feature.title}</h3>
      <p style={{ color: TEXTM, fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.65, margin: '0 0 16px' }}>{feature.desc}</p>
      <div style={{ height: 2, background: '#EEF5F1', borderRadius: 2, overflow: 'hidden' }}>
        <div style={{ height: '100%', background: G, borderRadius: 2, width: visible ? '100%' : '0%', transition: `width 1.2s ease ${index * 0.12}s` }} />
      </div>
    </div>);

}

Object.assign(window, { CategoriesSection, FeaturedSection, WhySection });