'use client';

import React, { useRef } from "react";
import { motion, useScroll, useTransform, useSpring } from "framer-motion";
import { Container } from 'react-bootstrap';

export default function AboutOne() {
  const transformRef = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: transformRef,
    offset: ["start end", "end start"]
  });
  const useShiftAnimation = (start: number, end: number) => {
    const yRaw = useTransform(scrollYProgress, [start, end], [100, 0]);
    const opacityRaw = useTransform(scrollYProgress, [start, end], [0, 1]);
    const y = useSpring(yRaw, {
      stiffness: 120,
      damping: 30,
      mass: 0.5
    });
    const opacity = useSpring(opacityRaw, {
      stiffness: 100,
      damping: 40,
      mass: 0.4
    });
    return { y, opacity };
  };

  const titleAnim = useShiftAnimation(0.1, 0.2);
  const item1Anim = useShiftAnimation(0.2, 0.3);
  const item2Anim = useShiftAnimation(0.3, 0.4);
  const item3Anim = useShiftAnimation(0.4, 0.5);
  return (
    <section className="section-cutting-edge position-relative" ref={transformRef}>
      <Container className="py-3 py-md-5 text-center position-relative">
        <motion.p className="fs-1" style={titleAnim}>To be the leading force in AI-driven security</motion.p>
        <motion.p className="fs-1" style={item1Anim}>and infrastructure, seamlessly integrating</motion.p>
        <motion.p className="display-4 text-danger fw-bold" style={item2Anim}>cutting-edge technology</motion.p>
        <motion.p className="fs-1" style={item3Anim}>with human expertise to create a safer, smarter future.</motion.p>
      </Container>
    </section>
  );
}