web/src/pages/PackagingDesigner.js

import React, { useState } from 'react';

function PackagingDesigner() {
  const [productInfo, setProductInfo] = useState({
    productType: '',
    dimensions: { length: '', width: '', height: '' },
    weight: '',
    fragility: '',
    shippingDistance: '',
    targetMarket: ''
  });
  const [designResults, setDesignResults] = useState(null);
  const [isAnalyzing, setIsAnalyzing] = useState(false);

  const analyzePackaging = async () => {
    setIsAnalyzing(true);
    
    // Simulate AI processing
    await new Promise(resolve => setTimeout(resolve, 2500));
    
    // Generate AI-powered packaging recommendations
    const results = {
      recommendedMaterials: [
        {
          name: 'Mushroom Packaging (Mycelium)',
          sustainability: 95,
          cost: 'Medium',
          protection: 'High',
          biodegradable: true,
          compostable: true,
          description: 'Grown from agricultural waste and mushroom roots, fully biodegradable in 30 days',
          co2Impact: '-2.3 kg CO₂ vs plastic',
          applications: ['Electronics', 'Fragile items', 'Cosmetics']
        },
        {
          name: 'Seaweed-Based Film',
          sustainability: 92,
          cost: 'Medium-High',
          protection: 'Medium',
          biodegradable: true,
          compostable: true,
          description: 'Made from abundant seaweed, dissolves in water, edible and non-toxic',
          co2Impact: '-1.8 kg CO₂ vs plastic',
          applications: ['Food packaging', 'Small items', 'Sachets']
        },
        {
          name: 'Recycled Cardboard (FSC)',
          sustainability: 78,
          cost: 'Low',
          protection: 'Medium',
          biodegradable: true,
          compostable: true,
          description: 'Forest Stewardship Council certified, 90% recycled content',
          co2Impact: '-0.9 kg CO₂ vs virgin cardboard',
          applications: ['Books', 'Clothing', 'General shipping']
        }
      ],
      designOptimizations: [
        {
          optimization: 'Right-Size Packaging',
          impact: '23% material reduction',
          description: 'AI-calculated optimal dimensions reduce waste and shipping costs',
          implementation: 'Custom box sizes: 18cm × 12cm × 8cm',
          savings: '$0.85 per package'
        },
        {
          optimization: 'Honeycomb Structure',
          impact: '40% weight reduction',
          description: 'Biomimetic internal structure provides strength with less material',
          implementation: 'Hexagonal void pattern in protective layers',
          savings: '$0.45 per package'
        },
        {
          optimization: 'Modular Design',
          impact: '60% assembly time reduction',
          description: 'Interlocking components eliminate tape and adhesives',
          implementation: 'Origami-inspired folding mechanism',
          savings: '$0.30 per package'
        }
      ],
      environmentalImpact: {
        co2Reduction: '4.2 kg per 100 packages',
        wasteReduction: '78% vs traditional packaging',
        waterSavings: '340L per 100 packages',
        energySavings: '45 kWh per 100 packages'
      },
      costAnalysis: {
        materialCost: '$2.15 per package',
        traditionalCost: '$1.85 per package',
        breakEvenVolume: '5,000 units',
        longTermSavings: '$0.65 per package at scale'
      },
      certifications: [
        'FSC Certified',
        'Cradle to Cradle',
        'ASTM D6400 Compostable',
        'BPI Certified',
        'OK Compost HOME'
      ]
    };
    
    setDesignResults(results);
    setIsAnalyzing(false);
  };

  const getSustainabilityColor = (score) => {
    if (score >= 90) return '#4CAF50';
    if (score >= 75) return '#8BC34A';
    if (score >= 60) return '#FF9800';
    return '#f44336';
  };

  return (
    <div className="container">

      <div style={{ textAlign: 'center', marginBottom: '40px' }}>

        <h2 style={{ fontSize: '3.5rem', color: '#2E7D32', marginBottom: '10px' }}>

          📦 AI Sustainable Packaging Designer

        </h2>

        <p style={{ fontSize: '1.3rem', color: '#666', marginBottom: '15px' }}>

          Design eco-friendly packaging that protects products and the planet

        </p>

        <div style={{

          background: 'linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%)',

          color: 'white',

          padding: '15px 30px',

          borderRadius: '25px',

          display: 'inline-block',

          fontSize: '1rem',

          fontWeight: 'bold'

        }}>

          🌱 Biomaterial Selection • 🔬 AI Optimization • 📊 Impact Analysis

        </div>

      </div>



      {/* Problem Statement */}

      <div className="card" style={{

        marginBottom: '30px',

        background: 'linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%)',

        border: '2px solid #f44336'

      }}>

        <h3 style={{ color: '#d32f2f', marginBottom: '15px' }}>🚨 The Packaging Crisis</h3>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }}>

          <div style={{ textAlign: 'center' }}>

            <div style={{ fontSize: '2.5rem', color: '#f44336', marginBottom: '10px' }}>165B</div>

            <div style={{ fontWeight: 'bold' }}>Packages Shipped Annually</div>

          </div>

          <div style={{ textAlign: 'center' }}>

            <div style={{ fontSize: '2.5rem', color: '#f44336', marginBottom: '10px' }}>30%</div>

            <div style={{ fontWeight: 'bold' }}>Packaging Waste</div>

          </div>

          <div style={{ textAlign: 'center' }}>

            <div style={{ fontSize: '2.5rem', color: '#f44336', marginBottom: '10px' }}>400</div>

            <div style={{ fontWeight: 'bold' }}>Years to Decompose</div>

          </div>

        </div>

      </div>



      {/* Product Information Form */}

      <div className="card" style={{ marginBottom: '30px' }}>

        <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>📋 Product Information</h3>

        

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '20px' }}>

          <div>

            <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Product Type:</label>

            <select

              value={productInfo.productType}

              onChange={(e) => setProductInfo({...productInfo, productType: e.target.value})}

              style={{ width: '100%', padding: '12px', borderRadius: '8px', border: '2px solid #4CAF50' }}

            >

              <option value="">Select product type...</option>

              <option value="Electronics">Electronics</option>

              <option value="Cosmetics">Cosmetics</option>

              <option value="Food">Food & Beverages</option>

              <option value="Clothing">Clothing & Textiles</option>

              <option value="Books">Books & Media</option>

              <option value="Fragile">Fragile Items</option>

              <option value="Chemicals">Chemicals & Liquids</option>

            </select>

          </div>

          

          <div>

            <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Weight (kg):</label>

            <input

              type="number"

              value={productInfo.weight}

              onChange={(e) => setProductInfo({...productInfo, weight: e.target.value})}

              placeholder="Product weight"

              style={{ width: '100%', padding: '12px', borderRadius: '8px', border: '2px solid #4CAF50' }}

            />

          </div>

          

          <div>

            <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Fragility Level:</label>

            <select

              value={productInfo.fragility}

              onChange={(e) => setProductInfo({...productInfo, fragility: e.target.value})}

              style={{ width: '100%', padding: '12px', borderRadius: '8px', border: '2px solid #4CAF50' }}

            >

              <option value="">Select fragility...</option>

              <option value="Low">Low (Books, Clothing)</option>

              <option value="Medium">Medium (Electronics)</option>

              <option value="High">High (Glass, Ceramics)</option>

              <option value="Extreme">Extreme (Scientific Equipment)</option>

            </select>

          </div>

          

          <div>

            <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Shipping Distance:</label>

            <select

              value={productInfo.shippingDistance}

              onChange={(e) => setProductInfo({...productInfo, shippingDistance: e.target.value})}

              style={{ width: '100%', padding: '12px', borderRadius: '8px', border: '2px solid #4CAF50' }}

            >

              <option value="">Select distance...</option>

              <option value="Local">Local (&lt; 100 miles)</option>

              <option value="Regional">Regional (100-500 miles)</option>

              <option value="National">National (500-2000 miles)</option>

              <option value="International">International (&gt; 2000 miles)</option>

            </select>

          </div>

        </div>



        {/* Dimensions */}

        <div style={{ marginTop: '20px' }}>

          <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Product Dimensions (cm):</label>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '15px' }}>

            <input

              type="number"

              value={productInfo.dimensions.length}

              onChange={(e) => setProductInfo({

                ...productInfo, 

                dimensions: {...productInfo.dimensions, length: e.target.value}

              })}

              placeholder="Length"

              style={{ padding: '12px', borderRadius: '8px', border: '2px solid #4CAF50' }}

            />

            <input

              type="number"

              value={productInfo.dimensions.width}

              onChange={(e) => setProductInfo({

                ...productInfo, 

                dimensions: {...productInfo.dimensions, width: e.target.value}

              })}

              placeholder="Width"

              style={{ padding: '12px', borderRadius: '8px', border: '2px solid #4CAF50' }}

            />

            <input

              type="number"

              value={productInfo.dimensions.height}

              onChange={(e) => setProductInfo({

                ...productInfo, 

                dimensions: {...productInfo.dimensions, height: e.target.value}

              })}

              placeholder="Height"

              style={{ padding: '12px', borderRadius: '8px', border: '2px solid #4CAF50' }}

            />

          </div>

        </div>

        

        <div style={{ textAlign: 'center', marginTop: '30px' }}>

          <button

            onClick={analyzePackaging}

            disabled={isAnalyzing || !productInfo.productType || !productInfo.weight}

            className="btn btn-primary"

            style={{

              fontSize: '1.2rem',

              padding: '15px 40px',

              background: isAnalyzing ? '#ccc' : 'linear-gradient(135deg, #FF9800 0%, #F57C00 100%)',

              border: 'none',

              borderRadius: '25px',

              color: 'white'

            }}

          >

            {isAnalyzing ? '🤖 AI Design in Progress...' : '🎨 Design Sustainable Packaging'}

          </button>

        </div>

      </div>



      {/* Analysis Results */}

      {designResults && (

        <>

          {/* Recommended Materials */}

          <div className="card" style={{ marginBottom: '30px' }}>

            <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>🌱 AI-Recommended Materials</h3>

            

            <div style={{ display: 'grid', gap: '20px' }}>

              {designResults.recommendedMaterials.map((material, index) => (

                <div key={index} style={{

                  background: '#f9f9f9',

                  padding: '25px',

                  borderRadius: '12px',

                  border: `3px solid ${getSustainabilityColor(material.sustainability)}`

                }}>

                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '15px' }}>

                    <div>

                      <h4 style={{ margin: 0, color: '#2E7D32', marginBottom: '5px' }}>{material.name}</h4>

                      <p style={{ margin: 0, color: '#666', fontSize: '1rem' }}>{material.description}</p>

                    </div>

                    <div style={{ textAlign: 'right' }}>

                      <div style={{

                        background: getSustainabilityColor(material.sustainability),

                        color: 'white',

                        padding: '8px 16px',

                        borderRadius: '20px',

                        fontSize: '0.9rem',

                        fontWeight: 'bold',

                        marginBottom: '5px'

                      }}>

                        {material.sustainability}% Sustainable

                      </div>

                      <div style={{ fontSize: '0.8rem', color: '#666' }}>

                        Cost: {material.cost}

                      </div>

                    </div>

                  </div>

                  

                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '15px', marginBottom: '15px' }}>

                    <div style={{ background: '#e8f5e8', padding: '12px', borderRadius: '8px', textAlign: 'center' }}>

                      <div style={{ fontWeight: 'bold', color: '#2E7D32', marginBottom: '5px' }}>Protection</div>

                      <div style={{ fontSize: '0.9rem' }}>{material.protection}</div>

                    </div>

                    <div style={{ background: '#e3f2fd', padding: '12px', borderRadius: '8px', textAlign: 'center' }}>

                      <div style={{ fontWeight: 'bold', color: '#1976d2', marginBottom: '5px' }}>CO₂ Impact</div>

                      <div style={{ fontSize: '0.9rem', color: '#4CAF50' }}>{material.co2Impact}</div>

                    </div>

                    <div style={{ background: '#fff3e0', padding: '12px', borderRadius: '8px', textAlign: 'center' }}>

                      <div style={{ fontWeight: 'bold', color: '#F57C00', marginBottom: '5px' }}>Biodegradable</div>

                      <div style={{ fontSize: '0.9rem' }}>{material.biodegradable ? '✅ Yes' : '❌ No'}</div>

                    </div>

                  </div>

                  

                  <div style={{ marginBottom: '15px' }}>

                    <div style={{ fontWeight: 'bold', marginBottom: '8px', color: '#2E7D32' }}>Best Applications:</div>

                    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>

                      {material.applications.map((app, appIndex) => (

                        <span key={appIndex} style={{

                          background: '#4CAF50',

                          color: 'white',

                          padding: '4px 12px',

                          borderRadius: '12px',

                          fontSize: '0.8rem'

                        }}>

                          {app}

                        </span>

                      ))}

                    </div>

                  </div>

                </div>

              ))}

            </div>

          </div>



          {/* Design Optimizations */}

          <div className="card" style={{ marginBottom: '30px' }}>

            <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>⚡ AI Design Optimizations</h3>

            

            <div style={{ display: 'grid', gap: '20px' }}>

              {designResults.designOptimizations.map((opt, index) => (

                <div key={index} style={{

                  background: '#f9f9f9',

                  padding: '20px',

                  borderRadius: '12px',

                  border: '1px solid #ddd'

                }}>

                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>

                    <h4 style={{ margin: 0, color: '#2E7D32' }}>{opt.optimization}</h4>

                    <div style={{

                      background: '#4CAF50',

                      color: 'white',

                      padding: '8px 16px',

                      borderRadius: '20px',

                      fontSize: '0.9rem',

                      fontWeight: 'bold'

                    }}>

                      {opt.impact}

                    </div>

                  </div>

                  

                  <p style={{ color: '#666', marginBottom: '15px' }}>{opt.description}</p>

                  

                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>

                    <div style={{ background: '#e8f5e8', padding: '15px', borderRadius: '8px' }}>

                      <div style={{ fontWeight: 'bold', color: '#2E7D32', marginBottom: '5px' }}>Implementation</div>

                      <div style={{ fontSize: '0.9rem' }}>{opt.implementation}</div>

                    </div>

                    <div style={{ background: '#e3f2fd', padding: '15px', borderRadius: '8px' }}>

                      <div style={{ fontWeight: 'bold', color: '#1976d2', marginBottom: '5px' }}>Cost Savings</div>

                      <div style={{ fontSize: '0.9rem', color: '#4CAF50' }}>{opt.savings}</div>

                    </div>

                  </div>

                </div>

              ))}

            </div>

          </div>



          {/* Environmental Impact */}

          <div className="card" style={{ marginBottom: '30px' }}>

            <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>🌍 Environmental Impact Analysis</h3>

            

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }}>

              <div style={{ textAlign: 'center', padding: '20px', background: '#e8f5e8', borderRadius: '12px' }}>

                <div style={{ fontSize: '2.5rem', color: '#4CAF50', marginBottom: '10px' }}>

                  {designResults.environmentalImpact.co2Reduction}

                </div>

                <div style={{ fontWeight: 'bold' }}>CO₂ Reduction</div>

              </div>

              <div style={{ textAlign: 'center', padding: '20px', background: '#e3f2fd', borderRadius: '12px' }}>

                <div style={{ fontSize: '2.5rem', color: '#2196F3', marginBottom: '10px' }}>

                  {designResults.environmentalImpact.wasteReduction}

                </div>

                <div style={{ fontWeight: 'bold' }}>Waste Reduction</div>

              </div>

              <div style={{ textAlign: 'center', padding: '20px', background: '#e1f5fe', borderRadius: '12px' }}>

                <div style={{ fontSize: '2.5rem', color: '#00BCD4', marginBottom: '10px' }}>

                  {designResults.environmentalImpact.waterSavings}

                </div>

                <div style={{ fontWeight: 'bold' }}>Water Savings</div>

              </div>

              <div style={{ textAlign: 'center', padding: '20px', background: '#fff3e0', borderRadius: '12px' }}>

                <div style={{ fontSize: '2.5rem', color: '#FF9800', marginBottom: '10px' }}>

                  {designResults.environmentalImpact.energySavings}

                </div>

                <div style={{ fontWeight: 'bold' }}>Energy Savings</div>

              </div>

            </div>

          </div>



          {/* Cost Analysis */}

          <div className="card" style={{ marginBottom: '30px' }}>

            <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>💰 Cost Analysis</h3>

            

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }}>

              <div style={{ textAlign: 'center', padding: '20px', background: '#fff3e0', borderRadius: '12px' }}>

                <div style={{ fontSize: '2rem', color: '#FF9800', marginBottom: '10px' }}>

                  {designResults.costAnalysis.materialCost}

                </div>

                <div style={{ fontWeight: 'bold' }}>Sustainable Cost</div>

              </div>

              <div style={{ textAlign: 'center', padding: '20px', background: '#ffebee', borderRadius: '12px' }}>

                <div style={{ fontSize: '2rem', color: '#f44336', marginBottom: '10px' }}>

                  {designResults.costAnalysis.traditionalCost}

                </div>

                <div style={{ fontWeight: 'bold' }}>Traditional Cost</div>

              </div>

              <div style={{ textAlign: 'center', padding: '20px', background: '#e8f5e8', borderRadius: '12px' }}>

                <div style={{ fontSize: '2rem', color: '#4CAF50', marginBottom: '10px' }}>

                  {designResults.costAnalysis.breakEvenVolume}

                </div>

                <div style={{ fontWeight: 'bold' }}>Break-Even Volume</div>

              </div>

              <div style={{ textAlign: 'center', padding: '20px', background: '#e3f2fd', borderRadius: '12px' }}>

                <div style={{ fontSize: '2rem', color: '#2196F3', marginBottom: '10px' }}>

                  {designResults.costAnalysis.longTermSavings}

                </div>

                <div style={{ fontWeight: 'bold' }}>Long-term Savings</div>

              </div>

            </div>

          </div>



          {/* Certifications */}

          <div className="card" style={{ marginBottom: '30px' }}>

            <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>🏆 Available Certifications</h3>

            

            <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap', justifyContent: 'center' }}>

              {designResults.certifications.map((cert, index) => (

                <div key={index} style={{

                  background: '#4CAF50',

                  color: 'white',

                  padding: '12px 24px',

                  borderRadius: '25px',

                  fontSize: '1rem',

                  fontWeight: 'bold',

                  display: 'flex',

                  alignItems: 'center',

                  gap: '8px'

                }}>

                  ✅ {cert}

                </div>

              ))}

            </div>

          </div>

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

export default PackagingDesigner;