// Shared primitives: logo, lightning SVG, brand glyph, icons
const { useEffect, useRef, useState, useMemo, useCallback } = React;

// Image-based logo (the Z mark)
function Logo({ size = 36 }) {
  return (
    <img src="public/img/thraxel-logo.png" alt="THRAXEL" style={{
      height: size, width: 'auto', display: 'block',
      filter: 'drop-shadow(0 0 12px rgba(200,16,46,0.35))',
    }}/>
  );
}

// Flat silver wordmark — no gradient, single tone
function Wordmark({ size = 22, color = '#e8e8eb' }) {
  return (
    <span style={{
      fontFamily: 'Orbitron, sans-serif',
      fontWeight: 900,
      letterSpacing: '0.22em',
      fontSize: size,
      color,
      textTransform: 'uppercase',
    }}>THRAXEL</span>
  );
}

// Lockup — Z mark + wordmark
function Lockup({ markSize = 28, textSize = 14 }) {
  return (
    <span style={{display:'inline-flex',alignItems:'center',gap:10}}>
      <Logo size={markSize}/>
      <Wordmark size={textSize}/>
    </span>
  );
}

// Decorative lightning arc — pure SVG path
function LightningArc({ seed = 1, opacity = 0.5, color = '#FF1A1A' }) {
  const path = useMemo(() => {
    let r = seed * 9301 + 49297;
    const rnd = () => { r = (r * 9301 + 49297) % 233280; return r / 233280; };
    let x = 0, y = 50;
    const pts = [`M ${x} ${y}`];
    while (x < 400) {
      x += 10 + rnd() * 30;
      y = 50 + (rnd() - 0.5) * 60;
      pts.push(`L ${x} ${y}`);
    }
    return pts.join(' ');
  }, [seed]);
  return (
    <svg viewBox="0 0 400 100" style={{ width: '100%', height: '100%', opacity, animation: 'arcFlicker 1.6s ease-in-out infinite' }}>
      <path d={path} stroke={color} strokeWidth="1.4" fill="none" filter="url(#arcGlow)" />
      <path d={path} stroke="#fff" strokeWidth="0.5" fill="none" opacity="0.8" />
      <defs>
        <filter id="arcGlow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="2" result="b" />
          <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
      </defs>
    </svg>
  );
}

// Section title — flat off-white, no chrome gradient
function ChromeTitle({ children, size = 96, as: Tag = 'h2' }) {
  return (
    <Tag style={{
      fontFamily: 'Orbitron, sans-serif',
      fontWeight: 900,
      color: '#e8e8eb',
      WebkitTextStroke: '1px rgba(200,16,46,0.55)',
      fontSize: size,
      lineHeight: 0.95,
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
      margin: 0,
      textShadow: '0 0 18px rgba(200,16,46,0.12)',
    }}>{children}</Tag>
  );
}

function RedTitle({ children, size = 56 }) {
  return (
    <div style={{
      fontFamily: 'Orbitron, sans-serif',
      fontWeight: 800,
      fontSize: size,
      lineHeight: 1,
      letterSpacing: '0.04em',
      color: 'var(--thraxel-red)',
      textTransform: 'uppercase',
    }}>{children}</div>
  );
}

function VideoBg({ src, poster }) {
  return (
    <video autoPlay muted loop playsInline preload="metadata"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}>
      <source src={src} type="video/mp4" />
    </video>
  );
}

// Tiny svg icons
const Icons = {
  chevDown: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 5l5 5 5-5" stroke="currentColor" strokeWidth="1.6" /></svg>,
  arrow: () => <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.6" /></svg>,
  play: () => <svg width="12" height="14" viewBox="0 0 12 14" fill="currentColor"><path d="M0 0v14l12-7z" /></svg>,
  close: () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 2l12 12M14 2L2 14" stroke="currentColor" strokeWidth="1.6" /></svg>,
  mic: () => <svg width="14" height="16" viewBox="0 0 14 16" fill="none"><rect x="5" y="1" width="4" height="9" rx="2" stroke="currentColor" strokeWidth="1.4" /><path d="M2 8a5 5 0 0 0 10 0M7 13v2" stroke="currentColor" strokeWidth="1.4" /></svg>,
  upload: () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 11V2M4 6l4-4 4 4M2 12v2h12v-2" stroke="currentColor" strokeWidth="1.4" /></svg>,
  plus: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.6"/></svg>,
};

Object.assign(window, { Logo, Wordmark, Lockup, LightningArc, ChromeTitle, RedTitle, VideoBg, Icons });
