<template>
  <div class="page">
    <h1 class="title">CommonWebComponents</h1>
    <p class="sub">Gaffer Tape Edge Demo — LimelightButton</p>

    <!-- Before / After -->
    <section class="section">
      <p class="section-label">Before / After</p>
      <div class="compare">
        <div class="compare-box">
          <span class="compare-box-label">Before — diagonal cut</span>
          <button class="btn-old btn-old--primary">Primary</button>
          <button class="btn-old btn-old--danger">Danger</button>
        </div>
        <div class="compare-box">
          <span class="compare-box-label">After — torn tape</span>
          <LimelightButton variant="primary">Primary</LimelightButton>
          <LimelightButton variant="danger">Danger</LimelightButton>
        </div>
      </div>
    </section>

    <!-- All variants -->
    <section class="section">
      <p class="section-label">All Variants</p>
      <div class="row">
        <LimelightButton variant="primary">Primary</LimelightButton>
        <LimelightButton variant="outline">Outline</LimelightButton>
        <LimelightButton variant="ghost">Ghost</LimelightButton>
        <LimelightButton variant="danger">Danger</LimelightButton>
        <LimelightButton variant="primary" :disabled="true">Disabled</LimelightButton>
      </div>
    </section>

    <!-- Interactive -->
    <section class="section">
      <p class="section-label">Interactive States</p>
      <div class="row">
        <LimelightButton variant="primary" @click="count++">
          Clicked {{ count }}×
        </LimelightButton>
        <LimelightButton variant="danger" @click="armed = !armed">
          {{ armed ? 'ARMED' : 'Arm' }}
        </LimelightButton>
        <LimelightButton variant="ghost" @click="live = !live">
          {{ live ? 'Go Offline' : 'Go Live' }}
        </LimelightButton>
        <LimelightButton variant="outline" :disabled="!live">
          {{ live ? 'Streaming' : 'Offline' }}
        </LimelightButton>
      </div>
    </section>

    <!-- Production board -->
    <section class="section">
      <p class="section-label">Production Board</p>
      <div class="board">
        <div v-for="ch in channels" :key="ch.name" class="board-row">
          <span class="board-row-label">{{ ch.id }}</span>
          <span class="board-chip" :class="ch.hot ? 'board-chip--hot' : ''">{{ ch.name }}</span>
          <LimelightButton variant="ghost" class="btn-sm">Arm</LimelightButton>
          <LimelightButton :variant="ch.muted ? 'danger' : 'outline'" class="btn-sm" @click="ch.muted = !ch.muted">
            {{ ch.muted ? 'Muted' : 'Mute' }}
          </LimelightButton>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import LimelightButton from './components/LimelightButton.vue'

const count = ref(0)
const armed = ref(false)
const live  = ref(false)

const channels = reactive([
  { id: 'CH 01', name: 'Kick In',   hot: false, muted: false },
  { id: 'CH 02', name: 'Kick Out',  hot: false, muted: false },
  { id: 'CH 12', name: 'Vox Lead',  hot: true,  muted: false },
  { id: 'CH 16', name: 'DI Bass',   hot: false, muted: true  },
])
</script>

<style>
@reference "tailwindcss";

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0f0f0f;
  color: #d0d0d0;
  font-family: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  padding: 3rem 2rem;
}

.title {
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.sub {
  color: #3a3a3a;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 3rem;
}

.section { margin-bottom: 3rem; }
.section-label {
  color: #3a3a3a;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #1a1a1a;
}

.row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Before/after */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 560px; }
.compare-box {
  background: #141414;
  border: 1px solid #1e1e1e;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.compare-box-label { color: #333; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }

.btn-old {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  height: 2.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-old--primary { background: var(--color-primary); color: var(--color-black); }
.btn-old--danger  { background: var(--color-red); color: #fff; }

/* Board */
.board {
  background: #111;
  border: 1px solid #1a1a1a;
  padding: 1.5rem;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.board-row { display: flex; align-items: center; gap: 0.75rem; }
.board-row-label {
  color: #2e2e2e;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 60px;
  flex-shrink: 0;
}
.board-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.75rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #1a1a1a;
  color: #444;
  min-width: 90px;
}
.board-chip--hot { background: #2a2800; color: var(--color-primary); }

.btn-sm { font-size: 0.65rem !important; }
</style>
