// Shared theme, fonts, primitives, and common chrome (Nav + Footer) for
// Counter Goods. All copy here is em-dash-free per the brief; punctuation
// uses periods, commas, and the occasional " · " separator. The Workshop
// visual language carries over from variation B: deep forest canvas, warm
// cream type, brass accent, oversized industrial sans paired with an
// editorial italic serif.

window.CG = window.CG || {};

// Tweakable defaults. Theme + accent are merged into computed colors below
// so the Tweaks panel can flip them at runtime.
const CG_THEMES = {
  forest:   { bg: '#1a1f1a', bgSoft: '#222822', bgPanel: '#2a312a', rule: '#3a423a', ruleSoft: '#2c332c' },
  charcoal: { bg: '#15171a', bgSoft: '#1d2024', bgPanel: '#262a2f', rule: '#3a3e44', ruleSoft: '#2a2e34' },
  oxblood:  { bg: '#1d1414', bgSoft: '#261919', bgPanel: '#301f1f', rule: '#4a3030', ruleSoft: '#332222' },
};
const CG_ACCENTS = {
  brass: { accent: '#e2c46d', accentSoft: '#a48a3f', accentInk: '#0c0c0c' },
  cream: { accent: '#efe9da', accentSoft: '#bfb9ab', accentInk: '#1a1f1a' },
  clay:  { accent: '#d97a4a', accentSoft: '#a85a30', accentInk: '#1a1010' },
};

CG.computePalette = function (themeKey, accentKey) {
  const t = CG_THEMES[themeKey] || CG_THEMES.forest;
  const a = CG_ACCENTS[accentKey] || CG_ACCENTS.brass;
  return {
    ...t, ...a,
    paper: '#efe9da',
    paperDim: '#bfb9ab',
    ink: '#0c100c',
  };
};

CG.FONTS = {
  serif: '"Cormorant Garamond", "EB Garamond", Georgia, serif',
  sans: '"Inter", "Söhne", "Helvetica Neue", Arial, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

CG.DENSITY = {
  cozy: { padX: 56, padY: 88, gap: 64 },
  std:  { padX: 48, padY: 72, gap: 48 },
  tight:{ padX: 36, padY: 52, gap: 32 },
};

// ── Primitives ─────────────────────────────────────────────────────────
CG.Tag = function ({ children, color, style }) {
  return (
    <span style={{
      fontFamily: CG.FONTS.mono, fontSize: 10, letterSpacing: '0.22em',
      textTransform: 'uppercase', color, ...style,
    }}>{children}</span>
  );
};

CG.Eyebrow = function ({ children, color, style }) {
  return (
    <div style={{
      fontFamily: CG.FONTS.mono, fontSize: 11, letterSpacing: '0.24em',
      textTransform: 'uppercase', color, ...style,
    }}>{children}</div>
  );
};

CG.Btn = function ({ children, variant = 'fill', accent, ink, paper, style, onClick }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '14px 22px', fontFamily: CG.FONTS.sans, fontSize: 12,
    letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700,
    borderRadius: 999, cursor: 'pointer', border: '1px solid transparent',
    transition: 'transform .15s ease, opacity .15s ease',
  };
  const styles = {
    fill: { ...base, background: accent, color: ink },
    paper: { ...base, background: paper, color: ink },
    ghost: { ...base, background: 'transparent', color: paper, border: `1px solid ${paper}` },
  };
  return (
    <button onClick={onClick} style={{ ...styles[variant], ...style }}
      onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
    >{children}</button>
  );
};

// ── Viewport hook for responsive layouts ───────────────────────────────
// Returns true when window width is below `breakpoint` (default 760).
CG.useIsMobile = function (breakpoint = 760) {
  const [m, setM] = React.useState(
    typeof window !== 'undefined' ? window.innerWidth < breakpoint : false
  );
  React.useEffect(() => {
    const onR = () => setM(window.innerWidth < breakpoint);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, [breakpoint]);
  return m;
};

// ── Top utility strip + main nav (sticky) ──────────────────────────────
CG.Nav = function ({ palette, current = 'home', sticky = true }) {
  const links = [
    { id: 'work', label: 'Work', href: 'https://www.instagram.com/countergoods.design', external: true },
    { id: 'services', label: 'Services', href: 'index.html#services' },
    { id: 'contact', label: 'Contact', href: 'index.html#contact' },
  ];
  // Listen to viewport width so we can collapse nav links on narrow widths.
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onR = () => setW(window.innerWidth);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  const showLinks = w >= 760;
  const showCTA = w >= 560;
  return (
    <div style={{ position: sticky ? 'sticky' : 'static', top: 0, zIndex: 50, background: palette.bg }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
        padding: w < 760 ? '16px 20px' : '20px 32px', borderBottom: `1px solid ${palette.rule}`,
      }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'baseline', gap: 10, textDecoration: 'none', flexShrink: 0 }}>
          <span style={{ fontFamily: CG.FONTS.serif, fontSize: 28, fontStyle: 'italic', color: palette.paper, fontWeight: 500 }}>Counter</span>
          <span style={{ fontFamily: CG.FONTS.sans, fontSize: 11, letterSpacing: '0.4em', color: palette.accent, textTransform: 'uppercase', fontWeight: 700 }}>GOODS</span>
        </a>
        {showLinks && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 28, fontFamily: CG.FONTS.sans, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.16em', fontWeight: 500 }}>
            {links.map(l => (
              <a key={l.id} href={l.href}
                target={l.external ? '_blank' : undefined}
                rel={l.external ? 'noopener noreferrer' : undefined}
                style={{
                  textDecoration: 'none',
                  borderBottom: l.id === current ? `1px solid ${palette.accent}` : '1px solid transparent',
                  paddingBottom: 4, color: l.id === current ? palette.accent : palette.paper,
                }}>{l.label}</a>
            ))}
          </div>
        )}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
          {showCTA && (
            <a href="index.html#contact" style={{ textDecoration: 'none' }}>
              <CG.Btn variant="fill" accent={palette.accent} ink={palette.accentInk}>Start a project →</CG.Btn>
            </a>
          )}
          {!showLinks && (
            <button
              onClick={() => setMenuOpen(o => !o)}
              aria-label={menuOpen ? 'Close menu' : 'Open menu'}
              style={{
                background: 'transparent', border: `1px solid ${palette.rule}`,
                color: palette.paper, cursor: 'pointer', padding: '8px 12px',
                fontFamily: CG.FONTS.mono, fontSize: 18, lineHeight: 1, borderRadius: 4,
              }}>{menuOpen ? '✕' : '☰'}</button>
          )}
        </div>
      </div>
      {!showLinks && menuOpen && (
        <div style={{ background: palette.bg, borderBottom: `1px solid ${palette.rule}` }}>
          {links.map(l => (
            <a key={l.id} href={l.href}
              target={l.external ? '_blank' : undefined}
              rel={l.external ? 'noopener noreferrer' : undefined}
              onClick={() => setMenuOpen(false)}
              style={{
                display: 'block', padding: '18px 20px', borderTop: `1px solid ${palette.rule}`,
                fontFamily: CG.FONTS.sans, fontSize: 13, textTransform: 'uppercase',
                letterSpacing: '0.18em', fontWeight: 600, textDecoration: 'none',
                color: l.id === current ? palette.accent : palette.paper,
              }}>{l.label}</a>
          ))}
        </div>
      )}
    </div>
  );
};

// ── Footer ─────────────────────────────────────────────────────────────
CG.Footer = function ({ palette }) {
  const isMobile = CG.useIsMobile();
  return (
    <div style={{ padding: isMobile ? '40px 20px 24px' : '64px 48px 36px', borderTop: `1px solid ${palette.rule}`, background: palette.bg }}>
      <div style={{
        fontFamily: CG.FONTS.sans, fontWeight: 800, fontSize: 'clamp(40px, 9.5vw, 168px)', lineHeight: 0.86,
        letterSpacing: '-0.05em', color: palette.paper, textTransform: 'uppercase',
        borderBottom: `1px solid ${palette.rule}`, paddingBottom: 24,
        whiteSpace: 'nowrap',
      }}>COUNTER<span style={{ color: palette.accent }}>·</span>GOODS</div>
      <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr 1fr', gap: isMobile ? 24 : 32 }}>
        <div style={{ fontFamily: CG.FONTS.sans, fontSize: 13, lineHeight: 1.6, color: palette.paperDim, maxWidth: 380 }}>
          A retail studio for cafes, restaurants, and local brands. We design, source, and produce the goods people actually want to wear.
        </div>
        <div>
          <CG.Eyebrow color={palette.paperDim} style={{ marginBottom: 14 }}>Studio</CG.Eyebrow>
          <div style={{ fontFamily: CG.FONTS.sans, fontSize: 14, color: palette.paper, display: 'grid', gap: 8 }}>
            <a href="https://www.instagram.com/countergoods.design" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Work</a>
            <a href="index.html#services" style={{ color: 'inherit', textDecoration: 'none' }}>Services</a>
            <a href="index.html#process" style={{ color: 'inherit', textDecoration: 'none' }}>Process</a>
            <a href="index.html#packages" style={{ color: 'inherit', textDecoration: 'none' }}>Packages</a>
          </div>
        </div>
        <div>
          <CG.Eyebrow color={palette.paperDim} style={{ marginBottom: 14 }}>Contact</CG.Eyebrow>
          <div style={{ fontFamily: CG.FONTS.sans, fontSize: 14, color: palette.paper, display: 'grid', gap: 8 }}>
            <div>countergoods.studio@gmail.com</div>
          </div>
        </div>
      </div>
      <div style={{ marginTop: 36, display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 12 : 0, justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'baseline' }}>
        <div style={{ fontFamily: CG.FONTS.mono, fontSize: 11, letterSpacing: '0.16em', color: palette.paperDim, textTransform: 'uppercase' }}>© 2026 COUNTER GOODS STUDIO. ALL RIGHTS RESERVED.</div>
        <div style={{ fontFamily: CG.FONTS.serif, fontStyle: 'italic', fontSize: 16, color: palette.paperDim }}>we don't call it merch.</div>
      </div>
    </div>
  );
};

// ── Plate SVG (used in inventory + portfolio) ──────────────────────────
CG.Plate = function ({ shape, palette }) {
  const fg = palette.ink, paper = '#efe9da';
  return (
    <svg width="100%" height="100%" viewBox="0 0 200 240" preserveAspectRatio="xMidYMid meet" style={{ display: 'block' }}>
      <rect width="200" height="240" fill={paper} />
      {shape === 'cap' && (<g><path d="M 50 130 Q 50 90, 100 86 Q 150 90, 150 130 L 150 142 Q 100 154, 50 142 Z" fill={fg} /><ellipse cx="100" cy="142" rx="58" ry="6" fill="#0c100c" /></g>)}
      {shape === 'tote' && (<g><rect x="60" y="80" width="80" height="100" fill={fg} /><path d="M 78 80 Q 78 60, 100 60 Q 122 60, 122 80" fill="none" stroke={fg} strokeWidth="3" /></g>)}
      {shape === 'tee' && (<g><path d="M 60 90 L 80 70 L 120 70 L 140 90 L 130 110 L 130 180 L 70 180 L 70 110 Z" fill={fg} /></g>)}
      {shape === 'mug' && (<g><rect x="70" y="80" width="60" height="90" fill={fg} rx="4" /><path d="M 130 100 Q 150 100, 150 120 Q 150 140, 130 140" stroke={fg} strokeWidth="6" fill="none" /></g>)}
      {shape === 'apron' && (<g><path d="M 70 80 L 130 80 L 145 110 L 140 180 L 60 180 L 55 110 Z" fill={fg} /></g>)}
      {shape === 'crew' && (<g><path d="M 55 95 L 80 75 L 120 75 L 145 95 L 135 115 L 135 185 L 65 185 L 65 115 Z" fill={fg} /><circle cx="100" cy="80" r="6" fill={paper} /></g>)}
      {shape === 'beanie' && (<g><path d="M 60 130 Q 60 80, 100 80 Q 140 80, 140 130 L 140 145 L 60 145 Z" fill={fg} /></g>)}
      {shape === 'card' && (<g><rect x="55" y="90" width="90" height="60" fill={fg} /></g>)}
      {shape === 'box' && (<g><rect x="55" y="90" width="90" height="70" fill={fg} /><line x1="55" y1="115" x2="145" y2="115" stroke={paper} strokeWidth="1" /></g>)}
      {shape === 'patch' && (<g><circle cx="100" cy="120" r="40" fill={fg} /><circle cx="100" cy="120" r="34" fill="none" stroke={paper} strokeWidth="1" strokeDasharray="2 3" /></g>)}
      <text x="186" y="22" textAnchor="end" fontFamily={CG.FONTS.serif} fontSize="11" fontStyle="italic" fill={fg}>counter·goods</text>
    </svg>
  );
};