'use client';

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

export default function HomeOne() {
  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.2, 0.3);
  const item1Anim = useShiftAnimation(0.3, 0.4);
  const item2Anim = useShiftAnimation(0.4, 0.6);
  const item3Anim = useShiftAnimation(0.6, 0.7);

  return (
    <section className="section-transform" ref={transformRef}>
      <Stack gap={4} className="min-vh-100 py-3 py-md-5 d-flex flex-column align-items-center justify-content-center position-relative">
        <motion.h2 className="fs-4" style={titleAnim}>
          How AI is Transforming Security & Transactions
        </motion.h2>
        <motion.p className="display-4 fw-bold text-danger" style={item1Anim}>
          <Image src="https://media.vensysco.com/transform-e1.webp" alt="Transform E1" fluid style={{ maxHeight: "64px" }} /> Real-time Detection
        </motion.p>
        <motion.p className="display-4 fw-bold text-danger" style={item2Anim}>
          <Image src="https://media.vensysco.com/transform-e2.webp" alt="Transform E2" fluid style={{ maxHeight: "64px" }} /> Verification
        </motion.p>
        <motion.p className="display-4 fw-bold text-danger" style={item3Anim}>
          <Image src="https://media.vensysco.com/transform-e3.webp" alt="Transform E3" fluid style={{ maxHeight: "64px" }} /> Predictive Analytics
        </motion.p>
      </Stack>
    </section>
  );
}