website-monitor/frontend/components/landing/CompetitorDemoVisual.tsx

'use client'

import { motion } from 'framer-motion'
import { useState, useEffect } from 'react'
import { Bell, ArrowDown } from 'lucide-react'

export function CompetitorDemoVisual() {
  const [phase, setPhase] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setPhase(p => (p + 1) % 2)
    }, 3000)
    return () => clearInterval(interval)
  }, [])

  return (
    <div className="relative h-full min-h-[200px] bg-gradient-to-br from-background via-background to-[hsl(var(--primary))]/5 rounded-xl p-4 overflow-hidden">
      {/* Browser Header */}
      <div className="mb-3 flex items-center gap-2 px-2 py-1.5 rounded-md bg-secondary/50 border border-border">
        <div className="flex gap-1">
          <div className="w-1.5 h-1.5 rounded-full bg-red-400" />
          <div className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
          <div className="w-1.5 h-1.5 rounded-full bg-green-400" />
        </div>
        <div className="text-[9px] text-muted-foreground font-mono">
          competitor.com/pricing
        </div>
      </div>

      {/* Pricing Table */}
      <div className="space-y-3">
        <h4 className="text-xs font-bold text-foreground">Professional Plan</h4>

        {/* Price Card */}
        <motion.div
          className="p-4 rounded-xl border-2 bg-white relative overflow-hidden"
          animate={{
            borderColor: phase === 1 ? 'hsl(var(--teal))' : 'hsl(var(--border))',
            boxShadow: phase === 1
              ? '0 0 20px hsl(var(--teal) / 0.3)'
              : '0 1px 3px rgba(0,0,0,0.1)'
          }}
          transition={{ duration: 0.5 }}
        >
          {/* Shine effect on change */}
          {phase === 1 && (
            <motion.div
              initial={{ x: '-100%' }}
              animate={{ x: '200%' }}
              transition={{ duration: 0.8, ease: 'easeInOut' }}
              className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent"
              style={{ transform: 'skewX(-20deg)' }}
            />
          )}

          <div className="relative z-10 space-y-2">
            {/* Old Price */}
            <motion.div
              animate={{
                opacity: phase === 1 ? 0.4 : 1,
                scale: phase === 1 ? 0.95 : 1
              }}
              transition={{ duration: 0.3 }}
            >
              <div className="flex items-baseline gap-2">
                <motion.span
                  className="text-3xl font-bold"
                  animate={{
                    textDecoration: phase === 1 ? 'line-through' : 'none',
                    color: phase === 1 ? 'hsl(var(--muted-foreground))' : 'hsl(var(--foreground))'
                  }}
                >
                  $99
                </motion.span>
                <span className="text-sm text-muted-foreground">/month</span>
              </div>
            </motion.div>

            {/* New Price with animated arrow */}
            {phase === 1 && (
              <motion.div
                initial={{ opacity: 0, x: -10, scale: 0.9 }}
                animate={{ opacity: 1, x: 0, scale: 1 }}
                transition={{ delay: 0.2, type: 'spring', stiffness: 300, damping: 20 }}
                className="flex items-center gap-2"
              >
                <ArrowDown className="h-4 w-4 text-[hsl(var(--teal))]" />
                <div className="flex items-baseline gap-2">
                  <span className="text-4xl font-bold text-[hsl(var(--teal))]">
                    $79
                  </span>
                  <span className="text-sm text-muted-foreground">/month</span>
                </div>
              </motion.div>
            )}

            {/* Savings Badge */}
            {phase === 1 && (
              <motion.div
                initial={{ opacity: 0, scale: 0.8, rotate: -5 }}
                animate={{ opacity: 1, scale: 1, rotate: 0 }}
                transition={{ delay: 0.4, type: 'spring' }}
                className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-[hsl(var(--teal))]/10 border border-[hsl(var(--teal))]/30"
              >
                <span className="text-[9px] font-bold text-[hsl(var(--teal))] uppercase tracking-wider">
                  Save $240/year
                </span>
              </motion.div>
            )}
          </div>
        </motion.div>

        {/* Alert Notification */}
        {phase === 1 && (
          <motion.div
            initial={{ opacity: 0, y: 10, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            transition={{ delay: 0.6 }}
            className="flex items-center gap-2 p-2 rounded-lg bg-[hsl(var(--burgundy))]/10 border border-[hsl(var(--burgundy))]/30"
          >
            <div className="relative flex-shrink-0">
              <Bell className="h-3 w-3 text-[hsl(var(--burgundy))]" />
              <motion.span
                animate={{ scale: [1, 1.3, 1] }}
                transition={{ duration: 1, repeat: Infinity }}
                className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-[hsl(var(--burgundy))]"
              />
            </div>
            <span className="text-[9px] font-semibold text-[hsl(var(--burgundy))]">
              Alert sent to your team
            </span>
          </motion.div>
        )}
      </div>
    </div>
  )
}