"use client"
import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";
import Link from "next/link";
import SectionHeading from "./SectionHeading";
import Image from "next/image";

interface AboutProps {
  heading?: string;
  body?: string;
  badgeValue?: string;
  badgeLabel?: string;
  stat1Title?: string;
  stat1Desc?: string;
  stat2Title?: string;
  stat2Desc?: string;
  imageUrl?: string;
}

const About = ({
  heading,
  body,
  badgeValue,
  badgeLabel,
  stat1Title,
  stat1Desc,
  stat2Title,
  stat2Desc,
  imageUrl,
}: AboutProps) => {
  return (
    <section id="about" className="petro-section">
      <div className="petro-container">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7 }}
            className="relative"
          >
            <div className="absolute -top-4 -left-4 w-32 h-32 border-t-4 border-l-4 border-accent z-0" />
            <Image
              src={imageUrl}
              alt="Engineers reviewing blueprints at industrial facility"
              // className="relative z-10 shadow-2xl grayscale hover:grayscale-0 transition-all duration-700 w-full object-cover"
              className="relative z-10 shadow-2xl transition-all duration-700 w-full object-cover"
              width={500}
              height={500}
            />
            <div className="absolute -bottom-8 -right-8 bg-primary p-10 text-primary-foreground z-20 hidden md:block">
              <div className="text-4xl font-bold text-accent">{badgeValue}</div>
              <div className="text-sm uppercase tracking-widest font-medium">{badgeLabel}</div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, delay: 0.2 }}
          >
            <SectionHeading title={heading} />
            <p className="text-muted-foreground leading-relaxed mb-8">
              {body}
            </p>
            <div className="grid grid-cols-2 gap-8 mb-10">
              <div>
                <h4 className="font-bold text-primary text-lg mb-2">{stat1Title}</h4>
                <p className="text-sm text-muted-foreground">{stat1Desc}</p>
              </div>
              <div>
                <h4 className="font-bold text-primary text-lg mb-2">{stat2Title}</h4>
                <p className="text-sm text-muted-foreground">{stat2Desc}</p>
              </div>
            </div>
            <Link href="/about" className="flex items-center gap-2 font-bold text-primary group">
              Read Our Full Story
              <ArrowRight size={18} className="text-accent group-hover:translate-x-2 transition-transform" />
            </Link>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default About;