// Reusable UI primitives
const { useEffect: useEffectP, useRef: useRefP, useState: useStateP } = React;

function Eyebrow({ children, dot = true, dark }) {
  return (
    <div className={`eyebrow ${dot ? 'eyebrow-dot' : ''}`}>
      {children}
    </div>
  );
}

function ArrowIcon({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}

function Btn({ children, variant = 'primary', onClick, href }) {
  const cls = `btn btn-${variant}`;
  if (href) return <a href={href} className={cls} onClick={onClick}>{children}<ArrowIcon /></a>;
  return <button className={cls} onClick={onClick}>{children}<ArrowIcon /></button>;
}

function Chip({ children }) { return <span className="chip">{children}</span>; }

function Placeholder({ label, dark, ratio = '4 / 3', style = {}, children }) {
  return (
    <div className={`ph ${dark ? 'ph-dark' : ''}`} style={{ aspectRatio: ratio, ...style }}>
      {children}
      {label && <span className="ph-label" style={{ position: 'absolute', left: 14, top: 14 }}>{label}</span>}
    </div>
  );
}

// Atom animation — crimson nucleus + orbits, GSAP-driven
function AtomGlyph({ size = 560 }) {
  // 3 orbits, each with an electron; animated by gsap-motion.js via .atom-orbit class
  return (
    <div className="atom-stage" style={{ maxWidth: size }}>
      <div className="atom-halo" />
      <div className="atom-core" />
      {/* Orbit rings (SVG for sharper curves) */}
      {[{ rx: 46, ry: 18, rot: 0, col: '#E11D38' },
        { rx: 46, ry: 18, rot: 60, col: '#F4F3F1' },
        { rx: 46, ry: 18, rot: 120, col: '#E11D38' }].map((o, i) => (
        <div key={i} className="atom-orbit" data-orbit={i} style={{ transform: `rotate(${o.rot}deg)` }}>
          <svg viewBox="0 0 100 100">
            <ellipse className="atom-ring" cx="50" cy="50" rx={o.rx} ry={o.ry}
                     stroke="rgba(244,243,241,0.18)" />
            <circle className="atom-electron" data-electron={i}
                    cx={50 + o.rx} cy="50" r="2.2"
                    fill={o.col} stroke="#E11D38" />
          </svg>
        </div>
      ))}
      {/* Outer tick ring */}
      <svg viewBox="0 0 100 100" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
        {Array.from({ length: 72 }).map((_, i) => {
          const a = (i / 72) * Math.PI * 2;
          const r1 = 49, r2 = i % 6 === 0 ? 46 : 47.5;
          return (
            <line key={i}
              x1={50 + Math.cos(a) * r1} y1={50 + Math.sin(a) * r1}
              x2={50 + Math.cos(a) * r2} y2={50 + Math.sin(a) * r2}
              stroke="rgba(244,243,241,0.2)"
              strokeOpacity={i % 6 === 0 ? 0.6 : 0.25}
              strokeWidth="0.25" />
          );
        })}
      </svg>
      {/* Soft radial grid */}
      <div style={{
        position: 'absolute', inset: '10%',
        border: '1px solid rgba(244,243,241,0.06)',
        borderRadius: '50%',
        pointerEvents: 'none'
      }} />
      <div style={{
        position: 'absolute', inset: '24%',
        border: '1px solid rgba(244,243,241,0.04)',
        borderRadius: '50%',
        pointerEvents: 'none'
      }} />
    </div>
  );
}

// Curved red ribbon accent (inspired by signature)
function CurveAccent({ style = {}, flip = false, color = 'var(--crimson)' }) {
  return (
    <svg className="curve-accent" viewBox="0 0 400 400" style={{
      width: 500, height: 500, ...style,
      transform: flip ? 'scaleX(-1)' : 'none'
    }}>
      <path d="M 380 20 Q 100 60 60 200 Q 100 340 380 380"
            fill="none" stroke={color} strokeWidth="18" opacity="0.9" />
      <path d="M 360 50 Q 130 90 90 200 Q 130 310 360 350"
            fill="none" stroke={color} strokeWidth="10" opacity="0.55" />
    </svg>
  );
}

// Deprecated (kept for back-compat with old imports)
function ForgeGlyph({ size = 560 }) { return <AtomGlyph size={size} />; }

function useReveal() { /* GSAP handles reveals now; no-op */ }

function Reveal({ children, delay = 0, as: Tag = 'div', ...rest }) {
  return <Tag className="reveal" data-reveal-delay={delay} {...rest}>{children}</Tag>;
}

function SectionHeader({ eyebrow, title, subtitle, dark, align = 'left' }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === 'center' ? 780 : 900, margin: align === 'center' ? '0 auto' : 0 }}>
      {eyebrow && <Eyebrow dark={dark}>{eyebrow}</Eyebrow>}
      <h2 className="display gsap-headline" style={{ fontSize: 'clamp(44px, 5.6vw, 88px)', margin: '20px 0 22px' }}>
        {title}
      </h2>
      {subtitle && <p style={{ fontSize: 18, lineHeight: 1.6, opacity: 0.72, margin: 0, maxWidth: 640 }}>{subtitle}</p>}
    </div>
  );
}

Object.assign(window, { Eyebrow, ArrowIcon, Btn, Chip, Placeholder, AtomGlyph, ForgeGlyph, CurveAccent, useReveal, Reveal, SectionHeader });