// Cedar Hills · Heirloom collection · sign components
// Classical, arched, italic lowercase, ornament dividers.
//
// Shared utilities (PALETTES, E, Removable, signVars) live in
// collection-shell.jsx, loaded before this file.

const { useState } = React;

// ─────────── WELCOME · 18×24″ poster (arched monogram hero) ───────────
function WelcomeSign({ p, w = 540, h = 720 }) {
  const [shown, setShown] = useState({ eyebrow: true, ornament: true, date: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <div className="sign sign--b sign--h-welcome" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-b__eyebrow"><E>EST · MMXXVI</E></div>
          </Removable>
        )}
        <div className="sign-b__arch">
          <div className="sign-b__monogram">
            <E>M</E>
            <span className="sign-b__amp">&amp;</span>
            <E>D</E>
          </div>
        </div>
        <div className="sign-b__welcome"><E>welcome</E></div>
        <div className="sign-b__names"><E>MARGARET &amp; DANIEL</E></div>
        {shown.ornament && (
          <Removable onRemove={() => hide('ornament')}>
            <div className="sign-b__ornament">&middot; &middot; &middot;</div>
          </Removable>
        )}
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-b__date">
              <E>the sixteenth of may</E><br />
              <E>two thousand twenty-six</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── BAR · 18×24″ poster ───────────
const DEFAULT_BAR_ITEMS = [
  { id: 'm', name: 'THE MARGARET', desc: 'gin · cucumber · elderflower · mint' },
  { id: 'd', name: 'THE DANIEL',   desc: 'rye · maple · orange bitters' },
  { id: 'w', name: 'WINE & BUBBLY', desc: 'cabernet · sauvignon blanc · prosecco' },
  { id: 'b', name: 'BEER & SOFT',   desc: 'pilsner · IPA · seltzer · lemonade' },
];

function BarSign({ p, w = 540, h = 720 }) {
  const [shown, setShown] = useState({ eyebrow: true, pretitle: true, date: true });
  const [items, setItems] = useState(DEFAULT_BAR_ITEMS);
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));
  const removeItem = (id) => setItems((arr) => arr.filter((it) => it.id !== id));
  const addItem = () => setItems((arr) => [
    ...arr,
    { id: 'x' + Date.now(), name: 'NEW POUR', desc: 'ingredients here' },
  ]);

  return (
    <div className="sign sign--b sign--h-bar" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-b__eyebrow"><E>FROM THE BAR &middot; MMXXVI</E></div>
          </Removable>
        )}
        <div className="sign-b__welcome sign-b__welcome--bar"><E>cheers</E></div>
        <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
        {shown.pretitle && (
          <Removable onRemove={() => hide('pretitle')}>
            <div className="sign-b__pretitle"><E>please help yourself</E></div>
          </Removable>
        )}
        <div className="bar-menu bar-menu--heirloom">
          {items.map((it) => (
            <div key={it.id} className="bar-item">
              <div className="bar-item__name"><E>{it.name}</E></div>
              <div className="bar-item__desc"><E>{it.desc}</E></div>
              <button type="button" className="bar-item__x" onClick={() => removeItem(it.id)} aria-label="Remove this drink" title="Remove this drink">
                <span aria-hidden="true">×</span>
              </button>
            </div>
          ))}
          <button type="button" className="bar-menu__add" onClick={addItem}>+ Add a drink</button>
        </div>
        <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-b__date sign-b__date--small">
              <E>margaret &amp; daniel</E>
              <br />
              <E>may sixteenth, mmxxvi</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── CARDS & GIFTS · 8×10″ framed ───────────
function CardsSign({ p, w = 400, h = 500 }) {
  const [shown, setShown] = useState({ eyebrow: true, orn1: true, orn2: true, date: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <div className="sign sign--b sign--h-small sign--h-cards" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-b__eyebrow"><E>WITH GRATITUDE</E></div>
          </Removable>
        )}
        <div className="sign-b__welcome sign-b__welcome--small"><E>cards &amp; gifts</E></div>
        {shown.orn1 && (
          <Removable onRemove={() => hide('orn1')}>
            <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
          </Removable>
        )}
        <div className="sign-b__body">
          <E>Leave your kind words</E><br />
          <E>and well-wishes here.</E>
        </div>
        {shown.orn2 && (
          <Removable onRemove={() => hide('orn2')}>
            <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
          </Removable>
        )}
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-b__date sign-b__date--small">
              <E>margaret &amp; daniel &middot; mmxxvi</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── UNPLUGGED · 8×10″ framed ───────────
function UnpluggedSign({ p, w = 400, h = 500 }) {
  const [shown, setShown] = useState({ eyebrow: true, orn1: true, orn2: true, foot: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <div className="sign sign--b sign--h-small sign--h-unplugged" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-b__eyebrow"><E>A QUIET MOMENT</E></div>
          </Removable>
        )}
        <div className="sign-b__welcome sign-b__welcome--small"><E>unplugged</E></div>
        {shown.orn1 && (
          <Removable onRemove={() => hide('orn1')}>
            <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
          </Removable>
        )}
        <div className="sign-b__body sign-b__body--unplugged">
          <E>We invite you to be</E><br />
          <E>fully present with us.</E><br /><br />
          <E>Please silence and put away</E><br />
          <E>phones until vows are said.</E>
        </div>
        {shown.orn2 && (
          <Removable onRemove={() => hide('orn2')}>
            <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
          </Removable>
        )}
        {shown.foot && (
          <Removable onRemove={() => hide('foot')}>
            <div className="sign-b__date sign-b__date--small">
              <E>photographs to follow</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── PHOTO ALBUM (QR) · 8×10″ framed ───────────
function AlbumSign({ p, w = 400, h = 500 }) {
  const [shown, setShown] = useState({ eyebrow: true, orn1: true, caption: true, orn2: true, date: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <div className="sign sign--b sign--h-small sign--h-album" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-b__eyebrow"><E>WITH GRATITUDE</E></div>
          </Removable>
        )}
        <div className="sign-b__welcome sign-b__welcome--small"><E>share the day</E></div>
        {shown.orn1 && (
          <Removable onRemove={() => hide('orn1')}>
            <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
          </Removable>
        )}
        <div className="sign-b__qr-wrap">
          <QRUploader id="heirloom-album" size={170} placeholder="Drop QR code" />
        </div>
        {shown.caption && (
          <Removable onRemove={() => hide('caption')}>
            <div className="sign-b__body sign-b__body--qr">
              <E>scan to add your photos to our wedding album</E>
            </div>
          </Removable>
        )}
        {shown.orn2 && (
          <Removable onRemove={() => hide('orn2')}>
            <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
          </Removable>
        )}
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-b__date sign-b__date--small">
              <E>margaret &amp; daniel &middot; mmxxvi</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── IN LOVING MEMORY · 8×10″ framed ───────────
const DEFAULT_MEMORY_NAMES_B = [
  { id: 'n1', name: 'Eleanor Whitfield' },
  { id: 'n2', name: 'James Patrick Hayes' },
  { id: 'n3', name: 'Rose Margaret Aldridge' },
];

function MemorySign({ p, w = 400, h = 500 }) {
  const [shown, setShown] = useState({ eyebrow: true, orn1: true, orn2: true, date: true });
  const [names, setNames] = useState(DEFAULT_MEMORY_NAMES_B);
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));
  const removeName = (id) => setNames((arr) => arr.filter((n) => n.id !== id));
  const addName = () => setNames((arr) => [...arr, { id: 'x' + Date.now(), name: 'their name here' }]);

  return (
    <div className="sign sign--b sign--h-small sign--h-memory" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-b__eyebrow"><E>FOREVER WITH US</E></div>
          </Removable>
        )}
        <div className="sign-b__welcome sign-b__welcome--small"><E>in loving memory</E></div>
        {shown.orn1 && (
          <Removable onRemove={() => hide('orn1')}>
            <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
          </Removable>
        )}
        <div className="memory-list">
          {names.map((n) => (
            <div key={n.id} className="memory-item">
              <div className="memory-item__name"><E>{n.name}</E></div>
              <button type="button" className="memory-item__x" onClick={() => removeName(n.id)} aria-label="Remove this name" title="Remove this name">
                <span aria-hidden="true">×</span>
              </button>
            </div>
          ))}
          <button type="button" className="memory-list__add" onClick={addName}>+ Add a name</button>
        </div>
        {shown.orn2 && (
          <Removable onRemove={() => hide('orn2')}>
            <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
          </Removable>
        )}
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-b__date sign-b__date--small">
              <E>margaret &amp; daniel &middot; mmxxvi</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── TABLE NUMBER · 4×6″ tented frame ───────────
function TableNumberSign({ p, w = 360, h = 540 }) {
  const tn = useTableNumber('heirloom-table');
  const [shown, setShown] = useState({ eyebrow: true, orn1: true, orn2: true, foot: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <>
      <div className="sign sign--b sign--h-small sign--h-tablenum" style={signVars(p, w, h)}>
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-b__eyebrow"><E>TABLE</E></div>
            </Removable>
          )}
          {shown.orn1 && (
            <Removable onRemove={() => hide('orn1')}>
              <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
            </Removable>
          )}
          <div className="table-number">
            <div className="table-number__digits">{tn.n}</div>
          </div>
          {shown.orn2 && (
            <Removable onRemove={() => hide('orn2')}>
              <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
            </Removable>
          )}
          {shown.foot && (
            <Removable onRemove={() => hide('foot')}>
              <div className="sign-b__date sign-b__date--small">
                <E>margaret &amp; daniel &middot; mmxxvi</E>
              </div>
            </Removable>
          )}
        </div>
      </div>
      <TableNumberStepper tn={tn} />
    </>
  );
}

// ─────────── SEATING CHART · 18×24″ poster ───────────
function SeatingChart({ p, w = 540, h = 720 }) {
  const gl = useGuestList('heirloom-seating');
  const [shown, setShown] = useState({ eyebrow: true, pretitle: true, date: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <>
      <div className="sign sign--b sign--h-seating" style={signVars(p, w, h)}>
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-b__eyebrow"><E>PLEASE FIND YOUR SEAT</E></div>
            </Removable>
          )}
          <div className="sign-b__welcome sign-b__welcome--seating"><E>seating</E></div>
          <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
          {shown.pretitle && (
            <Removable onRemove={() => hide('pretitle')}>
              <div className="sign-b__pretitle"><E>by last name &middot; by table</E></div>
            </Removable>
          )}

          <div className="seating-list seating-list--heirloom" style={seatingListStyle(gl.count)}>
            {gl.sortedGuests.map((g) => (
              <div key={g.id} className="seating-row">
                <span className="seating-row__name">{g.last}, {g.first}</span>
                <span className="seating-row__dots" aria-hidden="true" />
                <span className="seating-row__table">{g.table}</span>
              </div>
            ))}
          </div>

          <div className="sign-b__ornament sign-b__ornament--inline">&middot; &middot; &middot;</div>
          {shown.date && (
            <Removable onRemove={() => hide('date')}>
              <div className="sign-b__date sign-b__date--small">
                <E>margaret &amp; daniel &middot; may sixteenth, mmxxvi</E>
              </div>
            </Removable>
          )}
        </div>
      </div>
      <GuestEditor gl={gl} />
    </>
  );
}

Object.assign(window, { WelcomeSign, BarSign, CardsSign, UnpluggedSign, AlbumSign, MemorySign, TableNumberSign, SeatingChart });
window.CollectionWelcomes = window.CollectionWelcomes || {};
window.CollectionWelcomes.heirloom = WelcomeSign;