/* Delishpot-style wordmark, redrawn (lowercase rounded with the "o" as a dot, tagline below) */

function Logo({ color = '#0e6e6a', dot = '#e87a1f', size = 1, tagline = true, className = '' }) {
  const fs = 44 * size;
  const tf = 9.5 * size;
  return (
    <div className={'dp-logo ' + className} style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start', lineHeight: 1, color }}>
      <div style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700, fontSize: fs, letterSpacing: '-0.02em', display: 'flex', alignItems: 'baseline', gap: 0 }}>
        <span>delishp</span>
        <span style={{ position: 'relative', display: 'inline-flex', width: fs * 0.55, justifyContent: 'center' }}>
          <span style={{ width: fs * 0.4, height: fs * 0.4, borderRadius: '50%', background: dot, alignSelf: 'center', display: 'inline-block', transform: `translateY(${-fs * 0.05}px)` }}></span>
        </span>
        <span style={{ marginLeft: -fs * 0.05 }}>t</span>
      </div>
      {tagline && (
        <div style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 400, fontSize: tf, color, opacity: 0.85, marginTop: 4, letterSpacing: '0.02em' }}>
          …for the love of food
        </div>
      )}
    </div>
  );
}

function LogoMark({ color = '#0e6e6a', dot = '#e87a1f', size = 36 }) {
  return (
    <div style={{ width: size, height: size, borderRadius: '50%', border: `2px solid ${color}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
      <span style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 800, fontSize: size * 0.42, color, letterSpacing: '-0.04em' }}>d</span>
      <span style={{ position: 'absolute', top: size * 0.16, right: size * 0.16, width: size * 0.16, height: size * 0.16, borderRadius: '50%', background: dot }}></span>
    </div>
  );
}

Object.assign(window, { Logo, LogoMark });