// The contact channel list, shared by both surfaces.
//
// Three ways to reach the shop: where it is, its Instagram, and when it is
// open. There is no phone or email row — the shop does not hand either out,
// and a card promising a channel nobody answers is worse than no card.
//
// A channel whose value is null has not been supplied yet and renders the
// muted italic t.contact.pending line rather than a made-up value. Opening
// hours are not part of CORNER_CONTACT: they are already known and live in
// the copy (t.contact.hours), so that row is never pending.
function cornerChannels(t, lang) {
  const c = window.CORNER_CONTACT;
  const maps = window.CORNER_MAPS_LINK;
  // The address is written in each locale's own script, so the Bulgarian page
  // does not drop a Latin street line into otherwise Cyrillic copy.
  const address = c.address ? (c.address[lang] || c.address.en) : null;
  return [
    {
      key: 'address',
      label: t.contact.labels.address,
      value: address,
      // The maps link sits on its own line beneath the address rather than
      // wrapping it, so the row reads as a place first and a link second.
      extra: { text: t.location.cta, href: maps },
    },
    {
      key: 'instagram',
      label: t.contact.labels.instagram,
      icon: 'instagram',
      value: c.instagram ? '@' + c.instagram : null,
      href: c.instagram ? 'https://instagram.com/' + c.instagram : null,
      external: true,
    },
    {
      key: 'hours',
      label: t.contact.labels.hours,
      value: t.contact.hours,
      href: null,
    },
  ];
}
window.cornerChannels = cornerChannels;

// Inline SVG glyphs, so a channel that has a recognisable mark is recognised
// before its label is read. Drawn on a 24-grid with currentColor strokes, so
// the icon picks up the label's colour and needs no asset file.
function ChannelIcon({ name, size = 16 }) {
  if (name !== 'instagram') return null;
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
      aria-hidden="true" focusable="false" style={{ flex: '0 0 auto', display: 'block' }}
    >
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.2" cy="6.8" r="1.2" fill="currentColor" stroke="none" />
    </svg>
  );
}
window.ChannelIcon = ChannelIcon;

function ContactChannels({ t, lang, compact = false }) {
  return (
    <div className="c-contact-grid" style={{
      display: 'grid',
      // auto-fit rather than a fixed pair of columns: three cards sit three
      // across on a wide page and reflow on their own as it narrows.
      gridTemplateColumns: compact ? '1fr' : 'repeat(auto-fit, minmax(240px, 1fr))',
      gap: compact ? 12 : 16,
    }}>
      {cornerChannels(t, lang).map((ch) => {
        const pending = !ch.value;
        const body = (
          <span style={{
            font: 'var(--text-body-m)',
            color: pending ? 'var(--text-muted)' : 'var(--text-primary)',
            fontStyle: pending ? 'italic' : 'normal',
            wordBreak: 'break-word',
          }}>
            {ch.value || t.contact.pending}
          </span>
        );
        return (
          <div key={ch.key} style={{
            background: 'var(--surface-card)',
            border: 'var(--border-width-hairline) solid var(--border-default)',
            borderRadius: 'var(--radius-md)',
            boxShadow: 'var(--shadow-stamp-sm)',
            padding: compact ? '16px 18px' : '20px 22px',
            display: 'flex', flexDirection: 'column', gap: 6,
          }}>
            <span style={{
              font: 'var(--text-label-caps)', letterSpacing: 'var(--tracking-caps)',
              textTransform: 'uppercase', color: 'var(--text-muted)',
              display: 'inline-flex', alignItems: 'center', gap: 7,
            }}>
              <ChannelIcon name={ch.icon} />
              {ch.label}
            </span>
            {ch.href ? (
              <a
                href={ch.href}
                {...(ch.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                style={{ textDecoration: 'none' }}
              >
                {body}
              </a>
            ) : body}
            {ch.extra && (
              <a
                href={ch.extra.href}
                target="_blank"
                rel="noopener noreferrer"
                style={{ font: 'var(--text-body-s)', color: 'var(--text-link)' }}
              >
                {ch.extra.text}
              </a>
            )}
          </div>
        );
      })}
    </div>
  );
}
window.ContactChannels = ContactChannels;