{/* Badge */}

Badge

Left Icon setData('badge_icon_left', e.target.value)} placeholder="✨" />

Badge Text * setData('badge_text', e.target.value)} placeholder="New Feature" /> {errors.badge_text && (

{errors.badge_text}

)}

Right Icon setData('badge_icon_right', e.target.value)} placeholder="🎉" />

{/* Main Content */}

Main Content

Typewriter Text * setData('typewriter_text', e.target.value)} placeholder="AI-Powered Phone Calls" /> {errors.typewriter_text && (

{errors.typewriter_text}

)}

Subtitle *

setData('subtitle', e.target.value)}
                                        placeholder="Your campaign description..."
                                        rows={3}
                                    />
                                    {errors.subtitle && (
                                        <p className="text-sm text-red-600">{errors.subtitle}</p>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="subtitle_emoji">Subtitle Emoji</Label>
                                    <Input
                                        id="subtitle_emoji"
                                        value={data.subtitle_emoji}
                                        onChange={(e) => setData('subtitle_emoji', e.target.value)}
                                        placeholder="🚀"
                                    />
                                </div>
                            </div>

{/* CTAs */}
                            <div className="space-y-4">
                                <h3 className="text-lg font-semibold">Call-to-Action Buttons</h3>
                                <div className="grid gap-4 md:grid-cols-2">
                                    <div className="space-y-2">
                                        <Label htmlFor="primary_cta_text">Primary CTA Text *</Label>
                                        <Input
                                            id="primary_cta_text"
                                            value={data.primary_cta_text}
                                            onChange={(e) => setData('primary_cta_text', e.target.value)}
                                            placeholder="Get Started"
                                        />
                                        {errors.primary_cta_text && (
                                            <p className="text-sm text-red-600">{errors.primary_cta_text}</p>
                                        )}
                                    </div>
                                    <div className="space-y-2">
                                        <Label htmlFor="primary_cta_icon">Primary CTA Icon</Label>
                                        <Input
                                            id="primary_cta_icon"
                                            value={data.primary_cta_icon}
                                            onChange={(e) => setData('primary_cta_icon', e.target.value)}
                                            placeholder="→"
                                        />
                                    </div>
                                    <div className="space-y-2">
                                        <Label htmlFor="secondary_cta_text">Secondary CTA Text *</Label>
                                        <Input
                                            id="secondary_cta_text"
                                            value={data.secondary_cta_text}
                                            onChange={(e) => setData('secondary_cta_text', e.target.value)}
                                            placeholder="Learn More"
                                        />
                                        {errors.secondary_cta_text && (
                                            <p className="text-sm text-red-600">{errors.secondary_cta_text}</p>
                                        )}
                                    </div>
                                    <div className="space-y-2">
                                        <Label htmlFor="secondary_cta_icon">Secondary CTA Icon</Label>
                                        <Input
                                            id="secondary_cta_icon"
                                            value={data.secondary_cta_icon}
                                            onChange={(e) => setData('secondary_cta_icon', e.target.value)}
                                            placeholder="📖"
                                        />
                                    </div>
                                </div>
                            </div>

<div className="flex justify-end gap-4">
                                <Button type="submit" disabled={processing}>
                                    {processing ? 'Saving...' : 'Save Changes'}
                                </Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}