import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading";
import Image from "next/image";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";

const Overview = () => {
  return (
    <section className="overview_sec sec_padd ">
      <Container className="custom_container">
        {/* Make row full height and align items center */}
        <Row className="align-items-center">
          <Col md={7} className="d-flex flex-column justify-content-center">
            <Heading el="h2" heading="About" />
            <FadeInStagger direction="left">
              {/* <h2 className="heading mb-2">About</h2> */}
              <p className="gray-text">At Akruti Luxe, every space begins with a story.</p>
              <p className="gray-text">a story of aspiration, design, and purpose. With extensive experience in luxury interiors, we’ve mastered the art of creating bespoke modular kitchens and wardrobes that blend beauty, innovation, and practicality. Our design philosophy is built on thoughtful detailing, precise craftsmanship, and an unwavering commitment to quality.</p>
              <p className="gray-text">In collaboration with the renowned Italian brands Valcucine and Rimadesio, we bring the finest global design sensibilities to Indian homes. Each project is a curated experience from the first conversation to the final installation, shaped around our clients’ lifestyles and aspirations. At Akruti Luxe, we go beyond creating interiors; we craft experiences that reflect individuality, celebrate timeless aesthetics, and elevate everyday living.</p>
               
               <div className="my-5"> <button className="btn4">Read More</button> </div>
        
            </FadeInStagger>
          </Col>

          <Col md={5} className="d-flex justify-content-center">
            <div className="video-wrapper">
              <video src="/video/about.mp4" autoPlay muted loop playsInline />
              {/* <Image
                src="/video/about.mp4"
                alt="About"
                width={600}
                height={600}
                className="img-fluid"
              /> */}
              {/* <div className="shine-overlay"></div> */}
            </div>
          </Col>
        </Row>
       
      </Container>
    </section>
  );
};

export default Overview;