// Logo components — usable across all pages
// <AnimatedLogo size={120} loop /> — rocket launches from cloud, loops
// <StaticLogo size={48} /> — static brand mark (SVG, not PNG)
// <Wordmark size={48} dark /> — icon + "TecnologyApp" text lockup

const NAVY = '#0E1B5C';
const NAVY_DARK = '#0A1447';
const SKY = '#1EA4E9';
const SKY_DARK = '#1789C4';

function RocketShape({ color = NAVY, windowColor = '#fff', flameColor }) {
  const flame = flameColor || color;
  return (
    <g>
      {/* Fins */}
      <path d="M-14 48 L-22 62 L-8 58 Z" fill={color} />
      <path d="M14 48 L22 62 L8 58 Z" fill={color} />
      {/* Body */}
      <path d="M0 0 Q-12 10 -12 30 L-12 55 L12 55 L12 30 Q12 10 0 0 Z" fill={color} />
      {/* Window */}
      <circle cx="0" cy="22" r="6" fill={windowColor} />
      <circle cx="0" cy="22" r="6" stroke={color} strokeWidth="2" fill="none" />
      {/* Flame / nozzle */}
      <path d="M-8 55 L0 72 L8 55 Z" fill={flame} />
    </g>
  );
}

function CloudOutline({ color = SKY, strokeWidth = 5 }) {
  return (
    <path
      d="M30 115 Q18 115 18 100 Q18 88 30 85 Q32 65 55 65 Q62 50 80 50 Q100 48 108 65 Q130 62 138 80 Q170 80 170 100 Q170 115 155 115 Z"
      stroke={color}
      strokeWidth={strokeWidth}
      strokeLinejoin="round"
      strokeLinecap="round"
      fill="none"
    />
  );
}

// Static mark used in headers, footers, favicon-like spots
function StaticLogo({ size = 48, navy = NAVY, sky = SKY }) {
  return (
    <svg width={size} height={size * 0.8} viewBox="0 0 200 160" fill="none" style={{ display: 'block' }}>
      <CloudOutline color={sky} />
      {/* Trail */}
      <path d="M55 110 L95 70" stroke={sky} strokeWidth="3" strokeLinecap="round" />
      <path d="M68 115 L100 80" stroke={sky} strokeWidth="2.5" strokeLinecap="round" opacity="0.7" />
      {/* Rocket */}
      <g transform="translate(95 20) rotate(40)">
        <RocketShape color={navy} flameColor={sky} />
      </g>
    </svg>
  );
}

// Animated version — rocket launches, cloud pulses, trail draws, loops every 4s
function AnimatedLogo({ size = 240, navy = NAVY, sky = SKY, duration = 4 }) {
  return (
    <div style={{ width: size, height: size * 0.8, position: 'relative' }}>
      <style>{`
        @keyframes tap-rocket-launch {
          0%   { transform: translate(-35px, 35px) rotate(45deg) scale(0.85); opacity: 1; }
          30%  { transform: translate(-20px, 20px) rotate(45deg) scale(0.92); opacity: 1; }
          50%  { transform: translate(0px, 0px) rotate(45deg) scale(1); opacity: 1; }
          70%  { transform: translate(-20px, 20px) rotate(45deg) scale(0.92); opacity: 1; }
          100% { transform: translate(-35px, 35px) rotate(45deg) scale(0.85); opacity: 1; }
        }
        @keyframes tap-cloud-pulse {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-2px); }
        }
        @keyframes tap-trail-draw {
          0% { stroke-dashoffset: 60; opacity: 0; }
          25% { opacity: 1; }
          70% { stroke-dashoffset: 0; opacity: 1; }
          100% { stroke-dashoffset: -60; opacity: 0; }
        }
        @keyframes tap-spark {
          0%, 100% { opacity: 0; transform: scale(0.5); }
          50% { opacity: 1; transform: scale(1); }
        }
        .tap-rocket-g { transform-origin: 95px 55px; animation: tap-rocket-launch ${duration}s cubic-bezier(.5,.05,.3,1) infinite; }
        .tap-cloud-g { transform-origin: 100px 85px; animation: tap-cloud-pulse ${duration}s ease-in-out infinite; }
        .tap-trail-1 { stroke-dasharray: 60; animation: tap-trail-draw ${duration}s ease-in-out infinite; }
        .tap-trail-2 { stroke-dasharray: 60; animation: tap-trail-draw ${duration}s ease-in-out infinite; animation-delay: 0.15s; }
        .tap-spark-c { animation: tap-spark ${duration}s ease-out infinite; }
      `}</style>
      <svg width="100%" height="100%" viewBox="0 0 200 160" fill="none">
        <g className="tap-cloud-g">
          <CloudOutline color={sky} />
        </g>
        <path
          className="tap-trail-1"
          d="M55 110 L95 70"
          stroke={sky}
          strokeWidth="3"
          strokeLinecap="round"
        />
        <path
          className="tap-trail-2"
          d="M68 115 L100 80"
          stroke={sky}
          strokeWidth="2.5"
          strokeLinecap="round"
          opacity="0.7"
        />
        {/* Spark particles near nozzle, subtle */}
        <circle className="tap-spark-c" cx="80" cy="112" r="2" fill={sky} />
        <circle className="tap-spark-c" cx="70" cy="118" r="1.5" fill={sky} style={{ animationDelay: '0.5s' }} />
        <g className="tap-rocket-g">
          <g transform="translate(95 20)">
            <RocketShape color={navy} flameColor={sky} />
          </g>
        </g>
      </svg>
    </div>
  );
}

// Wordmark: icon + TecnologyApp text
function Wordmark({ size = 40, navy = NAVY, sky = SKY, onDark = false }) {
  const textNavy = onDark ? '#ffffff' : navy;
  const textSky = sky;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.25 }}>
      <StaticLogo size={size * 1.2} navy={onDark ? '#ffffff' : navy} sky={sky} />
      <span
        style={{
          fontFamily: "'Space Grotesk', system-ui, sans-serif",
          fontWeight: 700,
          fontSize: size * 0.55,
          letterSpacing: '-0.02em',
          lineHeight: 1,
        }}
      >
        <span style={{ color: textNavy }}>Tecnology</span>
        <span style={{ color: textSky }}>App</span>
      </span>
    </div>
  );
}

Object.assign(window, {
  StaticLogo,
  AnimatedLogo,
  Wordmark,
  RocketShape,
  CloudOutline,
  BRAND_NAVY: NAVY,
  BRAND_NAVY_DARK: NAVY_DARK,
  BRAND_SKY: SKY,
  BRAND_SKY_DARK: SKY_DARK,
});