import React, { useState } from 'react';
import Carousel from 'react-bootstrap/Carousel';
import '../styles/Herosection.css'; // Make sure the filename matches exactly
import ResultSection from './ResultSection.jsx';

export default function HeroSection() {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleSelect = (selectedIndex) => {
    setActiveIndex(selectedIndex);
  };

  const handleNext = () => {
    setActiveIndex((prev) => (prev + 1) % 3);
  };

  return (
    <section className="hero">
      <div className="hero-content-wrapper">
        <div style={{ height: '85vh', width: '100%' }}>
          <Carousel
            indicators={true}
            controls={true}
            interval={4000}
            fade
            activeIndex={activeIndex}
            onSelect={handleSelect}
          >
            <Carousel.Item>
              <img
                className="d-block w-100"
                src="/images/description-img.jpg"
                alt="Fresh farms"
                style={{
                  height: '85vh',
                  objectFit: 'cover',
                  cursor: 'pointer',
                }}
                onClick={handleNext}
              />
              <Carousel.Caption>
                <h1 style={{ fontSize: 36 }}>
                  Freshness Quality{' '}
                  <span style={{ color: 'var(--brand)' }}>Sanjaya</span>
                </h1>
              </Carousel.Caption>
            </Carousel.Item>

            <Carousel.Item>
              <img
                className="d-block w-100"
                src="/images/farm1.jpg"
                alt="Sustainable sourcing"
                style={{
                  height: '85vh',
                  objectFit: 'cover',
                  cursor: 'pointer',
                }}
                onClick={handleNext}
              />
              <Carousel.Caption>
                <h3>Handpicked Quality</h3>
                <p>From field to you, with care at every step.</p>
              </Carousel.Caption>
            </Carousel.Item>

            <Carousel.Item>
              <img
                className="d-block w-100"
                src="/images/farm2.jpg"
                alt="Trusted exports"
                style={{
                  height: '85vh',
                  objectFit: 'cover',
                  cursor: 'pointer',
                }}
                onClick={handleNext}
              />
              <Carousel.Caption>
                <h3>Global Standards</h3>
                <p>Committed to freshness, consistency, and reliability.</p>
              </Carousel.Caption>
            </Carousel.Item>
          </Carousel>

          {/* Image with overlay text on left side */}
          <div className="image-container">
            <img
              src="/images/home/a.png"
              alt="Trusted exports"
              className="overlay-image"
            />
            <div className="overlay-text">
              PERFORMANCE
              <br />
              EVALUATION REPORT:
              <br />
              FRUGENIX FRESH SEAL
              <br />
              LINER BAGS IN FRUITS
              <br />
              EXPORTS
            </div>
          </div>
          <div>
            <img
              src="/images/J2.png"
              alt="Trusted exports"
              style={{
                maxWidth: '1300px',
                width: '100%',
                marginLeft: '1px',
                marginTop: '50px',
                marginBottom: '50px',
              }}
            />
          </div>
          <div>
            <img
              src="/images/k2.png"
              alt="Trusted exports"
              style={{
                maxWidth: '1400px',
                width: '109%',
                marginLeft: '-30px',

                marginBottom: '50px',
              }}
            />
          </div>
          <div>
            <img
              src="/images/p2.png"
              alt="Trusted exports"
              style={{
                width: '1850px',
                height: '700px',
                marginLeft: '20px',
              }}
            />
          </div>

          <img
            src="/images/j5.png"
            alt="Trusted exports"
            style={{
              width: '14550px',
              height: '650px',
              marginLeft: '20px',
              marginTop: '150px',
              marginBottom: '50px',
            }}
          />
          <img
            src="/images/b5.png"
            alt="Trusted exports"
            style={{
              width: '14550px',
              height: '650px',
              marginLeft: '20px',
              marginTop: '100px',
              marginBottom: '50px',
            }}
          />

          <div style={{ marginTop: '50px' }}>
            <ResultSection
              trialLocation="INDIA"
              trialType="INHOUSE INSPECTION"
              startDate="26/12/2024"
              endDate="24/02/2025"
              totalDuration="60 DAYS"
              variety="THOMPSON"
              packaging="WITH SANJAYA FRESH SEAL LINER BAGS"
              imgSrc="/images/home/o.png"
              imgAlt="Results Sanjaya Fresh Seal"
            />
            <ResultSection
              trialLocation="INDIA"
              trialType="INHOUSE INSPECTION"
              startDate="26/12/2024"
              endDate="24/02/2025"
              totalDuration="60 DAYS"
              variety="THOMPSON"
              packaging="WITH REGULAR PACKAGING"
              imgSrc="/images/home/p.png"
              imgAlt="Results with Regular Packaging"
            />
            <ResultSection
              trialLocation="INDIA"
              trialType="INHOUSE INSPECTION"
              startDate="26/12/2024"
              endDate="24/02/2025"
              totalDuration="60 DAYS"
              variety="AARA"
              packaging="WITH SANJAYA FRESH SEAL LINER BAGS"
              imgSrc="/images/home/q.png"
              imgAlt="Results Sanjaya AARA"
            />
            {/* 4 */}
            <ResultSection
              trialLocation="INDIA"
              trialType="INHOUSE INSPECTION"
              startDate="26/12/2024"
              endDate="24/02/2025"
              totalDuration="60 DAYS"
              variety="THOMPSON"
              packaging="WITH REGULAR PACKAGING"
              imgSrc="/images/home/r.png"
              imgAlt="Results Regular Packaging Thompson"
            />
            {/* 5 */}
            <ResultSection
              trialLocation="INDIA"
              trialType="INHOUSE INSPECTION"
              startDate="26/12/2024"
              endDate="24/02/2025"
              totalDuration="60 DAYS"
              variety="THOMPSON"
              packaging="WITH SANJAYA FRESH SEAL LINER BAGS"
              imgSrc="/images/home/s.png"
              imgAlt="Results Sanjaya Thompson"
            />
            {/* 6 */}
            <ResultSection
              trialLocation="INDIA"
              trialType="INHOUSE INSPECTION"
              startDate="26/12/2024"
              endDate="24/02/2025"
              totalDuration="60 DAYS"
              variety="THOMPSON"
              packaging="WITH REGULAR PACKAGING"
              imgSrc="/images/home/t.png"
              imgAlt="Results Regular Packaging Thompson"
            />
            {/* 7 */}
            <ResultSection
              trialLocation="INDIA"
              trialType="INHOUSE INSPECTION"
              startDate="16/02/2025"
              endDate="16/04/2025 (CONTINUED)"
              totalDuration="58 DAYS"
              variety="THOMPSON & SHARAD"
              packaging="WITH SANJAYA FRESH SEAL LINER BAGS"
              imgSrc="/images/home/u.png"
              imgAlt="Results Sanjaya Thompson & Sharad"
            />
            {/* 8 */}
            <ResultSection
              trialLocation="INDIA"
              trialType="INHOUSE INSPECTION"
              startDate="16/02/2025"
              endDate="16/04/2025 (CONTINUED)"
              totalDuration="60 DAYS"
              variety="THOMPSON & SHARAD"
              packaging="WITH REGULAR PACKAGING"
              imgSrc="/images/home/v.png"
              imgAlt="Results Regular Packaging Thompson & Sharad"
            />{' '}
          </div>

          <img
            src="/images/ww.png"
            alt="Trusted exports"
            style={{
              width: '1200px',
              height: '550px',
              marginLeft: '100px',
              marginTop: '10px',
              marginBottom: '50px',
            }}
          />

          <img
            src="/images/home/y.png"
            alt="Trusted exports"
            style={{
              width: '1300px',
              height: '350px',
              marginLeft: '1px',
              marginTop: '30px',
              marginBottom: '10px',
            }}
          />
          <img
            src="/images/home/y2.png"
            alt="Trusted exports"
            style={{
              width: '1300px',
              height: '350px',
              marginLeft: '1px',
              marginTop: '30px',
              marginBottom: '10px',
            }}
          />

          <div
            style={{
              display: 'inline-block',
              borderRight: '2px solid blue', // vertical line on right
              paddingRight: '30px', // space between images and line
            }}
          >
            <img
              src="/images/home/y4.png"
              alt="Trusted exports"
              style={{
                width: '600px',
                height: '650px',
                marginLeft: '60px',
                marginTop: '30px',
                marginBottom: '10px',
              }}
            />
          </div>
          <div
            style={{
              display: 'inline-block',
              paddingLeft: '40px', // space between images and line
              verticalAlign: 'top', // align to top of left section
              textAlign: 'left',
              width: '40%', // adjust as needed
              gap: '1px',
              marginTop: '40px',
            }}
          >
            <p>
              <strong>EXPORTER :</strong> INDIA
            </p>
            <p>
              <strong>DESTINATION :</strong> ROTTERDAM EUROPE
            </p>
            <p>
              <strong>PACKED ON :</strong> 23/02/2025
            </p>
            <p>
              <strong>ARRIVAL ON :</strong> 17/04/2025
            </p>
            <p>
              <strong>TOTAL TRANSIT TIME :</strong> 52 DAYS
            </p>
            <p>
              <strong>VARIETY :</strong> THOMPSON SEEDLESS
            </p>

            <h3>General Observations</h3>
            <h4>SANJAYA FRESH SEAL LINER BAGS</h4>
            <ul>
              <li>
                Grapes retained a light golden color, with clearer, greener
                stems
              </li>
              <li>
                Berries were noticeably firmer, plumper, and less shriveled
              </li>
              <li>Reduced discoloration and better berry uniformity</li>
              <li>Significantly lower water loss during shipment</li>
            </ul>
            <h3>Control Fruit</h3>

            <ul>
              <li>Paler, dehydrated berries with more surface wrinkling</li>
              <li>Duller rachis with signs of browning and desiccation</li>
              <li>Soft and inconsistent texture</li>
              <li>More variation in quality both within and across boxes</li>
            </ul>
          </div>

          <img
            src="/images/home/Y5.png"
            alt="Trusted exports"
            style={{
              width: '1150px',
              height: '650px',
              marginLeft: '60px',
              marginTop: '30px',
              marginBottom: '10px',
            }}
          />

          <img
            src="/images/m3.png"
            alt="Trusted exports"
            style={{
              width: '1350px',
              height: '600px',
              marginLeft: '-20px',
              marginTop: '140px',
              marginBottom: '10px',
            }}
          />
          <img
            src="/images/home/z2.png"
            alt="Trusted exports"
            style={{
              width: '1250px',
              height: '550px',
              marginLeft: '20px',
              marginTop: '140px',
              marginBottom: '10px',
            }}
          />
          <img
            src="/images/home/z3.png"
            alt="Trusted exports"
            style={{
              width: '1250px',
              height: '550px',
              marginLeft: '20px',
              marginTop: '140px',
              marginBottom: '10px',
            }}
          />
          <h1
            style={{
              marginLeft: '103px',
              marginTop: '100px',
              fontSize: '28px',
              fontWeight: '700',
              color: 'black',
              marginBottom: '50px',
            }}
          >
            TEST REPORTS OF EXPORTED PALLETS WITH SANJAYA AGRI FRESH KEEPER
            LINER
          </h1>
          <img
            src="/images/home/z4.png"
            alt="Trusted exports"
            style={{
              width: '700px',
              height: '750px',
              marginLeft: '10px',
              marginTop: '10px',
              marginBottom: '10px',
            }}
          />
          <img
            src="/images/home/z5.png"
            alt="Trusted exports"
            style={{
              width: '680px',
              height: '650px',
              marginLeft: '655px',
              marginTop: '-850px',
              marginBottom: '10px',
            }}
          />

          <img
            src="/images/z7.png"
            alt="Trusted exports"
            style={{
              width: '1300px',
              height: '650px',
              marginLeft: '25px',
              marginTop: '90px',
              marginBottom: '50px',
            }}
          />
          <div className="testimonial-section">
            <img
              src="/images/z6.png"
              alt="Trusted exports"
              className="testimonial-img"
            />

            <div className="testimonial-text">
              <p>
                “The condition of the grapes was excellent… <br />
                this shipment stood out in terms of freshness and overall
                quality. We are quite impressed.” <strong>Jack, Europe.</strong>
                &nbsp;
                <a
                  href="https://drive.google.com/file/d/1C3Esi1PifE1JhIhMf1JTiPJ89edu-E3j/view"
                  target="_blank"
                >
                  Watch Video
                </a>
              </p>

              <p>
                “The grapes arrived in very good condition — fresh,
                well-colored, and no signs of fungal issues. Our customers
                appreciated the quality.”
                <strong> Direct Source International.</strong>&nbsp;
                <a
                  href="https://drive.google.com/file/d/13uGGB0o1NnlKuEn_dkb4mMhOEQqn5sAh/view"
                  target="_blank"
                >
                  Watch Video
                </a>
              </p>

              <p>
                “Very useful product for long-distance shipments. Reduced our
                spoilage rate significantly.”
                <strong> Sahyadri Farms Post Harvest Care Ltd.</strong>&nbsp;
                <a
                  href="https://drive.google.com/file/d/13uGGB0o1NnlKuEn_dkb4mMhOEQqn5sAh/view"
                  target="_blank"
                >
                  Watch Video
                </a>
              </p>
            </div>
          </div>

          <img
            src="/images/z7.png"
            alt="Trusted exports"
            style={{
              width: '1400px',
              height: '700px',
              marginLeft: '-20px',
              marginTop: '50px',
              marginBottom: '10px',
            }}
          />
          <img
            src="/images/home/z9.png"
            alt="Trusted exports"
            style={{
              width: '1300px',
              height: '700px',
              marginLeft: '-20px',
              marginTop: '-120px',
              marginBottom: '10px',
            }}
          />
          <img
            src="/images/home/z10.png"
            alt="Trusted exports"
            style={{
              width: '1400px',
              height: '700px',
              marginLeft: '-20px',
              marginTop: '-100px',
              marginBottom: '10px',
            }}
          />
          <img
            src="/images/home/z11.png"
            alt="Trusted exports"
            style={{
              width: '1400px',
              height: '700px',
              marginLeft: '-20px',
              marginTop: '50px',
              marginBottom: '10px',
            }}
          />
          <img
            src="/images/home/z12.png"
            alt="Trusted exports"
            style={{
              width: '1300px',
              height: '650px',
              marginLeft: '-20px',
              marginTop: '100px',
              marginBottom: '10px',
            }}
          />
          <img
            src="/images/home/z13.png"
            alt="Trusted exports"
            style={{
              width: '1300px',
              height: '650px',
              marginLeft: '-20px',
              marginTop: '100px',
              marginBottom: '10px',
            }}
          />
          <img
            src="/images/home/z14.png"
            alt="Trusted exports"
            style={{
              width: '1300px',
              height: '650px',
              marginLeft: '-20px',
              marginTop: '100px',
            }}
          />
        </div>
      </div>
    </section>
  );
}
