import type { TeamMember } from '../../types';

const FALLBACK_MEMBERS: TeamMember[] = [
  {
    id: 'studio-1',
    name: 'Thibault Pouch',
    role: 'Game Dev • Lore / CI-CD',
    bio: 'Works on game dev, game lore, CI/CD, assets, and the web platform.',
    avatarInitials: 'TP',
  },
  {
    id: 'studio-2',
    name: 'Pierre Ryssen',
    role: 'Game Dev • Assets / Web',
    bio: 'Works on game dev, assets, and the web platform.',
    avatarInitials: 'PR',
  },
  {
    id: 'studio-3',
    name: 'Antoine Papillon',
    role: 'Game Dev • Gameplay',
    bio: 'Focused on core game development for the project.',
    avatarInitials: 'AP',
  },
  {
    id: 'studio-4',
    name: 'Clement Augustinowick',
    role: 'Game Dev • Gameplay',
    bio: 'Focused on core game development for the project.',
    avatarInitials: 'CA',
  },
  {
    id: 'studio-5',
    name: 'Dany Lhoir',
    role: 'Game Dev • Multiplayer / Security',
    bio: 'Works on game dev, multiplayer systems, and cybersecurity.',
    avatarInitials: 'DL',
  },
  {
    id: 'studio-6',
    name: 'Timote Koenig',
    role: 'Game Dev • Assets / Planning',
    bio: 'Works on game dev, assets, and project planning.',
    avatarInitials: 'TK',
  },
];

export default function StudioPage() {
  const members = FALLBACK_MEMBERS;

  return (
    <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '4rem 1.5rem' }}>
      {/* Header */}
      <div style={{ marginBottom: '4rem' }}>
        <div className="section-label">About</div>
        <h1
          style={{
            fontFamily: 'var(--font-heading)',
            color: 'var(--color-text)',
            fontSize: 'clamp(2.5rem, 6vw, 4rem)',
            marginTop: '0.5rem',
            marginBottom: '1.5rem',
          }}
        >
          CROWMATE STUDIO
        </h1>
        <div
          className="crt-box"
          style={{ padding: '2rem', marginBottom: '3rem' }}
        >
          <p
            style={{
              fontFamily: 'var(--font-mono)',
              color: 'var(--color-text-dim)',
              fontSize: '0.95rem',
              lineHeight: 2,
              margin: 0,
              marginBottom: '1rem',
            }}
          >
            CrowMate Studio is an independent game studio founded in 2023 by a team of six developers
            who are all new to game development and learning by building together. We are headquartered
            somewhere in Europe and operate fully remote.
          </p>
          <p
            style={{
              fontFamily: 'var(--font-mono)',
              color: 'var(--color-text-dim)',
              fontSize: '0.95rem',
              lineHeight: 2,
              margin: 0,
            }}
          >
            <span style={{ color: 'var(--color-green)' }}>&gt;&gt;</span>{' '}
            Our debut title, <strong style={{ color: 'var(--color-text)' }}>Headless Hazard</strong>,
            is currently in development. We believe that constraints breed creativity — and that
            you don't need a $200 million budget to make something that sticks.
          </p>
        </div>

        <div
          className="crt-box"
          style={{ padding: '1.5rem 2rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '1rem' }}
        >
          {[
            { label: 'TEAM SIZE', value: '6 PEOPLE' },
            { label: 'FOUNDED', value: '2026' },
            { label: 'WORK MODE', value: 'REMOTE' },
            { label: 'CURRENT GAME', value: 'HEADLESS HAZARD' },
          ].map(({ label, value }) => (
            <div key={label}>
              <div
                style={{
                  fontFamily: 'var(--font-mono)',
                  color: 'var(--color-green)',
                  fontSize: '0.72rem',
                  letterSpacing: '0.08em',
                  marginBottom: '0.45rem',
                }}
              >
                {label}
              </div>
              <div
                style={{
                  fontFamily: 'var(--font-heading)',
                  color: 'var(--color-text)',
                  fontSize: '1rem',
                }}
              >
                {value}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* History & Vision */}
      <div style={{ marginBottom: '4rem' }}>
        <div className="section-label" style={{ marginBottom: '1rem' }}>Our Vision</div>
        <h2
          style={{
            fontFamily: 'var(--font-heading)',
            color: 'var(--color-text)',
            fontSize: '1.8rem',
            marginBottom: '1.5rem',
          }}
        >
          WHY WE BUILD
        </h2>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
            gap: '1.25rem',
          }}
        >
          {[
            {
              title: 'Strange Mechanics',
              content: 'We look for the game ideas that make people say "wait, how does that even work?" — then we find out.',
            },
            {
              title: 'Atmospheric Worlds',
              content: 'Every pixel, every sound, every line of UI text should reinforce the world. Atmosphere is not decoration, it is the game.',
            },
            {
              title: 'Community First',
              content: 'We build in public. We listen to our players. Bug reports are not annoyances — they are conversations.',
            },
          ].map(({ title, content }) => (
            <div key={title} className="crt-box" style={{ padding: '1.5rem' }}>
              <h3
                style={{
                  fontFamily: 'var(--font-heading)',
                  color: 'var(--color-amber)',
                  fontSize: '1rem',
                  marginBottom: '0.75rem',
                }}
              >
                {title}
              </h3>
              <p style={{ color: 'var(--color-text-muted)', fontSize: '0.83rem', lineHeight: 1.75, margin: 0 }}>
                {content}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* Team */}
      <div>
        <div className="section-label" style={{ marginBottom: '1rem' }}>The Team</div>
        <h2
          style={{
            fontFamily: 'var(--font-heading)',
            color: 'var(--color-text)',
            fontSize: '1.8rem',
            marginBottom: '2rem',
          }}
        >
          MEET THE CREW
        </h2>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
            gap: '1.25rem',
          }}
        >
          {members.map((member) => (
            <div key={member.id} className="crt-box" style={{ padding: '1.5rem' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
                {/* Avatar */}
                <div
                  style={{
                    width: '48px',
                    height: '48px',
                    background: 'rgba(0,255,65,0.08)',
                    border: '1px solid var(--color-border)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontFamily: 'var(--font-heading)',
                    color: 'var(--color-green)',
                    fontSize: '1rem',
                    flexShrink: 0,
                  }}
                >
                  {member.avatarInitials}
                </div>
                <div>
                  <div
                    style={{
                      fontFamily: 'var(--font-heading)',
                      color: 'var(--color-text)',
                      fontSize: '1rem',
                    }}
                  >
                    {member.name}
                  </div>
                  <div
                    style={{
                      fontFamily: 'var(--font-mono)',
                      color: 'var(--color-green)',
                      fontSize: '0.7rem',
                      letterSpacing: '0.05em',
                    }}
                  >
                    {member.role}
                  </div>
                </div>
              </div>

              {member.bio && (
                <p style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem', lineHeight: 1.7, margin: '0 0 1rem' }}>
                  {member.bio}
                </p>
              )}

              {member.social && (
                <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
                  {member.social.twitter && (
                    <a
                      href="#"
                      style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', fontFamily: 'var(--font-mono)' }}
                    >
                      {member.social.twitter}
                    </a>
                  )}
                  {member.social.github && (
                    <a
                      href="#"
                      style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', fontFamily: 'var(--font-mono)' }}
                    >
                      gh/{member.social.github}
                    </a>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}