"use client";

import { motion } from "framer-motion";
import { ArrowDown } from "lucide-react";

export function HowItWorksConnector() {
  return (
    <motion.div
      initial={{ opacity: 0, scaleY: 0 }}
      whileInView={{ opacity: 1, scaleY: 1 }}
      viewport={{ once: true, margin: "-40px" }}
      transition={{ duration: 0.4, ease: "easeOut" }}
      className="flex flex-col items-center py-6 sm:py-8"
      aria-hidden
    >
      <div className="h-10 w-px bg-gradient-to-b from-primary-300 to-primary-500" />
      <div className="flex h-9 w-9 items-center justify-center rounded-full border border-primary-200 bg-primary-50 text-primary-600 shadow-sm">
        <ArrowDown className="h-4 w-4" />
      </div>
      <div className="h-10 w-px bg-gradient-to-b from-primary-500 to-primary-300" />
    </motion.div>
  );
}
