ui-essentials/projects/demo-ui-essentials/src/app/demos/conversion-demo/conversion-demo.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
// Temporarily commented out until ui-landing-pages is built
// import { 
//   CTASectionComponent, 
//   PricingTableComponent, 
//   NewsletterSignupComponent, 
//   ContactFormComponent 
// } from 'ui-landing-pages';
// import {
//   CTASectionConfig,
//   PricingTableConfig,
//   NewsletterSignupConfig,
//   ContactFormConfig
// } from 'ui-landing-pages';

@Component({
  selector: 'app-conversion-demo',
  standalone: true,
  imports: [
    CommonModule,
    // Temporarily commented out until ui-landing-pages is built
    // CTASectionComponent,
    // PricingTableComponent,
    // NewsletterSignupComponent,
    // ContactFormComponent
  ],
  template: `
    <div class="conversion-demo">
      <div class="demo-section">
        <h1 class="demo-title">Conversion Components Demo</h1>
        <p class="demo-description">
          Phase 3 components focused on user actions and conversions, including CTAs, pricing tables, newsletter signups, and contact forms.
        </p>
        <div class="under-construction">
          <p><strong>🚧 Under Construction:</strong> This demo is temporarily disabled while the ui-landing-pages library is being built.</p>
        </div>
      </div>

      <!-- Temporarily commented out until ui-landing-pages is built -->
  `,
  styleUrls: ['./conversion-demo.component.scss']
})
export class ConversionDemoComponent {
  
  // CTA Section Configurations
  // Temporarily commented out until ui-landing-pages is built
  /*
  ctaConfigGradient: CTASectionConfig = {
    title: "Transform Your Business Today",
    description: "Join thousands of companies already using our platform to accelerate growth and increase efficiency.",
    backgroundType: 'gradient',
    ctaPrimary: {
      text: 'Start Free Trial',
      variant: 'filled',
      action: () => console.log('Primary CTA clicked')
    },
    ctaSecondary: {
      text: 'Watch Demo',
      variant: 'outlined',
      action: () => console.log('Secondary CTA clicked')
    },
    urgency: {
      type: 'countdown',
      text: 'Limited Time Offer Ends In:',
      endDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000) // 5 days from now
    }
  };

  ctaConfigPattern: CTASectionConfig = {
    title: "Don't Miss Out on This Exclusive Deal",
    description: "Get 50% off your first year and unlock premium features.",
    backgroundType: 'pattern',
    ctaPrimary: {
      text: 'Claim Offer Now',
      variant: 'filled',
      action: () => console.log('Pattern CTA clicked')
    },
    urgency: {
      type: 'limited-offer',
      text: 'Flash Sale',
      remaining: 12
    }
  };

  ctaConfigSolid: CTASectionConfig = {
    title: "Join Over 10,000 Happy Customers",
    description: "See why businesses trust us with their most important processes.",
    backgroundType: 'solid',
    ctaPrimary: {
      text: 'Get Started',
      variant: 'filled',
      action: () => console.log('Solid CTA clicked')
    },
    urgency: {
      type: 'social-proof',
      text: '🔥 142 people signed up in the last 24 hours'
    }
  };

  // Pricing Table Configuration
  pricingConfig: PricingTableConfig = {
    billingToggle: {
      monthlyLabel: 'Monthly',
      yearlyLabel: 'Yearly',
      discountText: 'Save 20%'
    },
    featuresComparison: true,
    highlightedPlan: 'pro',
    plans: [
      {
        id: 'starter',
        name: 'Starter',
        description: 'Perfect for small teams getting started',
        price: {
          monthly: 29,
          yearly: 24,
          currency: '$',
          suffix: '/month'
        },
        features: [
          { name: 'Up to 5 team members', included: true },
          { name: '10GB storage', included: true },
          { name: 'Basic reporting', included: true },
          { name: 'Email support', included: true },
          { name: 'Advanced analytics', included: false },
          { name: 'API access', included: false },
          { name: 'Priority support', included: false }
        ],
        cta: {
          text: 'Start Free Trial',
          action: () => console.log('Starter plan selected')
        }
      },
      {
        id: 'pro',
        name: 'Professional',
        description: 'Best for growing businesses',
        badge: 'Most Popular',
        popular: true,
        price: {
          monthly: 79,
          yearly: 63,
          currency: '$',
          suffix: '/month'
        },
        features: [
          { name: 'Up to 25 team members', included: true },
          { name: '100GB storage', included: true },
          { name: 'Advanced reporting', included: true, highlight: true },
          { name: 'Email & chat support', included: true },
          { name: 'Advanced analytics', included: true, highlight: true },
          { name: 'API access', included: true },
          { name: 'Priority support', included: false }
        ],
        cta: {
          text: 'Start Free Trial',
          action: () => console.log('Pro plan selected')
        }
      },
      {
        id: 'enterprise',
        name: 'Enterprise',
        description: 'For large organizations with custom needs',
        price: {
          monthly: 199,
          yearly: 159,
          currency: '$',
          suffix: '/month'
        },
        features: [
          { name: 'Unlimited team members', included: true },
          { name: 'Unlimited storage', included: true },
          { name: 'Custom reporting', included: true },
          { name: '24/7 phone support', included: true },
          { name: 'Advanced analytics', included: true },
          { name: 'Full API access', included: true },
          { name: 'Priority support', included: true, highlight: true }
        ],
        cta: {
          text: 'Contact Sales',
          variant: 'outlined',
          action: () => console.log('Enterprise plan selected')
        }
      }
    ]
  };

  // Newsletter Signup Configurations
  newsletterConfigInline: NewsletterSignupConfig = {
    title: "Stay Updated with Our Newsletter",
    description: "Get the latest insights, tips, and updates delivered to your inbox.",
    placeholder: "Enter your email address",
    ctaText: "Subscribe",
    variant: 'inline',
    successMessage: "Thanks for subscribing! Check your email for confirmation."
  };

  newsletterConfigModal: NewsletterSignupConfig = {
    title: "Join Our Community",
    description: "Be the first to know about new features and exclusive content.",
    placeholder: "Your email address",
    ctaText: "Join Now",
    variant: 'modal',
    successMessage: "Welcome aboard! You're now part of our community."
  };

  newsletterConfigFooter: NewsletterSignupConfig = {
    title: "Newsletter Signup",
    description: "Weekly insights and updates from our team.",
    placeholder: "Email address",
    ctaText: "Sign Up",
    variant: 'footer',
    showPrivacyCheckbox: true,
    privacyText: "We respect your privacy and will never spam you.",
    successMessage: "Successfully subscribed! Welcome to our newsletter."
  };

  // Contact Form Configurations
  contactConfigTwoColumn: ContactFormConfig = {
    title: "Get in Touch",
    description: "We'd love to hear from you. Send us a message and we'll respond as soon as possible.",
    layout: 'two-column',
    submitText: 'Send Message',
    successMessage: "Thank you for your message! We'll get back to you within 24 hours.",
    validation: {},
    fields: [
      {
        type: 'text',
        name: 'firstName',
        label: 'First Name',
        placeholder: 'John',
        required: true
      },
      {
        type: 'text',
        name: 'lastName',
        label: 'Last Name',
        placeholder: 'Doe',
        required: true
      },
      {
        type: 'email',
        name: 'email',
        label: 'Email',
        placeholder: 'john@example.com',
        required: true
      },
      {
        type: 'tel',
        name: 'phone',
        label: 'Phone Number',
        placeholder: '+1 (555) 123-4567',
        required: false
      },
      {
        type: 'select',
        name: 'subject',
        label: 'Subject',
        required: true,
        options: [
          { value: 'general', label: 'General Inquiry' },
          { value: 'support', label: 'Technical Support' },
          { value: 'sales', label: 'Sales Question' },
          { value: 'partnership', label: 'Partnership' }
        ]
      },
      {
        type: 'textarea',
        name: 'message',
        label: 'Message',
        placeholder: 'Tell us more about your inquiry...',
        required: true,
        rows: 5
      }
    ]
  };

  contactConfigSingleColumn: ContactFormConfig = {
    title: "Quick Contact",
    layout: 'single-column',
    submitText: 'Submit',
    successMessage: "Message sent successfully!",
    validation: {},
    fields: [
      {
        type: 'text',
        name: 'name',
        label: 'Full Name',
        required: true
      },
      {
        type: 'email',
        name: 'email',
        label: 'Email Address',
        required: true
      },
      {
        type: 'textarea',
        name: 'message',
        label: 'Your Message',
        required: true,
        rows: 4
      },
      {
        type: 'checkbox',
        name: 'newsletter',
        label: 'Subscribe to our newsletter for updates',
        required: false
      }
    ]
  };

  contactConfigInline: ContactFormConfig = {
    layout: 'inline',
    submitText: 'Contact Us',
    successMessage: "We'll be in touch soon!",
    validation: {},
    fields: [
      {
        type: 'text',
        name: 'name',
        label: 'Name',
        placeholder: 'Your name',
        required: true
      },
      {
        type: 'email',
        name: 'email',
        label: 'Email',
        placeholder: 'your@email.com',
        required: true
      },
      {
        type: 'text',
        name: 'company',
        label: 'Company',
        placeholder: 'Your company',
        required: false
      }
    ]
  };

  onNewsletterSignup(data: any) {
    console.log('Newsletter signup:', data);
  }

  onContactFormSubmit(data: any) {
    console.log('Contact form submission:', data);
  }
  */
}