// logo-final.jsx — Refined RobinRun mark, closer to reference.
//
// Reference: chubby all-orange robin walking with espresso takeout bag + cloche.
// Changes from previous version:
//  • Body is one clean solid amber teardrop, head sits cleanly atop
//  • Back wing has TWO pointed leaf-tip feathers visible behind body
//  • Front wing is a clean rounded shield in slightly darker amber
//  • Bag positioned in FRONT of bird at body level, handle reaches up to beak
//  • Cloche icon: clear dome + knob + plate + three steam wisps

const RF_INK = '#1C1009';
const RF_AMBER = '#F97316';
const RF_AMBER_DEEP = '#C2410C';
const RF_AMBER_SHADE = '#EA580C';
const RF_CREAM = '#FFFBF5';
const RF_YELLOW = '#FBBF24';

// ── The mark ────────────────────────────────────────────────────────────────
function RobinRunMark({
  size = 96,
  bg = 'transparent',
  birdColor = RF_AMBER,
  birdShade = RF_AMBER_DEEP,
  inkColor = RF_INK,
  showBag = true,
}) {
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" fill="none" aria-label="RobinRun">
      {bg !== 'transparent' && <rect width="120" height="120" fill={bg}/>}

      {/* ── BACK WING ─────────────────────────────────────────────────── */}
      {/* Sits behind body. Peeks out left with TWO pointed feather tips. */}
      <path
        d="M 36 52
           C 22 52 10 60 6 76
           L 20 72
           L 8 88
           L 26 80
           L 14 98
           L 38 76
           Z"
        fill={birdShade}
      />

      {/* ── BODY ───────────────────────────────────────────────────────── */}
      {/* Big solid amber teardrop, slightly tilted forward */}
      <path
        d="M 22 60
           C 22 86 36 100 56 100
           C 78 100 92 86 92 64
           C 92 44 76 32 56 34
           C 38 36 22 44 22 60 Z"
        fill={birdColor}
      />

      {/* ── HEAD ───────────────────────────────────────────────────────── */}
      {/* Cleanly merged with body, sits up-right */}
      <circle cx="74" cy="40" r="24" fill={birdColor}/>

      {/* ── FRONT WING ─────────────────────────────────────────────────── */}
      {/* Rounded shield on body, slightly darker shade */}
      <path
        d="M 30 62
           C 28 46 66 44 70 62
           C 70 80 32 82 30 62 Z"
        fill={birdShade}
      />

      {/* ── EYE ─────────────────────────────────────────────────────────── */}
      <circle cx="84" cy="36" r="3.2" fill={inkColor}/>

      {/* ── BEAK ────────────────────────────────────────────────────────── */}
      {/* Small yellow triangle pointing right (apex out, base against head) */}
      <path d="M 94 36 L 108 40 L 94 45 Z" fill={RF_YELLOW}/>

      {/* ── LEGS ────────────────────────────────────────────────────────── */}
      {/* Stub orange legs in walking pose */}
      <g stroke={birdColor} strokeWidth="5.5" strokeLinecap="round">
        <line x1="46" y1="100" x2="44" y2="114"/>
        <line x1="62" y1="100" x2="64" y2="114"/>
      </g>
      {/* Foot stubs perpendicular */}
      <g stroke={birdColor} strokeWidth="4.5" strokeLinecap="round">
        <line x1="40" y1="114" x2="48" y2="114"/>
        <line x1="60" y1="114" x2="68" y2="114"/>
      </g>

      {/* ── BAG (held in front) ────────────────────────────────────────── */}
      {showBag && (
        <g>
          {/* Handle — arches from bag corners up to beak level */}
          <path
            d="M 82 60 C 82 42 102 42 102 60"
            stroke={inkColor} strokeWidth="4" strokeLinecap="round" fill="none"
          />
          {/* Bag body — rounded square */}
          <rect x="78" y="60" width="30" height="40" rx="3" fill={inkColor}/>

          {/* ── CLOCHE ICON on bag ─────────────────────────────────────── */}
          <g transform="translate(93 82)">
            {/* Three steam wisps */}
            <path d="M -6 -11 C -4 -9 -8 -7 -6 -5"
                  stroke={RF_CREAM} strokeWidth="1.5" fill="none" strokeLinecap="round"/>
            <path d="M 0 -12 C 2 -10 -2 -8 0 -6"
                  stroke={RF_CREAM} strokeWidth="1.5" fill="none" strokeLinecap="round"/>
            <path d="M 6 -11 C 8 -9 4 -7 6 -5"
                  stroke={RF_CREAM} strokeWidth="1.5" fill="none" strokeLinecap="round"/>
            {/* Dome */}
            <path d="M -8 1 A 8 6 0 0 1 8 1 Z" fill={RF_CREAM}/>
            {/* Dome knob */}
            <circle cx="0" cy="-3" r="1.1" fill={RF_CREAM}/>
            {/* Plate */}
            <rect x="-9.5" y="1" width="19" height="2.4" rx="0.6" fill={RF_CREAM}/>
          </g>
        </g>
      )}
    </svg>
  );
}

// ── Wordmark lockup ─────────────────────────────────────────────────────────
function RobinRunLockup({ size = 60, dark = false, stacked = false }) {
  const ink = dark ? RF_CREAM : RF_INK;
  if (stacked) {
    return (
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
      }}>
        <RobinRunMark size={size * 1.3}/>
        <span style={{
          fontFamily: '"Nunito", sans-serif', fontWeight: 800,
          fontSize: size * 0.55, letterSpacing: '-0.02em',
          color: ink, lineHeight: 1,
        }}>
          Robin<span style={{ color: RF_AMBER }}>Run</span>
        </span>
      </div>
    );
  }
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.18 }}>
      <RobinRunMark size={size}/>
      <span style={{
        fontFamily: '"Nunito", sans-serif', fontWeight: 800,
        fontSize: size * 0.62, letterSpacing: '-0.02em',
        color: ink, lineHeight: 1,
      }}>
        Robin<span style={{ color: RF_AMBER }}>Run</span>
      </span>
    </div>
  );
}

// ── Showcase ────────────────────────────────────────────────────────────────
function FinalLogoShowcase() {
  return (
    <div style={{
      background: '#FFFBF5', padding: '40px 48px',
      width: '100%', boxSizing: 'border-box',
      display: 'flex', flexDirection: 'column', gap: 28,
      fontFamily: '"DM Sans", sans-serif', color: RF_INK,
    }}>
      {/* Title */}
      <div>
        <div style={{
          fontFamily: '"JetBrains Mono", ui-monospace, monospace',
          fontSize: 11, color: '#A89B91', letterSpacing: '0.14em',
          textTransform: 'uppercase', marginBottom: 8,
        }}>The mark · v2</div>
        <h1 style={{
          fontFamily: '"Nunito", sans-serif', fontWeight: 900,
          fontSize: 44, letterSpacing: '-0.025em', margin: 0,
          textWrap: 'balance',
        }}>
          A robin, on its way <span style={{ color: RF_AMBER, fontStyle: 'italic' }}>somewhere good.</span>
        </h1>
      </div>

      {/* Hero */}
      <div style={{
        background: '#FFFBF5', border: '1px solid rgba(28,16,9,0.08)',
        borderRadius: 20, padding: '60px 40px',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative',
      }}>
        <RobinRunMark size={360}/>
        <div style={{
          position: 'absolute', bottom: 16, right: 20,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10.5,
          color: '#A89B91', letterSpacing: '0.06em', textTransform: 'uppercase',
        }}>360px</div>
      </div>

      {/* Size ladder */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
        {[160, 96, 64, 40, 24].map(s => (
          <div key={s} style={{
            background: '#FFFBF5', border: '1px solid rgba(28,16,9,0.08)',
            borderRadius: 14, padding: '20px 16px',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
            minHeight: 200,
            justifyContent: 'center',
          }}>
            <RobinRunMark size={s}/>
            <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, color: '#7B6A5F' }}>
              {s}px
            </span>
          </div>
        ))}
      </div>

      {/* Dark + on-color */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        <div style={{
          background: RF_INK, borderRadius: 14, padding: 32,
          display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 180,
          position: 'relative',
        }}>
          <RobinRunMark size={140}/>
          <span style={{
            position: 'absolute', bottom: 12, left: 16,
            fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
            color: 'rgba(255,251,245,0.55)',
          }}>on espresso</span>
        </div>
        <div style={{
          background: '#FFE4CC', borderRadius: 14, padding: 32,
          display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 180,
          position: 'relative',
        }}>
          <RobinRunMark size={140}/>
          <span style={{
            position: 'absolute', bottom: 12, left: 16,
            fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
            color: '#9A3412',
          }}>on amber tint</span>
        </div>
        <div style={{
          background: '#FFFBF5', borderRadius: 14, padding: 32, border: '1px solid rgba(28,16,9,0.08)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 180,
          position: 'relative',
        }}>
          <RobinRunMark size={140} birdColor={RF_INK} birdShade="#3A2418" inkColor={RF_INK}/>
          <span style={{
            position: 'absolute', bottom: 12, left: 16,
            fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
            color: '#7B6A5F',
          }}>one-color · espresso</span>
        </div>
      </div>

      {/* App icons */}
      <div>
        <h3 style={{ fontFamily: '"Nunito", sans-serif', fontWeight: 800, fontSize: 18, margin: '0 0 14px', letterSpacing: '-0.01em' }}>App icons</h3>
        <div style={{ display: 'flex', gap: 16, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          <div style={{
            width: 120, height: 120,
            background: `linear-gradient(135deg, ${RF_AMBER}, ${RF_AMBER_DEEP})`,
            borderRadius: 28,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 8px 24px rgba(28,16,9,0.2)',
          }}>
            <RobinRunMark size={92} birdColor={RF_CREAM} birdShade="#F3E4C8" inkColor={RF_INK}/>
          </div>
          <div style={{
            width: 96, height: 96, background: RF_INK,
            borderRadius: 22,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 6px 18px rgba(28,16,9,0.18)',
          }}>
            <RobinRunMark size={72}/>
          </div>
          <div style={{
            width: 80, height: 80, background: RF_CREAM,
            border: '1px solid rgba(28,16,9,0.08)',
            borderRadius: 18,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 6px 18px rgba(28,16,9,0.06)',
          }}>
            <RobinRunMark size={60}/>
          </div>
          <div style={{
            width: 60, height: 60,
            background: `linear-gradient(135deg, ${RF_AMBER}, ${RF_AMBER_DEEP})`,
            borderRadius: 14,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 4px 12px rgba(28,16,9,0.16)',
          }}>
            <RobinRunMark size={46} birdColor={RF_CREAM} birdShade="#F3E4C8" inkColor={RF_INK}/>
          </div>
        </div>
      </div>

      {/* Lockups */}
      <div>
        <h3 style={{ fontFamily: '"Nunito", sans-serif', fontWeight: 800, fontSize: 18, margin: '0 0 14px', letterSpacing: '-0.01em' }}>Wordmark lockups</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{
            background: '#FFFBF5', border: '1px solid rgba(28,16,9,0.08)',
            borderRadius: 14, padding: '20px 28px',
            display: 'flex', alignItems: 'center', gap: 24,
          }}>
            <RobinRunLockup size={56}/>
            <div style={{ flex: 1 }}/>
            <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, color: '#A89B91' }}>Horizontal · primary</span>
          </div>
          <div style={{
            background: RF_INK, borderRadius: 14, padding: '20px 28px',
            display: 'flex', alignItems: 'center', gap: 24,
          }}>
            <RobinRunLockup size={56} dark/>
            <div style={{ flex: 1 }}/>
            <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, color: 'rgba(255,251,245,0.45)' }}>Horizontal · dark</span>
          </div>
          <div style={{
            background: '#FFE4CC', borderRadius: 14, padding: '28px 28px',
            display: 'flex', alignItems: 'center', gap: 24, justifyContent: 'center',
          }}>
            <RobinRunLockup size={70} stacked/>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  RobinRunMark, RobinRunLockup, FinalLogoShowcase,
});