/* global React */
/* ─── Brand atoms ─────────────────────────────────────────────── */

// Wordmark: italic serif "1gigE" with sun-orange "1"
function Wordmark({ size = 'md', onDark = false, className = '' }) {
  return (
    <span className={`wordmark wordmark--${size} ${onDark ? 'on-dark' : ''} ${className}`.trim()}>
      <span className="one">1</span><span className="gigE">gigE</span>
    </span>
  );
}

// Standing-sun-human mark. Faithful redraw of the uploaded logo.
function StandingSunMark({ size = 280, animate = true }) {
  const rays = [
    { rot: 0,   tall: true  },
    { rot: 30,  tall: false },
    { rot: 60,  tall: false },
    { rot: 90,  tall: false },
    { rot: 120, tall: false },
    { rot: 150, tall: false },
    { rot: 180, tall: false },
    { rot: 210, tall: false },
    { rot: 240, tall: false },
    { rot: 270, tall: false },
    { rot: 300, tall: false },
    { rot: 330, tall: false },
  ];

  return (
    <svg
      width={size}
      height={(size * 240) / 200}
      viewBox="0 0 200 240"
      role="img"
      aria-label="1gigE standing sun mark"
      style={{ overflow: 'visible' }}
    >
      {/* rays */}
      <g
        fill="#E87B1E"
        style={{
          transformOrigin: '100px 80px',
          animation: animate ? 'sun-rise 1.6s cubic-bezier(0.2,0.8,0.2,1) both' : 'none',
        }}
      >
        {rays.map((r, i) => (
          <rect
            key={i}
            x={98}
            y={r.tall ? -16 : -4}
            width={4.5}
            height={r.tall ? 36 : 22}
            rx={1.5}
            transform={`rotate(${r.rot} 100 80)`}
          />
        ))}
      </g>
      {/* sun disc */}
      <circle
        cx="100"
        cy="80"
        r="40"
        fill="#F09932"
        style={{
          transformOrigin: '100px 80px',
          animation: animate ? 'sun-pop 1s cubic-bezier(0.34,1.56,0.64,1) 0.25s both' : 'none',
        }}
      />
      {/* human silhouette in sun (negative space white-cut on logo, but here we draw filled & cut edges with the paper bg) */}
      <g
        fill="#E87B1E"
        style={{
          transformOrigin: '100px 130px',
          animation: animate ? 'fig-rise 0.95s cubic-bezier(0.2,0.8,0.2,1) 0.55s both' : 'none',
        }}
      >
        {/* head */}
        <circle cx="100" cy="74" r="13" />
        {/* shoulders + body */}
        <path d="M 80 100 Q 80 92 88 92 L 112 92 Q 120 92 120 100 L 120 168 L 80 168 Z" />
        {/* groundline base */}
        <rect x="64" y="186" width="72" height="14" rx="3" />
      </g>
      {/* paper cut-outs */}
      <g fill="#FAF7F1" pointerEvents="none" style={{
        animation: animate ? 'fig-rise 0.95s cubic-bezier(0.2,0.8,0.2,1) 0.55s both' : 'none',
        transformOrigin: '100px 130px',
      }}>
        {/* neckline (under head) */}
        <rect x="92" y="86" width="16" height="6" rx="1.5" />
        {/* leg parting line */}
        <rect x="98" y="148" width="4" height="38" />
      </g>

      <style>{`
        @keyframes sun-rise {
          0%   { transform: rotate(-12deg); opacity: 0; }
          100% { transform: rotate(0deg);  opacity: 1; }
        }
        @keyframes sun-pop {
          0%   { transform: scale(0.7); opacity: 0; }
          100% { transform: scale(1); opacity: 1; }
        }
        @keyframes fig-rise {
          0%   { transform: translateY(14px); opacity: 0; }
          100% { transform: translateY(0); opacity: 1; }
        }
      `}</style>
    </svg>
  );
}

// Mini mark — flat, no animation, for inline use
function MiniMark({ size = 26, color = '#E87B1E' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true">
      <g fill={color}>
        {[0,45,90,135,180,225,270,315].map((d, i) => (
          <rect key={i} x="30" y="2" width="4" height="10" rx="1.5" transform={`rotate(${d} 32 24)`} />
        ))}
        <circle cx="32" cy="24" r="11" />
        <circle cx="32" cy="22" r="4.2" fill="#FAF7F1" />
        <path d="M 25 32 Q 25 28 28 28 L 36 28 Q 39 28 39 32 L 39 56 L 25 56 Z" />
        <rect x="20" y="56" width="24" height="5" rx="1.5" />
      </g>
    </svg>
  );
}

// Section eyebrow
function Eyebrow({ children, onDark = false, className = '' }) {
  return (
    <span className={`eyebrow ${onDark ? 'on-dark' : ''} ${className}`.trim()}>
      <span className="dot" />
      {children}
    </span>
  );
}

// Multilingual quote strip
function LangStrip({ lines }) {
  return (
    <div className="lang-strip">
      {lines.map((l, i) => (
        <span key={i}>{l}</span>
      ))}
    </div>
  );
}

// Stat strip — sober numeric anchors
function StatRow({ items, onDark = false }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))`,
      gap: 20,
      marginTop: 32,
      paddingTop: 26,
      borderTop: onDark ? '1px solid rgba(250,247,241,0.16)' : '1px solid var(--ink-100)',
    }}>
      {items.map((it, i) => (
        <div key={i}>
          <div style={{
            fontFamily: 'var(--display)',
            fontWeight: 800,
            fontSize: 'clamp(28px, 3vw, 40px)',
            letterSpacing: '-0.025em',
            lineHeight: 1,
            color: onDark ? 'var(--paper)' : 'var(--ink-1000)',
          }}>
            {it.value}
          </div>
          <div style={{
            marginTop: 8,
            fontFamily: 'var(--mono)',
            fontWeight: 600,
            fontSize: 10.5,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: onDark ? 'rgba(250,247,241,0.6)' : 'var(--ink-500)',
          }}>
            {it.label}
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Wordmark, StandingSunMark, MiniMark, Eyebrow, LangStrip, StatRow });