// Shared primitives — Master Filmmaker
const { useState, useEffect, useRef } = React;

function Logo({ size = 36 }) {
  return (
    <img src="./assets/logo-mark.png" alt="Master Filmmaker logo"
      width={size} height={size} decoding="async"
      style={{ width: size, height: size, display: 'block', flexShrink: 0 }} />
  );
}

function Wordmark({ size = 34 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <Logo size={size} />
      <div style={{ width: 1, height: size * 0.55, background: 'rgba(255,255,255,0.22)' }} />
      <div style={{
        fontFamily: 'Poppins', fontWeight: 800, fontSize: 14,
        letterSpacing: '0.08em', color: '#fff', lineHeight: 1,
      }}>
        MASTER FILMMAKER
      </div>
    </div>
  );
}

function Eyebrow({ children, tone = 'red' }) {
  const tones = {
    red:   { color: '#E8123C', bg: 'rgba(232,18,60,0.10)', bd: 'rgba(232,18,60,0.40)' },
    white: { color: '#fff', bg: 'rgba(255,255,255,0.06)', bd: 'rgba(255,255,255,0.22)' },
    solid: { color: '#fff', bg: '#E8123C', bd: '#E8123C' },
  };
  const t = tones[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '7px 14px',
      fontFamily: 'Poppins', fontWeight: 700, fontSize: 11, letterSpacing: '0.16em',
      color: t.color, background: t.bg, border: `1px solid ${t.bd}`,
      borderRadius: 999, textTransform: 'uppercase',
    }}>
      <span style={{
        width: 6, height: 6, borderRadius: '50%', background: t.color,
        boxShadow: tone === 'red' ? '0 0 8px rgba(232,18,60,0.8)' : 'none',
      }}/>
      {children}
    </span>
  );
}

function Button({ children, variant = 'primary', size = 'md', onClick, iconAfter = true, as, href }) {
  const [hover, setHover] = useState(false);
  const sizes = {
    sm: { p: '10px 18px',  f: 12 },
    md: { p: '14px 26px', f: 14 },
    lg: { p: '18px 32px', f: 15 },
    xl: { p: '22px 42px', f: 16 },
  }[size];
  const variants = {
    primary: {
      bg: hover ? '#FF1F4A' : '#E8123C',
      color: '#fff',
      border: '1px solid rgba(255,255,255,0.08)',
      shadow: hover ? '0 14px 38px rgba(232,18,60,0.55)' : '0 10px 30px rgba(232,18,60,0.35)',
    },
    secondary: {
      bg: hover ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.06)',
      color: '#fff',
      border: '1px solid rgba(255,255,255,0.18)',
      shadow: 'none',
    },
    ghost: {
      bg: hover ? 'rgba(255,255,255,0.06)' : 'transparent',
      color: '#fff',
      border: '1px solid transparent',
      shadow: 'none',
    },
    outline: {
      bg: hover ? 'rgba(232,18,60,0.12)' : 'transparent',
      color: '#fff',
      border: '2px solid #E8123C',
      shadow: 'none',
    },
  }[variant];

  const Tag = as || 'button';
  return (
    <Tag
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={onClick} href={href}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: sizes.p, fontFamily: 'Poppins', fontWeight: 700, fontSize: sizes.f,
        letterSpacing: '-0.005em',
        background: variants.bg, color: variants.color,
        border: variants.border, borderRadius: 999,
        boxShadow: variants.shadow,
        cursor: 'pointer', transition: 'all 220ms cubic-bezier(0.22, 1, 0.36, 1)',
        textDecoration: 'none', whiteSpace: 'nowrap',
      }}>
      <span>{children}</span>
      {iconAfter && (
        <span style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 20, height: 20, borderRadius: '50%',
          background: variant === 'primary' ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.10)',
          fontSize: 11, transform: hover ? 'translateX(3px)' : 'translateX(0)',
          transition: 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)',
        }}>→</span>
      )}
    </Tag>
  );
}

function Rating({ small = false }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      background: 'rgba(26, 77, 46, 0.9)', padding: small ? '6px 12px' : '8px 14px',
      borderRadius: 8, border: '1px solid rgba(93, 232, 155, 0.3)',
    }}>
      <span style={{ color: '#5DE89B', letterSpacing: 2, fontSize: small ? 11 : 13 }}>★★★★★</span>
      <span style={{ color: '#fff', fontSize: small ? 11 : 12, fontWeight: 700 }}>
        Rated <b style={{ color: '#5DE89B' }}>4.85/5</b> by Verified Clients
      </span>
    </div>
  );
}

function AvatarStack({ size = 50 }) {
  // Uses the real client avatar row from masterfilmmaker.com (1203x230 PNG).
  const displayHeight = size;
  const displayWidth = Math.round((1203 / 230) * displayHeight);
  return (
    <img src="./assets/client-avatars-row.png" alt="Profile photos of video and creative agency owners who work with Master Filmmaker"
      width={1203} height={230} decoding="async"
      style={{
        height: displayHeight, width: displayWidth,
        display: 'block', flexShrink: 0,
        filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.35))',
      }}/>
  );
}

function Arrow({ size = 14 }) {
  return <span style={{ display: 'inline-block', fontSize: size, lineHeight: 1 }}>→</span>;
}

// "Chapter" section heading — eyebrow + numeric marker
function SectionMark({ num, children, tone = 'red' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <span style={{
        fontFamily: 'Poppins', fontWeight: 800, fontSize: 13,
        color: tone === 'red' ? '#E8123C' : '#fff',
        letterSpacing: '0.04em',
      }}>{num}</span>
      <span style={{ width: 48, height: 1, background: tone === 'red' ? 'rgba(232,18,60,0.5)' : 'rgba(255,255,255,0.2)' }}/>
      <span style={{
        fontFamily: 'Poppins', fontWeight: 700, fontSize: 11,
        color: tone === 'red' ? '#E8123C' : 'rgba(255,255,255,0.7)',
        letterSpacing: '0.18em', textTransform: 'uppercase',
      }}>{children}</span>
    </div>
  );
}

// Red go-disc — small round arrow button
function GoDisc({ size = 36, onClick }) {
  const [hover, setHover] = useState(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        width: size, height: size, borderRadius: '50%',
        background: hover ? '#FF1F4A' : '#E8123C',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff', fontSize: size * 0.42, fontWeight: 700,
        cursor: 'pointer', transition: 'all 220ms cubic-bezier(0.22, 1, 0.36, 1)',
        boxShadow: hover ? '0 6px 18px rgba(232,18,60,0.5)' : '0 3px 10px rgba(232,18,60,0.3)',
        flexShrink: 0,
      }}>→</div>
  );
}

// Animated counter that counts up when scrolled into view
function Counter({ to, duration = 1600, prefix = '', suffix = '' }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const step = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(step);
          };
          requestAnimationFrame(step);
        }
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{prefix}{val.toLocaleString()}{suffix}</span>;
}

Object.assign(window, { Logo, Wordmark, Eyebrow, Button, Rating, AvatarStack, Arrow, SectionMark, GoDisc, Counter });