// logo.jsx — 童画屋 Logo system
// Concept: a picture frame holding a child's first drawing — a sun above a horizon line.
// Two atoms: 圆 (sun, child) + 框 (frame, museum). The empty space between them is "留白".

// — Primary Mark ————————————————————————————————————————
// Square frame, hand-feel slight irregularity, sun upper-right, horizon lower-third.
function LogoMark({ size = 48, color = '#1F1B16', accent = '#B86B4A', bg = 'transparent', strokeW }) {
  const s = size;
  const sw = strokeW || Math.max(1.5, s * 0.04);
  return (
    <svg width={s} height={s} viewBox="0 0 48 48" fill="none" style={{display:'block'}}>
      {bg !== 'transparent' && <rect width="48" height="48" rx={s*0.18} fill={bg}/>}
      {/* outer frame */}
      <rect x="6" y="6" width="36" height="36" rx="1.5" stroke={color} strokeWidth={sw} fill="none"/>
      {/* sun — small filled disc upper-right */}
      <circle cx="32" cy="18" r="3.6" fill={accent}/>
      {/* horizon line — single brushy stroke through lower third */}
      <path d="M11 31 Q24 29.5 37 31" stroke={color} strokeWidth={sw*0.85} strokeLinecap="round" fill="none"/>
    </svg>
  );
}

// — App Icon (rounded, on cream paper, w/ subtle paper grain) ——
function AppIcon({ size = 180, rounded = true, dark = false }) {
  const cream = '#FAF7F2';
  const paper = '#F2EDE4';
  const ink = dark ? '#FAF7F2' : '#1F1B16';
  const accent = '#B86B4A';
  const r = rounded ? size * 0.225 : 0; // iOS squircle approx
  return (
    <div style={{
      width: size, height: size, borderRadius: r, overflow: 'hidden',
      position: 'relative',
      background: dark ? '#1F1B16' : `linear-gradient(155deg, ${cream} 0%, ${paper} 100%)`,
      boxShadow: '0 1px 2px rgba(0,0,0,0.05), 0 18px 40px rgba(60,40,20,0.18)',
    }}>
      {/* paper tone vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 30% 28%, rgba(255,255,255,0.5), transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(120,90,60,0.08), transparent 65%)',
      }}/>
      <div style={{position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'center'}}>
        <LogoMark size={size * 0.56} color={ink} accent={accent}/>
      </div>
      {/* subtle inner highlight */}
      <div style={{
        position:'absolute', inset: 0, borderRadius: r,
        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.04)',
      }}/>
    </div>
  );
}

// — Wordmark — mark + 童画屋 in serif ————————————————————
function LogoWordmark({ height = 36, color = '#1F1B16', accent = '#B86B4A', lockup = 'horizontal' }) {
  if (lockup === 'horizontal') {
    return (
      <div style={{display:'flex', alignItems:'center', gap: height * 0.34}}>
        <LogoMark size={height} color={color} accent={accent}/>
        <div style={{display:'flex', flexDirection:'column', lineHeight: 1}}>
          <span style={{
            fontFamily: '"Noto Serif SC","Source Han Serif SC","Songti SC",serif',
            fontSize: height * 0.72, fontWeight: 500, color, letterSpacing: height * 0.04,
          }}>童画屋</span>
          <span className="latin-serif" style={{
            fontSize: height * 0.24, letterSpacing: height * 0.13,
            color: 'rgba(60,50,40,0.55)', marginTop: height * 0.12,
          }}>TONG · HUA · WU</span>
        </div>
      </div>
    );
  }
  // stacked
  return (
    <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap: height * 0.3}}>
      <LogoMark size={height * 1.2} color={color} accent={accent}/>
      <div style={{display:'flex', flexDirection:'column', alignItems:'center', lineHeight: 1}}>
        <span style={{
          fontFamily: '"Noto Serif SC","Source Han Serif SC","Songti SC",serif',
          fontSize: height * 0.7, fontWeight: 500, color, letterSpacing: height * 0.05,
        }}>童画屋</span>
        <span className="latin-serif" style={{
          fontSize: height * 0.22, letterSpacing: height * 0.16,
          color: 'rgba(60,50,40,0.55)', marginTop: height * 0.2,
        }}>TONG · HUA · WU</span>
      </div>
    </div>
  );
}

// — Monogram Alt — single 童 in editorial serif inside a thin frame ——
function LogoMonogram({ size = 64, color = '#1F1B16', frame = true }) {
  const s = size;
  return (
    <div style={{
      width: s, height: s, position:'relative', display:'inline-block',
    }}>
      {frame && (
        <div style={{
          position:'absolute', inset: 0,
          border: `${Math.max(1, s*0.02)}px solid ${color}`,
          borderRadius: 2,
        }}/>
      )}
      <div style={{
        position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily: '"Noto Serif SC","Source Han Serif SC","Songti SC",serif',
        fontSize: s * 0.62, fontWeight: 400, color,
        paddingBottom: s * 0.04,
      }}>童</div>
    </div>
  );
}

window.LogoMark = LogoMark;
window.AppIcon = AppIcon;
window.LogoWordmark = LogoWordmark;
window.LogoMonogram = LogoMonogram;

// — Showcase panel for the canvas ————————————————————————
function LogoShowcase() {
  const C2 = window.C;
  return (
    <div style={{
      width: 1240, padding: 40, boxSizing: 'border-box',
      background: C2.cream, borderRadius: 6,
      fontFamily: '"Noto Sans SC","PingFang SC",-apple-system,sans-serif',
    }}>
      <div style={{marginBottom: 32}}>
        <div className="latin-serif" style={{fontSize: 12, letterSpacing: 3, color: C2.muted}}>BRAND · LOGO</div>
        <div style={{fontFamily: window.SERIF, fontSize: 22, marginTop: 4, color: C2.ink}}>Logo 系统</div>
        <div style={{fontFamily: window.SERIF, fontSize: 13, color: C2.text, marginTop: 8, lineHeight: 1.7, maxWidth: 640}}>
          一个画框，框住一个孩子最早画的画：一个太阳，一条地平线。<br/>
          框 = 美术馆 · 圆 = 孩子 · 中间的留白 = 等待被画下的童年。
        </div>
      </div>

      {/* Primary lockup — big */}
      <div style={{padding: '48px 40px', background: '#fff', borderRadius: 10,
        boxShadow:'0 1px 3px rgba(120,90,60,0.06), 0 6px 18px rgba(120,90,60,0.08)',
        display:'flex', alignItems:'center', justifyContent:'center', marginBottom: 24,
      }}>
        <LogoWordmark height={68}/>
      </div>

      {/* Lockup variants row */}
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 18, marginBottom: 32}}>
        <Tile label="A · 主标识 · 横排">
          <LogoWordmark height={36}/>
        </Tile>
        <Tile label="B · 主标识 · 竖排">
          <LogoWordmark height={40} lockup="stacked"/>
        </Tile>
        <Tile label="C · 单字标 (备用)">
          <LogoMonogram size={64}/>
        </Tile>
      </div>

      {/* Mark scale */}
      <div style={{padding: '28px 24px', background:'#fff', borderRadius: 10, marginBottom: 32,
        boxShadow:'0 1px 3px rgba(120,90,60,0.06), 0 6px 18px rgba(120,90,60,0.08)',
      }}>
        <div style={{fontFamily: window.SERIF, fontSize: 13, color: C2.muted, marginBottom: 18}}>
          标识 · 缩放梯度（最小可识别 16px）
        </div>
        <div style={{display:'flex', alignItems:'flex-end', gap: 36, paddingBottom: 8}}>
          {[16, 24, 32, 48, 80, 128].map(s => (
            <div key={s} style={{display:'flex', flexDirection:'column', alignItems:'center', gap: 10}}>
              <LogoMark size={s}/>
              <span className="mono" style={{fontSize: 10, color: C2.muted}}>{s}px</span>
            </div>
          ))}
        </div>
      </div>

      {/* App icons */}
      <div style={{marginBottom: 32}}>
        <div style={{fontFamily: window.SERIF, fontSize: 14, color: C2.charcoal, marginBottom: 14}}>App Icon · iOS</div>
        <div style={{display:'flex', gap: 26, alignItems:'flex-end'}}>
          <div style={{textAlign:'center'}}>
            <AppIcon size={180}/>
            <div style={{fontSize: 11, color: C2.muted, marginTop: 10, fontFamily: window.SERIF}}>奶油白 · 主用</div>
          </div>
          <div style={{textAlign:'center'}}>
            <AppIcon size={120} dark/>
            <div style={{fontSize: 11, color: C2.muted, marginTop: 10, fontFamily: window.SERIF}}>深色 · Auto Dark</div>
          </div>
          <div style={{textAlign:'center'}}>
            <AppIcon size={80}/>
            <div style={{fontSize: 11, color: C2.muted, marginTop: 10, fontFamily: window.SERIF}}>80pt</div>
          </div>
          <div style={{textAlign:'center'}}>
            <AppIcon size={60}/>
            <div style={{fontSize: 11, color: C2.muted, marginTop: 10, fontFamily: window.SERIF}}>60pt · Spotlight</div>
          </div>
          <div style={{textAlign:'center'}}>
            <AppIcon size={40}/>
            <div style={{fontSize: 11, color: C2.muted, marginTop: 10, fontFamily: window.SERIF}}>40pt · Settings</div>
          </div>
          <div style={{textAlign:'center'}}>
            <AppIcon size={29}/>
            <div style={{fontSize: 11, color: C2.muted, marginTop: 10, fontFamily: window.SERIF}}>29pt · 通知</div>
          </div>
        </div>
      </div>

      {/* color variants on backgrounds */}
      <div>
        <div style={{fontFamily: window.SERIF, fontSize: 14, color: C2.charcoal, marginBottom: 14}}>颜色应用</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap: 14}}>
          <Swatch bg={C2.cream}><LogoMark size={56}/></Swatch>
          <Swatch bg={C2.paper}><LogoMark size={56}/></Swatch>
          <Swatch bg={C2.wood}><LogoMark size={56} color={C2.cream} accent={C2.cream}/></Swatch>
          <Swatch bg={C2.ink}><LogoMark size={56} color={C2.cream} accent={C2.accentSoft}/></Swatch>
        </div>
      </div>

      {/* DON'T panel */}
      <div style={{marginTop: 32, padding: '20px 24px', background: C2.paper, borderRadius: 10}}>
        <div style={{fontFamily: window.SERIF, fontSize: 14, color: C2.charcoal, marginBottom: 10}}>不要这样使用</div>
        <ul style={{margin: 0, paddingLeft: 18, fontFamily: window.SERIF, fontSize: 12, color: C2.text, lineHeight: 1.9}}>
          <li>不要给框加渐变、立体或阴影</li>
          <li>不要把太阳改成笑脸、星星、彩虹</li>
          <li>不要使用高饱和的卡通色——太阳的橙是唯一的"暖色出口"</li>
          <li>不要拉伸框的比例。它永远是正方形</li>
        </ul>
      </div>
    </div>
  );
}

function Tile({ label, children }) {
  const C2 = window.C;
  return (
    <div style={{
      padding: '32px 20px', background: '#fff', borderRadius: 10,
      boxShadow:'0 1px 3px rgba(120,90,60,0.06), 0 6px 18px rgba(120,90,60,0.08)',
      display:'flex', flexDirection:'column', alignItems:'center', gap: 18,
      minHeight: 130, justifyContent:'center',
    }}>
      <div style={{flex: 1, display:'flex', alignItems:'center'}}>{children}</div>
      <div style={{fontSize: 11, color: C2.muted, fontFamily: window.SERIF}}>{label}</div>
    </div>
  );
}

function Swatch({ bg, children }) {
  return (
    <div style={{
      aspectRatio: '4/3', background: bg, borderRadius: 10,
      display:'flex', alignItems:'center', justifyContent:'center',
      boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,0.05)',
    }}>{children}</div>
  );
}

window.LogoShowcase = LogoShowcase;