// MOYA logomark — uses official logo PNG, recoloured via CSS mask so it inherits theme color.
// The full PNG (mark + "an invisible presence") aspect is ~2.32:1.
// When tagline=false we crop the bottom ~30% so only the mark shows.
const Logo = ({ size = 48, color = 'currentColor', tagline = false, variant = 'mask' }) => {
  // maroon PNG: 475 × 205, transparent background — sharp at any size via <img>
  // gold PNG:   3690 × 1919, black background — use mix-blend-mode:screen to drop the black

  const maroonAspect = 475 / 205;   // full logo (mark + tagline)
  const markAspect   = 475 / 140;   // mark-only crop (approx top 68% of maroon PNG)

  const aspect = tagline ? maroonAspect : markAspect;
  const height = size;
  const width  = Math.round(height * aspect);

  // Detect dark theme — if ink colour is light, invert the maroon logo to white
  const isLight = (c) => {
    if (!c || c === 'currentColor') return false;
    const hex = c.replace('#','');
    if (hex.length < 6) return false;
    const r = parseInt(hex.slice(0,2),16);
    const g = parseInt(hex.slice(2,4),16);
    const b = parseInt(hex.slice(4,6),16);
    return (r*299 + g*587 + b*114) / 1000 > 186;
  };

  if (variant === 'gold') {
    // mix-blend-mode:screen drops the black background, keeps gold — works on light bgs
    return (
      <img
        src="assets/moya-logo-v2-gold.png"
        alt="MOYA"
        style={{
          display: 'block',
          height: size,
          width: 'auto',
          maxWidth: width * 1.4,
          mixBlendMode: 'screen',
          objectFit: 'contain',
        }}
      />
    );
  }

  // Default: maroon PNG as <img> — crisp at any size
  // Crop to mark-only by constraining height and using object-fit + objectPosition
  return (
    <img
      src="assets/moya-logo-maroon.png"
      alt="MOYA"
      style={{
        display: 'block',
        height: size,
        width,
        objectFit: 'cover',
        objectPosition: tagline ? 'center center' : 'center top',
        filter: isLight(color) ? 'brightness(0) invert(1)' : 'none',
      }}
    />
  );
};

// Top navigation chrome
const NavBar = ({ stage, totalStages, onLogo, theme }) =>
<div className="moya-nav" style={{
  position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  padding: theme.mobile ? '14px 20px' : '20px 36px',
  background: theme.navBg,
  borderBottom: `1px solid ${theme.line}`,
  backdropFilter: 'blur(20px)',
  WebkitBackdropFilter: 'blur(20px)',
  transition: 'background 600ms ease, border-color 600ms ease'
}}>
    <button onClick={onLogo} style={{
    background: 'none', border: 'none', cursor: 'pointer', padding: 0,
    color: theme.ink
  }}>
      <Logo size={theme.mobile ? 22 : 28} color={theme.ink} />
    </button>
    <div style={{
    fontFamily: '"Montserrat", sans-serif',
    fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
    color: theme.muted,
    display: 'flex', alignItems: 'center', gap: 14
  }}>
      {!theme.mobile && <span>scent discovery</span>}
      {!theme.mobile && <span style={{ opacity: 0.4 }}>/</span>}
      <span style={{ color: theme.ink }}>{String(stage).padStart(2, '0')}</span>
      <span style={{ opacity: 0.4 }}>of</span>
      <span>{String(totalStages).padStart(2, '0')}</span>
    </div>
    {!theme.mobile && (
      <div style={{
        fontFamily: '"Montserrat", sans-serif',
        fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: theme.muted
      }}>
        <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: theme.accent, marginRight: 8, verticalAlign: 'middle' }}></span>
        Shipping nationwide
      </div>
    )}
    {theme.mobile && (
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: theme.accent }}></span>
        <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: theme.muted }}>Nationwide</div>
      </div>
    )}
  </div>;


// Progress bar (under nav)
const Progress = ({ stage, totalStages, theme }) =>
<div style={{
  position: 'fixed', top: theme.mobile ? 50 : 68, left: 0, right: 0, height: 1,
  background: theme.line, zIndex: 49
}}>
    <div style={{
    height: '100%',
    width: `${stage / totalStages * 100}%`,
    background: theme.ink,
    transition: 'width 700ms cubic-bezier(0.22, 1, 0.36, 1)'
  }}></div>
  </div>;


// Big elegant button
const PrimaryButton = ({ children, onClick, theme, large = false, disabled = false, arrow = true }) => {
  return (
    <button onClick={onClick} disabled={disabled} className="moya-btn moya-btn-emboss" style={{

      fontWeight: 500,
      fontSize: large ? (theme.mobile ? 18 : 22) : 17,
      fontStyle: 'italic',
      color: '#f4efe8',

      padding: large ? (theme.mobile ? '18px 32px' : '22px 44px') : '16px 32px',
      cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.4 : 1,

      display: 'inline-flex',
      alignItems: 'center',
      gap: 14,
      transition: 'transform 200ms, box-shadow 300ms, filter 300ms',
      borderRadius: 0,

      boxShadow: 'inset 0 1px 0 rgba(255,220,180,0.22), inset 0 -2px 4px rgba(20,8,2,0.75), 0 2px 6px rgba(40,18,8,0.45)',
      textShadow: '0 1px 0 rgba(20,8,2,0.7)', fontFamily: "Montserrat", letterSpacing: "0.22px", background: "linear-gradient(145deg, rgb(82, 46, 26) 0%, rgb(48, 24, 12) 35%, rgb(28, 12, 6) 55%, rgb(60, 32, 16) 80%, rgb(96, 58, 34) 100%) 0% 0% / contain", border: "1px solid rgb(220, 176, 114)"
    }}>
      <span style={{ fontFamily: 'Montserrat' }}>{children}</span>
      {arrow && <span style={{ fontFamily: 'serif', transition: 'transform 200ms' }} className="moya-arrow">→</span>}
    </button>);
};


const GhostButton = ({ children, onClick, theme, small = false }) =>
<button onClick={onClick} style={{
  fontFamily: '"Montserrat", sans-serif',
  fontSize: small ? 10 : 11,
  letterSpacing: '0.18em',
  textTransform: 'uppercase',
  background: 'none',
  color: theme.ink,
  border: 'none',
  padding: small ? '8px 0' : '12px 0',
  cursor: 'pointer',
  borderBottom: `1px solid ${theme.ink}`,
  borderRadius: 0
}}>{children}</button>;


// Monospace metadata caption
const Meta = ({ children, theme, style = {} }) =>
<div style={{
  fontFamily: '"Montserrat", sans-serif',
  fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
  color: theme.muted,
  ...style
}}>{children}</div>;


// Display heading
const Display = ({ children, size = 96, italic = false, theme, style = {} }) =>
<h1 style={{ ...{

    fontWeight: 400,
    fontSize: size,
    lineHeight: 0.95,
    letterSpacing: '-0.015em',
    color: theme.ink,
    margin: 0,
    fontStyle: italic ? 'italic' : 'normal',
    textWrap: 'balance',
    ...style, fontFamily: "Inter"
  }, fontSize: "20px", fontFamily: "Montserrat", textAlign: "left" }}>{children}</h1>;


Object.assign(window, { Logo, NavBar, Progress, PrimaryButton, GhostButton, Meta, Display });