/* eslint-disable */
// Shared components for TESTED funnel
const { useState, useEffect, useRef } = React;

// ---------- Logo / wordmark ----------
function Logo({ size = 16 }) {
  return (
    <span className="tp-mark" style={{ fontSize: size }}>
      <span className="tp-mark__glyph">T</span>
      <span>TESTED</span>
    </span>
  );
}

// ---------- Product placeholder (vial / bottle) ----------
function ProductPlaceholder({ variant = 'vial', label = 'PRODUCT SHOT', accent = false, style = {} }) {
  const v = variant;
  return (
    <div
      className={"tp-imgph " + (accent ? "tp-imgph--accent" : "")}
      style={{
        width: '100%', height: '100%', position: 'relative',
        borderRadius: 'var(--radius)',
        ...style,
      }}
    >
      {/* simple vial silhouette */}
      <svg viewBox="0 0 80 140" style={{ position: 'absolute', inset: 0, margin: 'auto', width: '38%', height: '70%', opacity: 0.55 }}>
        {v === 'vial' && (
          <>
            <rect x="22" y="8" width="36" height="10" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5" />
            <rect x="26" y="18" width="28" height="6" fill="currentColor" opacity="0.4" />
            <path d="M22 24 H58 V124 a10 10 0 0 1 -10 10 H32 a10 10 0 0 1 -10 -10 Z" fill="none" stroke="currentColor" strokeWidth="1.5" />
            <rect x="28" y="78" width="24" height="40" fill="currentColor" opacity="0.25" />
            <line x1="28" y1="92" x2="52" y2="92" stroke="currentColor" strokeWidth="0.7" />
            <line x1="28" y1="102" x2="52" y2="102" stroke="currentColor" strokeWidth="0.7" />
            <line x1="28" y1="112" x2="52" y2="112" stroke="currentColor" strokeWidth="0.7" />
          </>
        )}
        {v === 'box' && (
          <>
            <rect x="14" y="20" width="52" height="100" fill="none" stroke="currentColor" strokeWidth="1.5" />
            <rect x="14" y="20" width="52" height="14" fill="currentColor" opacity="0.3" />
            <text x="40" y="76" textAnchor="middle" fontFamily="monospace" fontSize="9" fill="currentColor" opacity="0.7">TP·01</text>
          </>
        )}
        {v === 'stack' && (
          <>
            <rect x="6" y="30" width="32" height="90" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5" />
            <rect x="42" y="20" width="32" height="100" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5" />
            <rect x="6" y="42" width="32" height="14" fill="currentColor" opacity="0.3" />
            <rect x="42" y="32" width="32" height="14" fill="currentColor" opacity="0.3" />
          </>
        )}
      </svg>
      <span style={{ position: 'absolute', bottom: 8, left: 0, right: 0, textAlign: 'center' }}>{label}</span>
    </div>
  );
}

// ---------- COA / batch strip ----------
function COABar({ batch = "TP·24·08·BPC", purity = "99.4%" }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 8,
      padding: '8px 12px',
      border: '1px solid var(--border)',
      borderRadius: 6,
      background: 'var(--bg-warm)',
      fontFamily: 'var(--font-mono)',
      fontSize: 10,
      letterSpacing: '0.08em',
      color: 'var(--muted)',
      textTransform: 'uppercase',
    }}>
      <span><span style={{color:'var(--accent)'}}>●</span> COA VERIFIED</span>
      <span>BATCH {batch}</span>
      <span>PURITY {purity}</span>
    </div>
  );
}

// ---------- Star rating ----------
function Stars({ n = 5, size = 12 }) {
  return (
    <span style={{ display: 'inline-flex', gap: 1, color: 'var(--accent)' }}>
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill={i < n ? 'currentColor' : 'transparent'} stroke="currentColor" strokeWidth="2">
          <path d="M12 2l3 7 7 .8-5.3 4.8 1.6 7L12 17.8 5.7 21.6l1.6-7L2 9.8 9 9z" />
        </svg>
      ))}
    </span>
  );
}

// ---------- Countdown ----------
function Countdown({ mins = 14, secs = 53, big = false }) {
  const [t, setT] = useState(mins * 60 + secs);
  useEffect(() => {
    const id = setInterval(() => setT(v => v > 0 ? v - 1 : 0), 1000);
    return () => clearInterval(id);
  }, []);
  const m = String(Math.floor(t / 60)).padStart(2, '0');
  const s = String(t % 60).padStart(2, '0');
  const sz = big ? 28 : 14;
  return (
    <span className="tp-mono" style={{
      fontSize: sz, fontWeight: 700, color: 'var(--alert)',
      letterSpacing: '0.04em',
    }}>{m}:{s}</span>
  );
}

// ---------- Section eyebrow ----------
function Eyebrow({ children, lime = false }) {
  return <div className={"tp-eyebrow " + (lime ? "lime" : "")}>{children}</div>;
}

// ---------- IG chrome wrappers ----------
function IGTopBar() {
  return (
    <div className="ig-chrome ig-topbar">
      <span className="ig-topbar__logo">Insta</span>
      <span style={{ display: 'flex', gap: 14, fontSize: 18 }}>
        <span>♡</span><span>✈</span>
      </span>
    </div>
  );
}

function IGPostHeader({ handle = "tested.peptides", sub = "Sponsored" }) {
  return (
    <div className="ig-chrome" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 12px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div className="ig-avatar">T</div>
        <div>
          <div className="ig-handle">{handle}</div>
          <div className="ig-sub">{sub}</div>
        </div>
      </div>
      <span style={{ fontSize: 20, color: '#fff' }}>⋯</span>
    </div>
  );
}

function IGActionRow() {
  return (
    <div className="ig-chrome ig-iconrow">
      <span style={{ display: 'flex', gap: 14 }}>
        <span>♡</span><span>💬</span><span>✈</span>
      </span>
      <span>🔖</span>
    </div>
  );
}

function IGCtaBar({ label = "Shop Now" }) {
  return (
    <div className="ig-chrome ig-cta-bar">
      <span>{label}</span>
      <span style={{ color: '#888' }}>›</span>
    </div>
  );
}

// expose
Object.assign(window, {
  Logo, ProductPlaceholder, COABar, Stars, Countdown, Eyebrow,
  IGTopBar, IGPostHeader, IGActionRow, IGCtaBar,
});
