// Small decorative components: sparkles, planets, moons, constellation lines,
// frames, and the wiggly nav blob.

function Sparkle({ size = 24, color = '#ffe38a', style }) {
  return (
    <svg width={size} height={size} viewBox="-12 -12 24 24" style={style}>
      <path
        d="M0,-10 C1,-3 3,-1 10,0 C3,1 1,3 0,10 C-1,3 -3,1 -10,0 C-3,-1 -1,-3 0,-10 Z"
        fill={color}
      />
    </svg>
  );
}

function Planet({ size = 80, color1 = '#f096c2', color2 = '#c7f5dc', ring = true, rotation = 0, style }) {
  const id = `p-${Math.random().toString(36).slice(2, 8)}`;
  return (
    <svg width={size} height={size} viewBox="-60 -60 120 120" style={style}>
      <defs>
        <radialGradient id={id} cx="30%" cy="30%">
          <stop offset="0%" stopColor="#fff" stopOpacity="0.5" />
          <stop offset="40%" stopColor={color1} />
          <stop offset="100%" stopColor={color2} />
        </radialGradient>
      </defs>
      {ring && (
        <ellipse
          cx="0" cy="0" rx="55" ry="12"
          fill="none"
          stroke={color1}
          strokeWidth="3"
          opacity="0.8"
          transform={`rotate(${rotation - 20})`}
        />
      )}
      <circle cx="0" cy="0" r="35" fill={`url(#${id})`} />
      {ring && (
        <path
          d="M -55 0 A 55 12 0 0 0 55 0"
          fill="none"
          stroke={color1}
          strokeWidth="3"
          opacity="0.9"
          transform={`rotate(${rotation - 20})`}
        />
      )}
      <circle cx="-8" cy="-10" r="5" fill={color2} opacity="0.4" />
      <circle cx="12" cy="8" r="7" fill={color2} opacity="0.3" />
    </svg>
  );
}

function Moon({ size = 60, color = '#fff4e8', style }) {
  const id = `m-${Math.random().toString(36).slice(2, 8)}`;
  return (
    <svg width={size} height={size} viewBox="-40 -40 80 80" style={style}>
      <defs>
        <radialGradient id={id} cx="35%" cy="30%">
          <stop offset="0%" stopColor="#fff" />
          <stop offset="100%" stopColor={color} />
        </radialGradient>
      </defs>
      <circle cx="0" cy="0" r="30" fill={`url(#${id})`} />
      <circle cx="-8" cy="-5" r="3" fill="#d9c7f5" opacity="0.5" />
      <circle cx="6" cy="8" r="4" fill="#d9c7f5" opacity="0.4" />
      <circle cx="10" cy="-10" r="2" fill="#d9c7f5" opacity="0.5" />
    </svg>
  );
}

function Constellation({ points, color = '#ffe38a', style }) {
  const pathD = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0]} ${p[1]}`).join(' ');
  return (
    <svg style={{ position: 'absolute', ...style, pointerEvents: 'none' }} viewBox="0 0 200 200">
      <path d={pathD} fill="none" stroke={color} strokeWidth="0.8" opacity="0.6" strokeDasharray="2 2" />
      {points.map(([x, y], i) => (
        <g key={i}>
          <circle cx={x} cy={y} r="2.5" fill={color} />
          <circle cx={x} cy={y} r="5" fill={color} opacity="0.3">
            <animate attributeName="r" values="5;8;5" dur="3s" repeatCount="indefinite" begin={`${i * 0.3}s`} />
            <animate attributeName="opacity" values="0.3;0.1;0.3" dur="3s" repeatCount="indefinite" begin={`${i * 0.3}s`} />
          </circle>
        </g>
      ))}
    </svg>
  );
}

function OrbitWreath({ children, size = 420, palette }) {
  const p = palette;
  return (
    <svg
      style={{
        position: 'absolute',
        width: size,
        height: size * 0.52,
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        pointerEvents: 'none',
        zIndex: 0,
      }}
      viewBox="0 0 420 220"
    >
      <defs>
        <linearGradient id="orbg" x1="0" x2="1">
          <stop offset="0%" stopColor={p.accent} stopOpacity="0" />
          <stop offset="20%" stopColor={p.accent} stopOpacity="1" />
          <stop offset="80%" stopColor={p.accent} stopOpacity="1" />
          <stop offset="100%" stopColor={p.accent} stopOpacity="0" />
        </linearGradient>
      </defs>
      <ellipse
        cx="210" cy="110" rx="195" ry="95"
        fill="none"
        stroke="url(#orbg)"
        strokeWidth="3"
        strokeLinecap="round"
        transform="rotate(-8 210 110)"
      />
    </svg>
  );
}

function Pill({ children, href, variant = 'solid', onClick, style }) {
  const base = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    padding: '12px 22px',
    borderRadius: 999,
    fontFamily: "'Nunito', sans-serif",
    fontWeight: 800,
    fontSize: 15,
    letterSpacing: '0.01em',
    textDecoration: 'none',
    border: '2px solid',
    cursor: 'pointer',
    transition: 'transform 0.2s, box-shadow 0.2s',
  };
  const variants = {
    chrome: {
      background: 'linear-gradient(135deg, #ffd6f5 0%, #d6e4ff 20%, #d6fff0 40%, #fff4d6 60%, #ffd6f5 80%, #e4d6ff 100%)',
      backgroundSize: '200% 200%',
      color: '#3d2d66',
      borderColor: 'rgba(255, 255, 255, 0.7)',
      boxShadow: 'inset 0 2px 0 rgba(255,255,255,0.9), inset 0 -2px 0 rgba(200, 150, 220, 0.4), 0 4px 0 rgba(180, 135, 217, 0.5), 0 10px 28px rgba(26, 16, 48, 0.4)',
      textShadow: '0 1px 0 rgba(255,255,255,0.7)',
      animation: 'chromeShift 6s ease-in-out infinite',
    },
    solid: {
      background: '#fff4e8',
      color: '#2a1f4a',
      borderColor: '#fff4e8',
      boxShadow: '0 4px 0 #b487d9, 0 8px 20px rgba(26, 16, 48, 0.3)',
    },
    ghost: {
      background: 'rgba(255, 244, 232, 0.12)',
      color: '#fff4e8',
      borderColor: 'rgba(255, 244, 232, 0.5)',
      backdropFilter: 'blur(8px)',
    },
    pink: {
      background: '#f096c2',
      color: '#fff4e8',
      borderColor: '#f096c2',
      boxShadow: '0 4px 0 #c56aa0, 0 8px 20px rgba(26, 16, 48, 0.3)',
    },
  };
  const Tag = href ? 'a' : 'button';
  return (
    <Tag
      href={href}
      onClick={onClick}
      target={href && href.startsWith('http') ? '_blank' : undefined}
      rel={href && href.startsWith('http') ? 'noopener noreferrer' : undefined}
      style={{ ...base, ...variants[variant], ...style }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-2px)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'translateY(0)';
      }}
    >
      {children}
    </Tag>
  );
}

function DoodleCard({ children, color = '#fff4e8', accent = '#f096c2', style }) {
  return (
    <div style={{
      position: 'relative',
      background: color,
      borderRadius: 28,
      padding: 32,
      boxShadow: '0 12px 40px rgba(26, 16, 48, 0.25), inset 0 0 0 2px rgba(42, 31, 74, 0.08)',
      ...style,
    }}>
      <Sparkle size={18} color={accent} style={{ position: 'absolute', top: -10, right: 20 }} />
      <Sparkle size={12} color={accent} style={{ position: 'absolute', top: 18, right: -6 }} />
      {children}
    </div>
  );
}

function SectionHeader({ kicker, title, palette }) {
  return (
    <div style={{ textAlign: 'center', marginBottom: 48, position: 'relative' }}>
      <div className="hand" style={{
        fontSize: 28,
        color: palette.accent,
        marginBottom: 4,
      }}>
        {kicker}
      </div>
      <h2 className="display" style={{
        fontSize: 'clamp(40px, 6vw, 72px)',
        margin: 0,
        color: '#fff4e8',
        textShadow: '0 4px 30px rgba(26, 16, 48, 0.5)',
        display: 'inline-block',
        position: 'relative',
      }}>
        {title}
        <svg
          style={{
            position: 'absolute', left: '10%', right: '10%', bottom: -14,
            width: '80%', height: 14,
          }}
          viewBox="0 0 200 14" preserveAspectRatio="none"
        >
          <path
            d="M 2 8 Q 20 2, 40 8 T 80 8 T 120 8 T 160 8 T 198 8"
            fill="none"
            stroke={palette.accent}
            strokeWidth="3"
            strokeLinecap="round"
          />
        </svg>
      </h2>
    </div>
  );
}

function Chip({ children, color = '#d9c7f5' }) {
  const isHex = typeof color === 'string' && color.startsWith('#');
  const background = isHex ? `${color}55` : color;
  const border = isHex ? color : color.replace(/rgba?\(([^)]+)\)/, (m, inner) => {
    const parts = inner.split(',').map(s => s.trim());
    return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, 0.9)`;
  });
  return (
    <span style={{
      display: 'inline-block',
      padding: '6px 14px',
      borderRadius: 999,
      background,
      border: `1.5px solid ${border}`,
      color: '#2a1f4a',
      fontSize: 13,
      fontWeight: 600,
      fontFamily: "'Manrope', sans-serif",
    }}>
      {children}
    </span>
  );
}

function useIsMobile(breakpoint = 768) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < breakpoint);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < breakpoint);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, [breakpoint]);
  return isMobile;
}

function useWindowWidth() {
  const [width, setWidth] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return width;
}

Object.assign(window, {
  Sparkle, Planet, Moon, Constellation, OrbitWreath,
  Pill, DoodleCard, SectionHeader, Chip,
  useIsMobile, useWindowWidth,
});