/* global React */
// Shared atoms — wordmark, placeholders, rules, buttons, eyebrows.

const Wordmark = ({ size = 18, light = false, sub = 'Barber · Boutique' }) => (
  <div className="bb-wordmark" style={{ width: 'auto', display: 'inline-flex' }}>
    <div className="rule" style={{ width: '100%', background: light ? '#b8924a' : 'var(--gold)' }} />
    <div
      className="name"
      style={{
        fontSize: size,
        color: light ? '#faf8f3' : 'var(--ink)',
        padding: '2px 14px',
      }}
    >
      Bread Way<span style={{ color: 'var(--gold)' }}> Barber</span>
    </div>
    <div className="rule" style={{ width: '100%', background: light ? '#b8924a' : 'var(--gold)' }} />
    {sub ? (
      <div className="sub" style={{ marginTop: 4, color: light ? 'rgba(250,248,243,0.55)' : 'var(--muted)' }}>
        {sub}
      </div>
    ) : null}
  </div>
);

const GoldRule = ({ width = 60, color }) => (
  <div className="bb-rule" style={{ '--rule-color': color }}>
    <span style={{ width: width / 2 }} />
    <span className="dot" />
    <span style={{ width: width / 2 }} />
  </div>
);

const Placeholder = ({ label, height = 200, dark = false, style = {}, className = '' }) => (
  <div className={'bb-ph' + (dark ? ' bb-ph--dark' : '') + (className ? ' ' + className : '')} style={{ height, ...style }}>
    <div className="bb-ph__label">{label}</div>
  </div>
);

const SectionHead = ({ num, title, subtitle, light = false }) => (
  <div className="bb-section-head">
    {num ? <div className="num">— {num} —</div> : null}
    <div className="bb-rule"><span className="dot" /></div>
    <h2 style={{ color: light ? '#faf8f3' : undefined }}>{title}</h2>
    {subtitle ? <p>{subtitle}</p> : null}
  </div>
);

// Decorative scissors / razor / comb glyphs in pure SVG (very simple shapes)
const ScissorsGlyph = ({ size = 18, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1" strokeLinecap="round">
    <circle cx="6" cy="7" r="3" />
    <circle cx="6" cy="17" r="3" />
    <line x1="9" y1="9" x2="20" y2="20" />
    <line x1="9" y1="15" x2="20" y2="4" />
    <line x1="14.5" y1="9.5" x2="20" y2="4" />
  </svg>
);

const RazorGlyph = ({ size = 18, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1" strokeLinecap="round">
    <rect x="3" y="11" width="14" height="3" />
    <line x1="17" y1="12.5" x2="22" y2="12.5" />
    <line x1="7" y1="14" x2="7" y2="20" />
    <line x1="13" y1="14" x2="13" y2="20" />
  </svg>
);

const BottleGlyph = ({ size = 18, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1" strokeLinecap="round">
    <rect x="9" y="3" width="6" height="3" />
    <path d="M8 8 L8 20 Q8 21 9 21 L15 21 Q16 21 16 20 L16 8 Z" />
    <line x1="8" y1="12" x2="16" y2="12" />
  </svg>
);

// NYC subway-style "bullet" roundel used as the brand mark throughout the site.
const Logo = ({ size = 40, variant = 'ink' }) => {
  const bg = variant === 'gold' ? '#b8924a' : '#14110c';
  const fg = variant === 'gold' ? '#14110c' : '#b8924a';
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ display: 'block', flexShrink: 0 }}>
      <circle cx="32" cy="32" r="30" fill={bg} stroke="#b8924a" strokeWidth="1.5" />
      <circle cx="32" cy="32" r="25.5" fill="none" stroke={fg} strokeOpacity="0.35" strokeWidth="1" />
      <text
        x="32" y="42"
        textAnchor="middle"
        fontFamily="'JetBrains Mono', monospace"
        fontWeight="700"
        fontSize="30"
        fill={fg}
      >B</text>
    </svg>
  );
};

// Flat NYC skyline silhouette, meant to sit along the bottom edge of a dark panel.
const SkylineGlyph = ({ width = 400, height = 90, color = 'rgba(184,146,74,0.18)' }) => (
  <svg width="100%" height={height} viewBox="0 0 400 90" preserveAspectRatio="none" style={{ display: 'block' }}>
    <g fill={color}>
      <rect x="0" y="40" width="26" height="50" />
      <rect x="28" y="55" width="18" height="35" />
      <rect x="48" y="30" width="22" height="60" />
      <rect x="58" y="12" width="4" height="20" />
      <rect x="72" y="48" width="16" height="42" />
      <rect x="90" y="20" width="24" height="70" />
      <rect x="99" y="6" width="6" height="16" />
      <rect x="116" y="58" width="20" height="32" />
      <rect x="138" y="35" width="18" height="55" />
      <rect x="158" y="50" width="26" height="40" />
      <rect x="186" y="8" width="20" height="82" />
      <polygon points="186,8 196,-6 206,8" />
      <rect x="208" y="42" width="18" height="48" />
      <rect x="228" y="60" width="22" height="30" />
      <rect x="252" y="25" width="20" height="65" />
      <rect x="260" y="10" width="4" height="16" />
      <rect x="274" y="45" width="24" height="45" />
      <rect x="300" y="55" width="18" height="35" />
      <rect x="320" y="30" width="22" height="60" />
      <rect x="344" y="48" width="16" height="42" />
      <rect x="362" y="18" width="20" height="72" />
      <rect x="370" y="4" width="4" height="16" />
      <rect x="384" y="58" width="16" height="32" />
    </g>
  </svg>
);

const StarRow = ({ value = 5, size = 10, color = '#b8924a' }) => (
  <div style={{ display: 'inline-flex', gap: 2 }}>
    {[0,1,2,3,4].map(i => (
      <svg key={i} width={size} height={size} viewBox="0 0 10 10">
        <polygon
          points="5,0.5 6.3,3.6 9.5,3.9 7.1,6.1 7.8,9.3 5,7.6 2.2,9.3 2.9,6.1 0.5,3.9 3.7,3.6"
          fill={i < value ? color : 'none'}
          stroke={color}
          strokeWidth="0.5"
        />
      </svg>
    ))}
  </div>
);

Object.assign(window, {
  Wordmark, GoldRule, Placeholder, SectionHead,
  ScissorsGlyph, RazorGlyph, BottleGlyph, StarRow,
  Logo, SkylineGlyph,
});