Pixelate Image

import PixelateImage from "./index.jsx";
import styles from "./demo.module.css";

export default function PixelateImageDemo() {
  return (
    <div className={styles.page}>

      {/* Hero */}
      <section className={styles.hero}>
        <PixelateImage
          src="/demo-assets/models/model3.png"
          alt=""
          trigger="load"
          duration={110}
          steps={16}
          columns={10}
          className={styles.heroImage}
        />
        <div className={styles.heroOverlay} />
        <div className={styles.heroContent}>
          <p className={styles.heroLabel}>Canvas · No dependencies</p>
          <h1 className={styles.heroTitle}>Pixelate<br />Image</h1>
        </div>
      </section>

      {/* Inview trigger */}
      <section className={styles.section}>
        <p className={styles.sectionLabel}>trigger="inview"</p>
        <p className={styles.sectionTitle}>Resolves pixel-by-pixel as it enters the viewport.</p>
        <PixelateImage
          src="/demo-assets/westend.png"
          alt="Westend"
          trigger="inview"
          duration={120}
          steps={14}
          columns={10}
          className={styles.banner}
        />
      </section>

      {/* Hover trigger */}
      <section className={styles.section}>
        <p className={styles.sectionLabel}>trigger="hover"</p>
        <p className={styles.sectionTitle}>Hover to reveal.</p>
        <div className={styles.grid}>
          {[
            { src: "/demo-assets/models/model0.png", label: "Sarah Chen" },
            { src: "/demo-assets/models/model1.png", label: "Marcus Reed" },
            { src: "/demo-assets/models/model2.png", label: "Aisha Williams" },
          ].map(({ src, label }) => (
            <div key={src} className={styles.cardWrap}>
              <PixelateImage
                src={src}
                alt={label}
                trigger="hover"
                duration={100}
                steps={10}
                columns={8}
                className={styles.card}
              />
              <span className={styles.cardLabel}>{label}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Click trigger */}
      <section className={styles.section}>
        <p className={styles.sectionLabel}>trigger="click"</p>
        <p className={styles.sectionTitle}>Click to reveal.</p>
        <div className={styles.grid}>
          {[
            { src: "/demo-assets/models/model3.png", label: "Jordan Park" },
            { src: "/demo-assets/models/model4.png", label: "Elena Torres" },
            { src: "/demo-assets/kickandbass.png", label: "Kickandbass" },
          ].map(({ src, label }) => (
            <div key={src} className={styles.cardWrap}>
              <PixelateImage
                src={src}
                alt={label}
                trigger="click"
                duration={140}
                steps={16}
                columns={12}
                className={styles.card}
              />
              <span className={styles.cardLabel}>{label}</span>
            </div>
          ))}
        </div>
      </section>

    </div>
  );
}