// Atomic components for 35.style (light editorial OPC)

// ────────────────────────────────────────────────
// Chrome 35 mark — the brand artifact. Renders on
// dark or light context. Carries the seigaiha inlay.
// ────────────────────────────────────────────────
const Mark35 = ({
  size = 200,
  stretchX = 1.22,
  squashY = 0.82,
  inlay = true,
  variant = 'chrome', // 'chrome' | 'ink' | 'gold' | 'outline'
}) => {
  const baseStyle = {
    fontFamily: 'Bebas Neue, sans-serif',
    fontSize: `${size}px`,
    lineHeight: 0.82,
    letterSpacing: '-0.01em',
    fontWeight: 400,
    display: 'inline-block',
  };

  if (variant === 'ink') {
    return (
      <span style={{ display: 'inline-block', transform: `scale(${stretchX}, ${squashY})`, transformOrigin: 'left center' }}>
        <span style={{ ...baseStyle, color: 'var(--ink)' }}>35</span>
      </span>
    );
  }
  if (variant === 'gold') {
    return (
      <span style={{ display: 'inline-block', transform: `scale(${stretchX}, ${squashY})`, transformOrigin: 'left center' }}>
        <span style={{ ...baseStyle, color: 'var(--gold)' }}>35</span>
      </span>
    );
  }
  if (variant === 'outline') {
    return (
      <span style={{ display: 'inline-block', transform: `scale(${stretchX}, ${squashY})`, transformOrigin: 'left center' }}>
        <span style={{ ...baseStyle, color: 'transparent', WebkitTextStroke: '1px var(--ink)' }}>35</span>
      </span>
    );
  }

  // chrome with optional inlaid seigaiha
  return (
    <span style={{ display: 'inline-block', transform: `scale(${stretchX}, ${squashY})`, transformOrigin: 'left center' }}>
      <span style={{ display: 'inline-block', position: 'relative', lineHeight: 0.82 }}>
        <span className="chrome-text" style={baseStyle}>35</span>
        {inlay && <span className="seigaiha-inlay" style={{ ...baseStyle, position: 'absolute', inset: 0 }} aria-hidden="true">35</span>}
        <span aria-hidden="true" style={{
          ...baseStyle,
          position: 'absolute', inset: 0,
          color: 'transparent',
          background: 'linear-gradient(135deg, transparent 38%, rgba(255,255,255,0.85) 47%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.6) 53%, transparent 60%)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text',
          pointerEvents: 'none', mixBlendMode: 'screen',
          opacity: 0.55,
        }}>35</span>
      </span>
    </span>
  );
};

// ────────────────────────────────────────────────
// Tiny wordmark "35.style" — for the navbar / footer
// ────────────────────────────────────────────────
const WordMark = ({ size = 18, color = 'var(--ink)' }) => (
  <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
    <span style={{
      fontFamily: 'Bebas Neue, sans-serif',
      fontSize: `${size + 2}px`,
      lineHeight: 0.82,
      letterSpacing: '-0.02em',
      color,
      transform: 'scale(1.2, 0.84)', transformOrigin: 'left bottom',
      display: 'inline-block',
    }}>35</span>
    <span style={{
      fontFamily: 'var(--display)', fontStyle: 'italic',
      fontWeight: 500, fontSize: `${size * 0.85}px`,
      color, letterSpacing: '-0.01em',
    }}>.style</span>
  </span>
);

// Mono caption
const Mono = ({ children, ink = false, gold = false, void: onVoid = false, style = {}, sm = false }) => (
  <span
    className={`${sm ? 'mono-sm' : 'mono'} ${ink ? 'mono-ink' : ''} ${gold ? 'mono-gold' : ''} ${onVoid ? 'mono-void' : ''}`}
    style={style}>
    {children}
  </span>
);

// Section heading — small en label + italic display + cn underline
const SectionHead = ({ idx, en, cn, italic, align = 'left' }) => (
  <header style={{ textAlign: align }}>
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      justifyContent: align === 'center' ? 'center' : 'flex-start',
    }}>
      <Mono sm>§ {idx}</Mono>
      <div style={{ flex: align === 'center' ? '0 1 60px' : '0 0 60px', height: 1, background: 'var(--ink)' }} />
      <Mono sm style={{ color: 'var(--ink)' }}>{en}</Mono>
    </div>

    <h2 className="display-italic" style={{
      margin: '24px 0 0',
      fontSize: 'clamp(56px, 7vw, 108px)',
      lineHeight: 0.95,
      letterSpacing: '-0.02em',
      color: 'var(--ink)',
    }}>{italic}</h2>

    {cn && (
      <div className="display-cn" style={{
        marginTop: 10,
        fontSize: 22, fontWeight: 500, color: 'var(--ink-2)',
        letterSpacing: '0.12em',
      }}>{cn}</div>
    )}
  </header>
);

// Drop cap — first letter big italic
const DropCap = ({ letter, color = 'var(--ink)' }) => (
  <span style={{
    float: 'left',
    fontFamily: 'var(--display)',
    fontStyle: 'italic',
    fontWeight: 500,
    fontSize: 88,
    lineHeight: 0.85,
    color,
    marginRight: 12,
    marginTop: 4,
    marginBottom: -2,
  }}>{letter}</span>
);

// Cross corner mark (light context)
const Cross = ({ onVoid = false, style = {} }) => (
  <div className={`cross ${onVoid ? 'on-void' : ''}`} style={style} />
);

Object.assign(window, { Mark35, WordMark, Mono, SectionHead, DropCap, Cross });