import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TeamGridComponent, TeamConfig } from 'ui-landing-pages';

@Component({
  selector: 'app-landing-team-demo',
  standalone: true,
  imports: [CommonModule, TeamGridComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="demo-container">
      <div class="demo-header">
        <h1>Team Grid Demo</h1>
        <p>Showcase your team members with professional cards and social links.</p>
      </div>

      <!-- 3 Column Layout -->
      <div class="demo-section">
        <h2>3 Column Layout (Default)</h2>
        <ui-lp-team-grid [configuration]="threeColumnConfig"></ui-lp-team-grid>
      </div>

      <!-- 2 Column Layout -->
      <div class="demo-section">
        <h2>2 Column Layout</h2>
        <ui-lp-team-grid [configuration]="twoColumnConfig"></ui-lp-team-grid>
      </div>

      <!-- 4 Column Layout -->
      <div class="demo-section">
        <h2>4 Column Layout</h2>
        <ui-lp-team-grid [configuration]="fourColumnConfig"></ui-lp-team-grid>
      </div>

      <!-- Without Bio -->
      <div class="demo-section">
        <h2>Without Bio Text</h2>
        <ui-lp-team-grid [configuration]="noBioConfig"></ui-lp-team-grid>
      </div>
    </div>
  `,
  styles: [`
    .demo-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }

    .demo-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .demo-header h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: #1a1a1a;
    }

    .demo-header p {
      font-size: 1.125rem;
      color: #666;
    }

    .demo-section {
      margin-bottom: 4rem;
    }

    .demo-section h2 {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
      color: #333;
      border-bottom: 2px solid #e0e0e0;
      padding-bottom: 0.5rem;
    }
  `]
})
export class LandingTeamDemoComponent {
  threeColumnConfig: TeamConfig = {
    title: 'Meet Our Amazing Team',
    subtitle: 'The talented professionals who make our success possible',
    columns: 3,
    showSocial: true,
    showBio: true,
    members: [
      {
        id: '1',
        name: 'Sarah Johnson',
        role: 'CEO & Founder',
        bio: 'Visionary leader with 15+ years in tech, driving innovation and growth across multiple successful ventures.',
        image: 'https://images.unsplash.com/photo-1494790108755-2616b612b5ff?w=300&h=300&fit=crop&crop=face',
        social: {
          linkedin: 'https://linkedin.com/in/sarahjohnson',
          twitter: 'https://twitter.com/sarahjohnson',
          email: 'sarah@company.com'
        }
      },
      {
        id: '2',
        name: 'Michael Chen',
        role: 'Chief Technology Officer',
        bio: 'Full-stack engineer and architect, passionate about building scalable systems and mentoring developers.',
        image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&h=300&fit=crop&crop=face',
        social: {
          linkedin: 'https://linkedin.com/in/michaelchen',
          github: 'https://github.com/mchen',
          twitter: 'https://twitter.com/michaelchen',
          email: 'michael@company.com'
        }
      },
      {
        id: '3',
        name: 'Emily Rodriguez',
        role: 'Head of Design',
        bio: 'Creative problem-solver specializing in user experience design and building design systems that scale.',
        image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop&crop=face',
        social: {
          linkedin: 'https://linkedin.com/in/emilyrodriguez',
          website: 'https://emilydesigns.com',
          email: 'emily@company.com'
        }
      }
    ]
  };

  twoColumnConfig: TeamConfig = {
    title: 'Leadership Team',
    subtitle: 'The executives guiding our company forward',
    columns: 2,
    showSocial: true,
    showBio: true,
    members: [
      {
        id: '4',
        name: 'David Park',
        role: 'VP of Sales',
        bio: 'Results-driven sales leader with a proven track record of building high-performing teams and exceeding revenue targets.',
        image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=300&fit=crop&crop=face',
        social: {
          linkedin: 'https://linkedin.com/in/davidpark',
          email: 'david@company.com'
        }
      },
      {
        id: '5',
        name: 'Lisa Thompson',
        role: 'VP of Marketing',
        bio: 'Strategic marketer focused on brand building, digital growth, and creating authentic connections with our community.',
        image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300&h=300&fit=crop&crop=face',
        social: {
          linkedin: 'https://linkedin.com/in/lisathompson',
          twitter: 'https://twitter.com/lisathompson',
          email: 'lisa@company.com'
        }
      }
    ]
  };

  fourColumnConfig: TeamConfig = {
    title: 'Engineering Team',
    subtitle: 'The brilliant minds behind our technology',
    columns: 4,
    showSocial: true,
    showBio: true,
    members: [
      {
        id: '6',
        name: 'Alex Kim',
        role: 'Senior Frontend Developer',
        bio: 'React specialist with a passion for creating beautiful, accessible user interfaces.',
        image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop&crop=face',
        social: {
          github: 'https://github.com/alexkim',
          linkedin: 'https://linkedin.com/in/alexkim'
        }
      },
      {
        id: '7',
        name: 'Maria Santos',
        role: 'Backend Engineer',
        bio: 'Database optimization expert and API architecture enthusiast.',
        image: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=300&h=300&fit=crop&crop=face',
        social: {
          github: 'https://github.com/mariasantos',
          linkedin: 'https://linkedin.com/in/mariasantos'
        }
      },
      {
        id: '8',
        name: 'James Wilson',
        role: 'DevOps Engineer',
        bio: 'Cloud infrastructure specialist ensuring reliable, scalable deployments.',
        image: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?w=300&h=300&fit=crop&crop=face',
        social: {
          github: 'https://github.com/jameswilson',
          linkedin: 'https://linkedin.com/in/jameswilson'
        }
      },
      {
        id: '9',
        name: 'Sophie Brown',
        role: 'QA Engineer',
        bio: 'Quality assurance expert dedicated to delivering bug-free user experiences.',
        image: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=300&h=300&fit=crop&crop=face',
        social: {
          linkedin: 'https://linkedin.com/in/sophiebrown',
          email: 'sophie@company.com'
        }
      }
    ]
  };

  noBioConfig: TeamConfig = {
    title: 'Advisory Board',
    subtitle: 'Industry experts guiding our strategic direction',
    columns: 3,
    showSocial: true,
    showBio: false,
    members: [
      {
        id: '10',
        name: 'Robert Anderson',
        role: 'Strategic Advisor',
        image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=300&h=300&fit=crop&crop=face',
        social: {
          linkedin: 'https://linkedin.com/in/robertanderson'
        }
      },
      {
        id: '11',
        name: 'Jennifer Lee',
        role: 'Technology Advisor',
        image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=300&h=300&fit=crop&crop=face',
        social: {
          linkedin: 'https://linkedin.com/in/jenniferlee',
          website: 'https://jenniferlee.tech'
        }
      },
      {
        id: '12',
        name: 'Marcus Johnson',
        role: 'Business Advisor',
        image: 'https://images.unsplash.com/photo-1556157382-97eda2d62296?w=300&h=300&fit=crop&crop=face',
        social: {
          linkedin: 'https://linkedin.com/in/marcusjohnson',
          email: 'marcus@advisor.com'
        }
      }
    ]
  };
}