"use client";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
import ModalVideo from "react-modal-video";
import { useState } from "react";
export default function About() {
  const [isOpen, setOpen] = useState(false);
  return (
    <>
      <section
        id="about"
        className="about-section fix section-padding2 scrollSpySection"
      >
        <div className="about-shape-1 float-bob-x" style={{ opacity: 0.3 }}>
          <Image
            src="/assets/img/turnkey-solutions/top-element.webp"
            width={114}
            height={419}
            alt="img"
          />
        </div>
        <div className="about-shape-2 float-bob-x">
          <Image
            src="/assets/img/turnkey-solutions/bottom-element.webp"
            width={318}
            height={408}
            alt="img"
          />
        </div>
        <div className="container">
          <div className="about-wrapper">
            <div className="row g-4">
              <div className="col-lg-6">
                <div className="about-image">
                  <Image
                    src="/assets/img/turnkey-solutions/big-img.webp"
                    alt="img"
                    width={485}
                    height={592}
                    className="wow fadeInLeft"
                    data-wow-delay=".2s"
                  />
                  <div
                    className="about-image-2 wow fadeInUp"
                    data-wow-delay=".4s"
                  >
                    <Image
                      src="/assets/img/turnkey-solutions/small-img.webp"
                      width={260}
                      height={270}
                      alt="img"
                    />
                  </div>
                  {/* <div className="about-line-shape">
                    <Image
                      src="/assets/img/about/about-shape-3.png"
                      width={30}
                      height={545}
                      alt="img"
                    />
                  </div> */}
                </div>
              </div>
              <div className="col-lg-6">
                <div className="about-content">
                  <div className="section-title">
                    <h6 className="wow fadeInUp">
                      <i className="fa-regular fa-arrow-left-long"></i>Our Expertise
                      <i className="fa-regular fa-arrow-right-long"></i>
                    </h6>
                    <h2 className="splt-txt wow">
                      <AnimatedText text="Smart Systems for Scalable Coconut Processing" />
                    </h2>
                  </div>
                  <p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
                     We don’t just build machinery - we create intelligent, end-to-end ecosystems that power your coconut processing goals. At Cibus Industries, our turnkey solutions are engineered to deliver speed, flexibility, and operational excellence across every stage of production.
                  </p>
                  <p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
                    Whether you're launching a new plant or upgrading an existing one, our smart systems are tailored to meet your capacity, compliance, and cost-efficiency – today and into the future.
                  </p>
                  <ul className="list-items wow fadeInUp" data-wow-delay=".2s">
                    <li>
                      <i className="fa-solid fa-circle-check"></i>
                     End-to-End Plant Architecture & Process Flow Engineering
                    </li>
                    <li>
                      <i className="fa-solid fa-circle-check"></i>
                       Modular Machinery Configurations for Phased Expansion
                    </li>
                    <li>
                      <i className="fa-solid fa-circle-check"></i>
                      Smart Automation with Remote Monitoring & IoT Integration
                    </li>
                  </ul>
                  <p className="mt-md-0 wow fadeInUp" data-wow-delay=".4s">
                     Let’s co-create a future-ready plant that scales with your ambitions.
                  </p>
                  {/* <div className="about-author">
                    <div
                      className="author-image wow fadeInUp"
                      data-wow-delay=".2s"
                    >
                      <Image
                        src="/assets/img/about/author.png"
                        width={68}
                        height={68}
                        alt="author-img"
                      />
                      <div className="content">
                        <p>Xbuild, CEO</p>
                        <h4>Brooklyn Simmons</h4>
                      </div>
                    </div>
                    <Image
                      src="/assets/img/about/signature.png"
                      alt="img"
                      width={85}
                      height={51}
                      className="wow fadeInUp"
                      data-wow-delay=".4s"
                    />
                  </div> */}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>{" "}
      <ModalVideo
        channel="youtube"
        youtube={{ mute: 0, autoplay: 0 }}
        isOpen={isOpen}
        videoId="Cn4G2lZ_g2I"
        onClose={() => setOpen(false)}
      />{" "}
    </>
  );
}