import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  HeroSectionComponent, 
  HeroWithImageComponent, 
  HeroSplitScreenComponent 
} from 'ui-landing-pages';
import { 
  HeroConfig, 
  HeroImageConfig, 
  HeroSplitConfig,
  CTAButton
} from 'ui-landing-pages';

@Component({
  selector: 'app-hero-sections-demo',
  imports: [
    CommonModule,
    HeroSectionComponent,
    HeroWithImageComponent,
    HeroSplitScreenComponent
  ],
  templateUrl: './hero-sections-demo.component.html',
  styleUrl: './hero-sections-demo.component.scss'
})
export class HeroSectionsDemoComponent {

  // Hero Section Configs
  basicHeroConfig: HeroConfig = {
    title: 'Build Amazing Landing Pages',
    subtitle: 'Create stunning websites with our comprehensive component library',
    alignment: 'center',
    backgroundType: 'gradient',
    minHeight: 'large',
    ctaPrimary: {
      text: 'Get Started',
      variant: 'filled',
      action: () => console.log('Primary CTA clicked')
    },
    ctaSecondary: {
      text: 'Learn More',
      variant: 'outlined',
      action: () => console.log('Secondary CTA clicked')
    }
  };

  lightHeroConfig: HeroConfig = {
    title: 'Clean & Modern Design',
    subtitle: 'Designed for the modern web',
    alignment: 'left',
    backgroundType: 'solid',
    minHeight: 'medium',
    ctaPrimary: {
      text: 'Explore Features',
      variant: 'filled',
      action: () => console.log('Explore clicked')
    }
  };

  darkHeroConfig: HeroConfig = {
    title: 'Dark Mode Ready',
    subtitle: 'Perfect for dark interfaces',
    alignment: 'right',
    backgroundType: 'animated',
    minHeight: 'full',
    ctaPrimary: {
      text: 'Try Dark Mode',
      variant: 'filled',
      action: () => console.log('Dark mode clicked')
    }
  };

  // Hero With Image Configs
  splitImageConfig: HeroImageConfig = {
    title: 'Hero with Image',
    subtitle: 'Perfect split layout',
    alignment: 'left',
    backgroundType: 'solid',
    minHeight: 'large',
    imageUrl: 'https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
    imageAlt: 'Team collaboration',
    imagePosition: 'right',
    imageMobile: 'below',
    ctaPrimary: {
      text: 'Start Building',
      variant: 'filled',
      action: () => console.log('Start building clicked')
    }
  };

  overlayImageConfig: HeroImageConfig = {
    title: 'Overlay Hero Style',
    subtitle: 'Text over image',
    alignment: 'center',
    backgroundType: 'gradient',
    minHeight: 'full',
    imageUrl: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
    imageAlt: 'Modern office space',
    imagePosition: 'left',
    imageMobile: 'above',
    ctaPrimary: {
      text: 'View Gallery',
      variant: 'filled',
      action: () => console.log('View gallery clicked')
    },
    ctaSecondary: {
      text: 'Learn More',
      variant: 'outlined',
      action: () => console.log('Learn more clicked')
    }
  };

  // Hero Split Screen Configs
  textSplitConfig: HeroSplitConfig = {
    title: 'Split Screen Hero',
    subtitle: 'Powerful dual-content layout',
    alignment: 'center',
    backgroundType: 'solid',
    minHeight: 'large',
    splitRatio: '50-50',
    leftContent: {
      type: 'text',
      content: '<h3>Powerful Features</h3><p>Everything you need to build professional landing pages with our comprehensive component library.</p>'
    },
    rightContent: {
      type: 'text', 
      content: '<h3>Easy to Use</h3><p>Drop-in components that work seamlessly with your existing Angular applications.</p>'
    }
  };

  mediaSplitConfig: HeroSplitConfig = {
    title: 'Media Split Hero',
    subtitle: 'Text and image combination',
    alignment: 'left',
    backgroundType: 'gradient',
    minHeight: 'large',
    splitRatio: '60-40',
    leftContent: {
      type: 'text',
      content: '<h3>See It In Action</h3><p>Watch our components come to life with interactive examples and real-world use cases.</p>'
    },
    rightContent: {
      type: 'image',
      content: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80'
    }
  };

  onCtaClick(message: string): void {
    console.log(message);
    // In a real app, you might navigate to a different route or open a modal
  }
}
