// orbit-mark.jsx — the final Composer OS mark (Orbit), reusable.
// A disc + ring + single-cubic S, on warm paper. Parameterized by tone.

const ORBIT_PALETTE = {
  moss:       { name: 'Moss',       disc: '#7a9b7e', shade: '#5a7a5e', deep: '#3e5b45' },
  sun:        { name: 'Sun',        disc: '#f7c948', shade: '#e09a1f', deep: '#a86d10' },
  terracotta: { name: 'Terracotta', disc: '#b26f5c', shade: '#8b4f3e', deep: '#5a2f22' },
  bronze:     { name: 'Bronze',     disc: '#8a5a34', shade: '#5c3a1e', deep: '#3a240e' },
  sand:       { name: 'Sand',       disc: '#c0886a', shade: '#8d5f44', deep: '#5e3b26' },
  sunset:     { name: 'Sunset',     disc: '#f0b268', shade: '#c4833d', deep: '#804f1e' },
  ochre:      { name: 'Ochre',      disc: '#c9a34a', shade: '#8f6f22', deep: '#5a4410' },
  plum:       { name: 'Plum',       disc: '#6b5d7a', shade: '#443a55', deep: '#2a2338' },
};

const ORBIT_PAPER_HI = '#faf8f5';
const ORBIT_PAPER_LO = '#ebe6d9';

// The mark SVG — 1024×1024 artboard. `withPaper` controls whether to draw
// the paper background (for the full app icon) or just the disc + mark
// (for use inline on a page with its own background).
function OrbitMark({ size = 256, tone = ORBIT_PALETTE.moss, withPaper = true, id = 'm' }) {
  const cx = 512, cy = 512, r = 320;
  const ringR = r * 0.52;
  const sw = r * 0.075;

  const a1 = (135 * Math.PI) / 180;
  const a2 = (-45 * Math.PI) / 180;
  const p1 = { x: cx + ringR * Math.cos(a1), y: cy + ringR * Math.sin(a1) };
  const p2 = { x: cx + ringR * Math.cos(a2), y: cy + ringR * Math.sin(a2) };
  const reachX = ringR * 1.15;
  const c1 = { x: p1.x + reachX, y: p1.y };
  const c2 = { x: p2.x - reachX, y: p2.y };
  const sPath = `M ${p1.x} ${p1.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${p2.x} ${p2.y}`;

  const uid = `${id}-${tone.name}`;

  return (
    <svg width={size} height={size} viewBox="0 0 1024 1024" style={{display:'block'}}>
      <defs>
        <linearGradient id={`paper-${uid}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={ORBIT_PAPER_HI}/>
          <stop offset="1" stopColor={ORBIT_PAPER_LO}/>
        </linearGradient>
        <linearGradient id={`disc-${uid}`} x1="0.3" y1="0" x2="0.7" y2="1">
          <stop offset="0" stopColor={tone.disc}/>
          <stop offset="1" stopColor={tone.shade}/>
        </linearGradient>
        <radialGradient id={`inner-${uid}`} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0.55" stopColor={tone.shade} stopOpacity="0"/>
          <stop offset="0.95" stopColor={tone.deep} stopOpacity="0.18"/>
          <stop offset="1"    stopColor={tone.deep} stopOpacity="0.32"/>
        </radialGradient>
      </defs>

      {withPaper && <rect width="1024" height="1024" fill={`url(#paper-${uid})`}/>}

      {withPaper && (
        <g opacity="0.04">
          {Array.from({length: 80}).map((_, i) => {
            const x = (i * 37) % 1024;
            const y = (i * 71) % 1024;
            const rr = 1 + (i % 3);
            return <circle key={i} cx={x} cy={y} r={rr} fill="#1c1a17"/>;
          })}
        </g>
      )}

      <circle cx={cx} cy={cy} r={r + 18} fill={tone.disc} opacity="0.06"/>
      <circle cx={cx} cy={cy} r={r} fill={`url(#disc-${uid})`}/>
      <circle cx={cx} cy={cy} r={r} fill={`url(#inner-${uid})`}/>

      <path
        d={`M ${cx - r*0.85} ${cy - r*0.35} A ${r} ${r} 0 0 1 ${cx - r*0.1} ${cy - r*0.95}`}
        stroke="rgba(255,255,255,0.22)" strokeWidth="12" fill="none" strokeLinecap="round"
      />

      {/* The Orbit mark */}
      <g fill="none" stroke={ORBIT_PAPER_HI} strokeWidth={sw} strokeLinecap="round">
        <circle cx={cx} cy={cy} r={ringR}/>
        <path d={sPath}/>
      </g>
    </svg>
  );
}

// Squircle-rounded icon (macOS-style mask + shadow), wraps OrbitMark.
function OrbitIcon({ size = 160, tone = ORBIT_PALETTE.moss, shadow = true }) {
  const rad = size * 0.2237;
  return (
    <div style={{
      position:'relative', width:size, height:size,
      borderRadius:rad, overflow:'hidden',
      boxShadow: shadow
        ? `0 ${size*0.015}px ${size*0.04}px rgba(0,0,0,0.18),
           0 ${size*0.04}px ${size*0.12}px rgba(0,0,0,0.14),
           0 0 0 0.5px rgba(0,0,0,0.08)`
        : 'none',
      background: '#f2efe8',
    }}>
      <OrbitMark size={size} tone={tone} withPaper={true}/>
    </div>
  );
}

Object.assign(window, { ORBIT_PALETTE, OrbitMark, OrbitIcon, ORBIT_PAPER_HI, ORBIT_PAPER_LO });