"use client";

import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";



export default function AboutHomeTwo() {
  const { t } = useLanguage();

  return (
    <>
      <div className="azzle-section-padding pt-0">
        <div className="container">
          <div className="row">
            <div className="col-lg-5">
              <div className="azzle-content-thumb" data-aos="zoom-in" data-aos-delay="500">
                <picture>
                  <source type="image/webp" srcSet="/assets/images/home2/responsive/thumb2-180.webp 180w, /assets/images/home2/responsive/thumb2-360.webp 360w, /assets/images/home2/responsive/thumb2-720.webp 720w, /assets/images/home2/responsive/thumb2-1080.webp 1080w" sizes="(max-width: 480px) 40vw, (max-width: 768px) 35vw, (max-width: 1200px) 30vw, 360px" />
                  <img src="/assets/images/home2/responsive/thumb2-360.webp" alt="SkyLight Chat dashboard preview" width={360} height={640} loading="lazy" decoding="async" />
                </picture>
                <div className="azzle-content-thumb-bg">
                  <img src="/assets/images/home2/shape3.png" alt="" width={120} height={120} loading="lazy" decoding="async" />
                </div>
              </div>
            </div>
            <div className="col-lg-7 d-flex align-items-center">
              <div className="azzle-default-content content3 pl-110" data-aos="fade-up" data-aos-delay="700">
                <h2>{t("about2.title")}</h2>
                <p className="mb-0">{t("about2.description")}</p>
                <div className="azzle-listicon-wrap2 mt-50">
                  <ul>
                    <li>
                      <h3>{t("about2.list1")}</h3>
                    </li>
                    <li>
                      <h3>{t("about2.list2")}</h3>
                    </li>
                    <li>
                      <h3>{t("about2.list3")}</h3>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* <!-- end content --> */}

      <div className="azzle-section-padding pt-0">
        <div className="container">
          <div className="row">
            <div className="col-lg-5 order-lg-2">
              <div className="azzle-content-thumb" data-aos="fade-up" data-aos-delay="500">
                <picture>
                  <source type="image/webp" srcSet="/assets/images/home2/responsive/thumb1-180.webp 180w, /assets/images/home2/responsive/thumb1-360.webp 360w, /assets/images/home2/responsive/thumb1-720.webp 720w, /assets/images/home2/responsive/thumb1-1080.webp 1080w" sizes="(max-width: 480px) 40vw, (max-width: 768px) 35vw, (max-width: 1200px) 30vw, 360px" />
                  <img src="/assets/images/home2/responsive/thumb1-360.webp" alt="SkyLight Chat AI agents workspace" width={360} height={640} loading="lazy" decoding="async" />
                </picture>
                <div className="azzle-content-thumb-bg">
                  <img src="/assets/images/home2/shape2.png" alt="" width={120} height={120} loading="lazy" decoding="async" />
                </div>
              </div>
            </div>
            <div className="col-lg-7 d-flex align-items-center">
              <div className="azzle-default-content content3 pr-110" data-aos="fade-up" data-aos-delay="700">
                <h2>{t("about1.title")}</h2>
                <p className="mb-0">{t("about1.description")}</p>
                <div className="azzle-listicon-wrap2 mt-50">
                  <ul>
                    <li>
                      <h3>{t("about1.list1")}</h3>
                    </li>
                    <li>
                      <h3>{t("about1.list2")}</h3>
                    </li>
                    <li>
                      <h3>{t("about1.list3")}</h3>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* <!-- end content --> */}

      <div className="azzle-section-padding pt-0 overflow-hidden">
        <div className="container">
          <div className="row">
            <div className="col-lg-5">
              <div className="azzle-content-thumb" data-aos="fade-left" data-aos-delay="500">
                <picture>
                  <source type="image/webp" srcSet="/assets/images/home2/responsive/thumb3-180.webp 180w, /assets/images/home2/responsive/thumb3-360.webp 360w, /assets/images/home2/responsive/thumb3-720.webp 720w, /assets/images/home2/responsive/thumb3-1080.webp 1080w" sizes="(max-width: 480px) 40vw, (max-width: 768px) 35vw, (max-width: 1200px) 30vw, 360px" />
                  <img src="/assets/images/home2/responsive/thumb3-360.webp" alt="Halla AI voice calls dashboard" width={360} height={640} loading="lazy" decoding="async" />
                </picture>
                <div className="azzle-content-thumb-bg">
                  <img src="/assets/images/home2/shape3.png" alt="" width={120} height={120} loading="lazy" decoding="async" />
                </div>
              </div>
            </div>
            <div className="col-lg-7 d-flex align-items-center">
              <div className="azzle-default-content content3 pl-110" data-aos="fade-up" data-aos-delay="700">
                <h2>{t("about3.title")}</h2>
                <p>{t("about3.description1")}</p>
                <p>{t("about3.description2")}</p>
                <div className="mt-50" data-aos="fade-up" data-aos-delay="900">
                  <Link className="azzle-default-btn btn3" href="https://dashboard.skylightchat.com/register" data-text={t("about3.cta")}>
                    <span className="button-wraper">{t("about3.cta")}</span>
                    <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.2139 1.5L17.7139 8M17.7139 8L11.2139 14.5M17.7139 8L0.999581 8" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                      <path d="M11.2139 1.5L17.7139 8M17.7139 8L11.2139 14.5M17.7139 8L0.999581 8" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}