// ProductDetail.jsx — Product detail page with tabs

const { useState, useEffect } = React;
const { Link, useParams } = window.ReactRouterDOM;

/* ── Bottle SVG ── */
function ProductBottle({ product }) {
  const [hovered, setHovered] = useState(false);
  return (
    <div onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', position: 'relative' }}>
      {/* Glow */}
      <div style={{
        position: 'absolute', width: 220, height: 340, borderRadius: '50%',
        background: `radial-gradient(circle, ${product.accentColor} 0%, transparent 70%)`,
        filter: 'blur(40px)',
        animation: 'heroGlow 3s ease-in-out infinite',
        transform: hovered ? 'scale(1.3)' : 'scale(1)',
        transition: 'transform 0.5s ease',
      }} />
      {/* Bottle */}
      <svg viewBox="0 0 200 340" width="180" style={{
        filter: `drop-shadow(0 8px 24px ${product.accentColor})`,
        animation: 'heroFloat 4s ease-in-out infinite',
        transform: hovered ? 'rotate(4deg) scale(1.05)' : 'none',
        transition: 'transform 0.5s ease',
        position: 'relative', zIndex: 2,
      }}>
        {/* Cap */}
        <rect x="77" y="12" width="46" height="32" rx="7" fill={product.color}/>
        <rect x="82" y="12" width="36" height="8" rx="4" fill="rgba(255,255,255,0.25)"/>
        {/* Neck */}
        <rect x="82" y="44" width="36" height="26" rx="3" fill={product.color} opacity="0.92"/>
        {/* Shoulder to body */}
        <path d="M64 70 Q56 88 54 108 L54 264 Q54 284 72 290 L128 290 Q146 284 146 264 L146 108 Q144 88 136 70 Z" fill={product.color}/>
        {/* Body shine */}
        <path d="M72 80 Q72 100 72 150" stroke="rgba(255,255,255,0.18)" strokeWidth="8" strokeLinecap="round" fill="none"/>
        {/* Label bg */}
        <rect x="62" y="122" width="76" height="106" rx="6" fill="rgba(255,255,255,0.13)" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
        {/* Product name on label */}
        <text x="100" y="152" textAnchor="middle" fill="white" fontSize="13" fontFamily="Montserrat,sans-serif" fontWeight="800" letterSpacing="1.5">{product.name.toUpperCase()}</text>
        <line x1="68" y1="162" x2="132" y2="162" stroke="rgba(255,255,255,0.25)" strokeWidth="1"/>
        <text x="100" y="178" textAnchor="middle" fill="rgba(255,255,255,0.7)" fontSize="8.5" fontFamily="Inter,sans-serif" letterSpacing="0.5">{product.category.toUpperCase()}</text>
        <line x1="68" y1="190" x2="132" y2="190" stroke="rgba(255,255,255,0.25)" strokeWidth="1"/>
        {/* Bottom */}
        <ellipse cx="100" cy="290" rx="46" ry="8" fill="rgba(0,0,0,0.2)"/>
      </svg>
    </div>
  );
}

/* ── TABS ── */
function TabOverview({ product }) {
  return (
    <div>
      {/* Specs table */}
      <div style={{ background: '#fff', borderRadius: 12, overflow: 'hidden', border: '1px solid rgba(51,51,51,0.08)', marginBottom: 32 }}>
        <div style={{ padding: '14px 20px', background: '#333333' }}>
          <span style={{ color: '#F0EDE8', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 14 }}>Product Specifications</span>
        </div>
        {[
          ['Formulation Type', product.formulation],
          ['Active Ingredients', product.activeIngredients],
          ['Mode of Action', product.modeOfAction],
          ['Pack Sizes', product.packSizes.join(', ')],
          ['Category', product.category],
        ].map(([k, v], i) => (
          <div key={k} style={{ display: 'flex', padding: '14px 20px', background: i % 2 === 0 ? 'rgba(247,245,240,0.6)' : '#fff', borderBottom: '1px solid rgba(51,51,51,0.05)' }}>
            <span style={{ flex: '0 0 180px', color: '#6b7280', fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 500 }}>{k}</span>
            <span style={{ color: '#333333', fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600 }}>{v}</span>
          </div>
        ))}
      </div>

      {/* How it works */}
      <h4 style={{ color: '#333333', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 15, marginBottom: 20 }}>How It Works</h4>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: 16 }}>
        {product.howItWorks.map((step, i) => (
          <div key={i} style={{ background: '#fff', borderRadius: 12, padding: '20px', border: '1px solid rgba(38,74,49,0.12)' }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#264A31', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 14, marginBottom: 12 }}>{step.step}</div>
            <div style={{ color: '#333333', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 14, marginBottom: 6 }}>{step.title}</div>
            <div style={{ color: '#6b7280', fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.5 }}>{step.desc}</div>
          </div>
        ))}
      </div>

      {/* Product label */}
      <div style={{ marginTop: 32, borderRadius: 12, overflow: 'hidden', border: '1px solid rgba(51,51,51,0.1)' }}>
        <img src={window.__resources ? window.__resources[({'grow-plus':'prodGrowPlus','vampire':'prodVampire','devil':'prodDevil','nutri-vista':'prodNutriVista','ravan':'prodRavan','galaxy':'prodGalaxy','cropsil':'prodCropsil','v-potash':'prodVPotash','grow-vista':'prodGrowVista'})[product.slug]] : `uploads/${product.slug}.jpg`} alt={`${product.name} label`} style={{ width: '100%', display: 'block' }} />
      </div>
    </div>
  );
}

function TabBenefits({ product }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 20 }}>
      {product.benefits.map((b, i) => (
        <div key={i} style={{ background: '#fff', borderRadius: 12, padding: '24px', border: '1px solid rgba(38,74,49,0.1)' }}>
          <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(38,74,49,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <circle cx="10" cy="10" r="10" fill="#264A31"/>
              <path d="M6 10l3 3 5-5" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <h4 style={{ color: '#333333', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 15, margin: '0 0 8px' }}>{b.title}</h4>
          <p style={{ color: '#6b7280', fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.6, margin: 0 }}>{b.desc}</p>
        </div>
      ))}
    </div>
  );
}

function TabCrops({ product }) {
  return (
    <div>
      <p style={{ color: '#6b7280', fontFamily: 'Inter, sans-serif', fontSize: 15, marginBottom: 28, lineHeight: 1.7 }}>
        {product.name} is recommended for use on the following crops and has been extensively tested for safety and efficacy:
      </p>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14 }}>
        {product.crops.map(crop => (
          <div key={crop} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'rgba(38,74,49,0.07)', border: '1px solid rgba(38,74,49,0.18)', padding: '10px 20px', borderRadius: 999 }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M8 14C5 10 2 8 2 5c0-3 6-4 10-2-1 5-4 7-4 11z" fill="rgba(38,74,49,0.3)" stroke="#264A31" strokeWidth="1.2"/>
              <path d="M8 14c0-3-1-5-2-8" stroke="#264A31" strokeWidth="1" strokeLinecap="round"/>
            </svg>
            <span style={{ color: '#264A31', fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 14 }}>{crop}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function TabUsage({ product }) {
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 20, marginBottom: 28 }}>
        {[['Recommended Dose', product.dose], ['Application Timing', product.timing], ['Pre-Harvest Interval', product.safetyInterval]].map(([k, v]) => (
          <div key={k} style={{ background: '#fff', borderRadius: 12, padding: '20px', border: '1px solid rgba(51,51,51,0.1)' }}>
            <div style={{ color: '#6b7280', fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', marginBottom: 8 }}>{k.toUpperCase()}</div>
            <div style={{ color: '#333333', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 15 }}>{v}</div>
          </div>
        ))}
      </div>
      {/* Safety warning */}
      <div style={{ background: 'rgba(242,125,22,0.08)', border: '1px solid rgba(242,125,22,0.3)', borderRadius: 12, padding: '20px 24px', display: 'flex', gap: 16 }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
          <path d="M12 2L2 20h20L12 2z" stroke="#F27D16" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
          <path d="M12 9v5M12 17h.01" stroke="#F27D16" strokeWidth="1.8" strokeLinecap="round"/>
        </svg>
        <div>
          <div style={{ color: '#F27D16', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 14, marginBottom: 6 }}>Safety Precautions</div>
          <ul style={{ color: '#6b7280', fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.8, margin: 0, paddingLeft: 18 }}>
            <li>Wear protective gloves, mask, and goggles during application</li>
            <li>Avoid spraying during high wind or rain</li>
            <li>Observe the pre-harvest interval strictly</li>
            <li>Keep out of reach of children and animals</li>
            <li>Store in a cool, dry place away from food and feed</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

/* ── MAIN PAGE ── */
function ProductDetailPage() {
  const { slug } = useParams();
  const [activeTab, setActiveTab] = useState('overview');
  const product = window.PRODUCTS.find(p => p.slug === slug);

  if (!product) return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: '#F7F5F0' }}>
      <h2 style={{ color: '#333333', fontFamily: 'Montserrat, sans-serif', fontWeight: 800 }}>Product not found</h2>
      <Link to="/products" style={{ color: '#264A31', fontFamily: 'Inter, sans-serif', fontWeight: 600, textDecoration: 'none', marginTop: 16 }}>← Back to Products</Link>
    </div>
  );

  const tabs = [
    { id: 'overview', label: 'Overview' },
    { id: 'benefits', label: 'Benefits' },
    { id: 'crops', label: 'Target Crops' },
    { id: 'usage', label: 'Usage Guide' },
  ];

  return (
    <div style={{ background: '#F5FAF6', minHeight: '100vh' }}>
      {/* Top hero split */}
      <div style={{ background: '#F5FAF6', padding: '100px 2rem 60px', position: 'relative', overflow: 'hidden' }}>
        <window.MolecularCanvas style={{ opacity: 0.3 }} />
        <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 2 }}>
          {/* Breadcrumb */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 32 }}>
            <Link to="/" style={{ color: 'rgba(51,51,51,0.4)', fontFamily: 'Inter, sans-serif', fontSize: 13, textDecoration: 'none' }}>Home</Link>
            <span style={{ color: 'rgba(51,51,51,0.25)' }}>›</span>
            <Link to="/products" style={{ color: 'rgba(51,51,51,0.4)', fontFamily: 'Inter, sans-serif', fontSize: 13, textDecoration: 'none' }}>Products</Link>
            <span style={{ color: 'rgba(51,51,51,0.25)' }}>›</span>
            <span style={{ color: 'rgba(51,51,51,0.75)', fontFamily: 'Inter, sans-serif', fontSize: 13 }}>{product.name}</span>
          </div>

          <div className="cv-split-45-55" style={{ display: 'grid', gridTemplateColumns: '45% 55%', gap: 48, alignItems: 'center' }}>
            {/* Left */}
            <div>
              <span style={{ display: 'inline-block', background: product.color, color: '#fff', padding: '5px 14px', borderRadius: 999, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 11, letterSpacing: '0.14em', marginBottom: 20 }}>
                {product.category.toUpperCase()}
              </span>
              <h1 style={{ color: '#333333', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(2.4rem,5vw,3.8rem)', margin: '0 0 8px', lineHeight: 1 }}>{product.name}</h1>
              <p style={{ color: 'rgba(51,51,51,0.65)', fontFamily: 'Inter, sans-serif', fontStyle: 'italic', fontSize: 18, margin: '0 0 24px' }}>{product.tagline}</p>
              {/* Active ingredients code block */}
              <div style={{ background: 'rgba(51,51,51,0.05)', border: '1px solid rgba(38,74,49,0.25)', borderRadius: 8, padding: '14px 18px', marginBottom: 24 }}>
                <div style={{ color: 'rgba(51,51,51,0.45)', fontFamily: 'monospace', fontSize: 11, marginBottom: 4 }}>// Active Ingredients</div>
                <div style={{ color: '#264A31', fontFamily: 'monospace', fontSize: 14, fontWeight: 600, letterSpacing: '0.02em' }}>{product.activeIngredients}</div>
              </div>
              <p style={{ color: 'rgba(51,51,51,0.7)', fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.75, margin: 0 }}>{product.description}</p>
            </div>

            {/* Right: Bottle */}
            <div style={{ minHeight: 380 }}>
              <ProductBottle product={product} />
            </div>
          </div>
        </div>
      </div>

      {/* Tabs section */}
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 2rem 80px' }}>
        {/* Tab bar */}
        <div style={{ display: 'flex', borderBottom: '1px solid rgba(51,51,51,0.12)', marginBottom: 40, overflowX: 'auto' }}>
          {tabs.map(tab => (
            <button key={tab.id} onClick={() => setActiveTab(tab.id)} style={{
              padding: '16px 24px', background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 14,
              color: activeTab === tab.id ? '#264A31' : '#6b7280',
              borderBottom: `2.5px solid ${activeTab === tab.id ? '#264A31' : 'transparent'}`,
              transition: 'all 0.2s ease', whiteSpace: 'nowrap', marginBottom: -1,
            }}>{tab.label}</button>
          ))}
        </div>

        {/* Tab content */}
        <div style={{ animation: 'fadeIn 0.3s ease' }}>
          {activeTab === 'overview' && <TabOverview product={product} />}
          {activeTab === 'benefits' && <TabBenefits product={product} />}
          {activeTab === 'crops' && <TabCrops product={product} />}
          {activeTab === 'usage' && <TabUsage product={product} />}
        </div>
      </div>

      {/* Bottom CTA */}
      <div style={{ background: '#264A31', padding: '56px 2rem' }}>
        <div style={{ maxWidth: 700, margin: '0 auto', textAlign: 'center' }}>
          <h3 style={{ color: '#fff', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 26, margin: '0 0 12px' }}>Interested in {product.name}?</h3>
          <p style={{ color: 'rgba(255,255,255,0.75)', fontFamily: 'Inter, sans-serif', fontSize: 15, margin: '0 0 28px' }}>Contact our team for pricing, availability, and expert application guidance.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Link to="/contact" style={{ background: '#fff', color: '#264A31', padding: '12px 32px', borderRadius: 999, fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, textDecoration: 'none' }}>
              Send Enquiry
            </Link>
            <a href="tel:+918699860146" style={{ color: '#fff', fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 15, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8, border: '2px solid rgba(255,255,255,0.45)', padding: '12px 28px', borderRadius: 999 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.25 9.5a19.79 19.79 0 01-3.07-8.67A2 2 0 012.18 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 9.1a16 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" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              +91 86998 60146
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProductDetailPage });