<template>
  <section class="security-info">
    <div class="security-info__badge">
      <div class="security-info__badge-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
      </div>
      <div class="security-info__badge-text">
        <span class="security-info__badge-label">Unaudited</span>
        <span class="security-info__badge-sub">Third-party audit planned for Q3 2026</span>
      </div>
    </div>

    <div class="security-info__contracts">
      <h3 class="security-info__heading">Contract Addresses</h3>
      <div class="security-info__address-list">
        <div v-for="contract in contracts" :key="contract.key" class="security-info__address-row">
          <span class="security-info__address-label">{{ contract.label }}</span>
          <span class="security-info__address-value">
            <a :href="`https://basescan.org/address/${contract.address}`" target="_blank" rel="noopener noreferrer">{{ contract.address }}</a>
            <button class="security-info__copy-btn" @click="copyAddress(contract.address, contract.key)" :title="copied === contract.key ? 'Copied!' : 'Copy address'" :aria-label="copied === contract.key ? 'Copied!' : `Copy ${contract.label} address`">
              <svg v-if="copied !== contract.key" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
              <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
          </span>
        </div>
      </div>
    </div>

    <div class="security-info__links">
      <a href="https://codeberg.org/johba/harb" target="_blank" rel="noopener noreferrer" class="security-info__link">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
        Source Code
      </a>
      <a :href="`https://basescan.org/address/${contracts[0].address}#code`" target="_blank" rel="noopener noreferrer" class="security-info__link">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
        Basescan Verification
      </a>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const contracts = [
  {
    key: 'krk',
    label: 'KRK Token',
    address: import.meta.env.VITE_KRAIKEN_ADDRESS || '0xff196f1e3a895404d073b8611252cf97388773a7',
  },
  {
    key: 'stake',
    label: 'Stake',
    address: import.meta.env.VITE_STAKE_ADDRESS || '0xc36e784e1dff616bdae4eac7b310f0934faf04a4',
  },
];

const copied = ref('');

function copyAddress(addr: string, key: string) {
  navigator.clipboard.writeText(addr);
  copied.value = key;
  setTimeout(() => { copied.value = ''; }, 1500);
}
</script>

<style lang="sass">
.security-info
  margin-top: 88px
  padding: 32px 24px
  background: rgba(255, 255, 255, 0.03)
  border: 1px solid rgba(255, 255, 255, 0.08)
  border-radius: 16px
  text-align: center
  @media (min-width: 768px)
    padding: 48px 40px

.security-info__badge
  display: inline-flex
  align-items: center
  gap: 12px
  padding: 10px 20px
  border: 1px solid rgba(234, 179, 8, 0.4)
  background: rgba(234, 179, 8, 0.08)
  border-radius: 8px
  margin-bottom: 32px

.security-info__badge-icon
  color: #eab308
  display: flex
  align-items: center

.security-info__badge-text
  display: flex
  flex-direction: column
  align-items: flex-start
  gap: 2px

.security-info__badge-label
  font-weight: 600
  font-size: 15px
  color: #eab308

.security-info__badge-sub
  font-size: 12px
  color: rgba(234, 179, 8, 0.7)

.security-info__heading
  font-size: 13px
  font-weight: 600
  text-transform: uppercase
  letter-spacing: 1px
  color: #9A9898
  margin-bottom: 16px

.security-info__address-list
  display: flex
  flex-direction: column
  gap: 12px
  margin-bottom: 28px

.security-info__address-row
  display: flex
  align-items: center
  justify-content: center
  gap: 12px
  flex-wrap: wrap

.security-info__address-label
  font-weight: 500
  font-size: 14px
  color: rgba(240, 240, 240, 0.7)
  min-width: 80px
  text-align: right

.security-info__address-value
  display: inline-flex
  align-items: center
  gap: 6px
  a
    font-family: monospace
    font-size: 13px
    color: #7550AE
    text-decoration: none
    word-break: break-all
    &:hover
      text-decoration: underline
    @media (max-width: 767px)
      font-size: 11px

.security-info__copy-btn
  background: none
  border: none
  cursor: pointer
  padding: 2px
  color: #9A9898
  display: inline-flex
  align-items: center
  &:hover
    color: #c084fc

.security-info__links
  display: flex
  justify-content: center
  gap: 24px
  flex-wrap: wrap

.security-info__link
  display: inline-flex
  align-items: center
  gap: 6px
  font-size: 14px
  color: rgba(240, 240, 240, 0.7)
  text-decoration: none
  padding: 8px 16px
  border: 1px solid rgba(255, 255, 255, 0.1)
  border-radius: 8px
  transition: border-color 0.2s, color 0.2s
  &:hover
    color: #c084fc
    border-color: rgba(150, 103, 190, 0.4)
</style>
