{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "special-offer",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/countdown/special-offer.tsx",
      "content": "'use client';\n\nimport { useEffect, useState } from 'react';\n\n// Target Date: December 31, 2026\nconst targetDate = new Date('2026-12-31T23:59:59').getTime();\n\nconst SpecialOffer = () => {\n  const [timeRemaining, setTimeRemaining] = useState(targetDate - new Date().getTime());\n\n  // useEffect for the time interval\n  useEffect(() => {\n    const intervalId = setInterval(() => {\n      const difference = targetDate - new Date().getTime();\n      setTimeRemaining(difference);\n      if (difference < 1000) clearInterval(intervalId);\n    }, 1000);\n\n    return () => clearInterval(intervalId);\n  }, []);\n\n  // Helper function to format the time\n  const formatTime = (ms: number) => {\n    const absMs = Math.abs(ms);\n    const isNegative = ms < 0;\n\n    if (absMs < 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n\n    const totalSeconds = Math.floor(absMs / 1000);\n    const days = Math.floor(totalSeconds / (3600 * 24));\n    const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);\n    const minutes = Math.floor((totalSeconds % 3600) / 60);\n    const seconds = Math.floor(totalSeconds % 60);\n    return { days, hours, minutes, seconds, isNegative };\n  };\n\n  const time = formatTime(timeRemaining);\n\n  // Stop if complete\n  if (timeRemaining <= 0) {\n    return (\n      <div className='w-full bg-linear-to-r from-gray-900 to-black p-8 text-center'>\n        <h1 className='text-4xl font-extrabold text-pink-500'>🥳 Sale Ended!</h1>\n      </div>\n    );\n  }\n\n  return (\n    <div className='w-full relative bg-linear-to-r from-slate-950 via-orange-950 to-slate-950 border-t border-b border-blue-500/40 shadow-2xl shadow-blue-500/20'>\n      <div className='max-w-7xl mx-auto px-4 py-8 md:py-12'>\n        <div className='flex flex-col md:flex-row items-center justify-between gap-8'>\n          {/* Left Content Section */}\n          <div className='flex-1 text-center md:text-left'>\n            <p className='text-blue-400 text-sm font-semibold tracking-widest uppercase mb-3 drop-shadow-[0_0_8px_rgba(34, 99, 238, 0.5)]'>\n              Limited Time Offer\n            </p>\n            <h2 className='text-white text-3xl md:text-4xl font-bold mb-4 leading-tight drop-shadow-[0_0_10px_rgba(236,72,153,0.3)]'>\n              Cyber Sale Offer\n            </h2>\n            <p className='text-gray-300 text-lg mb-6'>\n              Get{' '}\n              <span className='text-orange-400 font-bold drop-shadow-[0_0_8px_rgba(236,72,153,0.5)]'>\n                30% OFF\n              </span>{' '}\n              when you use promo code{' '}\n              <span className='text-blue-300 font-mono font-semibold drop-shadow-[0_0_8px_rgba(34, 116, 238, 0.5)]'>\n                CBRLAYOUT\n              </span>{' '}\n              - limited time only!\n            </p>\n          </div>\n\n          {/* Countdown Timer Section */}\n          <div className='flex justify-center items-center gap-2 md:gap-4'>\n            <TimeSegment value={time.days} label='Days' isHighlighted={true} isFlipping={true} />\n            <Separator />\n            <TimeSegment value={time.hours} label='Hrs' isFlipping={true} />\n            <Separator />\n            <TimeSegment value={time.minutes} label='Mins' isFlipping={true} />\n            <Separator />\n            <TimeSegment value={time.seconds} label='Secs' isFlipping={true} />\n          </div>\n\n          {/* Promo Code Box */}\n          <div className='flex flex-col items-center gap-3 bg-black/70 border-2 border-blue-500/60 rounded-lg p-6 backdrop-blur-xs shadow-lg shadow-blue-500/30'>\n            <p className='text-blue-400 text-xs font-semibold tracking-widest uppercase drop-shadow-[0_0_6px_rgba(31, 121, 255, 0.4)]'>\n              Promo Code\n            </p>\n            <p className='text-orange-400 font-mono text-2xl md:text-3xl font-extrabold tracking-wider drop-shadow-[0_0_8px_rgba(255,113,31,0.5)]'>\n              CBRLAYOUT\n            </p>\n          </div>\n        </div>\n      </div>\n      {/* <div className=\"absolute h-80 w-full overflow-hidden mask-[radial-gradient(50%_50%,white,transparent)] \">\n        <div className=\"absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#ffffff2c_1px,transparent_1px),linear-gradient(to_bottom,#3a3a3a01_1px,transparent_1px)] bg-size-[70px_80px] \"></div>\n        <Sparkles\n          density={400}\n          color=\"fd660e\"\n          size={1.4}\n          direction=\"top\"\n          className=\"absolute inset-x-0 top-0 h-full w-full mask-[radial-gradient(50%_50%,white,transparent_85%)]\"\n        />\n      </div> */}\n    </div>\n  );\n};\n\n// Time Segment Component\nconst TimeSegment = ({\n  value,\n  label,\n  isHighlighted = false,\n  isFlipping = false,\n}: {\n  value: number;\n  label: string;\n  isHighlighted?: boolean;\n  isFlipping?: boolean;\n}) => {\n  const displayValue = value.toString().padStart(2, '0');\n\n  const boxClasses = `\n    w-16 h-16 2xl:w-24 2xl:h-24 xl:w-20 sm:h-20 h-16 rounded-md flex justify-center items-center relative\n    shadow-lg transition-all duration-300 font-mono\n    ${isFlipping ? 'flip-animate' : ''}\n    ${\n      isHighlighted\n        ? 'bg-linear-to-b from-orange-600 to-orange-700 border-2 border-orange-400/70 shadow-[0_0_15px_rgba(255, 113, 31, 0.6)]'\n        : 'bg-linear-to-b from-slate-800 to-slate-900 border-2 border-blue-500/50 shadow-[0_0_15px_rgba(25, 105, 255, 0.3)]'\n    }\n  `;\n\n  const digitClasses = `\n    text-3xl 2xl:text-5xl xl:text-3xl  font-bold leading-none font-mono\n    ${\n      isHighlighted\n        ? 'text-white drop-shadow-[0_0_10px_rgba(255,113,31,0.8)]'\n        : 'text-blue-200 drop-shadow-[0_0_10px_rgba(25,105,255,0.6)]'\n    }\n  `;\n\n  return (\n    <div className='flex flex-col items-center'>\n      <div className={boxClasses}>\n        <span className={digitClasses}>{displayValue}</span>\n        <div\n          className={`absolute top-1/2 left-0 right-0 h-[2px] transform -translate-y-1/2 ${isHighlighted ? 'bg-orange-400/50' : 'bg-blue-400/30'}`}\n        ></div>\n      </div>\n      <div className='mt-2 text-xs md:text-sm font-semibold text-blue-400/80 tracking-widest uppercase drop-shadow-[0_0_4px_rgba(22, 131, 255, 0.4)]'>\n        {label}\n      </div>\n    </div>\n  );\n};\n\n// Separator Component (the colons)\nconst Separator = () => (\n  <div className='text-3xl md:text-5xl font-extrabold text-blue-500/60 leading-none mx-1 md:mx-2 drop-shadow-[0_0_8px_rgba(25,105,255,0.4)] animate-pulse'>\n    :\n  </div>\n);\n\nexport default SpecialOffer;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}