/* ==========================================================
   opc.how — Brand identity page
   ========================================================== */

function LogosPage() {
  return (
    <div className="page-enter" style={{padding:'56px 0 80px'}}>
      <div className="container">
        <div className="eyebrow mb-4">/ brand</div>
        <h1 className="title-xl" style={{marginBottom:14}}>The opc.how mark</h1>
        <p className="lede" style={{maxWidth:'60ch', marginBottom:48}}>
          A single mark: the OPC pulse riding over the wordmark. The pulse alone reads as a favicon; together with the wordmark it's the full lockup. Everything else on the site (charts, accents, source dots) inherits from the same signal-orange hue.
        </p>

        {/* MAIN LOCKUP */}
        <div className="card" style={{padding:'72px 56px', display:'grid', placeItems:'center', marginBottom:24}}>
          <BrandWordmark height={88}/>
        </div>
        <div className="ai-strip mb-8">
          <span className="ai-strip-dot"/>
          <span>Native SVG · scales without loss · uses currentColor for theme inversion</span>
        </div>

        {/* LIGHT / DARK PAIR */}
        <h2 className="title-md mb-4">Light · Dark</h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:48}}>
          <div style={{padding:'56px 32px', borderRadius:'var(--r-md)', background:'#FAFAF7', border:'1px solid var(--border)', display:'grid', placeItems:'center'}}>
            <span style={{color:'#0E0E0C'}}><BrandWordmark height={44}/></span>
          </div>
          <div style={{padding:'56px 32px', borderRadius:'var(--r-md)', background:'#0A0A09', border:'1px solid var(--border)', display:'grid', placeItems:'center'}}>
            <span style={{color:'#F5F4EE'}}><BrandWordmark height={44}/></span>
          </div>
        </div>

        {/* ICON ONLY */}
        <h2 className="title-md mb-4">Icon-only mark — the OPC pulse</h2>
        <p className="soft mb-6" style={{maxWidth:'56ch', fontSize:14}}>
          When the lockup won't fit — favicons, app icons, social avatars — use the pulse alone.
        </p>
        <div className="card" style={{padding:'48px', display:'flex', alignItems:'center', justifyContent:'space-around', gap:32, flexWrap:'wrap', marginBottom:48}}>
          {[16, 24, 32, 48, 64, 96].map(sz => (
            <div key={sz} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:14}}>
              <div style={{width: Math.max(sz, 48), height: Math.max(sz, 48), display:'grid', placeItems:'center', borderRadius: 6, background:'var(--bg-sunken)'}}>
                <BrandMark size={sz}/>
              </div>
              <span className="mono faint" style={{fontSize:10, letterSpacing:'0.06em'}}>{sz}px</span>
            </div>
          ))}
        </div>

        {/* PALETTE */}
        <h2 className="title-md mb-4">Palette</h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16, marginBottom:48}}>
          {[
            { name: 'Signal orange', hex: '#FF6A00', role: 'Brand mark · accents · charts', light: false },
            { name: 'Near black',    hex: '#0E0E0C', role: 'Wordmark · primary text',    light: false },
            { name: 'Warm white',    hex: '#FAFAF7', role: 'Light background',            light: true  },
            { name: 'Ink black',     hex: '#0A0A09', role: 'Dark background',             light: false },
          ].map(c => (
            <div key={c.hex} className="card" style={{padding:0, overflow:'hidden'}}>
              <div style={{height:120, background: c.hex, borderBottom:'1px solid var(--border-soft)'}}/>
              <div style={{padding:'14px 16px'}}>
                <div className="mono" style={{fontSize:13, fontWeight:600}}>{c.name}</div>
                <div className="mono faint" style={{fontSize:11, marginTop:4}}>{c.hex}</div>
                <div className="soft" style={{fontSize:11, marginTop:8, color:'var(--fg-muted)'}}>{c.role}</div>
              </div>
            </div>
          ))}
        </div>

        {/* TYPE PAIRING */}
        <h2 className="title-md mb-4">Type pairing</h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:48}}>
          <div className="card" style={{padding:'28px'}}>
            <div className="eyebrow mb-4">Headlines & numbers</div>
            <div className="mono" style={{fontSize:48, fontWeight:500, letterSpacing:'-0.02em', lineHeight:1, marginBottom:14}}>JetBrains Mono</div>
            <div className="mono faint" style={{fontSize:11, letterSpacing:'0.06em'}}>weights 400 · 500 · 600 · 700</div>
            <div className="hr mt-6 mb-3"/>
            <div className="mono" style={{fontSize:14, color:'var(--fg-soft)'}}>$465k MRR · +18% WoW · 47 events</div>
          </div>
          <div className="card" style={{padding:'28px'}}>
            <div className="eyebrow mb-4">Body</div>
            <div style={{fontFamily:'var(--font-sans)', fontSize:32, fontWeight:500, letterSpacing:'-0.015em', lineHeight:1.1, marginBottom:14}}>Geist</div>
            <div className="mono faint" style={{fontSize:11, letterSpacing:'0.06em'}}>weights 400 · 500 · 600</div>
            <div className="hr mt-6 mb-3"/>
            <p className="soft" style={{margin:0, fontSize:14, lineHeight:1.55}}>The week's headline is not a new launch — it's Tibo's Revid.ai crossing $465K MRR.</p>
          </div>
        </div>

        {/* USAGE */}
        <h2 className="title-md mb-4">In use</h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:24}}>
          {/* Tab bar mock */}
          <div className="card" style={{padding:'16px 20px', display:'flex', alignItems:'center', gap:10}}>
            <span style={{width:14, height:14, borderRadius:3, background:'var(--bg-sunken)', display:'grid', placeItems:'center'}}>
              <BrandMark size={11}/>
            </span>
            <span className="mono" style={{fontSize:12, color:'var(--fg)'}}>opc.how — This week in indie SaaS</span>
            <span style={{flex:1}}/>
            <span className="mono faint" style={{fontSize:10}}>browser tab</span>
          </div>
          {/* iOS app icon mock */}
          <div className="card" style={{padding:'16px 20px', display:'flex', alignItems:'center', gap:14}}>
            <div style={{width:48, height:48, borderRadius:11, background:'#0A0A09', display:'grid', placeItems:'center'}}>
              <BrandMark size={28}/>
            </div>
            <div style={{display:'flex', flexDirection:'column'}}>
              <span style={{fontSize:13, fontWeight:500}}>opc.how</span>
              <span className="mono faint" style={{fontSize:10}}>iOS / macOS app icon</span>
            </div>
          </div>
        </div>

        <div className="mt-8 flex items-center gap-3">
          <a className="btn" href="/">← Back to this week</a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LogosPage });