// Cedar Hills · Harbor collection · sign components
// Direction F — coastal preppy. Double-line border frame, dusty blue ink,
// formal copperplate-style script names, italic "we are so happy" flourish.
//
// Shared utilities (PALETTES, E, Removable, signVars, useGuestList,
// useTableNumber, QRUploader) live in collection-shell.jsx + seating.jsx.

const { useState } = React;

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

  return (
    <div className="sign sign--f sign--c-welcome" style={signVars(p, w, h)}>
      <div className="sign-f__frame">
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-f__eyebrow">
                <div><E>WELCOME TO</E></div>
                <div><E>THE WEDDING OF</E></div>
              </div>
            </Removable>
          )}
          <div className="sign-f__script-stack">
            <div className="sign-f__script-name"><E>Margaret</E></div>
            <div className="sign-f__and"><E>and</E></div>
            <div className="sign-f__script-name"><E>Daniel</E></div>
          </div>
          {shown.date && (
            <Removable onRemove={() => hide('date')}>
              <div className="sign-f__date"><E>SATURDAY, MAY 16TH 2026</E></div>
            </Removable>
          )}
          {shown.flourish && (
            <Removable onRemove={() => hide('flourish')}>
              <div className="sign-f__flourish"><E>we are so happy you&rsquo;re here!</E></div>
            </Removable>
          )}
        </div>
      </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, foot: 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--f sign--c-bar" style={signVars(p, w, h)}>
      <div className="sign-f__frame">
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-f__eyebrow">
                <div><E>PLEASE HELP YOURSELF</E></div>
                <div><E>FROM THE BAR</E></div>
              </div>
            </Removable>
          )}
          <div className="sign-f__script-single"><E>Cheers</E></div>
          <div className="bar-menu bar-menu--harbor">
            {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>
          {shown.foot && (
            <Removable onRemove={() => hide('foot')}>
              <div className="sign-f__date"><E>MARGARET &amp; DANIEL &middot; MAY 16, 2026</E></div>
            </Removable>
          )}
        </div>
      </div>
    </div>
  );
}

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

  return (
    <div className="sign sign--f sign--c-small sign--c-cards" style={signVars(p, w, h)}>
      <div className="sign-f__frame">
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-f__eyebrow">
                <div><E>WITH GRATITUDE</E></div>
              </div>
            </Removable>
          )}
          <div className="sign-f__script-single"><E>Cards &amp; Gifts</E></div>
          <div className="sign-f__body">
            <E>Leave your kind words</E><br />
            <E>and well-wishes here.</E>
          </div>
          {shown.foot && (
            <Removable onRemove={() => hide('foot')}>
              <div className="sign-f__date sign-f__date--sm"><E>MARGARET &amp; DANIEL</E></div>
            </Removable>
          )}
        </div>
      </div>
    </div>
  );
}

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

  return (
    <div className="sign sign--f sign--c-small sign--c-unplugged" style={signVars(p, w, h)}>
      <div className="sign-f__frame">
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-f__eyebrow">
                <div><E>A QUIET MOMENT</E></div>
              </div>
            </Removable>
          )}
          <div className="sign-f__script-single"><E>Unplugged</E></div>
          <div className="sign-f__body">
            <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.foot && (
            <Removable onRemove={() => hide('foot')}>
              <div className="sign-f__date sign-f__date--sm"><E>PHOTOGRAPHS TO FOLLOW</E></div>
            </Removable>
          )}
        </div>
      </div>
    </div>
  );
}

// ─────────── IN LOVING MEMORY · 8×10″ framed ───────────
const DEFAULT_MEMORY_NAMES = [
  { 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, foot: true });
  const [names, setNames] = useState(DEFAULT_MEMORY_NAMES);
  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--f sign--c-small sign--c-memory" style={signVars(p, w, h)}>
      <div className="sign-f__frame">
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-f__eyebrow">
                <div><E>FOREVER WITH US</E></div>
              </div>
            </Removable>
          )}
          <div className="sign-f__script-single"><E>In Loving Memory</E></div>
          <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.foot && (
            <Removable onRemove={() => hide('foot')}>
              <div className="sign-f__date sign-f__date--sm"><E>MARGARET &amp; DANIEL</E></div>
            </Removable>
          )}
        </div>
      </div>
    </div>
  );
}

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

  return (
    <>
      <div className="sign sign--f sign--c-small sign--c-tablenum" style={signVars(p, w, h)}>
        <div className="sign-f__frame">
          <div className="sign__inner">
            {shown.eyebrow && (
              <Removable onRemove={() => hide('eyebrow')}>
                <div className="sign-f__eyebrow">
                  <div><E>TABLE</E></div>
                </div>
              </Removable>
            )}
            <div className="table-number">
              <div className="table-number__digits">{tn.n}</div>
            </div>
            {shown.foot && (
              <Removable onRemove={() => hide('foot')}>
                <div className="sign-f__date sign-f__date--sm"><E>MARGARET &amp; DANIEL</E></div>
              </Removable>
            )}
          </div>
        </div>
      </div>
      <TableNumberStepper tn={tn} />
    </>
  );
}

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

  return (
    <div className="sign sign--f sign--c-small sign--c-album" style={signVars(p, w, h)}>
      <div className="sign-f__frame">
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-f__eyebrow">
                <div><E>SHARE THE DAY</E></div>
              </div>
            </Removable>
          )}
          <div className="sign-f__script-single sign-f__script-single--sm"><E>Capture</E></div>
          <div className="sign-f__qr-wrap">
            <QRUploader id="harbor-album" size={150} placeholder="Drop QR code" />
          </div>
          {shown.caption && (
            <Removable onRemove={() => hide('caption')}>
              <div className="sign-f__body sign-f__body--qr">
                <E>Scan to add your photos to our wedding album.</E>
              </div>
            </Removable>
          )}
          {shown.foot && (
            <Removable onRemove={() => hide('foot')}>
              <div className="sign-f__date sign-f__date--sm"><E>MARGARET &amp; DANIEL</E></div>
            </Removable>
          )}
        </div>
      </div>
    </div>
  );
}

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

  return (
    <>
      <div className="sign sign--f sign--c-seating" style={signVars(p, w, h)}>
        <div className="sign-f__frame">
          <div className="sign__inner">
            {shown.eyebrow && (
              <Removable onRemove={() => hide('eyebrow')}>
                <div className="sign-f__eyebrow">
                  <div><E>PLEASE FIND YOUR SEAT</E></div>
                </div>
              </Removable>
            )}
            <div className="sign-f__script-single"><E>Seating</E></div>

            <div className="seating-list seating-list--harbor" 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>

            {shown.foot && (
              <Removable onRemove={() => hide('foot')}>
                <div className="sign-f__date"><E>MARGARET &amp; DANIEL &middot; MAY 16, 2026</E></div>
              </Removable>
            )}
          </div>
        </div>
      </div>
      <GuestEditor gl={gl} />
    </>
  );
}

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