import React from 'react';
import './SanjayaFreshKeeperBio.css';

export default function SanjayaFreshKeeperBio() {
  const data = [
    {
      property: 'Tensil Strength (MD)',
      unit: 'MPa',
      method: 'ASTM D882',
      VFB001: 41,
      VFB002: 38,
      VFB003: 43,
    },
    {
      property: 'Tensil Strength (TD)',
      unit: 'MPa',
      method: 'ASTM D882',
      VFB001: 42,
      VFB002: 33,
      VFB003: 32,
    },
    {
      property: 'Elongation (MD)',
      unit: '%',
      method: 'ASTM D882',
      VFB001: 584,
      VFB002: 209,
      VFB003: 103,
    },
    {
      property: 'Elongation (TD)',
      unit: '%',
      method: 'ASTM D882',
      VFB001: 667,
      VFB002: 481,
      VFB003: 495,
    },
    {
      property: 'Dart Impact',
      unit: 'gm',
      method: 'ASTM D1709',
      VFB001: 364,
      VFB002: 340,
      VFB003: 293,
    },
    {
      property: 'Elemendorf Tear (MD)',
      unit: 'gf',
      method: 'ASTM D1922',
      VFB001: 76,
      VFB002: 25,
      VFB003: 5,
    },
    {
      property: 'Elemendorf Tear (TD)',
      unit: 'gf',
      method: 'ASTM D1922',
      VFB001: 169,
      VFB002: 50,
      VFB003: 51,
    },
  ];
  return (
    <section className="p-6 bg-white shadow-md rounded-2xl max-w-5xl mx-auto flex flex-col md:flex-row items-center gap-6">
      {/* Left Side Text */}
      <div className="md:w-1/2">
        <h2 className="text-2xl font-bold text-green-700 mb-4 text-center">
          SUSTAINABLE PACKAGING FOR GRAPES
        </h2>

        <p className="text-lg text-gray-700 text-center mb-4">
          A COMPARISON OF{' '}
          <span className="font-semibold">BIODEGRADABLE POUCHES</span> VS.{' '}
          <span className="font-semibold">PAPER POUCHES</span>
        </p>
      </div>

      {/* Left: Text */}
      <div style={{ margin: '50px 20px' }}>
        <h1
          style={{
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#2F855A',
            marginBottom: '10px',
          }}
        >
          Why Sustainable Packaging Matters?
        </h1>
        <p className="text-gray-700" style={{ lineHeight: '1.9' }}>
          Sustainable packaging plays a crucial role in minimizing <br />
          environmental impact while ensuring the safety and freshness of food{' '}
          <br />
          products. By adopting eco-friendly solutions, <br />
          we can address growing consumer demand for greener alternatives and
          reduce waste effectively.
        </p>

        <img
          src="/images/logo.png"
          alt="Sustainable Packaging Grapes"
          style={{
            width: '150px',
            height: '150px',
            borderRadius: '16px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
          }}
        />
      </div>

      {/* Image Section */}
      <div style={{ marginLeft: '630px', marginTop: '-400px' }}>
        <img
          src="/images/home/image.png"
          alt="Sustainable Packaging Grapes"
          style={{
            width: '700px',
            height: '400px',
            borderRadius: '16px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
          }}
        />
      </div>

      {/* Extra Large Images */}
      <img
        src="/images/h1.png"
        alt="Sustainable Packaging Grapes"
        style={{
          width: '1320px',
          height: '800px',
          borderRadius: '16px',
          marginLeft: '20px',
          marginTop: '100px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        }}
      />
      <img
        src="/images/h2.png"
        alt="Sustainable Packaging Grapes"
        style={{
          width: '1320px',
          height: '800px',
          borderRadius: '16px',
          marginLeft: '20px',
          marginTop: '100px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        }}
      />
      <div style={styles.card}>
        {/* Images in one row */}
        <div style={styles.imageRow}>
          <img src="/images/g1.png" alt="Green Grapes" style={styles.image} />
          <img src="/images/g2.png" alt="Red Grapes" style={styles.image} />
          <img src="/images/g3.png" alt="Green Grapes 2" style={styles.image} />
        </div>

        {/* Green Box Section */}
        <div style={styles.greenBox}>
          <h2 style={styles.title}>INTRODUCING</h2>
          <p style={styles.subtitle}>SANJAYA AGRI FRESH KEEPER - BIO</p>
        </div>
      </div>
      <img
        src="/images/k1.png"
        alt="Sustainable Packaging Grapes"
        style={{
          width: '1320px',
          height: '800px',
          borderRadius: '16px',
          marginLeft: '20px',
          marginTop: '100px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        }}
      />
      <p
        style={{
          marginTop: '250px',
          marginLeft: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
        }}
      >
        Breathability Properties <br />
        For Increasing Shelf Life <br />
        Of Grapes
      </p>
      <img
        src="/images/y1.png"
        alt="Sustainable Packaging Grapes"
        style={{
          marginLeft: '520px',
          marginTop: '-250px',
          width: '820px',
          height: '600px',
          borderRadius: '16px',
          marginBottom: '40px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        }}
      />
      <div style={styles.container}>
        <table style={styles.table}>
          <thead style={styles.thead}>
            <tr>
              <th style={styles.th}>Property</th>
              <th style={styles.th}>Unit</th>
              <th style={styles.th}>Test Method</th>
              <th style={styles.th}>VFB001*</th>
              <th style={styles.th}>VFB002*</th>
              <th style={styles.th}>VFB003*</th>
            </tr>
          </thead>
          <tbody>
            {data.map((row, idx) => (
              <tr key={idx} style={idx % 2 === 0 ? styles.rowEven : styles.row}>
                <td style={styles.td}>{row.property}</td>
                <td style={styles.td}>{row.unit}</td>
                <td style={styles.td}>{row.method}</td>
                <td style={styles.td}>{row.VFB001}</td>
                <td style={styles.td}>{row.VFB002}</td>
                <td style={styles.td}>{row.VFB003}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <p style={styles.note}>
          Average properties of freshly blown films 0.61-1 mil thickness
        </p>
      </div>
      <img
        src="/images/z1.png"
        alt="Sustainable Packaging Grapes"
        style={{
          width: '1320px',
          height: '500px',
          borderRadius: '16px',
          marginLeft: '10px',
          marginTop: '100px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        }}
      />
      <div
        style={{
          background: 'linear-gradient(90deg, #207639 0%, #15733a 100%)',
          color: '#fff',
          fontWeight: 'bold',
          fontSize: '2rem',
          textAlign: 'center',
          padding: '40px 0',
          borderRadius: '6px',
          marginTop: '50px',
          width: '1310px',
          marginLeft: '20px',
        }}
      >
        CHOOSE SUSTAINABLE, DURABLE, AND EFFECTIVE PACKAGING FOR A GREENER
        FUTURE!
      </div>
    </section>
  );
}

const styles = {
  card: {
    border: '2px solid #2f855a',
    borderRadius: '8px',
    padding: '10px',

    marginTop: '50px',
    marginBottom: '50px',
    marginLeft: '20px',
    marginRight: '10px',
    textAlign: 'center',
    width: '102%',
    height: '500px',
  },
  imageRow: {
    display: 'flex',
    justifyContent: 'center',
    gap: '25px',
    marginBottom: '50px',
  },
  image: {
    width: '400px',
    height: '300px',
    objectFit: 'cover',
    borderRadius: '6px',
  },
  greenBox: {
    background: 'linear-gradient(to right, #2f855a, #38a169)',
    color: 'white',
    padding: '20px',
    borderRadius: '6px',
  },
  title: {
    fontSize: '22px',
    fontWeight: 'bold',
    margin: '0 0 10px',
  },
  subtitle: {
    fontSize: '16px',
    margin: 0,
  },
  table: {
    width: '103%',
    borderCollapse: 'collapse',
    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
    borderRadius: '12px',
    overflow: 'hidden',
  },
  thead: {
    background: '#2f855a',
    color: '#fff',
    textAlign: 'center',
  },
  th: {
    padding: '12px',
    fontSize: '14px',
    textTransform: 'uppercase',
    letterSpacing: '0.5px',
  },
  td: {
    padding: '12px',
    textAlign: 'center',
    borderBottom: '1px solid #ddd',
  },
  rowEven: {
    background: '#f2f6f3',
    cursor: 'pointer',
    transition: 'background 0.3s',
  },
  row: {
    background: '#ffffff',
    cursor: 'pointer',
    transition: 'background 0.3s',
  },
  note: {
    marginTop: '10px',
    fontSize: '14px',
    textAlign: 'center',
    color: '#555',
  },
};
