import { useState } from 'react' import { Button } from "/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card" import { Input } from "/components/ui/input" import { Label } from "/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "/components/ui/select" import { Mail } from 'lucide-react' export default function CaptionCraft() { const [platform, setPlatform] = useState('') const [theme, setTheme] = useState('') const [tone, setTone] = useState('') const [keywords, setKeywords] = useState('') const [email, setEmail] = useState('') const [caption, setCaption] = useState('') const [hashtags, setHashtags] = useState([]) const [isLoading, setIsLoading] = useState(false) const [emailSent, setEmailSent] = useState(false) const handleGenerate = () => { setIsLoading(true) // Simulate API call with timeout setTimeout(() => { // This would be replaced with actual API call to Gemini const generatedCaption = `Enjoying the ${theme.toLowerCase()} vibes! ${keywords ? `Loving the ${keywords.split(',').join(' and ')}!` : ''} ${getPlatformEmoji(platform)}` const generatedHashtags = [ `#${theme.replace(/\s+/g, '')}`, ...(keywords ? keywords.split(',').map(k => `#${k.trim()}`) : []), `#${tone.toLowerCase()}Tone`, `#${platform.toLowerCase()}Post`, '#SocialMedia', '#CaptionCraft' ].slice(0, 7) // Limit to 7 hashtags setCaption(generatedCaption) setHashtags(generatedHashtags) setIsLoading(false) }, 1000) } const handleEmailSubmit = () => { // In a real app, this would trigger the Zapier workflow setEmailSent(true) setTimeout(() => setEmailSent(false), 3000) } const getPlatformEmoji = (platform: string) => { switch(platform) { case 'Instagram': return '📸' case 'Twitter/X': return '🐦' case 'LinkedIn': return '💼' default: return '✨' } } const resetForm = () => { setPlatform('') setTheme('') setTone('') setKeywords('') setCaption('') setHashtags([]) } return (

{/* Hero Section */}

CaptionCraft

Create Captions That Pop!

Generate platform-specific social media captions in under a minute

Caption Generator

{/* Platform Selection */}

Platform

{/* Theme Input */}

Theme setTheme(e.target.value)} />

{/* Tone Selection */}

Tone

{/* Keywords Input */}

Keywords (comma separated) setKeywords(e.target.value)} />

{/* Action Buttons */}

{/* Results Section */} {(caption || hashtags.length > 0) && (

Your Caption

{caption}

Hashtags

{hashtags.map((tag, index) => ( {tag} ))}

{/* Email Delivery */}

Get this via email

setEmail(e.target.value)} />

)}

) }