/* DOMINANCE — shared components */

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ----- Logos -----
function LogoD({ size = 28, className = "" }) {
  return (
    <img src="assets/dominance-d-white.png" alt="DOMINANCE" className={`nav-logo ${className}`} style={{ height: size }} />
  );
}
function LogoWordmark({ size = 22, className = "" }) {
  return (
    <img src="assets/dominance-wordmark-white.png" alt="DOMINANCE" className={`nav-logo wordmark ${className}`} style={{ height: size }} />
  );
}

// ----- Top Nav -----
function TopNav({ wordmark = false, status = "Accepting Q2 clients", right = null }) {
  return (
    <header className="nav">
      <div className="nav-inner">
        <div className="nav-left">
          {wordmark ? <LogoWordmark size={22} /> : <LogoD size={26} />}
          <span className="nav-divider" />
          <span className="nav-status">
            <span className="dot" />
            {status}
          </span>
        </div>
        <div className="nav-right">
          {right || (
            <>
              <span className="meta">PERFORMANCE-BASED</span>
            </>
          )}
        </div>
      </div>
    </header>
  );
}

// ----- Footer -----
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="legal">
          <span>© DOMINANCE 2026</span>
          <span>NIK@DOMINANCE.BUSINESS</span>
        </div>
        <div className="legal">
          <span>PRIVACY</span>
          <span>TERMS</span>
          <span>NOT AFFILIATED WITH META OR GOOGLE</span>
        </div>
      </div>
    </footer>
  );
}

// ----- Video Frame (placeholder; clean & minimal) -----
function VideoFrame({ runtime = "10:24", live = "VSL", caption = "" }) {
  const [hovered, setHovered] = useState(false);
  return (
    <div
      className="video"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      role="button"
      aria-label="Play video"
    >
      <div className="video-corners"><i /><i /></div>
      <button className="play-btn" aria-label="Play">
        <span className="ring">
          <span className="triangle" />
        </span>
      </button>
      <div className="video-meta">
        <span className="badge"><span className="live-dot" />{live}</span>
        {caption ? <span style={{ color: "var(--text-3)" }}>{caption}</span> : null}
      </div>
      <div className="video-runtime">{runtime}</div>
    </div>
  );
}

// ----- Ambient bg -----
function Ambient() {
  return <div className="ambient" aria-hidden="true" />;
}

// ----- Filmic grain overlay -----
function Grain() {
  return <div className="grain" aria-hidden="true" />;
}

// ----- WordStagger: splits text into per-word spans with staggered fade -----
function WordStagger({ text, delay = 0, step = 60, className = "" }) {
  const words = String(text).split(/(\s+)/);
  return (
    <span className={`word-stagger ${className}`}>
      {words.map((w, i) =>
        /^\s+$/.test(w) ? (
          <span key={i}>{w}</span>
        ) : (
          <span key={i} className="w" style={{ animationDelay: `${delay + i * step}ms` }}>{w}</span>
        )
      )}
    </span>
  );
}

// ----- Tweaks defaults -----
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "We book you qualified sales calls and you only pay when they show up",
  "subhead": "No retainers. No long contracts. No risk on you.",
  "label": "Performance-Based Lead Generation",
  "ctaText": "See Exactly How It Works",
  "accent": "#DC2626",
  "showMetrics": true,
  "showLogos": true,
  "videoRuntime": "10:24"
}/*EDITMODE-END*/;

Object.assign(window, {
  LogoD, LogoWordmark, TopNav, Footer, VideoFrame, Ambient, Grain, WordStagger, TWEAK_DEFAULTS
});