"use client"; import React, { useState, useRef, useEffect } from "react"; import { ArrowRight, Sparkles, X, Globe, Gauge, Shield, Cpu, CheckCircle2 } from "lucide-react"; import { motion, AnimatePresence } from "framer-motion"; // Precise cubic-bezier curve solver for exact CSS equivalent animation timing curves function solveCubicBezier(t: number, x1: number, y1: number, x2: number, y2: number): number { const getX = (tVal: number) => 3 * Math.pow(1 - tVal, 2) * tVal * x1 + 3 * (1 - tVal) * Math.pow(tVal, 2) * x2 + Math.pow(tVal, 3); const getY = (tVal: number) => 3 * Math.pow(1 - tVal, 2) * tVal * y1 + 3 * (1 - tVal) * Math.pow(tVal, 2) * y2 + Math.pow(tVal, 3); let guess = t; for (let i = 0; i < 8; i++) { const currentX = getX(guess); const slope = (getX(guess + 0.001) - currentX) / 0.001; if (Math.abs(slope) < 1e-6) break; guess -= (currentX - t) / slope; } return getY(guess); } export default function PlaneHeaderAIAgent({ className }: { className?: string }) { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isContactOpen, setIsContactOpen] = useState(false); const [urlInput, setUrlInput] = useState(""); const [analyzing, setAnalyzing] = useState(false); const [analysisStep, setAnalysisStep] = useState(0); const [isSubmitted, setIsSubmitted] = useState(false); const [result, setResult] = useState(null); const videoRef = useRef(null); const [videoDuration, setVideoDuration] = useState(15); const animStateRef = useRef({ targetProgress: 0, currentProgress: 0, nextSeekTime: 0, }); const [contentOpacity, setContentOpacity] = useState(0); const [contentTranslateY, setContentTranslateY] = useState(40); const [contentScale, setContentScale] = useState(0.98); const handleLoadedMetadata = (e: React.SyntheticEvent) => { if (e.currentTarget.duration) { setVideoDuration(e.currentTarget.duration); } }; useEffect(() => { const video = videoRef.current; if (!video) return; video.pause(); const handleScroll = () => { const scrollTop = window.scrollY; const maxScroll = document.documentElement.scrollHeight - window.innerHeight; if (maxScroll <= 0) return; const progress = Math.min(Math.max(scrollTop / maxScroll, 0), 1); animStateRef.current.targetProgress = progress; }; window.addEventListener("scroll", handleScroll, { passive: true }); let videoRafId: number; const lerpFactor = 0.12; const updateLoop = () => { const state = animStateRef.current; state.currentProgress += (state.targetProgress - state.currentProgress) * lerpFactor; if (Math.abs(state.targetProgress - state.currentProgress) < 0.0001) { state.currentProgress = state.targetProgress; } const targetTime = state.currentProgress * videoDuration; if (!video.seeking) { if (Math.abs(video.currentTime - targetTime) > 0.01) { video.currentTime = targetTime; } } else { state.nextSeekTime = targetTime; } const startProgress = 0.80; let t = 0; if (state.currentProgress > startProgress) { t = (state.currentProgress - startProgress) / (1 - startProgress); } else { t = 0; } const easeProgress = solveCubicBezier(t, 0.22, 1, 0.36, 1); const opacity = easeProgress; const translateY = 40 * (1 - easeProgress); const scale = 0.98 + (0.02 * easeProgress); setContentOpacity(opacity); setContentTranslateY(translateY); setContentScale(scale); videoRafId = requestAnimationFrame(updateLoop); }; videoRafId = requestAnimationFrame(updateLoop); const handleSeeked = () => { const state = animStateRef.current; if (Math.abs(video.currentTime - state.nextSeekTime) > 0.01) { video.currentTime = state.nextSeekTime; } }; video.addEventListener("seeked", handleSeeked); return () => { window.removeEventListener("scroll", handleScroll); video.removeEventListener("seeked", handleSeeked); cancelAnimationFrame(videoRafId); }; }, [videoDuration]); const steps = [ "Establishing connection...", "Analyzing HTML structure...", "Measuring page load speed...", "Evaluating SEO meta-tags...", "Checking security headers...", "Generating optimization report..." ]; const handleStartAnalysis = (e: React.FormEvent) => { e.preventDefault(); if (!urlInput.trim()) return; setAnalyzing(true); setResult(null); setAnalysisStep(0); const interval = setInterval(() => { setAnalysisStep((prev) => { if (prev < steps.length - 1) { return prev + 1; } else { clearInterval(interval); setAnalyzing(false); const hash = urlInput.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0); const score = 78 + (hash % 20); setResult({ score, speed: (0.8 + (hash % 5) * 0.3).toFixed(1) + "s", seo: score > 90 ? "Excellent" : "Good (Needs Tweaks)", ux: score > 85 ? "Optimized" : "Improve layout shift", security: score % 2 === 0 ? "A+" : "A" }); return prev; } }); }, 800); }; return ( <>

STOP GUESSING. START OPTIMIZING.

Request Received

Analyse Your Website

Recommended Action Items