// Brand Kit — real assets only: the actual InfernoColors palette used
// across this site, the actual logo mark (favicon/favicon.svg is the same
// mark at icon scale), and the actual fonts. No fabricated lockup files or
// a press-kit ZIP that doesn't exist.

const SwatchCard = ({ name, hex }) => {
  const [copied, setCopied] = React.useState(false);
  const copy = () => {
    if (navigator.clipboard) navigator.clipboard.writeText(hex).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };
  return (
    <button onClick={copy} style={{ textAlign: 'left', cursor: 'pointer', border: '2px solid #1A0D08', borderRadius: 16, overflow: 'hidden', background: '#fff', fontFamily: 'inherit', padding: 0 }}>
      <div style={{ height: 72, background: hex }}/>
      <div style={{ padding: '10px 14px' }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: '#1A0D08' }}>{name}</div>
        <div style={{ fontSize: 12, color: '#5C3D28', fontFamily: "'JetBrains Mono', monospace" }}>{copied ? 'Copied!' : hex}</div>
      </div>
    </button>
  );
};

const InfernoBrandKit = () => {
  const colors = [
    ['Cream (background)', '#FFF4E8'],
    ['Ink (text)', '#1A0D08'],
    ['Ember (primary CTA)', '#E5421A'],
    ['Flame (accent)', '#FF7A1A'],
    ['Gold (highlight)', '#FFB800'],
    ['Mute (body text)', '#5C3D28'],
    ['Faint (secondary text)', '#A88770'],
    ['Dim (borders, dark mode)', '#3D2818'],
  ];
  return (
    <div style={{ background: '#FFF4E8', minHeight: '100vh' }}>
      <InfernoNav active="Brand kit"/>
      <section className="sec-pad" style={{ background: '#1A0D08', color: '#FFF4E8', padding: '72px 48px 64px', borderBottom: '2px solid #1A0D08' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FF7A1A' }}>Company</div>
          <h1 style={{ fontSize: 'clamp(32px, 6vw, 64px)', fontWeight: 900, letterSpacing: '-0.035em', lineHeight: 1, margin: '18px 0 0' }}>Brand Kit</h1>
        </div>
      </section>
      <div className="sec-pad" style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 48px 88px' }}>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: '#5C3D28', maxWidth: 700, marginBottom: 40 }}>
          If you're writing about Fire Your Agency, here's the actual mark and palette used across this site and the product — not placeholder assets.
        </p>

        <h2 style={{ fontSize: 22, fontWeight: 800, color: '#1A0D08', marginBottom: 16 }}>Logo</h2>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, marginBottom: 40 }}>
          <div style={{ background: '#FFF4E8', border: '2px solid #1A0D08', borderRadius: 16, padding: 32, display: 'flex', alignItems: 'center', gap: 12 }}>
            <InfernoLogo size={40}/>
            <span style={{ fontWeight: 800, fontSize: 22 }}>Fire Your Agency</span>
          </div>
          <div style={{ background: '#1A0D08', border: '2px solid #1A0D08', borderRadius: 16, padding: 32, display: 'flex', alignItems: 'center', gap: 12 }}>
            <InfernoLogo size={40}/>
            <span style={{ fontWeight: 800, fontSize: 22, color: '#FFF4E8' }}>Fire Your Agency</span>
          </div>
          <a href="favicon/favicon.svg" download style={{ background: '#fff', border: '2px solid #1A0D08', borderRadius: 16, padding: 32, display: 'flex', alignItems: 'center', gap: 16, textDecoration: 'none' }}>
            <img src="favicon/favicon.svg" alt="Fire Your Agency icon mark" width="40" height="40"/>
            <span style={{ fontWeight: 700, fontSize: 14, color: '#1A0D08' }}>Download icon mark (.svg) →</span>
          </a>
        </div>

        <h2 style={{ fontSize: 22, fontWeight: 800, color: '#1A0D08', marginBottom: 16 }}>Color palette</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 14, marginBottom: 40 }}>
          {colors.map(([name, hex]) => <SwatchCard key={hex} name={name} hex={hex}/>)}
        </div>

        <h2 style={{ fontSize: 22, fontWeight: 800, color: '#1A0D08', marginBottom: 16 }}>Typography</h2>
        <p style={{ fontSize: 15, lineHeight: 1.7, color: '#5C3D28', maxWidth: 700, marginBottom: 40 }}>
          Headlines and body text: <strong style={{ color: '#1A0D08' }}>Inter</strong>. Code, prices, and metadata: <strong style={{ color: '#1A0D08' }}>JetBrains Mono</strong>. Both are free, open-source, and loaded from Google Fonts on this site.
        </p>

        <div style={{ background: '#1A0D08', color: '#FFF4E8', border: '2px solid #1A0D08', borderRadius: 24, padding: '28px 30px', boxShadow: '6px 6px 0 #E5421A' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20, alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ fontWeight: 800, fontSize: 18, letterSpacing: '-0.02em' }}>Need something not here?</div>
            <a href="mailto:help@fireyouragency.net" style={{ background: '#FFF4E8', color: '#1A0D08', fontWeight: 700, fontSize: 14, textDecoration: 'none', borderRadius: 999, padding: '11px 20px', whiteSpace: 'nowrap' }}>Email us →</a>
          </div>
        </div>
      </div>
      <InfernoFooter/>
    </div>
  );
};

Object.assign(window, { InfernoBrandKit });