import styles from './BrandAssetsSection.module.css'
import camelLogoSvg from '../../../assets/camel-logo.svg'
import cameleer3Logo from '../../../assets/cameleer3-logo.png'
import cameleer3LogoSvg from '../../../assets/cameleer3-logo.svg'

const LOGO_SIZES = [16, 32, 48, 180, 192, 512] as const

export function BrandAssetsSection() {
  return (
    <section id="brand-assets" className={styles.section}>
      <h2 className={styles.sectionTitle}>Brand Assets</h2>

      <div className={styles.componentCard}>
        <h3 className={styles.componentTitle}>Cameleer3 Logo (PNG)</h3>
        <p className={styles.componentDesc}>
          Full-resolution logo and pre-generated size variants for favicons, PWA icons, and social images.
          Shipped as static assets via <code>@cameleer/design-system/assets/*</code> export.
        </p>
        <div className={styles.demoArea}>
          <div className={styles.logoGrid}>
            {LOGO_SIZES.map((size) => (
              <div key={size} className={styles.logoItem}>
                <div className={styles.logoPreview}>
                  <img
                    src={cameleer3Logo}
                    alt={`Logo ${size}×${size}`}
                    width={Math.min(size, 96)}
                    height={Math.min(size, 96)}
                  />
                </div>
                <span className={styles.logoLabel}>{size}×{size}</span>
                <code className={styles.logoExport}>assets/cameleer3-{size}.png</code>
              </div>
            ))}
            <div className={styles.logoItem}>
              <div className={styles.logoPreview}>
                <img
                  src={cameleer3Logo}
                  alt="Full resolution logo"
                  width={96}
                  height={96}
                />
              </div>
              <span className={styles.logoLabel}>Original</span>
              <code className={styles.logoExport}>assets/cameleer3-logo.png</code>
            </div>
          </div>
        </div>
      </div>

      <div className={styles.componentCard}>
        <h3 className={styles.componentTitle}>SVG Logos</h3>
        <p className={styles.componentDesc}>
          Vector logos for scalable usage. Transparent backgrounds, infinitely scalable.
        </p>
        <div className={styles.demoArea}>
          <div className={styles.logoGrid}>
            <div className={styles.logoItem}>
              <div className={styles.logoPreview}>
                <img src={cameleer3LogoSvg} alt="Cameleer3 SVG logo" width={96} height={96} />
              </div>
              <span className={styles.logoLabel}>Cameleer3 SVG</span>
              <code className={styles.logoExport}>assets/cameleer3-logo.svg</code>
            </div>
            <div className={styles.logoItem}>
              <div className={styles.logoPreview}>
                <img src={camelLogoSvg} alt="Camel SVG logo" width={96} height={96} />
              </div>
              <span className={styles.logoLabel}>Camel SVG</span>
              <code className={styles.logoExport}>assets/camel-logo.svg</code>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}