[V0_FILE]typescriptreact:file="components/tutorials-modal.tsx" isMerged="true" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { X } from "lucide-react" interface TutorialsModalProps { open: boolean onOpenChange: (open: boolean) => void } export function TutorialsModal({ open, onOpenChange }: TutorialsModalProps) { const tutorials = [ { title: "Getting Started with Faceless", description: "Learn the basics of creating your first faceless video", duration: "5 min", thumbnail: "/placeholder.svg?height=120&width=200", }, { title: "Adding Voice Overs", description: "How to add and edit voice overs for your videos", duration: "3 min", thumbnail: "/placeholder.svg?height=120&width=200", }, { title: "Working with Scenes", description: "Learn to create and manage multiple scenes in your video", duration: "7 min", thumbnail: "/placeholder.svg?height=120&width=200", }, { title: "Advanced Video Editing", description: "Take your videos to the next level with advanced editing techniques", duration: "10 min", thumbnail: "/placeholder.svg?height=120&width=200", }, ] return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Faceless Video Editor", description: "Create stunning faceless videos with our easy-to-use editor", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]plaintext:file="public/placeholder-video.mp4" query="travel video with beach scenes" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=60&width=60&query=video book icon" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=60&width=60&query=film clapperboard icon" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=60&width=60&query=subtitle glasses icon" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=60&width=60&query=film reel icon" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=60&width=60&query=puzzle pieces icon" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=60&width=60&query=music note icon" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=60&width=60&query=rocket icon" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=blue space nebula" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=purple digital particles" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=stars in space" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=dark abstract background" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=purple particles" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=purple wave pattern" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=travel thumbnail with text THE TRAVEL GUIDE" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=youtube thumbnail with shocked face" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=bright colorful thumbnail with text" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=business strategy thumbnail" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=thank you subscribers thumbnail" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=red and black thumbnail with text EFFECTIVE STRATEGIES" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=lisbon travel sticker" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=yellow smiley face sticker" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=black and white graffiti sticker" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=blue audio waveform" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=purple audio waveform" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=80&width=80&query=dark audio waveform" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=120&width=80&query=youtube subscribe button with bell icon" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=120&width=80&query=elegant follow button with gold text" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=120&width=80&query=bright orange get started button" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=120&width=80&query=black minimal button" isMerged="true" [V0_FILE]plaintext:file="public/preview-video.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Generated%20File%20June%2012%2C%202025%20-%201_33AM-ThxxXUAPt57fx1dtL8R3TuORhBHkBU.mp4" isMerged="true" [V0_FILE]png:file="public/images/effect-overlay-blue-smoke.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-CzvoZqWx7GScZtx0ZcLrVNxhKaSwij.png" isMerged="true" [V0_FILE]png:file="public/images/effect-overlay-purple-particles.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-2tHJ8bE03KrcqIwEVJXQm5tDTGqwuq.png" isMerged="true" [V0_FILE]png:file="public/images/effect-overlay-dark-bubbles.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-dq4HN4MFLgaPnmgsqvzDiCUJRrRpHO.png" isMerged="true" [V0_FILE]png:file="public/images/video-bg-cosmic-sparkle.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-sKfFXsEfGzuiIoKP7W1AjfTAcd41EZ.png" isMerged="true" [V0_FILE]png:file="public/images/video-bg-red-blue-waves.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-A1kCWrjwc64Mry7s5k5o94rBUzQlG7.png" isMerged="true" [V0_FILE]png:file="public/images/video-bg-retro-grid.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Q1L1tPfBJlYvHBHHKmxOdXYeFNDwSv.png" isMerged="true" [V0_FILE]png:file="public/images/thumbnail-travel-journey.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z5rqkY5MyjInqjHJQhrwK9K5GX5x5y.png" isMerged="true" [V0_FILE]png:file="public/images/thumbnail-reels-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-RvXo4liYH6ovV1ySBWibhbZMyu9dgp.png" isMerged="true" [V0_FILE]png:file="public/images/thumbnail-youtube-howto.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-IPXBEttKt9XXqMBI2gdsZEq1O5J8yi.png" isMerged="true" [V0_FILE]png:file="public/images/sticker-lisbon-travel.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-EX8hrBzu1HMq3WVscFLJ2uwS93iNh4.png" isMerged="true" [V0_FILE]png:file="public/images/sticker-tiktok-pack.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-NVh9jo4gsfj04qtQSOuc4Byx8W9kv5.png" isMerged="true" [V0_FILE]png:file="public/images/sticker-nice-emoji.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yhHbakbBzf6kj05YwCy9Nw7ibp1bos.png" isMerged="true" [V0_FILE]plaintext:file="public/videos/fashion-instagram-story.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/canva-beige-and-dark-brown-modern-feminine-fashion-instagram-story-TJW9FU41fNI-m9Lc3sVAGD6gwnVoXZDVCAJSmSEy3j.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/cta-template.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/canva-BdCvkuMZ9Sk-3Afj8Acxs8LEbA1wL9ddYvsclWmglT.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/youtube-outro-animation.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/canva-black%2C-orange-and-white-simple-animated-profile-outro-mobile-video-n1GEHbpuhNc-rd8vESLM3L5umOajrIFEQ1c9BhimuB.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/youtube-subscribe-animation.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/canva-Bzic0qwGArg-VLv823g22YqyDsk1PlPPGMC6IhRp8l.mp4" isMerged="true" [V0_FILE]typescriptreact:file="components/video-editor-properties.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown } from "lucide-react" interface VideoEditorPropertiesProps { isVisible: boolean } export function VideoEditorProperties({ isVisible }: VideoEditorPropertiesProps) { const [orientation, setOrientation] = useState("Landscape (16:9)") const [preset, setPreset] = useState("Travel onboarding") const [visualStyle, setVisualStyle] = useState("Realistic") const [language, setLanguage] = useState("English") return (

{/* Properties panel */}

Properties

Orientation

Preset

Visual Style

Language

) } [V0_FILE]typescriptreact:file="components/video-editor-header.tsx" isMerged="true" "use client" import { CloudIcon, Save } from "lucide-react" export function VideoEditorHeader() { return (

Home / Travel / Budget Travelling

) } [V0_FILE]xml:file="public/images/syllaby-symbol.svg" url="https://blobs.vusercontent.net/blob/Syllaby_Logo-3d7jRmeTfWOe7e9bhdrtm4BTGKjCAj.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/video-editor-canvas.tsx" isMerged="true" "use client" import { type RefObject, useEffect, useState } from "react" import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react" interface VideoEditorCanvasProps { videoRef: RefObject isPlaying: boolean currentTime: number isPropertiesVisible: boolean onToggleProperties: () => void } export function VideoEditorCanvas({ videoRef, isPlaying, currentTime, isPropertiesVisible, onToggleProperties, }: VideoEditorCanvasProps) { const [loading, setLoading] = useState(true) useEffect(() => { // Start playing the video immediately if (videoRef.current) { videoRef.current.play().catch((err) => console.error("Error playing video:", err)) } const timer = setTimeout(() => { setLoading(false) }, 5500) return () => clearTimeout(timer) }, [videoRef]) return (

{/* Video is always present and visible */}

) } [V0_FILE]typescriptreact:file="components/video-editor-tools.tsx" isMerged="true" "use client" import { Video, Film, Type, ImageIcon, Layers, Music, PhoneCall, Mic } from "lucide-react" interface VideoEditorToolsProps { activeTab: string onTabChange: (tab: string) => void } export function VideoEditorTools({ activeTab, onTabChange }: VideoEditorToolsProps) { const tabs = [ { id: "video-details", label: "Video Details", icon: Video }, { id: "scenes", label: "Scenes", icon: Film }, { id: "subtitle", label: "Subtitle", icon: Type }, { id: "assets", label: "Assets", icon: ImageIcon }, { id: "elements", label: "Elements", icon: Layers }, { id: "music", label: "Music", icon: Music }, { id: "voice-over", label: "Voice Over", icon: Mic }, { id: "call-to-action", label: "Call to action", icon: PhoneCall }, ] return (

{tabs.map((tab) => ( ))}

) } [V0_FILE]typescriptreact:file="components/video-editor-tools-panel.tsx" isMerged="true" "use client" import { ChevronDown, Play, Upload, Sparkles, Search, Wand2, Mic, GripVertical } from "lucide-react" import type React from "react" import Image from "next/image" import { useState, useRef, useEffect } from "react" interface VideoEditorToolsPanelProps { activeTab: string isVisible: boolean } export function VideoEditorToolsPanel({ activeTab, isVisible }: VideoEditorToolsPanelProps) { const [assetsTab, setAssetsTab] = useState("my-assets") const [musicTab, setMusicTab] = useState("library") const [hoveringScene, setHoveringScene] = useState(false) const [playingVideoId, setPlayingVideoId] = useState(null) const [panelWidth, setPanelWidth] = useState(319) const [isResizing, setIsResizing] = useState(false) const [startX, setStartX] = useState(0) const [startWidth, setStartWidth] = useState(0) const panelRef = useRef(null) const videoRefs = useRef<{ [key: string]: HTMLVideoElement | null }>({ "fashion-video": null, "cta-template": null, "youtube-outro": null, "youtube-subscribe": null, "custom-cta": null, }) const handleVideoPlay = (videoId: string) => { // Pause any currently playing video that's not the one we're about to play if (playingVideoId && playingVideoId !== videoId && videoRefs.current[playingVideoId]) { videoRefs.current[playingVideoId]?.pause() } // Play the video if (videoRefs.current[videoId]) { videoRefs.current[videoId]?.play() setPlayingVideoId(videoId) } } const handleResizeStart = (e: React.MouseEvent) => { setIsResizing(true) setStartX(e.clientX) setStartWidth(panelWidth) e.preventDefault() } const handleMouseMove = (e: MouseEvent) => { if (!isResizing) return const deltaX = startX - e.clientX // We're resizing from left to right, so we add the delta const newWidth = Math.max(250, Math.min(600, startWidth + deltaX)) setPanelWidth(newWidth) } const handleMouseUp = () => { setIsResizing(false) } useEffect(() => { if (isResizing) { document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) } return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [isResizing, startX, startWidth]) const toolPanels = { "video-details": { title: "Video Details", content: (

Orientation

Preset

Visual Style

Language

), }, scenes: { title: "Scenes", content: (

{/* Scene Card */}

Are you dreaming of an unforgettable summer getaway, but worried about breaking the bank? Fear not! Traveling on a budget is entirely possible--and delightful--all under 1000 euros. First, consider destinations like Portugal's Algarve coast or Greece's enchanting islands; both offer stunning vistas without hefty price tags. Accommodation? Opt for charming hostels or budget-friendly Airbnb options that still provide local flair.

AI Visuals generated

Created by Google AI Veo3

{/* Hover area between scenes */}

setHoveringScene(true)} onMouseLeave={() => setHoveringScene(false)} >

{/* Video Script Section */}

Video script

39 / 250

), }, subtitle: { title: "Subtitle", content: (

Font Family

Text Alignment

Text Colour

Text Animation

), }, assets: { title: "Assets", content: (

{/* Header with action buttons */}

Assets

{/* Tabs */}

{/* Asset Grid */}

{assetsTab === "my-assets" && ( <> {Array.from({ length: 10 }).map((_, index) => (

))} )} {assetsTab === "marketplace" && ( <> {Array.from({ length: 8 }).map((_, index) => (

))} )} {assetsTab === "stocks" && ( <> {Array.from({ length: 6 }).map((_, index) => (

))} )}

), }, elements: { title: "Elements", content: (

{/* Header with action buttons */}

Elements

{/* Effect Overlay Section */}

Effect Overlay

{/* Video backgrounds Section */}

Video backgrounds

{/* Thumbnails Section */}

Thumbnails

{/* Stickers Section */}

Stickers

), }, music: { title: "Music", content: (

{/* Header with action buttons */}

Music

{/* Tabs */}

{/* Music Content */}

{/* Music Tracks */}

{["Upbeat Pop", "Cinematic", "Ambient", "Corporate"].map((track) => (

{track}

1:30

))}

), }, "call-to-action": { title: "Call to Action", content: (

{/* Header with action buttons */}

Call to Action

{/* CTA Buttons Section */}

CTA Buttons

handleVideoPlay("fashion-video")} onMouseLeave={() => { if (videoRefs.current["fashion-video"]) { videoRefs.current["fashion-video"].pause() setPlayingVideoId(null) } }} >

handleVideoPlay("cta-template")} onMouseLeave={() => { if (videoRefs.current["cta-template"]) { videoRefs.current["cta-template"].pause() setPlayingVideoId(null) } }} >

handleVideoPlay("custom-cta")} onMouseLeave={() => { if (videoRefs.current["custom-cta"]) { videoRefs.current["custom-cta"].pause() setPlayingVideoId(null) } }} >

{/* YouTube Subscribe Section */}

Youtube Subscribe

handleVideoPlay("youtube-outro")} onMouseLeave={() => { if (videoRefs.current["youtube-outro"]) { videoRefs.current["youtube-outro"].pause() setPlayingVideoId(null) } }} >

handleVideoPlay("youtube-subscribe")} onMouseLeave={() => { if (videoRefs.current["youtube-subscribe"]) { videoRefs.current["youtube-subscribe"].pause() setPlayingVideoId(null) } }} >

), }, "voice-over": { title: "Voice Over", content: (

{/* Header with action buttons */}

Voice Over

Voice

Speed

1.0x

Pitch

Script

), }, } const currentTool = toolPanels[activeTab as keyof typeof toolPanels] if (!currentTool) { return null } return (

{/* Resize handle - now on the left side */}

{isVisible && (

{activeTab !== "assets" && activeTab !== "elements" && activeTab !== "music" && activeTab !== "call-to-action" && activeTab !== "voice-over" && (

{currentTool.title}

)} {currentTool.content}

)}

) } [V0_FILE]xml:file="public/placeholder.svg?height=45&width=90&query=beach landscape" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=45&width=90&query=city landscape" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=45&width=90&query=sunset landscape" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=45&width=90&query=subscribe button" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=100&width=200&query=beach landscape" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=100&width=200&query=city landscape" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg?height=100&width=200&query=sunset landscape" isMerged="true" [V0_FILE]typescriptreact:file="components/video-editor-timeline.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Play, Pause, ZoomIn, ZoomOut, ChevronDown, ChevronUp, GripVertical, Copy, Trash2, AudioLinesIcon, ImageIcon, Subtitles, MusicIcon, FilmIcon, PhoneCall, } from "lucide-react" interface VideoEditorTimelineProps { currentTime: number duration: number onTimeUpdate: (time: number) => void onPlayPause: () => void isPlaying: boolean selectedTrack: string | null onTrackSelect: (track: string) => void } interface TimelineSegment { id: string track: string start: number end: number color: string label: string type: "subtitle" | "overlay" | "imagery" | "music" | "voiceover" | "cta" imageUrl?: string } export function VideoEditorTimeline({ currentTime, duration, onTimeUpdate, onPlayPause, isPlaying, selectedTrack, onTrackSelect, }: VideoEditorTimelineProps) { const timelineRef = useRef(null) const timelineContentRef = useRef(null) const resizeHandleRef = useRef(null) const [isDragging, setIsDragging] = useState(false) const [isResizing, setIsResizing] = useState(false) const [isCollapsed, setIsCollapsed] = useState(false) const [timelineHeight, setTimelineHeight] = useState(300) // Default height const [startResizeY, setStartResizeY] = useState(0) const [startHeight, setStartHeight] = useState(0) // Reordered tracks as requested const tracks = ["Imagery", "Subtitles", "Overlay", "Music", "Voice Over", "Call to Action"] const mockSegments: TimelineSegment[] = [ { id: "imagery-1", track: "Imagery", start: 0, end: 15, color: "bg-blue-500", label: "Intro Image", type: "imagery", imageUrl: "/placeholder.svg?height=100&width=200", }, { id: "imagery-2", track: "Imagery", start: 15, end: 35, color: "bg-blue-500", label: "Main Content", type: "imagery", imageUrl: "/placeholder.svg?height=100&width=200", }, { id: "imagery-3", track: "Imagery", start: 35, end: 59, color: "bg-blue-500", label: "Conclusion", type: "imagery", imageUrl: "/placeholder.svg?height=100&width=200", }, { id: "subtitle-1", track: "Subtitles", start: 0, end: 12, color: "bg-purple-500", label: "Welcome to our guide", type: "subtitle", }, { id: "subtitle-2", track: "Subtitles", start: 12, end: 30, color: "bg-purple-500", label: "Budget travel tips", type: "subtitle", }, { id: "subtitle-3", track: "Subtitles", start: 30, end: 59, color: "bg-purple-500", label: "Subscribe for more", type: "subtitle", }, { id: "overlay-1", track: "Overlay", start: 0, end: 15, color: "bg-green-500", label: "Beach Overlay", type: "overlay", }, { id: "overlay-2", track: "Overlay", start: 15, end: 35, color: "bg-green-500", label: "City Overlay", type: "overlay", }, { id: "overlay-3", track: "Overlay", start: 35, end: 59, color: "bg-green-500", label: "Mountain Overlay", type: "overlay", }, { id: "music-1", track: "Music", start: 0, end: 59, color: "bg-yellow-500", label: "Background Music", type: "music", }, { id: "voiceover-1", track: "Voice Over", start: 0, end: 59, color: "bg-red-500", label: "Brian Voice", type: "voiceover", }, { id: "cta-1", track: "Call to Action", start: 45, end: 59, color: "bg-orange-500", label: "Subscribe CTA", type: "cta", imageUrl: "/placeholder.svg?height=45&width=90", }, ] const getSegmentIcon = (type: TimelineSegment["type"]) => { switch (type) { case "subtitle": return case "overlay": return case "imagery": return case "music": return case "voiceover": return case "cta": return } } const formatTime = (time: number) => { const minutes = Math.floor(time / 60) const seconds = Math.floor(time % 60) return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}.00` } // Only handle clicks on the timeline progress indicator, not the entire timeline const handleTimelineClick = (e: React.MouseEvent) => { // We're not handling clicks on the entire timeline anymore // This function will only be called for specific elements } const handleSegmentClick = (track: string) => { onTrackSelect(track) } const handleMouseDown = () => { setIsDragging(true) } const handleMouseUp = () => { setIsDragging(false) setIsResizing(false) } const handleMouseMove = (e: MouseEvent) => { if (isDragging && timelineRef.current) { const rect = timelineRef.current.getBoundingClientRect() const offsetX = e.clientX - rect.left const newTime = (offsetX / rect.width) * duration onTimeUpdate(Math.max(0, Math.min(newTime, duration))) } if (isResizing) { const deltaY = e.clientY - startResizeY // Remove maximum height limit as requested const newHeight = Math.max(64, startHeight - deltaY) setTimelineHeight(newHeight) } } const handleResizeStart = (e: React.MouseEvent) => { setIsResizing(true) setStartResizeY(e.clientY) setStartHeight(timelineHeight) e.preventDefault() } const toggleCollapse = () => { setIsCollapsed(!isCollapsed) } // Handle clicks on time markers const handleTimeMarkerClick = (e: React.MouseEvent, time: number) => { onTimeUpdate(time) e.stopPropagation() } // Handle direct clicks on the timeline cursor const handleTimelineCursorClick = (e: React.MouseEvent) => { if (timelineRef.current) { const rect = timelineRef.current.getBoundingClientRect() const offsetX = e.clientX - rect.left const newTime = (offsetX / rect.width) * duration onTimeUpdate(Math.max(0, Math.min(newTime, duration))) } e.stopPropagation() } useEffect(() => { document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [isDragging, isResizing, startResizeY, startHeight]) // Calculate track heights based on content type const getTrackHeight = (track: string) => { if (track === "Imagery") { return 100 // 100px height for Imagery track } return 40 // Default height for other tracks } return (

{/* Resize handle */}

handleTimeMarkerClick(e, 0)}> {formatTime(currentTime)} handleTimeMarkerClick(e, duration)} > {formatTime(duration)}

{!isCollapsed && (

{tracks.map((track) => ( ))}

{Array.from({ length: 12 }).map((_, i) => (

handleTimeMarkerClick(e, i * 5)} > {i * 5}s

))}

{/* Track segments */} {tracks.map((track, trackIndex) => { // Calculate the cumulative height of all previous tracks const previousTracksHeight = tracks.slice(0, trackIndex).reduce((sum, t) => sum + getTrackHeight(t), 0) return (

{mockSegments .filter((segment) => segment.track === track) .map((segment) => (

handleSegmentClick(segment.track)} > {segment.imageUrl ? (

{/* Removed overlay for imagery segments */} {segment.type !== "imagery" && (

{getSegmentIcon(segment.type)} {segment.label}

)}

) : (

{getSegmentIcon(segment.type)} {segment.label}

)}

))}

) })} {/* Timeline progress indicator */}

)}

) } [V0_FILE]typescriptreact:file="components/tutorial-video-modal.tsx" isMerged="true" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { X, Play } from "lucide-react" interface TutorialVideoModalProps { open: boolean onOpenChange: (open: boolean) => void title: string description: string videoId: string } export function TutorialVideoModal({ open, onOpenChange, title, description, videoId }: TutorialVideoModalProps) { const getTutorialContent = (videoId: string) => { const tutorials = { "text-to-video": { thumbnail: "/placeholder.svg?height=300&width=500", duration: "3:45", }, "b-roll": { thumbnail: "/placeholder.svg?height=300&width=500", duration: "2:30", }, avatar: { thumbnail: "/placeholder.svg?height=300&width=500", duration: "4:15", }, "url-to-video": { thumbnail: "/placeholder.svg?height=300&width=500", duration: "3:20", }, "video-vault": { thumbnail: "/placeholder.svg?height=300&width=500", duration: "2:45", }, "bulk-scheduler": { thumbnail: "/placeholder.svg?height=300&width=500", duration: "5:30", }, } return tutorials[videoId as keyof typeof tutorials] || tutorials["text-to-video"] } const tutorialContent = getTutorialContent(videoId) return ( ) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Sidebar } from "@/components/sidebar" import { AppHeader } from "@/components/app-header" import { DashboardGrid } from "@/components/dashboard-grid" export default function DashboardPage() { return (

{/* Main Content */}

{/* Breadcrumb Section */}

{">"} Dashboard

Welcome back, Joe!

{/* Dashboard Grid */}

) } [V0_FILE]typescriptreact:file="app/analytics/page.tsx" isMerged="true" "use client" import { Sidebar } from "@/components/sidebar" import { AppHeader } from "@/components/app-header" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { TrendingUp, Users, Video, Clock, Download } from "lucide-react" export default function AnalyticsPage() { const stats = [ { title: "Total Videos", value: "24", change: "+12%", icon: Video, color: "text-blue-600", }, { title: "Views This Month", value: "1.2M", change: "+18%", icon: TrendingUp, color: "text-green-600", }, { title: "Engagement Rate", value: "8.4%", change: "+2.1%", icon: Users, color: "text-purple-600", }, { title: "Hours Saved", value: "156", change: "+24%", icon: Clock, color: "text-orange-600", }, ] return (

{/* Breadcrumb Section */}

{">"} Analytics

{/* Main Content */}

{/* Header */}

Analytics Overview

Track your video performance and engagement metrics.

{/* Stats Cards */}

{stats.map((stat, index) => (

{stat.title}

{stat.value}

{stat.change} from last month

))}

{/* Placeholder for charts and detailed analytics */}

Video Performance

Chart coming soon

Engagement Trends

Chart coming soon

) } [V0_FILE]typescriptreact:file="app/video-editor/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef } from "react" import { Sidebar } from "@/components/sidebar" import { VideoEditorHeader } from "@/components/video-editor-header" import { VideoEditorCanvas } from "@/components/video-editor-canvas" import { VideoEditorTimeline } from "@/components/video-editor-timeline" import { VideoEditorTools } from "@/components/video-editor-tools" import { VideoEditorToolsPanel } from "@/components/video-editor-tools-panel" import { AppHeader } from "@/components/app-header" export default function VideoEditorPage() { const [currentTime, setCurrentTime] = useState(0) const [duration, setDuration] = useState(59) const [isPlaying, setIsPlaying] = useState(false) const [selectedTrack, setSelectedTrack] = useState("Subtitles") const [activeTab, setActiveTab] = useState("video-details") const [isPanelVisible, setIsPanelVisible] = useState(true) const videoRef = useRef(null) const handleTimeUpdate = (time: number) => { setCurrentTime(time) if (videoRef.current) { videoRef.current.currentTime = time } } const handlePlayPause = () => { setIsPlaying(!isPlaying) if (videoRef.current) { if (isPlaying) { videoRef.current.pause() } else { videoRef.current.play() } } } const handleTabChange = (tab: string) => { if (tab === activeTab) { setIsPanelVisible(!isPanelVisible) } else { setActiveTab(tab) setIsPanelVisible(true) } } const handleTrackSelect = (track: string) => { setSelectedTrack(track) // Map track names to corresponding panel tabs switch (track) { case "Subtitles": setActiveTab("subtitle") break case "Overlay": setActiveTab("elements") break case "Imagery": setActiveTab("assets") break case "Music": setActiveTab("music") break case "Voice Over": setActiveTab("voice-over") break case "Call to Action": setActiveTab("call-to-action") break default: break } // Make sure the panel is visible setIsPanelVisible(true) } return (

setIsPanelVisible(!isPanelVisible)} />

) } [V0_FILE]plaintext:file="public/videos/preset-educational.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/preset-motivational.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/preset-product-demo.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/style-modern.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/style-cinematic.mp4" isMerged="true" [V0_FILE]plaintext:file="public/videos/style-minimalist.mp4" isMerged="true" [V0_FILE]png:file="public/images/style-mythological.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-48SXkhFbziDNaZ9U3yuu3tIajpdV0T.png" isMerged="true" [V0_FILE]png:file="public/images/style-historical.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-8joBqhkUjYZdW3JgT7UNVRQmcEI7oU.png" isMerged="true" [V0_FILE]png:file="public/images/style-comic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-39jCp5eOcj6R6QK5uqYDBaCRTqpRtn.png" isMerged="true" [V0_FILE]png:file="public/images/style-fairy-tale.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-bGtvv5Tx1NJC6Trkmyx40PTqigF1Dq.png" isMerged="true" [V0_FILE]png:file="public/images/style-realistic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-faMzpiBKC2pWozmr8Kz7XrxbyZUDtr.png" isMerged="true" [V0_FILE]png:file="public/images/style-anime.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Hsuzbcf2TWohxz4lXDtmRFlKQQBA9k.png" isMerged="true" [V0_FILE]png:file="public/images/style-sci-fi.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-TCVtNFIEFXkhqDICEr0x6UTNcVO8nf.png" isMerged="true" [V0_FILE]png:file="public/images/style-post-apocalyptic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-OxWEHS9pph3lRoZGVghj2qi25arkeF.png" isMerged="true" [V0_FILE]typescriptreact:file="app/faceless-video/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Sidebar } from "@/components/sidebar" import { AppHeader } from "@/components/app-header" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Upload, Sparkles, LinkIcon, ChevronDown, ChevronUp, Plus } from "lucide-react" import { useRouter } from "next/navigation" export default function FacelessVideoPage() { const router = useRouter() const [videoTitle, setVideoTitle] = useState("Yoga Video") const [customScript, setCustomScript] = useState("") const [videoRelatedTo, setVideoRelatedTo] = useState("") const [selectedRatio, setSelectedRatio] = useState("9:16") const [videoLength, setVideoLength] = useState("Less than 1 minute") const [selectedPreset, setSelectedPreset] = useState("") const [selectedStyle, setSelectedStyle] = useState("") const [selectedCharacter, setSelectedCharacter] = useState("") const [selectedSubtitleStyle, setSelectedSubtitleStyle] = useState("bold-yellow") const [isSubtitleDropdownOpen, setIsSubtitleDropdownOpen] = useState(false) const [customSubtitleText, setCustomSubtitleText] = useState("") const [selectedAlignment, setSelectedAlignment] = useState("") const [showAddNew, setShowAddNew] = useState(false) const [showMoreStyles, setShowMoreStyles] = useState(false) // Collapse states const [isPresetsCollapsed, setIsPresetsCollapsed] = useState(false) const [isStylesCollapsed, setIsStylesCollapsed] = useState(false) const [isCharactersCollapsed, setIsCharactersCollapsed] = useState(false) const [placeholderIndex, setPlaceholderIndex] = useState(0) const [displayedPlaceholder, setDisplayedPlaceholder] = useState("") const [isTyping, setIsTyping] = useState(true) const placeholderExamples = [ "Write your custom script here...", "Describe your video content in detail...", "Share your story or message...", "Create engaging content for your audience...", "Tell us what your video should be about...", ] const videoRatios = [ { id: "9:16", label: "9:16", description: "Portrait (TikTok, Instagram Reels)" }, { id: "16:9", label: "16:9", description: "Landscape (YouTube, Facebook)" }, { id: "1:1", label: "1:1", description: "Square (Instagram Posts)" }, ] const videoLengths = ["Less than 1 minute", "1-2 minutes", "2-3 minutes", "3-5 minutes", "5+ minutes"] const presets = [ { id: "educational", name: "Educational", thumbnail: "/images/style-comic.png" }, { id: "motivational", name: "Motivational", thumbnail: "/images/style-mythological.png" }, { id: "product-demo", name: "Product Demo", thumbnail: "/images/style-realistic.png" }, ] const styles = [ { id: "mythological", name: "Mythological", thumbnail: "/images/style-mythological.png", hasCharacters: true }, { id: "historical", name: "Historical", thumbnail: "/images/style-historical.png", hasCharacters: true }, { id: "comic", name: "Comic", thumbnail: "/images/style-comic.png", hasCharacters: true }, { id: "fairy-tale", name: "Fairy Tale", thumbnail: "/images/style-fairy-tale.png", hasCharacters: true }, { id: "realistic", name: "Realistic", thumbnail: "/images/style-realistic.png", hasCharacters: false }, { id: "anime", name: "Anime", thumbnail: "/images/style-anime.png", hasCharacters: true }, { id: "sci-fi", name: "Sci-Fi", thumbnail: "/images/style-sci-fi.png", hasCharacters: true }, { id: "post-apocalyptic", name: "Post-Apocalyptic", thumbnail: "/images/style-post-apocalyptic.png", hasCharacters: true, }, ] const moreStyles = [ { id: "cyberpunk", name: "Cyberpunk", thumbnail: "/images/style-sci-fi.png", hasCharacters: true }, { id: "medieval", name: "Medieval", thumbnail: "/images/style-historical.png", hasCharacters: true }, { id: "steampunk", name: "Steampunk", thumbnail: "/images/style-post-apocalyptic.png", hasCharacters: true }, { id: "western", name: "Western", thumbnail: "/images/style-realistic.png", hasCharacters: true }, ] const characters = { mythological: [ { id: "zeus", name: "Zeus", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "athena", name: "Athena", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "thor", name: "Thor", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "odin", name: "Odin", thumbnail: "/placeholder.svg?height=120&width=80" }, ], historical: [ { id: "napoleon", name: "Napoleon", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "cleopatra", name: "Cleopatra", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "caesar", name: "Caesar", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "leonardo", name: "Leonardo", thumbnail: "/placeholder.svg?height=120&width=80" }, ], comic: [ { id: "superhero1", name: "Hero Alpha", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "superhero2", name: "Hero Beta", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "villain1", name: "Dark Lord", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "sidekick1", name: "Sidekick", thumbnail: "/placeholder.svg?height=120&width=80" }, ], "fairy-tale": [ { id: "princess", name: "Princess", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "knight", name: "Knight", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "wizard", name: "Wizard", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "dragon", name: "Dragon", thumbnail: "/placeholder.svg?height=120&width=80" }, ], anime: [ { id: "warrior", name: "Warrior", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "mage", name: "Mage", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "ninja", name: "Ninja", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "samurai", name: "Samurai", thumbnail: "/placeholder.svg?height=120&width=80" }, ], "sci-fi": [ { id: "cyborg", name: "Cyborg", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "alien", name: "Alien", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "robot", name: "Robot", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "spacemarine", name: "Space Marine", thumbnail: "/placeholder.svg?height=120&width=80" }, ], "post-apocalyptic": [ { id: "survivor", name: "Survivor", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "raider", name: "Raider", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "mutant", name: "Mutant", thumbnail: "/placeholder.svg?height=120&width=80" }, { id: "scavenger", name: "Scavenger", thumbnail: "/placeholder.svg?height=120&width=80" }, ], } const subtitleStyles = [ { id: "bold-yellow", label: "Bold Yellow", preview: "Sample Text", className: "font-bold text-yellow-400 text-shadow-lg", fontFamily: "Inter", backgroundColor: "rgba(0, 0, 0, 0.7)", }, { id: "white-outline", label: "White Outline", preview: "Sample Text", className: "font-semibold text-white", fontFamily: "Arial", textShadow: "2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000", }, { id: "gradient-purple", label: "Gradient Purple", preview: "Sample Text", className: "font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent", fontFamily: "Montserrat", }, { id: "neon-cyan", label: "Neon Cyan", preview: "Sample Text", className: "font-bold text-cyan-400", fontFamily: "Roboto", textShadow: "0 0 10px rgba(34, 211, 238, 0.8), 0 0 20px rgba(34, 211, 238, 0.6)", }, { id: "classic-black", label: "Classic Black", preview: "Sample Text", className: "font-medium text-black", fontFamily: "Times New Roman", backgroundColor: "rgba(255, 255, 255, 0.9)", }, { id: "modern-blue", label: "Modern Blue", preview: "Sample Text", className: "font-semibold text-blue-500", fontFamily: "Helvetica", backgroundColor: "rgba(255, 255, 255, 0.8)", }, ] const alignmentOptions = [ { id: "left", label: "Left", icon: (

), }, { id: "center", label: "Center", icon: (

), }, { id: "right", label: "Right", icon: (

), }, ] const getSelectedSubtitleStyle = () => { return subtitleStyles.find((style) => style.id === selectedSubtitleStyle) || subtitleStyles[0] } const getSelectedStyleData = () => { const allStyles = [...styles, ...moreStyles] return allStyles.find((style) => style.id === selectedStyle) } const getSelectedPresetData = () => { return presets.find((preset) => preset.id === selectedPreset) } const handleStyleSelect = (styleId: string) => { setSelectedStyle(styleId) setSelectedCharacter("") // Reset character selection when style changes setIsStylesCollapsed(true) // Auto-collapse styles section when style is selected } const handlePresetSelect = (presetId: string) => { if (presetId === "add-new") { setShowAddNew(true) setSelectedPreset("") setIsPresetsCollapsed(true) // Auto-collapse presets section when "Add New" is selected } else { setSelectedPreset(presetId) setShowAddNew(false) setIsPresetsCollapsed(true) // Auto-collapse presets section when preset is selected } } const handleCharacterSelect = (characterId: string) => { setSelectedCharacter(characterId) setIsCharactersCollapsed(true) // Auto-collapse characters section when character is selected } useEffect(() => { const currentPlaceholder = placeholderExamples[placeholderIndex] let timeoutId: NodeJS.Timeout if (isTyping) { if (displayedPlaceholder.length < currentPlaceholder.length) { timeoutId = setTimeout(() => { setDisplayedPlaceholder(currentPlaceholder.slice(0, displayedPlaceholder.length + 1)) }, 50) } else { timeoutId = setTimeout(() => { setIsTyping(false) }, 1000) } } else { if (displayedPlaceholder.length > 0) { timeoutId = setTimeout(() => { setDisplayedPlaceholder(displayedPlaceholder.slice(0, -1)) }, 50) } else { setPlaceholderIndex((prev) => (prev + 1) % placeholderExamples.length) setIsTyping(true) } } return () => clearTimeout(timeoutId) }, [displayedPlaceholder, isTyping, placeholderIndex, placeholderExamples]) // Close dropdown when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { const target = event.target as HTMLElement if (!target.closest(".subtitle-dropdown")) { setIsSubtitleDropdownOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, []) const handleGenerateVideo = () => { router.push("/video-editor") } return (

{/* Breadcrumb Section */}

{">"} Create new video

{/* Main Content */}

{/* Video Title Section */}

Video Title:

setVideoTitle(e.target.value)} className="w-full text-sm font-medium" placeholder="Enter your video title..." />

{/* Two Column Layout */}

{/* Left Column */}

{/* Custom Script Section */}

Video Script:

setCustomScript(e.target.value)}
                            className="w-full p-3 text-sm min-h-[120px] resize-y"
                            placeholder={displayedPlaceholder}
                          />
                        </div>

{/* Script Options - moved directly under textarea */}
                        <div className="flex gap-3 mb-6">
                          <Button variant="outline" className="flex items-center gap-2">
                            <Upload className="h-4 w-4" />
                            Upload Script
                          </Button>
                          <Button variant="outline" className="flex items-center gap-2">
                            <Sparkles className="h-4 w-4" />
                            AI Generated Script
                          </Button>
                          <Button variant="outline" className="flex items-center gap-2">
                            <LinkIcon className="h-4 w-4" />
                            Summarize URL
                          </Button>
                        </div>
                      </div>

{/* Video Settings */}
                      <div className="space-y-6">
                        {/* Video Ratio */}
                        <div>
                          <div className="flex items-center gap-4 mb-4">
                            <div className="flex items-center gap-2 min-w-[120px]">
                              <span className="text-sm text-gray-900 font-semibold">Video Ratio:</span>
                            </div>
                            <div className="flex gap-3">
                              {videoRatios.map((ratio) => (
                                <button
                                  key={ratio.id}
                                  onClick={() => setSelectedRatio(ratio.id)}
                                  className={`px-4 py-2 rounded-md border transition-all ${
                                    selectedRatio === ratio.id
                                      ? "bg-purple-600 text-white border-purple-600"
                                      : "bg-white text-gray-700 border-gray-300 hover:border-purple-300"
                                  }`}
                                >
                                  {ratio.label}
                                </button>
                              ))}
                            </div>
                          </div>
                          <p className="text-sm text-gray-500 ml-[136px]">
                            {videoRatios.find((r) => r.id === selectedRatio)?.description}
                          </p>
                        </div>

{/* Video Length */}
                        <div>
                          <div className="flex items-center gap-4">
                            <div className="flex items-center gap-2 min-w-[120px]">
                              <span className="text-sm text-gray-900 font-semibold">Video Length:</span>
                            </div>
                            <div className="relative flex-1 max-w-[300px]">
                              <select
                                value={videoLength}
                                onChange={(e) => setVideoLength(e.target.value)}
                                className="w-full bg-white border border-gray-300 rounded-md py-2 pl-3 pr-10 text-sm appearance-none focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500"
                              >
                                {videoLengths.map((length) => (
                                  <option key={length} value={length}>
                                    {length}
                                  </option>
                                ))}
                              </select>
                              <ChevronDown className="absolute right-3 top-2.5 h-4 w-4 text-gray-500 pointer-events-none" />
                            </div>
                          </div>
                        </div>

{/* Subtitle Styling */}
                        <div>
                          <div className="flex items-center gap-4 mb-4">
                            <div className="flex items-center gap-2 min-w-[120px]">
                              <span className="text-sm text-gray-900 font-semibold">Subtitle Styling:</span>
                            </div>
                            <div className="relative flex-1 max-w-[300px] subtitle-dropdown">
                              <button
                                onClick={() => setIsSubtitleDropdownOpen(!isSubtitleDropdownOpen)}
                                className="w-full bg-white border border-gray-300 rounded-md py-3 pl-3 pr-10 text-sm text-left focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500 flex items-center justify-between"
                              >
                                <div className="flex items-center gap-3">
                                  <span
                                    className={getSelectedSubtitleStyle().className}
                                    style={{
                                      fontFamily: getSelectedSubtitleStyle().fontFamily,
                                      textShadow: getSelectedSubtitleStyle().textShadow,
                                      backgroundColor: getSelectedSubtitleStyle().backgroundColor,
                                      padding: getSelectedSubtitleStyle().backgroundColor ? "2px 6px" : "0",
                                      borderRadius: getSelectedSubtitleStyle().backgroundColor ? "4px" : "0",
                                    }}
                                  >
                                    Aa
                                  </span>
                                  <span className="text-gray-700">{getSelectedSubtitleStyle().label}</span>
                                </div>
                                <ChevronDown className="h-4 w-4 text-gray-500" />
                              </button>

{/* Custom Dropdown */}
                              {isSubtitleDropdownOpen && (
                                <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-300 rounded-md shadow-lg z-50 max-h-60 overflow-y-auto">
                                  {subtitleStyles.map((style) => (
                                    <button
                                      key={style.id}
                                      onClick={() => {
                                        setSelectedSubtitleStyle(style.id)
                                        setIsSubtitleDropdownOpen(false)
                                      }}
                                      className={`w-full px-3 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100 last:border-b-0 ${
                                        selectedSubtitleStyle === style.id ? "bg-purple-50" : ""
                                      }`}
                                    >
                                      <span
                                        className={style.className}
                                        style={{
                                          fontFamily: style.fontFamily,
                                          textShadow: style.textShadow,
                                          backgroundColor: style.backgroundColor,
                                          padding: style.backgroundColor ? "2px 6px" : "0",
                                          borderRadius: style.backgroundColor ? "4px" : "0",
                                        }}
                                      >
                                        {style.preview}
                                      </span>
                                      <div className="flex flex-col">
                                        <span className="text-sm font-medium text-gray-900">{style.label}</span>
                                        <span className="text-xs text-gray-500">{style.fontFamily}</span>
                                      </div>
                                    </button>
                                  ))}
                                </div>
                              )}
                            </div>
                          </div>
                        </div>

{/* Alignment */}
                        <div>
                          <div className="flex items-center gap-4 mb-4">
                            <div className="flex items-center gap-2 min-w-[120px]">
                              <span className="text-sm text-gray-900 font-semibold">Alignment:</span>
                            </div>
                            <div className="flex gap-3">
                              {alignmentOptions.map((alignment) => (
                                <button
                                  key={alignment.id}
                                  onClick={() => setSelectedAlignment(alignment.id)}
                                  className={`w-12 h-12 rounded-lg border transition-all flex items-center justify-center ${
                                    selectedAlignment === alignment.id
                                      ? "bg-purple-600 text-white border-purple-600"
                                      : "bg-white text-gray-700 border-gray-300 hover:border-purple-300"
                                  }`}
                                  title={alignment.label}
                                >
                                  {alignment.icon}
                                </button>
                              ))}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

{/* Right Column */}
                    <div className="space-y-6">
                      {/* My Presets */}
                      <div>
                        <div className="flex items-center justify-between mb-1.5">
                          <h3 className="text-sm text-gray-900 font-semibold">My Presets:</h3>
                          <button
                            onClick={() => setIsPresetsCollapsed(!isPresetsCollapsed)}
                            className="text-gray-500 hover:text-gray-700"
                          >
                            {isPresetsCollapsed ? (
                              <ChevronDown className="h-4 w-4" />
                            ) : (
                              <ChevronUp className="h-4 w-4" />
                            )}
                          </button>
                        </div>

{!isPresetsCollapsed && (
                          <div className="grid grid-cols-4 gap-3">
                            {/* Add New Preset */}
                            <div className="flex flex-col">
                              <div
                                className={`aspect-[9/16] rounded-md border-2 border-dashed border-gray-300 cursor-pointer transition-all duration-300 hover:border-purple-300 flex flex-col items-center justify-center ${
                                  showAddNew ? "border-purple-500 bg-purple-50" : ""
                                }`}
                                onClick={() => handlePresetSelect("add-new")}
                              >
                                <Plus className="h-8 w-8 text-gray-400 mb-2" />
                                <span className="text-xs text-gray-500">Add New</span>
                              </div>
                              <p className="text-sm font-medium text-gray-900 mt-2 text-center">Add New</p>
                            </div>

{/* Existing Presets */}
                            {presets.map((preset) => (
                              <div key={preset.id} className="flex flex-col">
                                <div
                                  className={`aspect-[9/16] rounded-md overflow-hidden cursor-pointer transition-all duration-300 hover:ring-2 hover:ring-purple-300 relative group ${
                                    selectedPreset === preset.id ? "ring-2 ring-purple-500" : ""
                                  }`}
                                  onClick={() => handlePresetSelect(preset.id)}
                                >
                                  <img
                                    src={preset.thumbnail || "/placeholder.svg"}
                                    alt={preset.name}
                                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                  />
                                  {selectedPreset === preset.id && (
                                    <div className="absolute inset-0 bg-purple-500 bg-opacity-20 border-2 border-purple-500 rounded-md"></div>
                                  )}
                                </div>
                                <p className="text-sm font-medium text-gray-900 mt-2 text-center">{preset.name}</p>
                              </div>
                            ))}
                          </div>
                        )}

{/* Collapsed view */}
                        {isPresetsCollapsed && (selectedPreset || showAddNew) && (
                          <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-md">
                            {showAddNew ? (
                              <>
                                <div className="w-12 h-16 rounded border-2 border-dashed border-gray-300 flex items-center justify-center">
                                  <Plus className="h-4 w-4 text-gray-400" />
                                </div>
                                <span className="text-sm font-medium text-gray-900">Add New Preset</span>
                              </>
                            ) : (
                              <>
                                <img
                                  src={getSelectedPresetData()?.thumbnail || "/placeholder.svg"}
                                  alt={getSelectedPresetData()?.name}
                                  className="w-12 h-16 object-cover rounded"
                                />
                                <span className="text-sm font-medium text-gray-900">
                                  {getSelectedPresetData()?.name}
                                </span>
                              </>
                            )}
                          </div>
                        )}
                      </div>

{/* Style Selection (shown when Add New is selected) */}
                      {(showAddNew || selectedStyle) && (
                        <div>
                          <div className="flex items-center justify-between mb-1.5">
                            <h3 className="text-sm text-gray-900 font-semibold">Style:</h3>
                            <button
                              onClick={() => setIsStylesCollapsed(!isStylesCollapsed)}
                              className="text-gray-500 hover:text-gray-700"
                            >
                              {isStylesCollapsed ? (
                                <ChevronDown className="h-4 w-4" />
                              ) : (
                                <ChevronUp className="h-4 w-4" />
                              )}
                            </button>
                          </div>

{!isStylesCollapsed && (
                            <>
                              <div className="grid grid-cols-4 gap-3 mb-3">
                                {styles.map((style) => (
                                  <div key={style.id} className="flex flex-col">
                                    <div
                                      className={`aspect-[9/16] rounded-md overflow-hidden cursor-pointer transition-all duration-300 hover:ring-2 hover:ring-purple-300 relative group ${
                                        selectedStyle === style.id ? "ring-2 ring-purple-500" : ""
                                      }`}
                                      onClick={() => handleStyleSelect(style.id)}
                                    >
                                      <img
                                        src={style.thumbnail || "/placeholder.svg"}
                                        alt={style.name}
                                        className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                      />
                                      {selectedStyle === style.id && (
                                        <div className="absolute inset-0 bg-purple-500 bg-opacity-20 border-2 border-purple-500 rounded-md"></div>
                                      )}
                                    </div>
                                    <p className="text-sm font-medium text-gray-900 mt-2 text-center">{style.name}</p>
                                  </div>
                                ))}
                              </div>

{/* View More Styles */}
                              {!showMoreStyles && (
                                <button
                                  onClick={() => setShowMoreStyles(true)}
                                  className="w-full py-2 text-sm text-purple-600 hover:text-purple-700 border border-purple-200 rounded-md hover:bg-purple-50 transition-colors"
                                >
                                  View More Options
                                </button>
                              )}

{/* Additional Styles */}
                              {showMoreStyles && (
                                <div className="grid grid-cols-4 gap-3 mt-3">
                                  {moreStyles.map((style) => (
                                    <div key={style.id} className="flex flex-col">
                                      <div
                                        className={`aspect-[9/16] rounded-md overflow-hidden cursor-pointer transition-all duration-300 hover:ring-2 hover:ring-purple-300 relative group ${
                                          selectedStyle === style.id ? "ring-2 ring-purple-500" : ""
                                        }`}
                                        onClick={() => handleStyleSelect(style.id)}
                                      >
                                        <img
                                          src={style.thumbnail || "/placeholder.svg"}
                                          alt={style.name}
                                          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                        />
                                        {selectedStyle === style.id && (
                                          <div className="absolute inset-0 bg-purple-500 bg-opacity-20 border-2 border-purple-500 rounded-md"></div>
                                        )}
                                      </div>
                                      <p className="text-sm font-medium text-gray-900 mt-2 text-center">{style.name}</p>
                                    </div>
                                  ))}
                                </div>
                              )}
                            </>
                          )}

{/* Collapsed view for styles */}
                          {isStylesCollapsed && selectedStyle && (
                            <div className="p-3 bg-gray-50 rounded-md">
                              <div className="flex items-center gap-2 mb-2">
                                <span className="text-sm font-medium text-gray-900">Selected Style:</span>
                              </div>
                              <div className="flex items-center gap-3">
                                <img
                                  src={getSelectedStyleData()?.thumbnail || "/placeholder.svg"}
                                  alt={getSelectedStyleData()?.name}
                                  className="w-12 h-16 object-cover rounded"
                                />
                                <div className="flex flex-col">
                                  <span className="text-sm font-medium text-gray-900">
                                    {getSelectedStyleData()?.name}
                                  </span>
                                  <span className="text-xs text-gray-500">
                                    {getSelectedStyleData()?.hasCharacters ? "With Characters" : "No Characters"}
                                  </span>
                                </div>
                              </div>
                            </div>
                          )}
                        </div>
\
                      {/* Character Selection (shown when style with characters is selected) */}
                      {selectedStyle &&
                        getSelectedStyleData()?.hasCharacters &&
                        characters?.[selectedStyle as keyof typeof characters] ? (
                          <div>
                            <div className="flex items-center justify-between mb-1.5">
                              <h3 className="text-sm text-gray-900 font-semibold">Characters:</h3>
                              <button
                                onClick={() => setIsCharactersCollapsed(!isCharactersCollapsed)}
                                className="text-gray-500 hover:text-gray-700"
                              >
                                {isCharactersCollapsed ? (
                                  <ChevronDown className="h-4 w-4" />
                                ) : (
                                  <ChevronUp className="h-4 w-4" />
                                )}
                              </button>
                            </div>

{!isCharactersCollapsed && (
                              <div className="grid grid-cols-4 gap-3">
                                {characters[selectedStyle as keyof typeof characters].map((character) => (
                                  <div key={character.id} className="flex flex-col">
                                    <div
                                      className={`aspect-[9/16] rounded-md overflow-hidden cursor-pointer transition-all duration-300 hover:ring-2 hover:ring-purple-300 relative group ${
                                        selectedCharacter === character.id ? "ring-2 ring-purple-500" : ""
                                      }`}
                                      onClick={() => handleCharacterSelect(character.id)}
                                    >
                                      <img
                                        src={character.thumbnail || "/placeholder.svg"}
                                        alt={character.name}
                                        className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                      />
                                      {selectedCharacter === character.id && (
                                        <div className="absolute inset-0 bg-purple-500 bg-opacity-20 border-2 border-purple-500 rounded-md"></div>
                                      )}
                                    </div>
                                    <p className="text-sm font-medium text-gray-900 mt-2 text-center">
                                      {character.name}
                                    </p>
                                  </div>
                                ))}
                              </div>
                            )}

{/* Collapsed view for characters */}
                            {isCharactersCollapsed && selectedCharacter && (
                              <div className="p-3 bg-gray-50 rounded-md">
                                <div className="flex items-center gap-2 mb-2">
                                  <span className="text-sm font-medium text-gray-900">Selected Character:</span>
                                </div>
                                <div className="flex items-center gap-3">
                                  <img
                                    src={
                                      characters[selectedStyle as keyof typeof characters].find(
                                        (c) => c.id === selectedCharacter,
                                      )?.thumbnail || "/placeholder.svg"
                                    }
                                    alt={
                                      characters[selectedStyle as keyof typeof characters].find(
                                        (c) => c.id === selectedCharacter,
                                      )?.name
                                    }
                                    className="w-12 h-16 object-cover rounded"
                                  />
                                  <div className="flex flex-col">
                                    <span className="text-sm font-medium text-gray-900">
                                      {
                                        characters[selectedStyle as keyof typeof characters].find(
                                          (c) => c.id === selectedCharacter,
                                        )?.name
                                      }
                                    </span>
                                    <span className="text-xs text-gray-500">{getSelectedStyleData()?.name} Style</span>
                                  </div>
                                </div>
                              </div>
                            )}
                          </div>
                        ) : null}
                    </div>
                  </div>

{/* Action Buttons */}
                  <div className="flex gap-4 pt-8 justify-end border-t border-gray-200 mt-8">
                    <Button variant="outline" className="px-8 py-2">
                      Save as Draft
                    </Button>
                    <Button
                      className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-2"
                      onClick={handleGenerateVideo}
                    >
                      Generate Video
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { useState, useEffect } from "react"
import { usePathname } from "next/navigation"
import {
  Home,
  Lightbulb,
  Copy,
  ImageIcon,
  Video,
  Calendar,
  BarChart2,
  Clock,
  BookOpen,
  FileText,
  Shield,
  User,
  Settings,
  PanelLeft,
  PanelRight,
  ChevronRight,
  HelpCircle,
  Film,
  Crown,
} from "lucide-react"

import { cn } from "@/lib/utils"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { TutorialsModal } from "@/components/tutorials-modal"

interface SidebarProps {
  inSheet?: boolean
  onNavigate?: () => void
}

export function Sidebar({ inSheet = false, onNavigate }: SidebarProps) {
  const pathname = usePathname()
  const [showTutorials, setShowTutorials] = useState(false)
  const [collapsed, setCollapsed] = useState(true)

// Check local storage for sidebar state on component mount
  useEffect(() => {
    if (!inSheet) {
      // Check if we're on the video editor page
      const isVideoEditor = pathname === "/video-editor"

if (isVideoEditor) {
        // Video editor should default to collapsed
        const savedState = localStorage.getItem("sidebarCollapsed")
        if (savedState) {
          setCollapsed(savedState === "true")
        } else {
          // Default to collapsed for video editor
          setCollapsed(true)
          localStorage.setItem("sidebarCollapsed", "true")
        }
      } else {
        // All other pages should default to expanded
        const savedState = localStorage.getItem("sidebarCollapsed")
        if (savedState) {
          setCollapsed(savedState === "true")
        } else {
          // Default to expanded for all other pages
          setCollapsed(false)
          localStorage.setItem("sidebarCollapsed", "false")
        }
      }
    }
  }, [inSheet, pathname])

// Resources with icons and tooltips
  const resources = [
    {
      title: "Resources",
      icon: HelpCircle,
      tooltip: "Access help and resources",
      href: "/resources",
    },
    {
      title: "Tutorials",
      icon: BookOpen,
      tooltip: "Learn how to use the platform",
      onClick: () => setShowTutorials(true),
    },
    {
      title: "Terms & Conditions",
      icon: FileText,
      tooltip: "Read our terms of service",
      href: "/terms",
    },
    {
      title: "Privacy Policy",
      icon: Shield,
      tooltip: "View our privacy policy",
      href: "/privacy",
    },
  ]

// Categorized routes
  const categories = [
    {
      name: " ",
      routes: [
        {
          title: "Dashboard",
          icon: Home,
          href: "/dashboard",
          tooltip: "View your dashboard",
        },
        {
          title: "Analytics",
          icon: BarChart2,
          href: "/analytics",
          tooltip: "Track your video performance",
        },
        {
          title: "My Videos",
          icon: Video,
          href: "/my-videos",
          tooltip: "Manage your video library",
          activePaths: ["/my-videos", "/faceless-video"],
        },
        {
          title: "Calendar",
          icon: Calendar,
          href: "/calendar",
          tooltip: "View your content calendar",
        },
        {
          title: "Trending Ideas",
          icon: Lightbulb,
          href: "/discover-ideas",
          tooltip: "Find viral & niche content ideas",
        },
      ],
    },
    {
      name: "Essentials",
      routes: [
        {
          title: "Bulk Scheduler",
          icon: Clock,
          href: "/bulk-scheduler",
          tooltip: "Schedule multiple videos at once",
        },
        {
          title: "Thumbnails",
          icon: ImageIcon,
          href: "/thumbnail-generator",
          tooltip: "Design eye-catching thumbnails",
        },
        {
          title: "Video Editor",
          icon: Film,
          href: "/video-editor",
          tooltip: "Edit and enhance your videos",
        },
        {
          title: "Real Clone",
          icon: Copy,
          href: "/real-clone",
        },
      ],
    },
  ]

const handleLinkClick = () => {
    if (onNavigate) {
      onNavigate()
    }
  }

const handleToggleCollapse = () => {
    const newState = !collapsed
    setCollapsed(newState)
    localStorage.setItem("sidebarCollapsed", String(newState))
    // Dispatch custom event to notify other components
    window.dispatchEvent(new CustomEvent("sidebarToggled", { detail: { collapsed: newState } }))
  }

return (
    <TooltipProvider delayDuration={300}>
      {inSheet ? (
        // Mobile sidebar (in sheet)
        <div className="h-full overflow-y-auto">
          <div className="space-y-2">
            {/* Navigation categories for mobile */}
            {categories.map((category) => (
              <div key={category.name} className="mb-4">
                <div className="px-4 py-2">
                  <span className="text-sm font-semibold text-[#666666]">{category.name}</span>
                </div>
                {category.routes.map((route) => (
                  <Link
                    key={route.href}
                    href={route.href}
                    onClick={handleLinkClick}
                    className={cn(
                      "flex items-center justify-between gap-3 px-4 py-3 text-gray-700 transition-all group",
                      (pathname === route.href || (route.activePaths && route.activePaths.includes(pathname))) &&
                        "bg-[#F5F5F5] text-[#7D3AF2] font-medium",
                    )}
                  >
                    <div className="flex items-center gap-3">
                      <route.icon className="h-5 w-5 flex-shrink-0" />
                      <span className="text-base">{route.title}</span>
                    </div>
                    <ChevronRight className="h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
                  </Link>
                ))}
              </div>
            ))}

{/* Account section for mobile */}
            <div className="mb-4">
              <div className="px-4 py-2">
                <span className="text-sm font-semibold text-[#666666]">Account</span>
              </div>
              {[
                { title: "Profile", icon: User, href: "/profile", tooltip: "View your profile" },
                { title: "Settings", icon: Settings, href: "/settings", tooltip: "Manage your settings" },
              ].map((route) => (
                <Link
                  key={route.href}
                  href={route.href}
                  onClick={handleLinkClick}
                  className={cn(
                    "flex items-center justify-between gap-3 px-4 py-3 text-gray-700 transition-all group",
                    pathname === route.href && "bg-[#F5F5F5] text-[#7D3AF2] font-medium",
                  )}
                >
                  <div className="flex items-center gap-3">
                    <route.icon className="h-5 w-5 flex-shrink-0" />
                    <span className="text-base">{route.title}</span>
                  </div>
                  <ChevronRight className="h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
                </Link>
              ))}
            </div>

{/* Resources section for mobile */}
            <div className="mt-6 pt-6 border-t border-[#E0E0E0]">
              <div className="px-4 py-2">
                <span className="text-sm font-semibold text-[#666666]">Resources</span>
              </div>
              {resources.map((resource) => (
                <div key={resource.title}>
                  {resource.onClick ? (
                    <button
                      onClick={() => {
                        resource.onClick()
                        handleLinkClick()
                      }}
                      className="flex w-full items-center justify-between gap-3 px-4 py-3 text-gray-700 transition-all group"
                    >
                      <div className="flex items-center gap-3">
                        <resource.icon className="h-5 w-5 flex-shrink-0" />
                        <span className="text-base">{resource.title}</span>
                      </div>
                      <ChevronRight className="h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </button>
                  ) : (
                    <Link
                      href={resource.href || "#"}
                      onClick={handleLinkClick}
                      className="flex items-center justify-between gap-3 px-4 py-3 text-gray-700 transition-all group"
                    >
                      <div className="flex items-center gap-3">
                        <resource.icon className="h-5 w-5 flex-shrink-0" />
                        <span className="text-base">{resource.title}</span>
                      </div>
                      <ChevronRight className="h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </Link>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      ) : (
        // Desktop sidebar
        <div
          className={cn(
            "flex h-full flex-col gap-2 p-4 font-mulish border-r border-[#E0E0E0] bg-white overflow-hidden transition-all duration-300",
            collapsed ? "w-[70px]" : "w-[256px]",
          )}
        >
          <div className="flex-1 mt-2 overflow-y-auto pr-1 -mr-1">
            <div className="space-y-4">
              {/* Render each category */}
              {categories.map((category) => (
                <div key={category.name} className="space-y-1">
                  {/* Category heading - hide when collapsed */}
                  {!collapsed && (
                    <div className="flex items-center gap-2 px-3 mb-0.5 sticky top-0 bg-white z-10">
                      <span className="text-sm font-medium text-[#666666]">{category.name}</span>
                    </div>
                  )}

{/* Category routes */}
                  <nav className="grid gap-0.5 px-1 text-sm font-medium">
                    {category.routes.map((route) => (
                      <Tooltip key={route.href} delayDuration={300}>
                        <TooltipTrigger asChild>
                          <Link
                            href={route.href}
                            className={cn(
                              "flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-gray-700 transition-all hover:text-[#7D3AF2] hover:bg-[#F5F5F5] group",
                              collapsed ? "justify-center" : "",
                              (pathname === route.href ||
                                (route.activePaths && route.activePaths.includes(pathname))) &&
                                "bg-[#F5F5F5] text-[#7D3AF2] font-medium",
                            )}
                            style={{ borderRadius: "8px" }}
                          >
                            <div className="flex items-center gap-2">
                              <route.icon className="h-4 w-4 flex-shrink-0" />
                              {!collapsed && <span className="truncate">{route.title}</span>}
                            </div>
                            {!collapsed && (
                              <ChevronRight className="h-3.5 w-3.5 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
                            )}
                          </Link>
                        </TooltipTrigger>
                        <TooltipContent side="right" className="bg-gray-900 text-white border-gray-700">
                          <p className="text-sm font-medium">{route.title}</p>
                          <p className="text-xs text-gray-300">{route.tooltip}</p>
                        </TooltipContent>
                      </Tooltip>
                    ))}
                  </nav>
                </div>
              ))}
            </div>
          </div>

{/* Sidebar collapse/expand control */}
          <div className="mt-auto mb-2">
            <Tooltip delayDuration={300}>
              <TooltipTrigger asChild>
                <button
                  onClick={handleToggleCollapse}
                  className={`flex ${
                    collapsed ? "justify-center" : "justify-between"
                  } items-center w-full px-2 py-1 text-sm text-gray-600 hover:text-[#7D3AF2] hover:bg-[#F5F5F5] rounded-md transition-colors`}
                  style={{ borderRadius: "8px" }}
                >
                  {!collapsed && <span>Collapse</span>}
                  {collapsed ? <PanelRight className="h-3.5 w-3.5" /> : <PanelLeft className="h-3.5 w-3.5" />}
                </button>
              </TooltipTrigger>
              <TooltipContent side="top" className="bg-gray-900 text-white border-gray-700">
                <p className="font-medium text-sm">{collapsed ? "Expand Sidebar" : "Collapse Sidebar"}</p>
                <p className="text-xs text-gray-300">
                  {collapsed ? "Click to expand the sidebar navigation" : "Click to collapse the sidebar"}
                </p>
              </TooltipContent>
            </Tooltip>
          </div>

{/* Premium upgrade section - only show when not collapsed */}
          {!collapsed && (
            <div className="mt-auto px-3 pb-2">
              <div className="bg-[#F0ECFD] rounded-lg p-4">
                <h3 className="text-[14px] font-medium mb-1">Upgrade to Premium</h3>
                <p className="text-[12px] font-light text-gray-700 mb-3">Get access for all features.</p>
                <button
                  className="w-full bg-white border border-gray-200 text-black py-1 rounded text-[14px] font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2"
                  onClick={() => console.log("Navigate to subscription")}
                >
                  <Crown size={14} className="text-[#F59E0B]" />
                  <span>Upgrade</span>
                </button>
              </div>

<div className="mt-4 border-t border-gray-100 pt-4">
                <div className="flex gap-3 justify-center">
                  {resources.map((resource) => (
                    <Tooltip key={resource.title} delayDuration={300}>
                      <TooltipTrigger asChild>
                        {resource.onClick ? (
                          <button
                            onClick={resource.onClick}
                            className="flex items-center justify-center h-8 w-8 rounded-md text-gray-600 hover:text-[#7D3AF2] hover:bg-[#F5F5F5] transition-colors"
                            style={{ borderRadius: "8px" }}
                            aria-label={resource.title}
                          >
                            <resource.icon className="h-4 w-4" />
                          </button>
                        ) : (
                          <Link
                            href={resource.href || "#"}
                            className="flex items-center justify-center h-8 w-8 rounded-md text-gray-600 hover:text-[#7D3AF2] hover:bg-[#F5F5F5] transition-colors"
                            style={{ borderRadius: "8px" }}
                            aria-label={resource.title}
                          >
                            <resource.icon className="h-4 w-4" />
                          </Link>
                        )}
                      </TooltipTrigger>
                      <TooltipContent side="right" className="bg-gray-900 text-white border-gray-700">
                        <p className="font-medium text-sm">{resource.title}</p>
                        <p className="text-xs text-gray-300">{resource.tooltip}</p>
                      </TooltipContent>
                    </Tooltip>
                  ))}
                </div>
              </div>
            </div>
          )}

{/* Resources section - icons only when collapsed */}
          {collapsed && (
            <div className="border-t border-[#E0E0E0] mt-4 pt-4">
              <div className="flex flex-col items-center gap-3">
                {resources.map((resource) => (
                  <Tooltip key={resource.title} delayDuration={300}>
                    <TooltipTrigger asChild>
                      {resource.onClick ? (
                        <button
                          onClick={resource.onClick}
                          className="flex items-center justify-center h-8 w-8 rounded-md text-gray-600 hover:text-[#7D3AF2] hover:bg-[#F5F5F5] transition-colors"
                          style={{ borderRadius: "8px" }}
                          aria-label={resource.title}
                        >
                          <resource.icon className="h-4 w-4" />
                        </button>
                      ) : (
                        <Link
                          href={resource.href || "#"}
                          className="flex items-center justify-center h-8 w-8 rounded-md text-gray-600 hover:text-[#7D3AF2] hover:bg-[#F5F5F5] transition-colors"
                          style={{ borderRadius: "8px" }}
                          aria-label={resource.title}
                        >
                          <resource.icon className="h-4 w-4" />
                        </Link>
                      )}
                    </TooltipTrigger>
                    <TooltipContent side="right" className="bg-gray-900 text-white border-gray-700">
                      <p className="font-medium text-sm">{resource.title}</p>
                      <p className="text-xs text-gray-300">{resource.tooltip}</p>
                    </TooltipContent>
                  </Tooltip>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

{/* Tutorials Modal */}
      <TutorialsModal open={showTutorials} onOpenChange={setShowTutorials} />
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="components/csv-upload-modal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useCallback } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { X, Upload, Download, FileText, AlertCircle } from "lucide-react"

interface CSVUploadModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onUpload: (data: { title: string; script: string }[]) => void
}

export function CSVUploadModal({ open, onOpenChange, onUpload }: CSVUploadModalProps) {
  const [isDragOver, setIsDragOver] = useState(false)
  const [uploadedFile, setUploadedFile] = useState<File | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [isProcessing, setIsProcessing] = useState(false)

const downloadTemplate = () => {
    const csvContent =
      "Video Title,Script\n" +
      '"Budget Travel Tips","Are you dreaming of traveling the world but worried about your budget? In today\'s video, I\'ll share proven strategies that helped me travel to multiple countries on less than $50 a day."\n' +
      '"Hidden Travel Gems","Today I\'m revealing hidden gems that most tourists never discover. These secret spots will give you authentic experiences without the crowds and high prices."\n' +
      '"Travel Hacks","Welcome back! I\'m sharing my top secret travel hacks that airlines don\'t want you to know. These tips will save you hundreds of dollars on your next trip."'

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "bulk_video_template.csv"
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url)
  }

const parseCSV = (text: string): { title: string; script: string }[] => {
    const lines = text.split("\n").filter((line) => line.trim())
    if (lines.length < 2) {
      throw new Error("CSV file must contain at least a header row and one data row")
    }

const header = lines[0].toLowerCase()
    if (!header.includes("video title") || !header.includes("script")) {
      throw new Error('CSV file must contain "Video Title" and "Script" columns')
    }

const data: { title: string; script: string }[] = []

for (let i = 1; i < lines.length; i++) {
      const line = lines[i].trim()
      if (!line) continue

// Simple CSV parsing - handles quoted fields
      const fields: string[] = []
      let current = ""
      let inQuotes = false

for (let j = 0; j < line.length; j++) {
        const char = line[j]

if (char === '"') {
          inQuotes = !inQuotes
        } else if (char === "," && !inQuotes) {
          fields.push(current.trim())
          current = ""
        } else {
          current += char
        }
      }
      fields.push(current.trim())

if (fields.length >= 2) {
        data.push({
          title: fields[0].replace(/^"|"$/g, ""), // Remove surrounding quotes
          script: fields[1].replace(/^"|"$/g, ""), // Remove surrounding quotes
        })
      }
    }

if (data.length === 0) {
      throw new Error("No valid data rows found in CSV file")
    }

return data
  }

const handleFileUpload = useCallback(
    async (file: File) => {
      setError(null)
      setIsProcessing(true)

try {
        if (!file.name.toLowerCase().endsWith(".csv")) {
          throw new Error("Please upload a CSV file")
        }

const text = await file.text()
        const data = parseCSV(text)

setUploadedFile(file)
        onUpload(data)
        onOpenChange(false)
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to process file")
      } finally {
        setIsProcessing(false)
      }
    },
    [onUpload, onOpenChange],
  )

const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault()
      setIsDragOver(false)

const files = Array.from(e.dataTransfer.files)
      if (files.length > 0) {
        handleFileUpload(files[0])
      }
    },
    [handleFileUpload],
  )

const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(true)
  }, [])

const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(false)
  }, [])

const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files && files.length > 0) {
      handleFileUpload(files[0])
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold">Upload Bulk Scripts</DialogTitle>
          <Button variant="ghost" size="icon" className="absolute right-4 top-4" onClick={() => onOpenChange(false)}>
            <X className="h-4 w-4" />
            <span className="sr-only">Close</span>
          </Button>
        </DialogHeader>

<div className="mt-4 space-y-6">
          {/* Template Download */}
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div className="flex items-start gap-3">
              <FileText className="h-5 w-5 text-blue-600 mt-0.5" />
              <div className="flex-1">
                <h3 className="text-sm font-medium text-blue-900 mb-1">Need a template?</h3>
                <p className="text-sm text-blue-700 mb-3">
                  Download our CSV template with the correct format including Video Title and Script columns.
                </p>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={downloadTemplate}
                  className="text-blue-700 border-blue-300 hover:bg-blue-100"
                >
                  <Download className="h-4 w-4 mr-2" />
                  Download Template
                </Button>
              </div>
            </div>
          </div>

{/* Drag and Drop Area */}
          <div
            className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
              isDragOver ? "border-purple-400 bg-purple-50" : "border-gray-300 hover:border-gray-400"
            } ${isProcessing ? "opacity-50 pointer-events-none" : ""}`}
            onDrop={handleDrop}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
          >
            <Upload className={`h-12 w-12 mx-auto mb-4 ${isDragOver ? "text-purple-500" : "text-gray-400"}`} />

{isProcessing ? (
              <div className="space-y-2">
                <div className="animate-spin rounded-full h-6 w-6 border-2 border-purple-600 border-t-transparent mx-auto"></div>
                <p className="text-sm text-gray-600">Processing your file...</p>
              </div>
            ) : (
              <div className="space-y-2">
                <p className="text-lg font-medium text-gray-900">
                  {isDragOver ? "Drop your CSV file here" : "Drag and drop your CSV file here"}
                </p>
                <p className="text-sm text-gray-500">or</p>
                <label htmlFor="file-upload" className="cursor-pointer">
                  <Button variant="outline" className="pointer-events-none">
                    Choose File
                  </Button>
                  <input id="file-upload" type="file" accept=".csv" onChange={handleFileSelect} className="hidden" />
                </label>
                <p className="text-xs text-gray-400 mt-2">Supports CSV files with Video Title and Script columns</p>
              </div>
            )}
          </div>

{/* Error Message */}
          {error && (
            <div className="bg-red-50 border border-red-200 rounded-lg p-4">
              <div className="flex items-start gap-3">
                <AlertCircle className="h-5 w-5 text-red-600 mt-0.5" />
                <div>
                  <h3 className="text-sm font-medium text-red-900 mb-1">Upload Error</h3>
                  <p className="text-sm text-red-700">{error}</p>
                </div>
              </div>
            </div>
          )}

{/* Format Requirements */}
          <div className="bg-gray-50 rounded-lg p-4">
            <h3 className="text-sm font-medium text-gray-900 mb-2">CSV Format Requirements:</h3>
            <ul className="text-sm text-gray-600 space-y-1">
              <li>• First row must contain headers: "Video Title" and "Script"</li>
              <li>• Each subsequent row represents one video</li>
              <li>• Use quotes around text that contains commas</li>
              <li>• Maximum 50 videos per upload</li>
            </ul>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/csv-upload-field.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Upload, Download, AlertCircle } from "lucide-react"

interface CSVUploadFieldProps {
  onUpload: (data: { title: string; script: string }[]) => void
  onCancel: () => void
}

export function CSVUploadField({ onUpload, onCancel }: CSVUploadFieldProps) {
  const [isDragOver, setIsDragOver] = useState(false)
  const [uploadedFile, setUploadedFile] = useState<File | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [isProcessing, setIsProcessing] = useState(false)

const header = lines[0].toLowerCase()
    if (!header.includes("video title") || !header.includes("script")) {
      throw new Error('CSV file must contain "Video Title" and "Script" columns')
    }

const data: { title: string; script: string }[] = []

for (let i = 1; i < lines.length; i++) {
      const line = lines[i].trim()
      if (!line) continue

// Simple CSV parsing - handles quoted fields
      const fields: string[] = []
      let current = ""
      let inQuotes = false

for (let j = 0; j < line.length; j++) {
        const char = line[j]

if (data.length === 0) {
      throw new Error("No valid data rows found in CSV file")
    }

return data
  }

const handleFileUpload = useCallback(
    async (file: File) => {
      setError(null)
      setIsProcessing(true)

try {
        if (!file.name.toLowerCase().endsWith(".csv")) {
          throw new Error("Please upload a CSV file")
        }

const text = await file.text()
        const data = parseCSV(text)

setUploadedFile(file)
        onUpload(data)
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to process file")
      } finally {
        setIsProcessing(false)
      }
    },
    [onUpload],
  )

const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault()
      setIsDragOver(false)

const files = Array.from(e.dataTransfer.files)
      if (files.length > 0) {
        handleFileUpload(files[0])
      }
    },
    [handleFileUpload],
  )

const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(true)
  }, [])

const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(false)
  }, [])

const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files && files.length > 0) {
      handleFileUpload(files[0])
    }
  }

return (
    <div className="space-y-4">
      {/* Template Download Section */}
      <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg bg-white">
        <div className="flex-1">
          <h3 className="text-sm font-medium text-black mb-1">Download template</h3>
          <p className="text-sm text-gray-500">
            Get our CSV template with the correct format including Video Title and Script columns.
          </p>
        </div>
        <div className="ml-4">
          <Button variant="outline" size="sm" onClick={downloadTemplate} className="flex items-center gap-2">
            <Download className="h-4 w-4" />
            Download Template
          </Button>
        </div>
      </div>

{/* Drag and Drop Area */}
      <div
        className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
          isDragOver ? "border-purple-400 bg-purple-50" : "border-gray-300 hover:border-gray-400"
        } ${isProcessing ? "opacity-50 pointer-events-none" : ""}`}
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
      >
        <Upload className={`h-12 w-12 mx-auto mb-4 ${isDragOver ? "text-purple-500" : "text-gray-400"}`} />

{isProcessing ? (
          <div className="space-y-2">
            <div className="animate-spin rounded-full h-6 w-6 border-2 border-purple-600 border-t-transparent mx-auto"></div>
            <p className="text-sm text-gray-600">Processing your file...</p>
          </div>
        ) : (
          <div className="space-y-2">
            <p className="text-lg font-medium text-gray-900">
              {isDragOver ? "Drop your CSV file here" : "Drag and drop your CSV file here"}
            </p>
            <p className="text-sm text-gray-500">or</p>
            <label htmlFor="file-upload" className="cursor-pointer">
              <Button variant="outline" className="pointer-events-none">
                Choose File
              </Button>
              <input id="file-upload" type="file" accept=".csv" onChange={handleFileSelect} className="hidden" />
            </label>
            <p className="text-xs text-gray-400 mt-2">Supports CSV files with Video Title and Script columns</p>
          </div>
        )}
      </div>

{/* Error Message */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
          <div className="flex items-start gap-3">
            <AlertCircle className="h-5 w-5 text-red-600 mt-0.5" />
            <div>
              <h3 className="text-sm font-medium text-red-900 mb-1">Upload Error</h3>
              <p className="text-sm text-red-700">{error}</p>
            </div>
          </div>
        </div>
      )}

{/* Format Requirements */}
      <div className="bg-gray-50 rounded-lg p-4">
        <h3 className="text-sm font-medium text-gray-900 mb-2">CSV Format Requirements:</h3>
        <ul className="text-sm text-gray-600 space-y-1">
          <li>• First row must contain headers: "Video Title" and "Script"</li>
          <li>• Each subsequent row represents one video</li>
          <li>• Use quotes around text that contains commas</li>
          <li>• Maximum 50 videos per upload</li>
        </ul>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/app-header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { ChevronDown } from "lucide-react"

export function AppHeader() {
  return (
    <header className="w-full border-b border-gray-200 bg-white h-[50px] px-6 flex items-center justify-between z-50">
      <div className="flex items-center">
        <Link href="/" className="flex items-center">
          <Image
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Coloured%20Version-KaxTArcLyZVmWYAEAwxBaBxqErjM7N.svg"
            alt="Syllaby"
            width={120}
            height={30}
            priority
            className="h-8 w-auto"
          />
        </Link>
      </div>

<div className="flex items-center">
        {/* Trophy/Challenge section */}
        <div className="flex items-center px-4 cursor-pointer">
          <div className="h-8 w-8 flex items-center justify-center">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 8V13" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
              <path d="M12 16V16.01" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
        </div>

{/* Separator */}
        <div className="h-8 w-px bg-[#E6EBF2] border-transparent shadow-none"></div>

{/* Coins section */}
        <div className="flex items-center gap-2 px-4 cursor-pointer">
          <div className="h-8 w-8 flex items-center justify-center">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Coins-wHSOnQ03mc8iPVf4cHrZhPUGNuvWmJ.svg"
              alt="Coins"
              width={24}
              height={24}
              className="h-6 w-6"
            />
          </div>
          <span className="text-sm font-medium">50 Coins</span>
        </div>

{/* Separator */}
        <div className="h-8 w-px bg-[#E6EBF2]"></div>

{/* User profile section */}
        <div className="flex items-center gap-3 cursor-pointer text-right px-4 pr-0">
          <div className="h-8 w-8 rounded-full bg-gray-100 flex items-center justify-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-5 w-5 text-gray-500"
            >
              <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
              <circle cx="12" cy="7" r="4" />
            </svg>
          </div>
          <div className="flex flex-col">
            <div className="flex items-center text-right">
              <span className="text-sm font-medium">Joe Smith</span>
              <ChevronDown className="ml-1 h-4 w-4" />
            </div>
            <span className="text-xs text-gray-500">Free trial account</span>
          </div>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-grid.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { useState } from "react"
import { VideoIcon, Film, User, Link, Archive, Layers, HelpCircle } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { TooltipProvider } from "@/components/ui/tooltip"
import { Button } from "@/components/ui/button"
import { TutorialVideoModal } from "@/components/tutorial-video-modal"
import { useToast } from "@/hooks/use-toast"

interface TutorialInfo {
  title: string
  description: string
  videoId: string
}

export function DashboardGrid() {
  const { toast } = useToast()
  const [tutorialOpen, setTutorialOpen] = useState(false)
  const [activeTutorial, setActiveTutorial] = useState<TutorialInfo>({
    title: "",
    description: "",
    videoId: "",
  })

const openTutorial = (title: string, description: string, videoId: string) => {
    setActiveTutorial({ title, description, videoId })
    setTutorialOpen(true)
  }

const handleCardClick = (title: string) => {
    toast({
      title: "Coming Soon",
      description: `${title} feature will be available soon.`,
      duration: 3000,
    })
  }

return (
    <div className="p-6 bg-[#f8f8f8] min-h-screen">
      <div className="max-w-7xl mx-auto">
        <TooltipProvider delayDuration={300}>
          <div id="video-creation-section" className="grid grid-cols-2 md:grid-cols-12 gap-4">
            {/* First row */}
            <Card
              id="faceless-videos-card"
              className="col-span-2 md:col-span-6 overflow-hidden border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer relative group bg-white h-[260px]"
              style={{ borderRadius: "12px" }}
              onClick={() => (window.location.href = "/faceless-video")}
            >
              {/* Hover gradient overlay - light purple to white */}
              <div className="absolute inset-0 bg-gradient-to-b from-[#7D3AF2]/10 to-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

{/* Content */}
              <div className="p-6 flex flex-col h-full relative z-10">
                {/* Top row with category, badge, and question mark */}
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium tracking-wider text-[#7D3AF2]">FACELESS</span>
                  <div className="flex items-center gap-2">
                    {/* Most Used badge - static, no interactions */}
                    <Badge
                      className="bg-white text-[#7D3AF2] border border-[#E0E0E0] pointer-events-none hidden sm:block"
                      style={{ borderRadius: "4px" }}
                    >
                      ⭐ Most Used
                    </Badge>
                    {/* Question mark icon */}
                    <button
                      onClick={(e) => {
                        e.stopPropagation()
                        openTutorial(
                          "Turn Text into Engaging Videos",
                          "Learn how to transform your scripts into captivating videos without showing your face",
                          "text-to-video",
                        )
                      }}
                      className="flex items-center justify-center h-6 w-6 rounded-full bg-[#F5F0FF] text-[#7D3AF2] hover:bg-[#7D3AF2] hover:text-white transition-colors"
                    >
                      <HelpCircle className="h-4 w-4" />
                    </button>
                  </div>
                </div>

{/* Title */}
                <h3 className="text-lg md:text-xl font-semibold mt-2 text-gray-800 group-hover:text-gray-900 transition-colors duration-300">
                  Turn Text into Engaging Videos
                </h3>

{/* Description */}
                <p className="text-xs md:text-sm text-gray-600 mt-2 mb-auto">
                  Transform your written content into engaging videos without showing your face
                </p>

{/* Icon at bottom right corner - with hover animation and position change */}
                <div className="absolute bottom-[-18px] right-[-18px] text-gray-300 group-hover:text-[#7D3AF2] transition-all duration-300 group-hover:scale-110 group-hover:-rotate-6 group-hover:bottom-[-8px] group-hover:right-[-8px]">
                  <VideoIcon className="h-16 md:h-20 w-16 md:w-20" />
                </div>

{/* Create button with enhanced hover effect */}
                <Button
                  variant="outline"
                  size="sm"
                  className="mt-4 self-start bg-white hover:bg-[#7D3AF2] border-gray-200 text-gray-700 hover:text-white hover:border-[#7D3AF2] transition-all duration-200 group-hover:bg-[#7D3AF2] group-hover:text-white group-hover:border-[#7D3AF2] text-xs md:text-sm"
                  onClick={(e) => {
                    e.stopPropagation()
                    window.location.href = "/faceless-video"
                  }}
                >
                  Create Now
                </Button>
              </div>
            </Card>

<Card
              id="b-roll-videos-card"
              className="col-span-1 md:col-span-3 overflow-hidden border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer relative group bg-white h-[260px]"
              style={{ borderRadius: "12px" }}
              onClick={() => handleCardClick("B-roll Videos")}
            >
              {/* Hover gradient overlay - light purple to white */}
              <div className="absolute inset-0 bg-gradient-to-b from-[#7D3AF2]/10 to-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

{/* Content */}
              <div className="p-4 md:p-6 flex flex-col h-full relative z-10">
                {/* Category and Tutorial Icon */}
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium tracking-wider text-[#7D3AF2]">STOCK</span>
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      openTutorial(
                        "B-roll Videos",
                        "Learn how to enhance your videos with professional stock footage",
                        "b-roll",
                      )
                    }}
                    className="flex items-center justify-center h-6 w-6 rounded-full bg-[#F5F0FF] text-[#7D3AF2] hover:bg-[#7D3AF2] hover:text-white transition-colors"
                  >
                    <HelpCircle className="h-4 w-4" />
                  </button>
                </div>

{/* Title */}
                <h3 className="text-lg md:text-xl font-semibold mt-2 text-gray-800 group-hover:text-gray-900 transition-colors duration-300">
                  B-roll Videos
                </h3>

{/* Description */}
                <p className="text-xs md:text-sm text-gray-600 mt-2 mb-auto">
                  Add professional stock footage to enhance your main video content
                </p>

{/* Icon at bottom right corner - with hover animation and position change */}
                <div className="absolute bottom-[-18px] right-[-18px] text-gray-300 group-hover:text-[#7D3AF2] transition-all duration-300 group-hover:scale-110 group-hover:-rotate-6 group-hover:bottom-[-8px] group-hover:right-[-8px]">
                  <Film className="h-16 md:h-20 w-16 md:w-20" />
                </div>

{/* Create button with enhanced hover effect */}
                <Button
                  variant="outline"
                  size="sm"
                  className="mt-4 self-start bg-white hover:bg-[#7D3AF2] border-gray-200 text-gray-700 hover:text-white hover:border-[#7D3AF2] transition-all duration-200 group-hover:bg-[#7D3AF2] group-hover:text-white group-hover:border-[#7D3AF2] text-xs md:text-sm"
                  onClick={(e) => {
                    e.stopPropagation()
                    handleCardClick("B-roll Videos")
                  }}
                >
                  Create Now
                </Button>
              </div>
            </Card>

<Card
              id="avatar-videos-card"
              className="col-span-1 md:col-span-3 overflow-hidden border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer relative group bg-white h-[260px]"
              style={{ borderRadius: "12px" }}
              onClick={() => handleCardClick("AI Avatar Videos")}
            >
              {/* Hover gradient overlay - light purple to white */}
              <div className="absolute inset-0 bg-gradient-to-b from-[#7D3AF2]/10 to-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

{/* Content */}
              <div className="p-4 md:p-6 flex flex-col h-full relative z-10">
                {/* Category and Tutorial Icon */}
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium tracking-wider text-[#7D3AF2]">AVATAR</span>
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      openTutorial(
                        "AI Avatar Videos",
                        "Learn how to create videos with realistic AI presenters",
                        "avatar",
                      )
                    }}
                    className="flex items-center justify-center h-6 w-6 rounded-full bg-[#F5F0FF] text-[#7D3AF2] hover:bg-[#7D3AF2] hover:text-white transition-colors"
                  >
                    <HelpCircle className="h-4 w-4" />
                  </button>
                </div>

{/* Title */}
                <h3 className="text-lg md:text-xl font-semibold mt-2 text-gray-800 group-hover:text-gray-900 transition-colors duration-300">
                  AI Avatar Videos
                </h3>

{/* Description */}
                <p className="text-xs md:text-sm text-gray-600 mt-2 mb-auto">
                  Let AI presenters deliver your script with realistic human-like avatars
                </p>

{/* Icon at bottom right corner - with hover animation and position change */}
                <div className="absolute bottom-[-18px] right-[-18px] text-gray-300 group-hover:text-[#7D3AF2] transition-all duration-300 group-hover:scale-110 group-hover:-rotate-6 group-hover:bottom-[-8px] group-hover:right-[-8px]">
                  <User className="h-16 md:h-20 w-16 md:w-20" />
                </div>

{/* Create button with enhanced hover effect */}
                <Button
                  variant="outline"
                  size="sm"
                  className="mt-4 self-start bg-white hover:bg-[#7D3AF2] border-gray-200 text-gray-700 hover:text-white hover:border-[#7D3AF2] transition-all duration-200 group-hover:bg-[#7D3AF2] group-hover:text-white group-hover:border-[#7D3AF2] text-xs md:text-sm"
                  onClick={(e) => {
                    e.stopPropagation()
                    handleCardClick("AI Avatar Videos")
                  }}
                >
                  Create Now
                </Button>
              </div>
            </Card>

{/* Second row */}
            <Card
              id="url-to-video-card"
              className="col-span-1 md:col-span-3 overflow-hidden border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer relative group bg-white h-[260px]"
              style={{ borderRadius: "12px" }}
              onClick={() => handleCardClick("URL to Video")}
            >
              {/* Hover gradient overlay - light purple to white */}
              <div className="absolute inset-0 bg-gradient-to-b from-[#7D3AF2]/10 to-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

{/* Content */}
              <div className="p-4 md:p-6 flex flex-col h-full relative z-10">
                {/* Category and Tutorial Icon */}
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium tracking-wider text-[#7D3AF2]">PRODUCT</span>
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      openTutorial(
                        "URL to Video",
                        "Learn how to convert product pages into compelling videos",
                        "url-to-video",
                      )
                    }}
                    className="flex items-center justify-center h-6 w-6 rounded-full bg-[#F5F0FF] text-[#7D3AF2] hover:bg-[#7D3AF2] hover:text-white transition-colors"
                  >
                    <HelpCircle className="h-4 w-4" />
                  </button>
                </div>

{/* Title */}
                <h3 className="text-lg md:text-xl font-semibold mt-2 text-gray-800 group-hover:text-gray-900 transition-colors duration-300">
                  URL to Video
                </h3>

{/* Description */}
                <p className="text-xs md:text-sm text-gray-600 mt-2 mb-auto">
                  Convert product pages and web content into compelling video ads
                </p>

{/* Icon at bottom right corner - with hover animation and position change */}
                <div className="absolute bottom-[-18px] right-[-18px] text-gray-300 group-hover:text-[#7D3AF2] transition-all duration-300 group-hover:scale-110 group-hover:-rotate-6 group-hover:bottom-[-8px] group-hover:right-[-8px]">
                  <Link className="h-16 md:h-20 w-16 md:w-20" />
                </div>

{/* Create button with enhanced hover effect */}
                <Button
                  variant="outline"
                  size="sm"
                  className="mt-4 self-start bg-white hover:bg-[#7D3AF2] border-gray-200 text-gray-700 hover:text-white hover:border-[#7D3AF2] transition-all duration-200 group-hover:bg-[#7D3AF2] group-hover:text-white group-hover:border-[#7D3AF2] text-xs md:text-sm"
                  onClick={(e) => {
                    e.stopPropagation()
                    handleCardClick("URL to Video")
                  }}
                >
                  Create Now
                </Button>
              </div>
            </Card>

<Card
              id="video-vault-card"
              className="col-span-1 md:col-span-3 overflow-hidden border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer relative group bg-white h-[260px]"
              style={{ borderRadius: "12px" }}
              onClick={() => handleCardClick("Video Vault")}
            >
              {/* Hover gradient overlay - light purple to white */}
              <div className="absolute inset-0 bg-gradient-to-b from-[#7D3AF2]/10 to-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

{/* Content */}
              <div className="p-4 md:p-6 flex flex-col h-full relative z-10">
                {/* Category and Tutorial Icon */}
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium tracking-wider text-[#7D3AF2]">LIBRARY</span>
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      openTutorial(
                        "Video Vault",
                        "Learn how to use our extensive library of stock videos",
                        "video-vault",
                      )
                    }}
                    className="flex items-center justify-center h-6 w-6 rounded-full bg-[#F5F0FF] text-[#7D3AF2] hover:bg-[#7D3AF2] hover:text-white transition-colors"
                  >
                    <HelpCircle className="h-4 w-4" />
                  </button>
                </div>

{/* Title */}
                <h3 className="text-lg md:text-xl font-semibold mt-2 text-gray-800 group-hover:text-gray-900 transition-colors duration-300">
                  Video Vault
                </h3>

{/* Description */}
                <p className="text-xs md:text-sm text-gray-600 mt-2 mb-auto">
                  Access thousands of stock videos to overlay with your custom script
                </p>

{/* Icon at bottom right corner - with hover animation and position change */}
                <div className="absolute bottom-[-18px] right-[-18px] text-gray-300 group-hover:text-[#7D3AF2] transition-all duration-300 group-hover:scale-110 group-hover:-rotate-6 group-hover:bottom-[-8px] group-hover:right-[-8px]">
                  <Archive className="h-16 md:h-20 w-16 md:w-20" />
                </div>

{/* Create button with enhanced hover effect */}
                <Button
                  variant="outline"
                  size="sm"
                  className="mt-4 self-start bg-white hover:bg-[#7D3AF2] border-gray-200 text-gray-700 hover:text-white hover:border-[#7D3AF2] transition-all duration-200 group-hover:bg-[#7D3AF2] group-hover:text-white group-hover:border-[#7D3AF2] text-xs md:text-sm"
                  onClick={(e) => {
                    e.stopPropagation()
                    handleCardClick("Video Vault")
                  }}
                >
                  Create Now
                </Button>
              </div>
            </Card>

<Card
              id="bulk-videos-card"
              className="col-span-2 md:col-span-6 overflow-hidden border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer relative group bg-white h-[260px]"
              style={{ borderRadius: "12px" }}
              onClick={() => (window.location.href = "/bulk-scheduler")}
            >
              {/* Hover gradient overlay - light purple to white */}
              <div className="absolute inset-0 bg-gradient-to-b from-[#7D3AF2]/10 to-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

{/* Content */}
              <div className="p-6 flex flex-col h-full relative z-10">
                {/* Category and Tutorial Icon */}
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium tracking-wider text-[#7D3AF2]">BATCH</span>
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      openTutorial(
                        "Bulk Video Creation",
                        "Learn how to create and schedule multiple videos at once",
                        "bulk-scheduler",
                      )
                    }}
                    className="flex items-center justify-center h-6 w-6 rounded-full bg-[#F5F0FF] text-[#7D3AF2] hover:bg-[#7D3AF2] hover:text-white transition-colors"
                  >
                    <HelpCircle className="h-4 w-4" />
                  </button>
                </div>

{/* Title */}
                <h3 className="text-lg md:text-xl font-semibold mt-2 text-gray-800 group-hover:text-gray-900 transition-colors duration-300">
                  Bulk Video Creation & Scheduling
                </h3>

{/* Description */}
                <p className="text-xs md:text-sm text-gray-600 mt-2 mb-auto">
                  Create multiple videos at once and schedule them across platforms
                </p>

{/* Icon at bottom right corner - with hover animation and position change */}
                <div className="absolute bottom-[-18px] right-[-18px] text-gray-300 group-hover:text-[#7D3AF2] transition-all duration-300 group-hover:scale-110 group-hover:-rotate-6 group-hover:bottom-[-8px] group-hover:right-[-8px]">
                  <Layers className="h-16 md:h-20 w-16 md:w-20" />
                </div>

{/* Create button with enhanced hover effect */}
                <Button
                  variant="outline"
                  size="sm"
                  className="mt-4 self-start bg-white hover:bg-[#7D3AF2] border-gray-200 text-gray-700 hover:text-white hover:border-[#7D3AF2] transition-all duration-200 group-hover:bg-[#7D3AF2] group-hover:text-white group-hover:border-[#7D3AF2] text-xs md:text-sm"
                  onClick={(e) => {
                    e.stopPropagation()
                    window.location.href = "/bulk-scheduler"
                  }}
                >
                  Create Now
                </Button>
              </div>
            </Card>

{/* Tutorial Modal */}
            <TutorialVideoModal
              open={tutorialOpen}
              onOpenChange={setTutorialOpen}
              title={activeTutorial.title}
              description={activeTutorial.description}
              videoId={activeTutorial.videoId}
            />
          </div>
        </TooltipProvider>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 262 83% 58%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 262 83% 58%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 262 83% 58%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 262 83% 58%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.hide-time-icon::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
  -webkit-appearance: none;
}
[V0_FILE]typescriptreact:file="app/bulk-scheduler/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Sidebar } from "@/components/sidebar"
import { AppHeader } from "@/components/app-header"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { CSVUploadField } from "@/components/csv-upload-field"
import {
  Upload,
  TrendingUp,
  Plus,
  Calendar,
  HelpCircle,
  Clock,
  ChevronDown,
  ChevronUp,
  CircleCheckBigIcon,
  Check,
} from "lucide-react"

interface UploadedVideo {
  title: string
  script: string
}

export default function BulkSchedulerPage() {
  const [videoTopic, setVideoTopic] = useState("")
  const [selectedPlatforms, setSelectedPlatforms] = useState<string[]>(["tiktok", "facebook", "instagram"])
  const [autoGenerated, setAutoGenerated] = useState(false)
  const [enableCTA, setEnableCTA] = useState(false)
  const [duration, setDuration] = useState([7])
  const [postsPerDay, setPostsPerDay] = useState([1])
  const [startDate, setStartDate] = useState("03 - 11 - 2025")
  const [expandedScripts, setExpandedScripts] = useState<{ [key: string]: boolean }>({})
  const [videoTimes, setVideoTimes] = useState<{ [key: string]: string }>({})
  const [uploadedVideos, setUploadedVideos] = useState<UploadedVideo[]>([])
  const [isUsingUploadedContent, setIsUsingUploadedContent] = useState(false)
  const [showUploadField, setShowUploadField] = useState(false)
  const maxCharCount = 250

const [placeholderIndex, setPlaceholderIndex] = useState(0)
  const [displayedPlaceholder, setDisplayedPlaceholder] = useState("")
  const [isTyping, setIsTyping] = useState(true)

const placeholderExamples = [
    "How to travel the world on a budget...",
    "Top 10 productivity tips for remote workers...",
    "Best cooking hacks for busy professionals...",
    "Fitness routines you can do at home...",
    "Investment strategies for beginners...",
  ]

const [editingScript, setEditingScript] = useState<string | null>(null)
  const [editedScriptContent, setEditedScriptContent] = useState("")

const handleCSVUpload = (data: UploadedVideo[]) => {
    setUploadedVideos(data)
    setIsUsingUploadedContent(true)
    setShowUploadField(false)
    // Clear the video topic when using uploaded content
    setVideoTopic("")
  }

const handleUploadBulkScript = () => {
    setShowUploadField(true)
    setIsUsingUploadedContent(false)
  }

const handleCancelUpload = () => {
    setShowUploadField(false)
  }

const switchToManualInput = () => {
    setIsUsingUploadedContent(false)
    setUploadedVideos([])
    setShowUploadField(false)
  }

// Generate video schedules based on start date, duration, and posts per day
  const generateVideoSchedules = () => {
    const schedules = []
    const startDateParts = startDate.split(" - ")
    const day = Number.parseInt(startDateParts[0])
    const month = Number.parseInt(startDateParts[1])
    const year = Number.parseInt(startDateParts[2])

const baseDate = new Date(year, month - 1, day)

let videoCounter = 1

if (isUsingUploadedContent && uploadedVideos.length > 0) {
      // Use uploaded content
      for (let day = 0; day < duration[0]; day++) {
        const currentDate = new Date(baseDate)
        currentDate.setDate(baseDate.getDate() + day)

const dateString = currentDate.toLocaleDateString("en-US", {
          year: "numeric",
          month: "long",
          day: "numeric",
        })

for (let post = 0; post < postsPerDay[0]; post++) {
          const videoIndex = (videoCounter - 1) % uploadedVideos.length
          const uploadedVideo = uploadedVideos[videoIndex]
          const videoId = `video-${videoCounter}`

schedules.push({
            id: videoId,
            title: uploadedVideo.title,
            date: dateString,
            estimatedTime: `${((videoCounter * 7) % 60) + 30} seconds`,
            script: uploadedVideo.script,
          })

// Initialize video time if not exists
          if (!videoTimes[videoId]) {
            setVideoTimes((prev) => ({
              ...prev,
              [videoId]: "09:00",
            }))
          }

videoCounter++
        }
      }
    } else {
      // Use default content generation
      const videoTopics = [
        "Budget Travel Tips",
        "Hidden Travel Gems",
        "Travel Hacks",
        "Accommodation Guide",
        "Local Food Experiences",
        "Transportation Savings",
        "Travel Safety Tips",
        "Cultural Experiences",
        "Photography Tips",
        "Travel Planning",
      ]

const scripts = [
        "Are you dreaming of traveling the world but worried about your budget? In today's video, I'll share proven strategies that helped me travel to multiple countries on less than $50 a day.",
        "Today I'm revealing hidden gems that most tourists never discover. These secret spots will give you authentic experiences without the crowds and high prices.",
        "Welcome back! I'm sharing my top secret travel hacks that airlines don't want you to know. These tips will save you hundreds of dollars on your next trip.",
        "Finding affordable accommodation can make or break your travel budget. I'll reveal the best platforms and strategies to find amazing places to stay for under $30 a night.",
        "Food is one of the best parts of traveling, but it doesn't have to break your budget. Here's how to eat like a local without spending a fortune.",
        "Transportation costs can quickly add up when traveling. Today I'm sharing insider tips to get around any city for a fraction of the typical tourist price.",
        "Safety should always be your top priority when traveling. Here are essential tips to stay safe while exploring new destinations on a budget.",
        "The best travel experiences come from connecting with local culture. I'll show you how to have authentic cultural experiences without expensive tours.",
        "Want to capture stunning travel photos without expensive equipment? Here are my top photography tips using just your smartphone.",
        "Proper planning can save you thousands on your next trip. Here's my step-by-step guide to planning the perfect budget adventure.",
      ]

for (let day = 0; day < duration[0]; day++) {
        const currentDate = new Date(baseDate)
        currentDate.setDate(baseDate.getDate() + day)

const dateString = currentDate.toLocaleDateString("en-US", {
          year: "numeric",
          month: "long",
          day: "numeric",
        })

for (let post = 0; post < postsPerDay[0]; post++) {
          const videoId = `video-${videoCounter}`
          const topicIndex = (videoCounter - 1) % videoTopics.length
          const scriptIndex = (videoCounter - 1) % scripts.length

schedules.push({
            id: videoId,
            title: `Video ${videoCounter}: ${videoTopics[topicIndex]}`,
            date: dateString,
            estimatedTime: `${((videoCounter * 7) % 60) + 30} seconds`,
            script: scripts[scriptIndex],
          })

videoCounter++
        }
      }
    }

return schedules
  }

const videoSchedules = generateVideoSchedules()

// Group videos by date
  const groupedVideos = videoSchedules.reduce(
    (acc, video) => {
      if (!acc[video.date]) {
        acc[video.date] = []
      }
      acc[video.date].push(video)
      return acc
    },
    {} as { [date: string]: typeof videoSchedules },
  )

const toggleScript = (videoId: string) => {
    setExpandedScripts((prev) => ({
      ...prev,
      [videoId]: !prev[videoId],
    }))
  }

const handleTimeChange = (videoId: string, newTime: string) => {
    setVideoTimes((prev) => ({
      ...prev,
      [videoId]: newTime,
    }))
  }

const startEditingScript = (videoId: string, currentScript: string) => {
    setEditingScript(videoId)
    setEditedScriptContent(currentScript)
  }

const saveEditedScript = (videoId: string) => {
    // Update the script in uploadedVideos if using uploaded content
    if (isUsingUploadedContent) {
      setUploadedVideos((prev) =>
        prev.map((video, index) => {
          const videoIndex = (Number.parseInt(videoId.split("-")[1]) - 1) % prev.length
          if (index === videoIndex) {
            return { ...video, script: editedScriptContent }
          }
          return video
        }),
      )
    }
    setEditingScript(null)
    setEditedScriptContent("")
  }

const cancelEditingScript = () => {
    setEditingScript(null)
    setEditedScriptContent("")
  }

useEffect(() => {
    const currentPlaceholder = placeholderExamples[placeholderIndex]
    let timeoutId: NodeJS.Timeout

if (isTyping) {
      if (displayedPlaceholder.length < currentPlaceholder.length) {
        timeoutId = setTimeout(() => {
          setDisplayedPlaceholder(currentPlaceholder.slice(0, displayedPlaceholder.length + 1))
        }, 50)
      } else {
        timeoutId = setTimeout(() => {
          setIsTyping(false)
        }, 1000)
      }
    } else {
      if (displayedPlaceholder.length > 0) {
        timeoutId = setTimeout(() => {
          setDisplayedPlaceholder(displayedPlaceholder.slice(0, -1))
        }, 50)
      } else {
        setPlaceholderIndex((prev) => (prev + 1) % placeholderExamples.length)
        setIsTyping(true)
      }
    }

return () => clearTimeout(timeoutId)
  }, [displayedPlaceholder, isTyping, placeholderIndex, placeholderExamples])

const socialPlatforms = [
    { id: "tiktok", name: "@TravelBG", icon: "🎵", bgColor: "bg-black" },
    { id: "facebook", name: "@Foodie", icon: "f", bgColor: "bg-blue-600" },
    { id: "instagram", name: "@VLOGs", icon: "📷", bgColor: "bg-gradient-to-br from-purple-600 to-pink-600" },
    { id: "linkedin", name: "@FunVid", icon: "in", bgColor: "bg-blue-700" },
  ]

const togglePlatform = (platformId: string) => {
    setSelectedPlatforms((prev) =>
      prev.includes(platformId) ? prev.filter((id) => id !== platformId) : [...prev, platformId],
    )
  }

const handleVideoTopicChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const value = e.target.value
    if (value.length <= maxCharCount) {
      setVideoTopic(value)
    }
  }

return (
    <div className="flex flex-col h-screen bg-white">
      <AppHeader />
      <div className="flex flex-1 overflow-hidden">
        <Sidebar inSheet={false} />
        <div className="flex-1 flex flex-col overflow-hidden">
          {/* Breadcrumb Section */}
          <div className="border-b border-gray-200 px-6 py-4 bg-white">
            <div className="flex items-center text-sm text-gray-500">
              <button className="text-gray-500 hover:text-gray-700 text-sm">Calendar</button>
              <span className="mx-2">{">"}</span>
              <span className="text-gray-900 font-semibold">Create Bulk Scheduler</span>
            </div>
          </div>

{/* Main Content */}
          <div className="flex-1 overflow-auto bg-slate-50">
            <div className="p-4">
              <div className="bg-white rounded-lg shadow-sm border">
                <div className="p-6">
                  {/* Video Topic Section */}
                  <div className="mb-8">
                    <div className="flex items-center justify-between mb-4">
                      <label className="text-sm font-semibold text-gray-900">Video Topic:</label>
                      <div className="flex gap-3">
                        <Button variant="outline" size="sm" className="flex items-center gap-2 text-sm">
                          <TrendingUp className="h-4 w-4" />
                          Trending Topic
                        </Button>
                        {showUploadField ? (
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={handleCancelUpload}
                            className="flex items-center gap-2 text-sm"
                          >
                            Custom Script
                          </Button>
                        ) : !isUsingUploadedContent ? (
                          <Button
                            variant="outline"
                            className="flex items-center gap-2 text-sm"
                            onClick={handleUploadBulkScript}
                          >
                            <Upload className="h-4 w-4" />
                            Upload Bulk Script
                          </Button>
                        ) : null}
                      </div>
                    </div>

{/* Show upload field, upload status, or manual input */}
                    {showUploadField ? (
                      <CSVUploadField onUpload={handleCSVUpload} onCancel={handleCancelUpload} />
                    ) : isUsingUploadedContent ? (
                      <div className="mb-4">
                        <div className="border rounded-lg p-4 bg-transparent border-transparent px-0 py-[0]">
                          <div className="flex items-start gap-3">
                            <CircleCheckBigIcon className="h-5 w-5 text-green-600 mt-0.5" />
                            <div className="flex-1">
                              <h3 className="text-sm mb-1 text-slate-950 font-bold">CSV File Uploaded Successfully</h3>
                              <p className="text-sm mb-3 text-gray-500">
                                {uploadedVideos.length} videos loaded from your CSV file. The scheduled videos below
                                will use your uploaded content.
                              </p>
                              <div className="flex gap-2">
                                <Button variant="outline" size="sm" onClick={switchToManualInput} className="text-sm">
                                  Custom Script
                                </Button>
                                <Button
                                  variant="outline"
                                  size="sm"
                                  onClick={() => setShowUploadField(true)}
                                  className="text-sm"
                                >
                                  Upload Different File
                                </Button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    ) : (
                      <div className="mb-4 relative">
                        <Textarea
                          value={videoTopic}
                          onChange={handleVideoTopicChange}
                          className="w-full p-3 text-sm min-h-[100px] resize-y"
                          placeholder={displayedPlaceholder}
                          maxLength={maxCharCount}
                        />
                        <div className="absolute bottom-2 right-2 text-xs text-gray-400">
                          {videoTopic.length}/{maxCharCount}
                        </div>
                      </div>
                    )}
                  </div>

{/* Duration, Posts per day, and Start Date */}
                  <div className="grid grid-cols-3 gap-8 mb-8">
                    <div>
                      <div className="flex items-center gap-2 mb-2">
                        <span className="text-sm font-semibold text-gray-900">Start Date</span>
                        <HelpCircle className="h-4 w-4 text-gray-400" />
                      </div>
                      <div className="relative">
                        <Input
                          value={startDate}
                          onChange={(e) => setStartDate(e.target.value)}
                          className="pr-10 text-sm"
                        />
                        <Calendar className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                      </div>
                      <p className="text-sm text-gray-500 mt-2">(Local timezone: India Standard Time)</p>
                    </div>

<div>
                      <div className="flex items-center gap-2 mb-4">
                        <span className="text-sm font-semibold text-gray-900">Duration</span>
                        <HelpCircle className="h-4 w-4 text-gray-400" />
                      </div>
                      <Slider value={duration} onValueChange={setDuration} max={30} min={1} step={1} className="mb-2" />
                      <div className="flex justify-between text-sm text-gray-500">
                        <span className="flex items-center gap-1">
                          <div className="w-2 h-2 bg-purple-600 rounded-full"></div>
                          {duration[0]} days
                        </span>
                        <span>Max: 30 days</span>
                      </div>
                    </div>

<div>
                      <div className="flex items-center gap-2 mb-4">
                        <span className="text-sm font-semibold text-gray-900">Posts per day</span>
                        <HelpCircle className="h-4 w-4 text-gray-400" />
                      </div>
                      <Slider
                        value={postsPerDay}
                        onValueChange={setPostsPerDay}
                        max={5}
                        min={1}
                        step={1}
                        className="mb-2"
                      />
                      <div className="flex justify-between text-sm text-gray-500">
                        <span className="flex items-center gap-1">
                          <div className="w-2 h-2 bg-purple-600 rounded-full"></div>
                          {postsPerDay[0]} post
                        </span>
                        <span>Max: 5 posts</span>
                      </div>
                    </div>
                  </div>

{/* Divider */}
                  <div className="border-t border-gray-200 my-8"></div>

{/* Select Social Media */}
                  <div className="mb-8">
                    <h3 className="text-sm font-semibold text-gray-900 mb-4">Select Social Media</h3>
                    <div className="flex gap-4">
                      {socialPlatforms.map((platform) => (
                        <div key={platform.id} className="flex flex-col items-center">
                          <button
                            onClick={() => togglePlatform(platform.id)}
                            className={`relative w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-sm transition-all ${
                              platform.bgColor
                            } ${
                              selectedPlatforms.includes(platform.id)
                                ? "ring-4 ring-purple-500 ring-offset-2"
                                : "opacity-70 hover:opacity-100"
                            }`}
                          >
                            {platform.icon}
                            {selectedPlatforms.includes(platform.id) && (
                              <div className="absolute -top-1 -right-1 w-6 h-6 bg-[#854EFF] rounded-full flex items-center justify-center">
                                <Check className="h-3 w-3 text-white" />
                              </div>
                            )}
                          </button>
                          <span className="text-xs text-gray-600 mt-2">{platform.name}</span>
                        </div>
                      ))}
                      <div className="flex flex-col items-center">
                        <button className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-300 transition-colors text-sm">
                          <Plus className="h-6 w-6" />
                        </button>
                        <span className="text-xs text-gray-600 mt-2">Add More</span>
                      </div>
                    </div>
                  </div>

{/* Options */}
                  <div className="mb-8">
                    <div className="space-y-4">
                      <div className="flex items-center justify-start mx-0 px-0">
                        <Switch checked={autoGenerated} onCheckedChange={setAutoGenerated} />
                        <span className="text-gray-700 mx-3 text-sm">Auto Generated AI Description and Tags</span>
                      </div>
                      <div className="flex items-center justify-start">
                        <Switch checked={enableCTA} onCheckedChange={setEnableCTA} />
                        <span className="text-gray-700 mx-3 text-sm">Enable Call to actions, Tags & Links</span>
                      </div>

{/* Expanded CTA Fields */}
                      {enableCTA && (
                        <div className="mt-6 p-4 bg-gray-50 rounded-lg border">
                          <div className="space-y-4">
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-2">
                                Call to Action Link
                              </label>
                              <Input type="url" placeholder="https://example.com" className="w-full text-sm" />
                            </div>

<div>
                              <label className="block text-sm font-medium text-gray-700 mb-2">
                                Tags (comma separated)
                              </label>
                              <Input
                                type="text"
                                placeholder="#travel, #budget, #tips, #lifestyle"
                                className="w-full text-sm"
                              />
                            </div>

<div>
                              <label className="block text-sm font-medium text-gray-700 mb-2">
                                Call to Action Text
                              </label>
                              <Input
                                type="text"
                                placeholder="Visit our website for more tips!"
                                className="w-full text-sm"
                              />
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>

{/* Divider */}
                  <div className="border-t border-gray-200 my-8"></div>

{/* Scheduled upcoming videos times */}
                  <div className="mb-8">
                    <div className="flex items-center gap-2 mb-6">
                      <span className="text-sm font-semibold text-gray-900">Scheduled upcoming videos times</span>
                      <HelpCircle className="h-4 w-4 text-gray-400" />
                      {isUsingUploadedContent && (
                        <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
                          Using uploaded content
                        </span>
                      )}
                    </div>

<div className="space-y-6">
                      {Object.entries(groupedVideos).map(([date, videos]) => (
                        <div key={date}>
                          {/* Date Title */}
                          <h3 className="text-sm font-semibold text-gray-800 mb-4">{date}</h3>

{/* Videos for this date */}
                          <div className="space-y-4">
                            {videos.map((video) => (
                              <div key={video.id} className="flex gap-4">
                                {/* Time input on the left */}
                                <div className="flex flex-col justify-center w-32">
                                  <div className="relative">
                                    <Input
                                      type="time"
                                      value={videoTimes[video.id] || "09:00"}
                                      onChange={(e) => handleTimeChange(video.id, e.target.value)}
                                      className="text-sm text-left pl-3 pr-10 hide-time-icon"
                                    />
                                    <Clock className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-600" />
                                  </div>
                                </div>

{/* Video container */}
                                <div className="flex-1 border border-gray-200 rounded-lg p-3 bg-white">
                                  <div className="flex items-start justify-between">
                                    <div className="flex-1">
                                      <h4 className="font-medium text-gray-900 text-sm mb-1">{video.title}</h4>
                                      <button
                                        onClick={() => toggleScript(video.id)}
                                        className="text-xs text-purple-600 hover:text-purple-700 flex items-center gap-1"
                                      >
                                        {expandedScripts[video.id] ? "Hide script" : "View script"}
                                        {expandedScripts[video.id] ? (
                                          <ChevronUp className="h-3 w-3" />
                                        ) : (
                                          <ChevronDown className="h-3 w-3" />
                                        )}
                                      </button>
                                    </div>
                                    <div className="text-right">
                                      <div className="text-xs text-gray-500 mb-1">Video Length estimation</div>
                                      <div className="text-xs text-gray-600 font-medium">{video.estimatedTime}</div>
                                    </div>
                                  </div>

{/* Expandable script */}
                                  {expandedScripts[video.id] && (
                                    <div className="mt-3 pt-3 border-t border-gray-100">
                                      {editingScript === video.id ? (
                                        <div className="space-y-3">
                                          <Textarea
                                            value={editedScriptContent}
                                            onChange={(e) => setEditedScriptContent(e.target.value)}
                                            className="w-full text-sm min-h-[100px] resize-y"
                                          />
                                          <div className="flex gap-2">
                                            <Button
                                              size="sm"
                                              onClick={() => saveEditedScript(video.id)}
                                              className="bg-purple-600 hover:bg-purple-700 text-white text-xs"
                                            >
                                              Save
                                            </Button>
                                            <Button
                                              size="sm"
                                              variant="outline"
                                              onClick={cancelEditingScript}
                                              className="text-xs"
                                            >
                                              Cancel
                                            </Button>
                                          </div>
                                        </div>
                                      ) : (
                                        <div>
                                          <p
                                            className="text-sm text-gray-700 leading-relaxed cursor-pointer hover:bg-gray-50 p-2 rounded"
                                            onClick={() => startEditingScript(video.id, video.script)}
                                          >
                                            {video.script}
                                          </p>
                                          <Button
                                            size="sm"
                                            variant="outline"
                                            onClick={() => startEditingScript(video.id, video.script)}
                                            className="mt-2 text-xs"
                                          >
                                            Edit Script
                                          </Button>
                                        </div>
                                      )}
                                    </div>
                                  )}
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

{/* Action Buttons */}
                  <div className="flex gap-4 pt-6 justify-end">
                    <Button variant="outline" className="px-8 py-2 text-sm">
                      Save as Draft
                    </Button>
                    <Button className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-2 text-sm">
                      Finalise Video styling
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>

{tutorial.title}

Properties

Creating your Video

Video script

Assets

Elements

Effect Overlay

Video backgrounds

Thumbnails

Stickers

Music

Call to Action

CTA Buttons

Youtube Subscribe

Voice Over

{currentTool.title}

Welcome back, Joe!

Analytics Overview

Video Performance

Engagement Trends