import fourImg1 from '../../public/assets/business-units/agricultural/fourImg1.webp'
import fourImg2 from '../../public/assets/business-units/agricultural/fourImg2.webp'
import fourImg3 from '../../public/assets/business-units/agricultural/fourImg3.webp'
import fourImg4 from '../../public/assets/business-units/agricultural/fourImg4.webp'
function CheckIcon() {
  return (
    <svg className="mt-0.5 flex-shrink-0 text-lime-500" width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
    </svg>
  );
}

interface SectionProps {
  badge: string;
  heading: React.ReactNode;
  subheading: string;
  body: React.ReactNode;
  bullets: string[];
  imageSrc: string;
  imageAlt: string;
  insetSrc: string;
  insetAlt: string;
  imageRight?: boolean;
  children?: React.ReactNode;
}

function Section({ 
  badge,
  heading, 
  subheading, 
  body, 
  bullets, 
  imageSrc, 
  imageAlt,
  insetSrc,
  insetAlt,
  imageRight = false,
  children 
}: SectionProps) {
  const imagePanel = (
    <div className={`relative overflow-hidden bg-[#d6ead0] min-h-[440px] lg:min-h-0 ${imageRight ? "order-1 lg:order-2" : ""}`}>
      <div
        className="absolute inset-0 bg-cover bg-center transition-transform duration-700 hover:scale-105"
        style={{ backgroundImage: `url('${imageSrc}')` }}
      />
      <div className="absolute inset-0 bg-lime-500/20" />

      {insetSrc && (
        <div className={`absolute bottom-8 ${imageRight ? "left-8" : "right-8"} w-36 h-36 rounded-2xl overflow-hidden border-4 border-white shadow-xl hidden sm:block`}>
          <div className="w-full h-full bg-cover bg-center" style={{ backgroundImage: `url('${insetSrc}')` }} aria-label={insetAlt} />
        </div>
      )}

      <div className={`absolute top-8 ${imageRight ? "right-8" : "left-8"}`}>
        <span className="inline-block bg-lime-500 text-white text-xs font-semibold tracking-widest uppercase px-4 py-2 rounded-full">
          {badge}
        </span>
      </div>
    </div>
  );

  const contentPanel = (
    <div className={`flex flex-col justify-center px-10 py-16 lg:px-16 lg:py-20 ${imageRight ? "bg-[#f8fbf6] order-2 lg:order-1" : "bg-white"}`}>
      <h2 className="text-[#1a4a2e] text-3xl lg:text-4xl font-bold leading-tight mb-3" style={{ fontFamily: "'Lora', serif" }}>
        {heading}
      </h2>
      <p className="text-lime-500 font-semibold text-base mb-5">{subheading}</p>
      <div className="text-gray-600 text-sm leading-relaxed mb-7 max-w-md">{body}</div>

      {children}

      <ul className="space-y-2 mb-8">
        {bullets.map((text: string, index: number) => (
          <li key={index} className="flex items-start gap-2 text-sm text-gray-700">
            <CheckIcon />
            {text}
          </li>
        ))}
      </ul>

    </div>
  );

  return (
    <section className="grid grid-cols-1 lg:grid-cols-2 min-h-[600px]">
      {imageRight ? (
        <>
          {contentPanel}
          {imagePanel}
        </>
      ) : (
        <>
          {imagePanel}
          {contentPanel}
        </>
      )}
    </section>
  );
}

function AgricultureFourSection() {
  return (
    <div className="min-h-screen bg-white container mx-auto" style={{ fontFamily: "'Inter', sans-serif" }}>
      <Section
        badge="Crop Productivity"
        heading={<>Better Genetics. <span className="text-lime-500">Balanced Nutrition.</span><br />Responsible Protection.</>}
        subheading="Increasing agricultural productivity requires an integrated approach."
        body={
          <p>
            SQ Seed provides quality seed and hybrid varieties supported by field-level guidance. SQ Fertilizer promotes balanced nutrition and improved soil health, while SQ Pesticide provides solutions that help farmers protect crops.
          </p>
        }
        bullets={[
          "Together, these businesses support one objective.",
          "Helping farmers realize more of the productive potential of their land.",
        ]}
        imageSrc={fourImg1.src}
        imageAlt="Combine harvester in a wheat field"
        insetSrc={fourImg1.src}
        insetAlt="Close-up of crop seedlings"
        imageRight={false}
      >
        <div className="grid grid-cols-3 gap-3 mb-7">
          {[
            { icon: "🌱", label: "SQ Seed", sub: "Hybrid varieties" },
            { icon: "🧪", label: "SQ Fertilizer", sub: "Balanced nutrition" },
            { icon: "🛡️", label: "SQ Pesticide", sub: "Crop protection" },
          ].map((item) => (
            <div key={item.label} className="flex flex-col items-center text-center gap-1 p-3 rounded-xl bg-[#f0f7ec] border border-[#c5ddb8]">
              <span className="text-2xl">{item.icon}</span>
              <span className="text-[#1a4a2e] text-xs font-semibold">{item.label}</span>
              <span className="text-gray-500 text-[11px]">{item.sub}</span>
            </div>
          ))}
        </div>
      </Section>

      <div className="w-full h-px bg-[#d5e8cc]" />

      <Section
        badge="Livestock & Aquaculture"
        heading={<>Supporting Bangladesh's <span className="text-lime-500">Protein Economy</span></>}
        subheading="Productive, healthy and professionally managed livestock, poultry and fisheries sectors."
        body={
          <>
            <p className="mb-3">
              As incomes rise and food consumption patterns evolve, Bangladesh requires productive, healthy and professionally managed livestock, poultry and fisheries sectors.
            </p>
            <p>
              The portfolio serves poultry, cattle, fish and shrimp producers, combining nutritional solutions with animal-health support.
            </p>
          </>
        }
        bullets={[
          "Animal feed, veterinary medicines, vaccines and technical knowledge.",
          "Helping farmers improve productivity while supporting demand for safe protein.",
        ]}
        imageSrc={fourImg2.src}
        imageAlt="Farmer walking with cattle"
        insetSrc={fourImg2.src}
        insetAlt="Aerial view of aquaculture pond"
        imageRight={true}
      >
        <div className="grid grid-cols-2 gap-3 mb-7">
          {[
            { icon: "🐔", label: "Poultry", sub: "Nutrition & health" },
            { icon: "🐄", label: "Cattle", sub: "Feed & medicine" },
            { icon: "🐟", label: "Fish", sub: "Aquaculture support" },
            { icon: "🦐", label: "Shrimp", sub: "Productivity focus" },
          ].map((item) => (
            <div key={item.label} className="flex items-center gap-3 p-3 rounded-xl bg-white border border-[#c5ddb8] shadow-sm">
              <span className="text-2xl">{item.icon}</span>
              <div>
                <div className="text-[#1a4a2e] text-xs font-semibold">{item.label}</div>
                <div className="text-gray-500 text-[11px]">{item.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </Section>

      <div className="w-full h-px bg-[#d5e8cc]" />

      <Section
        badge="Farmer Success"
        heading={<>Products Supported <span className="text-lime-500">by Knowledge</span></>}
        subheading="Agriculture is different from most industries."
        body={
          <p>
            A product performs only when it is applied correctly and at the right time. SQ Agriculture's relationship with farmers extends beyond the point of sale through field teams, technical specialists, service centers, dealers and agricultural partners.
          </p>
        }
        bullets={[
          "Our success is ultimately measured by the farmer's success.",
          "End-to-end support: from product selection to animal-health guidance.",
        ]}
        imageSrc={fourImg3.src}
        imageAlt="Agricultural specialist working in a field"
        insetSrc={fourImg3.src}
        insetAlt="Farmer consulting with agronomist"
        imageRight={false}
      >
        <div className="grid grid-cols-2 gap-2 mb-7">
          {[
            "Product selection",
            "Machinery operation & maintenance",
            "Seed and crop guidance",
            "Balanced fertilisation",
            "Responsible crop protection",
            "Poultry & livestock management",
            "Fish and pond management",
            "Animal-health guidance",
          ].map((item) => (
            <div key={item} className="flex items-center gap-2 text-xs text-gray-700 bg-[#f0f7ec] border border-[#c5ddb8] rounded-lg px-3 py-2">
              <span className="w-1.5 h-1.5 rounded-full bg-lime-500 flex-shrink-0" />
              {item}
            </div>
          ))}
        </div>
      </Section>

      <div className="w-full h-px bg-[#d5e8cc]" />

      <Section
        badge="Post-Harvest & Market Access"
        heading={<>Protecting Value <span className="text-lime-500">Beyond the Farm</span></>}
        subheading="Producing more is only part of the agricultural challenge."
        body={
          <>
            <p className="mb-3">
              A significant opportunity lies in preserving more of the value already created by farmers through better harvesting, handling, treatment, grading, packaging and market connectivity.
            </p>
            <p>
              SQ Agriculture's post-harvest platform includes contract fruit and vegetable production, vapour heat treatment and integrated packaging.
            </p>
          </>
        }
        bullets={[
          "VHT: non-chemical phytosanitary treatment meeting international export standards.",
          "To help move Bangladeshi agriculture from production towards higher-value markets.",
        ]}
        imageSrc={fourImg4.src}
        imageAlt="Mango crop ready for export"
        insetSrc={fourImg4.src}
        insetAlt="Modern food processing facility"
        imageRight={true}
      >
        <div className="grid grid-cols-3 gap-3 mb-7">
          {[
            { icon: "🌡️", label: "VHT Treatment", sub: "Phytosanitary" },
            { icon: "📦", label: "Packaging", sub: "Modern sorting" },
            { icon: "🌍", label: "Export Access", sub: "Global markets" },
          ].map((item) => (
            <div key={item.label} className="flex flex-col items-center text-center gap-1 p-3 rounded-xl bg-white border border-[#c5ddb8] shadow-sm">
              <span className="text-2xl">{item.icon}</span>
              <span className="text-[#1a4a2e] text-xs font-semibold">{item.label}</span>
              <span className="text-gray-500 text-[11px]">{item.sub}</span>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
}

export default AgricultureFourSection;