// Inline SVG illustrations + decorative bits for BrandRocket homepage.
// Original artwork. Simple geometric shapes only.

const Cloud = ({ w = 80, opacity = .85, color = "#fff" }) => (
  <svg width={w} height={w * 0.6} viewBox="0 0 100 60" style={{ opacity }}>
    <ellipse cx="30" cy="40" rx="22" ry="16" fill={color} />
    <ellipse cx="55" cy="32" rx="28" ry="20" fill={color} />
    <ellipse cx="75" cy="42" rx="20" ry="14" fill={color} />
    <rect x="10" y="40" width="80" height="14" rx="7" fill={color} />
  </svg>
);

// Hero illustration — Sky/atmosphere only. No rocket, no trajectory icon.
// Soft layered clouds, distant horizon, gentle altitude markers.
const RocketIllo = () => (
  <svg viewBox="0 0 420 420" width="100%" height="100%" aria-hidden>
    <defs>
      <linearGradient id="skyGrad" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#BFE2F8" />
        <stop offset=".55" stopColor="#E5F2FB" />
        <stop offset="1" stopColor="#FFFFFF" />
      </linearGradient>
      <radialGradient id="sunGlow" cx=".5" cy=".5" r=".5">
        <stop offset="0" stopColor="#FFE9C7" stopOpacity=".95" />
        <stop offset="1" stopColor="#FFE9C7" stopOpacity="0" />
      </radialGradient>
    </defs>

    {/* sky panel */}
    <rect x="20" y="20" width="380" height="380" rx="32" fill="url(#skyGrad)" />

    {/* warm sun glow upper-right */}
    <circle cx="320" cy="110" r="120" fill="url(#sunGlow)" />
    <circle cx="320" cy="110" r="34" fill="#FFE3B0" opacity=".55" />

    {/* far cloud band */}
    <g fill="#fff" opacity=".75">
      <ellipse cx="120" cy="180" rx="70" ry="10" />
      <ellipse cx="280" cy="200" rx="80" ry="9" />
    </g>

    {/* distant cloud row */}
    <g fill="#fff" opacity=".9">
      <ellipse cx="90"  cy="240" rx="44" ry="14" />
      <ellipse cx="120" cy="232" rx="34" ry="12" />
      <ellipse cx="155" cy="244" rx="30" ry="10" />
    </g>

    {/* main foreground cloud */}
    <g>
      <ellipse cx="240" cy="290" rx="80" ry="22" fill="#fff" />
      <ellipse cx="220" cy="278" rx="46" ry="22" fill="#fff" />
      <ellipse cx="270" cy="276" rx="40" ry="20" fill="#fff" />
      <ellipse cx="240" cy="266" rx="32" ry="18" fill="#fff" />
      {/* subtle underside shading */}
      <ellipse cx="240" cy="304" rx="78" ry="6" fill="#CADDEC" opacity=".55" />
    </g>

    {/* secondary cloud lower-left */}
    <g>
      <ellipse cx="80"  cy="350" rx="58" ry="16" fill="#fff" />
      <ellipse cx="62"  cy="340" rx="32" ry="14" fill="#fff" />
      <ellipse cx="98"  cy="338" rx="26" ry="12" fill="#fff" />
    </g>

    {/* tiny tertiary cloud */}
    <g fill="#fff" opacity=".95">
      <ellipse cx="350" cy="320" rx="34" ry="9" />
      <ellipse cx="340" cy="314" rx="20" ry="8" />
    </g>

    {/* a few faint distant birds (V shapes) for atmosphere */}
    <g stroke="#7FA8C5" strokeWidth="1.6" fill="none" strokeLinecap="round" opacity=".7">
      <path d="M 82 132 q 5 -5 10 0 q 5 -5 10 0" />
      <path d="M 120 108 q 4 -4 8 0 q 4 -4 8 0" />
      <path d="M 70 158 q 3 -3 6 0 q 3 -3 6 0" />
    </g>

    {/* soft altitude tick marks far left, very subtle */}
    <g stroke="#CADDEC" strokeWidth="1.2" opacity=".7">
      <line x1="36" y1="80"  x2="46" y2="80"  />
      <line x1="36" y1="120" x2="42" y2="120" />
      <line x1="36" y1="160" x2="42" y2="160" />
      <line x1="36" y1="200" x2="46" y2="200" />
    </g>
  </svg>
);

const SignalArc = ({ w = 120, color = "#2EA3F2" }) => (
  <svg viewBox="0 0 120 60" width={w} height={w * 0.5} aria-hidden>
    <path d="M 6 50 Q 30 50 55 30 Q 80 12 114 8" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" />
    <circle cx="6" cy="50" r="4" fill="#fff" stroke={color} strokeWidth="2.5" />
    <circle cx="114" cy="8" r="5" fill={color} />
  </svg>
);

const FolderTopSecret = () => (
  <svg viewBox="0 0 400 240" width="100%" height="100%" aria-hidden>
    <defs>
      <linearGradient id="folder" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#FFC857" />
        <stop offset="1" stopColor="#F58220" />
      </linearGradient>
    </defs>
    <path d="M 20 60 L 150 60 L 170 40 L 380 40 L 380 220 L 20 220 Z" fill="url(#folder)" stroke="#B85F0F" strokeWidth="2" />
    <rect x="20" y="80" width="360" height="140" fill="#FFE7BC" />
    <path d="M 20 80 L 380 80 L 380 220 L 20 220 Z" fill="url(#folder)" opacity=".5" />
    <path d="M 20 80 L 380 80 L 380 220 L 20 220 Z" fill="none" stroke="#B85F0F" strokeWidth="2" />
    {/* Top secret stamp */}
    <g transform="translate(280 120) rotate(-12)">
      <rect x="-60" y="-22" width="120" height="44" fill="#fff" stroke="#E63946" strokeWidth="3" rx="4" />
      <text x="0" y="6" textAnchor="middle" fill="#E63946" fontFamily="Trebuchet MS" fontWeight="900" fontSize="18">TOP SECRET</text>
    </g>
    {/* Smiling face on folder */}
    <g transform="translate(140 155)">
      <circle cx="-12" cy="0" r="3" fill="#7A3E07" />
      <circle cx="12" cy="0" r="3" fill="#7A3E07" />
      <path d="M -10 12 Q 0 22 10 12" stroke="#7A3E07" strokeWidth="2.5" fill="none" strokeLinecap="round" />
    </g>
  </svg>
);

const KiteIllo = () => (
  <svg viewBox="0 0 200 220" width="100%" height="100%">
    <g transform="translate(100 90) rotate(15)">
      <path d="M0 -60 L 50 0 L 0 60 L -50 0 Z" fill="#34B2CC" stroke="#1F8AD2" strokeWidth="2" />
      <path d="M0 -60 L 0 60" stroke="#1F8AD2" strokeWidth="1.5" />
      <path d="M -50 0 L 50 0" stroke="#1F8AD2" strokeWidth="1.5" />
      <path d="M0 -60 L 50 0" fill="#2EA3F2" />
      <path d="M0 60 L -50 0" fill="#1F8AD2" />
    </g>
    {/* tail */}
    <path d="M 100 150 Q 110 170 100 190 Q 90 210 110 220" stroke="#F58220" strokeWidth="2" fill="none" />
    <circle cx="100" cy="170" r="4" fill="#F58220" />
    <circle cx="98" cy="195" r="4" fill="#FFC857" />
    <circle cx="108" cy="218" r="4" fill="#F58220" />
  </svg>
);

const HandArrow = ({ d, w = 120, h = 60, style = {} }) => (
  <svg width={w} height={h} viewBox="0 0 120 60" style={style}>
    <path d={d} fill="none" stroke="#F58220" strokeWidth="2.4" strokeLinecap="round" strokeDasharray="0" />
    <path d="M 0 0 L 8 -3 L 5 4 Z" transform="translate(110 40) rotate(140)" fill="#F58220" />
  </svg>
);

const Sparkle = ({ size = 16, color = "#F58220", style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 20 20" style={style}>
    <path d="M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8 Z" fill={color} />
  </svg>
);

// Tiny brand mark used in nav
const BrandMark = () => (
  <svg width="44" height="44" viewBox="0 0 44 44">
    <circle cx="22" cy="22" r="22" fill="#2EA3F2" />
    {/* mini rocket */}
    <g transform="translate(22 22) rotate(-30)">
      <path d="M0 -12 C 4 -8 5 -4 5 0 L -5 0 C -5 -4 -4 -8 0 -12 Z" fill="#fff" />
      <rect x="-5" y="0" width="10" height="12" rx="1" fill="#fff" />
      <circle cx="0" cy="4" r="2.5" fill="#F58220" />
      <path d="M -5 12 L -10 16 L -5 16 Z" fill="#fff" />
      <path d="M 5 12 L 10 16 L 5 16 Z" fill="#fff" />
      <path d="M -3 16 C -2 20 0 22 0 24 C 0 22 2 20 3 16 Z" fill="#FFC857" />
    </g>
  </svg>
);

window.Cloud = Cloud;
window.RocketIllo = RocketIllo;
window.SignalArc = SignalArc;
window.FolderTopSecret = FolderTopSecret;
window.KiteIllo = KiteIllo;
window.HandArrow = HandArrow;
window.Sparkle = Sparkle;
window.BrandMark = BrandMark;
