import { motion } from "framer-motion";
import { FaInfoCircle, FaFileAlt, FaExclamationTriangle, FaEdit } from "react-icons/fa";
import styles from '../styles/IntendedUse.module.css';
import React from "react";


export default function IntendedUse() {
  const sections = [
    {
      id: 1,
      title: "Product Use Disclaimer",
      icon: <FaInfoCircle className={styles.sectionIcon} />,
      content: (
        <>
          <p><b>1.1 Intended Purpose:</b> Our liner bags are specifically designed to enhance the shelf life of fresh produce.</p>
          <p><b>1.2 No Guarantee of Shelf Life:</b> While our liner bags are intended to aid in preserving produce, <b>Dattatray Corporation (Brand: Sanjaya)</b> does not guarantee an increase in shelf life under all conditions. Effectiveness depends on factors such as:</p>
          <ul>
            <li>Proper pre-cooling of produce before packaging</li>
            <li>Strict temperature control during storage & transport</li>
            <li>Quality & moisture content of produce</li>
            <li>Adherence to exporter/importer handling protocols</li>
          </ul>
          <p><b>1.3 Independent Verification Required:</b> Users must independently verify the suitability of the liner bags for their application. The company is not responsible for damages, spoilage, or claims from improper use or conditions beyond its control.</p>
        </>
      )
    },
    {
      id: 2,
      title: "Website Information Disclaimer",
      icon: <FaFileAlt className={styles.sectionIcon} />,
      content: (
        <>
          <p><b>2.1 Accuracy of Information:</b> Information on our website is for general purposes only and may change without notice. While we strive for accuracy, we make no warranties about completeness, reliability, or suitability.</p>
          <p><b>2.2 No Warranty on Website Content:</b> Reliance on website information is at the user’s own risk. Buyers/viewers must verify product claims, specifications, or details before relying on them.</p>
          <p><b>2.3 Limitation of Liability:</b> We are not liable for losses or damages arising from:</p>
          <ul>
            <li>Misinterpretation or reliance on website content</li>
            <li>Changes in product specifications or operations</li>
            <li>External factors affecting liner bag performance</li>
          </ul>
        </>
      )
    },
    {
      id: 3,
      title: "Limitation of Liability",
      icon: <FaExclamationTriangle className={styles.sectionIcon} />,
      content: (
        <>
          <p><b>3.1</b> Liability is limited strictly to the manufacturing quality of the liner bags.</p>
          <p><b>3.2</b> The company is not responsible for:</p>
          <ul>
            <li>Rejection of shipments due to pesticide residues, contamination, or incorrect packaging</li>
            <li>Spoilage or damage from temperature failures, improper storage, or long transit</li>
            <li>Financial claims exceeding the invoice value of the liner bags</li>
          </ul>
        </>
      )
    },
    {
      id: 4,
      title: "Changes to Disclaimer",
      icon: <FaEdit className={styles.sectionIcon} />,
      content: (
        <p>Dattatray Corporation (Brand: Sanjaya) reserves the right to update this disclaimer at any time without notice. Users are encouraged to review it periodically.</p>
      )
    },
  ];

  return (
    <div className={styles.container}>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        className={styles.card}
      >
        <h1 className={styles.heading}>Intended Use & Website Disclaimer</h1>

        {sections.map((section) => (
          <section key={section.id} className={styles.section}>
            <div className={styles.sectionHeader}>
              {section.icon}
              <h2 className={styles.sectionTitle}>{section.title}</h2>
            </div>
            <div className={styles.sectionContent}>
              {section.content}
            </div>
          </section>
        ))}
      </motion.div>
    </div>
  );
}
