import './style.css'
import { BraceletStore } from './state'
import { createBraceletCanvas } from './ui/braceletView'
import { createCatalogPanel } from './ui/catalogPanel'
import { createSummaryPanel } from './ui/summaryPanel'

const store = new BraceletStore()

const app = document.querySelector<HTMLDivElement>('#app')!
app.innerHTML = `
  <header class="site-header">
    <div class="site-header__brand">
      <span class="site-header__logo">VG</span>
      <div>
        <h1>Valkyrie Gems Beads</h1>
        <p class="site-header__tagline">My Bracelet · Virtual Builder</p>
      </div>
    </div>
    <nav class="site-header__nav">
      <a href="https://valkyriegemsbeads.com/" target="_blank" rel="noopener">Shop</a>
      <a href="https://valkyriegemsbeads.com/" target="_blank" rel="noopener">Sales</a>
      <a href="https://valkyriegemsbeads.com/" target="_blank" rel="noopener">About</a>
    </nav>
  </header>

  <main class="builder">
    <aside class="builder__catalog" id="catalog-panel"></aside>
    <section class="builder__canvas" id="canvas-panel"></section>
    <aside class="builder__summary" id="summary-panel"></aside>
  </main>

  <footer class="site-footer">
    <p>© Valkyrie Gems Beads — High quality gemstone beads and silver beads, luxury jewelry.</p>
    <p class="site-footer__demo">Interactive demo · Products inspired by <a href="https://valkyriegemsbeads.com/" target="_blank" rel="noopener">valkyriegemsbeads.com</a></p>
  </footer>
`

createCatalogPanel(store, document.getElementById('catalog-panel')!)
createBraceletCanvas(store, document.getElementById('canvas-panel')!)
createSummaryPanel(store, document.getElementById('summary-panel')!)