"use client"
import Link from "next/link";
import React from "react";
import TrackVisibility from "react-on-screen";
import CountUp from "react-countup";
const AboutUsSection = () => {
  return (
    <div className="about-area-1 space-top ">
      <div className="about1-shape-img shape-mockup">
        <img
          className="about1-shape-img-1 spin"
          src="/assets/img/home/shape-flower.svg"
          alt="Fixturbo"
        />
        {/* <img
          className="about1-shape-img-2 spin2"
          src="/assets/img/normal/about_shape1-1.svg"
          alt="Fixturbo"
        /> */}
      </div>
      <div className="container">
        <div className="row gx-60 align-items-center">
          {/* First Column (Image) */}
          <div className="col-xl-6 col-12 order-xl-1 order-2">
            <div className="about-thumb1 ">
              <div className="about-img-1">
                <img src="/assets/img/home/about-1.jpg" alt="Murugan Temple" />
              </div>
              <div className="about-img-2">
                <img src="/assets/img/home/about-2.jpg" alt="Murugan Temple" />
              </div>
            </div>
          </div>

          {/* Second Column (Content) */}
          <div className="col-xl-6 col-12 order-xl-2 order-1">
            <div className="about-content-wrap">
              <div className="title-area me-xl-5 mb-20">
                <span className="sub-title">About Us</span>
                <h2 className="sec-title">
                 Unity, Devotion and Spiritual Growth
                </h2>
                <p className="sec-text">
                The Sri Murugan Temple was born from a heartfelt vision: to build a sacred home where people from all walks of life could find unity, share in devotion, and grow spiritually. Founded in the year 2000, we are a registered non-profit organization under the Canada Not-for-Profit Corporations Act.
                </p>
                <p className="sec-text">
                 Our temple is dedicated to the glory of Lord Murugan, who represents divine wisdom and courage. Over the years, we have been blessed to see our community flourish. What started as a humble gathering has grown into a vibrant hub that welcomes thousands of visitors and devotees seeking peace and connection. We warmly invite you to become a part of our story.
                </p>
              </div>

              {/* Button */}
              <div className="btn-wrap mt-20 mb-xl-0 mb-40">
                <Link href="/about-us" className="btn style2 mt-xl-0 mt-20">
                  Read More <i className="fas fa-arrow-right ms-2" />
                </Link>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
};

export default AboutUsSection;
