// Loaf'd shared brand components

const Wordmark = ({ size = 80, variant = 'default', as: Tag = 'div', style = {}, ...rest }) => {
  // variant: default (raspberry+black shadow), reverse (cream+raspberry shadow), solid, outline
  // The auto-PNG pass in the host HTML will swap the rendering when text === LOAF'D.
  const cls = `wordmark ${variant === 'reverse' ? 'reverse' : ''} ${variant === 'solid' ? 'solid' : ''} ${variant === 'outline' ? 'outline' : ''}`;
  const styles = { fontSize: size, ...style };
  return <Tag className={cls.trim()} style={styles} {...rest}>LOAF'D</Tag>;
};

// Sub-brand wordmarks (same DNA, structurally different)
const SmashdMark = ({ size = 60, variant = 'default', style = {} }) => {
  const styles = { fontSize: size, ...style };
  const cls = `wordmark ${variant === 'reverse' ? 'reverse' : ''}`;
  return <div className={cls} style={styles}>SMASH'D</div>;
};

const BreakroomMark = ({ size = 36, variant = 'default', style = {} }) => {
  // The Breakroom uses a tighter, more bar-like treatment but keeps offset shadow
  const cls = `wordmark ${variant === 'reverse' ? 'reverse' : ''}`;
  return (
    <div style={{ display: 'inline-block', textAlign: 'center', ...style }}>
      <div className="mono" style={{ fontSize: size * 0.22, letterSpacing: '0.3em', opacity: 0.7, marginBottom: 4 }}>—— THE ——</div>
      <div className={cls} style={{ fontSize: size, lineHeight: 0.95 }}>BREAKROOM</div>
      <div className="mono" style={{ fontSize: size * 0.16, letterSpacing: '0.25em', opacity: 0.7, marginTop: 6 }}>SMITHFIELD · D7</div>
    </div>
  );
};

// Logo from PNG (when we want the exact raster)
const RasterLogo = ({ size = 120, style = {} }) => (
  <img src="assets/loafd-logo.png" alt="Loaf'd" style={{ width: size, height: size, objectFit: 'contain', ...style }} />
);

// Location chip — the "you're in Loaf'd" wayfinding device
const LocationChip = ({ town, solid = false, style = {} }) => (
  <div className={`chip ${solid ? 'solid' : ''} dot`} style={style}>{town}</div>
);

// Allergen number (Irish/EU 14-allergen system)
const Allergen = ({ children }) => <span className="allergen">{children}</span>;

const AllergenList = ({ codes }) => (
  <span className="mono" style={{ fontSize: 11, opacity: 0.7, letterSpacing: '0.04em' }}>
    {codes.join(', ')}
  </span>
);

// Image placeholder — striped, monospace caption (per default aesthetic)
const Placeholder = ({ caption, dark = false, style = {}, children }) => (
  <div className={`placeholder ${dark ? 'dark' : ''}`} style={style}>
    {children || caption?.toUpperCase()}
  </div>
);

// Color swatch
const Swatch = ({ name, hex, role, big = false, dark = false }) => (
  <div className="card" style={{ padding: 0, overflow: 'hidden', background: hex, color: dark ? '#fff' : '#0D0D0D', border: '1px solid rgba(0,0,0,0.1)' }}>
    <div style={{ height: big ? 220 : 140, background: hex }} />
    <div style={{ padding: 18, background: 'white', color: '#0D0D0D' }}>
      <div className="display" style={{ fontSize: 18, marginBottom: 4 }}>{name}</div>
      <div className="mono" style={{ fontSize: 12, opacity: 0.7 }}>{hex.toUpperCase()}</div>
      {role && <div className="mono" style={{ fontSize: 11, opacity: 0.6, marginTop: 6, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{role}</div>}
    </div>
  </div>
);

// Tint scale strip
const TintScale = ({ baseHex, name }) => {
  const tints = [10, 25, 40, 55, 70, 85, 100];
  const mix = (hex, pct) => {
    // mix base with white at pct% (toward white as pct decreases)
    const r = parseInt(hex.slice(1,3), 16);
    const g = parseInt(hex.slice(3,5), 16);
    const b = parseInt(hex.slice(5,7), 16);
    const w = pct/100;
    const mr = Math.round(r*w + 255*(1-w));
    const mg = Math.round(g*w + 255*(1-w));
    const mb = Math.round(b*w + 255*(1-w));
    return `rgb(${mr},${mg},${mb})`;
  };
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 8 }}>{name}</div>
      <div style={{ display: 'flex', borderRadius: 8, overflow: 'hidden', border: '1px solid rgba(0,0,0,0.08)' }}>
        {tints.map(t => (
          <div key={t} style={{ flex: 1, background: mix(baseHex, t), aspectRatio: '1/1.4', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: 4 }}>
            <div className="mono" style={{ fontSize: 9, color: t > 55 ? '#fff' : '#000', opacity: 0.7 }}>{t}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// Section header
const SectionHead = ({ num, title, kicker }) => (
  <div className="section-head">
    <div className="section-num">
      <span>Section</span>
      <strong>{num}</strong>
    </div>
    <div>
      <h2 className="section-title">{title}</h2>
      {kicker && <p className="section-kicker">{kicker}</p>}
    </div>
  </div>
);

// Cheese trio pictogram — distinctive Loaf'd marker
const CheeseTrio = ({ size = 90, style = {} }) => (
  <svg viewBox="0 0 220 90" style={{ width: size * 2.5, height: size, ...style }}>
    <g>
      {/* cheddar wedge */}
      <path d="M10 75 L40 15 L90 15 L70 75 Z" fill="#E9A53C" stroke="#0D0D0D" strokeWidth="2.5" strokeLinejoin="round"/>
      <circle cx="50" cy="40" r="3" fill="#0D0D0D"/>
      <circle cx="65" cy="55" r="2.5" fill="#0D0D0D"/>
      {/* mozzarella ball */}
      <circle cx="115" cy="50" r="28" fill="#FBF6EC" stroke="#0D0D0D" strokeWidth="2.5"/>
      <ellipse cx="108" cy="44" rx="6" ry="3.5" fill="#E5D6BD" opacity="0.8"/>
      {/* gouda wheel */}
      <ellipse cx="180" cy="58" rx="32" ry="22" fill="#D97A3C" stroke="#0D0D0D" strokeWidth="2.5"/>
      <path d="M148 58 Q180 36 212 58" fill="none" stroke="#0D0D0D" strokeWidth="2.5"/>
      <rect x="152" y="50" width="56" height="14" fill="#A53768" stroke="#0D0D0D" strokeWidth="2"/>
      <text x="180" y="61" textAnchor="middle" fontFamily="Bowlby One SC" fontSize="9" fill="#FBF6EC">LOAF'D</text>
    </g>
  </svg>
);

// Marquee
const Marquee = ({ items, style = {} }) => (
  <div className="marquee" style={style}>
    <div className="marquee-inner">
      {[...items, ...items, ...items, ...items].map((it, i) => (
        <span key={i}>{it}<span className="dot" /></span>
      ))}
    </div>
  </div>
);

Object.assign(window, {
  Wordmark, SmashdMark, BreakroomMark, RasterLogo,
  LocationChip, Allergen, AllergenList,
  Placeholder, Swatch, TintScale, SectionHead,
  CheeseTrio, Marquee,
});