// LinkedClean — Brand v2 showcase pieces
// Ícone (3 tamanhos), paleta, tipografia, wordmark/lockup, voz, hero landing.

// =============================================================================
// ICON v2 — mantém DNA (3 barras + sparkle), refinado
// =============================================================================
function LCBIcon({ size = 96, radius }) {
  const { LCB } = window;
  const r = radius ?? Math.round(size * 0.23);
  return (
    <div style={{
      width: size, height: size, borderRadius: r,
      background: LCB.ink,
      position: 'relative', overflow: 'hidden',
      boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 8px 24px -8px rgba(0,0,0,0.18)',
      flexShrink: 0,
    }}>
      <svg width={size} height={size} viewBox="0 0 96 96" style={{ position: 'absolute', inset: 0 }}>
        <rect x="20" y="22" width="38" height="10" rx="5" fill="rgba(255,255,255,0.32)" />
        <rect x="20" y="43" width="56" height="10" rx="5" fill="#FFFFFF" />
        <rect x="20" y="64" width="46" height="10" rx="5" fill="#FFFFFF" />
        <circle cx="74" cy="22" r="4.5" fill={LCB.blue} />
      </svg>
    </div>
  );
}
window.LCBIcon = LCBIcon;

// =============================================================================
// WORDMARK v2 — "Linked" leve + "Clean" bold
// =============================================================================
function LCBWordmark({ size = 22, color, accentColor }) {
  const { LCB } = window;
  return (
    <span style={{
      fontFamily: LCB.fontSans,
      fontSize: size, fontWeight: 500,
      letterSpacing: '-0.025em',
      color: color || LCB.ink,
      whiteSpace: 'nowrap',
    }}>
      Linked<span style={{ fontWeight: 700, color: accentColor || LCB.ink }}>Clean</span>
    </span>
  );
}
window.LCBWordmark = LCBWordmark;

function LCBLockup({ iconSize = 32, textSize = 18, gap = 10 }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap }}>
      <LCBIcon size={iconSize} />
      <LCBWordmark size={textSize} />
    </div>
  );
}
window.LCBLockup = LCBLockup;

// =============================================================================
// PALETTE — swatches com hex
// =============================================================================
function LCBPaletteCard() {
  const { LCB } = window;
  const swatches = [
    { name: 'Paper', hex: '#FAFAF9', bg: '#FAFAF9', fg: LCB.ink, sub: 'bg principal · off-white quente' },
    { name: 'Ink', hex: '#0A0A0A', bg: '#0A0A0A', fg: '#FFFFFF', sub: 'CTAs, headlines' },
    { name: 'Ink 60', hex: '#525252', bg: '#525252', fg: '#FFFFFF', sub: 'body secundário' },
    { name: 'Ink 10', hex: '#E5E5E5', bg: '#E5E5E5', fg: LCB.ink, sub: 'borders, dividers' },
    { name: 'LinkedIn Blue', hex: '#0A66C2', bg: LCB.blue, fg: '#FFFFFF', sub: 'só ícone + estados ON' },
    { name: 'Blue Deep', hex: '#004182', bg: LCB.blueDeep, fg: '#FFFFFF', sub: 'gradient stop' },
    { name: 'Sparkle', hex: '#FFD93D', bg: LCB.yellow, fg: LCB.ink, sub: 'micro-acento (ícone)' },
  ];
  return (
    <div style={{
      width: 1280, padding: '64px 56px', background: LCB.paper,
      fontFamily: LCB.fontSans,
    }}>
      <div style={{ marginBottom: 36 }}>
        <div style={{
          fontSize: 11, fontWeight: 600, color: LCB.ink60,
          textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 10,
        }}>Paleta</div>
        <h2 style={{
          fontSize: 44, fontWeight: 700, letterSpacing: '-0.03em',
          margin: 0, color: LCB.ink, lineHeight: 1.05,
        }}>
          Off-white, preto, um sopro de azul.
        </h2>
        <p style={{ fontSize: 15, color: LCB.ink60, maxWidth: 640, marginTop: 12, lineHeight: 1.5 }}>
          A marca vive de neutros. O azul aparece <em>só</em> no ícone e em estados ativos —
          não é cor de UI, é o sinal de que a extensão está ligada.
        </p>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
      }}>
        {swatches.map((s, i) => (
          <div key={i} style={{
            background: '#FFFFFF', border: `1px solid ${LCB.ink10}`,
            borderRadius: LCB.rLg, overflow: 'hidden',
          }}>
            <div style={{
              height: 100, background: s.bg, color: s.fg,
              display: 'flex', alignItems: 'flex-end', padding: 14,
              fontFamily: LCB.fontMono, fontSize: 12, fontWeight: 500,
            }}>
              {s.hex}
            </div>
            <div style={{ padding: '14px 16px' }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: LCB.ink, letterSpacing: '-0.01em' }}>
                {s.name}
              </div>
              <div style={{ fontSize: 12, color: LCB.ink60, marginTop: 3, lineHeight: 1.4 }}>
                {s.sub}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.LCBPaletteCard = LCBPaletteCard;

// =============================================================================
// TYPOGRAPHY card — Inter scale + Instrument Serif accent
// =============================================================================
function LCBTypeCard() {
  const { LCB } = window;
  return (
    <div style={{
      width: 1280, padding: '64px 56px', background: '#FFFFFF',
      fontFamily: LCB.fontSans,
    }}>
      <div style={{ marginBottom: 40 }}>
        <div style={{
          fontSize: 11, fontWeight: 600, color: LCB.ink60,
          textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 10,
        }}>Tipografia</div>
        <h2 style={{
          fontSize: 44, fontWeight: 700, letterSpacing: '-0.03em',
          margin: 0, color: LCB.ink, lineHeight: 1.05,
        }}>
          Inter, do micro ao display.
        </h2>
        <p style={{ fontSize: 15, color: LCB.ink60, maxWidth: 640, marginTop: 12, lineHeight: 1.5 }}>
          Inter cobre 100% do produto. JetBrains Mono entra em meta-info — versão, hex, regras regex.
        </p>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        {[
          { label: 'Display · Inter 700 · 76px / -3.5%', sample: 'Limpe seu feed.', size: 76, weight: 700, ls: '-0.035em' },
          { label: 'H1 · Inter 700 · 44px / -3%',         sample: 'Sua faxina, em números.', size: 44, weight: 700, ls: '-0.03em' },
          { label: 'H2 · Inter 700 · 28px / -2.5%',       sample: 'O que entra. O que sai.', size: 28, weight: 700, ls: '-0.025em' },
          { label: 'Body · Inter 400 · 16px / 1.5',       sample: 'Bloqueie posts patrocinados, story-time corporativo e influencers de LinkedIn. Você decide o que entra.', size: 16, weight: 400, ls: '-0.005em', lh: 1.5, color: LCB.ink60 },
          { label: 'Caption · Inter 600 · 11px / 14% caps', sample: 'FAXINA DE HOJE', size: 11, weight: 600, ls: '0.14em', tt: 'uppercase' },
          { label: 'Mono · JetBrains 500 · 12px',         sample: 'linkedclean.app · v1.0.0', size: 12, weight: 500, font: LCB.fontMono, color: LCB.ink40 },
        ].map((t, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '260px 1fr', gap: 32,
            paddingBottom: 24,
            borderBottom: i < 5 ? `1px solid ${LCB.ink10}` : 'none',
            alignItems: 'center',
          }}>
            <div style={{
              fontFamily: LCB.fontMono, fontSize: 11,
              color: LCB.ink40, lineHeight: 1.5,
              letterSpacing: 0,
            }}>
              {t.label}
            </div>
            <div style={{
              fontFamily: t.font || LCB.fontSans,
              fontSize: t.size, fontWeight: t.weight,
              letterSpacing: t.ls, lineHeight: t.lh || 1.1,
              color: t.color || LCB.ink, textTransform: t.tt,
            }}>
              {t.sample}
            </div>
          </div>
        ))}

        {/* Sample: mixed sans + serif italic */}
        <div style={{
          marginTop: 16, padding: '32px 36px',
          background: LCB.paper, borderRadius: LCB.rLg,
          border: `1px solid ${LCB.ink10}`,
        }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: LCB.ink60, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 12 }}>
            Mix · Sans + Serif itálico
          </div>
          <div style={{
            fontFamily: LCB.fontSans, fontSize: 60, fontWeight: 700,
            letterSpacing: '-0.035em', lineHeight: 1.05, color: LCB.ink,
          }}>
            Devolvendo o controle do seu feed.
          </div>
        </div>
      </div>
    </div>
  );
}
window.LCBTypeCard = LCBTypeCard;

// =============================================================================
// ICON SCALE — 16, 32, 128 + wordmark + lockup
// =============================================================================
function LCBIconScaleCard() {
  const { LCB, LCBWordmark, LCBLockup } = window;
  return (
    <div style={{
      width: 1280, padding: '64px 56px', background: LCB.paper,
      fontFamily: LCB.fontSans,
    }}>
      <div style={{ marginBottom: 40 }}>
        <div style={{
          fontSize: 11, fontWeight: 600, color: LCB.ink60,
          textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 10,
        }}>Ícone & Wordmark</div>
        <h2 style={{
          fontSize: 44, fontWeight: 700, letterSpacing: '-0.03em',
          margin: 0, color: LCB.ink, lineHeight: 1.05,
        }}>
          Funciona em 16px e em 512.
        </h2>
        <p style={{ fontSize: 15, color: LCB.ink60, maxWidth: 640, marginTop: 12, lineHeight: 1.5 }}>
          Três barras + sparkle amarelo. Lê como cartão de perfil até a 16px de favicon.
        </p>
      </div>

      {/* Sizes row */}
      <div style={{
        background: '#FFFFFF', border: `1px solid ${LCB.ink10}`,
        borderRadius: LCB.rLg, padding: '40px 48px', marginBottom: 24,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-around', gap: 32,
      }}>
        {[
          { size: 16, label: 'Favicon', sub: '16×16' },
          { size: 32, label: 'Toolbar', sub: '32×32 · Chrome' },
          { size: 64, label: 'Card', sub: '64×64' },
          { size: 128, label: 'Web Store', sub: '128×128' },
          { size: 192, label: 'Hero', sub: '192×192' },
        ].map((s, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <LCBIcon size={s.size} />
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: LCB.ink, letterSpacing: '-0.005em' }}>{s.label}</div>
              <div style={{ fontFamily: LCB.fontMono, fontSize: 11, color: LCB.ink40, marginTop: 2 }}>{s.sub}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Wordmark + lockup */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{
          background: '#FFFFFF', border: `1px solid ${LCB.ink10}`,
          borderRadius: LCB.rLg, padding: '36px 40px',
        }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: LCB.ink60, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 18 }}>
            Wordmark
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <LCBWordmark size={36} />
            <LCBWordmark size={22} />
            <LCBWordmark size={14} />
          </div>
        </div>
        <div style={{
          background: '#FFFFFF', border: `1px solid ${LCB.ink10}`,
          borderRadius: LCB.rLg, padding: '36px 40px',
        }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: LCB.ink60, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 18 }}>
            Lockup
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <LCBLockup iconSize={48} textSize={26} gap={12} />
            <LCBLockup iconSize={32} textSize={18} gap={10} />
            <LCBLockup iconSize={20} textSize={13} gap={7} />
          </div>
        </div>
      </div>
    </div>
  );
}
window.LCBIconScaleCard = LCBIconScaleCard;

// =============================================================================
// VOICE — frases canônicas, do/don't, tom
// =============================================================================
function LCBVoiceCard() {
  const { LCB } = window;
  const phrases = [
    'Limpe seu feed do LinkedIn.',
    'Você decide o que entra.',
    'Faxina de hoje · 84 varridos.',
    'Varrido silenciosamente.',
    'Devolvendo o controle do seu feed.',
    'Hora da faxina.',
  ];
  const dos = [
    'Curto, direto, com ponto final.',
    'Vocabulário concreto: varrer, faxina, varrido.',
    'Voz na 2ª pessoa ("você decide").',
    'Confiante mas não agressivo.',
  ];
  const donts = [
    '"Liberte-se do feed tóxico" — dramático.',
    '"AI-powered post detection" — jargão.',
    '"Click here to optimize your timeline" — vendedor.',
    '"Diga adeus ao LinkedIn ruim 👋" — emoji + cringe.',
  ];

  return (
    <div style={{
      width: 1280, padding: '64px 56px', background: '#FFFFFF',
      fontFamily: LCB.fontSans,
    }}>
      <div style={{ marginBottom: 40 }}>
        <div style={{
          fontSize: 11, fontWeight: 600, color: LCB.ink60,
          textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 10,
        }}>Voz</div>
        <h2 style={{
          fontSize: 44, fontWeight: 700, letterSpacing: '-0.03em',
          margin: 0, color: LCB.ink, lineHeight: 1.05,
        }}>
          Frase curta. Ponto final. Sem firula.
        </h2>
      </div>

      {/* Big phrases */}
      <div style={{
        background: LCB.paper, borderRadius: LCB.rLg,
        border: `1px solid ${LCB.ink10}`,
        padding: '40px 48px', marginBottom: 24,
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '28px 48px',
      }}>
        {phrases.map((p, i) => (
          <div key={i} style={{
            fontFamily: LCB.fontSans, fontSize: 28, fontWeight: 700,
            letterSpacing: '-0.025em', lineHeight: 1.15, color: LCB.ink,
          }}>
            {p}
          </div>
        ))}
      </div>

      {/* Do / Don't */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{
          background: '#FFFFFF', border: `1px solid ${LCB.ink10}`,
          borderRadius: LCB.rLg, padding: 28,
        }}>
          <div style={{
            fontSize: 11, fontWeight: 600, color: LCB.success,
            textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 16,
          }}>✓ Faça</div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {dos.map((d, i) => (
              <li key={i} style={{ fontSize: 15, color: LCB.ink, lineHeight: 1.45, letterSpacing: '-0.005em' }}>
                {d}
              </li>
            ))}
          </ul>
        </div>
        <div style={{
          background: '#FFFFFF', border: `1px solid ${LCB.ink10}`,
          borderRadius: LCB.rLg, padding: 28,
        }}>
          <div style={{
            fontSize: 11, fontWeight: 600, color: '#DC2626',
            textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 16,
          }}>✗ Evite</div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {donts.map((d, i) => (
              <li key={i} style={{ fontSize: 15, color: LCB.ink60, lineHeight: 1.45, letterSpacing: '-0.005em', textDecoration: 'line-through', textDecorationColor: LCB.ink20 }}>
                {d}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}
window.LCBVoiceCard = LCBVoiceCard;

// =============================================================================
// HERO LANDING — Mobbin × EarlyBird aplicado
// =============================================================================
function LCBHero() {
  const { LCB, LCBPillNav, LCBLockup, LCBHeadline, LCBButton } = window;
  return (
    <div style={{
      width: 1280, background: LCB.paper,
      fontFamily: LCB.fontSans, color: LCB.ink,
      paddingBottom: 80,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Top thin border line */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: `linear-gradient(90deg, transparent, ${LCB.ink10} 30%, ${LCB.ink10} 70%, transparent)`,
      }} />

      {/* Pill nav */}
      <div style={{
        position: 'relative', display: 'flex', justifyContent: 'center',
        paddingTop: 24,
      }}>
        <LCBPillNav
          brand={<LCBLockup iconSize={20} textSize={14} gap={7} />}
          items={['Como funciona', 'Manifesto']}
          cta="Adicionar ao Chrome"
        />
      </div>

      {/* Hero */}
      <div style={{
        textAlign: 'center',
        paddingTop: 100, paddingLeft: 56, paddingRight: 56,
      }}>
        {/* Big icon */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 36, marginTop: 28 }}>
          <LCBIcon size={104} />
        </div>

        {/* H1 — sans only, no serif italic */}
        <LCBHeadline size={88} align="center" maxWidth={1000}>
          Limpe seu feed do<br />LinkedIn.
        </LCBHeadline>

        <p style={{
          fontSize: 18, lineHeight: 1.5, color: LCB.ink60,
          margin: '24px auto 40px',
          maxWidth: 540, fontWeight: 400, letterSpacing: '-0.005em',
        }}>
          Bloqueie posts patrocinados, story-time corporativo e<br />
          engagement bait. Você decide o que entra.
        </p>

        {/* CTAs */}
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 12,
          marginBottom: 56,
        }}>
          <LCBButton variant="primary" size="lg">
            Adicionar ao Chrome
          </LCBButton>
          <LCBButton variant="outline" size="lg" iconRight={
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7h8m0 0L7.5 3.5M11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          }>
            Ver como funciona
          </LCBButton>
        </div>

        {/* Trust strip */}
        <div style={{
          fontSize: 13, color: LCB.ink40,
          letterSpacing: '-0.005em', marginBottom: 16,
        }}>
          Já varreu <strong style={{ color: LCB.ink, fontWeight: 700 }}>247.832 posts</strong> de feeds de gente como você
        </div>
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 8,
        }}>
          {['#FB923C', '#A855F7', '#10B981', '#0EA5E9', '#EC4899', '#F59E0B'].map((c, i) => (
            <div key={i} style={{
              width: 32, height: 32, borderRadius: '50%',
              background: c,
              border: `2px solid ${LCB.paper}`,
              marginLeft: i > 0 ? -10 : 0,
            }} />
          ))}
        </div>
      </div>

      {/* Preview slab */}
      <div style={{
        marginTop: 80, marginLeft: 56, marginRight: 56,
        height: 320, background: '#FFFFFF',
        border: `1px solid ${LCB.ink10}`,
        borderRadius: 32, position: 'relative', overflow: 'hidden',
        boxShadow: LCB.shFloat,
      }}>
        {/* Floating preview rows */}
        <div style={{
          position: 'absolute', top: 32, left: '50%', transform: 'translateX(-50%)',
          display: 'flex', flexDirection: 'column', gap: 12,
          width: 540,
        }}>
          {[
            { name: 'Acme · Patrocinado', bar: 0.85, removed: true },
            { name: 'Mariana Souza', bar: 0.92 },
            { name: 'Rafael · Story-time', bar: 0.7, removed: true },
            { name: 'Lucas Tavares', bar: 0.78 },
          ].map((p, i) => (
            <div key={i} style={{
              background: '#FFFFFF',
              border: `1px solid ${LCB.ink10}`,
              borderRadius: LCB.rLg, padding: 16,
              display: 'flex', alignItems: 'center', gap: 12,
              opacity: p.removed ? 0.45 : 1,
              position: 'relative',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: p.removed ? LCB.ink10 : ['#FB923C', '#A855F7', '#10B981', '#0EA5E9'][i],
                flexShrink: 0,
              }} />
              <div style={{ flex: 1 }}>
                <div style={{
                  fontSize: 12, fontWeight: 600, color: p.removed ? LCB.ink40 : LCB.ink,
                  letterSpacing: '-0.005em', marginBottom: 6,
                  textDecoration: p.removed ? 'line-through' : 'none',
                  textDecorationColor: LCB.ink40,
                }}>
                  {p.name}
                </div>
                <div style={{
                  height: 6, width: `${p.bar * 100}%`, borderRadius: 3,
                  background: LCB.ink10,
                }} />
              </div>
              {p.removed && (
                <div style={{
                  position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)',
                  background: LCB.blue, color: '#FFFFFF',
                  fontSize: 11, fontWeight: 600,
                  padding: '4px 10px', borderRadius: 999,
                  letterSpacing: '-0.005em',
                }}>
                  Varrido
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.LCBHero = LCBHero;