// Reusable wireframe primitives for Beluga Bevco
const { useState, useEffect, useMemo, Fragment } = React;

// ---------- Primitives ----------
function Block({ children, label, tag, ghost, price, tooltip, solid, style, requires, subAddon, collapsible, open, addon }) {
  // tone palette so identical add-ons share a color across the doc
  const toneMap = {
    'Events': 'tone-events',
    'Newsletter': 'tone-newsletter',
    'Blog': 'tone-blog',
    'Reservations': 'tone-reservations',
    'Brewroom': 'tone-brewroom',
    'Private rooms': 'tone-private'
  };
  const tone = ghost ? toneMap[addon] || 'tone-events' : '';
  const chipLabel = addon ? `${addon.toUpperCase()} ADD-ON · $${price}` : `ADD-ON · $${price}`;
  const chips = ghost &&
  <div className="ghost-chip-row">
      <span className="ghost-chip">{chipLabel}</span>
      {requires && <span className="requires-chip" title={`Requires the ${requires} add-on`}>↑ needs {requires}</span>}
      {subAddon && <span className="sub-addon-chip">↳ extends {subAddon}</span>}
    </div>;

  const tip = ghost && tooltip && <div className="ghost-tooltip">↳ {tooltip}</div>;
  const cls = `block ${solid ? 'solid' : ''} ${ghost ? 'ghost' : ''} ${tone} ${subAddon ? 'sub-addon' : ''} ${collapsible ? 'collapsible' : ''}`;

  if (collapsible) {
    return (
      <details className={cls} style={style} open={open !== false}>
        {chips}
        <summary className="block-label">
          <span className="caret" aria-hidden>▸</span>
          <span className="lbl">{label}</span>
          {tag && <span className="tag">{tag}</span>}
        </summary>
        <div className="block-body">{children}</div>
        {tip}
      </details>);
  }
  return (
    <div className={cls} style={style}>
      {chips}
      {label &&
      <div className="block-label">
          {label}
          {tag && <span className="tag">{tag}</span>}
        </div>
      }
      {children}
      {tip}
    </div>);

}

function PH({ label, h = 80, style }) {
  return <div className="ph" style={{ height: h, ...style }}>{label}</div>;
}

function Note({ children, locked }) {
  return <div className={`note ${locked ? 'locked' : ''}`}>{children}</div>;
}

function Callout({ children }) {
  return <div className="callout">↳ {children}</div>;
}

function TxtLines({ n = 3 }) {
  return (
    <div>
      {Array.from({ length: n }).map((_, i) =>
      <div key={i} className={`txt-line ${i === n - 1 ? 'short' : i === 0 ? '' : 'med'}`} />
      )}
    </div>);

}

// ---------- Nav ----------
function WFNav() {
  return (
    <div className="wf-nav">
      <span className="logo-stub">Beluga</span>
      <div className="nav-links">
        <a>Menu</a><a>Taps</a><a>Visit</a><a>About</a>
      </div>
      <span className="phone">📞 (918) XXX-XXXX</span>
      <span className="ham">≡</span>
    </div>);

}

function WFNavPlus({ events, blog }) {
  return (
    <div className="wf-nav">
      <span className="logo-stub">Beluga</span>
      <div className="nav-links" style={{ alignItems: 'center' }}>
        <a>Menu</a><a>Taps</a><a>Visit</a><a>About</a>
        {events && <a style={{ borderColor: 'var(--ghost)', color: 'var(--ghost)' }}>Events*</a>}
        {blog && <a style={{ borderColor: 'var(--ghost)', color: 'var(--ghost)' }}>Blog*</a>}
      </div>
      <span className="phone">📞 (918) XXX-XXXX</span>
      <span className="ham">≡</span>
    </div>);

}

// ---------- Footer ----------
function WFFooter({ plus }) {
  return (
    <div className="wf-footer">
      <div>
        <div className="h">Hours</div>
        <div style={{ fontSize: 11 }}>
          Tue–Sun<br />11a–11p<br /><em>(placeholder)</em>
        </div>
      </div>
      <div>
        <div className="h">Find Us</div>
        <div style={{ fontSize: 11 }}>
          Eton Square<br />Tulsa, OK<br />
          <a style={{ color: 'var(--ink)' }}>Map ↗</a>
        </div>
      </div>
      <div>
        <div className="h">Reach Us</div>
        <div style={{ fontSize: 11 }}>
          (918) XXX-XXXX<br />hello@belugabevco.com
        </div>
      </div>
      <div>
        <div className="h">Listed On</div>
        <div className="badge-row">
          <span className="badge yelp" style={{ backgroundColor: "rgb(255, 250, 240)" }}>Yelp
          </span>
          <span className="badge">Google</span>
          <span className="badge">Apple</span>
          <span className="badge">Bing</span>
        </div>
        <div style={{ fontSize: 10, color: 'var(--ink-2)', marginTop: 4 }}>
          claimed at launch
        </div>
        <div className="h" style={{ marginTop: 8 }}>Social</div>
        <div className="badge-row">
          <span className="badge">@belugabevco</span>
          <span className="badge">FB</span>
        </div>
      </div>
      <div>
        <div className="h">{plus ? 'Newsletter' : 'Crew'}</div>
        {plus ? <div className="block ghost tone-newsletter" style={{ margin: 0, padding: 8 }}>
            <span className="ghost-chip">NEWSLETTER ADD-ON · $350</span>
            <div className="form-field"><span className="lbl">Name</span><div className="input" /></div>
            <div className="form-field"><span className="lbl">Email</span><div className="input" /></div>
            <div style={{ fontSize: 10 }}>☐ Text me too</div>
            <div style={{ fontSize: 10 }}>Tags: ☐ events ☐ taps ☐ members</div>
          </div> :

        <div>
            <a
            style={{ fontSize: 13, fontFamily: 'Caveat, cursive', color: 'var(--ink)', borderBottom: '1.5px dashed var(--ink-2)', cursor: 'pointer' }}
            onClick={() => window.dispatchEvent(new CustomEvent('open-modal', { detail: 'crew' }))}>
            Join the Crew →</a>
            <div style={{ fontSize: 10, color: 'var(--ink-2)', marginTop: 4 }}>opens popup</div>
          </div>
        }
        <div style={{ fontSize: 10, color: 'var(--ink-2)', marginTop: 8 }}>
          © 2026 Beluga Bevco · Accessibility · Privacy
        </div>
      </div>
    </div>);

}

// ---------- Cards ----------
function TapCard({ num, brewery, beer, style, abv, price, status, featured }) {
  return (
    <div className={`tap-card ${featured ? 'featured' : ''}`}>
      {status && <span className="status">{status}</span>}
      <div className="tap-num">#{num}</div>
      <div className="brewery">{brewery}</div>
      <div>{beer}</div>
      <div className="meta">{style} · {abv} · {price}</div>
    </div>);

}

function MenuRow({ name, desc, price, diet }) {
  return (
    <div className="menu-row">
      <div>
        <div className="name">
          {name}
          {diet &&
          <span className="dietary">
              {diet.split(' ').map((d) => <span key={d}>{d}</span>)}
            </span>
          }
        </div>
        <div className="desc">{desc}</div>
      </div>
      <div className="price">{price}</div>
    </div>);

}

function EventCard({ date, title, desc }) {
  return (
    <div className="event-card">
      <div className="date">{date}</div>
      <div style={{ fontWeight: 'bold' }}>{title}</div>
      <div style={{ color: 'var(--ink-2)', fontSize: 11 }}>{desc}</div>
      <button className="btn" style={{ fontSize: 11, padding: '2px 8px', marginTop: 6 }}>RSVP</button>
    </div>);

}

function FormField({ label, tall }) {
  return (
    <label className="form-field">
      <span className="lbl">{label}</span>
      <div className={`input ${tall ? 'tall' : ''}`} />
    </label>);

}

// ---------- Hero (Home) ----------
function Hero() {
  return (
    <div className="hero">
      <PH label="[FOOD] · [BEER POUR] · [MOCKTAIL] · [PATIO/PEOPLE] · [INTERIOR] · carousel 4–5" h={140} style={{ marginBottom: 12 }} />
      <span className="logo-ph big">Beluga</span>
      <div className="tagline">· Taps and Plants ·</div>
      <div className="subhead">Tulsa's best beer, where you actually live.</div>
      <div className="hero-ctas">
        <a className="btn primary">View Menu</a>
        <a className="btn outline">Get Directions</a>
      </div>
      <a className="tap-call">📞 (918) XXX-XXXX</a>
    </div>);

}

function QuickInfoBand() {
  return (
    <div className="pill-band">
      <span className="pill">🕐 Tue–Sun · 11a–11p</span>
      <span className="pill">📍 Eton Square</span>
      <span className="pill">📞 (918) XXX-XXXX</span>
    </div>);

}

// Loud Pick-2 banner — gift announcement, not footnote (Base+ only)
function Pick2Banner() {
  return (
    <div className="pick2-banner-loud" style={{ height: "0px" }}>
      <span className="gift"></span>
      <span className="lead"></span>
      <span className="dot">·</span>
      <span className="value"></span>
      <span className="dot">·</span>
      <span className="counter"></span>
    </div>);

}

// Sticky-note annotation (§10): tilted 1–3°, drop shadow, sunshine paper, × close, Caveat font.
function StickyNote({ children, label, tone = 'sun', tilt = -1.6, kind = 'why' }) {
  return (
    <aside className={`sticky-note tone-${tone} kind-${kind}`}
    style={{ transform: `rotate(${tilt}deg)` }}>
      <button className="sn-close" aria-label="dismiss">×</button>
      {label && <span className="sn-label">{label}</span>}
      <div className="sn-body">{children}</div>
    </aside>);

}

function AddonSummary({ showTotals }) {
  const items = [
  ['Event calendar', 350],
  ['Brewroom inquiry form', 350],
  ['Private room inquiry form', 350],
  ['Newsletter module', 350],
  ['Blog (IG-fed)', 350],
  ['Reservation listings (OpenTable/Resy/etc.)', 350]];

  return (
    <div className="addon-summary">
      <h3>Add-ons · à la carte</h3>
      <ul>
        {items.map(([n, p]) =>
        <li key={n}>
            <span className="check" />
            <span>{n}</span>
            <span style={{ fontFamily: 'Caveat, cursive', fontSize: 18 }}>${p}</span>
          </li>
        )}
      </ul>
      {showTotals &&
      <div className="totals">
          <span>À la carte total: $2,100</span>
          <span>Base ($2,000) + all 6 add-ons: <strong>$4,100</strong></span>
        </div>
      }
    </div>);

}

// Crew rewards popup (replaces standalone /members page)
function CrewModal({ open, onClose }) {
  if (!open) return null;
  return (
    <div className="crew-modal-backdrop" onClick={onClose}>
      <div className="crew-modal" onClick={(e) => e.stopPropagation()}>
        <button className="crew-x" onClick={onClose} aria-label="close">×</button>
        <div className="page-header" style={{ padding: '14px 16px' }}>
          <h2 style={{ fontSize: 28 }}>Beluga Crew</h2>
          <div className="ribbon">Showing up has its perks.</div>
        </div>
        <div style={{ padding: 16 }}>
          <div style={{ fontSize: 13, marginBottom: 10 }}>
            Sign up at the bar or scan your receipt. Everything runs through our point-of-sale.
            No separate accounts, no extra passwords, no inbox spam.
          </div>
          <div style={{ fontFamily: 'Caveat, cursive', fontSize: 20, marginTop: 12 }}>Perks</div>
          {[['🎂', 'Birthday round'], ['🍺', 'Early tap access'], ['🥂', 'Anniversary drink'], ['🪑', 'Founders\u2019 table priority']].map(([i, t]) =>
          <div key={t} className="perk"><div className="icon">{i}</div><div>{t}</div></div>
          )}
          <div style={{ fontFamily: 'Caveat, cursive', fontSize: 20, marginTop: 14 }}>How to join</div>
          <div className="grid grid-2">
            <div style={{ border: '1.5px solid var(--ink)', padding: 10, background: '#fffaf0' }}>
              <div style={{ fontFamily: 'Caveat, cursive', fontSize: 20 }}>At the bar</div>
              <div style={{ fontSize: 12 }}>Ask any bartender. Takes 30 seconds.</div>
            </div>
            <div style={{ border: '1.5px solid var(--ink)', padding: 10, background: '#fffaf0' }}>
              <div style={{ fontFamily: 'Caveat, cursive', fontSize: 20 }}>Receipt scan</div>
              <div style={{ fontSize: 12 }}>Every receipt has a QR. Scan and you're in.</div>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

Object.assign(window, { CrewModal });
// not inside the wireframe content. Doesn't block the design.
function MarginSticky({ children, tone = 'note' }) {
  return (
    <aside className={`margin-sticky ${tone}`}>
      <span className="ms-tab">note for client</span>
      {children}
    </aside>);

}

Object.assign(window, {
  Block, PH, Note, Callout, TxtLines,
  WFNav, WFNavPlus, WFFooter,
  TapCard, MenuRow, EventCard, FormField,
  Hero, QuickInfoBand,
  Pick2Banner, AddonSummary, MarginSticky, StickyNote
});