// SSE — Design primitives (shared UI building blocks)

// Hexagonal icon container — echoes the logo mark
function Hex({ size = 48, stroke = 'var(--navy)', fill = 'transparent', strokeWidth = 1.5, children, style }) {
  const points = [];
  const r = size / 2;
  for (let i = 0; i < 6; i++) {
    const a = (Math.PI / 3) * i - Math.PI / 2;
    points.push(`${r + r * Math.cos(a) * 0.95},${r + r * Math.sin(a) * 0.95}`);
  }
  return (
    <div style={{ position: 'relative', width: size, height: size, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...style }}>
      <svg width={size} height={size} style={{ position: 'absolute', inset: 0 }}>
        <polygon points={points.join(' ')} fill={fill} stroke={stroke} strokeWidth={strokeWidth} strokeLinejoin="round" />
      </svg>
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{children}</div>
    </div>
  );
}

// Section-scoped wrapper with consistent horizontal rhythm
function Section({ id, children, background = 'transparent', color = 'inherit', style }) {
  return (
    <section
      id={id}
      data-screen-label={id}
      style={{
        background,
        color,
        padding: '120px 0',
        position: 'relative',
        ...style,
      }}
      className="sse-section"
    >
      <div style={{ maxWidth: 1360, margin: '0 auto', padding: '0 40px' }} className="sse-section-inner">
        {children}
      </div>
      <style>{`
        @media (max-width: 900px) {
          .sse-section { padding: 80px 0 !important; }
          .sse-section-inner { padding: 0 24px !important; }
        }
        @media (max-width: 600px) {
          .sse-section { padding: 60px 0 !important; }
          .sse-section-inner { padding: 0 20px !important; }
        }
      `}</style>
    </section>
  );
}

// Editorial kicker — small monospace label above headlines
function Kicker({ children, color = 'var(--amber)', style }) {
  return (
    <div style={{
      fontFamily: 'var(--font-mono)',
      fontSize: 12,
      letterSpacing: '0.18em',
      textTransform: 'uppercase',
      color,
      display: 'inline-flex',
      alignItems: 'center',
      gap: 10,
      fontWeight: 500,
      ...style,
    }}>
      <span style={{ width: 24, height: 1, background: 'currentColor', opacity: 0.5 }} />
      {children}
    </div>
  );
}

// Big display headline
function Display({ children, size = 88, color = 'var(--navy)', style }) {
  return (
    <h2 style={{
      fontFamily: 'var(--font-display)',
      fontSize: `clamp(${Math.max(32, size * 0.45)}px, 8vw, ${size}px)`,
      fontWeight: 500,
      lineHeight: 0.98,
      letterSpacing: '-0.03em',
      color,
      textWrap: 'balance',
      ...style,
    }}>
      {children}
    </h2>
  );
}

function Button({ children, variant = 'primary', href, onClick, style, ...rest }) {
  const base = {
    fontFamily: 'var(--font-body)',
    fontSize: 15,
    fontWeight: 500,
    padding: '14px 24px',
    borderRadius: 999,
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    transition: 'all 0.2s ease',
    letterSpacing: '-0.01em',
    cursor: 'pointer',
    border: '1px solid transparent',
    ...style,
  };
  const variants = {
    primary: { background: 'var(--navy)', color: 'var(--paper)' },
    amber: { background: 'var(--amber)', color: 'var(--ink)' },
    outline: { background: 'transparent', color: 'var(--navy)', border: '1px solid var(--line-strong)' },
    outlineLight: { background: 'transparent', color: 'var(--paper)', border: '1px solid rgba(245,243,238,0.3)' },
    ghost: { background: 'transparent', color: 'var(--navy)' },
  };
  const merged = { ...base, ...variants[variant] };
  const Comp = href ? 'a' : 'button';
  return (
    <Comp href={href} onClick={onClick} style={merged} {...rest}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}>
      {children}
    </Comp>
  );
}

// Arrow glyph
function Arrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M2 7 H12 M8 3 L12 7 L8 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Grid overlay — subtle blueprint lines for backgrounds
function GridOverlay({ color = 'rgba(10,26,62,0.05)', size = 80, style }) {
  return (
    <div style={{
      position: 'absolute',
      inset: 0,
      backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`,
      backgroundSize: `${size}px ${size}px`,
      pointerEvents: 'none',
      ...style,
    }} />
  );
}

// Product image placeholder — labeled clearly
function ProductPlaceholder({ label, aspect = '4/3', dark = false }) {
  const bg = dark ? 'linear-gradient(135deg, #172958 0%, #0A1A3E 100%)' : 'linear-gradient(135deg, #EDE9DE 0%, #DDD8CB 100%)';
  const fg = dark ? 'rgba(245,243,238,0.5)' : 'rgba(10,26,62,0.4)';
  const line = dark ? 'rgba(245,243,238,0.08)' : 'rgba(10,26,62,0.08)';
  return (
    <div style={{
      aspectRatio: aspect,
      background: bg,
      borderRadius: 4,
      position: 'relative',
      overflow: 'hidden',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      {/* blueprint crosshair */}
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(${line} 1px, transparent 1px), linear-gradient(90deg, ${line} 1px, transparent 1px)`, backgroundSize: '24px 24px' }} />
      {/* center hex */}
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
        <Hex size={44} stroke={fg} strokeWidth={1}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <path d="M3 9 L9 3 L15 9 L9 15 Z" stroke={fg} strokeWidth="1.2"/>
          </svg>
        </Hex>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: fg }}>
          Product photo
        </div>
      </div>
      {/* corner marks */}
      {[[0,0],[0,1],[1,0],[1,1]].map(([x,y],i) => (
        <div key={i} style={{
          position: 'absolute',
          top: y ? 'auto' : 10, bottom: y ? 10 : 'auto',
          left: x ? 'auto' : 10, right: x ? 10 : 'auto',
          width: 12, height: 12,
          borderTop: y ? 'none' : `1px solid ${fg}`,
          borderBottom: y ? `1px solid ${fg}` : 'none',
          borderLeft: x ? 'none' : `1px solid ${fg}`,
          borderRight: x ? `1px solid ${fg}` : 'none',
        }} />
      ))}
    </div>
  );
}

Object.assign(window, { Hex, Section, Kicker, Display, Button, Arrow, GridOverlay, ProductPlaceholder });